taskid:084 remark:'commit'

hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue

@@ -46,18 +46,18 @@
                 </span>
                 <span v-else>{{ data.emissionName }}</span>
               </div>
-              <a-popover placement="rightTop" trigger="focus">
-                <template #content>
-                  <div style="display: flex;flex-direction: column;">
-                    <a-button type="text" @click="editTreeNodeData">编辑</a-button>
-                    <a-button type="text" @click="addTreeNodeData">新增子节点</a-button>
-                    <a-button type="text">上移</a-button>
-                    <a-button type="text">下移</a-button>
-                    <a-button type="text" @click="deleteTreeNode">删除</a-button>
-                  </div>
+              <a-dropdown>
+                <ns-icon name="actionMore" size="14" class="actionMore" />
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item @click="editTreeNodeData">编辑</a-menu-item>
+                    <a-menu-item @click="addTreeNodeData">新增子节点</a-menu-item>
+                    <a-menu-item>上移</a-menu-item>
+                    <a-menu-item>下移</a-menu-item>
+                    <a-menu-item @click="deleteTreeNode">删除</a-menu-item>
+                  </a-menu>
                 </template>
-                <MoreOutlined class="actionMore" />
-              </a-popover>
+              </a-dropdown>
             </div>
           </template>
         </a-tree>
@@ -107,61 +107,89 @@
       title="单位管理"
       @close="closeUnitManag">
       <div class="addButton">
-        <a-button type="primary">新增分组</a-button>
-        <a-button type="primary">新增单位</a-button>
+        <a-button type="primary" @click="addGroup">新增分组</a-button>
+        <a-button type="primary" @click="addUnit">新增单位</a-button>
       </div>
       <div class="treePart">
         <div style="width: 100%;height: 7%;display: flex;justify-content: center;align-items: center;">
           <a-select
             ref="select"
-            :value="unitTreeParams.cnValue"
+            :value="unitTreeParams.id"
+            allowClear
             style="width: 96%"
             placeholder="选择分组"
             @change="handleChange"
           >
-            <a-select-option v-for="(item, index) in groupData" :key="index" :value="item.cnValue">
+            <a-select-option v-for="(item, index) in groupData" :key="index" :value="item.id">
               {{ item.cnValue }}
             </a-select-option>
           </a-select>
         </div>
         <a-tree
-          :expandedKeys="unitExpandedKeys"
+          :expanded-keys="unitExpandedKeys"
           :selectedKeys="unitSelectedKeys"
           :tree-data="unitTreeData"
           v-if="unitTreeData && unitTreeData.length > 0"
-        >
+          class="draggable-tree"
+          block-node>
           <template #title="data">
             <div class="treeRow">
               <div>
                 <span>{{ data.cnValue }}</span>
               </div>
-              <a-popover placement="rightTop" trigger="focus">
-                <template #content>
-                  <div style="display: flex;flex-direction: column;">
-                    <a-button type="text" @click="editTreeNodeData">编辑</a-button>
-                    <a-button type="text" @click="addTreeNodeData">新增子节点</a-button>
-                    <a-button type="text">上移</a-button>
-                    <a-button type="text">下移</a-button>
-                    <a-button type="text" @click="deleteTreeNode">删除</a-button>
-                  </div>
-                </template>
-                <MoreOutlined class="actionMore" />
-              </a-popover>
+              <div class="actionMore">
+                <EditOutlined v-if="!data.parentId" @click="editGroup(data)" />
+                <EditOutlined v-else @click="editUnit(data)" />
+                <MinusCircleOutlined style="margin-left: 6px;" @click="delUnit(data)" />
+                <PlusCircleOutlined v-if="!data.parentId" style="margin-left: 6px;" @click="addUnit(data)" />
+              </div>
             </div>
           </template>
         </a-tree>
       </div>
       <template #footer>
         <a-button style="margin-right: 8px" @click="closeUnitManag">取消</a-button>
-        <a-button type="primary" @click="onEdit">确定</a-button>
       </template>
     </a-drawer>
+    <!-- 新增分组管理 -->
+    <ns-modal :visible="addGroupManage" :title="addGroupTitle" @ok="unitOrGroupOk" @cancel="groupCancel">
+      <a-form
+        ref="unitFormRef"
+        :model="formState"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="分组名称" name="cnValue" :required="true">
+          <a-input v-model:value="formState.cnValue" placeholder="请输入分组名称" />
+        </a-form-item>
+      </a-form>
+    </ns-modal>
+    <!-- 新增单位 -->
+    <ns-modal :visible="addUnitManage" :title="addUnitTitle" @ok="unitOrGroupOk" @cancel="unitCancel">
+      <a-form
+        ref="unitFormRef"
+        :model="formState"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="单位名称" name="cnValue" :required="true">
+          <a-input v-model:value="formState.cnValue" placeholder="请输入单位名称" />
+        </a-form-item>
+        <a-form-item label="选择分组" name="parentId" :required="true">
+          <a-select v-model:value="formState.parentId" placeholder="请选择所属分组" :disabled="canSelect">
+            <a-select-option v-for="(item, index) in groupData" :key="index" :value="item.id">
+              {{ item.cnValue }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </ns-modal>
   </div>
 </template>
 <script lang="ts" setup>
-  import { MoreOutlined,ExclamationCircleOutlined  } from '@ant-design/icons-vue';
+  import { MoreOutlined,ExclamationCircleOutlined,EditOutlined,PlusCircleOutlined,MinusCircleOutlined } from '@ant-design/icons-vue';
   import { Modal } from 'ant-design-vue';
-  import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch } from 'vue';
+  import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch,toRaw } from 'vue';
   import { http } from '/nerv-lib/util/http';
   import { NsMessage, NsModal } from '/nerv-lib/component';
   import { formConfig, formConfig2 } from './config';
@@ -215,7 +243,7 @@
   const y = 2;
   const z = 1;
   const genData: TreeProps['treeData'] = [];
-  const checkedTreeNodeKeys = ref<string[]>(['0-0']);
+  const checkedTreeNodeKeys = ref<string[]>();
 
   const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
     const preKey = _preKey || '0';
@@ -423,15 +451,15 @@
     fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => {
       gData.value = res.data
       // 找到匹配的节点数据
-      const selectedNodes = [];
-      checkedTreeNodeKeys.value.forEach(key => {
-        const [parentId, childId] = key.split('-').map(Number);
-        if (parentId >= 0 && childId >= 0 && gData.value[parentId]?.children?.[childId]) {
-          selectedNodes.push(gData.value[parentId]);
-        }
-      });
+      // const selectedNodes = [];
+      // checkedTreeNodeKeys.value.forEach(key => {
+      //   const [parentId, childId] = key.split('-').map(Number);
+      //   if (parentId >= 0 && childId >= 0 && gData.value[parentId]?.children?.[childId]) {
+      //     selectedNodes.push(gData.value[parentId]);
+      //   }
+      // });
       // 获取默认选中节点的所有id
-      getDefaultIds(selectedNodes)
+      // getDefaultIds(selectedNodes)
     });
   };
   const defaultIds = ref([])
@@ -494,6 +522,9 @@
     userAuthList.value.splice(0);
   };
   const closeUnitManag = () => {
+    unitTreeParams.value = {
+      grp: 'MEASUREMENT_UNIT'
+    }
     unitManagement.value = false;
   };
   const onEdit = () => {
@@ -573,9 +604,7 @@
           fetch(carbonEmissionFactorLibrary.findOutermost).then((res) => {
             groupData.value = res.data
           });
-          fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, unitTreeParams.value).then((res) => {
-            unitTreeData.value = res.data
-          });
+          getUnitTree()
         },
       },
     ],
@@ -770,10 +799,134 @@
   const groupData = ref([])
   const unitTreeData = ref<TreeProps['treeData']>(genData);
   const handleChange = (value: string) => {
-    unitTreeParams.value.cnValue = value
+    unitTreeParams.value.id = value
+    getUnitTree()
+  };
+  const getUnitTree = () => {
     fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, unitTreeParams.value).then((res) => {
       unitTreeData.value = res.data
     });
+  }
+  // 新增单位管理
+  const labelCol = { span: 5 };
+  const wrapperCol = { span: 19 };
+  const unitFormRef = ref();
+  const addGroupManage = ref(false);
+  const addUnitManage = ref(false);
+  const canSelect = ref(false);
+  const formState = ref({
+    grp: 'MEASUREMENT_UNIT',
+    grpDesc: '计量单位',
+  })
+  const addGroupTitle = ref<string>('新增分组');
+  const addUnitTitle = ref<string>('新增单位');
+  const addGroup = () => {
+    addGroupTitle.value = '新增分组'
+    addGroupManage.value = true
+  };
+  const editGroup = (data) => {
+    addGroupTitle.value = '编辑分组'
+    addGroupManage.value = true
+    formState.value.id = data.id
+    formState.value.cnValue = data.cnValue
+  };
+  const groupCancel = () => {
+    addGroupManage.value = false
+    unitFormRef.value.resetFields();
+    formState.value = {
+      grp: 'MEASUREMENT_UNIT',
+      grpDesc: '计量单位',
+    }
+  };
+  const addUnit = (data) => {
+    if(data.id){
+      canSelect.value = true
+      formState.value.parentId = data.id
+    }else{
+      canSelect.value = false
+    }
+    fetch(carbonEmissionFactorLibrary.findOutermost).then((res) => {
+      groupData.value = res.data
+    });
+    addUnitTitle.value = '新增单位'
+    addUnitManage.value = true
+  };
+  const editUnit = (data) => {
+    addUnitTitle.value = '编辑单位'
+    addUnitManage.value = true
+    canSelect.value = true
+    formState.value.parentId = data.parentId
+    formState.value.id = data.id
+    formState.value.cnValue = data.cnValue
+  };
+  const unitCancel = () => {
+    addUnitManage.value = false
+    unitFormRef.value.resetFields();
+    formState.value = {
+      grp: 'MEASUREMENT_UNIT',
+      grpDesc: '计量单位',
+    }
+  };
+  const unitOrGroupOk = () => {
+    unitFormRef.value
+      .validate()
+      .then(() => {
+        console.log('values', formState, toRaw(formState));
+        if(formState.value.id){
+          fetch(carbonEmissionFactorLibrary.updateDictionary, formState.value).then((res) => {
+            unitTreeData.value = res.data
+            if(formState.value.parentId){
+              addUnitManage.value = false
+            }else{
+              addGroupManage.value = false
+            }
+            unitFormRef.value.resetFields();
+            formState.value = {
+              grp: 'MEASUREMENT_UNIT',
+              grpDesc: '计量单位',
+            }
+            getUnitTree()
+          });
+        }else{
+          fetch(carbonEmissionFactorLibrary.createDictionary, formState.value).then((res) => {
+            unitTreeData.value = res.data
+            if(formState.value.parentId){
+              addUnitManage.value = false
+            }else{
+              addGroupManage.value = false
+            }
+            unitFormRef.value.resetFields();
+            formState.value = {
+              grp: 'MEASUREMENT_UNIT',
+              grpDesc: '计量单位',
+            }
+            getUnitTree()
+          });
+        }
+      })
+      .catch(error => {
+        console.log('error', error);
+      });
+  };
+  // 删除单位管理的树节点
+  const delUnit = (data) => {
+    formState.value.id = data.id
+    Modal.confirm({
+      title: '警告',
+      content: '确定要删除吗?',
+      okText: '确定',
+      okType: 'primary',
+      cancelText: '取消',
+      onOk() {
+        fetch(carbonEmissionFactorLibrary.delDictionary , formState.value).then((res) => {
+          message.success('操作成功！');
+          getUnitTree()
+        });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
   };
 
 </script>