feat: 变电站新增归属市&县旗字段

src/views/modules/station/components/add-or-update.vue

@@ -53,6 +53,39 @@
           :disabled="type == 'view'"
         />
       </el-form-item>
+      <el-form-item label="归属市" prop="cityId">
+        <el-select
+          style="width: 100%"
+          v-model="ruleForm.cityId"
+          placeholder="请选择归属市"
+          :disabled="type == 'view'"
+          @change="getCompList"
+        >
+          <el-option
+            v-for="item in cityList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="归属县旗" prop="compId">
+        <el-select
+          style="width: 100%"
+          v-model="ruleForm.compId"
+          placeholder="请选择县旗"
+          :disabled="type == 'view'"
+        >
+          <el-option
+            v-for="item in compList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
       <el-form-item label="备注" prop="remark">
         <el-input
           v-model="ruleForm.remark"
@@ -85,6 +118,10 @@ export default {
         mainNum: undefined,
         mainCapacity: undefined,
         alarmThreshold: undefined,
+        cityId: undefined,
+        compId: undefined,
+        compName: undefined,
+        cityName: undefined,
         remark: undefined,
       },
       rules: {
@@ -103,7 +140,11 @@ export default {
         alarmThreshold: [
           { required: true, message: "负荷报警阀值不能为空", trigger: "blur" },
         ],
+        cityId: [{ required: true, message: "归属市不能为空", trigger: "change" }],
+        compId: [{ required: true, message: "归属县旗不能为空", trigger: "change" }],
       },
+      cityList: [],
+      compList: [],
     };
   },
   props: ["parent"],
@@ -117,11 +158,44 @@ export default {
     },
   },
   methods: {
+    //获取市列表
+    async getCityList() {
+      const { data } = await this.$http({
+        url: `/city/lists`,
+        method: "get",
+      });
+      if (data && data.code === 0) {
+        this.cityList = data.data.map((item) => ({
+          label: item.cityName,
+          value: item.id,
+        }));
+      }
+    },
+    // 获取公司列表
+    async getCompList() {
+      this.ruleForm.compId = undefined;
+      this.ruleForm.compName = undefined;
+      this.compList = [];
+      const { data } = await this.$http({
+        url: `/company/lists`,
+        method: "get",
+        params: {
+          cityId: this.ruleForm.cityId,
+        },
+      });
+      if (data && data.code === 0) {
+        this.compList = data.data.map((item) => ({
+          label: item.compName,
+          value: String(item.id),
+        }));
+      }
+    },
     openDialog(id, type) {
       this.type = type;
       this.open = true;
       this.resetForm();
       if (id) this.info(id);
+      this.getCityList();
     },
     info(id) {
       this.$http({
@@ -130,6 +204,7 @@ export default {
       }).then(({ data }) => {
         if (data && data.code === 0) {
           this.ruleForm = data.data;
+          if (this.ruleForm.cityId) this.getCompList();
         } else {
           this.$message.error(data.msg);
         }
@@ -143,6 +218,10 @@ export default {
         mainNum: undefined,
         mainCapacity: undefined,
         alarmThreshold: undefined,
+        cityId: undefined,
+        compId: undefined,
+        compName: undefined,
+        cityName: undefined,
         remark: undefined,
       };
     },
@@ -150,6 +229,14 @@ export default {
     async onSubmit() {
       await this.$refs["ruleForm"].validate(async (valid) => {
         if (valid) {
+          const compName = this.compList.find(
+            (item) => item.value === this.ruleForm.compId
+          )?.label;
+          const cityName = this.cityList.find(
+            (item) => item.value === this.ruleForm.cityId
+          )?.label;
+          this.ruleForm.compName = compName;
+          this.ruleForm.cityName = cityName;
           await this.$http({
             url: `sub/${!this.ruleForm.id ? "save" : "update"}`,
             method: "post",

src/views/modules/station/list.vue

@@ -212,6 +212,26 @@
           <el-table-column
             :resizable="true"
             :sortable="true"
+            prop="cityName"
+            label="归属市名称"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.cityName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :resizable="true"
+            :sortable="true"
+            prop="compName"
+            label="归属旗县"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.compName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :resizable="true"
+            :sortable="true"
             prop="remark"
             label="备注"
           >