独立表单库

src/views/project/list/independent/index.vue

@@ -8,6 +8,7 @@
         <hc-body split :options="{ sizes: [14, 96] }">
             <template #left>
                 <hc-card scrollbar>
+                    <h3 class="mb-2">引用元素表</h3>
                     <ElTree
                         :load="treeLoadNode"
                         :props="treeProps"
@@ -28,8 +29,8 @@
                     </div>
                 </template>
                 <template #extra>
-                    <el-button hc-btn type="primary" @click="editTable"
-                        >编辑表单</el-button
+                    <el-button hc-btn type="primary" @click="quteEleTableClick"
+                        >引用元素表单库</el-button
                     >
                     <el-button
                         hc-btn
@@ -38,7 +39,6 @@
                         :loading="batchDelLoad"
                         >删除元素表</el-button
                     >
-                    <!-- el-button hc-btn type="warning">排序</el-button -->
                 </template>
                 <hc-table
                     :column="tableColumn"
@@ -50,15 +50,21 @@
                     @selection-change="tableCheckChange"
                 >
                     <template #action="{ row }">
-                        <el-link type="primary" @click="rowNodeClick(row)"
-                            >分配节点</el-link
+                        <el-link type="primary" @click="linkExcelClick(row)"
+                            >关联清表</el-link
                         >
-                        <el-link type="warning" @click="rowFormulaClick(row)"
-                            >公式配置</el-link
-                        >
-                        <el-link type="danger" @click="rowEditClick(row)"
+                        <el-link type="primary" @click="rowEditClick(row)"
                             >编辑元素</el-link
                         >
+                        <el-link type="primary" @click="adjustTable(row)"
+                            >调整表单</el-link
+                        >
+                        <el-link type="primary" @click="rowFormulaClick(row)"
+                            >编辑公式</el-link
+                        >
+                        <el-link type="primary" @click="assignWbs(row)"
+                            >分配WBS</el-link
+                        >
                     </template>
                 </hc-table>
                 <template #action>
@@ -66,6 +72,12 @@
                 </template>
             </hc-card>
         </hc-body>
+        <!-- 引用元素表 -->
+        <quteElePage
+            v-model="quteEleShow"
+            :projectId="projectId"
+            @close="quteEleClose"
+        ></quteElePage>
     </hc-drawer>
 </template>
 
@@ -73,10 +85,8 @@
 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 { getDictionaryData, getDictionaryVal } from "~uti/tools";
+import quteElePage from "./quteElePage.vue";
 
 //事件
 const emit = defineEmits(["close"]);
@@ -90,11 +100,35 @@ const isShow = defineModel("modelValue", {
 watch(isShow, (val) => {
     if (val) getDataApi();
 });
-
+const props = defineProps({
+    projectId: {
+        type: String,
+        default: "",
+    },
+    wbsType: {
+        type: [String, Number],
+        default: "",
+    },
+    wbsId: {
+        type: [String, Number],
+        default: "",
+    },
+});
+const projectId = ref(props.projectId);
+const wbsId = ref(props.wbsId);
+const wbsType = ref(props.wbsType);
+//监听数据
+watch(
+    () => [props.projectId, props.wbsId, props.wbsType],
+    ([pid, wid, wtype]) => {
+        projectId.value = pid;
+        wbsId.value = wid;
+        wbsType.value = wtype;
+    },
+    { deep: true }
+);
 //处理相关数据
-const getDataApi = () => {
-    getTreeData();
-};
+const getDataApi = () => {};
 
 //树配置
 const treeProps = {
@@ -103,23 +137,14 @@ const treeProps = {
     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({
+    const { data } = await privateApi.tabTypeLazyTree({
         parentId,
         current: 1,
         size: 1000,
+        projectId: projectId.value,
     });
     const records = getArrValue(data?.records);
     records.forEach((item) => {
@@ -139,6 +164,7 @@ const treeLoadNode = async (node, resolve) => {
             {
                 current: 1,
                 size: 2000,
+                projectId: projectId.value,
             }
         );
         resolve(resData?.data);
@@ -200,9 +226,10 @@ const tableLoading = ref(false);
 const getTableData = async () => {
     tableData.value = [];
     tableLoading.value = true;
-    const { data } = await mainApi.tabTypeLazyTreeAll({
+    const { data } = await privateApi.tabTypeLazyTree({
         ...searchForm.value,
         total: null,
+        projectId: projectId.value,
     });
     tableLoading.value = false;
     tableData.value = getArrValue(data?.records);
@@ -215,16 +242,14 @@ const tableCheckChange = (rows) => {
     tableCheckKeys.value = rows;
 };
 
-//分配节点
-const webTemplateShow = ref(false);
-const webTemplateInfo = ref({});
-const rowNodeClick = (row) => {
-    webTemplateInfo.value = row;
-    webTemplateShow.value = true;
-};
-
+//关联清表
+const linkExcelClick = () => {};
+//调整表单
+const adjustTable = () => {};
 //公式配置
 const rowFormulaClick = (row) => {};
+//分配WBS
+const assignWbs = () => {};
 
 //编辑元素
 const editElementShow = ref(false);
@@ -233,44 +258,7 @@ 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;
@@ -279,7 +267,7 @@ const drawerClose = () => {
 //删除元素表
 const batchDelLoad = ref(false);
 const batchDel = async () => {
-    if (tableCheckKeys.value.length < 1) {
+    if (tableCheckKeys.value.length == 0) {
         window?.$message?.warning("请先选择一个元素");
         return;
     }
@@ -293,4 +281,14 @@ const batchDel = async () => {
         getTableData().then();
     });
 };
+
+//引用元素表单库
+const quteEleShow = ref(false);
+const quteEleTableClick = () => {
+    quteEleShow.value = true;
+};
+const quteEleClose = () => {
+    quteEleShow.value = false;
+    getTableData().then();
+};
 </script>

src/views/project/list/independent/quteElePage.vue

@@ -0,0 +1,210 @@
+<template>
+    <!-- 树节点调整排序 -->
+    <hc-dialog
+        v-model="isShow"
+        title="引用元素表"
+        widths="56rem"
+        isTable
+        @close="dialogClose"
+        @save="submitClick"
+        :loading="submitLoading"
+    >
+        <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>
+
+                <hc-table
+                    :column="tableColumn"
+                    :datas="tableData"
+                    :loading="tableLoading"
+                    :index-style="{ width: 60 }"
+                    is-check
+                    :check-style="{ width: 29 }"
+                    @selection-change="tableCheckChange"
+                >
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-card>
+        </hc-body>
+    </hc-dialog>
+</template>
+<script setup>
+import { ref, watch, nextTick } from "vue";
+import mainApi from "~api/desk/wbs";
+import privateApi from "~api/wbs/private";
+import { arrToId, getArrValue, isNullES } from "js-fast-way";
+
+//事件
+const emit = defineEmits(["close"]);
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel("modelValue", {
+    default: false,
+});
+const props = defineProps({
+    projectId: {
+        type: [String, Number],
+        default: "1",
+    },
+});
+const porjectId = ref(props.projectId);
+//监听显示
+watch(isShow, (val) => {
+    if (val) {
+    } else {
+        emit("close");
+    }
+});
+
+//关闭弹窗
+const dialogClose = () => {
+    isShow.value = false;
+    emit("close");
+};
+//树配置
+const treeProps = {
+    label: "title",
+    children: "children",
+    isLeaf: "isLeaf",
+};
+
+//获取树接口
+
+//获取数据
+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 submitLoading = ref(false);
+const submitClick = async () => {
+    let ids = arrToId(tableCheckKeys.value);
+    submitLoading.value = true;
+    const { error, code, data, msg } = await privateApi.projecttabInfo({
+        primaryKeyIds: ids,
+        projectId: porjectId.value,
+    });
+    submitLoading.value = false;
+    //判断状态
+    if (!error && code === 200) {
+        window.$message.success(msg);
+        dialogClose();
+    }
+};
+</script>