更新

package.json

@@ -18,6 +18,7 @@
     "element-plus": "^2.3.5",
     "jsencrypt": "^3.3.2",
     "jsplumb": "^2.15.6",
+    "lodash.clonedeep": "^4.5.0",
     "mitt": "^3.0.0",
     "pinia": "^2.1.3",
     "sass": "^1.62.1",

src/components/FormDialog/FormDialog.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="title" :width="width" :before-close="handleClose">
+    <template v-if="formType == 'slot'">
+      <slot></slot>
+    </template>
+    <template v-if="formType == 'json'">
+      <el-form ref="formRef" :model="form" :rules="formJosnRules" :label-width="formJosnLabelWidth"
+        :disabled="formJosnDisabled">
+        <el-row :gutter="20">
+          <template v-for="item in formJosnElement">
+            <el-col :span="item.cloSpan || 24">
+              <el-form-item :label="item.label" :prop="item.model">
+                <!-- input -->
+                <el-input v-if="item.type == 'input'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
+                  :placeholder="item.placeholder" />
+
+                <!-- number -->
+                <el-input-number v-if="item.type == 'number'" :disabled="Boolean(item.disabled)"
+                  v-model="form[item.model]" :placeholder="item.placeholder" />
+
+                <!-- select -->
+                <el-select v-if="item.type == 'select'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
+                  :placeholder="item.placeholder">
+                  <el-option v-for="optionItem in item.options" :key="optionItem.value" :label="optionItem.label"
+                    :value="optionItem.value" />
+                </el-select>
+
+                <!-- date  -->
+                <el-date-picker v-if="item.type == 'date'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
+                  :type="item.dateType || date" :value-format="item.format || 'YYYY-MM-DD'"
+                  :placeholder="item.placeholder" />
+
+                <!-- tree-select -->
+                <el-tree-select v-if="item.type == 'tree-select'" v-model="form[item.model]" :data="item.options"
+                  check-strictly :render-after-expand="false" :disabled="Boolean(item.disabled)" />
+
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </el-form>
+    </template>
+    <template #footer>
+      <span class="dialog-footer" v-if="!formJosnDisabled">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import cloneDeep from "lodash.clonedeep";
+
+const props = defineProps({
+  /**
+   * @type {String}
+   * @description 表单弹框类型 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+   */
+  formType: {
+    type: String,
+    default: 'slot'
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: String,
+    default: '30%'
+  },
+  /* 以下配置在 formType 为 json 时有效 */
+  // 表单校验规则
+  formJosnRules: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  // 表单 label 宽度
+  formJosnLabelWidth: {
+    type: String,
+    default: '120px'
+  },
+  // 表单元素
+  formJosnElement: {
+    type: Array,
+    default: () => []
+  },
+  formJosnDisabled: {
+    type: Boolean,
+    default: false
+  },
+  // 表单校验规则
+  modelValue: {}
+})
+const emit = defineEmits(['update:modelValue', 'handleSubmit'])
+
+
+const dialogVisible = ref(false)
+const formRef = ref()
+const form = ref({})
+
+// 取消
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+
+// 确认
+const handleSubmit = async () => {
+  if (props.formType == 'json ') {
+    await formRef.value.validate((valid, fields) => {
+      if (valid) {
+        emit('handleSubmit', form.value)
+      } else {
+        console.log('error submit!', fields)
+      }
+    })
+  } else {
+    emit('handleSubmit', form.value)
+  }
+}
+
+watch(() => props.modelValue, (newValue) => {
+  // console.log(newValue, 'newValue')
+  dialogVisible.value = props.modelValue
+  if (props.formType == 'json' && newValue) {
+    nextTick(() => {
+      ruleFormRef.value.clearValidate() // 清除表单校验信息
+      formData.value = cloneDeep(props.formJsonData) // 表单赋值
+    })
+  }
+})
+</script>
+<style lang='scss' scoped></style>

src/components/FormDialog/example.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- 使用示例 -->
+  <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>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+/* 表单弹框 */
+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/components/TableBody/TableBody.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="table-body">
+    <!-- 组件头部 -->
+    <TableHeader :tableHeader="tableHeader" :disabledIf="disabledIf" :singleDisabledIf="singleDisabledIf"
+      :tableList="tableList" @filter="filter" @handle="handleHeader" ref="TableHeaderRef" :selectData="selectData">
+      <!-- 添加左侧插槽 -->
+      <template v-slot:TableHeaderLeft>
+        <slot :selectData="selectData" name="TableHeaderLeft" />
+      </template>
+      <!-- 添加右侧插槽 -->
+      <template v-slot:TableHeaderRight>
+        <slot :selectData="selectData" name="TableHeaderRight" />
+      </template>
+    </TableHeader>
+    <!-- 组件表格主体 -->
+    <TableData :tableList="tableList" :tableData="tableData" :treeShow="treeShow" :tableType="tableType" @changeDisabledIf="changeDisabledIf"
+      @changeSingleDisabledIf="changeSingleDisabledIf" @handleSortChange="handleSortChange" @handleTree="handleTree" ref="TableDataRef">
+      <!-- 添加插槽 -->
+      <template v-slot:default="{ currentCol, currentData }">
+        <slot :currentCol="currentCol" :currentData="currentData" :name="currentCol.name" />
+      </template>
+    </TableData>
+    <!-- 组件分页 -->
+    <TablePagination :pagination="pagination" @handle="handlePagination" v-if="!tableType.isHiddenPagination" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import TableData from "./TableData.vue";
+import TableHeader from "./TableHeader.vue";
+import TablePagination from "./TablePagination.vue";
+
+const props = defineProps({
+  tableHeader: {
+    type: Array,
+    required: true,
+  },
+  tableType: {
+    type: Object,
+    required: true,
+  },
+  tableList: {
+    type: Array,
+    required: true,
+  },
+  tableData: {
+    type: Array,
+    required: true,
+  },
+  pagination: {
+    type: Object,
+  },
+  treeShow: {
+    type: Boolean,
+  },
+});
+console.log(props);
+const emit = defineEmits(["handleTableHeader", "handleTablePagination", "handleTableSort","handleTree"]);
+
+const TableHeaderRef = ref(); // TableHeaderRef 的 ref
+const TableDataRef = ref(); // TableData 的 ref
+
+// 控制按钮是否禁用
+const disabledIf = ref(true);
+const singleDisabledIf = ref(true);
+// 修改 disabledIf 方法
+const changeDisabledIf = (val) => {
+  disabledIf.value = val;
+};
+const changeSingleDisabledIf = (val) => {
+  singleDisabledIf.value = val;
+};
+
+// 表格筛选显示方法
+const filter = (checkList) => {
+  props.tableList.map((item) => {
+    if (checkList.indexOf(item.name) != -1) {
+      item.show = true;
+    } else {
+      item.show = false;
+    }
+  });
+};
+
+// 表格顶部事件
+const handleHeader = (type, data) => {
+  if (type === "search") return emit("handleTableHeader", { type, data });
+  if (type === "mixInput") return emit("handleTableHeader", { type, data });
+  if (type === "sort") return emit("handleTableHeader", { type, data });
+  emit("handleTableHeader", { type, data: TableDataRef.value.selectData });
+};
+
+// 表格分页
+const handlePagination = (current) => {
+  emit("handleTablePagination", current);
+};
+
+// 表格自定义筛选
+const handleSortChange = (column, prop, order) => {
+  emit("handleTableSort", column, prop, order)
+}
+const handleTree = (val) =>{
+  emit('handleTree', val)
+}
+// 选中的值
+const selectData = ref([]);
+onMounted(() => {
+  watch(
+    () => TableDataRef.value.selectData,
+    (newValue) => {
+      selectData.value = newValue;
+    },
+    { deep: true }
+  );
+});
+
+// 清空混合搜索值
+const clearMixInput = () => {
+  TableHeaderRef.value.clearMixInput()
+}
+// 清空搜索值
+const clearSearch = () => {
+  TableHeaderRef.value.clearSearch()
+}
+defineExpose({
+  clearMixInput,
+  clearSearch
+})
+</script>
+<style lang="scss">
+@import "./table-body.scss";
+</style>

src/components/TableBody/TableData.vue

@@ -0,0 +1,155 @@
+<template>
+  <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' }"
+      :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @row-click="handleCurrentChange"
+      @selection-change="handleSelectionChange" @sort-change="handleSortChange"
+      :default-expand-all="tableType.isExpand ? tableType.isExpand : false" :border="false"
+      :class="{ 'is-border': true }">
+      <el-table-column type="index" width="80" align="center" label="序号" v-if="tableType.tableIndex" />
+      <el-table-column type="selection" width="55" v-if="tableType.selection" />
+      <template v-for="item in tableList">
+        <template v-if="item.show">
+          <el-table-column v-if="item.type === 'slot'" :width="item.width" :label="item.label" :sortable="item.sortable"
+            :sort-method="item.sortableMethod" :prop="item.name">
+            <template #default="scope">
+              <slot :currentCol="item" :currentData="scope.row[item.name]"></slot>
+            </template>
+          </el-table-column>
+          <el-table-column :prop="item.name" :label="item.label" :width="item.width" :sortable="item.sortable"
+            :sort-method="item.sortableMethod" v-else />
+        </template>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, watch, computed } from 'vue'
+import { ElTable } from 'element-plus'
+const props = defineProps({
+  tableList: {
+    type: Array,
+    default: () => []
+  },
+  tableType: {
+    type: Object,
+    default: () => { return {} }
+  },
+  tableData: {
+    type: Array,
+    default: () => []
+  },
+  treeShow: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['changeDisabledIf', 'changeSingleDisabledIf', 'handleSortChange','handleTree'])
+
+// 表格 ref
+const multipleTableRef = ref()
+
+/* 表格高度 */
+const tableHeight = ref(0)
+const changeHeight = ref(220)
+nextTick(() => {
+  if (props.tableType.changeHeight) {
+    changeHeight.value = props.tableType.changeHeight
+  }
+  tableHeight.value = window.innerHeight - changeHeight.value
+
+  window.addEventListener("resize", () => {
+    tableHeight.value = window.innerHeight - changeHeight.value
+  })
+})
+
+/* 表格选择 */
+const selectData = ref([]) // 选中行的数据
+// 勾选数据行的 Checkbox 时触发的 rowClass
+const rowClass = computed(() => {
+  return ({ row }) => {
+    if (selectData.value.includes(row)) {
+      return 'slecleRowColor ';
+    }
+  }
+})
+// 当选择项发生变化时会触发该事件
+const handleSelectionChange = (rows) => {
+  selectData.value = rows
+}
+
+// 监听多选的选择状态、数据
+watch(selectData, (data) => {
+  emit('changeDisabledIf', !(data.length > 0))
+  emit('changeSingleDisabledIf', !(data.length == 1))
+}, { deep: true })
+
+// 单行点击触发
+const handleCurrentChange = (row) => {
+  if (props.tableType.selection) {
+    if (selectData.value.indexOf(row) > -1) {
+      selectData.value.splice(selectData.value.indexOf(row), 1)
+      multipleTableRef.value.toggleRowSelection(row, false)
+    } else {
+      selectData.value.push(row)
+      multipleTableRef.value.toggleRowSelection(row, true)
+    }
+  } else {
+    selectData.value[0] = row
+  }
+
+}
+
+// 表格单选时，当数据发生变化时清空 selectData 数据
+watch(() => props.tableData, () => {
+  if (!props.tableType.selection) {
+    selectData.value = []
+  }
+})
+const handleTree = (val) =>{
+  emit('handleTree', val)
+}
+// 表格排序
+const handleSortChange = ({ column, prop, order }) => {
+  emit('handleSortChange', column, prop, order)
+}
+
+defineExpose({
+  selectData
+})
+</script>
+<style lang='scss' scoped>
+// table 选中高亮
+.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

@@ -0,0 +1,212 @@
+<template>
+  <el-scrollbar>
+    <div class="table-header">
+      <div class="table-header-left">
+        <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">
+            <el-popconfirm title="是否删除?" v-if="item === 'delete'" @confirm="emit('handle', 'delete')" :key="index">
+              <template #reference>
+                <el-button type="primary" icon="Delete" :disabled="disabledIf">删除</el-button>
+              </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>
+            <span v-if="item.type === 'popconfirm'" v-permission="item.permission">
+              <el-popconfirm :title="`是否${item.title}`" @confirm="emit('handle', item.name)" :key="index">
+                <template #reference>
+                  <el-button type="primary" :icon="item.icon" :disabled="customDisabled(item)">{{ item.title
+                  }}</el-button>
+                </template>
+              </el-popconfirm>
+            </span>
+          </template>
+        </template>
+        <!-- 添加左侧插槽 -->
+        <slot name="TableHeaderLeft" />
+      </div>
+      <div class="table-header-right">
+        <template v-for="(item, index) in tableHeader[1].buttons">
+          <el-input class="search-input" v-model="searchInput" v-if="item === 'search'" placeholder="搜索"
+            @keyup.enter="handleSearch" clearable :key="index" @clear="handleSearch"
+            v-permission="tableHeader[2]?.search">
+            <template #append>
+              <el-button :icon="Search" @click="handleSearch" />
+            </template>
+          </el-input>
+          <el-button type="primary" icon="Filter" @click="emit('handle', 'advanced')" v-if="item === 'advanced'"
+            v-permission="tableHeader[2]?.advanced" :key="index">高级筛选</el-button>
+          <el-button type="primary" icon="Refresh" @click="emit('handle', 'refresh')" v-if="item === 'refresh'"
+            :key="index" v-permission="tableHeader[2]?.refresh" />
+          <span v-if="item === 'bulkDelete'" v-permission="tableHeader[2]?.bulkDelete">
+            <el-popconfirm title="是否删除?" v-if="item === 'bulkDelete'" @confirm="emit('handle', 'bulkDelete')"
+              :key="index">
+              <template #reference>
+                <el-button type="primary" icon="Delete" :disabled="disabledIf">批量删除</el-button>
+              </template>
+            </el-popconfirm>
+          </span>
+          <el-dropdown v-if="item === 'filter'" :key="index" v-permission="tableHeader[2]?.filter">
+            <el-button type="success" icon="Filter" />
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-checkbox-group class="ydool_filter" v-model="checkList">
+                  <el-checkbox v-for="item in tableList" :label="item.name">
+                    {{ item.label }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <template v-if="Object.prototype.toString.call(item) === '[object Object]'">
+            <el-input class="mix-input" v-model="seachMixInput" v-permission="item.permission"
+              v-if="item.name === 'mixInput'" clearable placeholder="输入搜索内容" @keyup.enter="handleMixSearch"
+              @clear="handleMixSearch">
+              <template #prepend>
+                <el-select v-model="seachMixSelect" placeholder="请选择" style="width: 110px" clearable>
+                  <el-option v-for="option, index in item.options" :label="option.label" :value="option.value"
+                    :key="index" />
+                </el-select>
+              </template>
+              <template #append>
+                <el-button :icon="Search" @click="handleMixSearch" />
+              </template>
+            </el-input>
+            <div class="table-header-right-sort" v-if="item.name === 'sort'" v-permission="item.permission">
+              <el-select v-model="sortSearch" class="thrs-search" clearable
+                @change="emit('handle', 'sort', { sortType: sortActive, 'name': sortSearch })">
+                <template #prefix>
+                  <img src="@/assets/images/sort-icon.png" alt="" class="thrs-img">
+                </template>
+                <el-option-group v-for="i in ['排序']" :key="i" :label="i">
+                  <el-option v-for="k in item.options" :key="k.value" :label="k.label" :value="k.value" />
+                </el-option-group>
+              </el-select>
+              <div class="arrow-filter" @click="changeOrderSearch">
+                <i class="arrow-top" :class="sortActive === 'asc' ? 'arrow-active' : ''"></i>
+                <i class="arrow-bottom" :class="sortActive === 'desc' ? 'arrow-active' : ''"></i>
+              </div>
+            </div>
+            <el-button type="primary" :disabled="customDisabled(item)" v-permission="item.permission" :icon="item.icon"
+              @click="emit('handle', item.name)" v-if="item.type === 'custom'" :key="index">{{ item.title }}</el-button>
+
+            <span v-if="item.type === 'popconfirm'" v-permission="item.permission">
+              <el-popconfirm :title="`是否${item.title}`" @confirm="emit('handle', item.name)" :key="index">
+                <template #reference>
+                  <el-button type="primary" :icon="item.icon" :disabled="customDisabled(item)">{{ item.title
+                  }}</el-button>
+                </template>
+              </el-popconfirm>
+            </span>
+          </template>
+        </template>
+        <!-- 添加右侧插槽 -->
+        <slot name="TableHeaderRight" />
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { Download, Plus, Coordinate, Delete, Printer, Notification, Search } from '@element-plus/icons-vue'
+const props = defineProps({
+  disabledIf: {
+    type: Boolean
+  },
+  singleDisabledIf: {
+    type: Boolean
+  },
+  tableList: {
+    type: Array,
+    default: () => []
+  },
+  tableHeader: Object,
+  selectData: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['filter', 'handle'])
+
+// 搜索
+const searchInput = ref('')
+// 搜索触发事件
+const handleSearch = () => {
+  emit('handle', 'search', searchInput)
+}
+// 清空搜索值
+const clearSearch = () => {
+  searchInput.value = ''
+}
+
+// 混合搜索
+const seachMixInput = ref('')
+const seachMixSelect = ref('')
+// 搜索触发事件
+const handleMixSearch = () => {
+  emit('handle', 'mixInput', { seachMixSelect, seachMixInput })
+}
+// 清空混合搜索值
+const clearMixInput = () => {
+  seachMixInput.value = ''
+  seachMixSelect.value = ''
+}
+// 表格筛选显示
+const checkList = ref()
+checkList.value = props.tableList.map(item => {
+  return item.name
+})
+
+// watch(() => props.tableList, () => {
+//   checkList.value = props.tableList.map(item => {
+//     return item.name
+//   })
+// }, { deep: true, immediate: true })
+
+watch(checkList, (newValue) => {
+  emit('filter', newValue)
+})
+
+// 自定义按钮的禁用
+const customDisabled = computed(() => {
+  return (item) => {
+    if (!item.isOpen) return false
+    if (item.isOpen) {
+      let obj = {
+        custom: () => item.disabled,
+        single: () => props.singleDisabledIf,
+        Arbitrary: () => props.disabledIf
+      }
+      if (item.isOpen === 'custom' && typeof item.disabled == 'function') {
+        return obj[item.isOpen]()(props.selectData)
+      }
+      return obj[item.isOpen]()
+    }
+  }
+})
+
+// 表格排序
+const sortSearch = ref('')
+const sortActive = ref('asc')
+const changeOrderSearch = () => {
+  if (sortActive.value === 'asc') { sortActive.value = 'desc' } else { sortActive.value = 'asc' }
+  emit('handle', 'sort', { sortType: sortActive.value, 'name': sortSearch.value })
+}
+
+defineExpose({
+  clearMixInput,
+  clearSearch
+})
+</script>

src/components/TableBody/TablePagination.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="table-pagination">
+    <el-pagination class="ydool_pagination" :page-size="pagination.pageSize" hide-on-single-page
+      layout="->,total, prev, pager, next, jumper" :total="pagination.total" @current-change="handle"
+      :background="background" small />
+  </div>
+</template>
+
+<script setup >
+import { ref, watch, computed } from 'vue'
+const props = defineProps({
+  pagination: {
+    type: Object,
+    required: true,
+  }
+})
+const background = ref(true)
+const emit = defineEmits(['handle'])
+
+const handle = (current) => {
+  emit('handle', current)
+}
+</script>

src/components/TableBody/example.vue

@@ -0,0 +1,323 @@
+<template><!-- 使用示例 -->
+  <div class="example">
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+      @handleTableSort="handleTableSort" ref="TableBodyRef">
+
+      <!-- 左侧顶部插槽 -->
+      <template #TableHeaderLeft="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 右侧顶部插槽 -->
+      <template #TableHeaderRight="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 表格插槽使用 -->
+      <template #slotName="{ currentCol, currentData }">
+        <span style="color: #729880">{{ currentData }}</span>
+      </template>
+    </TableBody>
+
+    <!-- 更多弹框 -->
+    <el-dialog v-model="moreConditionsIf" title="搜索更多">
+      <el-form :model="moreConditionsForm">
+        <el-form-item label="企业名称" :label-width="formLabelWidth">
+          <el-input v-model="moreConditionsForm.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="公司地址" :label-width="formLabelWidth">
+          <el-input v-model="moreConditionsForm.name" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="closeDialog">
+            搜索
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+import TableBody from '@/components/TableBody/TableBody.vue'
+
+const TableBodyRef = ref()
+const data = reactive({
+  /**
+   * @type {Object}
+   * @description 表格头部
+   */
+  tableHeader: [
+    {
+      buttons: ["create", "edit", 'delete', {
+        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,
+        disabled: (selectData) => {
+          console.log(selectData, 'selectData121341')
+          if (selectData[0]?.id === 3) {
+            return false
+          }
+          return true
+        },
+        permission: undefined // 按钮权限，不设置，或设置为 undefined、false 默认显示
+      }],
+
+    },
+    {
+      buttons: ["search", "advanced", "refresh", 'filter', 'bulkDelete',
+        {
+          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: '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":
+      console.log(type, data)
+      break;
+    case "edit":
+      console.log(type, data)
+      break;
+    case "advanced":
+      opneDialog()
+      break;
+  }
+}
+// 表格分页事件
+const handleTablePagination = (current) => {
+  console.log(current)
+}
+
+// 表格自定义排序事件
+const handleTableSort = (column, prop, order) => {
+  console.log(column, prop, order)
+}
+
+// 插槽事件
+const handleSlot = (val) => {
+  console.log(val)
+}
+
+/* 更多弹框 */
+const formLabelWidth = ref(120)
+const moreConditionsForm = ref({
+  name: ''
+})
+
+const moreConditionsIf = ref(false)
+// 关闭弹框
+const closeDialog = () => {
+  moreConditionsIf.value = false
+}
+// 打开弹框
+const opneDialog = () => {
+  moreConditionsIf.value = true
+}
+
+// 清空混合搜索
+// TableBodyRef.value.clearMixInput()
+
+// 清空搜索
+// TableBodyRef.value.clearSearch()
+
+</script>
+<style lang='scss' scoped></style>
+

src/components/TableBody/table-body.scss

@@ -0,0 +1,113 @@
+.table-header {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .table-header-left {
+    display: flex;
+    align-items: center;
+    > * {
+      margin-right: 12px;
+    }
+
+    > .el-button {
+      padding: 8px 10px;
+      margin-left: 0;
+    }
+  }
+
+  .table-header-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    > * {
+      margin-left: 12px;
+    }
+
+    > .el-button {
+      padding: 8px 10px;
+    }
+    .search-input {
+      flex-basis: 220px;
+      min-width: 150px;
+    }
+    .mix-input {
+      flex-basis: 320px;
+      min-width: 280px;
+    }
+    .table-header-right-sort {
+      flex-basis: 180px;
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      border-radius: 5px;
+      box-sizing: border-box;
+      border: 1px solid #dcdfe6;
+      .thrs-img {
+        width: 16px;
+        height: 16px;
+      }
+      .thrs-search {
+        margin-right: 0 !important;
+        width: 160px !important;
+
+        .select-trigger .el-input .el-input__wrapper {
+          box-shadow: none !important;
+
+          // .el-input__suffix {
+          //   display: none;
+          // }
+        }
+      }
+      .arrow-filter {
+        width: 16px !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        width: 10px;
+        height: 24px;
+        cursor: pointer;
+
+        .arrow-top {
+          cursor: pointer;
+          border: 5px solid transparent;
+          border-bottom: 5px solid #bfbfbf;
+
+          &.arrow-active {
+            border-bottom-color: #729880;
+          }
+        }
+
+        .arrow-bottom {
+          border: 5px solid transparent;
+          border-top: 5px solid #bfbfbf;
+
+          &.arrow-active {
+            border-top-color: #729880;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ydool_filter {
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ydool_pagination {
+  margin-top: 12px;
+}
+
+.table-body .el-table__inner-wrapper {
+  &::before {
+    content: none;
+  }
+  &.is-border::before {
+    content: "";
+  }
+}

src/main.js

@@ -16,6 +16,8 @@ import { appComponent } from "@/scripts/dynamicComponent";
 import "@/scripts/grape-import";
 import { table } from "@/compiler/testCode";
 import http from "@/utils/request.js";
+import { permission } from "@/utils/directive.js";
+
 const app = createApp(App);
 
 var loadDynamicComponent = false;
@@ -85,4 +87,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }
 
+app.directive("permission", permission);
+
 app.use(ElementPlus).use(VForm3).use(createPinia()).use(router).mount("#app");

src/router/index.js

@@ -30,6 +30,58 @@ const routes = [
         name: "home",
         meta: { title: "欢迎" },
       },
+
+      /**
+       * 数据路由
+       */
+      // 项目管理
+      {
+        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: "新增服务接口" },
+  },
     ],
   },
   {
@@ -44,7 +96,7 @@ const routes = [
     path: "/codemirror",
     name: "codemirror",
     mete: {
-      title: "编辑器", 
+      title: "编辑器",
     },
     component: () => import("../views/codemirror/index.vue"),
   }, 

src/store/perms.js

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+import tools from "@/utils/tools";
+let user = tools.data.get("user");
+let ownPermission = user?.perms || [];
+
+export const usePerms = defineStore("perms", {
+  state: () => {
+    return {
+      perms: [...ownPermission],
+    };
+  },
+  actions: {
+    changePerms(val) {
+      this.perms = [...val];
+    },
+  },
+});

src/utils/directive.js

@@ -0,0 +1,20 @@
+// 全局指令
+import { usePerms } from "@/store/perms.js";
+let ownPermission = [];
+function toolPermission(el, permission) {
+  ownPermission = usePerms();
+  if (permission && !ownPermission.perms.includes(permission)) {
+    el.parentNode && el.parentNode.removeChild(el);
+  }
+}
+
+const permission = {
+  mounted(el, binding) {
+    toolPermission(el, binding.value);
+  },
+  updated(el, binding) {
+    toolPermission(el, binding.value);
+  },
+};
+
+export { permission };

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/layout/index.vue

@@ -61,7 +61,7 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item icon="Avatar">个人中心</el-dropdown-item>
-                <el-dropdown-item icon="SwitchButton">退出</el-dropdown-item>
+                <el-dropdown-item icon="SwitchButton" @click="handleUserMenu('logout')">退出</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -122,7 +122,7 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item icon="Avatar">个人中心</el-dropdown-item>
-              <el-dropdown-item icon="Avatar" @click="handleUserMenu"
+              <el-dropdown-item icon="Avatar" command="logout" @click="handleUserMenu('logout')"
                 >退出</el-dropdown-item
               >
             </el-dropdown-menu>
@@ -155,7 +155,7 @@ import menuItem from "./components/menu/menu-item.vue";
 import breadcrumb from "./components/breadcrumb/index.vue";
 
 const user = tools.data.get("user");
-
+const router = useRouter()
 const route = useRoute();
 
 let store = useCar();
@@ -195,6 +195,7 @@ emitter.on("closeModifyPassword", (e) => {
 });
 
 const handleUserMenu = (command) => {
+  console.log('command',);
   if ("modifyPassword" == command) {
     data.dialog.visibled = true;
   } else if ("logout" == command) {
@@ -204,7 +205,7 @@ const handleUserMenu = (command) => {
       type: "warning",
     }).then(() => {
       tools.data.clear();
-      Router.push("/login");
+      router.push("/login");
     });
   }
 };

src/views/login/index.vue

@@ -6,41 +6,34 @@
       <div class="login_image"></div>
       <div class="auto">
         <span class="auto_title"> 登录 </span>
-        <el-form
+        <el-form :model="data" size="medium" ref="formRef" @keyup.enter.native="handleSubmit">
-          :model="data"
-          size="medium"
-          ref="formRef"
-          @keyup.enter.native="handleSubmit"
-        >
           <el-row :span="22">
             <el-form-item prop="user">
-              <el-input
+              <el-input v-model="data.user" style="width: 100%; margin-bottom: 20px" placeholder="帐号"
-                v-model="data.user"
+                prefix-icon="User"></el-input>
-                style="width: 100%; margin-bottom: 20px"
-                placeholder="帐号"
-                prefix-icon="User"
-              ></el-input>
             </el-form-item>
           </el-row>
           <el-row :span="22">
             <el-form-item prop="password">
-              <el-input
+              <el-input v-model="data.password" style="width: 100%; margin-bottom: 20px" type="password" placeholder="密码"
-                v-model="data.password"
+                prefix-icon="Lock" show-password>
-                style="width: 100%; margin-bottom: 48px"
-                type="password"
-                placeholder="密码"
-                prefix-icon="Lock"
-                show-password
-              >
               </el-input>
             </el-form-item>
           </el-row>
-          <el-button
+          <div style="display: flex; align-items: center;margin-bottom: 30px;">
-            class="login-btn-submit"
+            
-            type="primary"
+          <el-row :span="21">
-            @click="handleSubmit()"
+            <el-form-item prop="password">
-            :loading="loading"
+              <el-input v-model="data.password" style="width: 100%; margin-right: 20px;" type="password" placeholder="验证码"
-          >
+                prefix-icon="Paperclip" >
+              </el-input>
+            </el-form-item>
+          </el-row>
+            <el-form-item prop="password">
+              <img src="@/assets/images/login_bg.png" class="codeStyle" @click="handleCode">
+            </el-form-item>
+          </div>
+          <el-button class="login-btn-submit" type="primary" @click="handleSubmit()" :loading="loading">
             <span class="info1">登&nbsp;录</span>
           </el-button>
         </el-form>
@@ -65,7 +58,10 @@ const data = reactive({
 });
 const loading = ref(false);
 const formRef = ref();
-
+const handleCode = () =>{
+  console.log('111111111');
+  
+}
 const handleSubmit = async () => {
   formRef.value.validate(async (valid) => {
     if (valid) {
@@ -101,12 +97,14 @@ const handleSubmit = async () => {
 .main {
   .login {
     .auto {
-      .el-row{
+      .el-row {
         width: 100%;
-        .el-form-item{
+
+        .el-form-item {
           width: 100%;
         }
       }
+
       .el-input__inner {
         width: 100%;
         height: 40px;
@@ -118,10 +116,14 @@ const handleSubmit = async () => {
         background-color: #fff;
         box-shadow: none;
       }
+
       .el-form-item__content {
-        -webkit-user-select: none; /*谷歌 /Chrome*/
+        -webkit-user-select: none;
-        -moz-user-select: none; /*火狐/Firefox*/
+        /*谷歌 /Chrome*/
-        -ms-user-select: none; /*IE 10+*/
+        -moz-user-select: none;
+        /*火狐/Firefox*/
+        -ms-user-select: none;
+        /*IE 10+*/
         user-select: none;
         width: 100%;
       }
@@ -133,7 +135,11 @@ const handleSubmit = async () => {
 .main {
   height: 100vh;
   width: 100%;
-
+.codeStyle{
+  width: 100px;
+  height: 44px;
+  cursor: pointer;
+}
   .login {
     position: relative;
     background: url(@/assets/images/login_bg_3.png);
@@ -176,7 +182,6 @@ const handleSubmit = async () => {
 
   .auto {
     z-index: 4;
-    height: 350px;
     width: 436px;
     position: absolute;
     padding: 58px 32px;
@@ -227,22 +232,26 @@ const handleSubmit = async () => {
     top: 50%;
     transform: translate(-50%, -60%);
   }
+
   .main .auto {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 99;
   }
+
   .main .login {
     background-size: 100% 100%;
   }
 }
+
 @media screen and (max-width: 662px) {
   .main .login .login_image {
     width: 100%;
     transform: translate(-56%, -60%);
   }
 }
+
 @media screen and (max-width: 420px) {
   .main .auto {
     width: 100%;

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

@@ -0,0 +1,368 @@
+<template>
+  <div class="example">
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+      @handleTableSort="handleTableSort" ref="TableBodyRef">
+      <!-- 左侧顶部插槽 -->
+      <template #TableHeaderLeft="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 右侧顶部插槽 -->
+      <template #TableHeaderRight="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 表格插槽使用 -->
+      <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",
+        {
+          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,
+          disabled: (selectData) => {
+            console.log(selectData, "selectData121341");
+            if (selectData[0]?.id === 3) {
+              return false;
+            }
+            return true;
+          },
+          permission: undefined, // 按钮权限，不设置，或设置为 undefined、false 默认显示
+        },
+      ],
+    },
+    {
+      buttons: [
+        "search",
+        "advanced",
+        "refresh",
+        "filter",
+        "bulkDelete",
+        {
+          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: "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
+};
+
+// 清空混合搜索
+// 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/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>
+  

yarn.lock

@@ -744,6 +744,11 @@ lodash-unified@^1.0.2:
   resolved "https://registry.yarnpkg.com/lodash-unified/-/lodash-unified-1.0.3.tgz#80b1eac10ed2eb02ed189f08614a29c27d07c894"
   integrity sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmmirror.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
+
 lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"