Jelajahi Sumber

运费板地区选项显示调整

DELL 3 tahun lalu
induk
melakukan
eacaf9a514

+ 159 - 57
src/views/setting/template/components/regionList.vue

@@ -1,89 +1,191 @@
 <template>
-  <el-dialog title="添加地区" :visible.sync="selectShow" width="700px" :close-on-click-modal="false" :destroy-on-close="true">
-    <el-form  ref="shippingTemplateRuleAreaList" :model="shippingTemplateRuleAreaList" label-width="100px">
-      <flexbox class="ygp-form-items" align="flex-start" justify="flex-start">
-        <el-form-item label="省/市" style="width: 80%;">
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogShow"
+      width="700px"
+      :before-close="close"
+    >
 
-          <el-cascader :options="listPidProvince" clearable :props="props" v-model="pidData"></el-cascader>
-        </el-form-item>
+    <div style="width: 462px; margin: 0 auto">
+      <el-cascader-panel v-model="ruleArea" style="height: 350px;"  @visible-change="listPidDisabled($event,index)" :options="listPidProvince" :props="props"></el-cascader-panel>
+    </div>
 
-      </flexbox>
-    </el-form>
-    <span slot="footer">
-      <el-button type="info" plain @click="selectShow = false">取消</el-button>
-      <el-button type="primary" @click="update">确定</el-button>
-    </span>
-  </el-dialog>
+      <!-- 按钮 -->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" :disabled="loading" @click="saveClick"
+        >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
-import { getTemplateList, } from "@/api/setting/template";
-import { publicFileGetUrl } from "@/api/common"
-import { listAreaByPid} from "@/api/admin/area";
+import {
+  getTemplateList,
+  addTemplateList,
+  getTreeList,
+  getTemplateDetail,
+  setTemplateDetail
+} from "@/api/setting/template";
 export default {
-  name: "regionList",
+
   props: {
-    value: {
-      type: Array,
-      default: []
+    // 弹框显示
+    dialogShow: {
+      type: Boolean,
+      default: false,
+    },
+    // ID
+    id: {
+      type:[Number, String],
+      default: ''
+    },
+    list: {
+      type:[Object, Array],
+      default: ''
     }
   },
   data() {
     return {
-      props:{
+      loading: false,
+      listPidProvince: [],//省
+      props: {
         multiple: true,
-        value:'areaId',
-        label:'areaName',
-        children:'cityList',
+        value: 'areaId',
+        label: 'areaName',
+        children: 'cityList',
       },
-      IMG_URL: publicFileGetUrl,
-      selectShow: false,
-      listPidProvince:[],//省
-      pidData:[],
-      shippingTemplateRuleAreaList:{
-          city: '',//市
-          cityId: '',//市id
-          province: '',//省
-          provinceId: '',//省id
-        },
+      ruleArea:''//获取所选的地区
+    };
+  },
+  computed: {
+    title() {
+      return this.list ? '编辑地区' : '添加地区';
+    },
+  },
+  created() {
+    this.getList()
+    if (this.list) {
+      let data = []
+      this.list.map(ressage => {
+        data.push([ressage.provinceId, ressage.cityId])
+      })
+      this.ruleArea = data
     }
   },
   methods: {
-    show() {
-      this.getList(true)
-      this.selectShow = true
+    // 关闭弹框
+    close() {
+      this.$emit("close");
+      this.loading = false;
     },
-    getList(reset) {
-      getTemplateList().then(res =>{
-        if(res.code == 0){
-          this.listPidProvince = res.data || []
+
+    // 确认
+    saveClick() {
+      this.loading = true;
+      if (this.ruleArea == ''){
+        this.$message({
+          showClose: true,
+          message: '区域不能为空',
+          type: 'warning'
+        });
+        this.loading = false;
+        return
+      }
+      let ressage = []
+      this.ruleArea.map(res => {
+        let city = ''
+        let province = ''
+        for (let i = 0; i < this.listPidProvince.length; i++) {
+          if (this.listPidProvince[i].areaId == res[0]) {
+            city = this.listPidProvince[i].areaName
+            let cityList = this.listPidProvince[i].cityList
+            for (let j = 0; j < cityList.length; j++) {
+              if (cityList[j].areaId == res[1]) {
+                province = cityList[j].areaName
+              }
+            }
+          }
+        }
+        res = {
+          provinceId: res[0],
+          cityId: res[1],
+          city: city,
+          province: province,
         }
+        ressage.push(res)
       })
+      this.ruleArea = ressage
 
+      this.$emit("close",this.ruleArea);
     },
-    getCityList(){
-      getTemplateList().then(res =>{
-        if(res.code == 0){
+
+    //获取省份
+    getList(reset) {
+      getTreeList().then(res => {
+        if (res.code == 0) {
           this.listPidProvince = res.data || []
         }
       })
     },
 
+    //多选框状态
+    listPidDisabled(e, index,) {
+      let shippingTemplateRuleList = [...this.shippingTemplateRuleList, ...this.shippingTemplateRuleList2]
+      if (e) {
+        this.listPidProvince.map(item => {//省
+          item.cityList.map(res => {//市
+            shippingTemplateRuleList.map(listItem => {//列表
+              if (listItem.shippingTemplateRuleAreaList != 1) {
+                listItem.shippingTemplateRuleAreaList.map(listRes => {//列表存在的省市
+                  if (res.areaId == listRes[1]) {
+                    // res.disabled = true
+                    this.$set(res, 'disabled', true)
+                  }
+                })
+              }
+            })
+          })
+        })
+        this.listPidProvince.map(item => {//省
+          item.cityList.map(res => {//市
+            for (let i = 0; i < shippingTemplateRuleList[index].shippingTemplateRuleAreaList.length; i++) {
+              if (res.areaId == shippingTemplateRuleList[index].shippingTemplateRuleAreaList[i][1]) {
+                this.$delete(res, 'disabled',)
+              }
+            }
+          })
+        })
 
+      } else {
+        this.listPidProvince.map(item => {
+          item.cityList.map(res => {
+            // res.disabled = false
+            this.$set(res, 'disabled', false)
+          })
+        })
+      }
+    },
 
-    update() {
-      // this.$emit('input', this.shippingTemplateRuleAreaList)
-      this.selectShow = false
-    }
-  }
-}
+  },
+};
 </script>
-
-<style lang="scss">
-.ygp-form-items {
-.el-form-item {
-  padding: 0 15px;
-
+<style scoped>
+.channel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tip {
+  font-size: 12px;
+  color: #999;
 }
+::v-deep .el-cascader-menu__wrap {
+  height: 354px!important;
+}
+::v-deep .el-cascader-menu {
+  min-width: 230px!important;
 }
 </style>
-

+ 94 - 141
src/views/setting/template/create.vue

@@ -29,14 +29,9 @@
                 </td>
               </tr>
               <tr v-for="(item,index) in shippingTemplateRuleList" :key="index" style="">
-                <td>
-                  <el-form-item :prop="`shippingTemplateRuleList.${index}.shippingTemplateRuleAreaList`"
-                                :rules="[{ required: true, message: '地区不能为空', trigger:['blur','change'] },{ type: 'array', message: '请选择地区' }]"
-                                style="width: 100%" label-width="0">
-                    <el-cascader @visible-change="listPidDisabled($event,index)" ref="cascaderAdd" collapse-tags
-                                 :options="listPidProvince" clearable :props="props"
-                                 v-model="item.shippingTemplateRuleAreaList" style="width: 100%;"></el-cascader>
-                  </el-form-item>
+                <td class="spec-table-td" style="text-align: left">
+                  <div v-for="(area) in item.shippingTemplateRuleAreaList" class="spec-table-td-link">{{area.city}}({{area.province}}),</div>
+                  <a @click="setListData(item.shippingTemplateRuleAreaList,item.id)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
                 </td>
                 <td>
                   <el-form-item :prop="`shippingTemplateRuleList.${index}.defaultNumber`"
@@ -72,7 +67,7 @@
               </tr>
             </table>
             <el-col style="margin-top: 10px">
-              <el-button type="primary" size="mini" @click="getListData">添加地区</el-button>
+              <el-button type="primary" size="mini" @click="getListData">添加付费区域</el-button>
             </el-col>
 
           </el-form>
@@ -95,14 +90,9 @@
                 </td>
               </tr>
               <tr v-for="(item,index) in shippingTemplateRuleList2" :key="index">
-                <td>
-                  <el-form-item :prop="`shippingTemplateRuleList2.${index}.shippingTemplateRuleAreaList`"
-                                :rules="[{ required: true, message: '地区不能为空', trigger:['blur','change'] },{ type: 'array', message: '请选择地区' }]"
-                                label-width="0">
-                    <el-cascader @visible-change="listPidDisabled($event,shippingTemplateRuleList.length + index)"
-                                 :options="listPidProvince" clearable :props="props"  collapse-tags
-                                 v-model="item.shippingTemplateRuleAreaList" style="width: 100%;"></el-cascader>
-                  </el-form-item>
+                <td class="spec-table-td" style="text-align: left">
+                  <div class="spec-table-td-link" v-for="(area) in item.shippingTemplateRuleAreaList">{{area.city}}({{area.province}}), </div>
+                  <a @click="setListData(item.shippingTemplateRuleAreaList,item.id)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
                 </td>
                 <td>
                   <el-form-item :prop="`shippingTemplateRuleList2.${index}.remark`"
@@ -116,7 +106,7 @@
               </tr>
             </table>
             <el-col style="margin-top: 10px">
-              <el-button type="primary" size="mini" @click="getListData2">添加地区</el-button>
+              <el-button type="primary" size="mini" @click="getListData2">添加不发货区域</el-button>
             </el-col>
           </el-form>
         </el-form-item>
@@ -136,7 +126,13 @@
       </el-col>
     </el-row>
 
-<!--    <region-list ></region-list>-->
+    <region-list
+      v-if="createShow"
+      :dialog-show="createShow"
+      :data-list="shippingTemplateRuleList"
+      :id="id" :list="list"
+      @close="close"
+    />
   </div>
 </template>
 <script>
@@ -155,6 +151,8 @@ export default {
   components: {RegionList},
   data() {
     return {
+      createShow: false,
+
       listPidProvince: [],//省
       props: {
         multiple: true,
@@ -163,7 +161,8 @@ export default {
         children: 'cityList',
       },
       id: this.$route.query.id,
-      select: false,
+      listId:'',
+      type:'',
       addIng: false,
       readonly: this.$route.name === 'TemplateQuery',
       shippingTemplateRuleList: [],
@@ -204,117 +203,84 @@ export default {
     };
   },
   created() {
-    this.getList()
+    // this.getList()
     if (this.id) {
       getTemplateDetail(this.id).then(res => {
         const {id, title, shippingTemplateRuleList} = res.data
         shippingTemplateRuleList.map(item => {
           item.createPrice = accDiv(item.createPrice, 100)
           item.defaultPrice = accDiv(item.defaultPrice, 100)
-          let data = []
-          item.shippingTemplateRuleAreaList.map(ressage => {
-            data.push([ressage.provinceId, ressage.cityId])
-          })
-          item.shippingTemplateRuleAreaList = data
+        if (item.type == 1){
+          this.shippingTemplateRuleList.push(item)
 
-          if (item.type == 1) {
-            this.shippingTemplateRuleList.push(item)
-          }
-          if (item.type == 2) {
-            this.shippingTemplateRuleList2.push(item)
-          }
+        }else {
+          this.shippingTemplateRuleList2.push(item)
+
+        }
         })
         this.addData = {id, title}
       })
     }
+
   },
   methods: {
-
-    //获取省份
-    getList(reset) {
-      getTreeList().then(res => {
-        if (res.code == 0) {
-          this.listPidProvince = res.data || []
+    // 关闭弹框
+    close(ruleArea) {
+      this.createShow = false;
+      if(ruleArea == undefined){
+        return
+      }
+      if (this.listId == ''){
+        if(this.type == 1){
+          let data = {
+            createNumber: '',
+            createPrice: '',
+            defaultNumber: '',
+            defaultPrice: '',
+            shippingTemplateRuleAreaList: ruleArea,
+            type: 1,
+          }
+          this.shippingTemplateRuleList.push(data);
+        }else {
+          let data = {
+            remark: '',
+            shippingTemplateRuleAreaList: ruleArea,
+            type: 2,
+          }
+          this.shippingTemplateRuleList2.push(data)
         }
-      })
+      }else {
+        let shippingTemplateRuleList = [...this.shippingTemplateRuleList,...this.shippingTemplateRuleList2]
+        shippingTemplateRuleList.map(res=>{
+          if(res.id == this.listId){
+            res.shippingTemplateRuleAreaList = ruleArea
+          }
+        })
+      }
     },
 
     //付费地区
     getListData() {
-      let data = this.shippingTemplateRuleList[this.shippingTemplateRuleList.length - 1] || {}
-      if (data.shippingTemplateRuleAreaList == 1 || data.defaultNumber == '' || data.defaultPrice == '') {
-        this.$message({
-          showClose: true,
-          message: '请输入完整后再添加',
-          type: 'warning'
-        });
-        return
-      }
-      let data2 = {
-        createNumber: '',
-        createPrice: '',
-        defaultNumber: '',
-        defaultPrice: '',
-        shippingTemplateRuleAreaList: 1,
-        type: 1,
-      }
-      this.shippingTemplateRuleList.push(data2)
+      this.listId = ""
+      this.list = null
+      this.type = 1
+      this.createShow = true;
+
     },
 
     //不包邮地区
     getListData2() {
-      let data = this.shippingTemplateRuleList2[this.shippingTemplateRuleList2.length - 1] || {}
-      if (data.shippingTemplateRuleAreaList == 1 || data.remark == '') {
-        this.$message({
-          showClose: true,
-          message: '请输入完整后再添加',
-          type: 'warning'
-        });
-        return
-      }
-      let data2 = {
-        remark: '',
-        shippingTemplateRuleAreaList: 1,
-        type: 2,
-      }
-      this.shippingTemplateRuleList2.push(data2)
+      this.listId = ""
+      this.list = null
+      this.type = 2
+      this.createShow = true;
     },
 
-    listPidDisabled(e, index,) {
-      let shippingTemplateRuleList = [...this.shippingTemplateRuleList, ...this.shippingTemplateRuleList2]
-      if (e) {
-        this.listPidProvince.map(item => {//省
-          item.cityList.map(res => {//市
-            shippingTemplateRuleList.map(listItem => {//列表
-              if (listItem.shippingTemplateRuleAreaList != 1) {
-                listItem.shippingTemplateRuleAreaList.map(listRes => {//列表存在的省市
-                  if (res.areaId == listRes[1]) {
-                    // res.disabled = true
-                    this.$set(res, 'disabled', true)
-                  }
-                })
-              }
-            })
-          })
-        })
-        this.listPidProvince.map(item => {//省
-          item.cityList.map(res => {//市
-            for (let i = 0; i < shippingTemplateRuleList[index].shippingTemplateRuleAreaList.length; i++) {
-              if (res.areaId == shippingTemplateRuleList[index].shippingTemplateRuleAreaList[i][1]) {
-                this.$delete(res, 'disabled',)
-              }
-            }
-          })
-        })
-
-      } else {
-        this.listPidProvince.map(item => {
-          item.cityList.map(res => {
-            // res.disabled = false
-            this.$set(res, 'disabled', false)
-          })
-        })
-      }
+    //编辑
+    setListData(list,id){
+      this.list = list
+      this.listId = id
+      this.createShow = true;
     },
 
     update() {
@@ -336,6 +302,7 @@ export default {
           return;
         }
       });
+
       if (this.addData.title == "") {
         this.$message({
           showClose: true,
@@ -345,7 +312,6 @@ export default {
         return;
       }
 
-      let arr = []
       //判断付费区域
       if (this.shippingTemplateRuleList) {
         for (let i = 0; i < this.shippingTemplateRuleList.length; i++) {
@@ -360,6 +326,7 @@ export default {
           }
         }
       }
+
       //判断不发货区域
       if (this.shippingTemplateRuleList2) {
         for (let i = 0; i < this.shippingTemplateRuleList2.length; i++) {
@@ -375,42 +342,15 @@ export default {
         }
       }
 
-      let shippingTemplateRuleList = [...this.shippingTemplateRuleList, ...this.shippingTemplateRuleList2]
-      shippingTemplateRuleList.map(item => {
-        let ressage = []
-        item.shippingTemplateRuleAreaList.map(res => {
-          let city = ''
-          let province = ''
-          for (let i = 0; i < this.listPidProvince.length; i++) {
-            if (this.listPidProvince[i].areaId == res[0]) {
-              city = this.listPidProvince[i].areaName
-              let cityList = this.listPidProvince[i].cityList
-              for (let j = 0; j < cityList.length; j++) {
-                if (cityList[j].areaId == res[1]) {
-                  province = cityList[j].areaName
-                }
-              }
-            }
-          }
-          res = {
-            provinceId: res[0],
-            cityId: res[1],
-            city: city,
-            province: province,
-          }
-          ressage.push(res)
-        })
-        item.shippingTemplateRuleAreaList = ressage
-        arr.push(item)
-      })
 
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i].type == 1) {
-          arr[i].createPrice = accMul(arr[i].createPrice, 100)
-          arr[i].defaultPrice = accMul(arr[i].defaultPrice, 100)
+      let shippingTemplateRuleList = [...this.shippingTemplateRuleList, ...this.shippingTemplateRuleList2]
+      for (let i = 0; i < shippingTemplateRuleList.length; i++) {
+        if (shippingTemplateRuleList[i].type == 1) {
+          shippingTemplateRuleList[i].createPrice = accMul(shippingTemplateRuleList[i].createPrice, 100)
+          shippingTemplateRuleList[i].defaultPrice = accMul(shippingTemplateRuleList[i].defaultPrice, 100)
         }
       }
-      this.addData.shippingTemplateRuleList = arr
+      this.addData.shippingTemplateRuleList = shippingTemplateRuleList
 
       this.submitForm()
     },
@@ -489,5 +429,18 @@ export default {
       color: red;
     }
   }
+  &-td{
+    text-align: left;
+    &-link{
+      display: inline-block;
+      font-size: 13px;
+      height: 20px;
+      line-height: 20px;
+      margin: 0;padding: 0;
+    }
+  }
+}
+::v-deep .spec-table[data-v-4ba0ac48]{
+  line-height: 20px;
 }
 </style>