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