|  |  | 
 |  |  | <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" | 
 |  |  |                     class="transfer" | 
 |  |  |                     :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> | 
 |  |  | 
 |  |  |   name: 'OperaDeviceRoleWindow', | 
 |  |  |   extends: BaseOpera, | 
 |  |  |   components: { GlobalWindow }, | 
 |  |  |   data () { | 
 |  |  |   data() { | 
 |  |  |     var validateTime = (rule, value, callback) => { | 
 |  |  |       if (this.form.timeType == null) { | 
 |  |  |         callback(new Error('请填写正确的门禁有效期时间')) | 
 |  |  | 
 |  |  |       }, | 
 |  |  |       roles: [], | 
 |  |  |       rules: { | 
 |  |  |       // 验证规则 | 
 |  |  |         // 验证规则 | 
 |  |  |         timeType: [ | 
 |  |  |           { required: true, validator: validateTime, message: '请选中门禁有效期' } | 
 |  |  |         ], | 
 |  |  | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |   created() { | 
 |  |  |     this.config({ | 
 |  |  |       api: '/business/member', | 
 |  |  |       'field.id': 'id' | 
 |  |  |     }) | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     filterMethod (query, item) { | 
 |  |  |     filterMethod(query, item) { | 
 |  |  |       if (!query) return item | 
 |  |  |       return item.label.indexOf(query) > -1 | 
 |  |  |     }, | 
 |  |  |     seleTime (e) { | 
 |  |  |     seleTime(e) { | 
 |  |  |       if (e && e.length >= 2) { | 
 |  |  |         this.form.startTime = e[0] | 
 |  |  |         this.form.endTime = e[1] | 
 |  |  | 
 |  |  |         this.form.endTime = null | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     confirm () { | 
 |  |  |     confirm() { | 
 |  |  |       this.$refs.form.validate((valid) => { | 
 |  |  |         if (!valid) { | 
 |  |  |           return | 
 |  |  | 
 |  |  |             .then(() => { | 
 |  |  |               this.confirmDo() | 
 |  |  |             }) | 
 |  |  |             .catch(() => {}) | 
 |  |  |             .catch(() => { }) | 
 |  |  |         } else { | 
 |  |  |           this.confirmDo() | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     confirmDo () { | 
 |  |  |     confirmDo() { | 
 |  |  |       // 调用新建接口 | 
 |  |  |       this.isWorking = true | 
 |  |  |       this.api.batchRoleAuth({ | 
 |  |  | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     // 获取设备 | 
 |  |  |     getLists () { | 
 |  |  |     getLists() { | 
 |  |  |       getDeviceRoleList({ type: 2 }) | 
 |  |  |         .then(res => { | 
 |  |  |           this.roles = res.map(item => { | 
 |  |  | 
 |  |  |           }) | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     open (title, ids, names, companyType) { | 
 |  |  |     open(title, ids, names, companyType) { | 
 |  |  |       this.roles = [] | 
 |  |  |       this.getLists() | 
 |  |  |       this.title = title | 
 |  |  | 
 |  |  |  | 
 |  |  | <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; | 
 |  |  | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .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; | 
 |  |  |     } | 
 |  |  | .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> |