独立表单库

src/views/project/list/association-list.vue

@@ -1,13 +1,40 @@
 <template>
-    <hc-dialog v-model="isShow" widths="40rem" ui="hc-association-list-box" is-table title="关联清表" is-footer-center @close="dialogClose">
-        <el-form ref="formRef" :model="formModel" label-position="top" label-width="auto">
+    <hc-dialog
+        v-model="isShow"
+        widths="40rem"
+        ui="hc-association-list-box"
+        is-table
+        title="关联清表"
+        is-footer-center
+        @close="dialogClose"
+    >
+        <el-form
+            ref="formRef"
+            :model="formModel"
+            label-position="top"
+            label-width="auto"
+        >
             <el-form-item label="清表模版：">
-                <el-select v-model="formModel.name" placeholder="请选择清表模版" filterable block @change="nameChange">
-                    <el-option v-for="item in excelData" :key="item.id" :label="item.name" :value="item.id" />
+                <el-select
+                    v-model="formModel.name"
+                    placeholder="请选择清表模版"
+                    filterable
+                    block
+                    @change="nameChange"
+                >
+                    <el-option
+                        v-for="item in excelData"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                    />
                 </el-select>
             </el-form-item>
             <el-form-item label="请输入需要选择的内容：">
-                <el-input v-model="formModel.search" placeholder="请输入需要选择的内容" />
+                <el-input
+                    v-model="formModel.search"
+                    placeholder="请输入需要选择的内容"
+                />
             </el-form-item>
         </el-form>
         <div v-loading="isLoading" class="hc-association-list-tree-box">
@@ -27,185 +54,204 @@
         </div>
         <template #footer>
             <el-button hc-btn @click="dialogClose">取消</el-button>
-            <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
+            <el-button
+                hc-btn
+                type="primary"
+                :loading="submitLoading"
+                @click="dialogSubmit"
+                >提交</el-button
+            >
         </template>
     </hc-dialog>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import { deepClone, getArrValue, isNullES } from 'js-fast-way'
-import excelApi from '~api/exctab/exceltab'
+import { ref, watch } from "vue";
+import { deepClone, getArrValue, isNullES } from "js-fast-way";
+import excelApi from "~api/exctab/exceltab";
 
 const props = defineProps({
     info: {
         type: Object,
         default: () => ({}),
     },
-})
+    type: {
+        type: [String, Number],
+        default: "", //默认没有，独立表单库类型为2
+    },
+});
 
 //事件
-const emit = defineEmits(['change', 'close'])
+const emit = defineEmits(["change", "close"]);
 
 //双向绑定
 // eslint-disable-next-line no-undef
-const isShow = defineModel('modelValue', {
+const isShow = defineModel("modelValue", {
     default: false,
-})
+});
 
 //监听数据
-const rows = ref(props.info)
-watch(() => props.info, (info) => {
-    rows.value = info
-}, { deep: true })
+const rows = ref(props.info);
+const type = ref(props.type);
+watch(
+    () => [props.info, props.type],
+    ([info, tpe]) => {
+        rows.value = info;
+        type.value = tpe;
+    },
+    { deep: true }
+);
 
 //监听显示
 watch(isShow, (val) => {
     if (val) {
-        getDataInfo()
+        getDataInfo();
     } else {
-        emit('close')
+        emit("close");
     }
-})
+});
 
 //表单
-const formRef = ref(null)
-const formModel = ref({})
+const formRef = ref(null);
+const formModel = ref({});
 const getDataInfo = () => {
-    const form = deepClone(rows.value)
-    getExcelListData()
+    const form = deepClone(rows.value);
+    getExcelListData();
     formModel.value = {
-        id: form.pkeyId,
+        id: type.value == 2 ? form.primaryKeyId : form.pkeyId,
         ids: form.id,
         excelId: form.excelId,
         name: form.modeId,
         initTableId: form.initTableId,
         initTableName: form.initTableName,
-    }
+    };
     setTimeout(() => {
-        treeRef.value?.setCheckedKeys([form.excelId])
-    }, 2000)
-}
+        treeRef.value?.setCheckedKeys([form.excelId]);
+    }, 2000);
+};
 
 //获取清表列表
-const excelData = ref([])
+const excelData = ref([]);
 const getExcelListData = async () => {
     const { data } = await excelApi.getList({
         current: 1,
         size: 100000,
         parentId: 0,
-    })
-    excelData.value = getArrValue(data?.records)
-}
+    });
+    excelData.value = getArrValue(data?.records);
+};
 
 //清表列表被选择
 const nameChange = () => {
     if (!isNullES(formModel.value.name)) {
-        formModel.value.search = ''
-        getTabLazytreeAll()
+        formModel.value.search = "";
+        getTabLazytreeAll();
     }
-}
+};
 
 //清表树参数
-const treeRef = ref(null)
+const treeRef = ref(null);
 const tabTreeProps = {
-    label: 'name',
-    children: 'children',
-    disabled: 'hasChildren',
+    label: "name",
+    children: "children",
+    disabled: "hasChildren",
     isLeaf: function (data) {
-        let tag = false
+        let tag = false;
         if (!data.hasChildren) {
-            tag = true
+            tag = true;
         }
         if (data.isExistForm == 1) {
-            tag = true
+            tag = true;
         }
-        return tag
+        return tag;
     },
-}
+};
 
 //获取清表树
-const isLoading = ref(false)
-const tabTreeData = ref([])
+const isLoading = ref(false);
+const tabTreeData = ref([]);
 const getTabLazytreeAll = async () => {
-    const { name, search } = formModel.value
-    isLoading.value = true
+    const { name, search } = formModel.value;
+    isLoading.value = true;
     const { data } = await excelApi.tabLazyTreeAll({
         modeId: name,
         name: search,
-    })
-    tabTreeData.value = getArrValue(data)
-    isLoading.value = false
-}
+    });
+    tabTreeData.value = getArrValue(data);
+    isLoading.value = false;
+};
 
 //搜索筛选
 const filterNode = (value, data, node) => {
-    if (isNullES(value)) return true
-    let _array = []//这里使用数组存储 只是为了存储值。
-    getReturnNode2(node, _array, value)
-    let result = false
+    if (isNullES(value)) return true;
+    let _array = []; //这里使用数组存储 只是为了存储值。
+    getReturnNode2(node, _array, value);
+    let result = false;
     _array.forEach((item) => {
-        result = result || item
-    })
-    return result
-}
+        result = result || item;
+    });
+    return result;
+};
 
 const getReturnNode2 = (node, _array, value) => {
-    let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
-    isPass ? _array.push(isPass) : ''
+    let isPass =
+        node.data && node.data.name && node.data.name.indexOf(value) !== -1;
+    isPass ? _array.push(isPass) : "";
     if (!isPass && node.level !== 1 && node.parent) {
-        getReturnNode2(node.parent, _array, value)
+        getReturnNode2(node.parent, _array, value);
     }
-}
+};
 
 const checkChange = (data) => {
     //节点选中回调
     if (treeRef.value?.getCheckedNodes().length === 0) {
-        treeRef.value?.setCheckedKeys([])
+        treeRef.value?.setCheckedKeys([]);
     } else if (treeRef.value?.getCheckedNodes().length >= 1) {
-        treeRef.value?.setCheckedKeys([data.id])
+        treeRef.value?.setCheckedKeys([data.id]);
     }
-}
+};
 
 //提交表单
-const submitLoading = ref(false)
+const submitLoading = ref(false);
 const dialogSubmit = async () => {
-    let checkNodes = treeRef.value?.getCheckedNodes()
+    let checkNodes = treeRef.value?.getCheckedNodes();
     if (checkNodes.length <= 0) {
-        window?.$message?.warning('请先设置清表')
-        return
+        window?.$message?.warning("请先设置清表");
+        return;
     }
-    let node = checkNodes[checkNodes.length - 1]
+    let node = checkNodes[checkNodes.length - 1];
     if (Number(node.fileType) !== 3) {
-        window?.$message?.warning('请先上传Excel表')
-        return
+        window?.$message?.warning("请先上传Excel表");
+        return;
     }
-    submitLoading.value = true
+    submitLoading.value = true;
     const { isRes } = await excelApi.saveLinkTab({
         exceTabId: node.id,
         tabId: formModel.value.id,
-    })
-    submitLoading.value = false
-    if (!isRes) return
-    dialogClose()
-    window?.$message?.success('关联清表成功')
-    emit('change')
-}
+    });
+    submitLoading.value = false;
+    if (!isRes) return;
+    dialogClose();
+    window?.$message?.success("关联清表成功");
+    emit("change");
+};
 
 //关闭弹窗
 const dialogClose = () => {
-    formModel.value.name = ''
-    formModel.value.search = ''
-    formModel.value.id = ''
-    tabTreeData.value = []
-    treeRef.value?.setCheckedKeys([])
-    isShow.value = false
-    emit('close')
-}
+    formModel.value.name = "";
+    formModel.value.search = "";
+    formModel.value.id = "";
+    tabTreeData.value = [];
+    treeRef.value?.setCheckedKeys([]);
+    isShow.value = false;
+    emit("close");
+};
 </script>
 
 <style lang="scss">
-.el-overlay-dialog .el-dialog.hc-new-dialog.hc-association-list-box .hc-new-dialog-body {
+.el-overlay-dialog
+    .el-dialog.hc-new-dialog.hc-association-list-box
+    .hc-new-dialog-body {
     .hc-association-list-tree-box {
         position: relative;
         padding: 5px 0;

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

@@ -16,6 +16,7 @@
                         highlight-current
                         lazy
                         @node-click="treeNodeTap"
+                        v-if="isShowTree"
                     />
                 </hc-card>
             </template>
@@ -53,7 +54,7 @@
                         <el-link type="primary" @click="linkExcelClick(row)"
                             >关联清表</el-link
                         >
-                        <el-link type="primary" @click="rowEditClick(row)"
+                        <el-link type="primary" @click="editElement(row)"
                             >编辑元素</el-link
                         >
                         <el-link type="primary" @click="adjustTable(row)"
@@ -78,15 +79,30 @@
             :projectId="projectId"
             @close="quteEleClose"
         ></quteElePage>
+        <!-- 关联清表 -->
+        <HcAssociationList
+            v-model="isAssociationShow"
+            :info="associationInfo"
+            :type="2"
+        />
+        <!-- 编辑元素 -->
+        <HcEditElement
+            v-model="isEditElementShow"
+            :info="editElementInfo"
+            :data="editElementData"
+        />
     </hc-drawer>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, nextTick } from "vue";
 import { HcDelMsg } from "hc-vue3-ui";
-import { getArrValue, arrToId, isNullES } from "js-fast-way";
+import { getArrValue, arrToId, isNullES, deepClone } from "js-fast-way";
 import privateApi from "~api/wbs/private";
+import excelApi from "~api/exctab/exceltab";
 import quteElePage from "./quteElePage.vue";
+import HcAssociationList from "../association-list.vue";
+import HcEditElement from "../edit-element.vue";
 
 //事件
 const emit = defineEmits(["close"]);
@@ -152,6 +168,14 @@ const tabTypeLazyTree = async (parentId = "12345678910") => {
     });
     return { data: records, total: data?.total };
 };
+const isShowTree = ref(true);
+const refreshTree = () => {
+    isShowTree.value = false;
+
+    setTimeout(() => {
+        isShowTree.value = true;
+    }, 1000);
+};
 const treeLoadNode = async (node, resolve) => {
     if (node.level === 0) {
         const resData = await tabTypeLazyTree();
@@ -243,7 +267,14 @@ const tableCheckChange = (rows) => {
 };
 
 //关联清表
-const linkExcelClick = () => {};
+
+const isAssociationShow = ref(false);
+const associationInfo = ref({});
+const linkExcelClick = async (item) => {
+    associationInfo.value = item;
+    await nextTick();
+    isAssociationShow.value = true;
+};
 //调整表单
 const adjustTable = () => {};
 //公式配置
@@ -252,11 +283,27 @@ const rowFormulaClick = (row) => {};
 const assignWbs = () => {};
 
 //编辑元素
-const editElementShow = ref(false);
+
+const isEditElementShow = ref(false);
 const editElementInfo = ref({});
-const rowEditClick = (row) => {
+const editElementData = ref({});
+const editElementLoading = ref(false);
+const editElement = async (row) => {
+    editElementLoading.value = true;
+    const { code, data } = await excelApi.getExcelHtml({ pkeyId: row.id });
+    if (code !== 200 || isNullES(data)) {
+        editElementLoading.value = false;
+        window?.$message.warning("表单异常，请联系管理员");
+        return;
+    }
+    editElementLoading.value = false;
     editElementInfo.value = row;
-    editElementShow.value = true;
+    editElementData.value = {
+        pid: projectId.id,
+        wbsid: wbsId.value,
+    };
+    await nextTick();
+    isEditElementShow.value = true;
 };
 
 //关闭抽屉
@@ -274,7 +321,10 @@ const batchDel = async () => {
     HcDelMsg(async (resolve) => {
         //发起请求
         const ids = arrToId(tableCheckKeys.value);
-        const { isRes } = await privateApi.delTabInfoAll(ids);
+        const { isRes } = await privateApi.delAprojectTab({
+            projectId: projectId.value,
+            primaryKeyIds: ids,
+        });
         resolve(); //关闭弹窗
         if (!isRes) return;
         window.$message.success("删除成功");
@@ -290,5 +340,6 @@ const quteEleTableClick = () => {
 const quteEleClose = () => {
     quteEleShow.value = false;
     getTableData().then();
+    refreshTree();
 };
 </script>

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

@@ -89,8 +89,6 @@ const treeProps = {
     isLeaf: "isLeaf",
 };
 
-//获取树接口
-
 //获取数据
 const tabTypeLazyTree = async (parentId = "12345678910") => {
     //发起请求