编辑元素公式

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

@@ -12,8 +12,20 @@
                 </div>
                 <div class="hc-flex">
                     <el-button hc-btn type="primary">导入划分</el-button>
-                    <el-button hc-btn type="primary">元素设置</el-button>
-                    <el-button hc-btn type="primary">元素公式设置</el-button>
+                    <el-button
+                        hc-btn
+                        type="primary"
+                        v-if="!isShowInfo"
+                        @click="showInfoClick"
+                        >元素设置</el-button
+                    >
+                    <el-button
+                        hc-btn
+                        type="primary"
+                        v-if="isShowInfo"
+                        @click="hideInfoClick"
+                        >元素公式设置</el-button
+                    >
 
                     <el-button hc-btn type="warning">节点参数设置</el-button>
                 </div>
@@ -77,7 +89,7 @@
                     </template>
                     <hc-card class="hc-desk-system-unit-temp">
                         <template v-if="!isNullES(nodeInfo.id)">
-                            <div class="body-top">
+                            <div class="body-top" v-if="isShowInfo">
                                 <hc-card title="节点信息">
                                     <hc-table
                                         :is-index="false"
@@ -98,18 +110,21 @@
                                 <hc-card title="当前已创建的元素表">
                                     <template #extra>
                                         <el-button
+                                            v-if="isShowInfo"
                                             size="small"
                                             type="primary"
                                             @click="createNew"
                                             >创建元素表</el-button
                                         >
                                         <el-button
+                                            v-if="isShowInfo"
                                             size="small"
                                             type="warning"
                                             @click="editEleClick"
                                             >编辑元素表单</el-button
                                         >
                                         <el-button
+                                            v-if="isShowInfo"
                                             size="small"
                                             type="success"
                                             @click="sortClick"
@@ -139,10 +154,17 @@
                                         }}</template>
                                         <template #action="{ row, index }">
                                             <el-link
+                                                v-if="isShowInfo"
                                                 type="warning"
                                                 @click="editRowClick(row)"
                                                 >编辑</el-link
                                             >
+                                            <el-link
+                                                v-else
+                                                type="warning"
+                                                @click="editFormulaClick(row)"
+                                                >编辑元素公式</el-link
+                                            >
                                             <el-link
                                                 type="danger"
                                                 @click="rowDelClick(row)"
@@ -190,7 +212,7 @@
             </template>
         </hc-dialog>
 
-        <!-- 新增修改 -->
+        <!-- 树节点新增修改 -->
         <TreeNodeEditDialog
             v-model="isAddEditShow"
             :node="formModel"
@@ -233,6 +255,14 @@
             :tab="tableData"
         >
         </tableSort>
+
+        <!-- 编辑元素公式 -->
+        <editFormulaDialog
+            v-model="editFormulaShow"
+            @close="editFormulaClose"
+            :tableId="tableId"
+        >
+        </editFormulaDialog>
     </hc-drawer>
 </template>
 
@@ -242,6 +272,7 @@ import { HcDelMsg } from "hc-vue3-ui";
 import { getDictionaryData, getDictionaryName } from "~src/utils/tools";
 import { getStoreValue, setStoreValue } from "~uti/storage";
 import tableSort from "./table-sort.vue";
+import editFormulaDialog from "./edit-formula-dialog.vue";
 import {
     arrToId,
     deepClone,
@@ -494,7 +525,7 @@ const tableColumn = ref([
     { key: "fillRate", name: "填报率" },
     { key: "tableType", name: "表单类型" },
     { key: "tableOwner", name: "所属方" },
-    { key: "action", name: "操作", align: "center", width: 100 },
+    { key: "action", name: "操作", align: "center" },
 ]);
 const tableData = ref([{}]);
 
@@ -686,6 +717,29 @@ const tableSortShowClose = () => {
     tableSortShow.value = false;
     getTableData();
 };
+
+//按钮切换
+const isShowInfo = ref(true);
+const hideInfoClick = () => {
+    const { id } = nodeInfo.value;
+    if (id) {
+        isShowInfo.value = false;
+    } else {
+        window.$message.warning("请先选择左侧节点");
+    }
+};
+const showInfoClick = () => {
+    isShowInfo.value = true;
+};
+//编辑元素公式
+const editFormulaShow = ref(false);
+const editFormulaClose = () => {
+    editFormulaShow.value = false;
+};
+const editFormulaClick = (row) => {
+    tableId.value = row.id;
+    editFormulaShow.value = true;
+};
 </script>
 
 <style lang="scss">

src/views/desk/wbs/edit-formula-dialog.vue

@@ -0,0 +1,89 @@
+<template>
+    <hc-dialog
+        v-model="isShow"
+        is-footer-center
+        title=" 元素公式(WBS级)"
+        @close="dialogClose"
+        @save="saveElementHandle"
+        widths="56rem"
+        :loading="submitLoading"
+        :footer="false"
+    >
+        <hc-search-input
+            v-model="queryValue"
+            @search="getEditEleList"
+            class="w-100 mb-4"
+        />
+        <hc-table
+            :column="tableColumn"
+            :datas="editEleList"
+            :loading="tableLoading"
+        >
+            <template #action="{ row, index }">
+                <el-link type="warning">全局公式</el-link>
+
+                <el-link type="primary">节点公式</el-link>
+            </template>
+        </hc-table>
+    </hc-dialog>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import mainApi from "~api/wbs/wbsforelement";
+import { getArrValue } from "js-fast-way";
+const props = defineProps({
+    tableId: {
+        type: String,
+        default: "",
+    },
+});
+//事件
+const emit = defineEmits(["close"]);
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel("modelValue", {
+    default: false,
+});
+//监听显示
+watch(isShow, (val) => {
+    if (val) {
+        getEditEleList();
+    } else {
+        emit("close");
+    }
+});
+const tableId = ref(props.tableId);
+//监听数据
+watch(
+    () => [props.tableId],
+    ([tid]) => {
+        tableId.value = tid;
+    },
+    { deep: true }
+);
+//关闭弹窗
+const dialogClose = () => {
+    isShow.value = false;
+    emit("close");
+};
+const submitLoading = ref(false);
+const saveElementHandle = async () => {};
+const tableColumn = [
+    { key: "eName", name: "元素名称" },
+    { key: "action", name: "操作", width: 150, align: "center" },
+];
+const tableLoading = ref(false);
+const editEleList = ref([]);
+const queryValue = ref("");
+
+const getEditEleList = async () => {
+    tableLoading.value = true;
+    const { data } = await mainApi.getTableElements({
+        id: tableId.value,
+        search: queryValue.value,
+        type: 1,
+    });
+    tableLoading.value = false;
+    editEleList.value = getArrValue(data);
+};
+</script>