feat: 统一列表新增编辑页面风格

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

@@ -1,110 +1,142 @@
 <template>
-  <!-- 添加或修改参数配置对话框 -->
-  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+  <div class="addEdit-block">
     <el-form
+      class="add-update-preview"
       ref="ruleForm"
       :model="ruleForm"
       :rules="rules"
-      label-width="120px"
+      label-width="180px"
     >
-      <el-form-item label="变电站名称" prop="subName">
-        <el-input
-          v-model="ruleForm.subName"
-          placeholder="请输入变电站名称"
-          :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="cityChange"
-        >
-          <el-option
-            v-for="item in cityList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+      <template>
+        <el-form-item label="变电站名称" prop="subName">
+          <el-input
+            v-model="ruleForm.subName"
+            placeholder="请输入变电站名称"
+            :readonly="type == 'view'"
           />
-        </el-select>
-      </el-form-item>
+        </el-form-item>
+        <el-form-item label="归属市名称" prop="cityId">
+          <el-select
+            style="width: 100%"
+            v-model="ruleForm.cityId"
+            placeholder="请选择归属市名称"
+            :disabled="type == 'view'"
+            @change="cityChange"
+          >
+            <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="voltageLevel">
-        <el-input
-          @change="ruleForm.mainNum = parseInt(ruleForm.mainNum)"
-          type="number"
-          v-model="ruleForm.voltageLevel"
-          placeholder="请输入电压等级"
-          :disabled="type == 'view'"
-        />
-      </el-form-item>
-      <el-form-item label="主变台数" prop="mainNum">
-        <el-input
-          @change="ruleForm.mainNum = parseInt(ruleForm.mainNum)"
-          type="number"
-          style="width: 100%"
-          v-model="ruleForm.mainNum"
-          placeholder="请输入主变台数"
-          :disabled="type == 'view'"
-        />
-      </el-form-item>
-      <el-form-item label="主变容量(MVA)" prop="mainCapacity">
-        <el-input
-          @change="ruleForm.mainCapacity = parseInt(ruleForm.mainCapacity)"
-          type="number"
-          style="width: 100%"
-          v-model="ruleForm.mainCapacity"
-          placeholder="请输入主变容量"
-          :disabled="type == 'view'"
-        />
-      </el-form-item>
-      <el-form-item label="负荷报警阀值" prop="alarmThreshold">
-        <el-input
-          @change="ruleForm.alarmThreshold = parseInt(ruleForm.alarmThreshold)"
-          type="number"
-          style="width: 100%"
-          v-model="ruleForm.alarmThreshold"
-          placeholder="请输入负荷报警阀值"
-          :disabled="type == 'view'"
-        />
-      </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"
-          type="textarea"
-          :disabled="type == 'view'"
-          placeholder="请输入备注"
-        ></el-input>
-      </el-form-item>
+        <el-form-item label="电压等级" prop="voltageLevel">
+          <el-input
+            @change="ruleForm.mainNum = parseInt(ruleForm.mainNum)"
+            type="number"
+            v-model="ruleForm.voltageLevel"
+            placeholder="请输入电压等级"
+            :readonly="type == 'view'"
+          />
+        </el-form-item>
+        <el-form-item label="主变台数" prop="mainNum">
+          <el-input
+            @change="ruleForm.mainNum = parseInt(ruleForm.mainNum)"
+            type="number"
+            style="width: 100%"
+            v-model="ruleForm.mainNum"
+            placeholder="请输入主变台数"
+            :readonly="type == 'view'"
+          />
+        </el-form-item>
+        <el-form-item label="主变容量(MVA)" prop="mainCapacity">
+          <el-input
+            @change="ruleForm.mainCapacity = parseInt(ruleForm.mainCapacity)"
+            type="number"
+            style="width: 100%"
+            v-model="ruleForm.mainCapacity"
+            placeholder="请输入主变容量"
+            :readonly="type == 'view'"
+          />
+        </el-form-item>
+        <el-form-item label="负荷报警阀值" prop="alarmThreshold">
+          <el-input
+            @change="
+              ruleForm.alarmThreshold = parseInt(ruleForm.alarmThreshold)
+            "
+            type="number"
+            style="width: 100%"
+            v-model="ruleForm.alarmThreshold"
+            placeholder="请输入负荷报警阀值"
+            :readonly="type == 'view'"
+          />
+        </el-form-item>
+        <el-form-item label="用户增长率(%)" prop="growRate">
+          <el-input
+            type="number"
+            v-model="ruleForm.growRate"
+            placeholder="请输入用户增长率"
+            :readonly="type == 'view'"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="ruleForm.remark"
+            type="textarea"
+            :readonly="type == 'view'"
+            placeholder="请输入备注"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="btn">
+          <el-button
+            class="btn3"
+            v-if="type != 'view'"
+            type="success"
+            @click="onSubmit"
+          >
+            <span class="icon iconfont icon-xihuan"></span>
+            提交
+          </el-button>
+          <el-button
+            class="btn4"
+            v-if="type != 'view'"
+            type="success"
+            @click="back()"
+          >
+            <span class="icon iconfont icon-xihuan"></span>
+            取消
+          </el-button>
+          <el-button
+            class="btn5"
+            v-if="type == 'view'"
+            type="success"
+            @click="back()"
+          >
+            <span class="icon iconfont icon-xihuan"></span>
+            返回
+          </el-button>
+        </el-form-item>
+      </template>
     </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="onSubmit" v-if="type != 'view'"
-          >确 定</el-button
-        >
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </template>
-  </el-dialog>
+  </div>
 </template>
 <script>
 import { myMixin } from "../selectMixin";
@@ -114,7 +146,6 @@ export default {
   data() {
     return {
       type: "add", // add, edit, view
-      open: false,
       ruleForm: {
         id: undefined,
         subName: "",
@@ -126,6 +157,7 @@ export default {
         compId: undefined,
         compName: undefined,
         cityName: undefined,
+        growRate: undefined,
         remark: undefined,
       },
       rules: {
@@ -190,7 +222,6 @@ export default {
     },
     openDialog(id, type) {
       this.type = type;
-      this.open = true;
       this.resetForm();
       if (id) this.info(id);
       this.getCityList();
@@ -206,7 +237,6 @@ export default {
             ? Number(this.ruleForm.compId)
             : undefined;
           if (this.ruleForm.cityId) this.getCompList();
-
         } else {
           this.$message.error(data.msg);
         }
@@ -224,6 +254,7 @@ export default {
         compId: undefined,
         compName: undefined,
         cityName: undefined,
+        growRate: undefined,
         remark: undefined,
       };
     },
@@ -249,7 +280,7 @@ export default {
                 message: "操作成功",
                 type: "success",
               });
-              this.open = false;
+              this.parent.addOrUpdateOrDetailFlag = false;
               this.resetForm();
               this.parent.search();
             } else {
@@ -260,8 +291,8 @@ export default {
       });
     },
     // 返回
-    cancel() {
-      this.open = false;
+    back() {
+      this.parent.addOrUpdateOrDetailFlag = false;
       this.resetForm();
     },
   },

src/views/modules/station/list.vue

@@ -4,7 +4,7 @@
     :style="{ width: '100%', padding: '20px 30px', fontSize: '15px' }"
   >
     <!-- 列表页 -->
-    <template>
+    <template v-if="!addOrUpdateOrDetailFlag">
       <el-form
         class="center-form-pv"
         :style="{
@@ -304,7 +304,12 @@
               {{ scope.row.alarmThreshold }}
             </template>
           </el-table-column>
-
+          <el-table-column
+            :resizable="true"
+            :sortable="true"
+            prop="growRate"
+            label="用户增长率(%)"
+          />
           <el-table-column
             :resizable="true"
             :sortable="true"
@@ -369,6 +374,7 @@
                 删除
               </el-button>
               <el-button
+                v-if="false"
                 class="view"
                 type="primary"
                 @click="lineHandler(scope.row)"
@@ -417,7 +423,11 @@
     </template>
 
     <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
-    <add-or-update :parent="this" ref="addOrUpdate"></add-or-update>
+    <add-or-update
+      v-if="addOrUpdateOrDetailFlag"
+      :parent="this"
+      ref="addOrUpdate"
+    ></add-or-update>
     <!-- 线路页面 -->
     <line-list :parent="this" ref="line"></line-list>
   </div>
@@ -446,6 +456,7 @@ export default {
       dataListSelections: [],
       layouts: ["prev", "pager", "next", "sizes"],
       compList: [],
+      addOrUpdateOrDetailFlag: false,
     };
   },
   created() {
@@ -537,7 +548,10 @@ export default {
     },
     // 添加/修改
     addOrUpdateHandler(id, type) {
-      this.$refs.addOrUpdate.openDialog(id, type);
+      this.addOrUpdateOrDetailFlag = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.openDialog(id, type);
+      });
     },
     // 删除
     async deleteHandler(id) {