运费模板

src/views/setting/template/create.vue

@@ -2,84 +2,115 @@
   <div class="app-container coupon-add">
     <br>
     <el-row>
+      <!-- 模板名称部分 -->
       <el-form ref="addItem" :model="addData" :rules="rules" label-width="120px">
         <el-form-item label="模板名称:" prop="title">
           <el-input v-model="addData.title" :readonly="readonly" placeholder="请输入模板名称" :maxlength="32" show-word-limit style="width: 500px;"/>
         </el-form-item>
         <br>
       </el-form>
+      <!-- 买家付费地区 -->
+      <el-form label-width="120px">
+        <el-form-item label="买家付费区域:">
+          <el-form ref="addItemTwo" :model="{shippingTemplateRuleList}" label-width="120px">
+            <table style="width: 75%"  bordercolor="#ccc" border="1" cellpadding="0" cellspacing="0"  class="spec-table">
+              <tr>
+                <th>付费区域</th>
+                <th>首件（个）</th>
+                <th>运费（元）</th>
+                <th>续件（个）</th>
+                <th>续费（元）</th>
+                <th>操作</th>
+              </tr>
+              <tr v-if="shippingTemplateRuleList == ''">
+                <td colspan="6">
+                  暂无数据
+                </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%">
+                    <el-cascader @visible-change="listPidDisabled($event,index)" ref="cascaderAdd" :options="listPidProvince" clearable :props="props" v-model="item.shippingTemplateRuleAreaList" style="" ></el-cascader>
+                  </el-form-item>
+                </td>
+                <td>
+                  <el-form-item :prop="`shippingTemplateRuleList.${index}.defaultNumber`" :rules='[{ required: true, message: "件数不能为空", trigger: "blur" },{ pattern: /^([1-9]\d*)$/, message: "请输入正确的件数", trigger: ["blur", "change"]}]' label-width="0">
+                    <el-input v-model="item.defaultNumber" placeholder="请输入内容"></el-input>
+                  </el-form-item>
+                </td>
+                <td>
+                  <el-form-item :prop="`shippingTemplateRuleList.${index}.defaultPrice`" :rules="[{ required: true, message: '运费不能为空', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: '请输入正确的金额，最多两位小数', trigger: ['blur', 'change'] }]" label-width="0">
+                    <el-input v-model="item.defaultPrice" placeholder="请输入内容"></el-input>
+                  </el-form-item>
+                </td>
+                <td>
+                  <el-form-item :prop="`shippingTemplateRuleList.${index}.createNumber`" :rules='[{ required: true, message: "件数不能为空", trigger: "blur" },{ pattern: /^([1-9]\d*)$/, message: "请输入正确的件数", trigger: ["blur", "change"]}]' label-width="0">
+                    <el-input v-model="item.createNumber" placeholder="请输入内容"></el-input>
+                  </el-form-item>
+                </td>
+                <td>
+                  <el-form-item :prop="`shippingTemplateRuleList.${index}.createPrice`" :rules="[{ required: true, message: '运费不能为空', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: '请输入正确的金额，最多两位小数', trigger: ['blur', 'change'] }]" label-width="0">
+                    <el-input v-model="item.createPrice" placeholder="请输入内容"></el-input>
+                  </el-form-item>
+                </td>
+                <td>
+                  <el-button  type="text" @click="delRow(item)">删除</el-button>
+                </td>
+              </tr>
+            </table>
+            <el-col style="margin-top: 10px">
+              <el-button type="primary" size="mini" @click="getListData">添加地区</el-button>
+            </el-col>
 
-      <el-form ref="addItem" :model="addData" label-width="120px">
-        <el-form-item label="买家付费地区:" style="width: 75%">
-          <el-table :data="shippingTemplateRuleList" border style="width: 100%">
-            <el-table-column prop="shippingTemplateRuleAreaList" label="付费区域"  width="280%" @click="getList">
-              <template slot-scope="{row,$index}">
-                <el-cascader @visible-change="listPidDisabled($event,$index)" ref="cascaderAdd" :options="listPidProvince" clearable :props="props" v-model="row.shippingTemplateRuleAreaList"></el-cascader>
-              </template>
-            </el-table-column>
-            <el-table-column prop="defaultNumber" label="首件（个）">
-              <template slot-scope="{row,$index}">
-                  <el-input v-model="row.defaultNumber" placeholder="请输入内容"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column prop="defaultPrice" label="运费（元）">
-              <template slot-scope="{row}">
-                <el-input v-model="row.defaultPrice" placeholder="请输入内容"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column prop="createNumber" label="续件（个）">
-              <template slot-scope="{row}">
-                <el-input v-model="row.createNumber" placeholder="请输入内容"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column prop="createPrice" label="续费（元）">
-              <template slot-scope="{row}">
-                <el-input v-model="row.createPrice" placeholder="请输入内容"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作"  width="170%">
-              <template slot-scope="{row}">
-                <el-button  type="text" @click="delRow(row)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-col style="margin-top: 10px">
-            <el-button type="primary" size="mini" @click="getListData">添加地区</el-button>
-          </el-col>
+          </el-form>
         </el-form-item>
       </el-form>
-      <br>
-      <br>
-      <el-form ref="form" :model="addData" label-width="120px">
-        <el-form-item label="不发货地区:"   style="width: 75%">
-          <el-table :data="shippingTemplateRuleList2" border style="width: 100%">
-            <el-table-column prop="shippingTemplateRuleAreaList" label="不发货区域" >
-              <template slot-scope="{row,$index}">
-                <el-cascader @visible-change="listPidDisabled($event,shippingTemplateRuleList.length+$index)" :options="listPidProvince" clearable :props="props" v-model="row.shippingTemplateRuleAreaList"></el-cascader>
-              </template>
-            </el-table-column>
-            <el-table-column prop="remark" label="原因" >
-              <template slot-scope="{row}">
-                <el-input v-model="row.remark" placeholder="请输入内容"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="170%">
-              <template slot-scope="{row}">
-                <el-button  type="text" @click="delRowTwo(row)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-col style="margin-top: 10px">
-            <el-button type="primary" size="mini" @click="getListData2">添加地区</el-button>
-          </el-col>
+
+      <!-- 不发货地区 -->
+      <el-form label-width="120px">
+        <el-form-item label="不发货区域:">
+          <el-form ref="addItemThree" :model="{shippingTemplateRuleList2}" label-width="120px">
+            <table style="width: 75%"  bordercolor="#ccc" border="1" cellpadding="0" cellspacing="0"  class="spec-table">
+              <tr>
+                <th>不发货区域</th>
+                <th>原因</th>
+                <th>操作</th>
+              </tr>
+              <tr v-if="shippingTemplateRuleList2 == ''">
+                <td colspan="3">
+                  暂无数据
+                </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: '请选择地区' }]">
+                    <el-cascader @visible-change="listPidDisabled($event,shippingTemplateRuleList.length + index)" :options="listPidProvince" clearable :props="props" v-model="item.shippingTemplateRuleAreaList"></el-cascader>
+                  </el-form-item>
+                </td>
+                <td>
+                  <el-form-item :prop="`shippingTemplateRuleList2.${index}.remark`" :rules="{ required: true, message: '原因不能为空', trigger: 'blur' }">
+                    <el-input v-model="item.remark" placeholder="请输入内容"></el-input>
+                  </el-form-item>
+                </td>
+                <td>
+                  <el-button  type="text" @click="delRowTwo(item)">删除</el-button>
+                </td>
+              </tr>
+            </table>
+            <el-col style="margin-top: 10px">
+              <el-button type="primary" size="mini" @click="getListData2">添加地区</el-button>
+            </el-col>
+          </el-form>
         </el-form-item>
+      </el-form>
 
-        <br>
+      <el-form label-width="120px">
         <el-form-item label="包邮地区:" >
           除以上地区外均为包邮地区
         </el-form-item>
       </el-form>
     </el-row>
+
     <el-row v-if="!readonly">
       <el-col :span="23" style="text-align: right">
         <el-button type="info" @click="$router.go(-1)">取消</el-button>
@@ -266,53 +297,79 @@ export default {
       this.$refs['addItem'].validate((valid) => {
         if (valid) {
         } else {
-          // this.$message.error('请输入模板名称');
-          return false;
+          return;
+        }
+      });
+      this.$refs['addItemTwo'].validate((valid) => {
+        if (valid) {
+        } else {
+          return;
+        }
+      });
+      this.$refs['addItemThree'].validate((valid) => {
+        if (valid) {
+        } else {
+          return;
         }
       });
 
       let arr = []
       if (this.shippingTemplateRuleList){
+        for (let i = 0; i < this.shippingTemplateRuleList.length; i++) {
+          let item = this.shippingTemplateRuleList[i]
+          if(item.shippingTemplateRuleAreaList == 1 || item.createNumber == '' || item.createPrice == '' || item.defaultNumber == '' || item.defaultPrice == ''){
+            this.$message({
+              showClose: true,
+              message: '请输入完整后再保存',
+              type: 'warning'
+            });
+            return
+          }
+        }
         this.shippingTemplateRuleList.map(item =>{
           let ressage = []
-
-          if(item.shippingTemplateRuleAreaList != 1 && item.createNumber != '' && item.createPrice != '' && item.defaultNumber != '' && item.defaultPrice != ''){
-              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
-                      }
-                    }
+          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
-            item.createPrice = accMul(item.createPrice,100)
-            item.defaultPrice = accMul(item.defaultPrice,100)
-            arr.push(item)
-          }
+              }
+            }
+            res = {
+              provinceId:res[0],
+              cityId:res[1],
+              city:city,
+              province:province,
+            }
+            ressage.push(res)
+          })
+          item.shippingTemplateRuleAreaList = ressage
+          item.createPrice = accMul(item.createPrice,100)
+          item.defaultPrice = accMul(item.defaultPrice,100)
+          arr.push(item)
         })
       }
-
       if(this.shippingTemplateRuleList2){
+        for (let i = 0; i < this.shippingTemplateRuleList2.length; i++) {
+          let item = this.shippingTemplateRuleList2[i]
+          if(item.shippingTemplateRuleAreaList == 1 || item.remark == ''){
+            this.$message({
+              showClose: true,
+              message: '请输入完整后再保存',
+              type: 'warning'
+            });
+            return
+          }
+        }
         this.shippingTemplateRuleList2.map(item =>{
           let ressage = []
-          if(item.shippingTemplateRuleAreaList != [] && item.remark != ''){
-
             item.shippingTemplateRuleAreaList.map(res=>{
               let city = ''
               let province = ''
@@ -337,12 +394,12 @@ export default {
             })
             item.shippingTemplateRuleAreaList = ressage
             arr.push(item)
-          }
         })
       }
-
       this.addData.shippingTemplateRuleList = arr
-
+      this.submitForm()
+    },
+    submitForm(){
       if (this.id){
         setTemplateDetail(this.addData).then(res=>{
           if (res.code === 0) {
@@ -351,9 +408,10 @@ export default {
               type: 'success'
             })
           }
+          this.$store.dispatch('tagsView/delView', this.$route)
+          this.$router.go(-1)
         })
-        this.$store.dispatch('tagsView/delView', this.$route)
-        this.$router.go(-1)
+
       }else {
         addTemplateList(this.addData).then(res=>{
           if (res.code === 0) {
@@ -361,13 +419,14 @@ export default {
               message: '添加成功!',
               type: 'success'
             })
+            this.$store.dispatch('tagsView/delView', this.$route)
+            this.$router.go(-1)
           }
-          this.$store.dispatch('tagsView/delView', this.$route)
-          this.$router.go(-1)
         })
       }
-
     },
+
+
     delRow(row){
       for (let i = 0; i < this.shippingTemplateRuleList.length; i++) {
         if(this.shippingTemplateRuleList[i] == row){
@@ -386,5 +445,32 @@ export default {
   },
 };
 </script>
-<style>
+<style lang="scss" scoped>
+.spec-table {
+  border-collapse: collapse;
+  width: 100%;
+  line-height: 32px;
+  color: #606266;
+  font-size: 14px;
+th {
+  background-color: #ECECEC;
+}
+td {
+  text-align: center;
+}
+.pd {
+  padding: 15px;
+}
+.required {
+  position: relative;
+span {
+  position: relative;
+  top: -6px;
+  left: 2px;
+  font-size: 10px;
+  color: red;
+}
+}
+
+}
 </style>