From cbe6195212be40ac74e6c5b5cd40e2fa21a2eda6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9D=E8=A8=80=E5=AD=9F?= <1656307454@qq.com>
Date: Tue, 19 Mar 2024 00:46:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E3=80=81=E7=BC=96=E8=BE=91=E5=95=86=E5=93=81=20=E9=94=80?=
 =?UTF-8?q?=E5=94=AE=E5=8C=BA=E5=9F=9F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dataCenter/goods/Create.vue | 179 +++++++++++++++++++++++++-
 src/views/dataCenter/goods/Update.vue | 170 ++++++++++++++++++++++--
 2 files changed, 335 insertions(+), 14 deletions(-)

diff --git a/src/views/dataCenter/goods/Create.vue b/src/views/dataCenter/goods/Create.vue
index 1360f69..38ae47a 100644
--- a/src/views/dataCenter/goods/Create.vue
+++ b/src/views/dataCenter/goods/Create.vue
@@ -324,6 +324,44 @@
               <a-input-number v-decorator="['sales_initial', { initialValue: 0}]" />
             </a-form-item>
 
+            <div >
+              <a-divider orientation="left">销售区域</a-divider>
+              <a-form-item label="销售区域" :labelCol="labelCol" :wrapperCol="{ span: 15 }">
+                <a-table
+                  v-show="ruleList.length"
+                  class="table-rules"
+                  :columns="columns"
+                  :dataSource="ruleList"
+                  :pagination="false"
+                  bordered
+                >
+                  <!-- 销售区域 -->
+                  <template slot="region_text" slot-scope="text, item, index">
+                    <p class="content">
+                      <span v-for="(province, pidx) in text" :key="pidx">
+                        <span>{{ province.name }}</span>
+                        <template v-if="province.citys.length">
+                          <span>(</span>
+                          <span
+                            class="city-name"
+                            v-for="(city, cidx) in province.citys"
+                            :key="cidx"
+                          >{{ city.name }}{{ province.citys.length > cidx + 1 ? '、': '' }}</span>
+                          <span>)</span>
+                        </template>
+                        <span>{{ ' ' }}</span>
+                      </span>
+                    </p>
+                    <p class="operation">
+                      <a href="javascript:void(0);" class="edit" @click="handleEdit(index, item)">编辑</a>
+                      <a href="javascript:void(0);" class="delete" @click="handleDelete(index)">删除</a>
+                    </p>
+                  </template>
+                </a-table>
+                <a-button icon="environment" @click="handleAdd">点击添加销售区域</a-button>
+              </a-form-item>
+            </div>
+
             <div >
               <a-divider orientation="left">积分设置</a-divider>
               <a-form-item
@@ -450,6 +488,8 @@
           <a-button type="primary" html-type="submit" :loading="isBtnLoading">提交</a-button>
         </a-form-item>
       </a-form>
+
+      <AreasModal ref="AreasModal" @handleSubmit="handleAreaSubmit" />
     </a-spin>
   </a-card>
 </template>
@@ -459,6 +499,18 @@ import * as GoodsApi from '@/api/goods'
 import { SelectImage, SelectVideo, Ueditor, InputNumberGroup } from '@/components'
 import GoodsModel from '@/common/model/goods/Index'
 import { GoodsType, MultiSpec } from './modules'
+import { AreasModal } from '@/components/Modal'
+import Region from '@/common/model/Region'
+
+const defaultItem = {
+  key: 0,
+  // first: 1,
+  // first_fee: 0,
+  // additional: 0,
+  // additional_fee: 0,
+  region: [],
+  region_text: []
+}
 
 export default {
   components: {
@@ -467,7 +519,8 @@ export default {
     SelectVideo,
     Ueditor,
     InputNumberGroup,
-    MultiSpec
+    MultiSpec,
+    AreasModal
   },
   data () {
     return {
@@ -483,7 +536,42 @@ export default {
       // 当前表单元素
       form: this.$form.createForm(this),
       // 表单数据
-      formData: GoodsModel.formData
+      formData: GoodsModel.formData,
+
+      columns: [
+        {
+          title: '销售区域',
+          dataIndex: 'region_text',
+          width: '400px',
+          scopedSlots: { customRender: 'region_text' }
+        }
+        // {
+        //   title: '首件 (个)',
+        //   dataIndex: 'first',
+        //   scopedSlots: { customRender: 'first' }
+        // },
+        // {
+        //   title: '运费(元)',
+        //   dataIndex: 'first_fee',
+        //   scopedSlots: { customRender: 'first_fee' }
+        // },
+        // {
+        //   title: '续件 (个)',
+        //   dataIndex: 'additional',
+        //   scopedSlots: { customRender: 'additional' }
+        // },
+        // {
+        //   title: '续费(元)',
+        //   dataIndex: 'additional_fee',
+        //   scopedSlots: { customRender: 'additional_fee' }
+        // }
+      ],
+      // table内容
+      ruleList: [],
+      // 计费方式
+      method: 10,
+      // 城市总数
+      citysCount: null
     }
   },
   // 初始化数据
@@ -494,6 +582,11 @@ export default {
       .then(() => {
         this.isLoading = false
       })
+
+    // 城市总数
+    Region.getCitysCount().then(count => {
+      this.citysCount = count
+    })
   },
   methods: {
 
@@ -540,7 +633,8 @@ export default {
     handleSubmit (e) {
       e.preventDefault()
       // 表单验证
-      const { form: { validateFields } } = this
+      console.log(this.form)
+      const { form: { validateFields }, ruleList } = this
       validateFields((errors, values) => {
         // 定位到错误的tab选项卡
         if (errors) {
@@ -561,6 +655,7 @@ export default {
         values.categoryIds = values.categorys.map(item => item.value)
         delete values.categorys
         // 提交到后端api
+        values.rules = ruleList
         this.onFormSubmit(values)
         return true
       })
@@ -602,6 +697,67 @@ export default {
           this.isBtnLoading = false
         })
         .finally(() => this.isLoading = false)
+    },
+
+    // 新增记录
+    handleAdd () {
+      const index = this.ruleList.length
+      const newItem = { ...defaultItem, key: index }
+      // 排除的城市id集(已存在的城市id集)
+      const excludedCityIds = this.getExcludedCityIds()
+      if (excludedCityIds.length === this.citysCount) {
+        this.$message.error('已选择了所有的区域', 0.8)
+        return false
+      }
+      // 显示选择地区对话框
+      this.handleAreasModal('add', index, newItem, excludedCityIds)
+    },
+
+    // 编辑记录
+    handleEdit (index, item) {
+      // 排除的城市id集(已存在的城市id集)
+      const excludedCityIds = this.getExcludedCityIds()
+      // 显示选择地区对话框
+      this.handleAreasModal('edit', index, item, excludedCityIds)
+    },
+
+    // 选择地区后的回调
+    handleAreaSubmit (result) {
+      console.log(JSON.stringify(this.ruleList))
+      const { custom: { scene, item } } = result
+      item.region = result.selectedCityIds
+      item.region_text = result.selectedText
+      if (scene === 'add') {
+        this.ruleList.push(item)
+      }
+    },
+
+    // 排除的城市id集(已存在的城市id集)
+    getExcludedCityIds () {
+      const excludedCityIds = []
+      this.ruleList.forEach(item => {
+        item.region.forEach(cityId => {
+          excludedCityIds.push(cityId)
+        })
+      })
+      return excludedCityIds
+    },
+
+    // 显示选择地区对话框
+    handleAreasModal (scene, index, item, excludedCityIds) {
+      this.$refs.AreasModal.handle({ scene, index, item }, item.region, excludedCityIds)
+    },
+
+     // 删除记录
+     handleDelete (index) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该记录吗?',
+        onOk () {
+          app.ruleList.splice(index, 1)
+          modal.destroy()
+        }
+      })
     }
 
   }
@@ -610,4 +766,21 @@ export default {
 </script>
 <style lang="less" scoped>
 @import './style.less';
+.table-rules {
+  .operation {
+    text-align: right;
+    a {
+      font-size: @font-size-base;
+      margin-left: 6px;
+    }
+  }
+  .content {
+    color: #505050;
+    white-space: normal;
+    .city-name {
+      font-size: 12.5px;
+      color: #7b7b7b;
+    }
+  }
+}
 </style>
diff --git a/src/views/dataCenter/goods/Update.vue b/src/views/dataCenter/goods/Update.vue
index 5432fe2..441115a 100644
--- a/src/views/dataCenter/goods/Update.vue
+++ b/src/views/dataCenter/goods/Update.vue
@@ -56,7 +56,7 @@
 
             <a-form-item label="是否大牌正品" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-radio-group
-                  v-decorator="['is_brand', { initialValue: 0, rules: [{ required: true }] }]"
+                v-decorator="['is_brand', { initialValue: 0, rules: [{ required: true }] }]"
               >
                 <a-radio :value="0">否</a-radio>
                 <a-radio :value="1">是</a-radio>
@@ -65,7 +65,7 @@
 
             <a-form-item label="是否新品首发" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-radio-group
-                  v-decorator="['is_new', { initialValue: 0, rules: [{ required: true }] }]"
+                v-decorator="['is_new', { initialValue: 0, rules: [{ required: true }] }]"
               >
                 <a-radio :value="0">否</a-radio>
                 <a-radio :value="1">是</a-radio>
@@ -340,6 +340,44 @@
               <a-input-number v-decorator="['sales_initial', { initialValue: 0}]" />
             </a-form-item>
 
+            <div >
+              <a-divider orientation="left">销售区域</a-divider>
+              <a-form-item label="销售区域" :labelCol="labelCol" :wrapperCol="{ span: 15 }">
+                <a-table
+                  v-show="ruleList.length"
+                  class="table-rules"
+                  :columns="columns"
+                  :dataSource="ruleList"
+                  :pagination="false"
+                  bordered
+                >
+                  <!-- 销售区域 -->
+                  <template slot="region_text" slot-scope="text, item, index">
+                    <p class="content">
+                      <span v-for="(province, pidx) in text" :key="pidx">
+                        <span>{{ province.name }}</span>
+                        <template v-if="province.citys.length">
+                          <span>(</span>
+                          <span
+                            class="city-name"
+                            v-for="(city, cidx) in province.citys"
+                            :key="cidx"
+                          >{{ city.name }}{{ province.citys.length > cidx + 1 ? '、': '' }}</span>
+                          <span>)</span>
+                        </template>
+                        <span>{{ ' ' }}</span>
+                      </span>
+                    </p>
+                    <p class="operation">
+                      <a href="javascript:void(0);" class="edit" @click="handleEdit(index, item)">编辑</a>
+                      <a href="javascript:void(0);" class="delete" @click="handleDelete(index)">删除</a>
+                    </p>
+                  </template>
+                </a-table>
+                <a-button icon="environment" @click="handleAdd">点击添加销售区域</a-button>
+              </a-form-item>
+            </div>
+
             <div >
               <a-divider orientation="left">积分设置</a-divider>
               <a-form-item
@@ -407,8 +445,8 @@
                       addonAfter="折"
                       :inputProps="{ min: 0, max: 9.9 }"
                       v-decorator="[`alone_grade_equity[grade_id:${item.grade_id}]`, {
-                      initialValue: formData.defaultUserGradeValue[item.grade_id], rules: [{ required: true, message: '折扣率不能为空'}]
-                    }]"
+                        initialValue: formData.defaultUserGradeValue[item.grade_id], rules: [{ required: true, message: '折扣率不能为空'}]
+                      }]"
                     />
                   </a-form-item>
                 </div>
@@ -466,16 +504,25 @@
           <a-button type="primary" html-type="submit" :loading="isBtnLoading">提交</a-button>
         </a-form-item>
       </a-form>
+      <AreasModal ref="AreasModal" @handleSubmit="handleAreaSubmit" />
     </a-spin>
   </a-card>
 </template>
 
 <script>
 import * as GoodsApi from '@/api/goods'
-import { SelectImage, SelectGoods,SelectVideo, Ueditor, InputNumberGroup } from '@/components'
+import { SelectImage, SelectGoods, SelectVideo, Ueditor, InputNumberGroup } from '@/components'
 import GoodsModel from '@/common/model/goods/Index'
 import { GoodsType, MultiSpec } from './modules'
 import { isEmptyObject } from '@/utils/util'
+import { AreasModal } from '@/components/Modal'
+import Region from '@/common/model/Region'
+
+const defaultItem = {
+  key: 0,
+  region: [],
+  region_text: []
+}
 export default {
   components: {
     GoodsType,
@@ -484,7 +531,9 @@ export default {
     SelectVideo,
     Ueditor,
     InputNumberGroup,
-    MultiSpec
+    MultiSpec,
+    AreasModal,
+    Region
   },
   data () {
     return {
@@ -503,7 +552,21 @@ export default {
       goodsId: null,
       // 表单数据
       formData: GoodsModel.formData,
-      checkList:[]
+      checkList: [],
+      // 销售区域
+      ruleList: [
+      ],
+      // 销售区域表头
+      columns: [
+        {
+          title: '销售区域',
+          dataIndex: 'region_text',
+          width: '400px',
+          scopedSlots: { customRender: 'region_text' }
+        }
+      ],
+       // 城市总数
+       citysCount: null
     }
   },
   watch: {
@@ -520,6 +583,11 @@ export default {
     // 初始化数据
     this.initData()
     this.getDataList()
+
+    // 城市总数
+    Region.getCitysCount().then(count => {
+      this.citysCount = count
+    })
   },
   beforeDestroy () {
     // 销毁商品详情
@@ -545,6 +613,7 @@ export default {
               this.onForceUpdate()
             })
           }
+          // this.ruleList = record.rule.map((item, index) => { return { ...item, key: index } })
           this.isLoading = false
         })
     },
@@ -590,15 +659,14 @@ export default {
     // 获取商品列表
     getDataList () {
       return GoodsApi.list().then(result => {
-        this.checkList=result.data.list.data
+        this.checkList = result.data.list.data
       })
     },
     // 确认按钮
     handleSubmit (e) {
       e.preventDefault()
       // 表单验证
-      console.log(this.form)
-      const { form: { validateFields } } = this
+      const { form: { validateFields }, ruleList } = this
       validateFields((errors, values) => {
         // 定位到错误的tab选项卡
         if (errors) {
@@ -619,6 +687,7 @@ export default {
         values.categoryIds = values.categorys.map(item => item.value)
         delete values.categorys
         // 提交到后端api
+        values.rules = ruleList
         this.onFormSubmit(values)
         return true
       })
@@ -629,7 +698,7 @@ export default {
       // 表单字段与tabKey对应关系
       // 只需要必填字段就可
       const tabsFieldsMap = [
-        ['goods_type', 'goods_name', 'categorys', 'imagesIds', 'delivery_id', 'is_ind_delivery_type', 'delivery_type','is_brand', 'is_in_store'],
+        ['goods_type', 'goods_name', 'categorys', 'imagesIds', 'delivery_id', 'is_ind_delivery_type', 'delivery_type', 'is_brand', 'is_in_store'],
         ['spec_type', 'goods_price', 'is_restrict', 'restrict_total', 'restrict_single', 'cost_price'],
         ['content'],
         ['alone_grade_equity', 'first_money', 'second_money', 'third_money']
@@ -660,6 +729,68 @@ export default {
           this.isBtnLoading = false
         })
         .finally(() => this.isLoading = false)
+    },
+
+    // 新增记录
+    handleAdd () {
+      const index = this.ruleList.length
+      const newItem = { ...defaultItem, key: index }
+      // 排除的城市id集(已存在的城市id集)
+      const excludedCityIds = this.getExcludedCityIds()
+      if (excludedCityIds.length === this.citysCount) {
+        this.$message.error('已选择了所有的区域', 0.8)
+        return false
+      }
+      // 显示选择地区对话框
+      this.handleAreasModal('add', index, newItem, excludedCityIds)
+    },
+
+    // 编辑记录
+    handleEdit (index, item) {
+      // 排除的城市id集(已存在的城市id集)
+      const excludedCityIds = this.getExcludedCityIds()
+      // 显示选择地区对话框
+      this.handleAreasModal('edit', index, item, excludedCityIds)
+    },
+
+    // 选择地区后的回调
+    handleAreaSubmit (result) {
+      console.log(JSON.stringify(this.ruleList))
+      const { custom: { scene, item } } = result
+      item.region = result.selectedCityIds
+      item.region_text = result.selectedText
+      if (scene === 'add') {
+        this.ruleList.push(item)
+      }
+    },
+
+    // 排除的城市id集(已存在的城市id集)
+    getExcludedCityIds () {
+      const excludedCityIds = []
+      this.ruleList.forEach(item => {
+        item.region.forEach(cityId => {
+          excludedCityIds.push(cityId)
+        })
+      })
+      console.log(excludedCityIds)
+      return excludedCityIds
+    },
+
+    // 显示选择地区对话框
+    handleAreasModal (scene, index, item, excludedCityIds) {
+      this.$refs.AreasModal.handle({ scene, index, item }, item.region, excludedCityIds)
+    },
+
+     // 删除记录
+     handleDelete (index) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该记录吗?',
+        onOk () {
+          app.ruleList.splice(index, 1)
+          modal.destroy()
+        }
+      })
     }
 
   }
@@ -668,4 +799,21 @@ export default {
 </script>
 <style lang="less" scoped>
 @import './style.less';
+.table-rules {
+  .operation {
+    text-align: right;
+    a {
+      font-size: @font-size-base;
+      margin-left: 6px;
+    }
+  }
+  .content {
+    color: #505050;
+    white-space: normal;
+    .city-name {
+      font-size: 12.5px;
+      color: #7b7b7b;
+    }
+  }
+}
 </style>