<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="1000px"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules">
|
<el-form-item label="门禁点分组名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入名称" v-trim/>
|
</el-form-item>
|
<el-form-item label="默认门禁点分组" prop="isDefault">
|
<el-switch
|
v-model="form.isDefault"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
:active-value="0"
|
:inactive-value="1">
|
</el-switch>
|
</el-form-item>
|
<el-form-item label="授权门禁" prop="doorIds">
|
<el-radio-group v-model="form.radio" @input="changeRadio">
|
<el-radio :label="0">全部门禁</el-radio>
|
<el-radio :label="1">部分门禁</el-radio>
|
</el-radio-group>
|
<el-transfer
|
v-if="form.radio === 1"
|
style="margin-top: 15px;"
|
:titles="['未选门禁点', '已选门禁点']"
|
filterable
|
:filter-method="filterMethod"
|
filter-placeholder="请输入门禁点或区域名称"
|
v-model="form.doorIds"
|
class="transfer"
|
:data="device">
|
</el-transfer>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getList } from '@/api/business/device'
|
export default {
|
name: 'OperaDeviceRoleWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
var validatePass = (rule, value, callback) => {
|
if (this.form.radio === 1) {
|
if (value.length === 0) {
|
callback(new Error('请选择门禁设备'))
|
}
|
}
|
callback()
|
};
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
isDefault: 1,
|
doorIds: [],
|
status: 1,
|
radio: 0
|
},
|
device: [],
|
filterMethod(query, item) {
|
if (!query) return item;
|
return item.label.indexOf(query) > -1 || item.area.indexOf(query) > -1;
|
},
|
// 验证规则
|
rules: {
|
name: [
|
{ required: true, message: '请输入门禁组名称' }
|
],
|
doorIds: [
|
{ validator: validatePass, trigger: 'blur' }
|
]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/deviceRole',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
confirm () {
|
this.$refs.form.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
// 调用新建接口
|
this.isWorking = true
|
if (this.form.id == null || this.form.id === '') {
|
const doorNames = []
|
this.form.doorIds.forEach(item => {
|
this.device.forEach(row => {
|
if (item === row.id) {
|
doorNames.push(row.name)
|
}
|
})
|
})
|
this.api.create({
|
name: this.form.name,
|
status: this.form.status,
|
doorNames: doorNames.join(','),
|
type: 2,
|
isDefault: this.form.isDefault,
|
doorIds: this.form.doorIds.join(',')
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('新建成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
// this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
} else {
|
const doorNames = []
|
this.form.doorIds.forEach(item => {
|
this.device.forEach(row => {
|
if (item === row.id) {
|
doorNames.push(row.name)
|
}
|
})
|
})
|
this.api.updateById({
|
id: this.form.id,
|
name: this.form.name,
|
status: this.form.status,
|
isDefault: this.form.isDefault,
|
type: 2,
|
doorNames: doorNames.join(','),
|
doorIds: this.form.doorIds.join(',')
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('修改成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
// this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
}
|
})
|
},
|
// 获取设备
|
getLists () {
|
getList({type:0, isdeleted:0 })
|
.then(res => {
|
this.device = res.map(item => {
|
return {
|
label: item.doorName,
|
area: item.regionPathName,
|
key: item.id
|
}
|
})
|
console.log(this.device)
|
})
|
},
|
changeRadio (e) {
|
this.form.doorIds = []
|
},
|
open (title, target) {
|
this.getLists()
|
this.title = title
|
this.visible = true
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.transfer {
|
height: 600px;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
::v-deep .el-transfer-panel {
|
flex: 1;
|
height: 100%;
|
}
|
|
::v-deep .el-transfer-panel__body {
|
height: 500px;
|
}
|
|
::v-deep .el-transfer-panel__list.is-filterable {
|
height: 480px;
|
}
|
}
|
</style>
|
