重构

src/views/ems/site/zdlb/MonitorPointMapping.vue

@@ -3,7 +3,10 @@
     <div class="header-row">
       <div class="title-block">
         <div class="page-title">单站监控项目点位配置</div>
-        <div class="page-desc">站点：{{ siteName || siteId || '-' }}</div>
+        <div class="page-desc">
+          <span class="site-label">站点：</span>
+          <span>{{ siteName || siteId || '-' }}</span>
+        </div>
       </div>
       <div>
         <el-button @click="goBack">返回</el-button>
@@ -34,15 +37,42 @@
           <el-table-column prop="section" label="分组" min-width="180" />
           <el-table-column prop="name" label="页面展示名称" min-width="280" />
           <el-table-column prop="field" label="字段名" min-width="260" />
-          <el-table-column label="点位" min-width="420">
+          <el-table-column label="点位" min-width="300">
             <template slot-scope="scope">
               <el-input
                 v-model.trim="scope.row.point"
                 placeholder="请输入点位"
                 clearable
+                class="short-input"
               />
             </template>
           </el-table-column>
+          <el-table-column label="固定展示值" min-width="300">
+            <template slot-scope="scope">
+              <el-input
+                v-model.trim="scope.row.fixedValue"
+                placeholder="请输入固定展示值"
+                clearable
+                class="short-input"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="固定展示" width="120" align="center">
+            <template slot-scope="scope">
+              <el-checkbox v-model="scope.row.useFixedDisplay" :true-label="1" :false-label="0" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="small"
+                @click="handleDeleteItem(scope.$index, topMenu.items)"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
         </el-table>
 
         <el-tabs
@@ -61,15 +91,42 @@
               <el-table-column prop="section" label="分组" min-width="180" />
               <el-table-column prop="name" label="页面展示名称" min-width="280" />
               <el-table-column prop="field" label="字段名" min-width="260" />
-              <el-table-column label="点位" min-width="420">
+              <el-table-column label="点位" min-width="300">
                 <template slot-scope="scope">
                   <el-input
                     v-model.trim="scope.row.point"
                     placeholder="请输入点位"
                     clearable
+                    class="short-input"
                   />
                 </template>
               </el-table-column>
+              <el-table-column label="固定展示值" min-width="300">
+                <template slot-scope="scope">
+                  <el-input
+                    v-model.trim="scope.row.fixedValue"
+                    placeholder="请输入固定展示值"
+                    clearable
+                    class="short-input"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="固定展示" width="120" align="center">
+                <template slot-scope="scope">
+                  <el-checkbox v-model="scope.row.useFixedDisplay" :true-label="1" :false-label="0" />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="120" fixed="right">
+                <template slot-scope="scope">
+                  <el-button
+                    type="text"
+                    size="small"
+                    @click="handleDeleteItem(scope.$index, child.items)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </el-tab-pane>
         </el-tabs>
@@ -85,17 +142,25 @@ export default {
   name: 'MonitorPointMapping',
   data() {
     return {
+      siteId: '',
+      siteName: '',
       activeTopMenu: 'HOME',
       activeChildMap: {},
-      topMenuList: []
+      topMenuList: [],
+      deletedFieldCodes: []
     }
   },
-  computed: {
-    siteId() {
-      return this.$route.query.siteId || ''
-    },
-    siteName() {
-      return this.$route.query.siteName || ''
+  watch: {
+    '$route.query.siteId': {
+      immediate: false,
+      async handler(newSiteId) {
+        if (newSiteId === this.siteId) {
+          return
+        }
+        this.siteId = newSiteId || ''
+        this.siteName = this.$route.query.siteName || this.siteId
+        await this.initMenuStructure()
+      }
     }
   },
   methods: {
@@ -105,6 +170,7 @@ export default {
     async initMenuStructure() {
       if (!this.siteId) {
         this.topMenuList = []
+        this.deletedFieldCodes = []
         return
       }
       const response = await getSingleMonitorProjectPointMapping(this.siteId)
@@ -131,7 +197,9 @@ export default {
           section: row.sectionName || '-',
           name: row.fieldName || '-',
           field: row.fieldCode || '',
-          point: row.dataPoint || ''
+          point: row.dataPoint || '',
+          fixedValue: row.fixedDataPoint || '',
+          useFixedDisplay: row.useFixedDisplay === 1 ? 1 : 0
         }
         const topItem = topMap.get(topKey)
         const isTopDirect = moduleCode === menuCode || moduleCode === 'HOME'
@@ -152,6 +220,7 @@ export default {
       const firstTop = this.topMenuList[0]
       this.activeTopMenu = firstTop ? firstTop.code : 'HOME'
       this.activeChildMap = {}
+      this.deletedFieldCodes = []
       this.topMenuList.forEach(top => {
         if (top.children && top.children.length > 0) {
           this.$set(this.activeChildMap, top.code, top.children[0].code)
@@ -168,6 +237,23 @@ export default {
       })
       return rows
     },
+    handleDeleteItem(index, list) {
+      if (!Array.isArray(list) || index < 0 || index >= list.length) {
+        return
+      }
+      this.$confirm('是否确认删除该条明细记录？删除后需点击“保存”才会生效。', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const fieldCode = list[index] && list[index].field
+        if (fieldCode && !this.deletedFieldCodes.includes(fieldCode)) {
+          this.deletedFieldCodes.push(fieldCode)
+        }
+        list.splice(index, 1)
+        this.$message.success('已删除该条明细记录')
+      }).catch(() => {})
+    },
     async saveData() {
       if (!this.siteId) {
         this.$message.warning('缺少站点ID')
@@ -175,13 +261,29 @@ export default {
       }
       const mappings = this.getAllMappingRows()
         .filter(item => item.field)
-        .map(item => ({ fieldCode: item.field, dataPoint: item.point || '' }))
-      await saveSingleMonitorProjectPointMapping({ siteId: this.siteId, mappings })
-      this.$message.success('保存成功')
+        .map(item => ({
+          fieldCode: item.field,
+          dataPoint: item.point || '',
+          fixedDataPoint: item.fixedValue || '',
+          useFixedDisplay: item.useFixedDisplay === 1 ? 1 : 0
+        }))
+      const response = await saveSingleMonitorProjectPointMapping({
+        siteId: this.siteId,
+        mappings,
+        deletedFieldCodes: this.deletedFieldCodes
+      })
+      const affectedRows = Number(response?.data || 0)
+      if (affectedRows > 0) {
+        this.$message.success(`保存成功，已写入 ${affectedRows} 条`)
+      } else {
+        this.$message.warning('保存完成，但写入 0 条，请检查字段编码和点位值是否有效')
+      }
       await this.initMenuStructure()
     }
   },
   async mounted() {
+    this.siteId = this.$route.query.siteId || ''
+    this.siteName = this.$route.query.siteName || this.siteId
     await this.initMenuStructure()
   }
 }
@@ -209,6 +311,16 @@ export default {
   margin-top: 6px;
   font-size: 13px;
   color: #909399;
+  display: flex;
+  align-items: center;
+}
+
+.site-label {
+  margin-right: 8px;
+}
+
+.short-input {
+  width: 220px;
 }
 
 .child-menu-tabs {

src/views/ems/site/zdlb/index.vue

@@ -59,11 +59,10 @@
       </el-table-column>
       <el-table-column
         label="操作"
-        width="220"
+        width="120"
         fixed="right">
         <template slot-scope="scope">
           <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
-          <el-button type="text" size="small" @click="openPointMappingPage(scope.row)">配置</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -266,15 +265,6 @@ export default {
         this.$refs.siteForm && this.$refs.siteForm.clearValidate()
       })
     },
-    openPointMappingPage(row) {
-      this.$router.push({
-        path: '/ems/site/zdlb/monitor-point-mapping',
-        query: {
-          siteId: row.siteId,
-          siteName: row.siteName || ''
-        }
-      })
-    },
     submitSite() {
       this.$refs.siteForm.validate(valid => {
         if (!valid) {