123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- <template>
- <a-card :bordered="false" class="goodsEdit-table-page-wrapper">
- <a-form
- id="goodsEdit-form"
- :form="form"
- ref="form"
- v-bind="formItemLayout"
- @submit="handleSubmit">
- <a-form-item label="商品图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <Upload
- id="goodsEdit-images"
- v-decorator="[
- 'formData.images',
- { initialValue: formData.images, rules: [{ required: true, message: '请上传商品图片' }] }
- ]"
- ref="goodsImage"
- :maxNums="6"
- :fileSize="0.25"
- @change="changeImage"
- listType="picture-card"
- ></Upload>
- <span class="upload-desc">请上传200*150尺寸的图片,大小不超过0.25MB,png、jpg、jpeg格式。(最多可上传6张)</span>
- </a-form-item>
- <a-form-item label="商品名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-input
- id="goodsEdit-name"
- :maxLength="30"
- v-decorator="[
- 'formData.name',
- { initialValue: formData.name, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入商品名称(最多30个字符)' }] }
- ]"
- placeholder="请输入商品名称(最多30个字符)"
- allowClear />
- </a-form-item>
- <a-form-item label="商品分类" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-select
- id="goodsEdit-goodsTypeNo"
- allowClear
- v-decorator="[
- 'formData.goodsTypeNo',
- { initialValue: formData.goodsTypeNo,
- rules: [{ required: true, message: '请选择商品分类' }] },
- ]"
- placeholder="请选择商品分类">
- <a-select-option v-for="(item,index) in goodsTypeList" :key="index" :value="item.goodsTypeNo">{{ item.name }}</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item label="商品价格" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-input-number
- id="goodsEdit-sellGold"
- class="inpNumber-unit"
- :min="0"
- :max="999999"
- :precision="2"
- v-decorator="[ 'formData.sellGold', { initialValue: formData.sellGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
- placeholder="请输入商品价格(0~999999)。10个乐豆等值于1元"
- allowClear />
- <span class="inp-unit">乐豆</span>
- </a-form-item>
- <a-form-item label="商品状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" v-if="!isEdit">
- <v-select
- ref="state"
- code="GOODS_STATE"
- allowClear
- id="goodsEdit-state"
- placeholder="请选择商品状态"
- v-decorator="['formData.state', { initialValue: formData.state, rules: [{ required: true, message: '请选择商品状态' }] }]"
- ></v-select>
- </a-form-item>
- <a-form-item label="库存数量" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-input-number
- id="goodsEdit-inventoryQty"
- class="inpNumber"
- :min="0"
- :max="999999"
- :precision="2"
- v-decorator="['formData.inventoryQty', { initialValue: formData.inventoryQty, rules: [{ required: true, message: '请输入库存数量(0~999999)' }] }]"
- placeholder="请输入库存数量(0~999999)。当库存数量为0时显示为已售罄且无法下单"
- allowClear />
- </a-form-item>
- <a-form-item label="供货商" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-select
- id="goodsEdit-officialPartnerNo"
- allowClear
- :disabled="isEdit"
- v-decorator="[
- 'formData.officialPartnerNo',
- { initialValue: formData.officialPartnerNo,
- rules: [{ required: true, message: '请选择供货商' }] },
- ]"
- placeholder="请选择供货商">
- <a-select-option v-for="(item,index) in partnerList" :key="index" :value="item.officialPartnerNo">{{ item.name }}</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item label="商品详情" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <editor id="goodsEdit-editor" ref="editor" class="goodsEdit-editor" @on-change="editorChange" :cache="false"></editor>
- </a-form-item>
- <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
- <a-button type="primary" html-type="submit" id="goodsEdit-btn-submit" style="margin-right: 15px">保存</a-button>
- <a-button @click="close" style="margin-left: 15px" id="goodsEdit-btn-close">取消</a-button>
- </a-form-item>
- </a-form>
- </a-card>
- </template>
- <script>
- import { Upload, STable, VSelect } from '@/components'
- import Editor from '@/components/WEeditor'
- import { goodsTypeQueryList } from '@/api/goodsType'
- import { partnerQueryList } from '@/api/partner'
- import { goodsSave, goodsFind } from '@/api/goods'
- export default {
- name: 'GoodsEdit',
- components: { Upload, STable, VSelect, Editor },
- data () {
- return {
- form: this.$form.createForm(this),
- formItemLayout: {
- labelCol: { span: 4 },
- wrapperCol: { span: 16 }
- },
- formData: {
- images: '', // 商品图
- name: '', // 商品名称
- goodsTypeNo: undefined, // 商品分类
- sellGold: '', // 商品价格
- state: '', // 商品状态
- inventoryQty: '', // 库存数量
- officialPartnerNo: undefined, // 供货商
- desc: null // 商品详情
- },
- goodsTypeList: [], // 商品分类下拉数据
- partnerList: [] // 供应商下拉数据
- }
- },
- computed: {
- isEdit () {
- console.log(this.$route)
- return this.$route.name === 'goodsListEdit'
- }
- },
- methods: {
- // 获取商品详情
- getGoodsDetail () {
- goodsFind({ id: this.$route.params.id }).then(res => {
- if (res.status == 200) {
- this.formData = Object.assign(this.formData, res.data)
- this.$refs.goodsImage.setFileList(res.data.images)
- this.$refs.editor.setHtml(this.formData.desc)
- }
- })
- },
- // 商品分类下拉数据
- getGoodsType () {
- goodsTypeQueryList().then(res => {
- if (res.status == 200) {
- this.goodsTypeList = res.data
- } else {
- this.goodsTypeList = []
- }
- })
- },
- // 供应商下拉数据
- getPartnerQueryList () {
- partnerQueryList().then(res => {
- if (res.status == 200) {
- this.partnerList = res.data
- } else {
- this.partnerList = []
- }
- })
- },
- // 保存
- handleSubmit (e) {
- e.preventDefault()
- const _this = this
- console.log(this.formData, '----表单上传')
- this.form.validateFields((err, values) => {
- if (!err) {
- const formData = values.formData
- formData.desc = _this.formData.desc
- formData.id = this.isEdit ? this.$route.params.id : null
- goodsSave(formData).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- setTimeout(() => {
- _this.$router.push({ path: '/shop/goods/list' })
- }, 1000)
- }
- })
- }
- })
- },
- // 取消
- close () {
- this.$router.push({ path: '/shop/goods/list' })
- },
- // 图片上传
- changeImage (file) {
- this.formData.images = file
- },
- // 商品详情 文本编辑器
- editorChange (html, text) {
- this.formData.desc = html
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- vm.getGoodsType()
- vm.getPartnerQueryList()
- console.log(vm.$route, vm.isEdit)
- if (vm.isEdit) { // 详情页
- vm.getGoodsDetail()
- }
- })
- }
- }
- </script>
- <style lang="less">
- .goodsEdit-table-page-wrapper{
- // 商品图片描述
- .upload-desc{
- font-size: 12px;
- color: #808695;
- }
- // input-number 框宽度
- .inpNumber{
- width: 100%;
- }
- .inpNumber-unit{ // 有单位的
- width: 90%;
- margin-right: 8px;
- }
- // 文本编辑器 工具栏样式换行
- .goodsEdit-editor{
- .w-e-toolbar{
- flex-wrap: wrap;
- }
- }
- }
- </style>
|