From e2d8ae141b2eee78b6e951dfdc97b1c8099d8bae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=97=E6=80=9D?= <965386816@qq.com>
Date: Tue, 11 Jul 2023 15:46:13 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js          | 2 +-
 src/views/metaData/index.vue | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index c64fb12..0950b29 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,7 +67,7 @@ const routes = [
      {
       path: "/dc/serviceInterface",
       component: () => import("../views/serviceInterface/index.vue"),
-      name: "cleaningTask",
+      name: "serviceInterface",
       meta: { title: "服务接口" },
     },
     {
diff --git a/src/views/metaData/index.vue b/src/views/metaData/index.vue
index 49dc5cb..a91728a 100644
--- a/src/views/metaData/index.vue
+++ b/src/views/metaData/index.vue
@@ -11,7 +11,7 @@
       <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
         <template #default>
           <el-form :model="form" label-width="120px">
-            <el-form-item label="Activity name">
+            <el-form-item label="Activity name"  placeholder="please select your zone">
               <el-input v-model="form.name" />
             </el-form-item>
             <el-form-item label="Activity zone">
@@ -290,6 +290,7 @@
         console.log(type, data);
         break;
       case "edit":
+        handleCreate();
         console.log(type, data);
         break;
     }
@@ -350,6 +351,7 @@
     formJosnDisabled: false, // 表单是否禁用
     formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
   })
+
   const handleSubmit = (formJsonValue) => {
     formDialog.value = false
   }

From f60690c4c97c4a52916a6b7bd2f81c22a248a2e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=97=E6=80=9D?= <965386816@qq.com>
Date: Tue, 11 Jul 2023 17:11:14 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormDialog/FormDialog.vue |   3 +
 src/components/TableBody/TableHeader.vue |   2 +-
 src/views/metaData/index.vue             | 827 +++++++++++++----------
 vite.config.js                           |   4 +-
 4 files changed, 475 insertions(+), 361 deletions(-)

diff --git a/src/components/FormDialog/FormDialog.vue b/src/components/FormDialog/FormDialog.vue
index 3343003..82e484f 100644
--- a/src/components/FormDialog/FormDialog.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/TableBody/TableHeader.vue b/src/components/TableBody/TableHeader.vue
index 9dff5a1..d864c9d 100644
--- a/src/components/TableBody/TableHeader.vue
+++ b/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"
diff --git a/src/views/metaData/index.vue b/src/views/metaData/index.vue
index a91728a..c54f40d 100644
--- a/src/views/metaData/index.vue
+++ b/src/views/metaData/index.vue
@@ -1,361 +1,472 @@
 <template>
-    <div class="example">
-      <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
-        @handleTableSort="handleTableSort" ref="TableBodyRef">
-        <!-- 表格插槽使用 -->
-        <template #slotName="{ currentCol, currentData }">
-          <span style="color: #729880">{{ currentData }}</span>
-        </template>
-      </TableBody>
-  
-      <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
-        <template #default>
-          <el-form :model="form" label-width="120px">
-            <el-form-item label="Activity name"  placeholder="please select your zone">
-              <el-input v-model="form.name" />
-            </el-form-item>
-            <el-form-item label="Activity zone">
-              <el-select v-model="form.region" placeholder="please select your zone">
-                <el-option label="Zone one" value="shanghai" />
-                <el-option label="Zone two" value="beijing" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="Activity time">
-              <el-col :span="11">
-                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
-              </el-col>
-              <el-col :span="2" class="text-center">
-                <span class="text-gray-500">-</span>
-              </el-col>
-              <el-col :span="11">
-                <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
-              </el-col>
-            </el-form-item>
-          </el-form>
-        </template>
-      </FormDialog>
-    </div>
-  </template>
-  
-  <script setup>
-  import { ref, reactive } from "vue";
-  import TableBody from "@/components/TableBody/TableBody.vue";
-  import FormDialog from "@/components/FormDialog/FormDialog.vue";
-  
-  const TableBodyRef = ref();
-  const data = reactive({
-    /**
-     * @type {Object}
-     * @description 表格头部
-     */
-    tableHeader: [
-      {
-        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}
-     * @description 表格配置
-     */
-    tableList: [
-      {
-        type: "slot", // 设置为 slot 即可使用插槽
-        name: "slotName", // name 是作用域插槽的名字
-        label: "插槽",
-        show: true, // 是否显示
-        sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
-        // 排序方法，使用示例 （仅当 sortable 设置为 true 时生效）
-        sortableMethod: (a, b) => {
-          console.log(a.date);
-          // a 和 b 就是表格数据 (a 是第后一条，b 是前一条)
-          // 如果返回值小于 0 那么 a 排在前 b 在之前，等于 0 位置不变， 大于 0 那么 a 排在 b 之后
-          return new Date(a.date).getTime() - new Date(b.date).getTime();
-        },
-        width: 100,
-      },
-      {
-        name: "date",
-        label: "时间",
-        show: true,
-        sortable: "custom",
-      },
-      {
-        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,
-    },
-  });
-  // 表格头部处理事件
-  const handleTableHeader = ({ type, data }) => {
-    console.log(type, data);
-    switch (type) {
-      case "create":
-        handleCreate();
-        console.log(type, data);
-        break;
-      case "edit":
-        handleCreate();
-        console.log(type, data);
-        break;
-    }
-  };
-  // 表格分页事件
-  const handleTablePagination = (current) => {
-    console.log(current);
-  };
-  
-  // 表格自定义排序事件
-  const handleTableSort = (column, prop, order) => {
-    console.log(column, prop, order);
-  };
-  
-  // 插槽事件
-  const handleSlot = (val) => {
-    console.log(val);
-  };
-  
-  // 新增
-  const handleCreate = () => {
-    console.log(12);
-    formDialog.value = true
-  };
-  
-  // 清空混合搜索
-  // TableBodyRef.value.clearMixInput()
-  
-  // 清空搜索
-  // TableBodyRef.value.clearSearch()
-  
-  
-  /* 表单弹框 */
-  const formDialog = ref(false)
-  const FormDialogData = reactive({
-    title: '新增', // String | 必填 | 标题
-    width: '30%', // String | 默认值 30% | 弹框宽度
-    formType: 'slot', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
-    // 注意：以下配置为 json 时才有效
-    formJosnRules: {}, // 默认为{}，表单校验规则
-    formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
-    // form 元素
-    formJosnElement: [
-      {
-        type: 'input', // 元素类型
-        cloSpan: '24', // 栅格布局所占份数 （默认24）
-        disabled: false, // 元素是否禁用（默认为false）
-        label: '姓名', // 元素的 label
-        placeholder: '请填写姓名', // 元素的 placeholder
-        model: 'name', // 元素 form 的 key
-  
-        // options: [] // type 为 select 生效 （默认为 [] ）
-  
-        // dateType: [] // type 为 date 生效 （默认为 date ）
-        // dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
-      },
-    ],
-    formJosnDisabled: false, // 表单是否禁用
-    formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
-  })
+  <div class="example">
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+      ref="TableBodyRef">
 
-  const handleSubmit = (formJsonValue) => {
-    formDialog.value = false
+      <!-- 右侧顶部插槽 -->
+      <template #TableHeaderRight="{ selectData }">
+        <el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
+          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-select v-model="reqParams.projectId" placeholder="请选择项目" @change="init" clearable class="status-select">
+          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </template>
+
+      <!-- 表格插槽使用 -->
+      <template #state="{ 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 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 bmOptions = ref([])
+const TableBodyRef = ref();
+const data = reactive({
+  /**
+   * @type {Object}
+   * @description 表格头部
+   */
+  tableHeader: [
+    {
+      buttons: [
+        "create",
+        "edit",
+        "delete",
+        "detail",
+      ],
+    },
+    {
+      buttons: [
+        {
+          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, // 权限
+        },
+        
+        {
+          name: "mixInput", // 混合筛选
+          options: [
+            { label: '表中文名', value: 'name' },
+            { label: '表英文名', value: 'ename' },
+          ],
+          // 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: 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: "deptId",
+      label: "所属部门",
+      show: true,
+    },
+    {
+      name: "projectId",
+      label: "所属项目",
+      show: true,
+    },
+    {
+      name: "name",
+      label: "中文表名",
+      show: true,
+    },
+    {
+      name: "ename",
+      label: "英文表名",
+      show: true,
+    },
+    {
+      name: "intro",
+      label: "简介",
+      show: true,
+    },
+    {
+      type: "slot", // 设置为 slot 即可使用插槽
+      name: "state", // name 是作用域插槽的名字
+      label: "配置状态",
+      show: true, // 是否显示
+      // sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+      // 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;
   }
-  const form = ref({})
-  </script>
-  <style lang="scss" scoped></style>
-  
\ No newline at end of file
+};
+// 表格分页事件
+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
+  })
+}
+
+// 清空混合搜索
+// 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>
diff --git a/vite.config.js b/vite.config.js
index 83d4d6c..25bf35a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -29,9 +29,9 @@ export default defineConfig({
       '/api': { 
         // target: 'http://10.0.0.29:9999',
         // target: 'https://fywz.btdit.cn/',
-        target: 'http://10.0.0.74:7777/', // 刘进
+        target: 'http://10.0.0.65:7777/', // 刘进
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        // rewrite: (path) => path.replace(/^\/api/, '')
         // ws: true,// 开启webSocket
       }
     }

From f137561d6e221374efeabe5f32590255d72050f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=97=E6=80=9D?= <965386816@qq.com>
Date: Wed, 12 Jul 2023 10:36:35 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js       |   6 +
 src/views/field/index.vue | 472 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 478 insertions(+)
 create mode 100644 src/views/field/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 0950b29..af371a2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -82,6 +82,12 @@ const routes = [
     name: "addprovide",
     meta: { title: "新增服务接口" },
   },
+  {
+   path: "/dc/field",
+   component: () => import("../views/field/index.vue"),
+   name: "field",
+   meta: { title: "字段管理" },
+ },
     ],
   },
   {
diff --git a/src/views/field/index.vue b/src/views/field/index.vue
new file mode 100644
index 0000000..c54f40d
--- /dev/null
+++ b/src/views/field/index.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="example">
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+      ref="TableBodyRef">
+
+      <!-- 右侧顶部插槽 -->
+      <template #TableHeaderRight="{ selectData }">
+        <el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
+          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-select v-model="reqParams.projectId" placeholder="请选择项目" @change="init" clearable class="status-select">
+          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </template>
+
+      <!-- 表格插槽使用 -->
+      <template #state="{ 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 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 bmOptions = ref([])
+const TableBodyRef = ref();
+const data = reactive({
+  /**
+   * @type {Object}
+   * @description 表格头部
+   */
+  tableHeader: [
+    {
+      buttons: [
+        "create",
+        "edit",
+        "delete",
+        "detail",
+      ],
+    },
+    {
+      buttons: [
+        {
+          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, // 权限
+        },
+        
+        {
+          name: "mixInput", // 混合筛选
+          options: [
+            { label: '表中文名', value: 'name' },
+            { label: '表英文名', value: 'ename' },
+          ],
+          // 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: 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: "deptId",
+      label: "所属部门",
+      show: true,
+    },
+    {
+      name: "projectId",
+      label: "所属项目",
+      show: true,
+    },
+    {
+      name: "name",
+      label: "中文表名",
+      show: true,
+    },
+    {
+      name: "ename",
+      label: "英文表名",
+      show: true,
+    },
+    {
+      name: "intro",
+      label: "简介",
+      show: true,
+    },
+    {
+      type: "slot", // 设置为 slot 即可使用插槽
+      name: "state", // name 是作用域插槽的名字
+      label: "配置状态",
+      show: true, // 是否显示
+      // sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+      // 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;
+  }
+};
+// 表格分页事件
+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
+  })
+}
+
+// 清空混合搜索
+// 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>

From 583646d0a8a4c6146392de4e578c1e235e4c08f4 Mon Sep 17 00:00:00 2001
From: dengweisheng <dengws@ydool.com>
Date: Wed, 12 Jul 2023 11:51:21 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                  |   8 +-
 src/router/index.js          |  70 ++++++------
 src/views/field/index.vue    | 202 +++++++++++++----------------------
 src/views/metaData/index.vue |  28 ++++-
 4 files changed, 137 insertions(+), 171 deletions(-)

diff --git a/src/main.js b/src/main.js
index baed7a0..5bda438 100644
--- a/src/main.js
+++ b/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");
diff --git a/src/router/index.js b/src/router/index.js
index af371a2..c52e594 100644
--- a/src/router/index.js
+++ b/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,36 +58,36 @@ const routes = [
       },
       //清洗任务
       {
-       path: "/dc/cleaningTask",
-       component: () => import("../views/cleaningTask/index.vue"),
-       name: "cleaningTask",
-       meta: { title: "清洗任务" },
-     },
-     //服务接口
-     {
-      path: "/dc/serviceInterface",
-      component: () => import("../views/serviceInterface/index.vue"),
-      name: "serviceInterface",
-      meta: { title: "服务接口" },
-    },
-    {
-     path: "/dc/configurefields",
-     component: () => import("../views/configurefields/index.vue"),
-     name: "configurefields",
-     meta: { title: "配置字段" },
-   },
-   {
-    path: "/dc/addprovide",
-    component: () => import("../views/addprovide/index.vue"),
-    name: "addprovide",
-    meta: { title: "新增服务接口" },
-  },
-  {
-   path: "/dc/field",
-   component: () => import("../views/field/index.vue"),
-   name: "field",
-   meta: { title: "字段管理" },
- },
+        path: "/dc/cleaningTask",
+        component: () => import("../views/cleaningTask/index.vue"),
+        name: "cleaningTask",
+        meta: { title: "清洗任务" },
+      },
+      //服务接口
+      {
+        path: "/dc/serviceInterface",
+        component: () => import("../views/serviceInterface/index.vue"),
+        name: "serviceInterface",
+        meta: { title: "服务接口" },
+      },
+      {
+        path: "/dc/configurefields",
+        component: () => import("../views/configurefields/index.vue"),
+        name: "configurefields",
+        meta: { title: "配置字段" },
+      },
+      {
+        path: "/dc/addprovide",
+        component: () => import("../views/addprovide/index.vue"),
+        name: "addprovide",
+        meta: { title: "新增服务接口" },
+      },
+      {
+        path: "/dc/field",
+        component: () => import("../views/field/index.vue"),
+        name: "field",
+        meta: { title: "字段管理" },
+      },
     ],
   },
   {
@@ -105,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: "数据中台",
     },
diff --git a/src/views/field/index.vue b/src/views/field/index.vue
index c54f40d..b33558e 100644
--- a/src/views/field/index.vue
+++ b/src/views/field/index.vue
@@ -3,17 +3,6 @@
     <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
       ref="TableBodyRef">
 
-      <!-- 右侧顶部插槽 -->
-      <template #TableHeaderRight="{ selectData }">
-        <el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
-          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-        <el-select v-model="reqParams.projectId" placeholder="请选择项目" @change="init" clearable class="status-select">
-          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </template>
-
       <!-- 表格插槽使用 -->
       <template #state="{ currentCol, currentData }">
         <span>{{ currentData == '0' ? "未配置" : "已配置" }}</span>
@@ -27,11 +16,14 @@
 
 <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({
@@ -50,49 +42,7 @@ const data = reactive({
     },
     {
       buttons: [
-        {
-          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, // 权限
-        },
-        
-        {
-          name: "mixInput", // 混合筛选
-          options: [
-            { label: '表中文名', value: 'name' },
-            { label: '表英文名', value: 'ename' },
-          ],
-          // permission: false, // 权限
-        },
+        // "search"
       ],
     },
     // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
@@ -264,12 +214,10 @@ const handleDelete = (data) => {
 
 // 详情
 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);
+  http.get(`/api/metadataColumn`, { id }).then(response => {
     FormDialogData.formJsonData = response.data
     formDialog.value = true
     FormDialogData.formJosnDisabled = true
@@ -291,62 +239,45 @@ const FormDialogData = reactive({
   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' },
+      { required: true, message: '请填写中文字段名', trigger: 'blur' },
     ],
     ename: [
-      { required: true, message: '请填写英文表名', trigger: 'blur' },
+      { required: true, message: '请填写英文字段名', trigger: 'blur' },
     ],
     intro: [
       { required: true, message: '请填写简介', trigger: 'blur' },
     ],
-    state: [
-      { required: true, message: '请选择配置状态', trigger: 'blur' },
+    type: [
+      { required: true, message: '请填写字段类型', trigger: 'blur' },
     ],
-    dataNum: [
-      { 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: '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
+      label: '中文字段名', // 元素的 label
+      placeholder: '请填写中文字段名', // 元素的 placeholder
       model: 'name', // 元素 form 的 key
     },
     {
       type: 'input', // 元素类型
       cloSpan: 12, // 栅格布局所占份数 （默认24）
       disabled: false, // 元素是否禁用（默认为false）
-      label: '英文表名', // 元素的 label
-      placeholder: '请填写英文表名', // 元素的 placeholder
+      label: '英文字段名', // 元素的 label
+      placeholder: '请填写英文字段名', // 元素的 placeholder
       model: 'ename', // 元素 form 的 key
     },
     {
@@ -357,32 +288,57 @@ const FormDialogData = reactive({
       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: 'state', // 元素 form 的 key
+      label: '是否主键', // 元素的 label
+      placeholder: '请选择', // 元素的 placeholder
+      model: 'isPk', // 元素 form 的 key
       options: [
         {
-          label: '启用',
-          value: "1",
+          label: '是',
+          value: 1,
         },
         {
-          label: '未启用',
-          value: "0",
+          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: 'dataNum', // 元素 form 的 key
+      label: '排序', // 元素的 label
+      placeholder: '请填写排序', // 元素的 placeholder
+      model: 'sortNo', // 元素 form 的 key
     },
   ],
   formJosnDisabled: false, // 表单是否禁用
@@ -392,9 +348,10 @@ const FormDialogData = reactive({
 
 const handleSubmit = (formJsonValue) => {
   console.log(formJsonValue)
+  const metadataId = route.query.id
   switch (formDialogStatus.value) {
     case 'create':
-      http.post(`/api/system/metadata`, formJsonValue).then(response => {
+      http.post(`/api/metadataColumn`, { ...formJsonValue, metadataId }).then(response => {
         if (response.code == 200) {
           ElMessage({
             message: '新增成功',
@@ -406,18 +363,17 @@ const handleSubmit = (formJsonValue) => {
       })
       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
-        }
-      })
+      // 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;
@@ -429,27 +385,13 @@ const handleSubmit = (formJsonValue) => {
 const reqParams = reactive({
   page: data.pagination.current,
   size: data.pagination.pageSize,
-  deptId: undefined,
-  projectId: undefined,//	项目id
-  name: undefined,//	表中文名
-  ename: undefined, //表英文名
+  metadataId: route.query.id,
 })
 
-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 => {
+  http.get(`/api/metadataColumn`, reqParams).then(res => {
     if (res.code == 200) {
       console.log(res.data)
       data.tableData = res.data.rows
diff --git a/src/views/metaData/index.vue b/src/views/metaData/index.vue
index c54f40d..a34eacd 100644
--- a/src/views/metaData/index.vue
+++ b/src/views/metaData/index.vue
@@ -27,11 +27,14 @@
 
 <script setup>
 import { ref, reactive, onMounted } from "vue";
+import { useRouter } 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 router = useRouter()
+
 const bmOptions = ref([])
 const TableBodyRef = ref();
 const data = reactive({
@@ -57,7 +60,7 @@ const data = reactive({
           icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
           // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
           // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
+          isOpen: "single",
           // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
           disabled: false,
           // permission: false, // 权限
@@ -68,23 +71,23 @@ const data = reactive({
           icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
           // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
           // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
+          isOpen: "single",
           // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
           disabled: false,
           // permission: false, // 权限
         }, {
           type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          name: "Button", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+          name: "field", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
           title: "字段管理", // 按钮名称
           icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
           // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
           // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
+          isOpen: "single",
           // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
           disabled: false,
           // permission: false, // 权限
         },
-        
+
         {
           name: "mixInput", // 混合筛选
           options: [
@@ -213,6 +216,9 @@ const handleTableHeader = ({ type, data }) => {
     case "mixInput":
       handleMixInput(data);
       break;
+    case "field":
+      handleField(data);
+      break;
   }
 };
 // 表格分页事件
@@ -276,6 +282,18 @@ const handleDetail = (val) => {
   })
 }
 
+// 字段管理
+const handleField = (val) => {
+  const id = val[0].id
+  router.push({
+    path: '/dc/field',
+    query: {
+      id: id,
+    }
+  })
+
+}
+
 // 清空混合搜索
 // TableBodyRef.value.clearMixInput()
 

From 28677199300a3822aa0d47bfbb77b938c5cdec0b Mon Sep 17 00:00:00 2001
From: dengweisheng <dengws@ydool.com>
Date: Wed, 12 Jul 2023 15:58:27 +0800
Subject: [PATCH 5/5] update

---
 src/views/field/index.vue | 46 +++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/views/field/index.vue b/src/views/field/index.vue
index b33558e..e0de95d 100644
--- a/src/views/field/index.vue
+++ b/src/views/field/index.vue
@@ -4,8 +4,11 @@
       ref="TableBodyRef">
 
       <!-- 表格插槽使用 -->
-      <template #state="{ currentCol, currentData }">
-        <span>{{ currentData == '0' ? "未配置" : "已配置" }}</span>
+      <template #isRequired="{ currentCol, currentData }">
+        <span>{{ currentData == '0' ? "否" : "是" }}</span>
+      </template>
+      <template #isPk="{ currentCol, currentData }">
+        <span>{{ currentData == '0' ? "否" : "是" }}</span>
       </template>
     </TableBody>
 
@@ -86,23 +89,19 @@ const data = reactive({
     //   width: 100,
     // },
     {
-      name: "deptId",
-      label: "所属部门",
-      show: true,
-    },
-    {
-      name: "projectId",
-      label: "所属项目",
+      name: "sortNo",
+      label: "排序",
       show: true,
+      sortable: true,
     },
     {
       name: "name",
-      label: "中文表名",
+      label: "中文字段名",
       show: true,
     },
     {
       name: "ename",
-      label: "英文表名",
+      label: "英文字段名",
       show: true,
     },
     {
@@ -111,17 +110,22 @@ const data = reactive({
       show: true,
     },
     {
-      type: "slot", // 设置为 slot 即可使用插槽
-      name: "state", // name 是作用域插槽的名字
-      label: "配置状态",
-      show: true, // 是否显示
-      // sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
-      // width: 100,
+      name: "type",
+      label: "字段类型",
+      show: true,
     },
 
     {
-      name: "dataNum",
-      label: "数据量（只读）",
+      type: "slot", // 设置为 slot 即可使用插槽
+      name: "isPk", // name 是作用域插槽的名字
+      label: "是否主键",
+      show: true, // 是否显示
+    },
+
+    {
+      type: "slot",
+      name: "isRequired",
+      label: "是否必填",
       show: true,
     },
   ],
@@ -190,7 +194,7 @@ const handleEdit = (val) => {
   formDialogStatus.value = 'edit'
   const id = val[0].id
   FormDialogData.title = '编辑'
-  http.get(`/api/system/metadata/${id}`).then(response => {
+  http.get(`/api/metadataColumn/${id}`).then(response => {
     FormDialogData.formJsonData = response.data
     formDialog.value = true
   })
@@ -217,7 +221,7 @@ const handleDetail = (val) => {
   formDialogStatus.value = 'detail'
   const id = val[0].id
   FormDialogData.title = '详情'
-  http.get(`/api/metadataColumn`, { id }).then(response => {
+  http.get(`/api/metadataColumn/${id}`).then(response => {
     FormDialogData.formJsonData = response.data
     formDialog.value = true
     FormDialogData.formJosnDisabled = true