新增运费模板

src/api/setting/template.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 省市列表
+export function getTreeList() {
+  return request({
+    url: '/api/v1/mp/admin/area/tree/list',
+    method: 'post',
+  })
+}
+
+// 运费模板列表
+export function getTemplateList() {
+  return request({
+    url: '/api/v1/mp/admin/shipping/template/list',
+    method: 'post',
+  })
+}
+
+// 创建运费模板
+export function addTemplateList(data) {
+  return request({
+    url: '/api/v1/mp/admin/shipping/template/create',
+    method: 'post',
+    data
+  })
+}
+
+//运费模板详情
+export function getTemplateDetail(id) {
+  return request({
+    url: `/api/v1/mp/admin/shipping/template/detail/${id}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}
+
+//编辑
+export function setTemplateDetail(data) {
+  return request({
+    url: '/api/v1/mp/admin/shipping/template/update',
+    method: 'post',
+    data
+  })
+}

src/views/setting/template/components/regionList.vue

@@ -0,0 +1,90 @@
+<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%;">
+
+          <el-cascader :options="listPidProvince" clearable :props="props" v-model="pidData"></el-cascader>
+        </el-form-item>
+
+      </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>
+</template>
+<script>
+import { getTemplateList, } from "@/api/setting/template";
+import { publicFileGetUrl } from "@/api/common"
+import { listAreaByPid} from "@/api/admin/area";
+export default {
+  name: "regionList",
+  props: {
+    value: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      props:{
+        multiple: true,
+        value:'areaId',
+        label:'areaName',
+        children:'cityList',
+      },
+      IMG_URL: publicFileGetUrl,
+      selectShow: false,
+      listPidProvince:[],//省
+      pidData:[],
+      shippingTemplateRuleAreaList:{
+          city: '',//市
+          cityId: '',//市id
+          province: '',//省
+          provinceId: '',//省id
+        },
+    }
+  },
+  methods: {
+    show() {
+      this.getList(true)
+      this.selectShow = true
+    },
+    getList(reset) {
+      getTemplateList().then(res =>{
+        if(res.code == 0){
+          this.listPidProvince = res.data || []
+        }
+      })
+
+    },
+    getCityList(){
+      getTemplateList().then(res =>{
+        if(res.code == 0){
+          this.listPidProvince = res.data || []
+        }
+      })
+    },
+
+
+
+    update() {
+      console.log(this.pidData)
+      // this.$emit('input', this.shippingTemplateRuleAreaList)
+      this.selectShow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ygp-form-items {
+.el-form-item {
+  padding: 0 15px;
+
+}
+}
+</style>
+

src/views/setting/template/create.vue

@@ -1,13 +1,356 @@
 <template>
-  <div></div>
+  <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-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}">
+                <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>
+          <el-col style="margin-top: 10px">
+            <el-button type="primary" size="mini" @click="getListData">添加地区</el-button>
+          </el-col>
+        </el-form-item>
+        <br>
+        <br>
+      </el-form>
+      <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>
+          <el-col style="margin-top: 10px">
+            <el-button type="primary" size="mini" @click="getListData2">添加地区</el-button>
+          </el-col>
+        </el-form-item>
+
+        <br>
+        <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>
+        <el-button :loading="addIng" type="primary" @click="update()">保存</el-button>
+      </el-col>
+    </el-row>
+
+  </div>
 </template>
 <script>
+import RegionList from "./components/regionList";
+import { getTemplateList, addTemplateList, getTreeList, getTemplateDetail, setTemplateDetail} from "@/api/setting/template";
+import { accDiv, accMul } from '@/utils/util'
 export default {
+  components: {RegionList},
   data() {
-    return {};
+    return {
+      listPidProvince:[],//省
+      props:{
+        multiple: true,
+        value:'areaId',
+        label:'areaName',
+        children:'cityList',
+      },
+      id: this.$route.query.id,
+      select:false,
+      addIng: false,
+      readonly: this.$route.name === 'TemplateQuery',
+      shippingTemplateRuleList:[],
+      shippingTemplateRuleList2:[],
+      addData:{
+        title:'',
+        shippingTemplateRuleList:[
+          {
+            createNumber: '',//新增数量
+            createPrice: '',//新增价格
+            defaultNumber: '',//默认数量
+            defaultPrice: '',//默认价格
+            type: '',//类型 1发货 2不发货
+            shippingTemplateRuleAreaList:[
+              {
+                city: '',//市
+                cityId: '',//市id
+                province: '',//省
+                provinceId: '',//省id
+                remark:'不发货备注',
+              },{
+                city: '',//市
+                cityId: '',//市id
+                province: '',//省
+                provinceId: '',//省id
+                remark:'不发货备注',
+              },{
+
+              }
+            ],
+          },
+        ],
+      },
+      //运费相关区域列表
+      listPid:[],
+
+      rules: {
+        title: [{ required: true, message: '请输入模板名称', trigger: 'blur' }]
+      }
+    };
+  },
+  created() {
+    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 == 2){
+            this.shippingTemplateRuleList2.push(item)
+          }
+        })
+        this.addData = {id, title}
+      })
+    }
+  },
+  methods: {
+
+    //获取省份
+    getList(reset) {
+      getTreeList().then(res => {
+        if (res.code == 0) {
+          this.listPidProvince = res.data || []
+        }
+      })
+    },
+
+    //付费地区
+    getListData(){
+      let data = this.shippingTemplateRuleList[this.shippingTemplateRuleList.length-1] || {}
+      if(data.shippingTemplateRuleAreaList == 1 ||data.createNumber == '' || data.createPrice == '' || 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)
+    },
+
+    //不包邮地区
+    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)
+    },
+
+    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() {
+      if(this.addData.title.trim() == ""){
+        this.$message.error('请输入模板名称');
+        return
+      }
+      let arr = []
+      if (this.shippingTemplateRuleList){
+        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
+                      }
+                    }
+                  }
+                }
+                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){
+        this.shippingTemplateRuleList2.map(item =>{
+          let ressage = []
+          if(item.shippingTemplateRuleAreaList != [] && item.remark != ''){
+
+            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 = res
+            })
+            item.shippingTemplateRuleAreaList = ressage
+            arr.push(item)
+          }
+        })
+      }
+
+      this.addData.shippingTemplateRuleList = arr
+
+      if (this.id){
+        setTemplateDetail(this.addData).then(res=>{
+          if (res.code === 0) {
+            this.$message({
+              message: '修改成功!',
+              type: 'success'
+            })
+          }
+        })
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      }else {
+        addTemplateList(this.addData).then(res=>{
+          if (res.code === 0) {
+            this.$message({
+              message: '添加成功!',
+              type: 'success'
+            })
+          }
+          this.$store.dispatch('tagsView/delView', this.$route)
+          this.$router.go(-1)
+        })
+      }
+
+    }
   },
-  methods: {},
 };
 </script>
 <style>
-</style>
+</style>

src/views/setting/template/index.vue

@@ -1,16 +1,80 @@
 <template>
-  <div>
-      <el-button @click="$router.push({ name: 'TemplateCreate' })">添加</el-button>
-      <el-button @click="$router.push({ name: 'templateEdit' })">修改</el-button>
+  <div class="app-container coupon-list">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="10">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="$router.push({ name: 'TemplateCreate' })"
+          v-hasPermi="['setting:template:add']"
+        >添加运费模板</el-button>
+      </el-col>
+    </el-row>
+    <el-table v-loading="loading" :data="tableData">
+      <el-table-column label="模板编号" prop="id" width="280" />
+      <el-table-column label="模板名称" prop="title" />
+      <el-table-column fixed="right" align="right" label="操作" width="150">
+        <template slot-scope="{row}">
+          <el-button v-hasPermi="['setting:template:edit']" type="text" @click="$router.push({ name: 'templateEdit', query: { id: row.id } })">编辑</el-button>
+          <el-button v-if="1 === 1" v-hasPermi="['setting:template:remove']" class="del" type="text" @click="del(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 <script>
+import { getTemplateList, delTemplate } from '@/api/business/template'
+
 export default {
   data() {
-    return {};
+    return {
+      loading: false,
+      queryParams: {},
+      tableData: [],
+      total: 0
+    };
+  },
+  created() {
+    this.getList(true)
+  },
+  methods: {
+    getList(reset) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      if (reset) {
+        this.queryParams = { pageNum: 1, pageSize: 20 }
+      }
+      getTemplateList('pageNum='+this.queryParams.pageNum + '&pageSize='+this.queryParams.pageSize+'&', this.queryParams).then(res => {
+        this.loading = false
+        if (res.code === 0) {
+          this.tableData = res.rows
+          // this.total = res.total
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+
+    del(item) {
+      this.$confirm(`确认删除券 “${item.title}” 吗？`, '删除券', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delTemplate(item.id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('操作已完成！')
+            this.getList()
+          }
+        })
+      })
+    },
+
   },
-  methods: {},
 };
 </script>
 <style>
-</style>
+</style>