更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 admin/src/components/business/OperaMemberRoleWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,220 @@
<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" class="transfer"
          :data="roles">
        </el-transfer>
      </el-form-item>

    </el-form>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { getDeviceRoleList } from '@/api/business/device'
export default {
  name: 'OperaDeviceRoleWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data() {
    var validateTime = (rule, value, callback) => {
      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
      }
      callback()
    }
    return {
      // è¡¨å•æ•°æ®
      time: null,
      companyType: 1,
      form: {
        ids: [],
        names: [],
        timeType: 0,
        roleIds: [],
        status: 1,
        startTime: null,
        endTime: null,
        radio: 0
      },
      roles: [],
      rules: {
        // éªŒè¯è§„则
        timeType: [
          { required: true, validator: validateTime, message: '请选中门禁有效期' }
        ],
        startTime: [
          { validator: validateTime, trigger: 'blur' }
        ],
        endTime: [
          { validator: validateTime, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.config({
      api: '/business/member',
      'field.id': 'id'
    })
  },
  methods: {
    filterMethod(query, item) {
      if (!query) return item
      return item.label.indexOf(query) > -1
    },
    seleTime(e) {
      if (e && e.length >= 2) {
        this.form.startTime = e[0]
        this.form.endTime = e[1]
      } else {
        this.form.startTime = null
        this.form.endTime = null
      }
    },
    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(() => { })
        } else {
          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
      })
        .then(() => {
          this.visible = false
          this.$tip.apiSuccess('授权成功，可前往【人员授权记录】查看下发进度')
          this.$emit('success')
        })
        .catch(e => {
          //  this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking = false
        })
    },
    // èŽ·å–设备
    getLists() {
      getDeviceRoleList({ type: 2 })
        .then(res => {
          this.roles = res.map(item => {
            return {
              label: item.name,
              area: item.name,
              key: item.id
            }
          })
        })
    },
    open(title, ids, names, companyType) {
      this.roles = []
      this.getLists()
      this.title = title
      this.visible = true
      this.companyType = companyType
      // æ–°å»º
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form[this.configData['field.id']] = null
        this.form.ids = ids
        this.form.names = names

        console.log(names)
      })
    }
  }
}
</script>

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

// è§’色配置
.global-window {
  .tip {
    em {
      font-style: normal;
      color: $primary-color;
      font-weight: bold;
    }
  }

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

    i {
      color: orange;
      margin-right: 4px;
      font-size: 14px;
      position: relative;
      top: 1px;
    }
  }
}

.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>