|
@@ -1,16 +1,9 @@
|
|
|
<template>
|
|
|
<a-card :bordered="false" class="supplierManagementEdit-table-page-wrapper">
|
|
|
- <!-- <a-form
|
|
|
- id="supplierManagementEdit-form"
|
|
|
- :form="form"
|
|
|
- ref="form"
|
|
|
- v-bind="formItemLayout"
|
|
|
- @submit="handleSubmit"> -->
|
|
|
<a-form-model
|
|
|
id="supplierManagementEdit-form"
|
|
|
ref="ruleForm"
|
|
|
:model="form"
|
|
|
- :layout="formItemLayout"
|
|
|
:rules="rules"
|
|
|
:label-col="formItemLayout.labelCol"
|
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
@@ -23,79 +16,77 @@
|
|
|
placeholder="请输入供应商名称(最多30个字符)"
|
|
|
allowClear />
|
|
|
</a-form-model-item>
|
|
|
- <!-- <a-form-model-item label="商品分类" prop="peopleLimitCount">
|
|
|
- <a-select
|
|
|
- id="supplierManagementEdit-goodsTypeNo"
|
|
|
- allowClear
|
|
|
- v-decorator="[
|
|
|
- 'form.goodsTypeNo',
|
|
|
- { initialValue: form.goodsTypeNo,
|
|
|
- rules: [{ required: true, message: '请选择商品分类' }] },
|
|
|
- ]"
|
|
|
- placeholder="请选择商品分类">
|
|
|
- <a-select-option v-for="(item,index) in goodsTypeList" :key="index" :value="item.goodsTypeNo" :disabled="item.state==0">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
+ <a-form-model-item label="所在地区" required style="margin: 0;">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <!-- 所在地区 -->
|
|
|
+ <a-col span="8">
|
|
|
+ <a-form-model-item prop="provinceCode">
|
|
|
+ <a-select id="supplierManagementEdit-provinceCode" @change="getCityList" v-model="form.provinceCode" placeholder="请选择省">
|
|
|
+ <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="8">
|
|
|
+ <a-form-model-item prop="cityCode">
|
|
|
+ <a-select id="supplierManagementEdit-cityCode" @change="getAreaList" v-model="form.cityCode" placeholder="请选择市">
|
|
|
+ <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="8">
|
|
|
+ <a-form-model-item prop="districtCode">
|
|
|
+ <a-select id="supplierManagementEdit-districtCode" @change="areaCharged" v-model="form.districtCode" placeholder="请选择区/县">
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</a-form-model-item>
|
|
|
- <a-form-model-item label="商品价格" prop="peopleLimitCount">
|
|
|
- <a-input-number
|
|
|
- id="supplierManagementEdit-sellGold"
|
|
|
- class="inpNumber-unit"
|
|
|
- :min="0"
|
|
|
- :max="999999"
|
|
|
- :precision="0"
|
|
|
- v-decorator="[ 'form.sellGold', { initialValue: form.sellGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
|
|
|
- placeholder="请输入商品价格(0~999999)。10个乐豆等值于1元"
|
|
|
+ <a-form-model-item label="详细地址" prop="address">
|
|
|
+ <a-input
|
|
|
+ id="supplierManagementEdit-address"
|
|
|
+ :maxLength="60"
|
|
|
+ v-model="form.address"
|
|
|
+ placeholder="请输入详细地址(最多60个字符)"
|
|
|
allowClear />
|
|
|
- <span class="inp-unit">乐豆</span>
|
|
|
</a-form-model-item>
|
|
|
- <a-form-model-item label="商品状态" prop="peopleLimitCount" v-if="!isEdit">
|
|
|
- <v-select
|
|
|
- ref="state"
|
|
|
- code="GOODS_STATE"
|
|
|
- allowClear
|
|
|
- id="supplierManagementEdit-state"
|
|
|
- placeholder="请选择商品状态"
|
|
|
- v-decorator="['form.state', { initialValue: form.state, rules: [
|
|
|
- { required: true, message: '请选择商品状态' },
|
|
|
- { validator: stateValidator }
|
|
|
- ] }]"
|
|
|
- ></v-select>
|
|
|
+ <a-form-model-item label="联系人" prop="contactName">
|
|
|
+ <a-input
|
|
|
+ id="supplierManagementEdit-contactName"
|
|
|
+ :maxLength="30"
|
|
|
+ v-model="form.contactName"
|
|
|
+ placeholder="请输入联系人(最多30个字符)"
|
|
|
+ allowClear />
|
|
|
</a-form-model-item>
|
|
|
- <a-form-model-item label="库存数量" prop="peopleLimitCount">
|
|
|
- <a-input-number
|
|
|
- id="supplierManagementEdit-inventoryQty"
|
|
|
- class="inpNumber"
|
|
|
- :min="0"
|
|
|
- :max="999999"
|
|
|
- :precision="0"
|
|
|
- v-decorator="['form.inventoryQty', { initialValue: form.inventoryQty, rules: [
|
|
|
- { required: true, message: '请输入库存数量' },
|
|
|
- { validator: inventoryQtyValidator }
|
|
|
- ] }]"
|
|
|
- placeholder="请输入库存数量(0~999999)。当库存数量为0时显示为已售罄且无法下单"
|
|
|
+ <a-form-model-item label="联系电话" prop="contactPhone">
|
|
|
+ <a-input
|
|
|
+ id="supplierManagementEdit-contactPhone"
|
|
|
+ :maxLength="20"
|
|
|
+ v-model="form.contactPhone"
|
|
|
+ placeholder="请输入联系电话(最多20个字符)"
|
|
|
allowClear />
|
|
|
</a-form-model-item>
|
|
|
- <a-form-model-item label="供货商" prop="peopleLimitCount">
|
|
|
- <a-select
|
|
|
- id="supplierManagementEdit-officialPartnerNo"
|
|
|
- allowClear
|
|
|
- :disabled="isEdit"
|
|
|
- v-decorator="[
|
|
|
- 'form.officialPartnerNo',
|
|
|
- { initialValue: form.officialPartnerNo,
|
|
|
- rules: [{ required: true, message: '请选择供货商' }] },
|
|
|
- ]"
|
|
|
- placeholder="请选择供货商">
|
|
|
- <a-select-option v-for="(item,index) in partnerList" :key="index" :value="item.officialPartnerNo" :disabled="item.state==0">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
+ <a-form-model-item label="主营内容" prop="remarks">
|
|
|
+ <a-textarea
|
|
|
+ id="supplierManagementEdit-remarks"
|
|
|
+ :maxLength="500"
|
|
|
+ v-model="form.remarks"
|
|
|
+ placeholder="请输入主营内容(最多500个字符)"
|
|
|
+ allowClear />
|
|
|
</a-form-model-item>
|
|
|
- <a-form-model-item label="商品详情" prop="peopleLimitCount">
|
|
|
- <editor id="supplierManagementEdit-editor" ref="editor" class="supplierManagementEdit-editor" @on-change="editorChange" :cache="false"></editor>
|
|
|
+ <a-form-model-item label="状态" prop="state">
|
|
|
+ <a-radio-group
|
|
|
+ name="radioGroup"
|
|
|
+ v-model="form.state"
|
|
|
+ id="supplierManagementEdit-state" >
|
|
|
+ <a-radio :value="1">启用</a-radio>
|
|
|
+ <a-radio :value="0">禁用</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
</a-form-model-item>
|
|
|
<a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
|
|
|
- <a-button type="primary" html-type="submit" id="supplierManagementEdit-btn-submit" style="margin-right: 15px">保存</a-button>
|
|
|
- <a-button @click="close" style="margin-left: 15px" id="supplierManagementEdit-btn-close">取消</a-button>
|
|
|
- </a-form-model-item> -->
|
|
|
+ <a-button type="primary" @click="handleSubmit" id="supplierManagementEdit-btn-submit">保存</a-button>
|
|
|
+ <a-button @click="goBack" style="margin-left: 15px" id="supplierManagementEdit-btn-back">返回列表</a-button>
|
|
|
+ </a-form-model-item>
|
|
|
</a-form-model>
|
|
|
</a-card>
|
|
|
</template>
|
|
@@ -113,23 +104,48 @@ export default {
|
|
|
wrapperCol: { span: 16 }
|
|
|
},
|
|
|
form: {
|
|
|
- homeImage: '', // 首页图
|
|
|
- images: '', // 商品图
|
|
|
- name: '', // 商品名称
|
|
|
- goodsTypeNo: undefined, // 商品分类
|
|
|
- sellGold: '', // 商品价格
|
|
|
- state: '', // 商品状态
|
|
|
- inventoryQty: '', // 库存数量
|
|
|
- officialPartnerNo: undefined, // 供货商
|
|
|
- desc: null // 商品详情
|
|
|
+ name: '', // 供应商名称
|
|
|
+ provinceCode: undefined, // 省
|
|
|
+ provinceName: '',
|
|
|
+ cityCode: undefined, // 市
|
|
|
+ cityName: '',
|
|
|
+ districtCode: undefined, // 区
|
|
|
+ districtName: '',
|
|
|
+ address: '', // 详细地址
|
|
|
+ contactName: '', // 联系人
|
|
|
+ contactPhone: '', // 联系电话
|
|
|
+ remarks: '', // 主营内容
|
|
|
+ state: 0 // 启禁用
|
|
|
},
|
|
|
rules: {
|
|
|
name: [
|
|
|
{ required: true, message: '请输入供应商名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ provinceCode: [
|
|
|
+ { required: true, message: '请选择省', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ cityCode: [
|
|
|
+ { required: true, message: '请选择市', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ districtCode: [
|
|
|
+ { required: true, message: '请选择区/县', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ address: [
|
|
|
+ { required: true, message: '请输入详细地址', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ contactName: [
|
|
|
+ { required: true, message: '请输入联系人', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ contactPhone: [
|
|
|
+ { required: true, message: '请输入联系人电话', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ state: [
|
|
|
+ { required: true, message: '请选择状态', trigger: 'change' }
|
|
|
]
|
|
|
},
|
|
|
- goodsTypeList: [], // 商品分类下拉数据
|
|
|
- partnerList: [] // 供应商下拉数据
|
|
|
+ addrProvinceList: [], // 省下拉
|
|
|
+ addrCityList: [], // 市下拉
|
|
|
+ addrDistrictList: [] // 区下拉
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -138,94 +154,100 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- // 商品状态自定义校验
|
|
|
- stateValidator (rule, value, callback) {
|
|
|
- if (value == 1 && String(this.form.getFieldValue('form.inventoryQty')) && this.form.getFieldValue('form.inventoryQty') == 0) {
|
|
|
- callback(new Error('库存为0的商品不能上架'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
+ // 获取供应商信息
|
|
|
+ getGoodsDetail () {
|
|
|
+ // goodsFind({ id: this.$route.params.id }).then(res => {
|
|
|
+ // if (res.status == 200) {
|
|
|
+ // this.form = Object.assign(this.form, res.data)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
},
|
|
|
- // 输入库存数量调起商品状态校验
|
|
|
- inventoryQtyValidator (rule, value, callback) {
|
|
|
- this.form.validateFields(['form.state'], (errors, values) => {
|
|
|
- if (!errors) {
|
|
|
- callback()
|
|
|
+ // 保存
|
|
|
+ handleSubmit (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ const _this = this
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ const form = values.form
|
|
|
+ form.desc = _this.form.desc
|
|
|
+ form.id = this.isEdit ? this.$route.params.id : null
|
|
|
+ console.log(form,'-----提交信息')
|
|
|
+ // goodsSave(form).then(res => {
|
|
|
+ // if (res.status == 200) {
|
|
|
+ // _this.$message.success(res.message)
|
|
|
+ // setTimeout(() => {
|
|
|
+ // _this.$router.push({ path: '/shop/goods/list' })
|
|
|
+ // }, 1000)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 获取商品详情
|
|
|
- getGoodsDetail () {
|
|
|
- goodsFind({ id: this.$route.params.id }).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- this.form = Object.assign(this.form, res.data)
|
|
|
- this.$refs.homeImage.setFileList(res.data.homeImage)
|
|
|
- this.$refs.goodsImage.setFileList(res.data.images)
|
|
|
- this.$refs.editor.setHtml(this.form.desc)
|
|
|
- }
|
|
|
- })
|
|
|
+ // 返回
|
|
|
+ goBack () {
|
|
|
+ this.$router.push({ path: '/basicData/supplierManagement/list' })
|
|
|
},
|
|
|
- // 商品分类下拉数据
|
|
|
- getGoodsType () {
|
|
|
- goodsTypeQueryList({}).then(res => {
|
|
|
+ // 获取省列表'
|
|
|
+ getProvinceList () {
|
|
|
+ getProvince().then(res => {
|
|
|
if (res.status == 200) {
|
|
|
- this.goodsTypeList = res.data
|
|
|
+ this.addrProvinceList = res.data || []
|
|
|
} else {
|
|
|
- this.goodsTypeList = []
|
|
|
+ this.addrProvinceList = []
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 供应商下拉数据
|
|
|
- getPartnerQueryList () {
|
|
|
- supplierQueryList({}).then(res => {
|
|
|
+ // 获取城市列表
|
|
|
+ getCityList (val) {
|
|
|
+ this.addrCityList = []
|
|
|
+ this.addrDistrictList = []
|
|
|
+ this.form.cityCode = undefined
|
|
|
+ this.form.districtCode = undefined
|
|
|
+ this.form.address = ''
|
|
|
+ this.getCityListRequest(val)
|
|
|
+ },
|
|
|
+ getCityListRequest (val) {
|
|
|
+ getCityByPro({
|
|
|
+ id: val
|
|
|
+ }).then(res => {
|
|
|
if (res.status == 200) {
|
|
|
- this.partnerList = res.data
|
|
|
+ this.addrCityList = res.data || []
|
|
|
} else {
|
|
|
- this.partnerList = []
|
|
|
+ this.addrCityList = []
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 保存
|
|
|
- handleSubmit (e) {
|
|
|
- e.preventDefault()
|
|
|
- const _this = this
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
- if (!err) {
|
|
|
- const form = values.form
|
|
|
- form.desc = _this.form.desc
|
|
|
- form.id = this.isEdit ? this.$route.params.id : null
|
|
|
- goodsSave(form).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- _this.$message.success(res.message)
|
|
|
- setTimeout(() => {
|
|
|
- _this.$router.push({ path: '/shop/goods/list' })
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- })
|
|
|
+ // 获取区县列表
|
|
|
+ getAreaList (val) {
|
|
|
+ this.addrDistrictList = []
|
|
|
+ this.form.districtCode = undefined
|
|
|
+ this.form.address = ''
|
|
|
+ this.getAreaListRequest(val)
|
|
|
+ },
|
|
|
+ getAreaListRequest (val) {
|
|
|
+ getDistrictByCity({
|
|
|
+ id: val
|
|
|
+ }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.addrDistrictList = res.data || []
|
|
|
+ } else {
|
|
|
+ this.addrDistrictList = []
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 取消
|
|
|
- close () {
|
|
|
- this.$router.push({ path: '/shop/goods/list' })
|
|
|
- },
|
|
|
- // 商品图上传
|
|
|
- changeImage (file) {
|
|
|
- this.form.images = file
|
|
|
- },
|
|
|
- // 首页图上传
|
|
|
- changeHomeImage (file) {
|
|
|
- this.form.homeImage = file
|
|
|
- },
|
|
|
- // 商品详情 文本编辑器
|
|
|
- editorChange (html, text) {
|
|
|
- this.form.desc = html
|
|
|
+ // 区县变更
|
|
|
+ areaCharged (val) {
|
|
|
+ this.form.address = ''
|
|
|
}
|
|
|
},
|
|
|
beforeRouteEnter (to, from, next) {
|
|
|
next(vm => {
|
|
|
// vm.getGoodsType()
|
|
|
// vm.getPartnerQueryList()
|
|
|
+ vm.$refs.ruleForm.resetFields()
|
|
|
if (vm.isEdit) { // 编辑页
|
|
|
vm.getGoodsDetail()
|
|
|
}
|