|
@@ -0,0 +1,312 @@
|
|
|
+<template>
|
|
|
+ <hc-drawer
|
|
|
+ v-model="isShow"
|
|
|
+ to-id="hc-main-box"
|
|
|
+ is-close
|
|
|
+ @close="drawerClose"
|
|
|
+ >
|
|
|
+ <hc-body split :options="{ sizes: [14, 96] }">
|
|
|
+ <template #left>
|
|
|
+ <hc-card scrollbar>
|
|
|
+ <ElTree
|
|
|
+ :load="treeLoadNode"
|
|
|
+ :props="treeProps"
|
|
|
+ accordion
|
|
|
+ highlight-current
|
|
|
+ lazy
|
|
|
+ @node-click="treeNodeTap"
|
|
|
+ />
|
|
|
+ </hc-card>
|
|
|
+ </template>
|
|
|
+ <hc-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="w-400px">
|
|
|
+ <hc-search-input
|
|
|
+ v-model="searchForm.titleName"
|
|
|
+ @search="searchClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button hc-btn type="primary" @click="editTable"
|
|
|
+ >编辑表单</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ hc-btn
|
|
|
+ type="danger"
|
|
|
+ @click="batchDel"
|
|
|
+ :loading="batchDelLoad"
|
|
|
+ >删除元素表</el-button
|
|
|
+ >
|
|
|
+ <!-- el-button hc-btn type="warning">排序</el-button -->
|
|
|
+ </template>
|
|
|
+ <hc-table
|
|
|
+ :column="tableColumn"
|
|
|
+ :datas="tableData"
|
|
|
+ :loading="tableLoading"
|
|
|
+ :index-style="{ width: 60 }"
|
|
|
+ is-check
|
|
|
+ :check-style="{ width: 29 }"
|
|
|
+ @selection-change="tableCheckChange"
|
|
|
+ >
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-link type="primary" @click="rowNodeClick(row)"
|
|
|
+ >分配节点</el-link
|
|
|
+ >
|
|
|
+ <el-link type="warning" @click="rowFormulaClick(row)"
|
|
|
+ >公式配置</el-link
|
|
|
+ >
|
|
|
+ <el-link type="danger" @click="rowEditClick(row)"
|
|
|
+ >编辑元素</el-link
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ <template #action>
|
|
|
+ <hc-pages :pages="searchForm" @change="pageChange" />
|
|
|
+ </template>
|
|
|
+ </hc-card>
|
|
|
+ </hc-body>
|
|
|
+
|
|
|
+ <!-- 分配节点 -->
|
|
|
+ <HcWebTemplate v-model="webTemplateShow" :info="webTemplateInfo" />
|
|
|
+ <!-- 编辑元素 -->
|
|
|
+ <editElement v-model="editElementShow" :info="editElementInfo" />
|
|
|
+ <!-- 编辑元素表单信息 -->
|
|
|
+ <editEle
|
|
|
+ :ownerTypeList="ownerTypeList"
|
|
|
+ :tableTypelist="tableTypelist"
|
|
|
+ :tab="editArr"
|
|
|
+ v-model="editTableShow"
|
|
|
+ :editType="1"
|
|
|
+ @close="editTableClose"
|
|
|
+ />
|
|
|
+ </hc-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, watch } from "vue";
|
|
|
+import { HcDelMsg } from "hc-vue3-ui";
|
|
|
+import { getArrValue, arrToId, isNullES } from "js-fast-way";
|
|
|
+import mainApi from "~api/desk/wbs";
|
|
|
+import privateApi from "~api/wbs/private";
|
|
|
+import HcWebTemplate from "./element/web-temp.vue";
|
|
|
+import editElement from "./element/edit-element.vue";
|
|
|
+import editEle from "./edit-ele.vue";
|
|
|
+import { getDictionaryData, getDictionaryVal } from "~uti/tools";
|
|
|
+
|
|
|
+//事件
|
|
|
+const emit = defineEmits(["close"]);
|
|
|
+
|
|
|
+//双向绑定
|
|
|
+const isShow = defineModel("modelValue", {
|
|
|
+ default: false,
|
|
|
+});
|
|
|
+
|
|
|
+//监听显示
|
|
|
+watch(isShow, (val) => {
|
|
|
+ if (val) getDataApi();
|
|
|
+});
|
|
|
+
|
|
|
+//处理相关数据
|
|
|
+const getDataApi = () => {
|
|
|
+ getTreeData();
|
|
|
+};
|
|
|
+
|
|
|
+//树配置
|
|
|
+const treeProps = {
|
|
|
+ label: "title",
|
|
|
+ children: "children",
|
|
|
+ isLeaf: "isLeaf",
|
|
|
+};
|
|
|
+
|
|
|
+//获取树接口
|
|
|
+const treeData = ref([]);
|
|
|
+const getTreeData = async () => {
|
|
|
+ const { data } = await mainApi.tabTypeLazyTreeAll({
|
|
|
+ parentId: "12345678910",
|
|
|
+ current: 1,
|
|
|
+ size: 1000,
|
|
|
+ });
|
|
|
+ treeData.value = getArrValue(data?.records);
|
|
|
+};
|
|
|
+//获取数据
|
|
|
+const tabTypeLazyTree = async (parentId = "12345678910") => {
|
|
|
+ //发起请求
|
|
|
+ const { data } = await mainApi.tabTypeLazyTreeAll({
|
|
|
+ parentId,
|
|
|
+ current: 1,
|
|
|
+ size: 1000,
|
|
|
+ });
|
|
|
+ const records = getArrValue(data?.records);
|
|
|
+ records.forEach((item) => {
|
|
|
+ item.isLeaf = !item.hasChildren;
|
|
|
+ });
|
|
|
+ return { data: records, total: data?.total };
|
|
|
+};
|
|
|
+const treeLoadNode = async (node, resolve) => {
|
|
|
+ if (node.level === 0) {
|
|
|
+ const resData = await tabTypeLazyTree();
|
|
|
+ resolve(resData?.data);
|
|
|
+ } else {
|
|
|
+ const resData = await tabTypeLazyTree(
|
|
|
+ node?.data?.primaryKeyId,
|
|
|
+ "",
|
|
|
+ false,
|
|
|
+ {
|
|
|
+ current: 1,
|
|
|
+ size: 2000,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ resolve(resData?.data);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//树节点被点击
|
|
|
+const nodeInfo = ref({});
|
|
|
+const treeNodeTap = (data, node) => {
|
|
|
+ nodeInfo.value = data;
|
|
|
+ searchForm.value.parentId = data.id;
|
|
|
+
|
|
|
+ if (node?.level === 1) {
|
|
|
+ searchClick();
|
|
|
+ } else if (node?.level === 2) {
|
|
|
+ searchForm.value.total = 1;
|
|
|
+ tableData.value = [data];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({ current: 1, size: 30, total: 0 });
|
|
|
+
|
|
|
+//搜索
|
|
|
+const searchClick = () => {
|
|
|
+ const { parentId } = searchForm.value;
|
|
|
+ if (isNullES(parentId)) {
|
|
|
+ window?.$message?.warning("请先在左侧点击一个节点");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ searchForm.value.current = 1;
|
|
|
+ getTableData();
|
|
|
+};
|
|
|
+
|
|
|
+//分页
|
|
|
+const pageChange = ({ current, size }) => {
|
|
|
+ const { parentId } = searchForm.value;
|
|
|
+ if (isNullES(parentId)) {
|
|
|
+ window?.$message?.warning("请先在左侧点击一个节点");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ searchForm.value.current = current;
|
|
|
+ searchForm.value.size = size;
|
|
|
+ getTableData();
|
|
|
+};
|
|
|
+
|
|
|
+//表格数据
|
|
|
+const tableData = ref([]);
|
|
|
+const tableColumn = ref([
|
|
|
+ { key: "title", name: "名称" },
|
|
|
+ { key: "elementTotal", name: "总量", width: 80, align: "center" },
|
|
|
+ { key: "tabOwner", name: "所属方", width: 140, align: "center" },
|
|
|
+ { key: "fillRate", name: "填报率", width: 80, align: "center" },
|
|
|
+ { key: "action", name: "操作", width: 220, align: "center" },
|
|
|
+]);
|
|
|
+
|
|
|
+//获取表格数据
|
|
|
+const tableLoading = ref(false);
|
|
|
+const getTableData = async () => {
|
|
|
+ tableData.value = [];
|
|
|
+ tableLoading.value = true;
|
|
|
+ const { data } = await mainApi.tabTypeLazyTreeAll({
|
|
|
+ ...searchForm.value,
|
|
|
+ total: null,
|
|
|
+ });
|
|
|
+ tableLoading.value = false;
|
|
|
+ tableData.value = getArrValue(data?.records);
|
|
|
+ searchForm.value.total = data?.total || 0;
|
|
|
+};
|
|
|
+
|
|
|
+//表格被选择
|
|
|
+const tableCheckKeys = ref([]);
|
|
|
+const tableCheckChange = (rows) => {
|
|
|
+ tableCheckKeys.value = rows;
|
|
|
+};
|
|
|
+
|
|
|
+//分配节点
|
|
|
+const webTemplateShow = ref(false);
|
|
|
+const webTemplateInfo = ref({});
|
|
|
+const rowNodeClick = (row) => {
|
|
|
+ webTemplateInfo.value = row;
|
|
|
+ webTemplateShow.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+//公式配置
|
|
|
+const rowFormulaClick = (row) => {};
|
|
|
+
|
|
|
+//编辑元素
|
|
|
+const editElementShow = ref(false);
|
|
|
+const editElementInfo = ref({});
|
|
|
+const rowEditClick = (row) => {
|
|
|
+ editElementInfo.value = row;
|
|
|
+ editElementShow.value = true;
|
|
|
+};
|
|
|
+//编辑元素表单信息
|
|
|
+const editTableShow = ref(false);
|
|
|
+const editArr = ref([]);
|
|
|
+const editTable = async () => {
|
|
|
+ if (tableCheckKeys.value.length < 1) {
|
|
|
+ window?.$message?.warning("请先选择一个元素");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ await getOwnerTypelist();
|
|
|
+ await getTableTypelist();
|
|
|
+ editArr.value = [];
|
|
|
+ tableCheckKeys.value.forEach((ele) => {
|
|
|
+ editArr.value.push({
|
|
|
+ tableType: getDictionaryVal(tableTypelist.value, ele.tabType),
|
|
|
+ tableOwner: getDictionaryVal(ownerTypeList.value, ele.tabOwner),
|
|
|
+ nodeName: ele.title,
|
|
|
+ Type: 10,
|
|
|
+ id: ele.id,
|
|
|
+ fillRate: ele.fillRate,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ editTableShow.value = true;
|
|
|
+};
|
|
|
+const ownerTypeList = ref([]);
|
|
|
+const getOwnerTypelist = async () => {
|
|
|
+ const data = await getDictionaryData("owner_type");
|
|
|
+ ownerTypeList.value = getArrValue(data);
|
|
|
+};
|
|
|
+//获取表单类型
|
|
|
+const tableTypelist = ref([]);
|
|
|
+const getTableTypelist = async () => {
|
|
|
+ const data = await getDictionaryData("table_type");
|
|
|
+ tableTypelist.value = getArrValue(data);
|
|
|
+};
|
|
|
+const editTableClose = () => {
|
|
|
+ editTableShow.value = false;
|
|
|
+ getTableData();
|
|
|
+};
|
|
|
+//关闭抽屉
|
|
|
+const drawerClose = () => {
|
|
|
+ isShow.value = false;
|
|
|
+ emit("close");
|
|
|
+};
|
|
|
+//删除元素表
|
|
|
+const batchDelLoad = ref(false);
|
|
|
+const batchDel = async () => {
|
|
|
+ if (tableCheckKeys.value.length < 1) {
|
|
|
+ window?.$message?.warning("请先选择一个元素");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ HcDelMsg(async (resolve) => {
|
|
|
+ //发起请求
|
|
|
+ const ids = arrToId(tableCheckKeys.value);
|
|
|
+ const { isRes } = await privateApi.delTabInfoAll(ids);
|
|
|
+ resolve(); //关闭弹窗
|
|
|
+ if (!isRes) return;
|
|
|
+ window.$message.success("删除成功");
|
|
|
+ getTableData().then();
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|