123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <template>
- <div>
- <!-- 新增编辑商品分类弹窗 -->
- <a-modal
- v-model="isShow"
- @cancle="isShow=false"
- :footer="null"
- width="60%"
- :centered="true"
- :title="titleText">
- <a-form id="components-form-demo-validate-other" :form="form" ref="form" v-bind="formItemLayout" @submit="handleSubmit">
- <a-form-item label="商品分类名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-input
- id="addGoodsClassModal-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-input-number
- id="addGoodsClassModal-popularizeGoodsLimit"
- class="inpNumber"
- :min="0"
- :max="999999"
- :precision="0"
- v-decorator="[ 'formData.popularizeGoodsLimit', { initialValue: formData.popularizeGoodsLimit, rules: [{ required: true, message: '请输入商城主页显示数量(0~999999)' }] } ]"
- placeholder="请输入商城主页显示数量(0~999999)"
- allowClear />
- </a-form-item>
- <a-form-item label="订单起购金额" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-input-number
- id="addGoodsClassModal-goldLimit"
- class="inpNumber-unit"
- :min="0"
- :max="999999"
- :precision="0"
- v-decorator="[ 'formData.goldLimit', { initialValue: formData.goldLimit, rules: [{ required: true, message: '请输入订单起购金额(0~999999)' }] } ]"
- placeholder="请输入订单起购金额(0~999999)"
- allowClear />
- <span class="inp-unit">乐豆</span>
- </a-form-item>
- <a-form-item label="备注" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-textarea
- :maxLength="500"
- v-decorator="['formData.remarks', { initialValue: formData.remarks, rules: [{ required: false, message: '请输入备注内容(最多500个字符)!' }] }]"
- id="addGoodsClassModal-remarks"
- placeholder="请输入备注内容(最多500个字符)"
- allowClear />
- </a-form-item>
- <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
- <a-button type="primary" html-type="submit" id="addGoodsClassModal-submit" style="margin-right: 15px">保存</a-button>
- <a-button @click="isShow=false" style="margin-left: 15px" id="addGoodsClassModal-close">取消</a-button>
- </a-form-item>
- </a-form>
- </a-modal>
- </div>
- </template>
- <script>
- import {
- VSelect
- } from '@/components'
- import {
- goodsClassDetails,
- saveGoodsClass
- } from '@/api/shopSetting.js'
- export default {
- name: 'AddGoodsClassModal',
- components: {
- VSelect
- },
- props: {
- openGoodClassModal: {
- type: Boolean,
- default: false
- },
- itemId: {
- type: String,
- default: ''
- },
- itemData: {
- type: Object,
- default: function () {
- return {}
- }
- }
- },
- data () {
- return {
- formItemLayout: {
- labelCol: {
- span: 6
- },
- wrapperCol: {
- span: 14
- }
- },
- isShow: this.openGoodClassModal,
- titleText: '新增',
- formLayout: 'horizontal',
- form: this.$form.createForm(this, { name: 'addGoodsClassModal' }),
- formData: {
- name: '', // 分类名称
- goldLimit: '', // 限制金额
- remarks: '', // 备注
- popularizeGoodsLimit: ''
- }
- }
- },
- methods: {
- // 查看详情
- getPageInfo () {
- const _this = this
- goodsClassDetails({
- id: _this.itemId
- }).then(res => {
- if (res.status == 200) {
- this.form.setFieldsValue({ 'formData': res.data })
- }
- })
- },
- // 点击保存;
- handleSubmit (e) {
- e.preventDefault()
- const _this = this
- this.form.validateFields((err, values) => {
- if (!err) {
- const formData = Object.assign({}, this.itemData, this.formData, values.formData)
- formData.id = _this.itemId
- saveGoodsClass(formData).then(res => {
- console.log(res, 'rrrrrrrrr')
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$emit('refresh')
- setTimeout(function () {
- _this.isShow = false
- }, 300)
- }
- })
- }
- })
- }
- },
- watch: {
- openGoodClassModal (newValue, oldValue) {
- this.isShow = newValue
- console.log(this.isShow)
- },
- isShow (val) {
- if (!val) {
- this.$emit('close')
- } else {
- this.form.resetFields()
- }
- },
- itemId (newValue, oldValue) {
- console.log(newValue, '----------id')
- if (newValue && this.isShow) {
- this.titleText = '编辑'
- this.getPageInfo(newValue)
- } else {
- this.titleText = '新增'
- }
- }
- }
- }
- </script>
- <style lang="less">
- .input-number{
- display: flex;
- width: 100%;
- }
- .inpNumber{
- width: 100%;
- }
- .inpNumber-unit{ // 有单位的
- width: 90%;
- margin-right: 8px;
- }
- </style>
|