|  |  | 
 |  |  | <template> | 
 |  |  |     <GlobalWindow | 
 |  |  |         :title="title" | 
 |  |  |         :visible.sync="visible" | 
 |  |  |         width="70%" | 
 |  |  |         :confirm-working="isWorking" | 
 |  |  |         @confirm="confirm" | 
 |  |  |     > | 
 |  |  |       <p class="tip-warn"><i class="el-icon-warning"></i>提醒:<br> | 
 |  |  |         1.门禁权限配置成功后,授权任务即进入权限下发队列,可前往【人员授权记录】查看下发进度;<br> | 
 |  |  |         2.如果需要清空当前选中人员下发权限,以下【已选门禁点分组】为空提交即可。 | 
 |  |  |       </p> | 
 |  |  |       <p class="tip" v-if="form.names != null">正在为<em>【{{ form.names.map(item => `${item}`).join(',') }}】</em> 配置门禁权限</p> | 
 |  |  |         <el-form :model="form" ref="form" :rules="rules"> | 
 |  |  |             <el-form-item label="门禁有效期:" prop="timeType"> | 
 |  |  |                 <el-radio-group v-model="form.timeType"> | 
 |  |  |                     <el-radio :label="0">长期有效</el-radio> | 
 |  |  |                     <el-radio :label="1">自定义时间</el-radio> | 
 |  |  |                     <el-radio :label="2" v-if="companyType=== 0">培训有效期</el-radio> | 
 |  |  |                 </el-radio-group> | 
 |  |  |                 <div v-if="form.timeType ==1" style="margin-top: 10px" > | 
 |  |  |                   <el-date-picker | 
 |  |  |                       @change="seleTime" | 
 |  |  |                       v-model="time" | 
 |  |  |                       type="datetimerange" | 
 |  |  |                       format="yyyy-MM-dd HH:mm:ss" | 
 |  |  |                       value-format="yyyy-MM-dd HH:mm:ss" | 
 |  |  |                       range-separator="至" | 
 |  |  |                       start-placeholder="开始日期" | 
 |  |  |                       end-placeholder="结束日期"> | 
 |  |  |                   </el-date-picker> | 
 |  |  |                 </div> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="门禁点分组:" prop="roleIds"> | 
 |  |  |                 <el-transfer | 
 |  |  |                     style="margin-top: 15px;font-size: 12px" | 
 |  |  |                     :titles="['未选门禁点分组', '已选门禁点分组']" | 
 |  |  |                     filterable | 
 |  |  |                     :filter-method="filterMethod" | 
 |  |  |                     filter-placeholder="请输入门禁点分组名称" | 
 |  |  |                     v-model="form.roleIds" | 
 |  |  |                     :data="roles"> | 
 |  |  |                 </el-transfer> | 
 |  |  |             </el-form-item> | 
 |  |  |   <GlobalWindow :title="title" :visible.sync="visible" width="900px" :confirm-working="isWorking" @confirm="confirm"> | 
 |  |  |     <p class="tip-warn"><i class="el-icon-warning"></i>提醒:<br> | 
 |  |  |       1.门禁权限配置成功后,授权任务即进入权限下发队列,可前往【人员授权记录】查看下发进度;<br> | 
 |  |  |       2.如果需要清空当前选中人员下发权限,以下【已选门禁点分组】为空提交即可。 | 
 |  |  |     </p> | 
 |  |  |     <p class="tip" v-if="form.names != null">正在为<em>【{{ form.names.map(item => `${item}`).join(',') }}】</em> 配置门禁权限</p> | 
 |  |  |     <el-form :model="form" ref="form" :rules="rules"> | 
 |  |  |       <el-form-item label="门禁有效期:" prop="timeType"> | 
 |  |  |         <el-radio-group v-model="form.timeType"> | 
 |  |  |           <el-radio :label="0">长期有效</el-radio> | 
 |  |  |           <el-radio :label="1">自定义时间</el-radio> | 
 |  |  |           <el-radio :label="2" v-if="companyType === 0">培训有效期</el-radio> | 
 |  |  |         </el-radio-group> | 
 |  |  |         <div v-if="form.timeType == 1" style="margin-top: 10px"> | 
 |  |  |           <el-date-picker @change="seleTime" v-model="time" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" | 
 |  |  |             value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> | 
 |  |  |           </el-date-picker> | 
 |  |  |         </div> | 
 |  |  |       </el-form-item> | 
 |  |  |       <el-form-item label="门禁点分组:" prop="roleIds"> | 
 |  |  |         <el-transfer style="margin-top: 15px;font-size: 12px" :titles="['未选门禁点分组', '已选门禁点分组']" filterable | 
 |  |  |           :filter-method="filterMethod" filter-placeholder="请输入门禁点分组名称" v-model="form.roleIds" class="transfer" | 
 |  |  |           :data="roles"> | 
 |  |  |         </el-transfer> | 
 |  |  |       </el-form-item> | 
 |  |  |  | 
 |  |  |         </el-form> | 
 |  |  |     </GlobalWindow> | 
 |  |  |     </el-form> | 
 |  |  |   </GlobalWindow> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
 |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  | import {getDeviceRoleList} from '@/api/business/device' | 
 |  |  | import { getDeviceRoleList } from '@/api/business/device' | 
 |  |  | export default { | 
 |  |  |   name: 'OperaDeviceRoleWindow', | 
 |  |  |   extends: BaseOpera, | 
 |  |  |   components: { GlobalWindow }, | 
 |  |  |   data () { | 
 |  |  |   data() { | 
 |  |  |     var validateTime = (rule, value, callback) => { | 
 |  |  |       if(this.form.timeType == null  ){ | 
 |  |  |       if (this.form.timeType == null) { | 
 |  |  |         callback(new Error('请填写正确的门禁有效期时间')) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if(this.form.timeType === 1 && (this.form.startTime ==null || this.form.endTime == null)){ | 
 |  |  |           callback(new Error('请填写正确的门禁有效期时间')) | 
 |  |  |           return | 
 |  |  |       if (this.form.timeType === 1 && (this.form.startTime == null || this.form.endTime == null)) { | 
 |  |  |         callback(new Error('请填写正确的门禁有效期时间')) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       callback() | 
 |  |  |     }; | 
 |  |  |     } | 
 |  |  |     return { | 
 |  |  |       // 表单数据 | 
 |  |  |      time:null, | 
 |  |  |       companyType:1, | 
 |  |  |       time: null, | 
 |  |  |       companyType: 1, | 
 |  |  |       form: { | 
 |  |  |         ids: [], | 
 |  |  |         names: [], | 
 |  |  |         timeType: 0, | 
 |  |  |         roleIds: [], | 
 |  |  |         status: 1, | 
 |  |  |         startTime:null, | 
 |  |  |         endTime:null, | 
 |  |  |         startTime: null, | 
 |  |  |         endTime: null, | 
 |  |  |         radio: 0 | 
 |  |  |       }, | 
 |  |  |       roles:[], | 
 |  |  |       roles: [], | 
 |  |  |       rules: { | 
 |  |  |       // 验证规则 | 
 |  |  |         // 验证规则 | 
 |  |  |         timeType: [ | 
 |  |  |           { required: true, validator: validateTime,message: '请选中门禁有效期' } | 
 |  |  |           { required: true, validator: validateTime, message: '请选中门禁有效期' } | 
 |  |  |         ], | 
 |  |  |         startTime: [ | 
 |  |  |           { validator: validateTime, trigger: 'blur' } | 
 |  |  | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |   created() { | 
 |  |  |     this.config({ | 
 |  |  |       api: '/business/member', | 
 |  |  |       'field.id': 'id' | 
 |  |  | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     filterMethod(query, item) { | 
 |  |  |       if (!query) return item; | 
 |  |  |       return item.label.indexOf(query) > -1 ; | 
 |  |  |       if (!query) return item | 
 |  |  |       return item.label.indexOf(query) > -1 | 
 |  |  |     }, | 
 |  |  |     seleTime (e) { | 
 |  |  |       if(e && e.length >= 2){ | 
 |  |  |     seleTime(e) { | 
 |  |  |       if (e && e.length >= 2) { | 
 |  |  |         this.form.startTime = e[0] | 
 |  |  |         this.form.endTime = e[1] | 
 |  |  |       }else{ | 
 |  |  |       } else { | 
 |  |  |         this.form.startTime = null | 
 |  |  |         this.form.endTime = null | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     confirm () { | 
 |  |  |     confirm() { | 
 |  |  |       this.$refs.form.validate((valid) => { | 
 |  |  |         if (!valid) { | 
 |  |  |           return | 
 |  |  |         } | 
 |  |  |         if (this.form.roleIds == null || this.form.roleIds.length == 0) { | 
 |  |  |           this.$dialog.actionConfirm('权限为空,提交后即清除所选人员已分配权限!请谨慎操作', '您确认进行该操作吗?') | 
 |  |  |               .then(() => { | 
 |  |  |                 this.confirmDo(); | 
 |  |  |               }) | 
 |  |  |               .catch(() => {}) | 
 |  |  |  | 
 |  |  |             .then(() => { | 
 |  |  |               this.confirmDo() | 
 |  |  |             }) | 
 |  |  |             .catch(() => { }) | 
 |  |  |         } else { | 
 |  |  |           this.confirmDo(); | 
 |  |  |           this.confirmDo() | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     confirmDo(){ | 
 |  |  |         // 调用新建接口 | 
 |  |  |         this.isWorking = true | 
 |  |  |         this.api.batchRoleAuth({ | 
 |  |  |           ids: this.form.ids, | 
 |  |  |           timeType: this.form.timeType, | 
 |  |  |           startTime: this.form.startTime, | 
 |  |  |           endTime: this.form.endTime, | 
 |  |  |           roleIds: this.form.roleIds | 
 |  |  |     confirmDo() { | 
 |  |  |       // 调用新建接口 | 
 |  |  |       this.isWorking = true | 
 |  |  |       this.api.batchRoleAuth({ | 
 |  |  |         ids: this.form.ids, | 
 |  |  |         timeType: this.form.timeType, | 
 |  |  |         startTime: this.form.startTime, | 
 |  |  |         endTime: this.form.endTime, | 
 |  |  |         roleIds: this.form.roleIds | 
 |  |  |       }) | 
 |  |  |         .then(() => { | 
 |  |  |           this.visible = false | 
 |  |  |           this.$tip.apiSuccess('授权成功,可前往【人员授权记录】查看下发进度') | 
 |  |  |           this.$emit('success') | 
 |  |  |         }) | 
 |  |  |             .then(() => { | 
 |  |  |               this.visible = false | 
 |  |  |               this.$tip.apiSuccess('授权成功,可前往【人员授权记录】查看下发进度') | 
 |  |  |               this.$emit('success') | 
 |  |  |             }) | 
 |  |  |             .catch(e => { | 
 |  |  |               this.$tip.apiFailed(e) | 
 |  |  |             }) | 
 |  |  |             .finally(() => { | 
 |  |  |               this.isWorking = false | 
 |  |  |             }) | 
 |  |  |       }, | 
 |  |  |         .catch(e => { | 
 |  |  |           //  this.$tip.apiFailed(e) | 
 |  |  |         }) | 
 |  |  |         .finally(() => { | 
 |  |  |           this.isWorking = false | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     // 获取设备 | 
 |  |  |     getLists (){ | 
 |  |  |       getDeviceRoleList({type:2}) | 
 |  |  |     getLists() { | 
 |  |  |       getDeviceRoleList({ type: 2 }) | 
 |  |  |         .then(res => { | 
 |  |  |           this.roles = res.map(item => { | 
 |  |  |             return { | 
 |  |  | 
 |  |  |           }) | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     open (title, ids,names,companyType) { | 
 |  |  |     open(title, ids, names, companyType) { | 
 |  |  |       this.roles = [] | 
 |  |  |       this.getLists() | 
 |  |  |       this.title = title | 
 |  |  | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         this.$refs.form.resetFields() | 
 |  |  |         this.form[this.configData['field.id']] = null | 
 |  |  |         this.form.ids = ids; | 
 |  |  |         this.form.names =names; | 
 |  |  |         this.form.ids = ids | 
 |  |  |         this.form.names = names | 
 |  |  |  | 
 |  |  |         console.log(names) | 
 |  |  |       }) | 
 |  |  | 
 |  |  |  | 
 |  |  | <style scoped lang="scss"> | 
 |  |  | @import "@/assets/style/variables.scss"; | 
 |  |  |  | 
 |  |  | // 角色配置 | 
 |  |  | .global-window { | 
 |  |  |   .tip { | 
 |  |  | 
 |  |  |       font-weight: bold; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .tip-warn { | 
 |  |  |     margin: 4px 0 12px 0; | 
 |  |  |     font-size: 12px; | 
 |  |  |     color: #999; | 
 |  |  |  | 
 |  |  |     i { | 
 |  |  |       color: orange; | 
 |  |  |       margin-right: 4px; | 
 |  |  | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .el-transfer-panel { | 
 |  |  |   width: 350px !important; | 
 |  |  |  | 
 |  |  | .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> |