最新版本

jiangping

2024-09-12 c7e5d4db02fb3eeedafb3b292a88a0c946ea7cfa

 admin/src/components/business/OperaDeviceRoleWindow.vue

@@ -2,32 +2,38 @@
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        width="900px"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="名称" prop="name">
            <el-form-item label="门禁点分组名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称" v-trim/>
            </el-form-item>
            <el-form-item label="是否默认" prop="isDefault">
            <el-form-item label="默认门禁点分组" prop="isDefault">
                <el-switch
                    v-model="form.isDefault"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0">
                    :active-value="0"
                    :inactive-value="1">
                </el-switch>
            </el-form-item>
            <el-form-item label="授权门禁" prop="doorIds">
                <el-radio-group v-model="form.doorIds">
                    <el-radio :label="3">全部门禁</el-radio>
                    <el-radio :label="6">部分门禁</el-radio>
                <el-radio-group v-model="form.radio" @input="changeRadio">
                    <el-radio :label="0">全部门禁</el-radio>
                    <el-radio :label="1">部分门禁</el-radio>
                </el-radio-group>
                <el-checkbox-group v-model="form.doorIds">
                    <el-checkbox label="门禁A"></el-checkbox>
                    <el-checkbox label="门禁B"></el-checkbox>
                    <el-checkbox label="门禁C"></el-checkbox>
                </el-checkbox-group>
                <el-transfer
                    v-if="form.radio === 1"
                    style="margin-top: 15px;"
                    :titles="['未选门禁点', '已选门禁点']"
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入门禁点或区域名称"
                    v-model="form.doorIds"
                    :data="device">
                </el-transfer>
            </el-form-item>
        </el-form>
    </GlobalWindow>
@@ -36,21 +42,43 @@
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { getList } from '@/api/business/device'
export default {
  name: 'OperaDeviceRoleWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
    var validatePass = (rule, value, callback) => {
      if (this.form.radio === 1) {
        if (value.length === 0) {
          callback(new Error('请选择门禁设备'))
        }
      }
      callback()
    };
    return {
      // 表单数据
      form: {
        id: null,
        name: '',
        isDefault: '',
        doorIds: ''
        isDefault: 1,
        doorIds: [],
        status: 1,
        radio: 0
      },
      device: [],
      filterMethod(query, item) {
        if (!query) return item;
        return item.label.indexOf(query) > -1 || item.area.indexOf(query) > -1;
      },
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入门禁组名称' }
        ],
        doorIds: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
@@ -59,6 +87,117 @@
      api: '/business/deviceRole',
      'field.id': 'id'
    })
  },
  methods: {
    confirm () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        // 调用新建接口
        this.isWorking = true
        if (this.form.id == null || this.form.id === '') {
          const doorNames = []
          this.form.doorIds.forEach(item => {
            this.device.forEach(row => {
              if (item === row.id) {
                doorNames.push(row.name)
              }
            })
          })
          this.api.create({
            name: this.form.name,
            status: this.form.status,
            doorNames: doorNames.join(','),
            type: 2,
            isDefault: this.form.isDefault,
            doorIds: this.form.doorIds.join(',')
          })
            .then(() => {
              this.visible = false
              this.$tip.apiSuccess('新建成功')
              this.$emit('success')
            })
            .catch(e => {
              // this.$tip.apiFailed(e)
            })
            .finally(() => {
              this.isWorking = false
            })
        } else {
          const doorNames = []
          this.form.doorIds.forEach(item => {
            this.device.forEach(row => {
              if (item === row.id) {
                doorNames.push(row.name)
              }
            })
          })
          this.api.updateById({
            id: this.form.id,
            name: this.form.name,
            status: this.form.status,
            isDefault: this.form.isDefault,
            type: 2,
            doorNames: doorNames.join(','),
            doorIds: this.form.doorIds.join(',')
          })
            .then(() => {
              this.visible = false
              this.$tip.apiSuccess('修改成功')
              this.$emit('success')
            })
            .catch(e => {
              // this.$tip.apiFailed(e)
            })
            .finally(() => {
              this.isWorking = false
            })
        }
      })
    },
    // 获取设备
    getLists () {
      getList({type:0, isdeleted:0 })
        .then(res => {
          this.device = res.map(item => {
            return {
              label: item.doorName,
              area: item.regionPathName,
              key: item.id
            }
          })
          console.log(this.device)
        })
    },
    changeRadio (e) {
      this.form.doorIds = []
    },
    open (title, target) {
      this.getLists()
      this.title = title
      this.visible = true
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
      })
    }
  }
}
</script>

<style>
    .el-transfer-panel {
        width: 350px !important;
    }
</style>