数据盘点分类标准

+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M32 64h342.304a32 32 0 0 1 17.76 5.376L576 192h416a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32z" fill="#ffb44a" p-id="1930"></path></svg>
\ No newline at end of file

@@ -268,6 +268,7 @@ onMounted(() => {
         :min-width="item.minWidth"
         :fixed="item.fixed"
         :align="item.align"
+        :type="item.type == 'index' ? '' : undefined"
         :sortable="item.sortable ?? false"
         :prop="item.field"
         :class-name="item.columClass"

+import type { RouteRecordRaw } from 'vue-router'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/data-inventory/classify-grade-manage',
+    component: Layout,
+    meta: {
+      title: '分类分级管理',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: 'task-config',
+        name: 'taskConfig',
+        component: () => import('@/views/data_inventory/taskConfig.vue'),
+        meta: {
+          title: '分类分级任务',
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'template-config',
+        name: 'templateConfig',
+        component: () => import('@/views/data_inventory/templateConfig.vue'),
+        meta: {
+          title: '分类分级模板',
+          breadcrumb: false,
+          cache: true
+        },
+      },
+      {
+        path: 'classStandard-edit',
+        name: 'classStandardEdit',
+        component: () => import('@/views/data_inventory/classStandardEdit.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.classStandardName) {
+            to.meta.title = `编辑-${to.query.classStandardName}`;
+          }
+        }
+      },
+    ],
+  }
+]
+
+export default routes

@@ -4,6 +4,7 @@ import type { RouteRecordRaw } from 'vue-router'
 import DataAssess from './modules/dataAsset';
 import DataMeta from './modules/dataMeta';
 import DataQuality from './modules/dataQuality';
+import DataInventory from './modules/dataInventory';
 
 import type { Route } from '#/global'
 import useSettingsStore from '@/store/modules/settings'
@@ -122,7 +123,14 @@ const asyncRoutes: Route.recordMainRaw[] = [
     children: [
       ...DataQuality,
     ],
-  }
+  }, {
+    meta: {
+      title: '数据盘点',
+    },
+    children: [
+      ...DataInventory,
+    ],
+  },
 ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {

@@ -227,6 +227,8 @@ const useUserStore = defineStore(
           mark = 'data-sync'
         } else if (item.meta.title == '数据质量') {
           mark = 'data-quality'
+        }  else if (item.meta.title == '数据盘点') {
+          mark = 'data-inventory'
         } else if (item.meta.title == '首页') {
           mark = 'data-asset-index'
         } else if (item.meta.title == '数据服务') {

+<route lang="yaml">
+  name: taskConfig //分类分级任务
+  </route>
+  
+<script lang="ts" setup name="taskConfig">
+import { ref ,onMounted} from "vue";
+
+</script>
+
+<template>
+  <div>分类分级任务</div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file

+<route lang="yaml">
+  name: taskConfig //分类分级模板
+  </route>
+
+<script lang="ts" setup name="templateConfig">
+
+import { ref, onMounted } from "vue";
+import TableTools from '@/components/Tools/table_tools.vue';
+import { MoreFilled } from "@element-plus/icons-vue";
+import { commonPageConfig } from '@/components/PageNav/index';
+import { useValidator } from '@/hooks/useValidator';
+
+const router = useRouter();
+const { required } = useValidator();
+const { proxy } = getCurrentInstance() as any;
+
+const tabsInfo = ref({
+  activeName: 'classStandard',
+  tabs: [
+    { label: '分类分级模板', name: 'classTemplate' },
+    { label: '分类标准', name: 'classStandard' },
+    { label: '分级标准', name: 'gradeStandard' }
+  ]
+});
+
+const tabChange = (val) => {
+  tabsInfo.value.activeName = val;
+}
+
+/** 模板的搜索配置 */
+const searchItemList = ref([
+  {
+    type: 'input',
+    label: '',
+    field: 'templateName',
+    default: '',
+    maxlength: 50,
+    placeholder: '模板名称',
+    clearable: true,
+    visible: true
+  }
+]);
+
+/** 搜索查询分类分级模板。 */
+const searchTemplate = (val: any, clear: boolean = false) => {
+  // page.value.curr = 1;
+  // if (clear) {
+  //   searchItemList.value.map(item => item.default = '')
+  //   page.value.planName = '';
+  //   page.value.state = null;
+  //   getTableData();
+  //   return;
+  // }
+  // page.value.planName = val.planName;
+  // page.value.state = val.state;
+  // getTableData();
+};
+
+/** ------------------------------- 分类标准相关 ------------------------------------- */
+
+/** 分类标准的搜索配置 */
+const classSearchItemList = ref([
+  {
+    type: 'input',
+    label: '',
+    field: 'classStandardName',
+    default: '',
+    maxlength: 50,
+    placeholder: '分类标准名称',
+    clearable: true,
+    visible: true
+  }
+]);
+
+const classPage: any = ref({
+  ...commonPageConfig,
+  classStandardName: ''
+});
+
+const classListDataLoading = ref(false);
+
+const classListData: any = ref([{
+  guid: '1',
+  name: '工业数据分类',
+  updateTime: '2020-12-12 10:10:10'
+}, {
+  guid: '2'
+}, {
+  guid: '3'
+}, {
+  guid: '4'
+}, {
+  guid: '5'
+}, {
+  guid: '6'
+}, {
+  guid: '7'
+}]);
+
+/** 记录点击省略号弹出菜单的visible */
+const cardBtnVisible: any = ref(false);
+
+/** 搜索查询分类标准 */
+const searchClass = (val: any, clear: boolean = false) => {
+  classPage.value.curr = 1;
+  if (clear) {
+    classSearchItemList.value.map(item => item.default = '')
+  //  classPage.value.planName = '';
+    getClassListData();
+    return;
+  }
+   //  classPage.value.planName = '';
+   getClassListData();
+};
+
+const newCreateClass = () => {
+  newCreateClassStandardDialogInfo.value.visible = true;
+  classStandardFormItems.value.forEach(item => item.default = '');
+}
+
+const getClassListData = () => {
+  // classListDataLoading.value = true;
+  // getPlanList({
+  //   pageIndex: classPage.value.curr,
+  //     pageSize: classPage.value.limit,
+  //   //TODO
+  // }).then((res: any) => {
+  //   classListDataLoading.value = false;
+  //   if (res === undefined) {
+  //     return;
+  //   }
+  //   if (res.code == proxy.$passCode) {
+  //     const data = res.data || {}
+  //     classListData.value.data = data.records || [];
+  //   } else {
+  //     proxy.$ElMessage.error(res.msg);
+  //   }
+  // })
+}
+
+/** 编辑分类 */
+const handleClassDataEdit = (item) => {
+
+}
+
+const handleClassDataClick = (item) => {
+  router.push({
+    name: 'classStandardEdit',
+    query: {
+      guid: item.guid,
+      classStandardName: '工业分类'
+    }
+  });
+}
+
+const handleClassDataDel = (item) => {
+
+}
+
+const classStandardFormItems = ref([{
+  label: '分类名称',
+  type: 'input',
+  maxlength: 50,
+  placeholder: '请输入',
+  field: 'classStandardName',
+  default: '',
+  block: true,
+  clearable: true,
+  required: true
+}, {
+  label: '分级标准',
+  type: 'select',
+  placeholder: '请选择',
+  field: 'gradeStandard',
+  default: 1,
+  options: [], //TODO
+  required: true,
+  filterable: true,
+  clearable: true,
+  visible: true,
+  block: true,
+}]);
+
+const classStandardFormRules = ref({
+  classStandardName: [required('请填写分类名称')],
+  gradeStandard: [required('请选择分级标准')]
+});
+
+const newCreateClassStandardDialogInfo = ref({
+  visible: false,
+  size: 460,
+  title: "新增分类",
+  type: "",
+  formInfo: {
+    id: "class-standard-form",
+    items: classStandardFormItems.value,
+    rules: classStandardFormRules.value,
+  },
+  submitBtnLoading: false,
+  btns: {
+    cancel: () => {
+      newCreateClassStandardDialogInfo.value.visible = false;
+    },
+    submit: (btn, info) => {
+      newCreateClassStandardDialogInfo.value.visible = false;
+      classPage.value.curr = 1;
+      getClassListData();
+      //跳转到编辑页面
+      router.push({
+        name: 'classStandardEdit',
+        query: {
+          guid: '1',
+          classStandardName: '工业分类'
+        }
+      });
+    }
+  }
+})
+
+const newCreateTemplate = () => {
+
+}
+
+const newCreateGrade = () => {
+
+}
+
+onBeforeMount(() => {
+  getClassListData();
+})
+
+</script>
+
+<template>
+  <div class="container">
+    <Tabs :tabs-info="tabsInfo" @tab-change="tabChange" />
+    <div class="panel" v-show="tabsInfo.activeName == 'classTemplate'">
+      <div class="table_tool_wrap">
+        <TableTools :searchItems="searchItemList" :searchId="'template-manage-search'" @search="searchTemplate" />
+        <div class="tools_btns">
+          <el-button type="primary" @click="newCreateTemplate">新增模板</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="panel" v-show="tabsInfo.activeName == 'classStandard'">
+      <div class="table_tool_wrap">
+        <TableTools :searchItems="classSearchItemList" :searchId="'template-manage-search'" @search="searchClass" />
+        <div class="tools_btns">
+          <el-button type="primary" @click="newCreateClass">新增分类</el-button>
+        </div>
+      </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="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">
+              <template #reference>
+                <el-icon color="#666" @click.stop="cardBtnVisible = true">
+                  <MoreFilled />
+                </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>
+              </div>
+            </el-popover>
+          </div>
+          <el-icon class="title-icon">
+            <svg-icon name="folder" />
+          </el-icon>
+          <div class="title">{{ item.name }}</div>
+          <div class="desc-row">
+            <div class="desc">{{ '分级标准' }}</div>
+            <div class="desc">{{ item.updateTime }}</div>
+          </div>
+        </div>
+        <div v-if="!classListData.length" class="card-noData">
+          <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
+          <span>暂无分类标准</span>
+        </div>
+      </div>
+    </div>
+    <div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'">
+      <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
+    </div>
+    <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  height: 100%;
+  padding: 12px 16px 20px 16px;
+
+  .panel {
+    height: calc(100% - 51px);
+  }
+}
+
+:deep(.table-tools) {
+  .tools_search {
+    padding: 0px;
+  }
+}
+
+.tools_btns {
+  padding: 8px 0px 16px;
+}
+
+.data-content {
+  height: calc(100% - 92px);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  align-content: flex-start;
+  overflow-y: auto;
+
+  .card-noData {
+    height: 100%;
+    width: 100%;
+    background: #fafafa;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #909399;
+    font-size: 14px;
+  }
+
+  .card-content {
+    width: 18%;
+    max-width: 240px;
+    min-width: 220px;
+    height: 160px;
+    padding: 12px;
+    border: 1px solid var(--el-border-color-regular);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+    &:hover {
+      border: 1px solid var(--el-color-primary);
+    }
+
+    :deep(.title-icon.el-icon) {
+      width: 40px;
+      height: 40px;
+      margin-top: 28px;
+      margin-bottom: 16px;
+
+      svg {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    .title {
+      font-size: 14px;
+      color: #212121;
+      text-align: center;
+      line-height: 21px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    .desc-row {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .desc {
+        font-size: 12px;
+        color: #999999;
+        line-height: 18px;
+      }
+    }
+
+    .type-btn {
+      position: absolute;
+      right: 12px;
+    }
+  }
+}
+</style>
\ No newline at end of file