wbs编辑修改

src/views/desk/wbs/node-param-dialog.vue

@@ -49,7 +49,9 @@
                     <hc-table-input v-model="row.remark" />
                 </template>
                 <template #action="{ row, index }">
-                    <el-link type="warning">关联元素</el-link>
+                    <el-link type="warning" @click="linkElement(row)"
+                        >关联元素</el-link
+                    >
 
                     <el-link type="danger" @click="delRowClick(index, row)"
                         >删除</el-link
@@ -57,6 +59,7 @@
                 </template>
             </hc-table>
         </hc-card-item>
+        <!-- 设置参数名称 -->
         <hc-dialog
             v-model="setNameShow"
             is-footer-center
@@ -98,6 +101,69 @@
                 </hc-table>
             </hc-card-item>
         </hc-dialog>
+
+        <!-- 关联元素 -->
+        <hc-dialog
+            v-model="linkParamShow"
+            title=" 节点参数设置-关联元素"
+            @close="linkParamdialogClose"
+            widths="56rem"
+            :footer="false"
+        >
+            <hc-card-item>
+                <hc-table
+                    :column="linkTableColumn"
+                    :datas="linkTableData"
+                    :loading="linkTableLoading"
+                >
+                    <template #action="{ row, index }">
+                        <el-link
+                            type="primary"
+                            v-if="!row.mappingId"
+                            @click="chooseClick(row, index)"
+                            >选择元素</el-link
+                        >
+                        <el-link
+                            type="danger"
+                            v-else
+                            @click="delLinkClick(row, index)"
+                            :loading="delLinkLoading"
+                            >删除关联</el-link
+                        >
+                    </template>
+                </hc-table>
+            </hc-card-item>
+        </hc-dialog>
+        <!-- 选择关联元素 -->
+        <hc-dialog
+            v-model="chooseLinkShow"
+            title=" 选择关联元素"
+            @close="linkShowClose"
+            widths="56rem"
+            @save="saveLink"
+            :loading="saveLoading"
+        >
+            <hc-card-item>
+                <hc-search-input
+                    v-model="queryValue"
+                    @search="searchClick"
+                    @clear="searchClick"
+                    class="mb-4"
+                />
+                <hc-table
+                    :column="chooseLinkTableColumn"
+                    :datas="chooseLinkTableData"
+                    :loading="chooselinkTableLoading"
+                >
+                    <template #action="{ row, index }">
+                        <el-checkbox
+                            v-model="row.checked"
+                            @change="(value) => linkEleCheck(value, index)"
+                        ></el-checkbox>
+                    </template>
+                </hc-table>
+            </hc-card-item>
+        </hc-dialog>
     </hc-dialog>
 </template>
 <script setup>
@@ -105,6 +171,7 @@ import { ref, watch } from "vue";
 import mainWbsApi from "~api/wbs/wbsforelement";
 import mainApi from "~api/wbs/tree";
 import { getArrValue } from "js-fast-way";
+import { HcDelMsg } from "hc-vue3-ui";
 const props = defineProps({
     nodeId: {
         type: String,
@@ -280,4 +347,122 @@ const delNameClick = (row, index) => {
     delIds.value.push(row.id);
     nameTableData.value.splice(index, 1);
 };
+
+//关联元素
+const linkTableColumn = [
+    { key: "tableName", name: "元素表名", align: "center" },
+    { key: "elementName", name: "关联元素字段", align: "center" },
+
+    { key: "action", name: "操作", align: "center" },
+];
+const linkTableData = ref([]);
+const linkTableLoading = ref(false);
+const curParam = ref({});
+const linkParamShow = ref(false);
+const getLinkTableData = async () => {
+    const { error, code, data } = await mainApi.getParamElements({
+        nodeId: nodeId.value,
+        paramId: curParam.value.id,
+        scopeType: 1,
+    });
+
+    //判断状态
+    if (!error && code === 200) {
+        linkTableData.value = getArrValue(data);
+    }
+};
+const linkElement = async (row) => {
+    if (!row.id) {
+        window.$message.warning("请先保存数据，再点击关联元素");
+    } else {
+        curParam.value = row;
+        linkParamShow.value = true;
+        getLinkTableData(row);
+    }
+};
+const linkParamdialogClose = () => {
+    linkParamShow.value = false;
+};
+//选择元素
+const chooseLinkShow = ref(false);
+const chooseLinkTableData = ref([]);
+const chooselinkTableLoading = ref(false);
+const getChooseData = async (id) => {
+    chooselinkTableLoading.value = true;
+    const { error, code, data } = await mainApi.selectFormElements({
+        nodeId: nodeId.value,
+        id: id,
+        type: 5,
+    });
+    chooselinkTableLoading.value = false;
+    //判断状态
+    if (!error && code === 200) {
+        chooseLinkTableData.value = getArrValue(data);
+    }
+};
+
+const chooseId = ref("");
+const chooseClick = (row) => {
+    chooseLinkShow.value = true;
+    chooseId.value = row.id;
+    getChooseData(row.id);
+};
+
+const linkShowClose = () => {};
+const chooseLinkTableColumn = [
+    { key: "eName", name: "元素名", align: "center" },
+    { key: "action", name: "操作", align: "center" },
+];
+const queryValue = ref("");
+const searchClick = () => {
+    if (queryValue.value.length > 0) {
+        chooseLinkTableData.value = chooseLinkTableData.value.filter((ele) => {
+            return ele.eName.indexOf(queryValue.value) > -1;
+        });
+    } else {
+        getChooseData(chooseId.value);
+    }
+};
+const linkEleCheck = (value, index) => {
+    if (value) {
+        chooseLinkTableData.value.forEach((ele, i) => {
+            if (i != index) {
+                ele.checked = false;
+            }
+        });
+    }
+};
+const saveLoading = ref(false);
+const saveLink = async () => {
+    let target = {};
+    chooseLinkTableData.value.forEach((ele) => {
+        if (ele.checked === true) {
+            target = { elementId: ele.id, paramId: curParam.value.id };
+        }
+    });
+    saveLoading.value = true;
+    const { error, code, data, msg } = await mainApi.specifiedParamElements(
+        target
+    );
+    saveLoading.value = false;
+    //判断状态
+    if (!error && code === 200) {
+        window.$message.success(msg);
+        chooseLinkShow.value = false;
+        getLinkTableData();
+    }
+};
+const delLinkLoading = ref(false);
+const delLinkClick = (row) => {
+    HcDelMsg(async (resolve) => {
+        //发起请求
+        delLinkLoading.value = true;
+
+        const { isRes } = await mainApi.delParamElements(row);
+        resolve(); //关闭弹窗
+        if (!isRes) return;
+        window.$message.success("删除成功");
+        getLinkTableData();
+    });
+};
 </script>