弹窗打开与数据解耦

src/components/PersonUnitDialog.vue

@@ -9,35 +9,40 @@
     <template #header="{ titleId, titleClass }">
       <div class="my-header">
         <h4 :id="titleId" :class="titleClass">
-          {{ $t("treeData.personUnitView") }}
+          {{ $t("treeData.personUnitSetting") }}
         </h4>
       </div>
     </template>
     <div>
-      <p class="description">{{ $t("treeData.createNewUnitSystem") }}</p>
+      <!-- <p class="description">{{ $t("treeData.createNewUnitSystem") }}</p> -->
 
       <el-form
-        :model="formData"
+        :model="{ selectedGroupId }"
         label-position="left"
         :label-width="labelWidth"
-        :rules="formRules"
-        ref="formRef"
       >
-        <el-row :gutter="20" class="input-row">
-          <el-col :span="10">
-            <el-form-item :label="$t('treeData.chineseName')" prop="chineseName">
-              <el-input v-model="formData.chineseName" placeholder="" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="10">
-            <el-form-item :label="$t('treeData.englishName')" prop="englishName">
-              <el-input v-model="formData.englishName" placeholder="" />
+        <el-row :gutter="20" class="input-row" >
+          <el-col :span="12">
+            <el-form-item :label="$t('treeData.unitSystem')">
+              <el-select
+                v-model="selectedGroupId"
+                placeholder=""
+                style="width: 100%"
+                :key="unitGroups.length"
+              >
+                <el-option
+                  v-for="group in unitGroups"
+                  :key="group.sutId"
+                  :label="group.nameEn"
+                  :value="group.sutId"
+                />
+              </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="4" class="lastbtn">
-            <el-button type="primary" @click="submitForm">{{
-              $t("dialog.ok")
-            }}</el-button>
+          <el-col :span="4" class="lastbtn" style="margin-bottom: 3px;">
+            <el-button type="primary" @click="showAddUnitGroupDialog" style="width: 110px">
+              <el-icon><Plus /></el-icon>
+              {{$t("treeData.addUnitSystem")}}</el-button>
           </el-col>
         </el-row>
       </el-form>
@@ -55,17 +60,17 @@
             :label="$t('treeData.number')"
             width="60"
           />
-          <el-table-column
-            prop="nameZn"
-            :label="$t('treeData.chineseName')"
-          />
-          <el-table-column
-            prop="nameEn"
-            :label="$t('treeData.englishName')"
-          />
+          <el-table-column prop="nameZn" :label="$t('treeData.chineseName')" />
+          <el-table-column prop="nameEn" :label="$t('treeData.englishName')" />
           <el-table-column :label="$t('treeData.unit')">
             <template #default="{ row }">
-              <el-select v-model="row.selectedUnitId" placeholder="" style="width: 100%" @focus="fetchUnitsForRow(row)" @change="saveSelectedUnit(row)">
+              <el-select
+                v-model="row.selectedUnitId"
+                placeholder=""
+                style="width: 100%"
+                @focus="fetchUnitsForRow(row)"
+                @change="saveSelectedUnit(row)"
+              >
                 <el-option
                   v-for="unit in row.unitOptions"
                   :key="unit.gutId"
@@ -80,30 +85,7 @@
     </div>
     <template #footer>
       <el-row :gutter="20" class="footer-row">
-        <el-col :span="12">
-          <el-form
-            :model="{ selectedGroupId }"
-            label-position="left"
-            label-width="100px"
-          >
-            <el-form-item :label="$t('treeData.unitSystem')">
-              <el-select
-                v-model="selectedGroupId"
-                placeholder=""
-                style="width: 100%"
-                :key="unitGroups.length"
-              >
-                <el-option
-                  v-for="group in unitGroups"
-                  :key="group.sutId"
-                  :label="group.nameEn"
-                  :value="group.sutId"
-                />
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </el-col>
-        <el-col :span="12" class="lastbtn">
+        <el-col :span="24" class="lastbtn">
           <el-button @click="$emit('update:visible', false)">{{
             $t("dialog.cancel")
           }}</el-button>
@@ -114,14 +96,120 @@
       </el-row>
     </template>
   </el-dialog>
+
+  <!-- 新增单位组弹窗 -->
+  <el-dialog
+    :model-value="addUnitGroupVisible"
+    width="40%"
+    :title="$t('treeData.addUnitGroup')"
+    @update:model-value="addUnitGroupVisible = $event"
+    class="dialog_class"
+    draggable
+  >
+    <el-form
+      :model="formData"
+      label-position="left"
+      :label-width="labelWidth"
+      :rules="formRules"
+      ref="formRef"
+    >
+      <el-row :gutter="20" class="input-row">
+        <el-col :span="9">
+          <el-form-item :label="$t('treeData.chineseName')" prop="chineseName">
+            <el-input v-model="formData.chineseName" placeholder="" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item :label="$t('treeData.englishName')" prop="englishName">
+            <el-input v-model="formData.englishName" placeholder="" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" class="add-btn">
+          <el-button type="primary" @click="submitForm">
+            <el-icon><Plus /></el-icon>
+            {{$t("treeData.addUnitGroup")}}</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 显示单位组列表 -->
+    <div class="unit-group-list">
+      <el-table
+        :data="unitGroups"
+        style="width: 100%"
+        :border="false"
+        v-loading="loading"
+      >
+        <el-table-column
+          :label="$t('treeData.chineseName')"
+          align="center"
+        >
+          <template #default="{ row }">
+            <el-input v-model="row.nameZn" placeholder="" :disabled="!row.isEditable"/>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('treeData.englishName')"
+          align="center"
+        >
+          <template #default="{ row }">
+            <el-input v-model="row.nameEn" placeholder="" :disabled="!row.isEditable"/>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('treeData.operations')"
+          align="center"
+          width="100"
+        >
+          <template #default="{ row }">
+            <el-tooltip :content="$t('treeData.saveUnitGroup')" placement="top">
+              <el-button
+                style="width: 20px"
+                type="text"
+                class="operation-btn"
+                @click="handleSaveEditUnitGroup(row)"
+                :disabled="!row.isEditable"
+              >
+                <el-icon><Check /></el-icon>
+              </el-button>
+            </el-tooltip>
+            <el-tooltip :content="$t('treeData.deleteUnitGroup')" placement="top">
+              <el-button
+                style="width: 20px"
+                type="text"
+                class="operation-btn delete-btn"
+                @click="handleDeleteUnitGroup(row)"
+                :disabled="!row.isEditable"
+              >
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <template #footer>
+          <el-row :gutter="20" class="footer-row">
+        <el-col :span="24" class="lastbtn">
+         <el-button @click="addUnitGroupVisible = false">{{
+          $t("dialog.cancel")
+        }}</el-button>
+        <el-button @click="addUnitGroupVisible = false">{{
+          $t("dialog.ok")
+        }}</el-button>
+        </el-col>
+      </el-row>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue"
+import { ref, onMounted, watch, computed } from "vue"
 import { useI18n } from "vue-i18n"
 import { request } from "@/utils/request"
 const { t, locale } = useI18n()
-import { ElMessage } from 'element-plus'
+import { ElMessage } from "element-plus"
+import { Check, Delete, Plus } from "@element-plus/icons-vue"
 
 const props = defineProps({
   visible: {
@@ -131,7 +219,7 @@ const props = defineProps({
 })
 
 const labelWidth = computed(() => {
-  return locale.value === "zh-CN" ? "80px" : "100px"
+  return locale.value === "zh-CN" ? "85px" : "100px"
 })
 
 // 表单引用
@@ -159,15 +247,15 @@ const emit = defineEmits(["update:visible", "confirm"])
 
 // 下拉框数据
 const unitGroups = ref([])
-const selectedGroupId = ref(null);
+const selectedGroupId = ref(null)
 const selectedGroup = ref("")
 const unitOptions = ref([])
-const selectedUnitId = ref(null);
+const selectedUnitId = ref(null)
 
 // 表格数据
 const tableData = ref([])
 // 加载状态
-const loading = ref(false);
+const loading = ref(false)
 
 // 输入框数据
 const formData = ref({
@@ -178,141 +266,152 @@ const formData = ref({
 // 单位选项缓存
 const unitOptionsCache = ref({})
 
-// 加载下拉框数据并设置默认值
-onMounted(async () => {
-  const groups = await fetchUnitGroups()
-  unitGroups.value = groups
-  if (groups.length > 0) {
-    selectedGroupId.value = groups[0].sutId;
-    // 根据下拉框的选项的sutId查询表格数据
-    await fetchUnitTableData(groups[0].sutId);
+// 新增单位组弹窗的显示状态
+const addUnitGroupVisible = ref(false)
+
+// 显示新增单位组弹窗
+const showAddUnitGroupDialog = () => {
+  addUnitGroupVisible.value = true
+}
+
+// 单位系统下拉框数据
+const fetchUnitGroups = async () => {
+  const params = {
+    transCode: "ES0024"
   }
-})
+  try {
+    const res = await request(params)
+    return (res.rows || []).map(row => ({
+      ...row,
+      isEditable: row.sutId !== '1' // 不可编辑和删除
+    }))
+  } catch (err) {
+    ElMessage.error(err.returnMsg || t("error.fetchFailed"))
+    return []
+  }
+}
 
-// 单位系统改变重新加载表格数据
-watch(
-  selectedGroupId,
-  async (newId) => {
-    const group = unitGroups.value.find((g) => g.sutId === newId);
-    if (group) {
-      await fetchUnitTableData(selectedGroupId.value);
-      
-    } else {
-      tableData.value = []
-    }
-  },
-  { immediate: true }
-)
+// 单位下拉框获取表格数据
+const fetchUnitTableData = async (sutId) => {
+  loading.value = true
+  const params = {
+    transCode: "ES0025",
+    sutId: sutId
+  }
+  try {
+    const res = await request(params)
+    tableData.value = (res.rows || []).map((row) => ({
+      ...row,
+      unitOptions: row.value ? [{ utId: row.utId, value: row.value }] : [],
+      selectedUnitId: row.value || null
+    }))
+  } catch (err) {
+    ElMessage.error(err.returnMsg || t("error.fetchFailed"))
+    tableData.value = []
+  } finally {
+    loading.value = false
+  }
+}
 
 // 根据单位系统查看单位
 const fetchUnitsForRow = async (row) => {
-  // 检查缓存中是否已有该 gutId 的单位数据
   if (unitOptionsCache.value[row.gutId]) {
-    row.unitOptions = unitOptionsCache.value[row.gutId];
-    // 如果当前行未选择单位，设置为第一个选项
+    row.unitOptions = unitOptionsCache.value[row.gutId]
     if (!row.selectedUnitId && row.unitOptions.length > 0) {
-      row.selectedUnitId = row.unitOptions[0].value;
+      row.selectedUnitId = row.unitOptions[0].value
     }
-    return;
+    return
   }
 
   const params = {
-    transCode: 'ES0019',
+    transCode: "ES0019",
     gutId: row.gutId
-  };
+  }
   try {
-    const res = await request(params);
-    // 将获取的单位数据存入缓存和当前行
-    row.unitOptions = res.rows || [];
-    unitOptionsCache.value[row.gutId] = row.unitOptions;
-    // 如果当前行未选择单位，设置为第一个选项
+    const res = await request(params)
+    row.unitOptions = res.rows || []
+    unitOptionsCache.value[row.gutId] = row.unitOptions
     if (!row.selectedUnitId && row.unitOptions.length > 0) {
-      row.selectedUnitId = row.unitOptions[0].value;
+      row.selectedUnitId = row.unitOptions[0].value
     }
   } catch (err) {
-    ElMessage.error(err.returnMsg || t('error.fetchFailed'));
-    row.unitOptions = [];
-    unitOptionsCache.value[row.gutId] = []; // 缓存空结果，避免重复请求
+    ElMessage.error(err.returnMsg || t("error.fetchFailed"))
+    row.unitOptions = []
+    unitOptionsCache.value[row.gutId] = []
   }
-};
+}
 
 // 保存选中的单位
 const saveSelectedUnit = async (row) => {
   try {
-    const selectedUnit = row.unitOptions.find(unit => unit.value === row.selectedUnitId)
-    console.log('Saving selected unitvvvvvvvv:', selectedUnit);
-    console.log('Row datadddddd:', row);
-    console.log("selectedGroupId.value  sutId", selectedGroupId.value);
-    
-    
-    
+    const selectedUnit = row.unitOptions.find(
+      (unit) => unit.value === row.selectedUnitId
+    )
     const params = {
-      transCode: 'ES0022', // 假设保存接口的 transCode
+      transCode: "ES0022",
       gutId: row.gutId,
-      utId: selectedUnit.utId || '',
-      sutId: selectedGroupId.value || '',
-      gsutId: row.gsutId || '',
+      utId: selectedUnit.utId || "",
+      sutId: selectedGroupId.value || "",
+      gsutId: row.gsutId || "",
       value: selectedUnit.value
     }
     const res = await request(params)
-    ElMessage.success(t('message.settingSuccess'))
+    ElMessage.success(t("message.settingSuccess"))
   } catch (err) {
-    ElMessage.error(err.returnMsg || t('message.settingFailed'))
+    ElMessage.error(err.returnMsg || t("message.settingFailed"))
   }
 }
 
-
-
-// 单位系统下拉框数据
-const fetchUnitGroups = async () => {
-  const params = {
-    transCode: 'ES0024',
-  };
+// 保存中英文名称接口
+const submitForm = async () => {
   try {
-    const res = await request(params);
-    return res.rows || [];
-  } catch (err) {
-    ElMessage.error(err.returnMsg || t('error.fetchFailed'));
-    return [];
+    await formRef.value.validate()
+    await handleSaveName()
+    const groups = await fetchUnitGroups()
+    unitGroups.value = groups
+    addUnitGroupVisible.value = false // 关闭弹窗
+  } catch (error) {
+    return false
   }
 }
 
-// 单位下拉框获取表格数据
-const fetchUnitTableData = async (sutId) => {
-  loading.value = true
-  const params = {
-    transCode: 'ES0025',
-    sutId: sutId
+// 编辑保存单位组
+const handleSaveEditUnitGroup = async (row) => {
+  if (!row.nameZn || !row.nameEn) {
+    ElMessage.error(t("treeData.nameRequired"))
+    return
   }
   try {
-    const res = await request(params)
-    // 为每行数据添加 unitOptions 和 selectedUnitId
-    tableData.value = (res.rows || []).map(row => ({
-      ...row,
-      unitOptions: row.value ? [{ utId: row.utId, value: row.value }] : [],
-      selectedUnitId: row.value || null
-    }))
-    loading.value = false
+    const params = {
+      transCode: "ES0020",
+      nameZh: row.nameZn,
+      nameEn: row.nameEn,
+      sutId: row.sutId
+    }
+    await request(params)
+    ElMessage.success(t("message.editSuccess"))
   } catch (err) {
-    loading.value = false
-    ElMessage.error(err.returnMsg || t('error.fetchFailed'))
+    ElMessage.error(t("message.editFailed"))
   }
 }
 
-
-
-
-// 保存中英文名称接口
-const submitForm = async () => {
+// 删除单位组
+const handleDeleteUnitGroup = async (row) => {
   try {
-    await formRef.value.validate()
-    await handleSaveName()
+    const params = {
+      transCode: "ES0026",
+      sutId: row.sutId
+    }
+    await request(params)
+    ElMessage.success(t("message.deleteSuccess"))
+    // 刷新单位组列表
     const groups = await fetchUnitGroups()
     unitGroups.value = groups
-  } catch (error) {
-    return false
+  } catch (err) {
+    ElMessage.error(t("message.deleteFailed"))
   }
 }
+
 const handleSaveName = async () => {
   try {
     const params = {
@@ -321,8 +420,7 @@ const handleSaveName = async () => {
       nameEn: formData.value.englishName
     }
     const res = await request(params)
-    // tableData.value = [...tableData.value, newUser] // 添加新用户到表格
-    formData.value = { userId: "", userName: "" } // 清空输入框
+    formData.value = { chineseName: "", englishName: "" } // 清空输入框
     ElMessage.success(t("message.saveSuccess"))
   } catch (err) {
     ElMessage.error(t("message.saveFailed"))
@@ -337,6 +435,36 @@ const handleConfirm = () => {
   })
   emit("update:visible", false)
 }
+
+watch(
+  () => props.visible,
+  async (newVisible) => {
+    if (newVisible) {
+      loading.value = true
+      const groups = await fetchUnitGroups()
+      unitGroups.value = groups
+      if (groups.length > 0) {
+        selectedGroupId.value = groups[0].sutId
+        await fetchUnitTableData(groups[0].sutId)
+      } else {
+        loading.value = false
+      }
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  selectedGroupId,
+  async (newId) => {
+    if (newId) {
+      await fetchUnitTableData(newId)
+    } else {
+      tableData.value = []
+    }
+  },
+  { immediate: false }
+)
 </script>
 
 <style scoped>
@@ -360,12 +488,6 @@ const handleConfirm = () => {
   margin-top: 5px;
 }
 
-.lastbtn {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
 .el-form-item {
   margin-bottom: 5px;
 }
@@ -391,6 +513,36 @@ const handleConfirm = () => {
   margin-left: -5px !important;
 }
 
+:deep(.el-input__inner){
+  text-align: center !important;
+}
+
+.add-btn {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.unit-group-list {
+  margin-top: 20px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.delete-btn {
+  color: var(--el-color-danger);
+}
+
+.operation-btn {
+  font-size: 16px;
+  padding: 0 5px; 
+}
+
+.el-table__cell {
+  text-align: center; 
+}
+
 .lastbtn {
   display: flex;
   justify-content: flex-end;
@@ -410,4 +562,86 @@ const handleConfirm = () => {
   color: var(--el-text-color-primary);
   text-align: left;
 }
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* 单位组弹窗表格的优化样式 */
+.unit-group-list .el-table {
+  background-color: var(--el-bg-color); /* 确保表格背景清晰 */
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 轻微阴影增加层次感 */
+}
+
+/* 可编辑单元格样式 */
+.unit-group-list :deep(.el-table__cell) {
+  padding: 8px; /* 缩小单元格内边距，使布局更紧凑 */
+}
+
+/* 输入框样式 */
+.unit-group-list :deep(.el-input__inner) {
+  background-color: #fbfdff; /* 浅灰背景，提示可编辑 */
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  transition: all 0.3s ease; /* 平滑过渡效果 */
+  text-align: center;
+  padding: 4px 8px; /* 调整输入框内边距 */
+  font-size: 13px; /* 字体稍小，适应表格 */
+}
+
+/* 输入框聚焦和悬停时的样式 */
+.unit-group-list :deep(.el-input__inner:focus),
+.unit-group-list :deep(.el-input__inner:hover) {
+  background-color: #ffffff; /* 聚焦时白色背景 */
+  border-color: var(--el-color-primary); /* 高亮边框 */
+  box-shadow: 0 0 0 2px rgba(var(--el-color-primary-rgb), 0.1); /* 聚焦光晕 */
+}
+
+/* 表格行悬停效果 */
+.unit-group-list :deep(.el-table__row:hover) {
+  background-color: var(--el-fill-color-light); /* 行悬停时背景变化 */
+}
+
+/* 操作列按钮样式 */
+.unit-group-list :deep(.operation-btn) {
+  font-size: 18px; /* 增大图标大小 */
+  padding: 0 8px; /* 按钮间距 */
+  transition: color 0.3s ease;
+}
+
+/* 保存按钮 */
+.unit-group-list :deep(.operation-btn .el-icon-check) {
+  color: var(--el-color-success); /* 绿色保存图标 */
+}
+
+/* 删除按钮 */
+.unit-group-list :deep(.operation-btn.delete-btn .el-icon-delete) {
+  color: var(--el-color-danger); /* 红色删除图标 */
+}
+
+/* 按钮悬停效果 */
+.unit-group-list :deep(.operation-btn:hover) {
+  opacity: 0.8; /* 悬停时略微透明 */
+}
+
+/* 表格边框和分隔线 */
+.unit-group-list :deep(.el-table__row:not(:last-child) td) {
+  border-bottom: 1px solid var(--el-border-color-light); /* 保留行分隔线 */
+}
+
+.unit-group-list :deep(.el-table th, .el-table td) {
+  border-top: none !important;
+  border-right: none !important;
+  border-left: none !important;
+}
+
+/* 表头样式 */
+.unit-group-list :deep(.el-table__header th) {
+  background-color: var(--el-fill-color-blank); /* 表头背景 */
+  font-weight: 600; /* 表头字体加粗 */
+  color: var(--el-text-color-primary);
+}
 </style>

src/locales/en.json

@@ -11,7 +11,9 @@
     "saveSuccess": "Save successful",
     "saveFailed": "Save failed",
     "settingSuccess": "Settings saved successfully",
-    "settingFailed": "Settings save failed"
+    "settingFailed": "Settings save failed",
+    "editSuccess": "Edit successful",
+    "editFailed": "Edit failed"
   },
   "common": {
     "tip": "Tip",
@@ -117,12 +119,14 @@
     "offset": "Offset",
     "unit": "Unit",
     "unitSystem": "Unit Group System",
-    "unitGroupSettings": "Unit Group Setting",
+    "addUnitSystem": "Add Unit System",
     "createNewUnitSystem": "This operation will create a new unit system:",
+    "nameRequired": "Name is required",
     "chineseNameRequired": "Chinese name is required",
     "englishNameRequired": "English name is required",
-    "addUnitGroup": "Add Unit Group",
-    "editUnitGroup": "Edit Unit Group",
-    "deleteUnitGroup": "Delete Unit Group"
+    "addUnitGroup": "Add Unit System",
+    "saveUnitGroup": "Save Unit System",
+    "deleteUnitGroup": "Delete Unit System",
+    "operations": "Operations"
   }
 }

src/locales/zh-CN.json

@@ -11,7 +11,9 @@
     "saveSuccess": "保存成功",
     "saveFailed": "保存失败",
     "settingSuccess": "设置成功",
-    "settingFailed": "设置失败"
+    "settingFailed": "设置失败",
+    "editSuccess": "编辑成功",
+    "editFailed": "编辑失败"
   },
   "common": {
     "tip": "提示",
@@ -117,13 +119,15 @@
     "offset": "偏移量",
     "unit": "单位",
     "unitSystem": "单位组系统",
+    "addUnitSystem": "新增单位系统",
     "createNewUnitSystem": "该操作将创建一个新的单位系统：",
+    "nameRequired": "名称不能为空",
     "chineseNameRequired": "中文名称不能为空",
     "englishNameRequired": "英文名称不能为空",
-    "unitGroupSettings": "单位组设置",
-    "addUnitGroup": "添加单位组",
-    "editUnitGroup": "编辑单位组",
-    "deleteUnitGroup": "删除单位组"
+    "addUnitGroup": "添加单位系统",
+    "saveUnitGroup": "保存单位系统",
+    "deleteUnitGroup": "删除单位系统",
+    "operations": "操作"
 
   }