addRole.vue 6.53 KB
<template>
  <dee-dialog
    :dialog-visible="dialogVisible"
    width="60%"
    title="新增角色及成员"
    @handleClose="handleClose"
  >
    <div class="edit-property-com">
      <dee-form
        ref="editForm"
        :key="formKey"
        :form="form"
        :form-data="editData"
        form-btn-position="center"
        :rules="formRules"
        :inline="true"
      >
        <span style="display:flex">
          <el-button
            type="primary"
            class="searchBtn"
            @click="handleSubmit"
          >确定</el-button>

          <el-button
            class="searchBtn"
            @click="handleClose"
          >取消</el-button>
        </span>
      </dee-form>
    </div>
  </dee-dialog>

</template>
<script>
import { editAttr, saveAttr, getUsersByAccount, addOrUpdataTeam } from '@/api/globalProperties'
export default {
  name: 'AddRole',
  components: { },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    basicData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      allOrgNames: [],
      formKey: 0,
      form: {
        type: '1',
        teamRole: ''
      },
      roleOptions: [],
      userNameList: [],
      formRules: {
        // name: [
        //   { required: true, message: '请输入', trigger: 'blur' },
        //   { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        // ],
        // displayName: [
        //   { required: true, message: '请输入', trigger: 'blur' },
        //   { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        // ],
        teamRole: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        userId: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    editData: function() {
      return [
        {
          data: [
            {
              key: 'type',
              title: '添加类型',
              component: {
                name: 'el-select',
                options: [
                  { label: '用户', value: '1' },
                  { label: '角色', value: '2' }
                ]
              }
            },
            {
              key: 'teamRole',
              title: '选择角色',
              component: {
                name: 'el-select',
                options: this.roleOptions,
                multiple: this.form.type === '2'
              }
            },
            {
              key: 'userId',
              title: '选择人员',
              component: {
                obscure: this.form.type === '2',
                multipleLimit: -1,
                placeholder: '张三(ZS9090)',
                size: 'medium',
                name: 'el-select',
                multiple: true,
                disabled: false,
                filterable: true,
                clearable: true,
                remote: true,
                options: this.userNameList,
                remoteMethod: (query) => {
                  if (query.length > 1) {
                    const params = {
                      userAccount: query.trim()
                    }
                    getUsersByAccount(params).then(res => {
                      if (res.items) {
                        this.changeUserList(res.items)
                      }
                    })
                  }
                }
              }
            }
          ]
        }
      ]
    }
  },
  watch: {
    'form.type'(val) {
      if (val === '1' && this.form.teamRole) {
        this.$set(this.form, 'teamRole', '')
      } else if (val === '2' && this.form.teamRol) {
        this.$set(this.form, 'teamRole', [])
      }
      this.formKey++
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    changeUserList(items) {
      const userNameList = items.map(item => {
        return {
          label: item.userName + '(' + item.userAccount + ')',
          value: item.id,
          style: { display: 'block' }
        }
      })
      this.userNameList.forEach(user => {
        const isInclud = userNameList.find((item, index) => {
          const bool = item.value === user.value
          if (bool) {
            userNameList.splice(index, 1)
          }
          return bool
        })
        if (!isInclud) {
          user.style = { display: 'none' }
        } else {
          user.style = { display: 'block' }
        }
      })
      this.userNameList.push(...userNameList)
    },
    async getRoleList() {
      this.roleOptions = this.$store.state.dictionaries && this.$store.state.dictionaries.TeamRole ? this.$store.state.dictionaries.TeamRole.default : await this.$utils.getDicListByCode('TeamRole')
    },
    handleSubmit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (this.form.type === '1') {
            this.addTeamFun(this.form)
          } else if (this.form.type === '2') {
            this.form.teamRole.map(item => {
              this.addTeamRoleFun(this.form, item)
            })
          }
        }
      })
    },
    addTeamFun(form) {
      const dxContextTeamMembers = []
      form.userId.map(item => {
        dxContextTeamMembers.push({
          userId: item
        })
      })
      const params = {
        dxContextId: this.basicData.id,
        dxContextIdType: this.basicData.subTypeName,
        teamRole: form.teamRole,
        dxContextTeamMembers
      }
      addOrUpdataTeam(params).then(res => {
        this.handleClose()
        this.$emit('getList', this.node)
      }).then(res => {
        this.$utils.showMessage('保存成功!', 'success')
      })
    },
    addTeamRoleFun(form, teamRole) {
      const params = {
        dxContextId: this.basicData.id,
        dxContextIdType: this.basicData.subTypeName,
        teamRole,
        dxContextTeamMembers: []
      }
      addOrUpdataTeam(params).then(res => {
        this.handleClose()
        this.$emit('getList', this.node)
      }).then(res => {
        this.$utils.showMessage('保存成功!', 'success')
      })
    },
    handleSubmitAjax(form) {
      const fun = this.editProperty ? editAttr : saveAttr
      fun(form).then(res => {
        this.handleClose()
        this.$emit('getList')
      })
    },
    handleClose() {
      this.form = {
        type: '1',
        teamRole: ''
      }
      this.$emit('handleClose')
    },
    handleAdd() {
      this.$emit('handleAdd')
    }
  }
}
</script>

<style lang="scss" >

</style>