更新

src/components/FormDialog/FormDialog.vue

@@ -151,4 +151,7 @@ watch(() => props.modelValue, (newValue) => {
 :deep(.el-date-editor).el-input {
   width: 100% !important;
 }
+:deep(.el-input-number) {
+  width: 100% !important;
+}
 </style>

src/components/TableBody/TableHeader.vue

@@ -17,7 +17,7 @@
           </span>
 
           <el-button type="primary" icon="Connection" :disabled="singleDisabledIf" v-if="item === 'detail'"
-            v-permission="tableHeader[2]?.detail" @click="emit('handle', 'detail ')" :key="index">详情</el-button>
+            v-permission="tableHeader[2]?.detail" @click="emit('handle', 'detail')" :key="index">详情</el-button>
 
           <template v-if="Object.prototype.toString.call(item) === '[object Object]'">
             <el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"

src/main.js

@@ -6,6 +6,7 @@ import { createPinia } from "pinia";
 
 import ElementPlus from "element-plus"; //引入element-plus库
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import { ElMessage } from "element-plus";
 import VForm3 from "vform3-builds"; //引入VForm3库
 
@@ -89,4 +90,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 
 app.directive("permission", permission);
 
-app.use(ElementPlus).use(VForm3).use(createPinia()).use(router).mount("#app");
+app
+  .use(ElementPlus, { locale: zhCn })
+  .use(VForm3)
+  .use(createPinia())
+  .use(router)
+  .mount("#app");

src/router/index.js

@@ -41,7 +41,7 @@ const routes = [
         name: "ProjectManage",
         meta: { title: "项目管理" },
       },
-      
+
       // 规则管理
       {
         path: "/dc/rule",
@@ -49,8 +49,8 @@ const routes = [
         name: "rule",
         meta: { title: "规则管理" },
       },
-       // 元数据管理
+      // 元数据管理
-       {
+      {
         path: "/dc/metaData",
         component: () => import("../views/metaData/index.vue"),
         name: "metaData",
@@ -58,30 +58,36 @@ const routes = [
       },
       //清洗任务
       {
-       path: "/dc/cleaningTask",
+        path: "/dc/cleaningTask",
-       component: () => import("../views/cleaningTask/index.vue"),
+        component: () => import("../views/cleaningTask/index.vue"),
-       name: "cleaningTask",
+        name: "cleaningTask",
-       meta: { title: "清洗任务" },
+        meta: { title: "清洗任务" },
-     },
+      },
-     //服务接口
+      //服务接口
-     {
+      {
-      path: "/dc/serviceInterface",
+        path: "/dc/serviceInterface",
-      component: () => import("../views/serviceInterface/index.vue"),
+        component: () => import("../views/serviceInterface/index.vue"),
-      name: "cleaningTask",
+        name: "serviceInterface",
-      meta: { title: "服务接口" },
+        meta: { title: "服务接口" },
-    },
+      },
-    {
+      {
-     path: "/dc/configurefields",
+        path: "/dc/configurefields",
-     component: () => import("../views/configurefields/index.vue"),
+        component: () => import("../views/configurefields/index.vue"),
-     name: "configurefields",
+        name: "configurefields",
-     meta: { title: "配置字段" },
+        meta: { title: "配置字段" },
-   },
+      },
-   {
+      {
-    path: "/dc/addprovide",
+        path: "/dc/addprovide",
-    component: () => import("../views/addprovide/index.vue"),
+        component: () => import("../views/addprovide/index.vue"),
-    name: "addprovide",
+        name: "addprovide",
-    meta: { title: "新增服务接口" },
+        meta: { title: "新增服务接口" },
-  },
+      },
+      {
+        path: "/dc/field",
+        component: () => import("../views/field/index.vue"),
+        name: "field",
+        meta: { title: "字段管理" },
+      },
     ],
   },
   {
@@ -99,10 +105,10 @@ const routes = [
       title: "编辑器",
     },
     component: () => import("../views/codemirror/index.vue"),
-  }, 
+  },
   {
     path: "/data-flow-editor",
-    name: "data-flow-editor", 
+    name: "data-flow-editor",
     mete: {
       title: "数据中台",
     },

src/views/field/index.vue

@@ -0,0 +1,418 @@
+<template>
+  <div class="example">
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+      ref="TableBodyRef">
+
+      <!-- 表格插槽使用 -->
+      <template #isRequired="{ currentCol, currentData }">
+        <span>{{ currentData == '0' ? "否" : "是" }}</span>
+      </template>
+      <template #isPk="{ currentCol, currentData }">
+        <span>{{ currentData == '0' ? "否" : "是" }}</span>
+      </template>
+    </TableBody>
+
+    <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
+    </FormDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router"
+import TableBody from "@/components/TableBody/TableBody.vue";
+import FormDialog from "@/components/FormDialog/FormDialog.vue";
+import http from "@/utils/request.js";
+import { ElMessage } from "element-plus";
+
+const route = useRoute()
+
+const bmOptions = ref([])
+const TableBodyRef = ref();
+const data = reactive({
+  /**
+   * @type {Object}
+   * @description 表格头部
+   */
+  tableHeader: [
+    {
+      buttons: [
+        "create",
+        "edit",
+        "delete",
+        "detail",
+      ],
+    },
+    {
+      buttons: [
+        // "search"
+      ],
+    },
+    // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
+    // 不设置，或设置为 undefined、false 默认显示
+    {
+      create: undefined,
+      edit: false,
+      delete: false,
+      search: false,
+      advanced: false,
+      refresh: false,
+      bulkDelete: false,
+      filter: false,
+    },
+  ],
+  /**
+   * @type {Array}
+   * @description 表格参数
+   */
+  tableType: {
+    selection: true, // Boolean 是否多选
+    tableLoading: false, // Boolean 表格 loading
+    tableIndex: true, // Boolean 是否序号
+    tableTree: false, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
+    tableTreeName: "children", // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
+    isExpand: true, // Boolean 是否默认展开（默认为 false）
+    isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
+    changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
+  },
+  /**
+   * @type {Array}
+   * @description 表格配置
+   */
+  tableList: [
+    // {
+    //   type: "slot", // 设置为 slot 即可使用插槽
+    //   name: "slotName", // name 是作用域插槽的名字
+    //   label: "插槽",
+    //   show: true, // 是否显示
+    //   sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+    //   width: 100,
+    // },
+    {
+      name: "sortNo",
+      label: "排序",
+      show: true,
+      sortable: true,
+    },
+    {
+      name: "name",
+      label: "中文字段名",
+      show: true,
+    },
+    {
+      name: "ename",
+      label: "英文字段名",
+      show: true,
+    },
+    {
+      name: "intro",
+      label: "简介",
+      show: true,
+    },
+    {
+      name: "type",
+      label: "字段类型",
+      show: true,
+    },
+
+    {
+      type: "slot", // 设置为 slot 即可使用插槽
+      name: "isPk", // name 是作用域插槽的名字
+      label: "是否主键",
+      show: true, // 是否显示
+    },
+
+    {
+      type: "slot",
+      name: "isRequired",
+      label: "是否必填",
+      show: true,
+    },
+  ],
+
+  /**
+   * @type {Array}
+   * @description 表格数据(模拟数据)
+   */
+  tableData: [],
+  /**
+   * @type {Object}
+   * @description 分页数据
+   */
+  pagination: {
+    pageSize: 15,
+    current: 1,
+    total: 0,
+  },
+});
+// 表格头部处理事件
+const handleTableHeader = ({ type, data }) => {
+  console.log(type, '111111111111', data);
+  switch (type) {
+    case "create":
+      handleCreate();
+      break;
+    case "edit":
+      handleEdit(data);
+      break;
+    case "search":
+      handleSearch(data);
+      break;
+    case "delete":
+      handleDelete(data)
+      break;
+    case "detail":
+      handleDetail(data);
+      break;
+    case "mixInput":
+      handleMixInput(data);
+      break;
+  }
+};
+// 表格分页事件
+const handleTablePagination = (current) => {
+  console.log(current);
+};
+
+// 搜索
+const handleSearch = (val) => {
+  reqParams.name = val.value;
+  init();
+};
+
+// 新增
+const handleCreate = () => {
+  formDialogStatus.value = 'create'
+  FormDialogData.title = '新增'
+  FormDialogData.formJsonData = {}
+  formDialog.value = true
+};
+const fromId = ref('')
+// 编辑
+const handleEdit = (val) => {
+  console.log('val', val);
+  formDialogStatus.value = 'edit'
+  const id = val[0].id
+  FormDialogData.title = '编辑'
+  http.get(`/api/metadataColumn/${id}`).then(response => {
+    FormDialogData.formJsonData = response.data
+    formDialog.value = true
+  })
+};
+
+// 删除
+const handleDelete = (data) => {
+  const ids = data.map(item => {
+    return item.id
+  })
+  // http.post(`/api/config/removeBatch`, { ids }).then(res => {
+  //   if (res.code == 200) {
+  //     ElMessage({
+  //       message: '删除成功',
+  //       type: 'success',
+  //     })
+  //     init()
+  //   }
+  // })
+}
+
+// 详情
+const handleDetail = (val) => {
+  formDialogStatus.value = 'detail'
+  const id = val[0].id
+  FormDialogData.title = '详情'
+  http.get(`/api/metadataColumn/${id}`).then(response => {
+    FormDialogData.formJsonData = response.data
+    formDialog.value = true
+    FormDialogData.formJosnDisabled = true
+  })
+}
+
+// 清空混合搜索
+// TableBodyRef.value.clearMixInput()
+
+// 清空搜索
+// TableBodyRef.value.clearSearch()
+
+/* 表单弹框 */
+const formDialog = ref(false)
+const formDialogStatus = ref('')
+const FormDialogData = reactive({
+  title: '新增', // String | 必填 | 标题
+  width: '50%', // String | 默认值 30% | 弹框宽度
+  formType: 'json', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+  // 注意：以下配置为 json 时才有效
+  formJosnRules: {
+    name: [
+      { required: true, message: '请填写中文字段名', trigger: 'blur' },
+    ],
+    ename: [
+      { required: true, message: '请填写英文字段名', trigger: 'blur' },
+    ],
+    intro: [
+      { required: true, message: '请填写简介', trigger: 'blur' },
+    ],
+    type: [
+      { required: true, message: '请填写字段类型', trigger: 'blur' },
+    ],
+    isPk: [
+      { required: true, message: '请选择是否主键', trigger: 'blur' },
+    ],
+    isRequired: [
+      { required: true, message: '请选择是否必填', trigger: 'blur' },
+    ],
+    sortNo: [
+      { required: true, message: '请填写数排序', trigger: 'blur' },
+    ],
+  }, // 默认为{}，表单校验规则
+  formJosnLabelWidth: 'auto', // 默认为 120px，表单 label 宽度
+  // form 元素
+  formJosnElement: [
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '中文字段名', // 元素的 label
+      placeholder: '请填写中文字段名', // 元素的 placeholder
+      model: 'name', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '英文字段名', // 元素的 label
+      placeholder: '请填写英文字段名', // 元素的 placeholder
+      model: 'ename', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '简介', // 元素的 label
+      placeholder: '请填写简介', // 元素的 placeholder
+      model: 'intro', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '字段类型', // 元素的 label
+      placeholder: '请填写字段类型', // 元素的 placeholder
+      model: 'type', // 元素 form 的 key
+    },
+    {
+      type: 'select', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '是否主键', // 元素的 label
+      placeholder: '请选择', // 元素的 placeholder
+      model: 'isPk', // 元素 form 的 key
+      options: [
+        {
+          label: '是',
+          value: 1,
+        },
+        {
+          label: '否',
+          value: 0,
+        },
+      ] // type 为 select 生效 （默认为 [] ）
+    },
+    {
+      type: 'select', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '是否必填', // 元素的 label
+      placeholder: '请选择', // 元素的 placeholder
+      model: 'isRequired', // 元素 form 的 key
+      options: [
+        {
+          label: '是',
+          value: 1,
+        },
+        {
+          label: '否',
+          value: 0,
+        },
+      ] // type 为 select 生效 （默认为 [] ）
+    },
+    {
+      type: 'number', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '排序', // 元素的 label
+      placeholder: '请填写排序', // 元素的 placeholder
+      model: 'sortNo', // 元素 form 的 key
+    },
+  ],
+  formJosnDisabled: false, // 表单是否禁用
+  formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+})
+
+
+const handleSubmit = (formJsonValue) => {
+  console.log(formJsonValue)
+  const metadataId = route.query.id
+  switch (formDialogStatus.value) {
+    case 'create':
+      http.post(`/api/metadataColumn`, { ...formJsonValue, metadataId }).then(response => {
+        if (response.code == 200) {
+          ElMessage({
+            message: '新增成功',
+            type: 'success',
+          })
+          init()
+          formDialog.value = false
+        }
+      })
+      break;
+    case 'edit':
+      // http.post(`/api/system/metadata`, formJsonValue).then(response => {
+      //   if (response.code == 200) {
+      //     ElMessage({
+      //       message: '编辑成功',
+      //       type: 'success',
+      //     })
+      //     fromId.value = ''
+      //     init()
+      //     formDialog.value = false
+      //   }
+      // })
+      break;
+    default:
+      break;
+  }
+}
+
+
+/* 请求参数 */
+const reqParams = reactive({
+  page: data.pagination.current,
+  size: data.pagination.pageSize,
+  metadataId: route.query.id,
+})
+
+// 请求
+const init = () => {
+  data.tableType.tableLoading = true
+  http.get(`/api/metadataColumn`, reqParams).then(res => {
+    if (res.code == 200) {
+      console.log(res.data)
+      data.tableData = res.data.rows
+      data.tableType.tableLoading = false
+      data.pagination.total = res.data.count
+    }
+  }).catch(() => {
+    data.tableType.tableLoading = false
+  })
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss" scoped>
+.status-select {
+  width: 200px;
+}
+</style>

src/views/metaData/index.vue

@@ -1,359 +1,490 @@
 <template>
-    <div class="example">
+  <div class="example">
-      <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
-        @handleTableSort="handleTableSort" ref="TableBodyRef">
+      ref="TableBodyRef">
-        <!-- 表格插槽使用 -->
+
-        <template #slotName="{ currentCol, currentData }">
+      <!-- 右侧顶部插槽 -->
-          <span style="color: #729880">{{ currentData }}</span>
+      <template #TableHeaderRight="{ selectData }">
-        </template>
+        <el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
-      </TableBody>
+          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
-  
+        </el-select>
-      <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
+
-        <template #default>
+        <el-select v-model="reqParams.projectId" placeholder="请选择项目" @change="init" clearable class="status-select">
-          <el-form :model="form" label-width="120px">
+          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
-            <el-form-item label="Activity name">
+        </el-select>
-              <el-input v-model="form.name" />
+      </template>
-            </el-form-item>
+
-            <el-form-item label="Activity zone">
+      <!-- 表格插槽使用 -->
-              <el-select v-model="form.region" placeholder="please select your zone">
+      <template #state="{ currentCol, currentData }">
-                <el-option label="Zone one" value="shanghai" />
+        <span>{{ currentData == '0' ? "未配置" : "已配置" }}</span>
-                <el-option label="Zone two" value="beijing" />
+      </template>
-              </el-select>
+    </TableBody>
-            </el-form-item>
+
-            <el-form-item label="Activity time">
+    <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
-              <el-col :span="11">
+    </FormDialog>
-                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+  </div>
-              </el-col>
+</template>
-              <el-col :span="2" class="text-center">
+
-                <span class="text-gray-500">-</span>
+<script setup>
-              </el-col>
+import { ref, reactive, onMounted } from "vue";
-              <el-col :span="11">
+import { useRouter } from "vue-router"
-                <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+import TableBody from "@/components/TableBody/TableBody.vue";
-              </el-col>
+import FormDialog from "@/components/FormDialog/FormDialog.vue";
-            </el-form-item>
+import http from "@/utils/request.js";
-          </el-form>
+import { ElMessage } from "element-plus";
-        </template>
+
-      </FormDialog>
+const router = useRouter()
-    </div>
+
-  </template>
+const bmOptions = ref([])
-  
+const TableBodyRef = ref();
-  <script setup>
+const data = reactive({
-  import { ref, reactive } from "vue";
+  /**
-  import TableBody from "@/components/TableBody/TableBody.vue";
+   * @type {Object}
-  import FormDialog from "@/components/FormDialog/FormDialog.vue";
+   * @description 表格头部
-  
+   */
-  const TableBodyRef = ref();
+  tableHeader: [
-  const data = reactive({
+    {
-    /**
+      buttons: [
-     * @type {Object}
+        "create",
-     * @description 表格头部
+        "edit",
-     */
+        "delete",
-    tableHeader: [
+        "detail",
-      {
+      ],
-        buttons: [
-          "create",
-          "edit",
-          "delete",
-          "detail",
-        ],
-      },
-      {
-        buttons: [
-          "refresh",
-          "filter",
-          {
-            name: "mixInput", // 混合筛选
-            options: [
-              { label: 1, value: 1 },
-              { label: 1, value: 1 },
-            ],
-            // permission: false, // 权限
-          },
-          {
-            name: "sort", // 排序
-            options: [
-              { label: "按企业名称", value: 1 },
-              { label: "按姓名", value: 2 },
-            ],
-            // permission: false, // 权限
-          },
-          {
-            type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-            name: "ruleButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-            title: "配置规则", // 按钮名称
-            icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-            // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-            // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-            isOpen: "custom",
-            // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-            disabled: false,
-            // permission: false, // 权限
-          }, {
-            type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-            name: "dataButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-            title: "数据", // 按钮名称
-            icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-            // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-            // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-            isOpen: "custom",
-            // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-            disabled: false,
-            // permission: false, // 权限
-          }, {
-            type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-            name: "Button", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-            title: "字段管理", // 按钮名称
-            icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-            // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-            // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-            isOpen: "custom",
-            // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-            disabled: false,
-            // permission: false, // 权限
-          },
-        ],
-      },
-      // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
-      // 不设置，或设置为 undefined、false 默认显示
-      {
-        create: undefined,
-        edit: false,
-        delete: false,
-        search: false,
-        advanced: false,
-        refresh: false,
-        bulkDelete: false,
-        filter: false,
-      },
-    ],
-    /**
-     * @type {Array}
-     * @description 表格参数
-     */
-    tableType: {
-      selection: false, // Boolean 是否多选
-      tableLoading: false, // Boolean 表格 loading
-      tableIndex: true, // Boolean 是否序号
-      tableTree: true, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
-      tableTreeName: "children", // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
-      isExpand: true, // Boolean 是否默认展开（默认为 false）
-      isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
-      changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
     },
-    /**
+    {
-     * @type {Array}
+      buttons: [
-     * @description 表格配置
+        {
-     */
+          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-    tableList: [
+          name: "ruleButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-      {
+          title: "配置规则", // 按钮名称
-        type: "slot", // 设置为 slot 即可使用插槽
+          icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-        name: "slotName", // name 是作用域插槽的名字
+          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-        label: "插槽",
+          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-        show: true, // 是否显示
+          isOpen: "single",
-        sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-        // 排序方法，使用示例 （仅当 sortable 设置为 true 时生效）
+          disabled: false,
-        sortableMethod: (a, b) => {
+          // permission: false, // 权限
-          console.log(a.date);
+        }, {
-          // a 和 b 就是表格数据 (a 是第后一条，b 是前一条)
+          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          // 如果返回值小于 0 那么 a 排在前 b 在之前，等于 0 位置不变， 大于 0 那么 a 排在 b 之后
+          name: "dataButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-          return new Date(a.date).getTime() - new Date(b.date).getTime();
+          title: "数据", // 按钮名称
+          icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+          isOpen: "single",
+          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+          disabled: false,
+          // permission: false, // 权限
+        }, {
+          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+          name: "field", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+          title: "字段管理", // 按钮名称
+          icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+          isOpen: "single",
+          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+          disabled: false,
+          // permission: false, // 权限
         },
-        width: 100,
+
-      },
+        {
-      {
+          name: "mixInput", // 混合筛选
-        name: "date",
+          options: [
-        label: "时间",
+            { label: '表中文名', value: 'name' },
-        show: true,
+            { label: '表英文名', value: 'ename' },
-        sortable: "custom",
+          ],
-      },
+          // permission: false, // 权限
-      {
+        },
-        name: "name",
+      ],
-        label: "姓名",
-        show: true,
-      },
-      {
-        name: "state",
-        label: "状态",
-        show: true,
-      },
-      {
-        name: "city",
-        label: "城市",
-        show: true,
-      },
-      {
-        name: "address",
-        label: "地址",
-        show: true,
-      },
-      {
-        name: "zip",
-        label: "邮编",
-        show: true,
-      },
-    ],
-  
-    /**
-     * @type {Array}
-     * @description 表格数据(模拟数据)
-     */
-    tableData: [
-      {
-        id: 1,
-        date: "2016-05-01",
-        name: "Tom",
-        state: "California",
-        city: "Los Angeles",
-        address: "No. 189, Grove St, Los Angeles",
-        zip: "CA 90036",
-        slotName: "插槽",
-        children: [
-          {
-            id: 2,
-            date: "2016-05-01",
-            name: "Tom",
-            state: "California",
-            city: "Los Angeles",
-            address: "No. 189, Grove St, Los Angeles",
-            zip: "CA 90036",
-            slotName: "插槽",
-          },
-          {
-            id: 3,
-            date: "2016-05-01",
-            name: "Tom",
-            state: "California",
-            city: "Los Angeles",
-            address: "No. 189, Grove St, Los Angeles",
-            zip: "CA 90036",
-            slotName: "插槽",
-          },
-        ],
-      },
-      {
-        id: 4,
-        date: "2016-05-02",
-        name: "Tom",
-        state: "California",
-        city: "Los Angeles",
-        address: "No. 189, Grove St, Los Angeles",
-        zip: "CA 90036",
-        slotName: "插槽",
-      },
-      {
-        id: 5,
-        date: "2016-05-03",
-        name: "Tom",
-        state: "California",
-        city: "Los Angeles",
-        address: "No. 189, Grove St, Los Angeles",
-        zip: "CA 90036",
-        slotName: "插槽",
-      },
-      {
-        id: 6,
-        date: "2016-05-04",
-        name: "Tom",
-        state: "California",
-        city: "Los Angeles",
-        address: "No. 189, Grove St, Los Angeles",
-        zip: "CA 90036",
-        slotName: "插槽",
-      },
-      {
-        id: 7,
-        date: "2016-05-05",
-        name: "Tom",
-        state: "California",
-        city: "Los Angeles",
-        address: "No. 189, Grove St, Los Angeles",
-        zip: "CA 90036",
-        slotName: "插槽",
-      },
-    ],
-    /**
-     * @type {Object}
-     * @description 分页数据
-     */
-    pagination: {
-      pageSize: 10,
-      current: 1,
-      total: 0,
     },
-  });
+    // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
-  // 表格头部处理事件
+    // 不设置，或设置为 undefined、false 默认显示
-  const handleTableHeader = ({ type, data }) => {
+    {
-    console.log(type, data);
+      create: undefined,
-    switch (type) {
+      edit: false,
-      case "create":
+      delete: false,
-        handleCreate();
+      search: false,
-        console.log(type, data);
+      advanced: false,
-        break;
+      refresh: false,
-      case "edit":
+      bulkDelete: false,
-        console.log(type, data);
+      filter: false,
-        break;
+    },
-    }
+  ],
-  };
+  /**
-  // 表格分页事件
+   * @type {Array}
-  const handleTablePagination = (current) => {
+   * @description 表格参数
-    console.log(current);
+   */
-  };
+  tableType: {
-  
+    selection: true, // Boolean 是否多选
-  // 表格自定义排序事件
+    tableLoading: false, // Boolean 表格 loading
-  const handleTableSort = (column, prop, order) => {
+    tableIndex: true, // Boolean 是否序号
-    console.log(column, prop, order);
+    tableTree: false, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
-  };
+    tableTreeName: "children", // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
-  
+    isExpand: true, // Boolean 是否默认展开（默认为 false）
-  // 插槽事件
+    isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
-  const handleSlot = (val) => {
+    changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
-    console.log(val);
+  },
-  };
+  /**
-  
+   * @type {Array}
-  // 新增
+   * @description 表格配置
-  const handleCreate = () => {
+   */
-    console.log(12);
+  tableList: [
-    formDialog.value = true
+    // {
-  };
+    //   type: "slot", // 设置为 slot 即可使用插槽
-  
+    //   name: "slotName", // name 是作用域插槽的名字
-  // 清空混合搜索
+    //   label: "插槽",
-  // TableBodyRef.value.clearMixInput()
+    //   show: true, // 是否显示
-  
+    //   sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
-  // 清空搜索
+    //   width: 100,
-  // TableBodyRef.value.clearSearch()
+    // },
-  
+    {
-  
+      name: "deptId",
-  /* 表单弹框 */
+      label: "所属部门",
-  const formDialog = ref(false)
+      show: true,
-  const FormDialogData = reactive({
+    },
-    title: '新增', // String | 必填 | 标题
+    {
-    width: '30%', // String | 默认值 30% | 弹框宽度
+      name: "projectId",
-    formType: 'slot', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+      label: "所属项目",
-    // 注意：以下配置为 json 时才有效
+      show: true,
-    formJosnRules: {}, // 默认为{}，表单校验规则
+    },
-    formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
+    {
-    // form 元素
+      name: "name",
-    formJosnElement: [
+      label: "中文表名",
-      {
+      show: true,
-        type: 'input', // 元素类型
+    },
-        cloSpan: '24', // 栅格布局所占份数 （默认24）
+    {
-        disabled: false, // 元素是否禁用（默认为false）
+      name: "ename",
-        label: '姓名', // 元素的 label
+      label: "英文表名",
-        placeholder: '请填写姓名', // 元素的 placeholder
+      show: true,
-        model: 'name', // 元素 form 的 key
+    },
-  
+    {
-        // options: [] // type 为 select 生效 （默认为 [] ）
+      name: "intro",
-  
+      label: "简介",
-        // dateType: [] // type 为 date 生效 （默认为 date ）
+      show: true,
-        // dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
+    },
-      },
+    {
-    ],
+      type: "slot", // 设置为 slot 即可使用插槽
-    formJosnDisabled: false, // 表单是否禁用
+      name: "state", // name 是作用域插槽的名字
-    formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+      label: "配置状态",
-  })
+      show: true, // 是否显示
-  const handleSubmit = (formJsonValue) => {
+      // sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
-    formDialog.value = false
+      // width: 100,
+    },
+
+    {
+      name: "dataNum",
+      label: "数据量（只读）",
+      show: true,
+    },
+  ],
+
+  /**
+   * @type {Array}
+   * @description 表格数据(模拟数据)
+   */
+  tableData: [],
+  /**
+   * @type {Object}
+   * @description 分页数据
+   */
+  pagination: {
+    pageSize: 15,
+    current: 1,
+    total: 0,
+  },
+});
+// 表格头部处理事件
+const handleTableHeader = ({ type, data }) => {
+  console.log(type, '111111111111', data);
+  switch (type) {
+    case "create":
+      handleCreate();
+      break;
+    case "edit":
+      handleEdit(data);
+      break;
+    case "search":
+      handleSearch(data);
+      break;
+    case "delete":
+      handleDelete(data)
+      break;
+    case "detail":
+      handleDetail(data);
+      break;
+    case "mixInput":
+      handleMixInput(data);
+      break;
+    case "field":
+      handleField(data);
+      break;
   }
-  const form = ref({})
+};
-  </script>
+// 表格分页事件
-  <style lang="scss" scoped></style>
+const handleTablePagination = (current) => {
-  
+  console.log(current);
+};
+
+// 搜索
+const handleSearch = (val) => {
+  reqParams.name = val.value;
+  init();
+};
+
+// 新增
+const handleCreate = () => {
+  formDialogStatus.value = 'create'
+  FormDialogData.title = '新增'
+  FormDialogData.formJsonData = {}
+  formDialog.value = true
+};
+const fromId = ref('')
+// 编辑
+const handleEdit = (val) => {
+  console.log('val', val);
+  formDialogStatus.value = 'edit'
+  const id = val[0].id
+  FormDialogData.title = '编辑'
+  http.get(`/api/system/metadata/${id}`).then(response => {
+    FormDialogData.formJsonData = response.data
+    formDialog.value = true
+  })
+};
+
+// 删除
+const handleDelete = (data) => {
+  const ids = data.map(item => {
+    return item.id
+  })
+  // http.post(`/api/config/removeBatch`, { ids }).then(res => {
+  //   if (res.code == 200) {
+  //     ElMessage({
+  //       message: '删除成功',
+  //       type: 'success',
+  //     })
+  //     init()
+  //   }
+  // })
+}
+
+// 详情
+const handleDetail = (val) => {
+  console.log('val', val);
+  formDialogStatus.value = 'detail'
+  const id = val[0].id
+  FormDialogData.title = '详情'
+  http.get(`/api/system/metadata/${id}`).then(response => {
+    console.log('response', response);
+    FormDialogData.formJsonData = response.data
+    formDialog.value = true
+    FormDialogData.formJosnDisabled = true
+  })
+}
+
+// 字段管理
+const handleField = (val) => {
+  const id = val[0].id
+  router.push({
+    path: '/dc/field',
+    query: {
+      id: id,
+    }
+  })
+
+}
+
+// 清空混合搜索
+// TableBodyRef.value.clearMixInput()
+
+// 清空搜索
+// TableBodyRef.value.clearSearch()
+
+/* 表单弹框 */
+const formDialog = ref(false)
+const formDialogStatus = ref('')
+const FormDialogData = reactive({
+  title: '新增', // String | 必填 | 标题
+  width: '50%', // String | 默认值 30% | 弹框宽度
+  formType: 'json', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+  // 注意：以下配置为 json 时才有效
+  formJosnRules: {
+    deptId: [
+      { required: true, message: '请选择所属部门', trigger: 'blur' },
+    ],
+    projectId: [
+      { required: true, message: '请填写所属项目', trigger: 'blur' },
+    ],
+    name: [
+      { required: true, message: '请填写中文表名', trigger: 'blur' },
+    ],
+    ename: [
+      { required: true, message: '请填写英文表名', trigger: 'blur' },
+    ],
+    intro: [
+      { required: true, message: '请填写简介', trigger: 'blur' },
+    ],
+    state: [
+      { required: true, message: '请选择配置状态', trigger: 'blur' },
+    ],
+    dataNum: [
+      { required: true, message: '请填写数据量', trigger: 'blur' },
+    ],
+  }, // 默认为{}，表单校验规则
+  formJosnLabelWidth: 'auto', // 默认为 120px，表单 label 宽度
+  // form 元素
+  formJosnElement: [
+    {
+      type: 'tree-select', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '所属部门', // 元素的 label
+      placeholder: '请选择所属部门', // 元素的 placeholder
+      model: 'deptId', // 元素 form 的 key
+      options: bmOptions // type 为 select 生效 （默认为 [] ）
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '所属项目', // 元素的 label
+      placeholder: '请填写所属项目', // 元素的 placeholder
+      model: 'projectId', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '中文表名', // 元素的 label
+      placeholder: '请填写中文表名', // 元素的 placeholder
+      model: 'name', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '英文表名', // 元素的 label
+      placeholder: '请填写英文表名', // 元素的 placeholder
+      model: 'ename', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '简介', // 元素的 label
+      placeholder: '请填写简介', // 元素的 placeholder
+      model: 'intro', // 元素 form 的 key
+    },
+    {
+      type: 'select', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '配置状态', // 元素的 label
+      placeholder: '请选择配置状态', // 元素的 placeholder
+      model: 'state', // 元素 form 的 key
+      options: [
+        {
+          label: '启用',
+          value: "1",
+        },
+        {
+          label: '未启用',
+          value: "0",
+        },
+      ] // type 为 select 生效 （默认为 [] ）
+    },
+
+    {
+      type: 'number', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '数据量', // 元素的 label
+      placeholder: '请填写数据量', // 元素的 placeholder
+      model: 'dataNum', // 元素 form 的 key
+    },
+  ],
+  formJosnDisabled: false, // 表单是否禁用
+  formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+})
+
+
+const handleSubmit = (formJsonValue) => {
+  console.log(formJsonValue)
+  switch (formDialogStatus.value) {
+    case 'create':
+      http.post(`/api/system/metadata`, formJsonValue).then(response => {
+        if (response.code == 200) {
+          ElMessage({
+            message: '新增成功',
+            type: 'success',
+          })
+          init()
+          formDialog.value = false
+        }
+      })
+      break;
+    case 'edit':
+      formJsonValue.id = formJsonValue.id
+      http.post(`/api/system/metadata`, formJsonValue).then(response => {
+        if (response.code == 200) {
+          ElMessage({
+            message: '编辑成功',
+            type: 'success',
+          })
+          fromId.value = ''
+          init()
+          formDialog.value = false
+        }
+      })
+      break;
+    default:
+      break;
+  }
+}
+
+
+/* 请求参数 */
+const reqParams = reactive({
+  page: data.pagination.current,
+  size: data.pagination.pageSize,
+  deptId: undefined,
+  projectId: undefined,//	项目id
+  name: undefined,//	表中文名
+  ename: undefined, //表英文名
+})
+
+const handleMixInput = (val) => {
+  reqParams.name = undefined
+  reqParams.ename = undefined
+  if (val.seachMixSelect.value === '' || val.seachMixInput.value === '') {
+    init()
+    return
+  }
+  reqParams[val.seachMixSelect.value] = val.seachMixInput.value
+  init()
+}
+
+// 请求
+const init = () => {
+  data.tableType.tableLoading = true
+  http.get(`/api/system/metadata`, reqParams).then(res => {
+    if (res.code == 200) {
+      console.log(res.data)
+      data.tableData = res.data.rows
+      data.tableType.tableLoading = false
+      data.pagination.total = res.data.count
+    }
+  }).catch(() => {
+    data.tableType.tableLoading = false
+  })
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss" scoped>
+.status-select {
+  width: 200px;
+}
+</style>