mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 09:09:37 +08:00
313 lines
9.6 KiB
Vue
313 lines
9.6 KiB
Vue
<template>
|
||
<a-modal
|
||
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-item>
|
||
<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="['title',{rules: [{ required: true, message: '主题'}]}]"/>
|
||
</a-form-item>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约开始时间">
|
||
<a-date-picker
|
||
format='YYYY-MM-DD HH:mm:ss'
|
||
valueFormat='YYYY-MM-DD HH:mm:ss'
|
||
v-decorator="['startTime',{rules: [{ required: true, message: '预约开始时间'}]}]"
|
||
:show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
|
||
type="date"
|
||
placeholder="选择时间"
|
||
style="width: 100%;"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约开始时间">
|
||
<a-date-picker
|
||
format='YYYY-MM-DD HH:mm:ss'
|
||
valueFormat='YYYY-MM-DD HH:mm:ss'
|
||
v-decorator="['endDate',{rules: [{ required: true, message: '预约结束时间'}]}]"
|
||
:show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
|
||
type="date"
|
||
placeholder="选择时间"
|
||
style="width: 100%;"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拟参观区域">
|
||
<a-select
|
||
mode="multiple"
|
||
placeholder="拟参观区域"
|
||
style="width: 200px"
|
||
@change="handleChange"
|
||
@popupScroll="popupScroll"
|
||
v-decorator="['visitArea',{rules: [{ required: true, message: '请选择拟参观区域'}]}]"
|
||
>
|
||
<a-select-option value="展厅(2楼)">
|
||
展厅(2楼)
|
||
</a-select-option>
|
||
<a-select-option value="公共服务配套区(15楼)">
|
||
公共服务配套区(15楼)
|
||
</a-select-option>
|
||
<a-select-option value="中电郑州、生态企业(16楼)">
|
||
中电郑州、生态企业(16楼)
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约人员">
|
||
<a-button type="dashed" icon="plus" @click="addRow" class="addRowBtn">
|
||
新增一行
|
||
</a-button>
|
||
</a-form-item>
|
||
<div style='margin-left: 80px'>
|
||
<div class="dynamic-wrap" :style="{ maxHeight: wrapHeight + 'px' }">
|
||
<div v-for="item in keysList" :key="item">
|
||
<a-row :gutter="24">
|
||
<a-col :span="6">
|
||
<a-form-item label="名称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
|
||
<a-input
|
||
placeholder="请填写名称"
|
||
v-decorator="[
|
||
`${title}Name[${item}]`,
|
||
{
|
||
initialValue: arr[item] ? arr[item].name : undefined,
|
||
rules: [{ required: true, message: '请填职位' }]
|
||
|
||
}
|
||
]"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<a-form-item label="职位" :labelCol="{span: 9}" :wrapperCol="{span: 15}">
|
||
<a-input
|
||
placeholder="请填职位"
|
||
v-decorator="[
|
||
`${title}Age[${item}]`,
|
||
{
|
||
initialValue: arr[item] ? arr[item].job : undefined,
|
||
rules: [{ required: true, message: '请填职位' }]
|
||
}
|
||
]"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<a-form-item label="手机号" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
|
||
<a-input
|
||
placeholder="请填手机号"
|
||
v-decorator="[
|
||
`${title}Phone[${item}]`,
|
||
{
|
||
initialValue: arr[item] ? arr[item].phone : undefined,
|
||
}
|
||
]"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="2" style="padding-left: 0px">
|
||
<a-form-item :labelCol="{span: 0}" :wrapperCol="{span: 24}">
|
||
<template v-if="keysList.length > 1">
|
||
<a-button type="dashed" icon="minus" @click="removeRow(item)" class="minusRowBtn"></a-button>
|
||
</template>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拟参观区域">
|
||
<a-select
|
||
placeholder="选择参观目的"
|
||
style="width: 200px"
|
||
v-decorator="['visitType',{rules: [{ required: true, message: '拟参观区域'}]}]"
|
||
>
|
||
<a-select-option v-for="item in recordOptions" :key="item" :value="item.value">
|
||
{{ item.text }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="讲解需求">
|
||
<a-switch v-decorator="['explainNeedType',{rules: [{ required: true, message: '讲解需求'}]}]" />
|
||
</a-form-item>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会议室需求">
|
||
<a-switch v-decorator="['meetingNeedType',{rules: [{ required: true, message: '会议室需求'}]}]" />
|
||
</a-form-item>
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="摄影需求">
|
||
<a-switch v-decorator="['photographType',{rules: [{ required: true, message: '摄影需求'}]}]" />
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
|
||
|
||
|
||
</template>
|
||
<script>
|
||
import {saveShowroomRecord} from '@/api/admin/meeting/showroomRecord'
|
||
import pick from 'lodash.pick'
|
||
import storage from 'store'
|
||
import moment from 'moment'
|
||
import { getDictArray } from '@/utils/dict'
|
||
|
||
let id = 0;
|
||
export default {
|
||
name: 'ShowroomRecordModal',
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
wrapHeight: { // 表单容器的高度
|
||
type: Number,
|
||
default: 120
|
||
},
|
||
arr: {
|
||
type: Array,
|
||
default: function () {
|
||
return []
|
||
}
|
||
}
|
||
|
||
},
|
||
components: {
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
id: 0,
|
||
keysList: [],
|
||
recordOptions:[],
|
||
visible: false,
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 5 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 16 }
|
||
},
|
||
confirmLoading: false,
|
||
mdl: {},
|
||
form: this.$form.createForm(this)
|
||
}
|
||
},
|
||
beforeCreate () {
|
||
},
|
||
async created () {
|
||
this.form = this.$form.createForm(this)
|
||
this.init()
|
||
const recordData = await getDictArray('visit_type')
|
||
// 下拉选项
|
||
recordData.map(d => {
|
||
this.recordOptions.push({ text: d.dictLabel, value: d.dictValue })
|
||
})
|
||
},
|
||
methods: {
|
||
init () {
|
||
const arr = [0]
|
||
if (this.arr.length !== 0) {
|
||
for (let i = 1; i < (this.arr).length; i++) {
|
||
arr.push(i)
|
||
this.id = this.id + 1
|
||
}
|
||
}
|
||
this.keysList = arr
|
||
},
|
||
// 移除某行
|
||
removeRow (k) {
|
||
if (this.keysList.length === 1) { // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
|
||
return
|
||
}
|
||
this.keysList = this.keysList.filter(item => item !== k)
|
||
},
|
||
// 新增一行
|
||
addRow () {
|
||
this.id = this.id + 1
|
||
this.keysList = this.keysList.concat(this.id)
|
||
},
|
||
|
||
moment,
|
||
|
||
|
||
handleChange(value) {
|
||
},
|
||
popupScroll(){
|
||
},
|
||
add () {
|
||
this.form.resetFields()
|
||
this.edit({ id: 0 })
|
||
},
|
||
edit (record) {
|
||
this.mdl = Object.assign(record)
|
||
this.visible = true
|
||
this.$nextTick(() => {
|
||
this.form.setFieldsValue(pick(this.mdl, 'id', 'showroomId', 'userId', 'title', 'stauts', 'reservationNumber', 'cancelTime', 'cancelResaon', 'startTime', 'endDate', 'deleteFlag', 'createBy', 'createTime', 'updateBy', 'updateTime', 'remake'))
|
||
})
|
||
},
|
||
handleSubmit (e) {
|
||
console.log(this.keysList)
|
||
|
||
|
||
e.preventDefault()
|
||
this.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
console.log('Received values of form: ', values)
|
||
this.confirmLoading = true
|
||
saveShowroomRecord(values).then(res => {
|
||
if (res.code === 0) {
|
||
this.$message.success('保存成功')
|
||
this.$emit('ok')
|
||
this.visible = false
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('系统错误，请稍后再试')
|
||
}).finally(() => {
|
||
this.confirmLoading = false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
/*
|
||
'selectedRows': function (selectedRows) {
|
||
this.needTotalList = this.needTotalList.map(item => {
|
||
return {
|
||
...item,
|
||
total: selectedRows.reduce( (sum, val) => {
|
||
return sum + val[item.dataIndex]
|
||
}, 0)
|
||
}
|
||
})
|
||
}
|
||
*/
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.dynamic-delete-button {
|
||
cursor: pointer;
|
||
position: relative;
|
||
top: 4px;
|
||
font-size: 24px;
|
||
color: #999;
|
||
transition: all 0.3s;
|
||
}
|
||
.dynamic-delete-button:hover {
|
||
color: #777;
|
||
}
|
||
.dynamic-delete-button[disabled] {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
</style>
|