描述:服务管理新增和编辑

This commit is contained in:
SelfRidicule 2024-03-25 13:54:04 +08:00
parent 0113927f92
commit e3bf1eb889

View File

@ -1,53 +1,56 @@
<template> <template>
<a-modal <a-modal
title="操作" title='操作'
style="top: 20px;" style='top: 20px;'
:width="800" :width='800'
v-model="visible" v-model='visible'
:confirmLoading="confirmLoading" :confirmLoading='confirmLoading'
@ok="handleSubmit" @ok='handleSubmit'
> >
<a-form :form="form"> <a-form :form='form'>
<a-form-item style="display:none"> <a-form-item style='display:none'>
<a-input v-decorator="['id']"/> <a-input v-decorator="['id']" />
</a-form-item> </a-form-item>
<a-form-item style="display:none"> <a-form-item style='display:none'>
<a-input v-decorator="['version']"/> <a-input v-decorator="['version']" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务名称"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='服务名称'>
<a-input placeholder="服务名称" v-decorator="['serveName',{rules:[{required: true, message: '请输入服务名称' }]}]" /> <a-input placeholder='服务名称'
v-decorator="['serveName',{rules:[{required: true, message: '请输入服务名称' }]}]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务类型"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='服务类型'>
<a-select placeholder="服务类型" @change='changeServeType' v-decorator="['serveType', {rules: [{required: true, message: '请选择服务类型' }]}]"> <a-select placeholder='服务类型' @change='changeServeType'
<a-select-option :value="1">免费服务</a-select-option> v-decorator="['serveType', {rules: [{required: true, message: '请选择服务类型' }]}]">
<a-select-option :value="2">增值服务</a-select-option> <a-select-option :value='1'>免费服务</a-select-option>
<a-select-option :value='2'>增值服务</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item v-if="form.serveType === 2" :labelCol="labelCol" :wrapperCol="wrapperCol" label="金额描述"> <a-form-item v-if='mdl.serveType === 2' :labelCol='labelCol' :wrapperCol='wrapperCol' label='金额描述'>
<a-input placeholder="金额描述" v-decorator="['money',{rules:[{required: true, message: '请输入金额描述' }]}]" /> <a-input placeholder='金额描述'
v-decorator="['money',{rules:[{required: true, message: '请输入金额描述' }]}]" />
</a-form-item> </a-form-item>
<a-form-item v-if="form.serveType === 1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务图标"> <a-form-item v-if='mdl.serveType === 1' :labelCol='labelCol' :wrapperCol='wrapperCol' label='服务图标'>
<!-- <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />--> <!-- <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />-->
<a-upload <a-upload
v-decorator="['pic']" v-decorator="['pic']"
list-type="picture-card" list-type='picture-card'
class="avatar-uploader" class='avatar-uploader'
:show-upload-list="false" :show-upload-list='false'
:action="uploadUrl" :action='uploadUrl'
:headers="headers" :headers='headers'
:before-upload="beforeUpload" :before-upload='beforeUpload'
@change="handleChange" @change='handleChange'
> >
<img v-if="imageUrl" :src="imageUrl" style="width: 102px; height: 102px"/> <img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
<div v-else> <div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" /> <a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text"> 上传 </div> <div class='ant-upload-text'> 上传</div>
</div> </div>
</a-upload> </a-upload>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='备注'>
<a-input placeholder="备注" v-decorator="['remake']" /> <a-input placeholder='备注' v-decorator="['remake']" />
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
@ -57,13 +60,12 @@ import { saveRoomServe } from '@/api/admin/meeting/roomServe'
import pick from 'lodash.pick' import pick from 'lodash.pick'
import storage from 'store' import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types' import { ACCESS_TOKEN } from '@/store/mutation-types'
export default { export default {
name: 'RoomServeModal', name: 'RoomServeModal',
props: { props: {},
}, components: {},
components: { data() {
},
data () {
return { return {
visible: false, visible: false,
labelCol: { labelCol: {
@ -85,16 +87,16 @@ export default {
form: this.$form.createForm(this) form: this.$form.createForm(this)
} }
}, },
beforeCreate () { beforeCreate() {
}, },
created () { created() {
}, },
methods: { methods: {
changeServeType(value){ changeServeType(value) {
this.form.type = value this.mdl.serveType = value
}, },
beforeUpload (file) { beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) { if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!') this.$message.error('You can only upload JPG file!')
@ -105,7 +107,7 @@ export default {
} }
return isJpgOrPng && isLt2M return isJpgOrPng && isLt2M
}, },
handleChange (info) { handleChange(info) {
if (info.file.status === 'uploading') { if (info.file.status === 'uploading') {
this.loading = true this.loading = true
return return
@ -127,25 +129,21 @@ export default {
}) })
} }
}, },
add () { add() {
this.form.resetFields() this.form.resetFields()
this.edit({ id: 0 }) this.edit({ id: 0 })
}, },
edit (record) { edit(record) {
this.mdl = Object.assign(record) this.mdl = Object.assign(record)
if (this.mdl.pic) { if (this.mdl.pic) {
this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.pic this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.pic
} }
console.log(this.mdl.serveType)
this.form.setFieldsValue({
serveType:this.mdl.serveType.toString()
})
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue(pick(this.mdl, 'id', 'serveName', 'serveType', 'serveTime', 'remake','type', 'createBy', 'createTime', 'updateBy', 'updateTime', 'version', 'deleteFlag')) this.form.setFieldsValue(pick(this.mdl, 'id', 'serveName', 'serveType', 'serveTime', 'remake', 'type', 'createBy', 'createTime', 'updateBy', 'updateTime', 'version', 'deleteFlag'))
}) })
}, },
handleSubmit (e) { handleSubmit(e) {
e.preventDefault() e.preventDefault()
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
@ -183,7 +181,8 @@ export default {
*/ */
} }
} }
function getBase64 (img, callback) {
function getBase64(img, callback) {
const reader = new FileReader() const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result)) reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img) reader.readAsDataURL(img)