Merge branch 'dev' into 'test'

Dev

See merge request quanshu/mp-ui-pc!225

src/api/business/supplier.js

@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+
+// 查询供应商列表
+export function getSupplierList(data) {
+  return request({
+    url: '/api/v1/mp/admin/supplier/list',
+    method: 'post',
+    data,
+  })
+}
+
+// 查询供应商详情
+export function getSupplierDetail(id) {
+  return request({
+    url: `/api/v1/mp/admin/supplier/detail/${id}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}
+
+// 修改供应商信息
+export function setSupplierList(data) {
+  return request({
+    url: '/api/v1/mp/admin/supplier/update',
+    method: 'post',
+    data
+  })
+}
+
+// 新增供应商信息
+export function addSupplierList(data) {
+  return request({
+    url: '/api/v1/mp/admin/supplier/create',
+    method: 'post',
+    data
+  })
+}
+
+// 删除供应商信息
+export function removeSupplierList(id) {
+  return request({
+    url: `/api/v1/mp/admin/supplier/delete/${id}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}

src/views/business/goods/add.vue

@@ -40,6 +40,30 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row :gutter="40" style="width: 500px">
+        <el-col :span="23">
+          <el-form-item label="供应商:" prop="supplerId">
+            <el-select
+              v-model="addData.supplerId"
+              placeholder="请选择供应商"
+              filterable
+              clearable
+            >
+              <el-option :label="item.name" :value="item.id" v-for="(item, index) in SupplierList" :key="index" />
+            </el-select>
+            <a style="margin-left: 20px;color:#3983EF;" @click="handleAdd">添加供应商</a>
+          </el-form-item>
+
+        </el-col>
+      </el-row>
+      <el-row :gutter="40" style="width: 500px">
+        <el-col :span="23">
+          <el-form-item label="商品采购链接:">
+            <el-input v-model="addData.shoppingLink" placeholder="请输入商品采购链接"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
        <el-row :gutter="40" style="width: 500px">
         <el-col :span="23">
           <el-form-item label="商品标签:">
@@ -132,6 +156,11 @@
         <el-button type="primary" @click="updateItem()">保存</el-button>
       </el-col>
     </el-row>
+    <add-supplier
+      v-if="createShow"
+      :dialog-show="createShow"
+      @close="close"
+    />
   </div>
 </template>
 <script>
@@ -141,30 +170,36 @@ import Spec from './components/spec'
 import TinyEditor from '@/components/TinyEditor'
 import { getGoodsDetail, addGoods } from '@/api/business/goods'
 import { goodsCategoryItems } from '@/api/business/category'
+import { getSupplierList } from '@/api/business/supplier'
 import { goodsTagItems } from '@/api/business/tag'
 import { publicFileGetUrl } from "@/api/common"
 import { accDiv, accMul } from '@/utils/util'
+import AddSupplier from "../supplier/components/addSupplier";
 export default {
   components: {
     TinyEditor,
     WangEditor,
     Upload,
-    Spec
+    Spec,
+    AddSupplier
   },
   data() {
     return {
       IMG_URL: publicFileGetUrl,
       id: this.$route.query.id,
       goodsCategoryItemsList: [],
+      SupplierList: [],
       goodsTagItemsList: [],
       addData: {
         multiSku: 0,
         description: ''
       },
+      createShow:false,
       rules: {
         title: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
         picUrl: [{ required: true, message: '请上传商品图片', trigger: 'change' }],
         categoryId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
+        supplerId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
         exchangeShow: [{ required: true, message: '请选择是否支持盲豆兑换', trigger: 'change' }],
         multiSku: [{ required: true, message: '请选择SKU类型', trigger: 'change' }],
         value: [
@@ -215,14 +250,15 @@ export default {
   },
   created() {
     this.getGoodsCategoryItems()
+    this.getSupplierItems()
     this.getGoodsTagItems()
     if (this.id) {
       getGoodsDetail(this.id).then(res => {
-        const { goodsId, title, goodsCode, picUrl,merchantInfo, exchangeShow, multiSku, value, exchangePrice, cost, quantity, description, skuList, categoryId, tagIds } = res.data
+        const { goodsId, title, goodsCode, picUrl,merchantInfo, exchangeShow, multiSku, value, exchangePrice, cost, quantity, description, skuList, categoryId, supplerId, shoppingLink, tagIds } = res.data
         this.addData = {
           value: accDiv(value, 100),
           cost: cost == '' || cost == null ? '' : accDiv(cost, 100),
-          goodsId, title, goodsCode, picUrl,merchantInfo, exchangeShow, multiSku, exchangePrice, quantity, description, skuList, categoryId, tagIds
+          goodsId, title, goodsCode, picUrl,merchantInfo, exchangeShow, multiSku, exchangePrice, quantity, description, skuList, categoryId, supplerId, shoppingLink, tagIds
         }
         if(description) {
           this.$refs.editor.setContent(description)
@@ -241,6 +277,19 @@ export default {
         this.goodsCategoryItemsList = res && res.data
       })
     },
+    //获取供应商
+    getSupplierItems(){
+      getSupplierList({name:""}).then(res => {
+        this.SupplierList = res && res.rows
+      })
+    },
+    handleAdd() {
+      this.createShow = true;
+    },
+    close(){
+      this.createShow = false;
+      this.getSupplierItems()
+    },
     getGoodsTagItems(){
       goodsTagItems({}).then(res => {
         this.goodsTagItemsList = res && res.data

src/views/business/supplier/components/addSupplier.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogShow"
+      width="800px"
+      :before-close="close"
+    >
+      <el-form :model="form" ref="form" :rules="rules" label-width="100px" :inline="true">
+        <el-form-item label="供应商" prop="name">
+          <el-input
+            v-model="form.name"
+            style="width: 240px"
+            size="small"
+            placeholder="请输入供应商公司名称"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="联系人">
+          <el-input
+            v-model.number="form.contact"
+            style="width: 240px"
+            size="small"
+            placeholder="请输入联系人"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码">
+          <el-input
+            v-model.number="form.phone"
+            style="width: 240px"
+            size="small"
+            placeholder="请输入联系人手机号码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            v-model.number="form.remark"
+            style="width: 240px"
+            size="small"
+            placeholder="请输入备注信息"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+
+      <!-- 按钮 -->
+      <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 { getSupplierDetail, setSupplierList, addSupplierList, removeSupplierList} from "@/api/business/supplier";
+export default {
+  props: {
+    // 弹框显示
+    dialogShow: {
+      type: Boolean,
+      default: false,
+    },
+    // ID
+    id: {
+      type:[Number, String],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        type: 'link',
+        sort: 0
+      },
+
+      rules: {
+        name: [
+          { required: true, message: "请输入供应商名称", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    title() {
+      return this.id ? '编辑供应商' : '添加供应商';
+    },
+  },
+  created() {
+    if(this.id){
+      getSupplierDetail(this.id).then(res => {
+        const { name, phone, contact, remark} = res.data
+        this.form = { name, phone, contact, remark}
+      })
+    }
+  },
+  methods: {
+    // 关闭弹框
+    close() {
+      this.$emit("close");
+      this.loading = false;
+      this.$refs["form"].resetFields();
+    },
+
+    // 确认
+    saveClick() {
+      this.loading = true;
+      const subForm = this.$refs["form"];
+      subForm.validate((valid) => {
+        if (valid) {
+          this.submitForm(this.form);
+        } else {
+          this.loading = false;
+          return false;
+        }
+      });
+    },
+
+    // 提交
+    submitForm(form) {
+      let data = {
+        ... form,
+      };
+      let request = this.id ? setSupplierList : addSupplierList
+      if(this.id){
+        data.id = this.id
+      }
+      request(data)
+        .then((res) => {
+          if (res.code == 0) {
+            this.msgSuccess(this.id ? "修改成功" : '添加成功');
+            this.close();
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+<style scoped>
+.channel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tip {
+  font-size: 12px;
+  color: #999;
+}
+</style>

src/views/business/supplier/components/seeSupplier.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-dialog
+      title="查看供应商"
+      :visible.sync="dialogShow"
+      width="800px"
+      :before-close="seeClose"
+    >
+      <el-form :model="form" ref="form"  label-width="100px" :inline="true">
+        <el-form-item label="供应商:">
+          <span v-model="form.name" style="width: 240px; display: inline-block"> {{form.name}}</span>
+        </el-form-item>
+        <el-form-item label="联系人:">
+          <span v-model="form.contact" style="width: 240px; display: inline-block"> {{form.contact}}</span>
+        </el-form-item>
+        <el-form-item label="手机号码:">
+          <span v-model="form.phone" style="width: 240px; display: inline-block"> {{form.phone}}</span>
+        </el-form-item>
+        <el-form-item label="备注:">
+          <span v-model="form.remark" style="width: 240px; display: inline-block"> {{form.remark}}</span>
+        </el-form-item>
+      </el-form>
+      <!-- 按钮 -->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="seeClose">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getSupplierDetail } from "@/api/business/supplier";
+export default {
+  props: {
+    // 弹框显示
+    dialogShow: {
+      type: Boolean,
+      default: false,
+    },
+    // ID
+    id: {
+      type:[Number, String],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      form: {},
+    };
+  },
+  created() {
+    if(this.id){
+      getSupplierDetail(this.id).then(res => {
+        const { name, phone, contact, remark} = res.data
+        this.form = { name, phone, contact, remark}
+      })
+    }
+  },
+  methods: {
+    // 关闭弹框
+    seeClose() {
+      this.$emit("seeClose");
+      this.loading = false;
+    },
+  },
+};
+</script>
+<style scoped>
+.channel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tip {
+  font-size: 12px;
+  color: #999;
+}
+</style>

src/views/business/supplier/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="90px" >
+      <el-form-item label="供应商名称">
+        <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @clear="queryParams.pageNum = 1;getList()"  @keyup.enter.native="queryParams.pageNum = 1;getList()"></el-input>
+      </el-form-item>
+      <el-form-item >
+        <el-input v-show="false" />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="getList()"
+        >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+        >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['business:supplier:add']"
+        >添加供应商</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList()"
+      ></right-toolbar>
+    </el-row>
+    <!-- 列表 -->
+    <el-table ref="table" v-loading="loading" :data="list">
+      <el-table-column label="供应商编号" prop="id" />
+      <el-table-column label="供应商名称" prop="name" />
+      <el-table-column label="联系人" prop="contact" />
+      <el-table-column label="手机号码" prop="phone" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{ row }">
+          <div>
+            <el-button
+              v-hasPermi="['business:supplier:query']"
+              type="text"
+              @click="seeEdit(row)"
+            >查看</el-button
+            >
+            <el-button
+              v-hasPermi="['business:supplier:edit']"
+              type="text"
+              @click="edit(row)"
+            >编辑</el-button
+            >
+            <el-button
+              v-hasPermi="['business:supplier:remove']"
+              type="text"
+              class="del"
+              @click="del(row)"
+            >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="pageParams.pageNum"
+      :limit.sync="pageParams.pageSize"
+      @pagination="getList"
+    />
+
+    <add-supplier
+      v-if="createShow"
+      :dialog-show="createShow"
+      :id="id"
+      @close="close"
+    />
+    <see-supplier
+      v-if="seeShow"
+      :dialog-show="seeShow"
+      :id="id"
+      @seeClose="seeClose"
+    />
+  </div>
+</template>
+<script>
+import { getSupplierList, removeSupplierList } from "@/api/business/supplier";
+import AddSupplier from "./components/addSupplier";
+import SeeSupplier from "./components/seeSupplier"
+export default {
+  name: "ListBanner",
+  components: {
+    AddSupplier,
+    SeeSupplier,
+  },
+  data() {
+    return {
+      loading: false,
+      showSearch: true,
+      queryParams: {
+        name:"",
+      },
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 总条数
+      total: 0,
+      list: [],
+      createShow: false,
+      seeShow: false,
+      id: '',
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+
+    getList() {
+      this.loading = true;
+      let data = {
+        name:this.queryParams.name
+      }
+      getSupplierList(data,
+        "pageNum=" +
+        this.pageParams.pageNum +
+        "&pageSize=" +
+        this.pageParams.pageSize
+      )
+        .then((res) => {
+          this.loading = false;
+          if (res.code == 0) {
+            this.total = res.total;
+            this.list = res.rows;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    edit(item) {
+      this.id = item.id;
+      this.createShow = true;
+    },
+
+    seeEdit(item) {
+      this.id = item.id;
+      this.seeShow = true;
+    },
+
+
+    del(item) {
+      this.$confirm(`确认删除供应商 “${item.name}” 吗？`, "删除供应商", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        removeSupplierList(item.id).then((res) => {
+          if (res.code === 0) {
+            this.$message.success("操作已完成！");
+            this.getList();
+          }
+        });
+      });
+    },
+
+    // 重置
+    resetQuery() {
+      this.queryParams = {};
+      this.pageParams.pageNum = 1
+      this.getList();
+    },
+
+    handleAdd() {
+      this.createShow = true;
+    },
+
+    // 关闭弹框
+    close() {
+      this.createShow = false;
+      this.id = "";
+      this.getList();
+    },
+
+    seeClose() {
+      this.seeShow = false;
+    }
+  },
+};
+</script>
+<style>
+</style>

src/views/business/ticket/components/GoodsAdd.vue

@@ -13,9 +13,16 @@
           placeholder="请输入商品名称"
           clearable
           size="small"
-          style="width: 240px"
+          style="width: 220px"
           @keyup.enter.native="getGoodsList()"
         />
+        <div style="margin-left: 20px">商品价格：</div>
+<!--        <el-input v-model="minValue" placeholder="最低价格" clearable @keyup.enter.native="pageParams.pageNum = 1;getList()" />-->
+        <el-input style="width: 220px" v-model="queryParams.minValue" placeholder="最低价格" clearable @keyup.enter.native="getGoodsList()"/>
+        <div style="width: 20px;text-align: center">-</div>
+<!--        <el-input v-model="maxValue" placeholder="最高价格" clearable @keyup.enter.native="pageParams.pageNum = 1;getList()" />-->
+        <el-input style="width: 220px" v-model="queryParams.maxValue" placeholder="最高价格" clearable @keyup.enter.native="getGoodsList()"/>
+
         <div class="ge"></div>
         <el-button
           type="primary"
@@ -80,6 +87,7 @@
 <script>
 import { publicFileGetUrl } from "@/api/common";
 import { getGoodsList } from "@/api/business/goods";
+import { accMul } from '@/utils/util'
 export default {
   name: "GoodsAdd",
   props: {
@@ -92,6 +100,8 @@ export default {
     return {
       loading: false,
       goodsTitle: "", // 商品名称
+      queryParams:{},
+
       goodsList: [], // 商品列表
       goodsTotal: 0, // 商品总数
       selectGoodsList: [], // 选中商品
@@ -114,7 +124,7 @@ export default {
           "&pageSize=" +
           this.pageParams.pageSize +
           "&",
-        { title: this.goodsTitle, status: "on" }
+        { title: this.goodsTitle,  status: "on", minValue: accMul(this.queryParams.minValue, 100), maxValue: accMul(this.queryParams.maxValue, 100),}
       ).then((res) => {
         this.goodsList = res.rows.map((item) => {
           return {
@@ -158,7 +168,7 @@ export default {
   line-height: 32px;
   margin-bottom: 20px;
   .ge {
-    width: 40px;
+    width: 20px;
   }
 }
 .dialog-btn {
@@ -167,7 +177,7 @@ export default {
   justify-content: flex-end;
   padding: 40px 0 0;
   .ge {
-    width: 40px;
+    width: 20px;
   }
 }
-</style>
+</style>

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>
-

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>