feat: 拓展图层资源配置的扩展字段设置

src/views/aiSupervision/layerManage/resource/LayerDetails.vue

@@ -19,70 +19,134 @@
       <div class="middle">
         <el-button type="primary" plain @click="dialogFormVisible = true">添加图层</el-button>
         <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
-          <el-form :model="editDataInfoForm">
+          <el-tabs v-model="activeName" type="card">
-            <el-form-item label="服务类型" style="font-size: 1rem" :label-width="'120px'">
+            <el-tab-pane label="基础字段" name="1">
-              <el-select style="width: 80%" v-model="editDataInfoForm.serviceType" placeholder="请选择">
+              <el-form :model="editDataInfoForm">
-                <el-option
+                <el-form-item label="服务类型" style="font-size: 1rem" :label-width="'120px'">
-                  v-for="item in serviceTypeOptions"
+                  <el-select style="width: 80%" v-model="editDataInfoForm.serviceType" placeholder="请选择">
-                  :key="item.value"
+                    <el-option
-                  :label="item.label"
+                      v-for="item in serviceTypeOptions"
-                  :value="item.value"
+                      :key="item.value"
-                />
+                      :label="item.label"
-              </el-select>
+                      :value="item.value"
-            </el-form-item>
+                    />
+                  </el-select>
+                </el-form-item>
 
-            <el-form-item label="服务名称" prop="serviceName" style="font-size: 1rem" :label-width="'120px'">
+                <el-form-item label="服务名称" prop="serviceName" style="font-size: 1rem" :label-width="'120px'">
-              <el-input v-model.trim="editDataInfoForm.serviceName" style="width: 80%"></el-input>
+                  <el-input v-model.trim="editDataInfoForm.serviceName" style="width: 80%"></el-input>
-            </el-form-item>
+                </el-form-item>
-            <el-form-item label="服务别名" prop="serviceNameAlias" style="font-size: 1rem" :label-width="'120px'">
+                <el-form-item label="服务别名" prop="serviceNameAlias" style="font-size: 1rem" :label-width="'120px'">
-              <el-input v-model.trim="editDataInfoForm.serviceNameAlias" style="width: 80%"></el-input>
+                  <el-input v-model.trim="editDataInfoForm.serviceNameAlias" style="width: 80%"></el-input>
-            </el-form-item>
+                </el-form-item>
-            <el-form-item label="服务地址" prop="serviceUrl" style="font-size: 1rem" :label-width="'120px'">
+                <el-form-item label="服务地址" prop="serviceUrl" style="font-size: 1rem" :label-width="'120px'">
-              <el-input v-model.trim="editDataInfoForm.serviceUrl" style="width: 80%"></el-input>
+                  <el-input v-model.trim="editDataInfoForm.serviceUrl" style="width: 80%"></el-input>
-            </el-form-item>
+                </el-form-item>
-            <el-form-item
+                <el-form-item
-              v-if="editDataInfoForm.serviceType === '030300'"
+                  v-if="editDataInfoForm.serviceType === '030300'"
-              label="服务索引"
+                  label="服务索引"
-              prop="serviceIndex"
+                  prop="serviceIndex"
-              style="font-size: 1rem"
+                  style="font-size: 1rem"
-              :label-width="'120px'"
+                  :label-width="'120px'"
-            >
-              <el-input v-model="editDataInfoForm.serviceIndex" style="width: 80%"></el-input>
-            </el-form-item>
-            <el-form-item
-              v-show="['030300'].includes(editDataInfoForm.serviceType)"
-              label="样式选择"
-              style="font-size: 1rem"
-              :label-width="'120px'"
-            >
-              <div class="styleBtn">
-                <el-tag
-                  type="info"
-                  effect="plain"
-                  class="style-button"
-                  :class="{ 'style-button-none': editDataInfoForm.relationStyleName }"
-                  @click="handleLayerStyleTypeChange"
                 >
-                  {{ editDataInfoForm.relationStyleName ? editDataInfoForm.relationStyleName : '点击选择样式' }}
+                  <el-input v-model="editDataInfoForm.serviceIndex" style="width: 80%"></el-input>
-                </el-tag>
+                </el-form-item>
-                <el-button
+                <el-form-item
-                  style="margin-left: 15px"
+                  v-show="['030300'].includes(editDataInfoForm.serviceType)"
-                  :disabled="editDataInfoForm.relationStyleName === ''"
+                  label="样式选择"
-                  @click="
+                  style="font-size: 1rem"
-                    editDataInfoForm.relationStyleName = '';
+                  :label-width="'120px'"
-                    editDataInfoForm.relationStyleId = '';
-                  "
-                  >取消选择样式</el-button
                 >
+                  <div class="styleBtn">
+                    <el-tag
+                      type="info"
+                      effect="plain"
+                      class="style-button"
+                      :class="{ 'style-button-none': editDataInfoForm.relationStyleName }"
+                      @click="handleLayerStyleTypeChange"
+                    >
+                      {{ editDataInfoForm.relationStyleName ? editDataInfoForm.relationStyleName : '点击选择样式' }}
+                    </el-tag>
+                    <el-button
+                      style="margin-left: 15px"
+                      :disabled="editDataInfoForm.relationStyleName === ''"
+                      @click="
+                        editDataInfoForm.relationStyleName = '';
+                        editDataInfoForm.relationStyleId = '';
+                      "
+                      >取消选择样式</el-button
+                    >
+                  </div>
+                  <styleListDialogVue
+                    :visible="styleDialogVisible"
+                    :$currentStyleId="editDataInfoForm.relationStyleId"
+                    @closeDialog="styleDialogVisible = false"
+                    @confirm="handleConfirm"
+                  ></styleListDialogVue>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="扩展字段" name="2">
+              <div class="fn-btns">
+                <el-button type="primary" class="btn" @click="addRow">添加</el-button>
+                <el-button type="danger" class="btn" @click="deleteRow">删除</el-button>
               </div>
-              <styleListDialogVue
+              <el-table :data="extendTable" border @selection-change="handleSelectionChange">
-                :visible="styleDialogVisible"
+                <el-table-column type="selection" width="50" align="center"></el-table-column>
-                :$currentStyleId="editDataInfoForm.relationStyleId"
+                <el-table-column prop="field" label="字段名称">
-                @closeDialog="styleDialogVisible = false"
+                  <template slot-scope="scope">
-                @confirm="handleConfirm"
+                    <el-input v-model="scope.row.field" :disabled="!scope.row.isEdit"></el-input>
-              ></styleListDialogVue>
+                  </template>
-            </el-form-item>
+                </el-table-column>
-          </el-form>
+                <el-table-column prop="alias" label="别名">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.alias" :disabled="!scope.row.isEdit"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="value" label="字段值">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.value" :disabled="!scope.row.isEdit"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200">
+                  <template slot-scope="scope">
+                    <el-button
+                      v-if="scope.row.isEdit"
+                      type="primary"
+                      icon="el-icon-success"
+                      size="mini"
+                      @click="saveRow(scope.$index)"
+                      >保存</el-button
+                    >
+                    <el-button
+                      v-if="scope.row.isEdit"
+                      type="warning"
+                      icon="el-icon-error"
+                      size="mini"
+                      @click="cancelRow(scope.$index)"
+                      >取消</el-button
+                    >
+                    <el-button
+                      v-if="!scope.row.isEdit"
+                      type="primary"
+                      icon="el-icon-edit"
+                      size="mini"
+                      @click="editRow(scope.$index)"
+                      >编辑</el-button
+                    >
+                    <el-button
+                      v-if="!scope.row.isEdit"
+                      type="danger"
+                      icon="el-icon-delete-solid"
+                      size="mini"
+                      @click="deleteRow(scope.$index)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
 
           <div slot="footer" class="dialog-footer">
             <el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -188,9 +252,32 @@ export default {
       },
       dialogFormVisible: false, //是否显示对话框
       keyword: '',
-      styleDialogVisible: false //是否显示样式选择对话框
+      styleDialogVisible: false, //是否显示样式选择对话框
+      activeName: '1',
+      extendTable: [],
+      multipleSelection: []
     };
   },
+  watch: {
+    keyword() {
+      this.debouncedGetLayerList();
+    },
+    dialogFormVisible(val) {
+      if (val === false) {
+        this.initData();
+      }
+    }
+  },
+  created() {
+    // 使用 lodash 的 debounce 函数创建防抖版本
+    this.debouncedGetLayerList = debounce(this.getLayerList, 500);
+
+    getDirectoryByIdApi(this.$route.query.id).then((res) => {
+      this.directoryInfo = res.data.children[0];
+      this.initData();
+      this.getLayerList();
+    });
+  },
   methods: {
     goBack() {
       this.$router.go(-1);
@@ -204,6 +291,7 @@ export default {
       this.editDataInfoForm.serviceIndex = row.serviceIndex;
       this.editDataInfoForm.relationStyleId = row.relationStyleId;
       this.editDataInfoForm.relationStyleName = row.relationStyleName;
+      this.extendTable = (row.extendData && JSON.parse(row.extendData)) || [];
       this.dialogTitle = '编辑图层';
       this.dialogFormVisible = true;
     },
@@ -259,7 +347,11 @@ export default {
         });
         return;
       }
-      await saveOrUpdateLayerApi(this.editDataInfoForm);
+      const params = {
+        ...this.editDataInfoForm,
+        extendData: JSON.stringify(this.extendTable)
+      };
+      await saveOrUpdateLayerApi(params);
       this.getLayerList();
       this.dialogFormVisible = false;
     },
@@ -284,26 +376,73 @@ export default {
       this.editDataInfoForm.dirNames = this.directoryInfo.name;
       this.editDataInfoForm.tileSize = '256';
       this.dialogTitle = '添加图层';
-    }
-  },
-  created() {
-    // 使用 lodash 的 debounce 函数创建防抖版本
-    this.debouncedGetLayerList = debounce(this.getLayerList, 500);
-
-    getDirectoryByIdApi(this.$route.query.id).then((res) => {
-      this.directoryInfo = res.data.children[0];
-      this.initData();
-      this.getLayerList();
-    });
-  },
-  watch: {
-    keyword() {
-      this.debouncedGetLayerList();
     },
-    dialogFormVisible(val) {
+    addRow() {
-      if (val === false) {
+      const editRow = this.extendTable.find((item) => item.isEdit);
-        this.initData();
+      if (editRow) {
+        this.$message({
+          type: 'info',
+          message: '请先保存当前编辑行'
+        });
+        return;
+      }
+      this.extendTable.push({
+        id: '',
+        field: '',
+        alias: '',
+        value: '',
+        isEdit: true
+      });
+    },
+    deleteRow(index) {
+      this.$messageBox
+        .confirm('是否删除该行数据?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        .then(() => {
+          if (index !== undefined) {
+            this.extendTable.splice(index, 1);
+          } else {
+            this.extendTable = this.extendTable.filter((item) => !this.multipleSelection.includes(item));
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    },
+    editRow(index) {
+      this.extendTable[index].isEdit = true;
+    },
+    cancelRow(index) {
+      if (!this.extendTable[index].id) {
+        this.extendTable.splice(index, 1);
+      } else {
+        this.extendTable[index].isEdit = false;
+      }
+    },
+    saveRow(index) {
+      if (!this.extendTable[index].id) {
+        this.extendTable[index].id = sycim.Cesium.createGuid();
       }
+      // 表格名字校验不重复
+      const name = this.extendTable[index].field;
+      const isRepeat = this.extendTable.some((item, i) => item.field === name && i !== index);
+      if (isRepeat) {
+        this.$message({
+          type: 'info',
+          message: '字段名称重复，请重新输入'
+        });
+        return;
+      }
+      this.extendTable[index].isEdit = false;
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
     }
   }
 };
@@ -402,4 +541,9 @@ header {
     }
   }
 }
+.el-dialog {
+  .fn-btns {
+    margin-bottom: 10px;
+  }
+}
 </style>