ll

liukangdong

2024-10-14 283cb693086791acca0c10ab428d155d9757f393

 admin/src/components/business/OperaMemberRoleWindow.vue

@@ -1,51 +1,32 @@
<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>
@@ -56,7 +37,7 @@
  name: 'OperaDeviceRoleWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
  data() {
    var validateTime = (rule, value, callback) => {
      if (this.form.timeType == null) {
        callback(new Error('请填写正确的门禁有效期时间'))
@@ -84,7 +65,7 @@
      },
      roles: [],
      rules: {
      // 验证规则
        // 验证规则
        timeType: [
          { required: true, validator: validateTime, message: '请选中门禁有效期' }
        ],
@@ -97,18 +78,18 @@
      }
    }
  },
  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]
@@ -117,7 +98,7 @@
        this.form.endTime = null
      }
    },
    confirm () {
    confirm() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
@@ -127,13 +108,13 @@
            .then(() => {
              this.confirmDo()
            })
            .catch(() => {})
            .catch(() => { })
        } else {
          this.confirmDo()
        }
      })
    },
    confirmDo () {
    confirmDo() {
      // 调用新建接口
      this.isWorking = true
      this.api.batchRoleAuth({
@@ -156,7 +137,7 @@
        })
    },
    // 获取设备
    getLists () {
    getLists() {
      getDeviceRoleList({ type: 2 })
        .then(res => {
          this.roles = res.map(item => {
@@ -168,7 +149,7 @@
          })
        })
    },
    open (title, ids, names, companyType) {
    open(title, ids, names, companyType) {
      this.roles = []
      this.getLists()
      this.title = title
@@ -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,22 +196,25 @@
    }
  }
}
.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>