cxyy-admin/src/views/system/parts/export-config.vue

<template>
  <div id="export-config">
    <el-tabs type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="i in tableList" :key="i.table" :label="i.label" :name="i.table">
        <el-row justify="space-between" style="padding: 10px">
          <el-col :span="4">
            <el-button type="success" @click="toSave">保存当前数据设置</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addColumn">添加字段</el-button>
          </el-col>
        </el-row>
        <el-table :data="config" v-loading="loading" height="60vh">
          <el-table-column align="center" label="是否使用" prop="is_use" width="150px">
            <template #default="{ row }">
              <el-switch v-model="row.is_use" class="mb-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="使用" inactive-text="禁用" active-value="0" inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="字段" prop="column" width="150px">
            <template #default="{ row }">
              <el-input v-model="row.column"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="中文" prop="zh" width="150px">
            <template #default="{ row }">
              <el-input v-model="row.zh"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数据类型" prop="type" width="150px">
            <template #default="{ row }">
              <el-select v-model="row.type">
                <el-option v-for="i in typeList" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数据来源" prop="source" width="150px">
            <template #default="{ row }">
              <el-select v-model="row.source">
                <el-option v-for="i in sourceList" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="字典类型(code)/关联表名(小驼峰)">
            <template #default="{ row }">
              <template v-if="row.source && row.source !== 'write'">
                <el-input v-model="row.from"></el-input>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="导出字典/关联表使用字段">
            <template #default="{ row }">
              <template v-if="row.source !== 'write'">
                <el-input v-model="row.from_column"></el-input>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="{ $index }">
              <el-button type="danger" @click="deleteColumn($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ExportConfigStore } from '@/store/api/exportConfig'
import { get, cloneDeep } from 'lodash-es'
const store = ExportConfigStore()

const $checkRes = inject('$checkRes')
// 表
const tableList = ref([])
// 数据类型
const typeList = ref([])
// 数据来源
const sourceList = ref([])
const table = ref()
const config = ref([])
const configs = {
  demand: [
    { column: 'user', zh: '平台用户', type: 'string', source: 'write', is_use: '0' },
    { column: 'name', zh: '需求名称', type: 'string', source: 'write', is_use: '0' }
  ]
}

const addColumn = () => {
  config.value.push({})
}
const deleteColumn = (index) => {
  config.value.splice(index, 1)
}
const loading = ref(false)
const handleClick = async (tab, e) => {
  const nowView = get(tab, 'props.name')
  if (!nowView) return
  loading.value = true
  try {
    // 请求表设置
    const result = await store.fetch(nowView)
    if ($checkRes(result)) {
      console.log('get data')
      const data = get(result, 'data.config', [])
      table.value = nowView
      config.value = data
    }
  } catch (error) {}
  finally{
    loading.value = false
  }
}

const toSave = async () => {
  const table = table.value
  const config = config.value
  const obj = { table, config }
  const result = await store.update(obj)
  $checkRes(result, true, result.errmsg)
}

onMounted(() => {
  searchOthers()
})
const searchOthers = async () => {
  const result = await store.dict()
  if ($checkRes(result)) {
    const tl = get(result, 'data.typeList', [])
    const sl = get(result, 'data.sourceList', [])
    const tabl = get(result, 'data.tableList', [])
    typeList.value = tl
    sourceList.value = sl
    tableList.value = tabl
  }
}
</script>
<style scoped></style>