Merge branch 'master' of http://git.njrzwl.cn:3000/wangmingchuan/yanzong_vue_store
wangdong
8 months ago
commit
f32d01281c
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,208 +1,178 @@ |
||||
<template> |
||||
<a-modal |
||||
title="编辑服务" |
||||
:width="920" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="服务名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input |
||||
v-decorator="['server_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="服务分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select |
||||
v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]" |
||||
> |
||||
<a-select-option :value="0">选择分类</a-select-option> |
||||
<a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{ |
||||
<a-modal title="编辑服务" :width="920" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false" :destroyOnClose="true" @ok="handleSubmit" @cancel="handleCancel"> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="服务名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['server_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item label="服务分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]"> |
||||
<a-select-option :value="0">选择分类</a-select-option> |
||||
<a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{ |
||||
item.name |
||||
}}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item label="服务价格" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="0.01" |
||||
:precision="2" |
||||
v-decorator="['server_price', { initialValue: 1, rules: [{ required: true, message: '请输入服务价格' }] }]" |
||||
/> |
||||
<span class="ml-10">元</span> |
||||
</a-form-item> |
||||
<a-form-item label="划线价" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="0.01" |
||||
:precision="2" |
||||
v-decorator="['line_price', { initialValue: 1, rules: [{ required: true, message: '请输入划线价' }] }]" |
||||
/> |
||||
<span class="ml-10">元</span> |
||||
</a-form-item> |
||||
<a-form-item label="评论数量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="10" |
||||
:step="10" |
||||
v-decorator="['comment_num', { initialValue: 10, rules: [{ required: true, message: '请输入评论数量' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="好评率" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="90" |
||||
:step="1" |
||||
:max="100" |
||||
v-decorator="['comment_rate', { initialValue: 90, rules: [{ required: true, message: '请输入好评率' }] }]" |
||||
/> |
||||
<span class="ml-10">%</span> |
||||
</a-form-item> |
||||
<a-form-item label="销量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="100" |
||||
v-decorator="['sold', { initialValue: 100, rules: [{ required: true, message: '请输入销量价格' }] }]" |
||||
/> |
||||
<span class="ml-10">个</span> |
||||
</a-form-item> |
||||
<a-form-item label="服务图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage :defaultList="record.image ? [record.image] : []" v-decorator="['image_id']" /> |
||||
</a-form-item> |
||||
<a-form-item label="服务状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="1">上架</a-radio> |
||||
<a-radio :value="2">下架</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前"> |
||||
<a-input-number |
||||
:min="0" |
||||
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="服务详情" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '服务详情不能为空' }] }]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item label="服务价格" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number :min="0.01" :precision="2" v-decorator="['server_price', { initialValue: 1, rules: [{ required: true, message: '请输入服务价格' }] }]" /> |
||||
<span class="ml-10">元</span> |
||||
</a-form-item> |
||||
<a-form-item label="划线价" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number :min="0.01" :precision="2" v-decorator="['line_price', { initialValue: 1, rules: [{ required: true, message: '请输入划线价' }] }]" /> |
||||
<span class="ml-10">元</span> |
||||
</a-form-item> |
||||
<a-form-item label="评论数量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number :min="10" :step="10" v-decorator="['comment_num', { initialValue: 10, rules: [{ required: true, message: '请输入评论数量' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item label="好评率" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number :min="90" :step="1" :max="100" v-decorator="['comment_rate', { initialValue: 90, rules: [{ required: true, message: '请输入好评率' }] }]" /> |
||||
<span class="ml-10">%</span> |
||||
</a-form-item> |
||||
<a-form-item label="销量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number :min="100" v-decorator="['sold', { initialValue: 100, rules: [{ required: true, message: '请输入销量价格' }] }]" /> |
||||
<span class="ml-10">个</span> |
||||
</a-form-item> |
||||
<a-form-item label="服务图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage :defaultList="record.server_image ? record.server_image : []" v-decorator="['image_id']" /> |
||||
</a-form-item> |
||||
<a-form-item label="服务状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="1">上架</a-radio> |
||||
<a-radio :value="2">下架</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前"> |
||||
<a-input-number :min="0" v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item label="服务详情" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '服务详情不能为空' }] }]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server' |
||||
import { SelectImage, Ueditor } from '@/components' |
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
Ueditor |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data () { |
||||
return { |
||||
categoryList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7 |
||||
}, |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13 |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
edit (record) { |
||||
this.getCategoryList() |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前分类记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
// 获取分类列表 |
||||
getCategoryList () { |
||||
this.isLoading = true |
||||
Api.categoryList() |
||||
.then((result) => { |
||||
this.categoryList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 设置默认值 |
||||
setFieldsValue () { |
||||
const { |
||||
form: { setFieldsValue } |
||||
} = this |
||||
// 设置表单内容 |
||||
this.$nextTick(() => { |
||||
setFieldsValue( |
||||
_.pick(this.record, [ |
||||
'server_name', |
||||
'image_id', |
||||
'category_id', |
||||
'status', |
||||
'server_price', |
||||
'cost_price', |
||||
'sort', |
||||
'content', |
||||
'comment_rate', |
||||
'sold', |
||||
'comment_num' |
||||
]) |
||||
) |
||||
}) |
||||
}, |
||||
// 确认按钮 |
||||
handleSubmit (e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields } |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
if (!errors) { |
||||
this.onFormSubmit(values) |
||||
} |
||||
}) |
||||
}, |
||||
components: { |
||||
SelectImage, |
||||
Ueditor |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
categoryList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7 |
||||
}, |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13 |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
edit(record) { |
||||
let list = [] |
||||
list.push({ |
||||
preview_url: record.server_image, |
||||
file_id: 9999 |
||||
}) |
||||
record.server_image = list |
||||
this.getCategoryList() |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前分类记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
// 获取分类列表 |
||||
getCategoryList() { |
||||
this.isLoading = true |
||||
Api.categoryList() |
||||
.then((result) => { |
||||
this.categoryList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 设置默认值 |
||||
setFieldsValue() { |
||||
const { |
||||
form: { setFieldsValue } |
||||
} = this |
||||
// 设置表单内容 |
||||
this.$nextTick(() => { |
||||
setFieldsValue( |
||||
_.pick(this.record, [ |
||||
'server_name', |
||||
'image_id', |
||||
'category_id', |
||||
'status', |
||||
'server_price', |
||||
'cost_price', |
||||
'sort', |
||||
'content', |
||||
'comment_rate', |
||||
'sold', |
||||
'comment_num' |
||||
]) |
||||
) |
||||
}) |
||||
}, |
||||
// 确认按钮 |
||||
handleSubmit(e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields } |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
if (!errors) { |
||||
this.onFormSubmit(values) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel () { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit (values) { |
||||
this.confirmLoading = true |
||||
Api.editServer({ serverId: this.record['server_id'], form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
} |
||||
} |
||||
// 提交到后端api |
||||
onFormSubmit(values) { |
||||
this.confirmLoading = true |
||||
Api.editServer({ serverId: this.record['server_id'], form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue