ll

liukangdong

2025-03-11 1f700ccb3297e1251b7eac7c75ca5ef5b0a59d3e

 admin/src/components/business/OperaMemberRoleWindow.vue

@@ -1,91 +1,73 @@
<template>
    <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"
                    :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' }
@@ -96,7 +78,7 @@
      }
    }
  },
  created () {
  created() {
    this.config({
      api: '/business/member',
      'field.id': 'id'
@@ -104,60 +86,59 @@
  },
  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 {
@@ -168,7 +149,7 @@
          })
        })
    },
    open (title, ids,names,companyType) {
    open(title, ids, names, companyType) {
      this.roles = []
      this.getLists()
      this.title = title
@@ -178,8 +159,8 @@
      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)
      })
@@ -190,6 +171,7 @@

<style scoped lang="scss">
@import "@/assets/style/variables.scss";

// 角色配置
.global-window {
  .tip {
@@ -199,10 +181,12 @@
      font-weight: bold;
    }
  }

  .tip-warn {
    margin: 4px 0 12px 0;
    font-size: 12px;
    color: #999;

    i {
      color: orange;
      margin-right: 4px;
@@ -212,7 +196,25 @@
    }
  }
}
.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>