修改了PC 页面

This commit is contained in:
chendaze 2024-03-02 17:03:44 +08:00
parent 1fecd7d520
commit d2c301c621
9 changed files with 260 additions and 266 deletions

View File

@ -1,7 +1,7 @@
import { axios } from '@/utils/request' import { axios } from '@/utils/request'
const api = { const api = {
reservationPerson: '/meeting/reservationPerson' reservationPerson: '/meeting/visitorPerson'
} }
export function getReservationPersonList (parameter) { export function getReservationPersonList (parameter) {

View File

@ -13,61 +13,61 @@
<a-input placeholder='请输入用户id' v-model='queryParam.userId' /> <a-input placeholder='请输入用户id' v-model='queryParam.userId' />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='预约记录id'> <!-- <a-form-item label='预约记录id'>-->
<a-input placeholder='请输入预约记录id' v-model='queryParam.reservationId' /> <!-- <a-input placeholder='请输入预约记录id' v-model='queryParam.reservationId' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='订单价格'> <!-- <a-form-item label='订单价格'>-->
<a-input placeholder='请输入订单价格' v-model='queryParam.orderMoney' /> <!-- <a-input placeholder='请输入订单价格' v-model='queryParam.orderMoney' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='订单状态'> <!-- <a-form-item label='订单状态'>-->
<a-input placeholder='请输入订单状态' v-model='queryParam.orderStauts' /> <!-- <a-input placeholder='请输入订单状态' v-model='queryParam.orderStauts' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='订单号'> <!-- <a-form-item label='订单号'>-->
<a-input placeholder='请输入订单号' v-model='queryParam.outTradeNo' /> <!-- <a-input placeholder='请输入订单号' v-model='queryParam.outTradeNo' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='是否申请售后0否1是'> <!-- <a-form-item label='是否申请售后0否1是'>-->
<a-input placeholder='请输入是否申请售后0否1是' v-model='queryParam.isAfterSale' /> <!-- <a-input placeholder='请输入是否申请售后0否1是' v-model='queryParam.isAfterSale' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='订单取消原因'> <!-- <a-form-item label='订单取消原因'>-->
<a-input placeholder='请输入订单取消原因' v-model='queryParam.cancelResaon' /> <!-- <a-input placeholder='请输入订单取消原因' v-model='queryParam.cancelResaon' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='售后单号'> <!-- <a-form-item label='售后单号'>-->
<a-input placeholder='请输入售后单号' v-model='queryParam.afterNumber' /> <!-- <a-input placeholder='请输入售后单号' v-model='queryParam.afterNumber' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='备注'> <!-- <a-form-item label='备注'>-->
<a-input placeholder='请输入备注' v-model='queryParam.remake' /> <!-- <a-input placeholder='请输入备注' v-model='queryParam.remake' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='商户id'> <!-- <a-form-item label='商户id'>-->
<a-input placeholder='请输入商户id' v-model='queryParam.mchid' /> <!-- <a-input placeholder='请输入商户id' v-model='queryParam.mchid' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='商品描述'> <!-- <a-form-item label='商品描述'>-->
<a-input placeholder='请输入商品描述' v-model='queryParam.description' /> <!-- <a-input placeholder='请输入商品描述' v-model='queryParam.description' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='预支付交易会话id'> <!-- <a-form-item label='预支付交易会话id'>-->
<a-input placeholder='请输入预支付交易会话id' v-model='queryParam.prepayId' /> <!-- <a-input placeholder='请输入预支付交易会话id' v-model='queryParam.prepayId' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='8' :sm='24'> <a-col :md='8' :sm='24'>
<span class='table-page-search-submitButtons'> <span class='table-page-search-submitButtons'>
<a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button> <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
@ -144,39 +144,11 @@ export default {
title: '预约记录id', title: '预约记录id',
dataIndex: 'reservationId' dataIndex: 'reservationId'
}, },
{
title: '订单价格',
dataIndex: 'orderMoney'
},
{
title: '订单状态',
dataIndex: 'orderStauts'
},
{ {
title: '订单号', title: '订单号',
dataIndex: 'outTradeNo' dataIndex: 'outTradeNo'
}, },
{
title: '是否申请售后0否1是',
dataIndex: 'isAfterSale'
},
{
title: '订单取消时间',
dataIndex: 'cancelTime',
sorter: true
},
{
title: '订单取消原因',
dataIndex: 'cancelResaon'
},
{
title: '售后单号',
dataIndex: 'afterNumber'
},
{
title: '备注',
dataIndex: 'remake'
},
{ {
title: '商户id', title: '商户id',
dataIndex: 'mchid' dataIndex: 'mchid'

View File

@ -3,26 +3,11 @@
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline"> <a-form layout="inline">
<a-row :gutter="48"> <a-row :gutter="48">
<a-col :md="5" :sm="15">
<a-form-item label="会议主体id">
<a-input placeholder="请输入会议主体id" v-model="queryParam.roomContentId"/>
</a-form-item>
</a-col>
<a-col :md="5" :sm="15"> <a-col :md="5" :sm="15">
<a-form-item label="用户id"> <a-form-item label="用户id">
<a-input placeholder="请输入用户id" v-model="queryParam.userId"/> <a-input placeholder="请输入用户id" v-model="queryParam.userId"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15">
<a-form-item label="优惠卷id">
<a-input placeholder="请输入优惠卷id" v-model="queryParam.ticketId"/>
</a-form-item>
</a-col>
<a-col :md="5" :sm="15">
<a-form-item label="企业id">
<a-input placeholder="请输入企业id" v-model="queryParam.customerId"/>
</a-form-item>
</a-col>
<a-col :md="5" :sm="15"> <a-col :md="5" :sm="15">
<a-form-item label="主题"> <a-form-item label="主题">
<a-input placeholder="请输入主题" v-model="queryParam.title"/> <a-input placeholder="请输入主题" v-model="queryParam.title"/>
@ -33,36 +18,11 @@
<a-input placeholder="请输入预约状态" v-model="queryParam.stauts"/> <a-input placeholder="请输入预约状态" v-model="queryParam.stauts"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15">
<a-form-item label="是否申请售后0否1是">
<a-input placeholder="请输入是否申请售后0否1是" v-model="queryParam.isAfterSale"/>
</a-form-item>
</a-col>
<a-col :md="5" :sm="15"> <a-col :md="5" :sm="15">
<a-form-item label="订单号"> <a-form-item label="订单号">
<a-input placeholder="请输入订单号" v-model="queryParam.oderNumber"/> <a-input placeholder="请输入订单号" v-model="queryParam.oderNumber"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15">
<a-form-item label="订单价格">
<a-input placeholder="请输入订单价格" v-model="queryParam.orderMoney"/>
</a-form-item>
</a-col>
<a-col :md="5" :sm="15">
<a-form-item label="订单取消原因">
<a-input placeholder="请输入订单取消原因" v-model="queryParam.cancelResaon"/>
</a-form-item>
</a-col>
<a-col :md="5" :sm="15">
<a-form-item label="会议室id">
<a-input placeholder="请输入会议室id" v-model="queryParam.meetingId"/>
</a-form-item>
</a-col>
<a-col :md="5" :sm="15">
<a-form-item label="备注">
<a-input placeholder="请输入备注" v-model="queryParam.remake"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24"> <a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons"> <span class="table-page-search-submitButtons">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button> <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
@ -151,10 +111,6 @@
title: '预约状态', title: '预约状态',
dataIndex: 'stauts' dataIndex: 'stauts'
}, },
{
title: '是否申请售后0否1是',
dataIndex: 'isAfterSale'
},
{ {
title: '订单号', title: '订单号',
dataIndex: 'oderNumber' dataIndex: 'oderNumber'
@ -164,48 +120,9 @@
dataIndex: 'orderMoney' dataIndex: 'orderMoney'
}, },
{ {
title: '订单取消时间', title: '参观目的',
dataIndex: 'cancelTime',
sorter: true
},
{
title: '订单取消原因',
dataIndex: 'cancelResaon'
},
{
title: '参观目的1领导视察2参观学习3合作调研4同行交流',
dataIndex: 'visitType' dataIndex: 'visitType'
}, },
{
title: '讲解需求1需要0不需要',
dataIndex: 'explainNeedType'
},
{
title: '会议室需求1需要0不需要',
dataIndex: 'meetingNeedType'
},
{
title: '会议室id',
dataIndex: 'meetingId'
},
{
title: '摄影需求1需要0不需要',
dataIndex: 'photographType'
},
{
title: '预约-开始时间',
dataIndex: 'startTime',
sorter: true
},
{
title: '预约-结束时间',
dataIndex: 'endTime',
sorter: true
},
{
title: '备注',
dataIndex: 'remake'
},
{ {
title: '操作', title: '操作',
width: '200px', width: '200px',

View File

@ -94,7 +94,7 @@ export default {
columns: [ columns: [
{ {
title: '类型', title: '类型',
dataIndex: 'type' dataIndex: 'typeName'
}, },
{ {
title: '名称', title: '名称',
@ -104,28 +104,21 @@ export default {
title: '容纳人数', title: '容纳人数',
dataIndex: 'capacityNum' dataIndex: 'capacityNum'
}, },
{
title: '扩充人数',
dataIndex: 'expandNum'
},
{
title: '室内图片url',
dataIndex: 'indoorPicUrl'
},
{ {
title: '开始时间', title: '开始时间',
dataIndex: 'startTime', dataIndex: 'startTime',
sorter: true sorter: true
}, },
{ {
title: '结束时间', title: '结束时间',
dataIndex: 'endTime', dataIndex: 'endDate',
sorter: true sorter: true
}, },
{ // {
title: '价格单位1小时、2天、3半天', // title: '123',
dataIndex: 'priceUnit' // dataIndex: 'priceUnit'
}, // },
{ {
title: '金额', title: '金额',
dataIndex: 'money' dataIndex: 'money'

View File

@ -8,31 +8,16 @@
<a-input placeholder='请输入名称' v-model='queryParam.name' /> <a-input placeholder='请输入名称' v-model='queryParam.name' />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='品牌'> <!-- <a-form-item label='品牌'>-->
<a-input placeholder='请输入品牌' v-model='queryParam.brand' /> <!-- <a-input placeholder='请输入品牌' v-model='queryParam.brand' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'> <!-- <a-col :md='5' :sm='15'>-->
<a-form-item label='规格'> <!-- <a-form-item label='规格'>-->
<a-input placeholder='请输入规格' v-model='queryParam.specification' /> <!-- <a-input placeholder='请输入规格' v-model='queryParam.specification' />-->
</a-form-item> <!-- </a-form-item>-->
</a-col> <!-- </a-col>-->
<a-col :md='5' :sm='15'>
<a-form-item label='图片url'>
<a-input placeholder='请输入图片url' v-model='queryParam.picUrl' />
</a-form-item>
</a-col>
<a-col :md='5' :sm='15'>
<a-form-item label='附件url'>
<a-input placeholder='请输入附件url' v-model='queryParam.fileUrl' />
</a-form-item>
</a-col>
<a-col :md='5' :sm='15'>
<a-form-item label='删除标志'>
<a-input placeholder='请输入删除标志' v-model='queryParam.delFlag' />
</a-form-item>
</a-col>
<a-col :md='8' :sm='24'> <a-col :md='8' :sm='24'>
<span class='table-page-search-submitButtons'> <span class='table-page-search-submitButtons'>
<a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button> <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
@ -117,14 +102,14 @@ export default {
title: '附件url', title: '附件url',
dataIndex: 'fileUrl' dataIndex: 'fileUrl'
}, },
{ // {
title: '备注', // title: '',
dataIndex: 'remark' // dataIndex: 'remark'
}, // },
{ // {
title: '删除标志', // title: '',
dataIndex: 'delFlag' // dataIndex: 'delFlag'
}, // },
{ {
title: '操作', title: '操作',
width: '200px', width: '200px',

View File

@ -32,33 +32,6 @@
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单号"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单号">
<a-input placeholder="订单号" v-decorator="['outTradeNo']"/> <a-input placeholder="订单号" v-decorator="['outTradeNo']"/>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否申请售后0否1是">
<a-input placeholder="是否申请售后0否1是" v-decorator="['isAfterSale']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单取消原因">
<a-input placeholder="订单取消原因" v-decorator="['cancelResaon']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="售后单号">
<a-input placeholder="售后单号" v-decorator="['afterNumber']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建者">
<a-input placeholder="创建者" v-decorator="['createBy']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="更新者">
<a-input placeholder="更新者" v-decorator="['updateBy']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
<a-input placeholder="备注" v-decorator="['remake']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商户id">
<a-input placeholder="商户id" v-decorator="['mchid']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品描述">
<a-input placeholder="商品描述" v-decorator="['description']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预支付交易会话id">
<a-input placeholder="预支付交易会话id" v-decorator="['prepayId']"/>
</a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
</template> </template>

View File

@ -118,7 +118,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
setFieldsValue({ setFieldsValue({
// //
smallPic: result.fileName indoorPicUrl: result.fileName
}) })
}) })
// Get this url from response in real world. // Get this url from response in real world.

View File

@ -24,30 +24,54 @@
<a-input placeholder="规格" v-decorator="['specification']"/> <a-input placeholder="规格" v-decorator="['specification']"/>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图片url"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图片url">
<a-input placeholder="图片url" v-decorator="['picUrl']"/> <!-- <a-input placeholder="图片url" v-decorator="['picUrl']"/>-->
<a-upload
v-decorator="['picUrl']"
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"/>
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text"> 上传 </div>
</div>
</a-upload>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件url"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="附件url">
<a-input placeholder="附件url" v-decorator="['fileUrl']"/> <a-upload
v-decorator="['fileUrl']"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:action="uploadUrl"
:headers="headers"
:before-upload="beforeUpload"
@change="handleChange1"
>
<img v-if="imageUrl1" :src="imageUrl1" style="width: 102px; height: 102px"/>
<div v-else>
<a-icon :type="loading1 ? 'loading' : 'plus'" />
<div class="ant-upload-text"> 上传 </div>
</div>
</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="['remark']"/> <a-input placeholder="备注" v-decorator="['remark']"/>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="删除标志">
<a-input placeholder="删除标志" v-decorator="['delFlag']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建者">
<a-input placeholder="创建者" v-decorator="['createBy']"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="更新者">
<a-input placeholder="更新者" v-decorator="['updateBy']"/>
</a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import {saveRoomItem} from '@/api/admin/meeting/roomItem' import {saveRoomItem} from '@/api/admin/meeting/roomItem'
import pick from 'lodash.pick' import pick from 'lodash.pick'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default { export default {
name: 'RoomItemModal', name: 'RoomItemModal',
props: { props: {
@ -65,6 +89,14 @@ export default {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 16 } sm: { span: 16 }
}, },
uploadUrl: process.env.VUE_APP_API_BASE_URL + '/dfs/upload',
headers: {
Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
},
imageUrl: '',
imageUrl1: '',
loading: false,
loading1: false,
confirmLoading: false, confirmLoading: false,
mdl: {}, mdl: {},
form: this.$form.createForm(this) form: this.$form.createForm(this)
@ -75,6 +107,61 @@ export default {
created () { created () {
}, },
methods: { methods: {
beforeUpload (file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt2M = file.size / 1024 < 500
if (!isLt2M) {
this.$message.error('图片必须小于 500kb!')
}
return isJpgOrPng && isLt2M
},
handleChange (info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
const { form: { setFieldsValue } } = this
const result = info.file.response
//
this.$nextTick(() => {
setFieldsValue({
//
picUrl: result.fileName
})
})
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.imageUrl = imageUrl
this.loading = false
})
}
},
handleChange1 (info) {
if (info.file.status === 'uploading') {
this.loading1 = true
return
}
if (info.file.status === 'done') {
const { form: { setFieldsValue } } = this
const result = info.file.response
//
this.$nextTick(() => {
setFieldsValue({
//
fileUrl: result.fileName
})
})
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.imageUrl1 = imageUrl
this.loading1 = false
})
}
},
add () { add () {
this.form.resetFields() this.form.resetFields()
this.edit({ id: 0 }) this.edit({ id: 0 })
@ -124,4 +211,9 @@ export default {
*/ */
} }
} }
function getBase64 (img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
</script> </script>

View File

@ -17,25 +17,43 @@
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务名称"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务名称">
<a-input placeholder="服务名称" v-decorator="['serveName']"/> <a-input placeholder="服务名称" v-decorator="['serveName']"/>
</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="服务类型" v-decorator="['serveType', {initialValue:'0',rules: [{ message: '请选择服务类型' }]}]"> <a-select placeholder="服务类型" v-decorator="['serveType', {rules: [{ message: '请选择服务类型' }]}]">
<a-select-option :value="'1'">免费服务</a-select-option> <a-select-option :value="'1'">免费服务</a-select-option>
<a-select-option :value="'2'">会务服务</a-select-option> <a-select-option :value="'2'">会务服务</a-select-option>
<a-select-option :value="'3'">其他服务</a-select-option> <a-select-option :value="'3'">其他服务</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务时间30分钟起步"> <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务时间30分钟起步">-->
<a-input placeholder="服务时间30分钟起步" v-decorator="['serveTime']"/> <!-- <a-input placeholder="服务时间30分钟起步" v-decorator="['serveTime']"/>-->
<!-- </a-form-item>-->
<a-form-item :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"
>
<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>
</a-upload>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { saveRoomServe } from '@/api/admin/meeting/roomServe' import { saveRoomServe } from '@/api/admin/meeting/roomServe'
import pick from 'lodash.pick' import pick from 'lodash.pick'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default { export default {
name: 'RoomServeModal', name: 'RoomServeModal',
props: { props: {
@ -53,6 +71,12 @@
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 16 } sm: { span: 16 }
}, },
loading: false,
uploadUrl: process.env.VUE_APP_API_BASE_URL + '/dfs/upload',
imageUrl: '',
headers: {
Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
},
confirmLoading: false, confirmLoading: false,
mdl: {}, mdl: {},
form: this.$form.createForm(this) form: this.$form.createForm(this)
@ -63,6 +87,39 @@
created () { created () {
}, },
methods: { methods: {
beforeUpload (file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!')
}
const isLt2M = file.size / 1024 < 500
if (!isLt2M) {
this.$message.error('图片必须小于 500kb!')
}
return isJpgOrPng && isLt2M
},
handleChange (info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
const { form: { setFieldsValue } } = this
const result = info.file.response
//
this.$nextTick(() => {
setFieldsValue({
//
pic: result.fileName
})
})
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.imageUrl = imageUrl
this.loading = false
})
}
},
add () { add () {
this.form.resetFields() this.form.resetFields()
this.edit({ id: 0 }) this.edit({ id: 0 })
@ -112,4 +169,9 @@
*/ */
} }
} }
function getBase64 (img, callback) {
const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img)
}
</script> </script>