laws_weilai/jero-web/src/views/system/modules/RoleAssignment.vue

<template>
  <div class='diolag-area'>
    <a-spin :spinning='spinLoading'>
      <a-form-model
        class='tag-module'
        ref='ruleForm'
        :model='form'
        :rules='rules'
        :label-col='labelCol'
        :wrapper-col='wrapperCol'
      >
        <a-row :gutter='24'>
          <a-col :span='24'>
            <a-form-item :label="$t('RoleAssignment')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select mode="multiple" :placeholder="$t('PleaseSelect')+$t('RoleAssignment')" v-model:value="selectedRole" @change='selectChange'>
                <a-select-option v-for="(role,roleindex) in roleList" :key="role.id" :value="role.id">
                    <span style="display: inline-block;width: 100%">
                      {{ role.roleName }}
                    </span>
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter='24' v-if='viewshow'>
          <a-col :span='24'>
            <a-form-item :label="$t('NareaOfResponsibility')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-multi-select-tag class="box-input" v-model:value="dutyTerritories"
                                  :placeholder="$t('PleaseSelect')+$t('NareaOfResponsibility')"
                                  :type="'select'"
                                  :triggerChange="false" :dictCode="'duty_territory'"/>
<!--              <a-select mode="multiple" :placeholder="$t('PleaseSelect')+$t('NareaOfResponsibility')" v-model:value="dutyTerritories">-->
<!--                <a-select-option v-for="(role,roleindex) in dictOptions" :key="role.id" :value="role.id">-->
<!--                    <span style="display: inline-block;width: 100%">-->
<!--                      {{ role.roleName }}-->
<!--                    </span>-->
<!--                </a-select-option>-->
<!--              </a-select>-->
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter='24' v-if='viewshowbrand'>
          <a-col :span='24'>
            <a-form-item :label="$t('brand')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-multi-select-tag class="box-input" v-model:value="brands"
                                  :placeholder="$t('PleaseSelect')+$t('brand')"
                                  :type="'select'"
                                  :triggerChange="false" :dictCode="'brand'"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div class='drawer-bootom-button'>
      <a-button style='margin-right: .8rem' @click='handleCancel'>{{ $t('cancel') }}</a-button>
      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>{{ $t('determine') }}</a-button>
    </div>
  </div>
</template>

<script>
import { putAction, postAction, getAction, deleteAction } from '@/api/manage'
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
import axios from 'axios'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import moment from 'moment'
// import eventBUs from '../../common/event'
export default {
  name: 'diolagArea',
  components: {},
  data() {
    return {
      token:Vue.ls.get(ACCESS_TOKEN),
      title: this.$t('add'),
      total: 0,
      selectedRowKeysDate: {},
      loading: false,
      editId: '',
      newVisible: false,
      selectedRole: undefined,
      dutyTerritories: undefined,
      brands: undefined,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      form: {},
      rules: {},
      areaTable: [],
      flag: false,  //表单提交标识
      spinLoading: false,
      confirmLoading: false,
      viewshow: false,
      viewshowbrand: false,
      selectedRowKeys: [],
      roleList: [],
      dictOptions: [],
      defaultValue: undefined
    }
  },
  props: {
    selectedRowKeysArray: {
      type: Array,
      default: [],
      require: true
    }
  },
  mounted() {
    this.loadData()
    this.initDictData()
  },
  methods: {
    initDictData() {
      //优先从缓存中读取字典配置
      if (getDictItemsFromCache(this.dictCode)) {
        this.dictOptions = getDictItemsFromCache(this.dictCode)
        return
      }

      //根据字典Code, 初始化字典数组
      ajaxGetDictItems(this.dictCode, null).then((res) => {
        if (res.success) {
//                console.log(res.result);
          this.dictOptions = res.result
        }
      })
    },
    loadData() {
      this.loading = true
      getAction(`sys/role/queryall`, {}).then(res => {
        if (res.success) {
          this.roleList = [...res.result]
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleCancel() {
      this.$emit('rolevisible', false)
    },
    selectChange(value){
      value.map((item,index) => {
          this.roleList.map((val,index) => {
            if(val.roleCode == 'Viewer' && item == val.id){
              this.$nextTick(() => {
                this.viewshow = true
              })
              return
            } else if(val.roleCode == 'BrandAdministrator' && item == val.id) {
              this.$nextTick(() => {
                this.viewshowbrand = true
              })
              return
            }else{
              this.viewshow = false
            }
          })
      })
      // value.forEach((item,index) => {
      //   console.log(item)
      //     if(item == '1590600516943253506'){
      //       this.viewshow = true
      //     }else{
      //       this.viewshow = false
      //     }
      // })
    },
    //保存
    handleSubmit() {
      let param = {ids: this.selectedRowKeysArray.join(','), selectedroles: `${this.selectedRole.join(',')}`, dutyTerritories: `${this.dutyTerritories}`, brands: `${this.brands}` }
      postAction('/sys/user/setRole', param).then((res) => {
        if (res.success) {
          this.$emit('rolevisible', false)
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/less/common.less';

.diolag-area {
  .table-area {
    margin: 20px 0;

    .action-edit {
      margin-right: 10px;
    }
  }

  .table-del {
    color: red;
  }
}
.drawer-bootom-button{
  display: flex;
  justify-content: center;
}
  ::v-deep .page{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
</style>
<style lang='less'>
.area-module {
  .ant-modal-wrap {
    .ant-modal {
      .ant-modal-content {
        .ant-modal-footer {
          text-align: center;
        }
      }
    }
  }
}

</style>