diff --git a/src/components/SelectGoods/SelectGoods.vue b/src/components/SelectGoods/SelectGoods.vue index 5a1d409..1cfff62 100644 --- a/src/components/SelectGoods/SelectGoods.vue +++ b/src/components/SelectGoods/SelectGoods.vue @@ -1,31 +1,6 @@ @@ -459,7 +484,12 @@ 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' +const defaultItem = { + key: 0, + region: [], + region_text: [], +} export default { components: { GoodsType, @@ -467,9 +497,10 @@ export default { SelectVideo, Ueditor, InputNumberGroup, - MultiSpec + MultiSpec, + AreasModal, }, - data () { + data() { return { // 默认的标签索引 tabKey: 0, @@ -483,37 +514,50 @@ export default { // 当前表单元素 form: this.$form.createForm(this), // 表单数据 - formData: GoodsModel.formData + formData: GoodsModel.formData, + checkList: [], + // 销售区域 + ruleList: [], + // 销售区域表头 + columns: [ + { + title: '销售区域', + dataIndex: 'region_text', + width: '400px', + scopedSlots: { customRender: 'region_text' }, + }, + ], + // 城市总数 + citysCount: null, } }, // 初始化数据 - created () { + created() { this.isLoading = true // 获取form所需的数据 - GoodsModel.getFromData() - .then(() => { - this.isLoading = false - }) + GoodsModel.getFromData().then(() => { + this.isLoading = false + }) }, methods: { - // 手动强制更新页面 - onForceUpdate (bool = false) { + onForceUpdate(bool = false) { this.$forceUpdate() // bool为true时再执行一次 $forceUpdate, 特殊情况下需执行两次，原因如下： // 第一次执行 $forceUpdate时, 新元素绑定v-decorator无法获取到form.getFieldValue - bool && setTimeout(() => { - this.$forceUpdate() - }, 10) + bool && + setTimeout(() => { + this.$forceUpdate() + }, 10) }, // 切换tab选项卡 - handleTabs (key) { + handleTabs(key) { this.tabKey = key }, // 刷新分类列表 - onReloadCategoryList () { + onReloadCategoryList() { this.isLoading = true GoodsModel.getCategoryList().then(() => { this.isLoading = false @@ -521,7 +565,7 @@ export default { }, // 刷新服务与承诺列表 - onReloadServiceList () { + onReloadServiceList() { this.isLoading = true GoodsModel.getServiceList().then(() => { this.isLoading = false @@ -529,7 +573,7 @@ export default { }, // 刷新配送模板列表 - onReloadDeliveryList () { + onReloadDeliveryList() { this.isLoading = true GoodsModel.getDeliveryList().then(() => { this.isLoading = false @@ -537,10 +581,12 @@ export default { }, // 确认按钮 - handleSubmit (e) { + handleSubmit(e) { e.preventDefault() // 表单验证 - const { form: { validateFields } } = this + const { + form: { validateFields }, ruleList + } = this validateFields((errors, values) => { // 定位到错误的tab选项卡 if (errors) { @@ -557,8 +603,9 @@ export default { // 记录多规格数据 values.specData = MultiSpec.getFromSpecData() } + values.rules = ruleList // 整理商品分类ID集 - values.categoryIds = values.categorys.map(item => item.value) + values.categoryIds = values.categorys.map((item) => item.value) delete values.categorys // 提交到后端api this.onFormSubmit(values) @@ -567,14 +614,14 @@ export default { }, // 定位到错误的tab选项卡 - onTargetTabError (errors) { + onTargetTabError(errors) { // 表单字段与tabKey对应关系 // 只需要必填字段就可 const tabsFieldsMap = [ ['goods_type', 'goods_name', 'categorys', 'imagesIds', 'delivery_id', 'is_ind_delivery_type', 'delivery_type'], ['spec_type', 'goods_price', 'is_restrict', 'restrict_total', 'restrict_single'], ['content'], - ['alone_grade_equity', 'first_money', 'second_money', 'third_money'] + ['alone_grade_equity', 'first_money', 'second_money', 'third_money'], ] const field = Object.keys(errors).shift() for (const key in tabsFieldsMap) { @@ -586,11 +633,11 @@ export default { }, // 提交到后端api - onFormSubmit (values) { + onFormSubmit(values) { this.isLoading = true this.isBtnLoading = true GoodsApi.add({ form: values }) - .then(result => { + .then((result) => { // 显示提示信息 this.$message.success(result.message, 1.5) // 跳转到列表页 @@ -601,13 +648,89 @@ export default { .catch(() => { this.isBtnLoading = false }) - .finally(() => this.isLoading = 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) { + 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() + }, + }) + }, + }, +} diff --git a/src/views/goods/Update.vue b/src/views/goods/Update.vue index 81d4b6e..dcc5aca 100644 --- a/src/views/goods/Update.vue +++ b/src/views/goods/Update.vue @@ -342,7 +342,41 @@ > - +
+ 销售区域 + + + + + + 点击添加销售区域 + +
积分设置 提交 + @@ -479,7 +514,12 @@ import { SelectImage, SelectVideo, Ueditor, InputNumberGroup } from '@/component import GoodsModel from '@/common/model/goods/Index' import { GoodsType, MultiSpec } from './modules' import { isEmptyObject } from '@/utils/util' - +import { AreasModal } from '@/components/Modal' +const defaultItem = { + key: 0, + region: [], + region_text: [], +} export default { components: { GoodsType, @@ -487,7 +527,8 @@ export default { SelectVideo, Ueditor, InputNumberGroup, - MultiSpec + MultiSpec, + AreasModal }, data () { return { @@ -505,7 +546,21 @@ export default { // 商品ID goodsId: null, // 表单数据 - formData: GoodsModel.formData + formData: GoodsModel.formData, + checkList: [], + // 销售区域 + ruleList: [], + // 销售区域表头 + columns: [ + { + title: '销售区域', + dataIndex: 'region_text', + width: '400px', + scopedSlots: { customRender: 'region_text' }, + }, + ], + // 城市总数 + citysCount: null, } }, watch: { @@ -543,6 +598,7 @@ export default { // 第二次赋值 (适用于动态渲染的form-item) this.$nextTick(() => { this.form.setFieldsValue(GoodsModel.getFieldsValue2()) + this.ruleList = this.formData.goods.rules?this.formData.goods.rules:[] this.onForceUpdate() }) } @@ -593,7 +649,7 @@ export default { handleSubmit (e) { e.preventDefault() // 表单验证 - const { form: { validateFields } } = this + const { form: { validateFields },ruleList } = this validateFields((errors, values) => { // 定位到错误的tab选项卡 if (errors) { @@ -610,6 +666,7 @@ export default { // 记录多规格数据 values.specData = MultiSpec.getFromSpecData() } + values.rules = ruleList // 整理商品分类ID集 values.categoryIds = values.categorys.map(item => item.value) delete values.categorys @@ -655,7 +712,69 @@ 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) { + 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() + }, + }) + }, } } @@ -663,4 +782,21 @@ export default { diff --git a/src/views/goods/modules/MultiSpec.vue b/src/views/goods/modules/MultiSpec.vue index 3a6ccea..c380ffc 100644 --- a/src/views/goods/modules/MultiSpec.vue +++ b/src/views/goods/modules/MultiSpec.vue @@ -290,8 +290,13 @@ export default { return false } - console.log(goodsId, item) this.getGoodsDetail(goodsId).then(res => { + const queryGoodsId = this.$route.query.goodsId + if (res.spec_type === 20 && queryGoodsId !== goodsId) { + this.$message.error('您选择的商品是多规格商品', 2) + return false + } + const sku = res.skuList[0] item.goods_price = sku.goods_price item.cost_price = sku.cost_price @@ -319,7 +324,7 @@ export default {