广告和协议功能

src/views/bst/ad/index.vue

@@ -50,7 +50,7 @@
           <dict-tag :options="dict.type.ad_belong" :value="scope.row.belong"/>
         </template>
       </el-table-column>
-      <el-table-column label="所属运营区" align="center" prop="area_name">
+      <el-table-column label="所属运营区" align="center" prop="areaName">
         <template slot-scope="scope">
           <span>{{ scope.row.areaName || '-' }}</span>
         </template>
@@ -97,13 +97,13 @@
 
     <!-- 添加或修改广告对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" label-width="80px">
-        <el-form-item label="运营区" prop="areaId">
+      <el-form ref="form" :model="form" label-width="80px" v-loading="detailLoading">
+        <el-form-item label="运营区" prop="areaId" >
             <area-remote-select
               v-model="form.areaId"
+              :init-options="initAreaOptions"
+              v-if="!detailLoading"
               placeholder="请选择运营区"
-              clearable
-              @change="handleQuery"
               style="width: 58%"
             />
         </el-form-item>
@@ -161,6 +161,12 @@ const defaultSort = {
 export default {
   name: "Ad",
   dicts:['ad_type','ad_url_type','ad_belong'],
+  props:{
+    id: {
+      type: [String, Number],
+      default: null
+    },
+  },
   mixins: [$showColumns],
   components: {AreaRemoteSelect, FormCol},
   data() {
@@ -213,8 +219,14 @@ export default {
       },
       // 表单参数
       form: {},
+      detailLoading: false,
     };
   },
+  computed:{
+    initAreaOptions() {
+      return [{id: this.form.areaId, name: this.form.areaName}]
+    },
+  },
   created() {
     this.getList();
   },
@@ -289,10 +301,13 @@ export default {
     handleUpdate(row) {
       this.reset();
       const adId = row.adId || this.ids
+      this.detailLoading = true;
       getAd(adId).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改广告";
+      }).finally(() => {
+        this.detailLoading = false;
       });
     },
     /** 提交按钮 */

src/views/bst/agreement/index.vue

@@ -117,20 +117,19 @@
 
     <!-- 添加或修改协议对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body :close-on-click-modal="false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <form-col :span="24" label="标题" prop="title">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="detailLoading">
+          <el-form-item :span="24" label="标题" prop="title">
             <el-input v-model="form.title" placeholder="请输入标题" />
-          </form-col>
-          <form-col label="运营区" prop="areaId">
+          </el-form-item>
+          <el-form-item label="运营区" prop="areaId" >
             <area-remote-select
               v-model="form.areaId"
+              :init-options="initAreaOptions"
+              v-if="!detailLoading"
               placeholder="请选择运营区"
-              clearable
-              @change="handleQuery"
-              style="width: 100%"
+              style="width: 58%"
             />
-          </form-col>
+          </el-form-item>
           <el-col :span="12">
             <form-col label="协议类型" prop="agreementType">
               <el-select
@@ -168,8 +167,6 @@
           <form-col :span="span"  label="内容详情">
             <editor  v-model="form.content" :min-height="200"/>
           </form-col>
-
-        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -185,6 +182,7 @@ import { $showColumns } from '@/utils/mixins';
 import FormCol from "@/components/FormCol/index.vue";
 import Editor from "@/components/Editor/index.vue";
 import AreaRemoteSelect from "@/components/Business/Area/AreaRemoteSelect.vue";
+
   // 默认排序字段
 const defaultSort = {
   prop: "createTime",
@@ -286,6 +284,7 @@ export default {
       },
       // 表单参数
       form: {},
+      detailLoading: false,
       // 表单校验
       rules: {
         title: [
@@ -294,6 +293,11 @@ export default {
       }
     };
   },
+  computed:{
+    initAreaOptions() {
+      return [{id: this.form.areaId, name: this.form.areaName}]
+    },
+  },
   created() {
     this.getList();
   },
@@ -328,6 +332,7 @@ export default {
       this.form = {
         id: null,
         storeId: null,
+        areaName:null,
         areaId: null,
         title: null,
         brief: null,
@@ -365,10 +370,13 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
+      this.detailLoading = true
       getAgreement(id).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改协议";
+      }).finally(()=>{
+        this.detailLoading = false;
       });
     },
     /** 提交按钮 */