编辑节点修改

src/views/desk/wbs/drawer-wbs.vue

@@ -35,6 +35,7 @@
                         @load="treeLoadNode"
                         @node-tap="treeNodeTap"
                         @menu-tap="treeMenuClick"
+                        :autoExpandKeys="autoExpandKeys"
                     >
                         <template #nodeName="{ data }">
                             <span class="text-16px font-400">{{
@@ -102,6 +103,8 @@
             is-footer-center
             :title="formModel.id ? '修改' : '新增'"
             @close="addEditClose"
+            @save="addEditSubmit"
+            :loading="addEditLoading"
         >
             <el-form
                 ref="formRef"
@@ -115,7 +118,17 @@
                         v-model="formModel.nodeName"
                         clearable
                         placeholder="请输入节点名称"
-                    />
+                        class="is-right-btn"
+                    >
+                        <template #append>
+                            <el-button
+                                hc-btn
+                                type="primary"
+                                @click="aliasShowClick"
+                                >添加别名</el-button
+                            >
+                        </template>
+                    </el-input>
                 </el-form-item>
                 <el-form-item label="上级节点：">
                     <el-input
@@ -160,8 +173,8 @@
                             v-model="formModel.isConcrete"
                             size="small"
                         >
-                            <el-radio :label="0" border>无</el-radio>
-                            <el-radio :label="1" border>有</el-radio>
+                            <el-radio :value="0">无</el-radio>
+                            <el-radio :value="1">有</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="是否试验节点">
@@ -169,8 +182,8 @@
                             v-model="formModel.isExpernode"
                             size="small"
                         >
-                            <el-radio :label="0" border>否</el-radio>
-                            <el-radio :label="1" border>是</el-radio>
+                            <el-radio :value="0">否</el-radio>
+                            <el-radio :value="1">是</el-radio>
                         </el-radio-group>
                     </el-form-item>
                 </template>
@@ -197,36 +210,30 @@
                     prop="mixRatioTestIds"
                     v-if="wbsType === 2 && formModel.nodeType === 53"
                 >
-                    <div
-                        style="
-                            position: relative;
-                            height: 300px;
-                            border: 1px solid #dddfe6;
-                        "
-                    >
-                        <el-scrollbar class="h-100p">
+                    <div class="border-class">
+                        <el-scrollbar>
                             <div v-loading="testTreeLoad">
-                                <el-tree
-                                    class="filter-tree"
-                                    :data="testTreeData"
-                                    :props="defaultProps"
-                                    :expand-on-click-node="false"
-                                    highlight-current
-                                    node-key="id"
-                                    ref="treeall"
-                                    show-checkbox
-                                    :default-checked-keys="mixRatioTestIds"
+                                <hc-data-tree
+                                    defaultExpandAll
+                                    :h-props="treeProps"
+                                    tree-key="id"
+                                    :datas="testTreeData"
                                     @check="TestTreeCheckChange"
-                                />
+                                    showCheckbox
+                                    :defaultCheckedKeys="defaultCheckedKeys"
+                                >
+                                </hc-data-tree>
                             </div>
                         </el-scrollbar>
                     </div>
                 </el-form-item>
-                <el-form-item label="标准分类">
+                <el-form-item
+                    label="标准分类"
+                    v-if="formModel.isExistForm == 1"
+                >
                     <el-select
                         v-model="formModel.standardType"
                         placeholder="请选择"
-                        class="w-100p"
                         @change="changeStandType"
                     >
                         <el-option
@@ -237,11 +244,13 @@
                         ></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="单元名称">
+                <el-form-item
+                    label="单元名称"
+                    v-if="formModel.isExistForm == 1"
+                >
                     <el-select
                         v-model="formModel.unitName"
                         placeholder="请选择"
-                        class="w-100p"
                     >
                         <el-option
                             v-for="item in unitOptions"
@@ -252,16 +261,6 @@
                     </el-select>
                 </el-form-item>
             </el-form>
-            <template #footer>
-                <el-button hc-btn @click="addEditClose">取消</el-button>
-                <el-button
-                    hc-btn
-                    type="primary"
-                    :loading="addEditLoading"
-                    @click="addEditSubmit"
-                    >提交</el-button
-                >
-            </template>
         </hc-dialog>
 
         <!-- 调整排序 -->
@@ -294,14 +293,73 @@
                 >
             </template>
         </hc-dialog>
+
+        <!-- 节点别名 -->
+        <hc-dialog
+            v-model="isAliasShow"
+            widths="26rem"
+            title="节点别名"
+            is-footer-center
+            @close="aliasDialogClose"
+        >
+            <el-form
+                ref="formAliasRef"
+                :model="formAliasModel"
+                :rules="formAliasRules"
+                label-position="top"
+                label-width="auto"
+            >
+                <el-form-item prop="aliasName">
+                    <el-input
+                        v-model="formAliasModel.aliasName"
+                        placeholder="请输入节点别名"
+                        clearable
+                        class="is-right-btn"
+                    >
+                        <template v-if="formModel.id" #append>
+                            <el-button
+                                hc-btn
+                                type="primary"
+                                @click="addAliasName"
+                                >添加</el-button
+                            >
+                        </template>
+                    </el-input>
+                </el-form-item>
+            </el-form>
+            <div
+                v-if="aliasArr.length > 0"
+                class="hc-tree-node-edit-form-alias-name"
+            >
+                <template v-for="(item, index) in aliasArr" :key="index">
+                    <el-tag
+                        closable
+                        type="primary"
+                        @close="aliasNameClose(index)"
+                        >{{ item }}</el-tag
+                    >
+                </template>
+            </div>
+            <template #footer>
+                <el-button hc-btn @click="aliasDialogClose">取消</el-button>
+                <el-button
+                    hc-btn
+                    type="primary"
+                    :loading="submitAliasLoading"
+                    @click="aliasSubmit"
+                    >提交</el-button
+                >
+            </template>
+        </hc-dialog>
     </hc-drawer>
 </template>
 
 <script setup>
-import { nextTick, ref, watch } from "vue";
+import { nextTick, ref, watch, onMounted } from "vue";
 import { HcDelMsg } from "hc-vue3-ui";
 import { getDictionaryData, getDictionaryName } from "~src/utils/tools";
 import { getDictionary } from "~api/other";
+import { getStoreValue, setStoreValue } from "~uti/storage";
 import {
     arrToId,
     deepClone,
@@ -312,7 +370,17 @@ import {
 } from "js-fast-way";
 import mainApi from "~api/wbs/tree";
 import { getChildList } from "~api/other";
-
+import { useAppStore } from "~src/store";
+//缓存
+const store = useAppStore();
+const userInfo = ref(store.getUserInfo);
+watch(
+    () => store.getUserInfo,
+    (info) => {
+        userInfo.value = info;
+    },
+    { immediate: true, deep: true }
+);
 const props = defineProps({
     data: {
         type: Object,
@@ -329,13 +397,13 @@ const isShow = defineModel("modelValue", {
 
 //监听数据
 const dataInfo = ref(props.data);
+
 const wbsType = ref(props.data.wbsType);
 watch(
     () => props.data,
     (data) => {
         dataInfo.value = data;
         wbsType.value = data.wbsType;
-        console.log(wbsType.value, " wbsType.value");
     },
     { immediate: true, deep: true }
 );
@@ -343,6 +411,12 @@ watch(
 //监听显示
 watch(isShow, (val) => {
     if (val) getDataApi();
+    getMajorList();
+    geStandardTypeOptions();
+});
+//渲染完成
+onMounted(() => {
+    autoExpandKeys.value = getStoreValue("autoExpandKeys") || [];
 });
 
 //处理相关数据
@@ -352,9 +426,6 @@ const getDataApi = async () => {
     const type = wbsType.value;
     console.log(wbsType.value, "wbsType.value");
 
-    if (majorDatatype.value.length > 1) {
-        return;
-    }
     let code = "";
     if (type === 5) {
         code = "lar_node_type"; //征拆
@@ -368,8 +439,6 @@ const getDataApi = async () => {
         }
     }
     majorDatatype.value = await getDictionaryData(code, false);
-    await getMajorList();
-    await geStandardTypeOptions();
 };
 //树搜索
 const queryType = ref("1");
@@ -394,16 +463,20 @@ const getSearchData = async () => {
     treeData.value = data;
 };
 //节点详情
+const nodeDetail = ref({});
 const getNodeDetail = async (data1, node) => {
     let parentName = "";
     if (node.parent.data) {
         parentName = node.parent.data.title;
     }
-    console.log(parentName, "parentName");
 
     const { data } = await mainApi.getDetail(data1.id, node);
+    nodeDetail.value = data;
     formModel.value = data;
     formModel.value.parentName = parentName;
+    defaultCheckedKeys.value = nodeDetail.value.mixRatioTestIds
+        ? nodeDetail.value.mixRatioTestIds.split(",")
+        : [];
 };
 //内业资料类型
 const majorDataTypeList = ref([]);
@@ -466,14 +539,16 @@ const treeProps = {
     },
 };
 const treeData = ref([]);
+const autoExpandKeys = ref([]);
 //懒加载树
 const treeLoadNode = async ({ item, level }, resolve) => {
+    const { tenant_id } = getObjValue(userInfo.value);
     const parentId = level === 0 ? 0 : item.id;
     const { id } = getObjValue(dataInfo.value);
     const { data } = await mainApi.getLazytree({
         parentId: parentId,
         wbsId: id,
-        tenantId: "0000",
+        tenantId: tenant_id,
     });
     resolve(getArrValue(data));
 };
@@ -490,23 +565,50 @@ const treeMenuDatas = [
     { icon: "arrow-up-down", label: "排序节点", key: "rank" },
     { icon: "delete-bin", label: "删除节点", key: "del" },
 ];
-const nodeTypeChange = (val) => {
-    // if (val === 53) {
-    //       if (this.testTreeData.length > 0) {
-    //         return;
-    //       }
-    //       this.testTreeLoad = true;
-    //       getAlltree(this.userInfo.tenant_id, 1, this.id).then((res) => {
-    //         this.testTreeLoad = false;
-    //         this.testTreeData = res.data.data;
-    //       });
-    //     }
+//试验树数据
+const testTreeData = ref([]);
+const testTreeLoad = ref(false);
+const nodeTypeChange = async (val) => {
+    const { tenant_id } = getObjValue(userInfo.value);
+    const { id } = getObjValue(dataInfo.value);
+    if (val === 53) {
+        if (testTreeData.value.length > 0) {
+            return;
+        }
+        testTreeLoad.value = true;
+        const { data } = await mainApi.getAlltree({
+            tenantId: tenant_id,
+            type: 1,
+            wbsId: id,
+        });
+        testTreeLoad.value = false;
+        testTreeData.value = data;
+    }
+};
+const defaultCheckedKeys = ref([]);
+const TestTreeCheckChange = (_, { checkedKeys }) => {
+    const newarr = [...checkedKeys];
+    nodeDetail.value.mixRatioTestIds = newarr.join(",");
 };
 //菜单被点击
-const treeMenuClick = async ({ key, data, node }) => {
+const treeMenuClick = async ({ key, data, node, keys }) => {
     nodeInfo.value = data;
+    autoExpandKeys.value = keys || [];
+    setStoreValue("autoExpandKeys", keys);
     if (key === "add") {
         formModel.value = {};
+        let parentName = "";
+        if (node.parent.data) {
+            parentName = node.parent.data.title;
+        }
+        formModel.value.parentName = parentName;
+
+        await getNodeDetail(data, node);
+        formModel.value.id = "";
+        formModel.value.nodeName = "";
+        formModel.value.partitionCode = "";
+        formModel.value.uniqueCode = "";
+
         await nextTick();
         isAddEditShow.value = true;
     } else if (key === "edit") {
@@ -534,8 +636,78 @@ const treeMenuClick = async ({ key, data, node }) => {
 
 //树节点被点击
 const nodeInfo = ref({});
-const treeNodeTap = ({ data, node }) => {};
+const treeNodeTap = ({ data, node, keys }) => {
+    console.log(keys, "keys");
+
+    autoExpandKeys.value = keys || [];
+    setStoreValue("autoExpandKeys", keys);
+};
+//节点别名
+const isAliasShow = ref(false);
+
+//节点别名
+const formAliasRef = ref(null);
+const formAliasModel = ref({});
+const formAliasRules = {
+    aliasName: {
+        required: true,
+        trigger: "blur",
+        message: "请输入节点别名",
+    },
+};
+
+//显示节点别名弹窗
+const aliasArr = ref([]);
+const aliasShowClick = () => {
+    isAliasShow.value = true;
+    aliasArr.value = [];
+    const { fullName } = deepClone(formModel.value);
+    if (isNullES(fullName)) return;
+    aliasArr.value = fullName.split(",");
+};
+
+//添加别名
+const addAliasName = async () => {
+    const formRes = await formValidate(formAliasRef.value);
+    if (!formRes) return false;
+
+    const { aliasName } = deepClone(formAliasModel.value);
+    if (aliasArr.value.indexOf(aliasName) !== -1) {
+        window.$message.warning("请不要重复别名");
+        return;
+    }
+    aliasArr.value.push(aliasName);
+    formAliasModel.value.aliasName = "";
+};
 
+//移除别名
+const aliasNameClose = (index) => {
+    aliasArr.value.splice(index, 1);
+};
+
+//提交别名
+const submitAliasLoading = ref(false);
+const aliasSubmit = async () => {
+    submitAliasLoading.value = true;
+    const { id } = formModel.value;
+    const fullName = aliasArr.value.join(",");
+    const { isRes } = await mainApi.submitFullName({
+        id: id,
+        fullNames: fullName,
+    });
+    submitAliasLoading.value = false;
+    const { data } = await mainApi.getDetail(id);
+    formModel.value = data;
+    if (!isRes) return;
+    aliasDialogClose();
+    window?.$message?.success("操作成功");
+};
+
+//关闭节点别名弹窗
+const aliasDialogClose = () => {
+    isAliasShow.value = false;
+    formAliasModel.value = {};
+};
 //表格数据
 const tableColumn = ref([
     { key: "nodeCode", name: "节点编号" },
@@ -579,14 +751,18 @@ const addEditSubmit = async () => {
     //发起请求
     let res;
     if (isNullES(form.id)) {
-        const { id, ancestor } = nodeInfo.value;
-        const { id: templateId } = dataInfo.value;
+        console.log(nodeInfo.value, "nodeInfo.value");
+
+        const { ancestors, id } = nodeInfo.value;
+
         form.parentId = id;
-        form.ancestor = ancestor;
-        form.templateId = templateId;
-        res = await mainApi.add(form);
+        form.ancestors = ancestors;
+        form.wbsId = dataInfo.value.id;
+        const { tenant_id } = getObjValue(userInfo.value);
+        form.tenantId = tenant_id;
+        res = await mainApi.submit(form);
     } else {
-        res = await mainApi.update(form);
+        res = await mainApi.submit(form);
     }
     //处理结果
     const { error, code } = getObjValue(res);
@@ -686,4 +862,9 @@ const drawerClose = () => {
         margin-top: 20px;
     }
 }
+.border-class {
+    position: relative;
+    height: 300px;
+    border: 1px solid #dddfe6;
+}
 </style>