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

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