update:分级标准tab完成

@@ -3,7 +3,8 @@ VITE_APP_TITLE = 数据资产管理系统
 # 接口域名
 # VITE_API_BASEURL = https://www.zgsjzc.com/api
 # VITE_API_BASEURL = https://swzl-test.csbr.cn/api
- VITE_API_BASEURL = http://10.4.82.30:8052/
+#  VITE_API_BASEURL = http://10.4.82.30:8052/
+VITE_API_BASEURL = http://10.4.82.1:28052/
 # 平台用户 接口请地址
 VITE_APP_USER_API_BASEURL = gateway-server/user
 # 系统管理 接口地址

@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
     Table_tools: typeof import('./src/components/Tools/table_tools.vue')['default']
     Table_v2: typeof import('./src/components/Table/table_v2.vue')['default']
     Tabs: typeof import('./src/components/Tabs/index.vue')['default']
+    TemplateItem: typeof import('./src/components/TemplateItem/index.vue')['default']
     Toolbar: typeof import('./src/components/LineageGraph/toolbar.vue')['default']
     Topbar: typeof import('./src/components/LineageGraph/topbar.vue')['default']
     Transfer: typeof import('./src/components/Transfer/index.vue')['default']

 import request from "@/utils/request";
 
+
+/**
+ * 获取数据级别
+ * @param {Object}
+ * { paramCode: "DATA-CLASSIFY" }
+ * DATA-CLASSIFY 数据类别
+ * DATA-GRADE 数据级别
+ */
+export const getLargeCategoryList = (data) => request({
+  url:`${import.meta.env.VITE_APP_API_BASEURL}/data-dict/get-data-list`,
+  method: 'post',
+  data
+})
+
+
 /** 分类分级模板数据 */
 export const getTempleteClassifyData = (data) => request({
   url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`,
   method: 'post',
   data
 })
+
+
+/** 新增分级
+ *
+ * @param {Object}
+ * @path /classify-grade/save
+*/
+
+export const saveClassifyGrad = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/save`,
+  method: 'post',
+  data
+})
+
+/** 删除分级
+ * @param {Object}
+ * @path /classify-grade/delete
+ * */
+
+export const deleteClassifyGrad = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/delete`,
+  method: 'delete',
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
+  data
+})
+/** 修改分级
+ * @param {Object}
+ * @path /classify-grade/update
+ * */
+
+export const updateClassifyGrad = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/update`,
+  method: 'post',
+  data
+})
+
+
+/**
+ * 分级列表
+ * @param {Object}
+ * @path /classify-grade/page-list
+ */
+
+export const getClassifyGradList = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/page-list`,
+  method: 'post',
+  data
+})
+
+
+/**
+ * 分级新增
+ * @param {Object}
+ * @path /grade/save
+ */
+export const saveGrade = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/save`,
+  method: 'post',
+  data
+})
+
+/**
+ * 分级更新
+ * @param {Object}
+ * @path /grade/update
+ * */
+export const updateGrade = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/update`,
+  method: 'post',
+  data
+})
+
+/**
+ * 分级列表
+ * @param {Object}
+ * @path /grade/page-list
+ */
+export const getGradeList = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/page-list`,
+  method: 'post',
+  data
+})
+
+/**
+ * 批量删除分级
+ * @param {Array}
+ * @path /grade/delete
+ * */
+export const deleteGrade = (data) => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/delete`,
+  method: 'delete',
+  data
+})
+
+
+/*---------------------------------分类标准 tab -----------------------------*/
+
+/**
+ * 分级树形结构
+ * @param no params
+ * @path /grade/tree-list
+ */
+export const getGradeTreeList = () => request({
+  url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/tree-list`,
+  method: 'post',
+})

@@ -46,8 +46,13 @@ export const getImageUrl = (params) => request({
 })
 
 /** 查看图片 */
+// export const getImageContent = (params) => request({
+//   url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic?filePath=${params}`,
+//   method: 'get',
+//   responseType: 'blob'
+// });
 export const getImageContent = (params) => request({
-  url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic?filePath=${params}`,
+  url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic`,
   method: 'get',
   responseType: 'blob'
 });

@@ -71,6 +71,39 @@ const routes: RouteRecordRaw[] = [
           }
         }
       },
+      {
+        path: 'newCreate-class',
+        name: 'newCreateClass',
+        component: () => import('@/views/data_inventory/newCreateClass.vue'),
+        meta: {
+          title: '新增分类',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true,
+          editPage: true,
+          activeMenu: '/data-inventory/classify-grade-manage/template-config'
+        },
+      },
+      {
+        path: 'classifyGrad-edit',
+        name: 'classifyGradEdit',
+        component: () => import('@/views/data_inventory/classifyGradEdit.vue'),
+        meta: {
+          title: '编辑-',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true,
+          editPage: true,
+          activeMenu: '/data-inventory/classify-grade-manage/template-config'
+        },
+        beforeEnter: (to, from) => {
+          if (to.query.classClassifyGradName) {
+            to.meta.title = `编辑-${to.query.classClassifyGradName}`;
+          }
+        }
+      },
     ],
   }
 ]

@@ -405,6 +405,10 @@ onMounted(() => {
       name: '装备制造'
     }]
   });
+  graph.value.on('node:mouseenter', (e) => {
+    const nodeItem = e.item // 获取鼠标进入的节点元素对象
+    console.log('鼠标移入', nodeItem._cfg)
+  })
   graph.value.render();
   graph.value.fitView();
   graph.value.on('node:click', (evt: any) => {

+<route lang="yaml">
+  name: classifyGradEdit //新增分级分类模板
+  </route>
+
+<script lang="ts" setup name="classifyGradEdit">
+
+import router from "@/router";
+import { ref } from "vue";
+import { saveGrade, getGradeList, deleteGrade, getLargeCategoryList, updateGrade } from '@/api/modules/dataInventory';
+
+onMounted(() => {
+  getGradeListData();
+  Promise.all([getDataGrade(), getDataClassify()]);
+});
+
+// 获取分级列表
+const getGradeListData = async () => {
+  const params = {
+    pageIndex: 1,
+    pageSize: -1,
+    classifyGradeGuid: guid
+  }
+  const res: any = await getGradeList(params);
+  if (res.code == proxy.$passCode) {
+    tableInfo.value.data = res.data.records;
+  } else {
+    proxy.$ElMessage.error(res.msg);
+  }
+}
+
+// 获取数据类别
+const getDataGrade = async () => {
+  const params = {
+    paramCode: "DATA-CLASSIFY"
+  }
+  const res: any = await getLargeCategoryList(params);
+  if (res.code == proxy.$passCode) {
+    // 提出value和label 作为select的options
+    const options = res.data.map((item: any) => ({
+      label: item.paramName,
+      value: item.paramValue
+    }));
+    newCreateGradeFormItems.value[1].options = options;
+    classDataRef.value = options;
+  } else {
+    proxy.$ElMessage.error(res.msg);
+  }
+}
+
+// 获取数据级别
+const getDataClassify = async () => {
+  const params = {
+    paramCode: "DATA-GRADE"
+  }
+  const res: any = await getLargeCategoryList(params);
+  if (res.code == proxy.$passCode) {
+    // 提出value和label 作为select的options
+    const options = res.data.map((item: any) => ({
+      label: item.paramName,
+      value: item.paramValue
+    }));
+    newCreateGradeFormItems.value[0].options = options;
+    // 这里需要过滤已经在表格中数据级别
+    gradeDataRef.value = options;
+  } else {
+    proxy.$ElMessage.error(res.msg);
+  }
+}
+
+// 新增过滤数据级别
+const filterDataGrade = () => {
+  const selectedDataGrade = new Set();
+  tableInfo.value.data.forEach((item: any) => {
+    if (item.dataGrade) {
+      selectedDataGrade.add(item.dataGrade);
+    }
+  });
+  const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
+  (newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
+};
+
+// 编辑过滤数据级别，需包含当前数据级别，不排除自己
+const filterDataGradeEdit = (dataGrade: string) => {
+  const selectedDataGrade = new Set();
+  tableInfo.value.data.forEach((item: any) => {
+    if (item.dataGrade) {
+      selectedDataGrade.add(item.dataGrade);
+    }
+  });
+  // 移除当前数据级别dataGrade
+  selectedDataGrade.delete(dataGrade);
+  console.log(selectedDataGrade,);
+  const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
+  (newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
+};
+
+const tableRef = ref();
+const classDataRef = ref();
+const gradeDataRef = ref();
+const fullscreenLoading = ref(false);
+const editClassifyGradeGuid = ref('');
+const { proxy } = getCurrentInstance() as any;
+const guidArray = ref<any[]>([]);
+// 获取query参数 中的guid
+const guid = router.currentRoute.value.query.guid;
+const tableInfo = ref({
+  id: "data-class-standard-table",
+  multiple: true,
+  fields: [
+    { label: "序号", field: 'orderNum', width: 56, align: "center" },
+    {
+      label: "数据级别", field: "dataGrade", width: 120, getName: (scope) => {
+        let dataGrade = scope.row.dataGrade;
+        return dataGrade + '级';
+      }
+    },
+    {
+      label: "数据类别", field: "dataClassify", width: 120, getName: (scope) => {
+        let dataClassify = scope.row.dataClassify;
+        return classDataRef.value.find((item: any) => item.value === dataClassify)?.label;
+      }
+    },
+    { label: "分级描述", field: "gradeDesc", align: "left", },
+
+  ],
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 120,
+    btns: [
+      {
+        label: "编辑", value: "edit", click: (scope) => {
+          console.log(scope);
+          filterDataGradeEdit(scope.row.dataGrade);
+          newCreateGradeStandardDialogInfo.value.visible = true;
+          newCreateGradeStandardDialogInfo.value.title = '编辑分类';
+          newCreateGradeFormItems.value.forEach(item => {
+            item.default = scope.row[item.field];
+          })
+          editClassifyGradeGuid.value = scope.row.guid;
+        }
+      },
+      {
+        label: "删除", value: "delete", click: (scope) => {
+          guidArray.value = [];  // 重置数组
+          guidArray.value.push(scope.row.guid);
+          batchRemobe();
+        }
+      },
+    ],
+  },
+  data: [],
+  showPage: false,
+  loading: false,
+});
+
+// 选择勾选的数据
+const onTableSelectChange = async (selection: any[]) => {
+  guidArray.value = [];  // 重置数组
+  selection.forEach((item: any) => {
+    guidArray.value.push(item.guid);
+  });
+};
+
+// 批量删除
+const batchRemobe = async () => {
+  // 批量删除,增加confirm确认弹窗
+  if (guidArray.value.length == 0) {
+    proxy.$ElMessage({
+      type: 'warning',
+      message: '请选择要删除的数据'
+    })
+    return;
+  }
+
+  // confirm弹窗
+  proxy.$confirm('是否删除选中数据?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    const res: any = await deleteGrade(guidArray.value);
+    if (res.code == proxy.$passCode) {
+      proxy.$ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+      getGradeListData();
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  }).catch(() => {
+    proxy.$ElMessage({
+      type: 'info',
+      message: '已取消删除'
+    });
+  });
+
+};
+
+/**弹窗配置 */
+const newCreateGradeFormItems = ref([{
+  label: '数据级别',
+  type: 'select',
+  placeholder: '请选择',
+  field: 'dataGrade',
+  default: '',
+  options: gradeDataRef.value,
+  required: true,
+  filterable: true,
+  clearable: true,
+  visible: true,
+},
+{
+  label: '数据类别',
+  type: 'select',
+  placeholder: '请选择',
+  field: 'dataClassify',
+  default: '',
+  options: [],
+  required: true,
+  filterable: true,
+  clearable: true,
+  visible: true,
+},
+{
+  label: '序号',
+  type: 'input',
+  maxlength: 19,
+  placeholder: '请输入',
+  field: 'orderNum',
+  default: '',
+  clearable: true,
+  required: true,
+  regexp: /\D/g
+},
+{
+  label: '分级描述',
+  type: 'textarea',
+  maxlength: 50,
+  placeholder: '分类分级的描述说明',
+  field: 'gradeDesc',
+  default: '',
+  clearable: true,
+  required: false,
+  block: true,
+}]);
+
+const newCreateGradeFormRules = ref({
+  dataGrade: [
+    { required: true, message: '请选择数据级别', trigger: 'change' }
+  ],
+  orderNum: [
+    { required: true, message: '请输入序号', trigger: 'blur' }
+  ],
+  dataClassify: [
+    { required: true, message: '请选择数据类别', trigger: 'change' }
+  ]
+});
+
+const newCreateGradeStandardDialogInfo = ref({
+  visible: false,
+  size: 860,
+  title: "添加分类",
+  type: "",
+  formInfo: {
+    id: "grade-form",
+    items: newCreateGradeFormItems.value,
+    rules: newCreateGradeFormRules.value,
+  },
+  submitBtnLoading: false,
+  btns: {
+    cancel: () => {
+      newCreateGradeStandardDialogInfo.value.visible = false;
+    },
+    submit: async (btn, info) => {
+      console.log(info, guid);
+      newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
+      if (newCreateGradeStandardDialogInfo.value.title === '编辑分类') {
+        const params = {
+          ...info,
+          guid: editClassifyGradeGuid.value,
+          classifyGradeGuid: guid
+        }
+
+        const res: any = await updateGrade(params);
+        if (res.code == proxy.$passCode) {
+          proxy.$ElMessage({
+            type: 'success',
+            message: '修改分类成功'
+          })
+          getGradeListData();
+          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
+          newCreateGradeStandardDialogInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+        return;
+      } else {
+        const params = {
+          ...info,
+          classifyGradeGuid: guid
+        }
+        const res: any = await saveGrade(params);
+        if (res.code == proxy.$passCode) {
+          proxy.$ElMessage({
+            type: 'success',
+            message: '新增分类成功'
+          })
+          getGradeListData();
+          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
+          newCreateGradeStandardDialogInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+      }
+    }
+  }
+})
+
+const newStandard = () => {
+  filterDataGrade();
+  newCreateGradeStandardDialogInfo.value.visible = true;
+  newCreateGradeFormItems.value.forEach(item => item.default = '');
+}
+
+
+
+</script>
+
+<template>
+  <div class="container_wrap" v-loading="fullscreenLoading">
+    <div class="content_main">
+      <div class="table-top-btns">
+        <el-button type="primary" @click="newStandard">新增标准</el-button>
+        <el-button @click="batchRemobe">批量删除</el-button>
+      </div>
+      <Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
+    </div>
+    <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0px;
+}
+
+.content_main {
+  height: calc(100% - 44px);
+  padding: 17px 16px 10px 16px;
+
+  .table-top-btns {
+    display: flex;
+    margin-bottom: 12px;
+  }
+}
+</style>

+<route lang="yaml">
+  name: newCreateClass //新增分级分类模板
+  </route>
+
+<script lang="ts" setup name="newCreateClass">
+import router from "@/router";
+import { getMetaDataBase } from '@/api/modules/dataMetaService';
+import { ref } from "vue";
+
+
+onMounted(async () => {
+  const params = {
+    pageIndex: 1,
+    pageSize: -1,
+  }
+  const res = await getMetaDataBase(params)
+  console.log(res);
+});
+
+// 表单引用
+const formRef = ref();
+const tableRef = ref();
+const fullscreenLoading = ref(false);
+const isExpand = ref(true);
+const newCreateClassFormItems = ref([{
+  label: '分类名称',
+  type: 'input',
+  maxlength: 50,
+  placeholder: '请输入',
+  field: 'categoryName',
+  default: '',
+  clearable: true,
+  required: true
+}, {
+  label: '引用分级标准',
+  type: 'select',
+  placeholder: '请选择',
+  field: 'ReferenceGradingStandard',
+  default: '',
+  options: [], //TODO
+  required: true,
+  filterable: true,
+  clearable: true,
+  visible: true,
+}]);
+
+const formRules = ref({
+  templeteName: [
+    { required: true, message: '请输入模板名称', trigger: 'blur' },
+    { max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
+  ],
+  industryCategory: [
+    { required: true, message: '请选择行业分类', trigger: 'change' }
+  ],
+  gradingStandard: [
+    { required: true, message: '请选择分级标准', trigger: 'change' }
+  ]
+});
+
+const tableInfo = ref({
+  id: "data-class-standard-table",
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "层级", field: "databaseNameZh", width: 160, },
+    { label: "状态", field: "databaseName", width: 120, },
+    { label: "定义说明", field: "tableCount", width: 120, align: "right", },
+    { label: "最低安全级别", field: "storageCapacities", align: "right", width: 220, },
+    { label: "创建时间", field: "columns", width: 140, align: "right", },
+  ],
+  actionInfo: {
+    show: false,
+  },
+  data: [
+    {
+      index: 1,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 2,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 3,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 4,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 5,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 6,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+
+  ],
+  showPage: false,
+  loading: false,
+});
+
+const onTableSelectChange = (selection: any[]) => {
+  console.log(selection);
+};
+
+const cancel = () => {
+  // 返回上一页路由
+  router.back();
+};
+
+const save = async () => {
+  console.log('save');
+  // 校验表单
+  const res = formRef.value;
+  res.ruleFormRef.validate((valid: any) => {
+    if (valid) {
+      // 表单校验通过
+      console.log('表单校验通过');
+    } else {
+      console.log('表单校验不通过');
+      return false;
+    }
+  });
+
+
+};
+</script>
+
+<template>
+  <div class="container_wrap" v-loading="fullscreenLoading">
+    <div class="content_main">
+      <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
+        <Form ref="formRef" :itemList="newCreateClassFormItems" formId="main-model-edit" col="col3" :rules=formRules />
+      </ContentWrap>
+      <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px;"
+        :expandSwicth=isExpand>
+        <div class="table-content_wrap">
+          <Table ref="tableRef" :tableInfo="tableInfo" />
+        </div>
+      </ContentWrap>
+    </div>
+    <div class="bottom_tool_wrap">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="save">后台运行</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0px;
+}
+
+.content_main {
+  height: calc(100% - 44px);
+  padding: 10px 16px;
+
+  .table-content_wrap {
+    width: 100%;
+    height: 213px;
+  }
+}
+
+.bottom_tool_wrap {
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid #D9D9D9;
+  padding-top: 8px;
+
+}
+</style>

@@ -3,10 +3,26 @@
   </route>
 
 <script lang="ts" setup name="newCreateTemplate">
+import router from "@/router";
+import { getMetaDataBase } from '@/api/modules/dataMetaService';
 import { ref } from "vue";
+
+
+onMounted(async () => {
+  const params = {
+    pageIndex: 1,
+    pageSize: -1,
+  }
+  const res = await getMetaDataBase(params)
+  console.log(res);
+});
+
+// 表单引用
+const formRef = ref();
+const tableRef = ref();
 const fullscreenLoading = ref(false);
 const isExpand = ref(true);
-const classStandardFormItems = ref([{
+const newCreateTemplateFormItems = ref([{
   label: '模板名称',
   type: 'input',
   maxlength: 50,
@@ -38,34 +54,113 @@ const classStandardFormItems = ref([{
   clearable: true,
   visible: true,
 }]);
-const dataShowMethod = ref('shape');
+
+const formRules = ref({
+  templeteName: [
+    { required: true, message: '请输入模板名称', trigger: 'blur' },
+    { max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
+  ],
+  industryCategory: [
+    { required: true, message: '请选择行业分类', trigger: 'change' }
+  ],
+  gradingStandard: [
+    { required: true, message: '请选择分级标准', trigger: 'change' }
+  ]
+});
+
 const tableInfo = ref({
   id: "data-class-standard-table",
-  multiple: false,
+  multiple: true,
   fields: [
     { label: "序号", type: "index", width: 56, align: "center" },
-    { label: "数据库名称", field: "className", width: 160, },
-    { label: "数据库名", field: "levelName", width: 120 },
-    { label: "总表数", field: "state", type: "tag", width: 120, align: "center" },
-    { label: "存储量（约/MB）", field: "description", },
-    { label: "总字段数", field: "minLevel", width: 140 },
+    { label: "数据库名称", field: "databaseNameZh", width: 160, },
+    { label: "数据库名", field: "databaseName", width: 120, },
+    { label: "总表数", field: "tableCount", width: 120, align: "right", },
+    { label: "存储量（约/MB）", field: "storageCapacities", align: "right", width: 220, },
+    { label: "总字段数", field: "columns", width: 140, align: "right", },
+  ],
+  actionInfo: {
+    show: false,
+  },
+  data: [
+    {
+      index: 1,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 2,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 3,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 4,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 5,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+    {
+      index: 6,
+      databaseNameZh: "数据库名称",
+      databaseName: "数据库名",
+      tableCount: 0,
+      storageCapacities: 0,
+      columns: 0,
+    },
+
   ],
-  data: [{
-    guid: '1',
-    children: [{
-      guid: '1-1'
-    }]
-  }],
   showPage: false,
   loading: false,
 });
 
+const onTableSelectChange = (selection: any[]) => {
+  console.log(selection);
+};
+
 const cancel = () => {
-  console.log('cancel');
+  // 返回上一页路由
+  router.back();
 };
 
-const save = () => {
+const save = async () => {
   console.log('save');
+  // 校验表单
+  const res = formRef.value;
+  res.ruleFormRef.validate((valid: any) => {
+    if (valid) {
+      // 表单校验通过
+      console.log('表单校验通过');
+    } else {
+      console.log('表单校验不通过');
+      return false;
+    }
+  });
+
+
 };
 </script>
 
@@ -73,18 +168,20 @@ const save = () => {
   <div class="container_wrap" v-loading="fullscreenLoading">
     <div class="content_main">
       <ContentWrap id="id-baseInfo" title="模板信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
-        <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
+        <Form ref="formRef" :itemList="newCreateTemplateFormItems" formId="main-model-edit" col="col3"
+          :rules=formRules />
       </ContentWrap>
       <ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;"
         :expandSwicth=isExpand>
-
+        <div class="table-content_wrap">
+          <Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
+        </div>
       </ContentWrap>
     </div>
-    <div class=" bottom_tool_wrap">
+    <div class="bottom_tool_wrap">
       <el-button @click="cancel">取消</el-button>
-      <el-button type="primary" @click="save">保存</el-button>
+      <el-button type="primary" @click="save">后台运行</el-button>
     </div>
-
   </div>
 </template>
 
@@ -96,5 +193,18 @@ const save = () => {
 .content_main {
   height: calc(100% - 44px);
   padding: 10px 16px;
+
+  .table-content_wrap {
+    width: 100%;
+    height: 213px;
+  }
+}
+
+.bottom_tool_wrap {
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid #D9D9D9;
+  padding-top: 8px;
+
 }
 </style>

@@ -10,12 +10,51 @@ import { MoreFilled } from "@element-plus/icons-vue";
 import { commonPageConfig } from '@/components/PageNav/index';
 import { useValidator } from '@/hooks/useValidator';
 import TemplateItem from '@/components/TemplateItem/index.vue'
-import { getTempleteClassifyData } from "@/api/modules/dataInventory";
+import { getTempleteClassifyData, saveClassifyGrad, getClassifyGradList, deleteClassifyGrad, updateClassifyGrad, getGradeTreeList } from "@/api/modules/dataInventory";
+
+
 
 const router = useRouter();
 const { required } = useValidator();
 const { proxy } = getCurrentInstance() as any;
 
+const refClassifyPageParams = ref({
+  pageIndex: 1,
+  pageSize: 10,
+  type: "G"
+});
+const classifyGradListData = ref();
+
+const getClassifyGradListData = async () => {
+  const res: any = await getClassifyGradList(refClassifyPageParams.value);
+  if (res.code == proxy.$passCode) {
+    classifyGradListData.value = res.data.records || [];
+  } else {
+    proxy.$ElMessage.error(res.msg);
+  }
+}
+
+// 获取分级树形列表
+const getGradeTreeListData = async () => {
+  const res: any = await getGradeTreeList();
+  if (res.code == proxy.$passCode) {
+    gradeTreeData.value = res.data || [];
+  } else {
+    proxy.$ElMessage.error(res.msg);
+  }
+}
+
+//记录分级guid
+const classifyGradGuid = ref('');
+// 分级列表
+const gradeTreeData = ref('');
+
+onMounted(() => {
+  getClassifyGradListData();
+  getGradeTreeListData();
+})
+
+
 const tabsInfo = ref({
   activeName: 'classStandard',
   tabs: [
@@ -115,10 +154,7 @@ const searchClass = (val: any, clear: boolean = false) => {
   getClassListData();
 };
 
-const newCreateClass = () => {
-  newCreateClassStandardDialogInfo.value.visible = true;
-  classStandardFormItems.value.forEach(item => item.default = '');
-}
+
 
 const getClassListData = () => {
   // classListDataLoading.value = true;
@@ -141,15 +177,15 @@ const getClassListData = () => {
 }
 
 /** 编辑分类 */
-const handleClassDataEdit = (item) => {
+const handleClassDataEdit = (item, des = '') => {
 
 }
 
-const handleClassDataClick = (item) => {
+const handleClassDataClick = (item, des = '') => {
   router.push({
     name: 'classStandardEdit',
     query: {
-      guid: item.guid,
+      type: des === '' ? '配置' : des,
       classStandardName: '工业分类'
     }
   });
@@ -158,6 +194,7 @@ const handleClassDataClick = (item) => {
 const handleClassDataDel = (item) => {
 
 }
+/** ------------------------------- 分类标准相关 ------------------------------------- */
 
 const classStandardFormItems = ref([{
   label: '分类名称',
@@ -171,7 +208,7 @@ const classStandardFormItems = ref([{
   required: true
 }, {
   label: '分级标准',
-  type: 'select',
+  type: 'tree-select',
   placeholder: '请选择',
   field: 'gradeStandard',
   default: 1,
@@ -219,24 +256,161 @@ const newCreateClassStandardDialogInfo = ref({
   }
 })
 
-const newCreateTemplate = () => {
+const newCreateClass = () => {
+  newCreateClassStandardDialogInfo.value.visible = true;
+  classStandardFormItems.value.forEach(item => item.default = '');
+}
+
+/** ------------------------------- 分级标准相关 ------------------------------------- */
+
+const newCreateGradeFormItems = ref([{
+  label: '分级名称',
+  type: 'input',
+  maxlength: 50,
+  placeholder: '请输入',
+  field: 'name',
+  default: '',
+  block: true,
+  clearable: true,
+  required: true
+}]);
+
+const newCreateGradeFormRules = ref({
+  name: [required('请填写分级名称')],
+});
+
+const newCreateGradeStandardDialogInfo = ref({
+  visible: false,
+  size: 460,
+  title: "新增分级",
+  type: "",
+  formInfo: {
+    id: "grade-form",
+    items: newCreateGradeFormItems.value,
+    rules: newCreateGradeFormRules.value,
+  },
+  submitBtnLoading: false,
+  btns: {
+    cancel: () => {
+      newCreateGradeStandardDialogInfo.value.visible = false;
+    },
+    submit: async (btn, info) => {
+      newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
+      console.log(info, newCreateGradeStandardDialogInfo.value.title);
+      if (newCreateGradeStandardDialogInfo.value.title === '新增分级') {
+        const params = {
+          name: info.name,
+          type: 'G'
+        }
+        const res: any = await saveClassifyGrad(params);
+        if (res.code == proxy.$passCode) {
+          await getClassifyGradListData();
+          proxy.$ElMessage({
+            type: 'success',
+            message: '新增分类成功'
+          })
+
+          // 拿到新增的分级数据，跳转到配置页面
+          const item = classifyGradListData.value.find(item => item.name === info.name);
+
+          if (item) {
+            const params = {
+              name: item.name,
+              guid: item.guid,
+            }
+            handleClassifyGradDataClick(params);
+          }
+          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
+          newCreateGradeStandardDialogInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+      } else {
+        const params = {
+          name: info.name,
+          guid: classifyGradGuid.value,
+          type: 'G'
+        }
+        const res: any = await updateClassifyGrad(params);
+        if (res.code == proxy.$passCode) {
+          getClassifyGradListData();
+          proxy.$ElMessage({
+            type: 'success',
+            message: '修改分类成功'
+          })
+          newCreateGradeStandardDialogInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+      }
+
+    }
+  }
+})
+
+// 删除分级
+const handleClassifyGradDataDel = async (item) => {
+  try {
+    // 弹出确认框
+    await proxy.$confirm('此操作将永久删除该分级, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+    const res: any = await deleteClassifyGrad({ guid: item.guid });
+    if (res.code === proxy.$passCode) {
+      await getClassifyGradListData();  // 获取更新后的列表数据
+      proxy.$ElMessage({
+        type: 'success',
+        message: '删除成功!'
+      });
+    } else {
+      proxy.$ElMessage.error(res.msg);  // 显示错误信息
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      proxy.$ElMessage({
+        type: 'info',
+        message: '已取消删除'
+      });
+    }
+  }
+};
+
+// 编辑分级
+const handleClassifyGradDataEdit = (itemGradeName) => {
+  classifyGradGuid.value = itemGradeName.guid;
+  newCreateGradeStandardDialogInfo.value.visible = true;
+  newCreateGradeStandardDialogInfo.value.title = '编辑分级';
+  newCreateGradeFormItems.value.forEach(item => {
+    item.default = itemGradeName.name
+  })
+}
+
+// 配置分级
+const handleClassifyGradDataClick = (item) => {
+  console.log(item);
   router.push({
-    name: 'newCreateTemplate',
+    name: 'classifyGradEdit',
     query: {
-      classStandardName: '分类分级模板'
+      guid: item.guid,
+      classClassifyGradName: item.name
     }
   });
-
 }
 
 const newCreateGrade = () => {
-
+  newCreateGradeStandardDialogInfo.value.visible = true;
+  newCreateGradeFormItems.value.forEach(item => item.default = '');
 }
 
-/**
- * 分类分级模板
- *
- */
+
+
+
+
+
+/** ------------------------------- 分类分级模板 ------------------------------------- */
+
 const pageInfo = ref({
   limit: 50,
   curr: 1,
@@ -251,6 +425,16 @@ const pageInfo = ref({
   rows: 0,
 })
 
+const newCreateTemplate = () => {
+  router.push({
+    name: 'newCreateTemplate',
+    query: {
+      classStandardName: '分类分级模板'
+    }
+  });
+}
+
+
 const pageChange = (info) => {
   pageInfo.value.curr = Number(info.curr);
   pageInfo.value.limit = Number(info.limit);
@@ -334,7 +518,8 @@ onBeforeMount(() => {
         <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
       </div>
       <div class="data-content" v-loading="classListDataLoading">
-        <div class="card-content" v-for="item in classListData" :key="item.guid" @click="handleClassDataClick(item)">
+        <div class="card-content" v-for="item in classifyGradListData" :key="item.guid"
+          @click="handleClassifyGradDataClick(item)">
           <div class="type-btn">
             <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
               popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
@@ -344,9 +529,9 @@ onBeforeMount(() => {
                 </el-icon>
               </template>
               <div class="levitation-ul">
-                <span class="levitation-li" @click="handleClassDataClick(item)">配置</span>
-                <span class="levitation-li" @click="handleClassDataEdit(item)">编辑</span>
-                <span class="levitation-li" @click="handleClassDataDel(item)">删除</span>
+                <span class="levitation-li" @click="handleClassifyGradDataClick(item)">配置</span>
+                <span class="levitation-li" @click="handleClassifyGradDataEdit(item)">编辑</span>
+                <span class="levitation-li" @click="handleClassifyGradDataDel(item)">删除</span>
               </div>
             </el-popover>
           </div>
@@ -354,10 +539,10 @@ onBeforeMount(() => {
             <svg-icon name="folder" />
           </el-icon>
           <div class="title">{{ item.name }}</div>
-          <div class="desc-row">
+          <!-- <div class="desc-row">
             <div class="desc">{{ '分级标准' }}</div>
             <div class="desc">{{ item.updateTime }}</div>
-          </div>
+          </div> -->
         </div>
         <div v-if="!classListData.length" class="card-noData">
           <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
@@ -366,6 +551,7 @@ onBeforeMount(() => {
       </div>
     </div>
     <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
+    <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
   </div>
 </template>