产品目录前端页面开发

@@ -475,6 +475,12 @@
     .cell {
     .cell {
       line-height: 24px;
       line-height: 24px;
 
 
+      .el-table__expand-icon {
+        background: transparent;
+        border: none;
+        padding: 0px;
+      }
+
       &>.el-select {
       &>.el-select {
         width: calc(var(--el-select-width) - 1px); //解决缩放浏览器会显示提示，由于px小数点造成
         width: calc(var(--el-select-width) - 1px); //解决缩放浏览器会显示提示，由于px小数点造成
       }
       }

@@ -154,7 +154,7 @@ const handleTreeSelectChange = (nodeObj, node, treeNode, event) => {
 const nodeCheck = (nodeObj, checkedObj) => {
 const nodeCheck = (nodeObj, checkedObj) => {
   checkedNodes.value = checkedObj.checkedNodes
   checkedNodes.value = checkedObj.checkedNodes
   checkedKeys.value = checkedObj.checkedKeys
   checkedKeys.value = checkedObj.checkedKeys
-  emits('nodeCheck', checkedObj, props.treeInfo.id)
+  emits('nodeCheck', checkedObj, props.treeInfo.id, nodeObj)
 }
 }
 
 
 const handleItemMenuClick = (node, type) => {
 const handleItemMenuClick = (node, type) => {

@@ -354,6 +354,39 @@ const routes: RouteRecordRaw[] = [
         },
         },
       },
       },
     ]
     ]
+  },
+    {
+    path: '/data-product/product-catalog',
+    component: Layout,
+    meta: {
+      title: '产品目录',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: '',
+        name: 'productCatalogManage',
+        component: () => import('@/views/data_asset/productCatalogManage.vue'),
+        meta: {
+          title: '',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true
+        },
+      },
+       {
+        path: 'product-register-catalog-detail',
+        name: 'productSortCatalogDetail',
+        component: () => import('@/views/data_asset/registerCatalogDetail.vue'),
+        meta: {
+          title: '产品详情-',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true,
+          reuse: true
+        }
+      },
+    ]
   }
   }
 ]
 ]
 export default routes
 export default routes

+<template>
+  <div class="container_wrap full flex">
+    <div class="aside_wrap">
+      <div class="aside_title">产品分类</div>
+      <Tree ref="treeRef" :treeInfo="treeInfo" @nodeCheck="handleTreeNodeChange" />
+    </div>
+    <div class="main_wrap">
+      <div class="header-bg">
+        <el-input v-model.trim="page.searchKey" size="large" placeholder="请输入关键字搜索" :prefix-icon="Search"
+          @blur="toSearch(true, true)" @keyup.enter.native="searchEnterFun" clearable />
+      </div>
+      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange"
+        style="height: calc(100% - 96px);margin: 16px 16px 0px;" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="productCatalogManage">
+import { commonPageConfig } from '@/components/PageNav';
+import { Search } from '@element-plus/icons-vue';
+import {
+  getDamTypesList
+} from "@/api/modules/dataAsset";
+import { USERROLE } from '@/utils/enum';
+
+const router = useRouter();
+const route = useRoute();
+const { proxy } = getCurrentInstance() as any;
+const dataSourceList = ref([{ //如果是授权数据则不能选择其余的
+  value: 1,
+  label: '授权数据',
+}, {
+  value: 2,
+  label: '自有数据',
+},
+{
+  value: 3,
+  label: '购买数据',
+},
+{
+  value: 4,
+  label: '其他来源',
+}]);
+
+/** 是否是数据使用方 */
+const isDataUse = computed(() => {
+  return localStorage.getItem('userRole') == USERROLE.USE;
+})
+
+const treeRef = ref();
+
+const treeInfo = ref({
+  id: "data-product-tree",
+  filter: true,
+  queryValue: "",
+  queryPlaceholder: "请输入关键字搜索",
+  showCheckbox: true,
+  checkStrictly: false,
+  props: {
+    label: "label",
+    value: "value",
+    children: 'childDictList'
+  },
+  nodeKey: 'value',
+  expandOnNodeClick: false,
+  data: <any>[],
+  loading: false
+});
+
+//记录每次点击的节点。
+const handleTreeNodeChange = (checkedObj, id, nodeObj) => {
+  debugger
+  let treeRefs = treeRef.value.treeRef;
+  let checkedKeys = checkedObj.checkedObj || [];//全勾选的所有节点。
+  let halfCheckedKeys = checkedObj.halfCheckedKeys || [];//半勾选的节点。
+  //思路，一个个的分类判断是否在半勾选，如果是，就将其勾选的子节点获取出来。
+  /** 先damType */
+  if (halfCheckedKeys.includes('damType')) {
+    // 获取出来勾选的子节点。
+    treeRefs.getNode("damType").childNodes?.filter(c=> c.checked == true);
+  } //如果是全选，则不需要处理传参。
+  /** 数据来源 */
+  if (halfCheckedKeys.includes('dataSources')) {
+
+  }
+  /** 行业分类 */
+  /** 机构分类 */
+  /** 复杂的领域及应用场景。 */
+  if (halfCheckedKeys.includes('domain')) {
+    //计算领域下勾选的子节点。同时判断医疗健康和工业制造。
+  }
+}
+
+const page = ref({
+  ...commonPageConfig,
+  searchKey: '',
+});
+
+const oldKeyWord = ref(""); //记录上次输入的关键字，若是输入值未变化，则失去焦点时不用触发搜索。
+const isEnter = ref(false);
+
+/** 触发搜索查询 */
+const toSearch = (clear: boolean = true, isBlur: boolean = false) => {
+  if (clear) {
+    page.value.curr = 1
+  }
+  if (isBlur && !isEnter.value && oldKeyWord.value === page.value.searchKey) {
+    return;
+  }
+  isEnter.value = false;
+  oldKeyWord.value = page.value.searchKey;
+  getSearchData(clear);
+}
+
+const searchEnterFun = (event) => {
+  isEnter.value = true;
+  event.target?.blur();
+}
+
+/** 查询表格数据 */
+const getSearchData = (clear = false) => {
+
+}
+
+const tableInfo = ref({
+  id: 'contract-table',
+  rowKey: 'guid',
+  loading: false,
+  fields: [{ label: "序号", type: "index", width: 56, align: "center" },
+  {
+    label: "数据产品名称", field: "dataProductName", width: 160, type: "text_btn", columClass: 'text_btn', value: "detail", disabled: (scope) => {
+      return scope.row.contractStatus == '06';
+    }, click: (scope) => {
+      if (scope.row.contractStatus == '06') {
+        return;
+      }
+      router.push({
+        name: 'productSortCatalogDetail',
+        query: {
+          guid: scope.row.dataProductGuid,
+          type: 'detail',
+          foundMode: 'use',
+          name: scope.row.dataProductName,
+        }
+      });
+    }
+  },
+  { label: "产品类型", field: "damTypeName", width: 100 },
+  { label: "应用场景", field: "scenarioName", width: 120 },
+  { label: "行业分类", field: "industryName", width: 140 },
+  { label: "机构分类", field: "institutionTypeName", width: 120 },
+  {
+    label: "数据来源", field: "dataSources", width: 100, getName: (scope) => {
+      return scope.row.dataSources && dataSourceList.value.find(i => i.value == scope.row.dataSources)?.label || '--'
+    }
+  },
+  { label: "上架时间", field: "listingTime", width: 170 },
+  ],
+  data: [{}],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    show: isDataUse.value,
+    width: 120,
+    btns: (scope) => {
+      return [{
+        value: 'approve', label: "数据申请", click: (scope) => { //TODO，是否申请过的不能再申请？
+
+        }
+      }]
+    }
+  }
+});
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  tableInfo.value.page.curr = page.value.curr;
+  tableInfo.value.page.limit = page.value.limit;
+  getSearchData();
+};
+
+const damTypes: any = ref([]);
+/** 所属主题多级列表 */
+const subjectDomainListData: any = ref([]);
+/** 行业分类类型列表 */
+const industryDictList: any = ref([]);
+/** 领域字典列表 */
+const domainDictList: any = ref([]);
+/** 机构类型字典列表 */
+const institutionTypeDictList: any = ref([]);
+/** 所属科室下拉列表 */
+const medDepartmentCodeList: any = ref([]);
+
+onBeforeMount(() => {
+  treeInfo.value.loading = true;
+  let psAll: any[] = [];
+  psAll.push(getDamTypesList({
+    dictType: "资产类型",
+  }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      damTypes.value = res.data || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  }))
+  psAll.push(getDamTypesList({
+    dictType: "行业分类",
+    level: 1
+  }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      industryDictList.value = res.data || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  }))
+  psAll.push(getDamTypesList({ dictType: '领域' }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      domainDictList.value = res.data || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  }));
+  psAll.push(getDamTypesList({
+    dictType: "组织机构性质",
+  }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      institutionTypeDictList.value = res.data || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  }))
+  psAll.push(getDamTypesList({
+    dictType: "数据资产目录主题名称",
+  }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      subjectDomainListData.value = res.data?.find(d => d.value == '1')?.childDictList || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  }))
+
+  psAll.push(getDamTypesList({
+    dictType: "科室",
+  }).then((res: any) => {
+    if (res.code == proxy.$passCode) {
+      medDepartmentCodeList.value = res.data || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  }));
+
+  Promise.all(psAll).then(() => {
+    treeInfo.value.loading = false;
+    treeInfo.value.data = [];
+    treeInfo.value.data.push({
+      value: 'damType',
+      label: '产品类型',
+      childDictList: damTypes.value
+    });
+    let item = domainDictList.value.find(i => i.value == '003');//医疗健康，下级应用场景和所属科室
+    let childDictList = item.childDictList || [];
+    item.childDictList = [{
+      value: 'scenario',
+      label: '应用场景',
+      childDictList: childDictList
+    }];
+    item.childDictList.push({
+      value: 'medDepartmentCode',
+      label: '所属科室',
+      childDictList: medDepartmentCodeList.value
+    });
+    let item4 = domainDictList.value.find(i => i.value == '004'); //工业制造
+    let childDictList4 = item4.childDictList || [];
+    item4.childDictList = [{
+      value: 'scenario',
+      label: '应用场景',
+      childDictList: childDictList4
+    }];
+    item4.childDictList.push({
+      value: 'subjectDomain',
+      label: '所属主题',
+      childDictList: subjectDomainListData.value
+    });
+    treeInfo.value.data.push({
+      value: 'domain',
+      label: '领域及应用场景',
+      childDictList: domainDictList.value //TODO,需要带上主题和科室。
+    });
+    treeInfo.value.data.push({
+      value: 'dataSource',
+      label: '数据来源',
+      childDictList: dataSourceList.value
+    });
+    treeInfo.value.data.push({
+      value: 'industry',
+      label: '行业分类',
+      childDictList: industryDictList.value
+    });
+    treeInfo.value.data.push({
+      value: 'institutionType',
+      label: '机构分类',
+      childDictList: institutionTypeDictList.value
+    });
+  }).catch(() => {
+    treeInfo.value.loading = false;
+  })
+})
+
+</script>
+
+<style lang="scss" scoped>
+.container_wrap {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+
+  .aside_wrap {
+    width: 220px;
+    border-right: 1px solid #d9d9d9;
+    box-shadow: none;
+
+    .aside_title {
+      display: inline-block;
+    }
+  }
+
+  .tree_panel {
+    height: calc(100% - 36px);
+    padding-top: 0;
+
+    :deep(.el-tree) {
+      margin: 0;
+      overflow: hidden auto;
+    }
+  }
+
+}
+
+.container_wrap.flex {
+  .main_wrap {
+    padding: 0px;
+  }
+}
+
+.header-bg {
+  height: 80px;
+  background-image: url('@/assets/images/product-catalog-bg.png');
+  background-size: cover;
+  /* 背景图覆盖整个元素 */
+  background-position: center;
+  /* 背景图居中 */
+  background-repeat: no-repeat;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .el-input {
+    width: 60%;
+  }
+}
+</style>
\ No newline at end of file