<template>
|
<a-modal
|
:title='title'
|
:width='1200'
|
:visible='visible'
|
:confirmLoading='confirmLoading'
|
@ok='handleOk'
|
@cancel='handleCancel'>
|
<template slot='footer'>
|
<a-popconfirm title='确定放弃编辑？' @confirm='handleCancel' okText='确定' cancelText='取消'>
|
<a-button style='margin-right: .8rem'>取消</a-button>
|
</a-popconfirm>
|
<a-button type='primary' :loading='confirmLoading' @click='handleOk()'>
|
保存
|
</a-button>
|
</template>
|
|
|
<a-spin :spinning='confirmLoading'>
|
<a-form-model ref='form' :label-col='labelCol' :wrapper-col='wrapperCol' :model='model'
|
:rules='validatorRules'>
|
<!-- 主表单区域 -->
|
<a-row class='form-row' :gutter='16'>
|
|
<a-col :lg='8'>
|
<a-form-model-item label="序号">
|
<a-input disabled v-model="model.no" placeholder="请输入房间序号" ></a-input>
|
</a-form-model-item>
|
</a-col>
|
|
<a-col :lg='8'>
|
<a-form-model-item label='选择部门'>
|
<j-select-depart v-model='model.depart' :multi='false' @back='backDepartInfo' :backDepart='true'
|
:treeOpera='true'>>
|
</j-select-depart>
|
</a-form-model-item>
|
</a-col>
|
|
|
<a-col :lg='8'>
|
<a-form-model-item label="房间名">
|
<a-input v-model="model.name" placeholder="请输入房间名" ></a-input>
|
</a-form-model-item>
|
</a-col>
|
|
|
|
</a-row>
|
|
|
<!-- 子表单区域 -->
|
<a-tabs defaultActiveKey='1'>
|
<a-tab-pane tab='选择用户' key='1'>
|
<div>
|
<a-row type='flex' style='margin-bottom:10px' :gutter='16'>
|
<a-col :span='6'>成员</a-col>
|
<a-col :span='6'>座位号</a-col>
|
<a-col :span='6'>座机</a-col>
|
|
<a-col :span='2'>操作</a-col>
|
</a-row>
|
|
<a-row type='flex' style='margin-bottom:10px' :gutter='16'
|
v-for='(item, index) in model.userList' :key='index'>
|
<a-col :span='6' style='display: none'>
|
<a-form-model-item>
|
<a-input placeholder='id' v-model='item.id' />
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='6'>
|
<a-form-model-item :prop="'userList.' + index + '.username'"
|
:rules="[{required: true,message: '请选择成员',trigger: 'blur'}]">
|
<j-search-select-tag
|
disabled
|
placeholder='请选择成员'
|
v-model='item.username'
|
dict='sys_user,realname,username'
|
:pageSize='5'
|
:async='true'>
|
</j-search-select-tag>
|
</a-form-model-item>
|
|
</a-col>
|
|
|
<a-col :span='6'>
|
<a-form-model-item :prop="'userList.' + index + '.seatNo'"
|
:rules="[{required: true,message: '请输入座位号',trigger: 'blur'},{ pattern: /^\d+$|^\d*\.\d+$/g, message: '请输入数字!' }]">
|
<a-input :allowClear='true' :id="'userList.' + index + '.seatNo'"
|
v-model='item.seatNo' style='width: 140px' placeholder='请输入座位号' />
|
</a-form-model-item>
|
</a-col>
|
|
<a-col :span='6'>
|
<a-form-model-item :prop="'userList.' + index + '.seatPhone'"
|
:rules="[{required: true,message: '请输入座机',trigger: 'blur'},{ pattern: /^\d+$|^\d*\.\d+$/g, message: '请输入数字!' }]">
|
<a-input :allowClear='true' :id="'userList.' + index + '.seatPhone'"
|
v-model='item.seatPhone' style='width: 140px' placeholder='请输入座机' />
|
</a-form-model-item>
|
</a-col>
|
|
|
<a-col :span='2'>
|
<a-form-model-item>
|
<a-icon type='minus-circle' @click='delRowCustom(index)' style='fontSize :20px' />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-button type='dashed' style='width: 98%;margin-top: 10px' @click='addRowCustom'>
|
<a-icon type='plus' />
|
添加成员
|
</a-button>
|
</div>
|
</a-tab-pane>
|
|
<a-tab-pane tab='背景色' key='2'>
|
<div style='height: 200px;background-color: gainsboro;padding: 15px' >
|
<h3 class="setting-drawer-index-title">选择背景色</h3>
|
<a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
|
<template slot="title">
|
{{ item.key }}
|
</template>
|
<a-tag :color="item.color" @click="changeColor(item.color)">
|
<a-icon type="check" v-if="item.color == model.bgColor"></a-icon>
|
</a-tag>
|
</a-tooltip>
|
</div>
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
</a-form-model>
|
|
<select-user-modal ref='selectUserModal' @selectOk='selectOK'></select-user-modal>
|
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import { httpAction, getAction, postAction } from '@/api/manage'
|
import JDate from '@/components/jeecg/JDate'
|
import { formatDecimal } from '@/utils/util'
|
import SelectUserListModal from '@views/system/modules/SelectUserListModal'
|
import SelectUserModal from '@views/system/modules/SelectUserModal'
|
|
export default {
|
name: 'RoomSeatModal',
|
components: {
|
SelectUserModal,
|
SelectUserListModal,
|
JDate
|
},
|
data() {
|
return {
|
title: '操作',
|
visible: false,
|
model: {
|
userList: []
|
},
|
colorList:[
|
{
|
key: '薄暮', color: '#F5222D',
|
},
|
{
|
key: '火山', color: '#FA541C',
|
},
|
{
|
key: '日暮', color: '#FAAD14',
|
},
|
{
|
key: '明青', color: '#13C2C2',
|
},
|
{
|
key: '极光绿', color: '#52C41A',
|
},
|
{
|
key: '拂晓蓝（默认）', color: '#1890FF',
|
},
|
{
|
key: '极客蓝', color: '#2F54EB',
|
},
|
{
|
key: '酱紫', color: '#722ED1',
|
},
|
{
|
key: '白色', color: '#FFFFFF',
|
},
|
],
|
disableSubmit:false,
|
distbonus: 0,
|
distratio: 100,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
confirmLoading: false,
|
validatorRules: {
|
username: [
|
{ required: true, message: '人员不能为空!', trigger: 'blur' }
|
],
|
},
|
url: {
|
add: '/hrm/seat/addBatch',
|
edit: '/hrm/seat/edit',
|
list: '/hrm/seat/list'
|
|
}
|
}
|
},
|
created() {
|
},
|
|
methods: {
|
add(record) {
|
this.edit(record)
|
},
|
edit(record) {
|
//this.model = Object.assign({}, record)
|
this.model = JSON.parse(JSON.stringify(record));
|
this.visible = true
|
console.info(this.model)
|
},
|
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
changeColor (color) {
|
this.model.bgColor = color
|
this.$forceUpdate()
|
},
|
backDepartInfo(info){
|
console.info(info)
|
},
|
|
handleOk() {
|
if(this.disableSubmit){
|
this.close();
|
return
|
}
|
|
const that = this
|
console.info(this.model.userList)
|
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.confirmLoading = true
|
let httpurl = ''
|
let method = ''
|
if (!this.model.id) {
|
return false
|
} else {
|
httpurl += this.url.add
|
method = 'post'
|
}
|
httpAction(httpurl, this.model, method).then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.$emit('ok')
|
that.close()
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
//that.close()
|
})
|
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
addRowCustom() {
|
this.$refs.selectUserModal.add()
|
},
|
selectOK(data) {
|
console.info(data)
|
//先取出已存在所有用户ID
|
var userNames = []
|
if (this.model.userList && this.model.userList.length > 0) {
|
for (var i = 0; i < this.model.userList.length; i++) {
|
userNames.push(this.model.userList[i].username)
|
}
|
}
|
|
for (var a = 0; a < data.length; a++) {
|
if (userNames && userNames.length > 0) {
|
if (userNames.indexOf(data[a].username) != -1) {
|
console.info(data[a].username + '存在')
|
} else {
|
console.info(data[a].username + '不存在')
|
this.model.userList.push({ username: data[a].username,roomId:this.model.id })
|
}
|
} else {
|
this.model.userList.push({ username: data[a].username,roomId:this.model.id})
|
console.info(data[a].username + '不存在2')
|
}
|
}
|
},
|
delRowCustom(index) {
|
this.model.userList.splice(index, 1)
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.ant-btn {
|
padding: 0 10px;
|
margin-left: 3px;
|
}
|
|
.ant-form-item-control {
|
line-height: 0px;
|
}
|
|
/** 主表单行间距 */
|
.ant-form .ant-form-item {
|
margin-bottom: 10px;
|
}
|
|
/** Tab页面行间距 */
|
.ant-tabs-content .ant-form-item {
|
margin-bottom: 0px;
|
}
|
|
.setting-drawer-theme-color-colorBlock {
|
width: 20px;
|
height: 20px;
|
border-radius: 2px;
|
float: left;
|
cursor: pointer;
|
margin-right: 8px;
|
padding-left: 0px;
|
padding-right: 0px;
|
text-align: center;
|
color: #fff;
|
font-weight: 700;
|
|
i {
|
font-size: 14px;
|
}
|
}
|
</style>
|
