'更新'

src/components/TableBody/TableBody.vue

@@ -13,8 +13,8 @@
       </template>
     </TableHeader>
     <!-- 组件表格主体 -->
-    <TableData :tableList="tableList" :tableData="tableData" :tableType="tableType" @changeDisabledIf="changeDisabledIf"
+    <TableData :tableList="tableList" :tableData="tableData" :treeShow="treeShow" :tableType="tableType" @changeDisabledIf="changeDisabledIf"
-      @changeSingleDisabledIf="changeSingleDisabledIf" @handleSortChange="handleSortChange" ref="TableDataRef">
+      @changeSingleDisabledIf="changeSingleDisabledIf" @handleSortChange="handleSortChange" @handleTree="handleTree" ref="TableDataRef">
       <!-- 添加插槽 -->
       <template v-slot:default="{ currentCol, currentData }">
         <slot :currentCol="currentCol" :currentData="currentData" :name="currentCol.name" />
@@ -51,9 +51,12 @@ const props = defineProps({
   pagination: {
     type: Object,
   },
+  treeShow: {
+    type: Boolean,
+  },
 });
-
+console.log(props);
-const emit = defineEmits(["handleTableHeader", "handleTablePagination", "handleTableSort"]);
+const emit = defineEmits(["handleTableHeader", "handleTablePagination", "handleTableSort","handleTree"]);
 
 const TableHeaderRef = ref(); // TableHeaderRef 的 ref
 const TableDataRef = ref(); // TableData 的 ref
@@ -97,7 +100,9 @@ const handlePagination = (current) => {
 const handleSortChange = (column, prop, order) => {
   emit("handleTableSort", column, prop, order)
 }
-
+const handleTree = (val) =>{
+  emit('handleTree', val)
+}
 // 选中的值
 const selectData = ref([]);
 onMounted(() => {

src/components/TableBody/TableData.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="table-data">
+  <div class="table-data" style="display: flex; position: relative;">
+    <div class="trees">
+      <el-scrollbar height="80vh">
+        <div v-for="item in 100" :key="item" v-if="treeShow" class="treeData" @click="handleTree(item)">
+          测试数据 测试数据 测试数据
+        </div>
+      </el-scrollbar>
+    </div>
     <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" :height="tableHeight"
       v-loading="tableType.tableLoading" :row-class-name="rowClass" :row-key="tableType.tableTree ? 'id' : undefined"
       :tree-props="{ children: tableType.tableTreeName ? tableType.tableTreeName : 'children' }"
@@ -41,9 +48,13 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
+  treeShow: {
+    type: Boolean,
+    default: false
+  }
 })
 
-const emit = defineEmits(['changeDisabledIf', 'changeSingleDisabledIf', 'handleSortChange'])
+const emit = defineEmits(['changeDisabledIf', 'changeSingleDisabledIf', 'handleSortChange','handleTree'])
 
 // 表格 ref
 const multipleTableRef = ref()
@@ -105,7 +116,9 @@ watch(() => props.tableData, () => {
     selectData.value = []
   }
 })
-
+const handleTree = (val) =>{
+  emit('handleTree', val)
+}
 // 表格排序
 const handleSortChange = ({ column, prop, order }) => {
   emit('handleSortChange', column, prop, order)
@@ -120,4 +133,23 @@ defineExpose({
 .el-table :deep(.slecleRowColor) td {
   background: #ecf5ff !important;
 }
+
+.trees {
+  position: relative;
+  top: -2px;
+  .treeData {
+    width: 11.4167vw;
+    margin-right: 1.0417vw;
+    padding: 15px;
+    cursor: pointer;
+    -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none; 
+    &:hover {
+      background-color: #086dd9a0;
+      color: white;
+    }
+  }
+}
 </style>

src/components/TableBody/TableHeader.vue

@@ -5,6 +5,7 @@
         <template v-for="(item, index) in tableHeader[0].buttons">
           <el-button v-permission="tableHeader[2]?.create" type="primary" icon="Plus" v-if="item === 'create'"
             @click="emit('handle', 'create')" :key="index">新增</el-button>
+
           <el-button type="primary" icon="Edit" :disabled="singleDisabledIf" v-if="item === 'edit'"
             v-permission="tableHeader[2]?.edit" @click="emit('handle', 'edit')" :key="index">编辑</el-button>
           <span v-if="item === 'delete'" v-permission="tableHeader[2]?.delete">
@@ -14,6 +15,10 @@
               </template>
             </el-popconfirm>
           </span>
+
+          <el-button type="primary" icon="Connection" :disabled="singleDisabledIf" v-if="item === 'detail'"
+            v-permission="tableHeader[2]?.edit" @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"
               @click="emit('handle', item.name)" v-if="item.type === 'custom'" :key="index">{{ item.title }}</el-button>

src/router/index.js

@@ -36,11 +36,52 @@ const routes = [
        */
       // 项目管理
       {
-        path: "/project-manage",
+        path: "/dc/project-manage",
         component: () => import("../views/projectManage/index.vue"),
         name: "ProjectManage",
         meta: { title: "项目管理" },
       },
+      
+      // 规则管理
+      {
+        path: "/dc/rule",
+        component: () => import("../views/rule/index.vue"),
+        name: "rule",
+        meta: { title: "规则管理" },
+      },
+       // 元数据管理
+       {
+        path: "/dc/metaData",
+        component: () => import("../views/metaData/index.vue"),
+        name: "metaData",
+        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: "cleaningTask",
+      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: "新增服务接口" },
+  },
     ],
   },
   {

src/views/addprovide/index.vue

@@ -0,0 +1,358 @@
+<template>
+    <!-- 使用示例 -->
+    <div class="example">
+      <el-main>
+        <el-form ref="ruleFormRef" :model="form.region" :rules="addpro">
+          <el-row style="margin-bottom: 24px">
+            <el-col :span="24">
+              <el-button type="primary" @click="submitForm(ruleFormRef)"
+                >保存</el-button
+              >
+              <el-button @click="sysDept(ruleFormRef)">重置</el-button>
+              <el-button @click="route.back">返回</el-button>
+            </el-col>
+          </el-row>
+          <el-form-item label="服务名称" prop="name">
+            <el-input v-model="form.region.name" />
+          </el-form-item>
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="所属部门" prop="deptId">
+                <el-select
+                  @change="log"
+                  v-model="form.region.deptId"
+                  placeholder="请选择部门"
+                >
+                  <el-option
+                    v-for="(item, index) in play.oplen"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2" />
+            <el-col :span="11">
+              <el-form-item label="资源目录" prop="metadataId">
+                <el-select
+                  v-model="form.region.metadataId"
+                  placeholder="请选择资源目录"
+                >
+                  <el-option
+                    v-for="(item, index) in play.region"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="是否需要用户认证" prop="isAuth">
+                <el-select v-model="form.region.isAuth" placeholder="请选择">
+                  <el-option label="是" :value="1" />
+                  <el-option label="否" :value="0" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2" />
+            <el-col :span="11">
+              <el-form-item label="是否外网公开" prop="isPublic">
+                <el-select v-model="form.region.isPublic" placeholder="请选择">
+                  <el-option label="是" :value="1" />
+                  <el-option label="否" :value="0" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="资源描述" prop="intro">
+            <el-input v-model="form.region.intro" type="textarea" />
+          </el-form-item>
+        </el-form>
+      </el-main>
+      <el-footer>
+        <el-row style="margin-bottom: 24px">
+          <el-col :span="2">
+            <el-button type="primary" @click="opneDialogs">新建</el-button>
+          </el-col>
+        </el-row>
+        <el-table
+          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+          :data="form.region.interfaceList"
+        >
+          <el-table-column prop="sortNo" label="序号" />
+          <el-table-column prop="name" label="接口名称" />
+          <el-table-column prop="url" label="接口地址" />
+          <el-table-column prop="scope" label="开发范围" />
+          <el-table-column prop="intro" label="接口描述" />
+          <el-table-column prop="操作" label="操作">
+            <template #default="scope">
+              <el-button type="danger" text @click="delet(scope)">删除</el-button
+              ><el-button type="primary" text @click="fromVlauesj(scope)"
+                >编辑</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-footer>
+      <!-- <yd_diainputXMGL
+        ref="childrenRef"
+        @funFlag="funFlag"
+        @resetForm="resetForm"
+        :inputArray="inputArray"
+        :width="width"
+        :inputArrays="inputArrays"
+        :dialogVisible="moreConditionsXmgl"
+        :control="true"
+      /> -->
+    </div>
+  </template>
+        <script setup>
+  import { ref, reactive, watch, nextTick } from "vue";
+//   import yd_diainputXMGL from "@/components/yd_diang_xmgl.vue";
+  import { ElMessage, ElMessageBox } from "element-plus";
+  import http from "@/utils/request.js";
+  import { useRoute, useRouter } from "vue-router";
+  const route = useRouter();
+  const routes = useRoute();
+  const ruleFormRef = ref();
+  const play = reactive({
+    oplen: [],
+    region: [],
+    index: "",
+  });
+  const form = reactive({
+    region: {
+      deptId: "",
+      deptStr: "",
+      id: "",
+      interfaceList: [],
+      intro: "",
+      isAuth: 0,
+      isPublic: 0,
+      metadataId: "",
+      name: "",
+    },
+  });
+  // 声明组件方法
+  const childrenRef = ref(null);
+  // 关闭弹窗方法
+  const handleChildren1 = () => childrenRef.value.resetForms();
+  const width = ref("40%");
+  const inputArray = reactive([
+    {
+      type: "input",
+      title: "序号",
+      model: "sortNo",
+      row: 24,
+      placeholder: "请输入",
+      optionsValue: "updataOption",
+      SetectPla: "请选择",
+    },
+    {
+      type: "input",
+      title: "接口名称",
+      model: "name",
+      row: 24,
+      placeholder: "请输入",
+      optionsValue: "updataOption",
+      SetectPla: "请选择",
+    },
+    {
+      type: "input",
+      title: "接口地址",
+      model: "url",
+      row: 24,
+      placeholder: "请输入",
+      optionsValue: "updataOption",
+      SetectPla: "请选择",
+    },
+    {
+      type: "input",
+      title: "开发范围",
+      model: "scope",
+      row: 24,
+      placeholder: "请输入",
+      optionsValue: "updataOption",
+      SetectPla: "请选择",
+    },
+    {
+      type: "input",
+      title: "接口描述",
+      model: "intro",
+      row: 24,
+      placeholder: "请输入",
+      optionsValue: "updataOption",
+      SetectPla: "请选择",
+    },
+  ]);
+  // 表单验证
+  const inputArrays = reactive({
+    sortNo: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    url: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    scope: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    intro: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+  });
+  const addpro = reactive({
+    name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    deptId: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    metadataId: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    isAuth: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    isPublic: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+    intro: [{ required: true, message: "内容不能为空", trigger: "blur" }],
+  });
+  /* 更多弹框 */
+  const moreConditionsXmgl = ref(false);
+  
+  // 打开弹框
+  const opneDialogs = () => {
+    // 取反 watch监听
+    inputArray.forEach((element, index) => {
+      if (element.model) {
+        element.lable = null;
+      }
+    });
+    moreConditionsXmgl.value = !moreConditionsXmgl.value;
+  };
+  // 编辑赋值
+  const fromVlauesj = (datas) => {
+    play.index = datas.$index;
+    inputArray.forEach((element, index) => {
+      if (element.model) {
+        element.lable = datas.row[element.model];
+      }
+    });
+    // 添加id
+    moreConditionsXmgl.value = !moreConditionsXmgl.value;
+  };
+  // 接受子组件数据
+  const funFlag = (val) => {
+    if (play.index == "") {
+      form.region.interfaceList.push(JSON.parse(JSON.stringify(val)));
+      handleChildren1();
+    } else {
+      form.region.interfaceList[play.index] = JSON.parse(JSON.stringify(val));
+      play.index = "";
+  
+      handleChildren1();
+    }
+  };
+  
+  const resetForm = (val) => {
+    console.log(val);
+  };
+  const sysDept = (formEl) => {
+    if (!formEl) return;
+    formEl.resetFields();
+    form.region.interfaceList = [];
+  };
+  // 获取部门
+  const metadataProject = () => {
+    http.get("/metadata/sysDept").then((resp) => {
+      if (resp.code == 200) {
+        play.oplen = resp.data;
+      } else {
+        ElMessage.error(resp.message);
+      }
+    });
+  };
+  const deptId = (e) => {
+    http.get(`/metadata/metadata/list/?deptId=${e}`).then((resp) => {
+      if (resp.code == 200) {
+        play.region = resp.data;
+      } else {
+        ElMessage.error(resp.message);
+      }
+    });
+  };
+  const log = (e) => {
+    http
+      .get(`/metadata/metadata/list/?deptId=${form.region.deptId}`)
+      .then((resp) => {
+        form.region.metadataId = "";
+        if (resp.code == 200) {
+          play.region = resp.data;
+        } else {
+          ElMessage.error(resp.message);
+        }
+      });
+  };
+  
+  const dataCatalog = async () => {
+    http.post("/metadata/dataCatalog", form.region).then((resp) => {
+      if (resp.code == 200) {
+        ElMessage.success("保存成功");
+      } else {
+        ElMessage.error(resp.message);
+      }
+    });
+  };
+  const submitForm = async (formEl) => {
+    if (!formEl) return;
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        console.log(form.region.interfaceList.length);
+        if (form.region.interfaceList.length == 0) {
+          ElMessage.error("需创建一条接口数据");
+        } else {
+          dataCatalog();
+        }
+      } else {
+        console.log("error submit!", fields);
+      }
+    });
+  };
+  const delet = (e) => {
+    if (form.region.interfaceList.length <= 1) {
+      ElMessage.error("需保留一条数据");
+    } else {
+      form.region.interfaceList.splice(e.$index, 1);
+    }
+  };
+  metadataProject();
+  </script>
+  <style lang="scss" scoped>
+  .example {
+    .el-header {
+      background-color: rgb(246, 246, 246);
+    }
+    .el-aside {
+      width: 15%;
+      min-width: 200px;
+      background-color: #fff;
+      .el-menu {
+        min-height: calc(100vh - 130px);
+        border: #fff solid;
+        .el-menu-item.is-active {
+          color: #409eff;
+        }
+      }
+    }
+    .el-main {
+      background-color: #fff;
+      .el-scrollbar {
+        padding-right: 15px;
+      }
+      :deep(.set-select) {
+        width: 100%;
+      }
+      :deep(.el-select) {
+        width: 100%;
+      }
+    }
+    .el-footer {
+      padding-top: 15px;
+      margin-top: 16px;
+      min-height: calc(50.3vh);
+      background-color: #fff;
+    }
+  }
+  .el-button {
+    padding: 8px 10px;
+  }
+  </style>
+        

src/views/cleaningTask/index.vue

@@ -0,0 +1,359 @@
+<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">
+              <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: [
+          "delete",
+        ],
+      },
+      {
+        buttons: [
+          "refresh",
+          "filter",
+          {
+            name: "mixInput", // 混合筛选
+            options: [
+              { label: 1, value: 1 },
+              { label: 1, value: 1 },
+            ],
+            // permission: false, // 权限
+          },
+          {
+            type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+            name: "addButton", // 为 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: "fontButton", // 为 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: "fontButton", // 为 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":
+        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: {}, // 新增或者编辑表单值 （编辑必须传）
+  })
+  const handleSubmit = (formJsonValue) => {
+    formDialog.value = false
+  }
+  const form = ref({})
+  </script>
+  <style lang="scss" scoped></style>
+  

src/views/configurefields/index.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="tc">
+      <div class="at">
+        <div class="dx">
+          <div class="shang"><span>字段选择</span></div>
+          <div :class="data.sjlbs.length > 0 ? 'xia' : 'xia2'">
+            <el-radio-group
+              v-model="values"
+              v-if="data.sjlbs.length > 0"
+              @change="log"
+            >
+              <div
+                class="xz"
+                v-for="(item, index) in data.sjlbs"
+                :key="index"
+                style="padding-right;:10px;display: block;width: 100%;"
+              >
+                <el-radio :label="item.id" size="large">{{ item.name }}</el-radio>
+              </div>
+            </el-radio-group>
+            <div class="wsj" v-if="data.sjlbs.length <= 0">无数据</div>
+          </div>
+        </div>
+        <el-transfer
+          @change="change"
+          :props="{
+            key: 'id',
+            label: 'name',
+          }"
+          :titles="['规则选择', '已选规则']"
+          v-model="value"
+          :data="data.sjlb"
+        />
+      </div>
+      <el-table
+        :data="data.tableData"
+        style="width: 100%"
+        max-height="268"
+        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+      >
+        <el-table-column prop="metadataStr" label="元数据名称" />
+        <el-table-column prop="columnStr" label="字段名称" />
+        <el-table-column prop="ruleStr" label="规则名称" />
+      </el-table>
+      <div class="ats">
+        <div style="padding-right;:10px">
+          <el-button @click="fh">取消</el-button>
+        </div>
+        <div style="padding-left: 10px">
+          <el-button @click="bc" type="primary">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script setup >
+  import { ref, reactive, watch, nextTick } from "vue";
+  import { ElMessage, ElMessageBox } from "element-plus";
+  import http from "@/utils/request.js";
+  import { useRoute, useRouter } from "vue-router";
+  const route = useRoute();
+  const router = useRouter();
+  const value = ref([]);
+  const values = ref([]);
+  const handleChange = (value, direction, movedKeys) => {
+    console.log(value, direction, movedKeys);
+  };
+  const data = reactive({
+    codeid: "",
+    tableData: [],
+    tableDatas: [],
+    pagination: {
+      pageSize: "99999",
+      page: "1",
+    },
+    sjlb: [],
+    sjlbs: [],
+    param: {
+      metadataColumnRuleList: {},
+      metadataId: route.query.id,
+    },
+  });
+  // 获取数据事件
+  const metadataProject = () => {
+    const params = {
+      size: data.pagination.pageSize,
+      page: data.pagination.current,
+    };
+    http.get(`/metadata/columnRule/`, params).then((resp) => {
+      if (resp.code == 200) {
+        value.value = [];
+        data.sjlb = resp.data.records;
+        data.tableData.forEach((element) => {
+          if (data.codeid == element.columnId) {
+            value.value.push(element.ruleId);
+          }
+        });
+      } else {
+        ElMessage.error(resp.message);
+      }
+    });
+  };
+  const metadata = () => {
+    const params = {
+      metadataId: route.query.id,
+      size: data.pagination.pageSize,
+      page: data.pagination.current,
+    };
+    http.get("/metadata/metadataColumn", params).then((resp) => {
+      if (resp.code == 200) {
+        data.sjlbs = resp.data.records;
+      } else {
+        ElMessage.error(resp.message);
+      }
+    });
+  };
+  const bc = () => {
+    data.param.metadataColumnRuleList = [];
+    let ll = [];
+    let ls = [];
+  
+    value.value.forEach((element, indexs) => {
+      ll.push({
+        columnId: values.value,
+        id: "",
+        metadataId: route.query.id,
+        ruleId: element,
+      });
+    });
+    data.tableData.forEach((element, index) => {
+      ll.forEach((elements, indexs) => {
+        if (element.columnId == elements.columnId) {
+          if (element.ruleId == elements.ruleId) {
+            ll[indexs] = {
+              columnId: element.columnId,
+              id: element.id,
+              metadataId: element.metadataId,
+              ruleId: element.ruleId,
+            };
+          }
+        } else {
+          ls.push({
+            columnId: element.columnId,
+            id: element.id,
+            metadataId: element.metadataId,
+            ruleId: element.ruleId,
+          });
+        }
+      });
+    });
+    var newDataList = removalDuplicate(ls, "id");
+    console.log(newDataList);
+    console.log(ll);
+    data.param.metadataColumnRuleList = [...ll, ...newDataList];
+    meta();
+  };
+  function removalDuplicate(dataList, byName) {
+    var result = [];
+    var tem = {};
+    for (var i = 0; i < dataList.length; i++) {
+      if (!tem[dataList[i][byName]]) {
+        result.push(dataList[i]);
+        tem[dataList[i][byName]] = 1;
+      }
+    }
+    return result;
+  }
+  const meta = () => {
+    console.log(data.param);
+    http.post("/metadata/metadata/config", data.param).then((resp) => {
+      if (resp.code == 200) {
+        ElMessage.success("保存成功");
+        metadata();
+        Project();
+      } else {
+        metadata();
+        Project();
+        ElMessage.error(resp.message);
+      }
+    });
+  };
+  watch(
+    values,
+    (newval) => {
+      if (values.value.length !== 0) {
+        metadataProject();
+      } else {
+        data.sjlb = [];
+        value.value = [];
+      }
+    },
+    { deep: true }
+  );
+  // 获取数据
+  const fh = () => {
+    router.back();
+  };
+  const log = (e) => {
+    data.codeid = e;
+    metadataProject();
+  };
+  const Project = () => {
+    http.get(`/metadata/metadata/config/${route.query.id}`).then((resp) => {
+      if (resp.code == 200) {
+        data.tableData = resp.data;
+      } else {
+        ElMessage.error(resp.message);
+      }
+    });
+  };
+  metadata();
+  Project();
+  </script>
+  <style lang="scss" scoped>
+  .el-transfer {
+    --el-transfer-border-color: var(--el-border-color-lighter);
+    --el-transfer-border-radius: var(--el-border-radius-base);
+    --el-transfer-panel-width: 285px;
+    --el-transfer-panel-header-height: 53px;
+    --el-transfer-panel-header-bg-color: var(--el-fill-color-light);
+    --el-transfer-panel-footer-height: 40px;
+    --el-transfer-panel-body-height: 298px;
+    --el-transfer-item-height: 30px;
+    --el-transfer-filter-height: 32px;
+  }
+  .tc {
+    width: 100%;
+  }
+  .at {
+    text-align: center;
+    margin: 2vw auto;
+    display: flex;
+    justify-content: space-evenly;
+    .dx {
+      width: 285px;
+      border: 1px solid #ebeef5;
+      height: 352px;
+      background-color: #fff;
+      .shang {
+        background-color: var(--el-fill-color-light);
+        border-bottom: 1px solid #ebeef5;
+        text-align: left;
+        line-height: 53px;
+        height: 53px;
+        width: 100%;
+        span {
+          padding-left: 20px;
+        }
+      }
+      .xia {
+        text-align: left;
+        width: 285px;
+        height: 298px;
+        overflow-y: scroll;
+        .wsj {
+          margin: 0;
+          height: var(--el-transfer-item-height);
+          line-height: var(--el-transfer-item-height);
+          padding: 6px 15px 0;
+          color: var(--el-text-color-secondary);
+          text-align: center;
+        }
+  
+        .xz {
+          padding-left: 20px;
+        }
+      }
+    }
+    .xia2 {
+      text-align: left;
+      width: 285px;
+      height: 298px;
+      .wsj {
+        margin: 0;
+        height: var(--el-transfer-item-height);
+        line-height: var(--el-transfer-item-height);
+        padding: 6px 15px 0;
+        color: var(--el-text-color-secondary);
+        text-align: center;
+      }
+  
+      .xz {
+        padding-left: 20px;
+      }
+    }
+  }
+  .ats {
+    margin-top: 2vw;
+    margin-bottom: 2vw;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    .el-button {
+      padding: 8px 10px;
+    }
+  }
+  </style>

src/views/metaData/index.vue

@@ -0,0 +1,359 @@
+<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">
+              <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":
+        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: {}, // 新增或者编辑表单值 （编辑必须传）
+  })
+  const handleSubmit = (formJsonValue) => {
+    formDialog.value = false
+  }
+  const form = ref({})
+  </script>
+  <style lang="scss" scoped></style>
+  

src/views/projectManage/index.vue

@@ -64,6 +64,7 @@ const data = reactive({
         "create",
         "edit",
         "delete",
+        "detail",
         {
           type: "custom", //  // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
           name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复

src/views/rule/index.vue

@@ -0,0 +1,310 @@
+<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">
+              <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: [
+          "search",
+          "refresh",
+          "filter",
+        ],
+      },
+      // 基础操作按钮权限（没有配置 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":
+        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: {}, // 新增或者编辑表单值 （编辑必须传）
+  })
+  const handleSubmit = (formJsonValue) => {
+    formDialog.value = false
+  }
+  const form = ref({})
+  </script>
+  <style lang="scss" scoped></style>
+  

src/views/serviceInterface/index.vue

@@ -0,0 +1,349 @@
+<template>
+    <div class="example">
+        <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+            @handleTableSort="handleTableSort"  @handleTree="handleTree" 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">
+                        <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 表格头部
+     */
+    treeShow: true,
+    tableHeader: [
+        {
+            buttons: [
+
+            ],
+        },
+        {
+            buttons: [
+                "search",
+                "search",
+                "search",
+                {
+                    type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+                    name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+                    title: "搜索", // 按钮名称
+                    icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+                    // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+                    // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+                    isOpen: "custom",
+                    // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+                    disabled: false,
+                    // permission: false, // 权限
+                },
+
+                {
+                    type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+                    name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+                    title: "重置", // 按钮名称
+                    icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+                    // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+                    // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+                    isOpen: "custom",
+                    // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+                    disabled: false,
+                    // permission: false, // 权限
+                },
+
+                {
+                    type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+                    name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+                    title: "新建", // 按钮名称
+                    icon: "Message", // 自定义左侧按钮 （ 目前只支持 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":
+            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
+};
+const handleTree = (val) =>{
+    console.log('111111111',val);
+    
+}
+// 清空混合搜索
+// 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: {}, // 新增或者编辑表单值 （编辑必须传）
+})
+const handleSubmit = (formJsonValue) => {
+    formDialog.value = false
+}
+const form = ref({})
+</script>
+<style lang="scss" scoped></style>
+