分级分类任务更新

@@ -31,7 +31,7 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
   // 是否已登录
-  if (userStore.isLogin) {
+  if (1) {
     // 是否已根据权限动态生成并注册路由
     if (routeStore.isGenerate) {
       // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态

@@ -24,6 +24,27 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
+        path: 'task-edit',
+        name: 'taskEdit',
+        component: () => import('@/views/data_inventory/taskEdit.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.name) {
+            to.meta.title = `编辑-${to.query.name}`;
+          } else {
+            to.meta.title = '分类分级任务-新增';
+          }
+        }
+      },
+      {
         path: 'template-config',
         name: 'templateConfig',
         component: () => import('@/views/data_inventory/templateConfig.vue'),

@@ -3,14 +3,243 @@
   </route>
 
 <script lang="ts" setup name="taskConfig">
-import { ref ,onMounted} from "vue";
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import useUserStore from "@/store/modules/user";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+import useDataAssetStore from "@/store/modules/dataAsset";
+import { getListingList, listingDelete, listingUpdateStatus, filterVal, getParamsDataList } from "@/api/modules/dataProduct";
+import { TableColumnWidth } from '@/utils/enum';
+
+import Table from "@/components/Table/index.vue";
+
+const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+const userStore = useUserStore();
+const userData = JSON.parse(userStore.userData);
+const assetStore = useDataAssetStore();
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+const searchItemValue: any = ref({});
+const currTableData: any = ref({});
+const tableInfo = ref({
+  id: "mapping-table",
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+    { label: "任务名称", field: "damCode", width: 96 },
+    { label: "目录名称", field: "damName", width: 120 },
+    { label: "分类分级模板", field: "damTypeName", width: 200 },
+    { label: "元数据", field: "damTypeName", width: 200 },
+    // {
+    //   label: "是否公共数据", field: "isPublicData", width: 120, getName: (scope) => {
+    //     return scope.row.isPublicData == 'Y' ? '是' : '否';
+    //   }
+    // },
+    {
+      label: "执行状态", field: "approveState", width: TableColumnWidth.STATE, align: 'center', type: "tag", getName: (scope) => {
+        return filterVal(scope.row.approveState, 'approveState');
+      }
+    },
+    { label: "任务修改人", field: "damName", width: 120 },
+    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME },
+    { label: "确认次数", field: "damName", width: 96, align: 'right' },
+    { label: "结果确认人", field: "damName", width: 120 },
+    { label: "确认时间", field: "updateTime", width: TableColumnWidth.DATETIME },
+    {
+      label: "结果状态", field: "approveState", width: TableColumnWidth.STATE, align: 'center', type: "tag", getName: (scope) => {
+        return filterVal(scope.row.approveState, 'approveState');
+      }
+    },
+  ],
+  loading: false,
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 200,
+    btns: (scope) => {
+      let row = scope.row, btnArr: any = [];
+      if (row.approveState == 'Y') {
+        if (row.listingStatus == 'Y') {
+          btnArr.splice(0, 0, { label: "详情", value: "detail" });
+        } else {
+          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
+        }
+      } else {
+        if (row.approveState == 'A') {
+          btnArr.splice(0, 0, { label: "详情", value: "detail" });
+        } else {
+          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
+        }
+      }
+      return btnArr;
+    },
+  },
+});
+
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getListingList(
+    Object.assign({}, searchItemValue.value, {
+      pageIndex: page.value.curr,
+      pageSize: page.value.limit,
+    })
+  ).then((res: any) => {
+    tableInfo.value.loading = false;
+    tableInfo.value.data = res.data.records || [];
+    tableInfo.value.page.curr = res.data.pageIndex;
+    tableInfo.value.page.limit = res.data.pageSize;
+    tableInfo.value.page.rows = res.data.totalRows;
+  })
+    .catch((res) => {
+      tableInfo.value.loading = false;
+    });
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+  if (type == "detail" || type === "edit") {
+    toPath(type);
+  } else if (type === "delete") {
+    open("此操作将永久删除，是否继续？", "warning");
+  }
+};
+
+const toPath = (type) => {
+  if (type == 'add') {
+    router.push({
+      name: "taskEdit",
+      query: {
+        type
+      },
+    });
+  } else {
+    router.push({
+      name: "taskEdit",
+      query: {
+        guid: currTableData.value.guid,
+        name: currTableData.value.damName,
+        type
+      },
+    });
+  }
+}
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  tableInfo.value.page.limit = page.value.limit;
+  tableInfo.value.page.curr = page.value.curr;
+  getTableData();
+};
+
+const open = (msg, type, isBatch = false) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    const guids = [currTableData.value.guid];
+    listingDelete(guids).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getFirstPageData();
+        ElMessage({
+          type: "success",
+          message: "删除成功",
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    }).catch((res) => {
+      tableInfo.value.loading = false;
+    });
+  });
+};
+
+const getFirstPageData = () => {
+  page.value.curr = 1
+  tableInfo.value.page.curr = 1;
+  getTableData();
+}
+
+onActivated(() => {
+  if (assetStore.isRefresh) {//如果是首次加载，则不需要调用
+    getFirstPageData();
+    assetStore.set(false);
+  }
+})
+
+onBeforeMount(() => {
+
+})
 
 </script>
 
 <template>
-  <div>分类分级任务</div>
+  <div class="container_wrap" v-if="tableInfo.data.length">
+    <div class="table_tool_wrap">
+      <div class="table_title">分类分级任务</div>
+    </div>
+    <div class="table_panel_wrap">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+    </div>
+  </div>
+  <div class="container_wrap" v-else>
+    <div class="card-noData">
+      <img src="@/assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
+      <p>暂无分类分级任务，<span class="text_btn" @click="toPath('add')">去新建</span></p>
+    </div>
+  </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
+.table_tool_wrap {
+  width: 100%;
+  height: 40px !important;
+  padding: 0 8px;
+
+  .table_title {
+    height: 40px;
+    line-height: 40px;
+    font-weight: 600;
+    font-size: 16px;
+    color: #212121;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 40px);
+  padding: 0px 8px 0;
+}
 
+.card-noData {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 </style>

+<route lang="yaml">
+  name: taskEdit //分类分级任务编辑
+  </route>
+
+<script lang="ts" setup name="taskEdit">
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import useUserStore from "@/store/modules/user";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import useDataAssetStore from "@/store/modules/dataAsset";
+import { getListingList, listingDelete, listingUpdateStatus, filterVal, getParamsDataList } from "@/api/modules/dataProduct";
+import { TableColumnWidth } from '@/utils/enum';
+
+import Table from "@/components/Table/index.vue";
+
+const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+const userStore = useUserStore();
+const userData = JSON.parse(userStore.userData);
+const assetStore = useDataAssetStore();
+
+const step = ref(0);
+const selectIndex = ref(0);
+const asideSearchInput = ref("");
+const permissionList: any = ref([])
+const listLoading = ref(false)
+const currpermissionList: any = ref([])
+const templateInfo = ref({})
+const treeIndex: any = ref({})
+
+const treeInfo = ref({
+  id: "data-pickup-tree",
+  filter: true,
+  queryValue: "",
+  queryPlaceholder: "输入组织名称搜索",
+  props: {
+    label: "organisationName",
+    value: "guid",
+  },
+  nodeKey: 'guid',
+  expandedKey: [],
+  expandOnNodeClick: false,
+  data: [],
+});
+
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+});
+const searchItemValue: any = ref({});
+const currTableData: any = ref({});
+const tableInfo = ref({
+  id: "mapping-table",
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
+    { label: "标签", field: "damCode", width: 96 },
+    { label: "分类", field: "damTypeName", width: 380 },
+    { label: "分级", field: "damName", width: 55 },
+    { label: "规则", field: "damTypeName", width: 380 },
+  ],
+  loading: false,
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 200,
+    btns: (scope) => {
+      let row = scope.row, btnArr: any = [];
+      if (row.approveState == 'Y') {
+        if (row.listingStatus == 'Y') {
+          btnArr.splice(0, 0, { label: "详情", value: "detail" });
+        } else {
+          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
+        }
+      } else {
+        if (row.approveState == 'A') {
+          btnArr.splice(0, 0, { label: "详情", value: "detail" });
+        } else {
+          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
+        }
+      }
+      return btnArr;
+    },
+  },
+});
+
+const nodeClick = (data) => {
+  treeIndex.value = data
+  toSearch({})
+}
+
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getListingList(
+    Object.assign({}, searchItemValue.value, {
+      pageIndex: page.value.curr,
+      pageSize: page.value.limit,
+    })
+  ).then((res: any) => {
+    tableInfo.value.loading = false;
+    tableInfo.value.data = res.data.records || [];
+    tableInfo.value.page.curr = res.data.pageIndex;
+    tableInfo.value.page.limit = res.data.pageSize;
+    tableInfo.value.page.rows = res.data.totalRows;
+  })
+    .catch((res) => {
+      tableInfo.value.loading = false;
+    });
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+  if (type == "detail" || type === "edit") {
+    toPath(type);
+  } else if (type === "delete") {
+    open("此操作将永久删除，是否继续？", "warning");
+  }
+};
+
+const toPath = (type) => {
+  if (type == 'add') {
+    router.push({
+      name: "productListingDetail",
+      query: {
+        type
+      },
+    });
+  } else {
+    router.push({
+      name: "productListingDetail",
+      query: {
+        guid: currTableData.value.guid,
+        name: currTableData.value.damName,
+        type
+      },
+    });
+  }
+}
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  tableInfo.value.page.limit = page.value.limit;
+  tableInfo.value.page.curr = page.value.curr;
+  getTableData();
+};
+
+const open = (msg, type, isBatch = false) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    const guids = [currTableData.value.guid];
+    listingDelete(guids).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getFirstPageData();
+        ElMessage({
+          type: "success",
+          message: "删除成功",
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    }).catch((res) => {
+      tableInfo.value.loading = false;
+    });
+  });
+};
+
+const getFirstPageData = () => {
+  page.value.curr = 1
+  tableInfo.value.page.curr = 1;
+  getTableData();
+}
+
+const querySearch = (queryString: string) => {
+  listLoading.value = true
+  const results = queryString
+    ? currpermissionList.value.filter(item => item.dataPermissionName.indexOf(queryString) > -1)
+    : permissionList.value;
+  currpermissionList.value = results
+  listLoading.value = false
+}
+
+const btnClick = async (btn, bType = null) => {
+  const type = btn.value;
+};
+
+onActivated(() => {
+
+})
+
+onBeforeMount(() => {
+
+})
+
+</script>
+
+<template>
+  <div class="container_wrap full flex">
+    <div class="aside_wrap">
+      <div class="aside_title">选择分类分级模板</div>
+      <div class="aside_search">
+        <el-input v-model.trim="asideSearchInput" placeholder="请输入关键字" :prefix-icon="Search" clearable
+          @change="querySearch" />
+      </div>
+      <div class="aside_list" v-loading="listLoading" v-infinite-scroll="handleScroll">
+        <div class="list_item" v-for="(item, i) in currpermissionList" :class="{ active: selectIndex == i }"
+          @click="selectIndex = i; changTable();" v-preReClick>{{ item.dataPermissionName }}</div>
+      </div>
+    </div>
+    <div class="main_wrap">
+      <div class="template_panel">
+        <div class="panel_title">
+          <p class="title_text">{{ templateInfo.title }}</p>
+          <div class="title_desc">
+            <p class="desc_group" v-for="desc in templateInfo.descGroup">
+              <span class="desc_label">{{ desc.label }}：</span>
+              <span class="desc_value">{{ desc.value }}</span>
+            </p>
+          </div>
+        </div>
+        <div class="panel_tags">
+          <el-tag v-for="tag in templateInfo.tags" :type="tag.type">{{ tag.name }}</el-tag>
+        </div>
+        <p class="panel_desc">{{ templateInfo.desc }}</p>
+      </div>
+      <div>
+        <div class="box_left aside_wrap">
+          <div class="aside_title">组织列表</div>
+          <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
+        </div>
+        <div class="box_right">
+          <div class="panel_title">人员信息</div>
+          <div class="table_panel_wrap">
+            <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
+          </div>
+        </div>
+      </div>
+      <div class="tool_btns">
+        <div class="btns">
+          <el-button @click="btnClick({ value: 'cancel' })" v-if="step == 0">取消</el-button>
+          <el-button @click="btnClick({ value: 'prev' })" v-if="step == 1">上一步</el-button>
+          <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step == 0">下一步</el-button>
+          <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step == 1">后台运行</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.table_tool_wrap {
+  width: 100%;
+  height: 40px !important;
+  padding: 0 8px;
+
+  .table_title {
+    height: 40px;
+    line-height: 40px;
+    font-weight: 600;
+    font-size: 16px;
+    color: #212121;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 40px);
+  padding: 0px 8px 0;
+}
+
+.card-noData {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>