client-base-v5/src/workflow/WorkflowUserDefine.vue

<template>
  <div>
    <div class="page-header">
      <h4 style="display: inline-block">
        {{ $t("lang.workflowUserDefine.approve") }}
      </h4>
    </div>


    <div>
      <div>
        <div
          v-for="userSelectDefine in userSelectDefineList"
          :key="userSelectDefine.nodeId"
        >
          <UserSelectDefine
            ref="userSelectDefine"
            :user-select-define="userSelectDefine"
          />
        </div>

        <div>
          <div>{{ $t("lang.workflowUserDefine.copyUser") }}</div>
          <a-select
            v-model:value="copyUserIds"
            mode="multiple"
            style="width: 100%"
            :options="copyUserList"
            :filter-option="false"
            :not-found-content="fetching ? undefined : null"
            :field-names="{ label: 'text', value: 'id' }"
            @search="handleChange"
          >
            <template v-if="fetching" #notFoundContent>
              <a-spin size="small" />
            </template>
          </a-select>
        </div>

        <div style="margin-top: 10px">
          <a-button type="primary" @click="apply">
            {{ $t("lang.workflowUserDefine.submit") }}
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';
import WorkflowResource from '../api/workflow/WorkflowResource.js';


import UserSelectDefine from './UserSelectDefine.vue';

import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';

import UserResource from '../api/base/UserResource.js';

export default {

  components: {
   
    UserSelectDefine,
    vSelect,
  },
  // 工作流定义Id
  props: {
    workFlow: {
      type: Object,
      default: function(){
        return null;
      },
    },
    modelData: {
      type: Object,
      default: function(){
        return null;
      },
    },
  },
  emits: ['apply'],

  data: function () {
    this.Common = Common;
    return {
      userSelectDefineList: [],
      copyUsers: [],
      whereClause: 'organization.id IN (:EnvOrganizationIdList)',
      // 抄送人Id
      copyUserIds: [],
      copyUserList: [],
      fetching: false,
    };
  },

  mounted: function () {
    var _self = this;
    _self.calculateUserSelect();
    _self.listInGroupCompanyByCondition(null);
  },

  methods: {
    /**
     * 审批
     * @return {void}
     */
    apply: function () {
      this.$emit('apply');
    },
    handleChange: Common.debounce(function (value) {
      this.copyUserList = [];
      this.fetching = true;
      this.listInGroupCompanyByCondition(value);
    },500),
    /**
     * 计算哪些用户选择项可以执行
     */
    calculateUserSelect: function () {
      let _self = this;

      const userSelectCalculateRequest = {
        workflowId: this.workFlow.id,
        modelData: this.modelData,
      };

      WorkflowResource.calculateUserSelect(userSelectCalculateRequest).then(
        successData => {
          if (successData.errorCode == 0 && successData.datas == null) {
            _self.userSelectDefineList.splice(
              0,
              _self.userSelectDefineList.length,
            );
          } else if (successData.errorCode == 0 && successData.datas != null){
            successData.datas.forEach(function (item) {
              item.editable = true;
            });
            _self.userSelectDefineList = successData.datas;
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    /**
     * 获取审批人的数据
     */
    getData: function () {
      let param = {
        userSelectDtos: null,
        copyUsers: null,
      };
      let userSelectDtos = [];
      let userSelectDefineList = this.$refs.userSelectDefine;
      if (userSelectDefineList != null && userSelectDefineList.length > 0) {
        for (let i = 0; i < userSelectDefineList.length; i++) {
          let userTaskDto = userSelectDefineList[i].getData();
          userSelectDtos.push(userTaskDto);
        }
        param.userSelectDtos = userSelectDtos;
      }

      if (Array.isArray(this.copyUserIds)) {
        param.copyUsers = this.copyUserIds;
      } else {
        param.copyUsers = [this.copyUserIds];
      }

      return param;
    },

    /**
     * 根据姓名获取抄送人用户集合
     */
    listInGroupCompanyByCondition: function (search) {
      let _self = this;
      const searchQueryParam = {
        range: {
          start: 0,
          length: 1000,
        },
        conditional: search,
      };

      //修复审批节点选择人员显示文件编码bug
      var selectList = [];
      if (
        this.copyUserIds != undefined &&
        this.copyUserList != undefined &&
        this.copyUserList.length > 0 &&
        this.copyUserIds.length > 0
      ) {
        this.copyUserList.forEach(function (value, index) {
          var id = value.id;
          _self.copyUserIds.forEach(function (item) {
            if (item == id) {
              selectList.push(value);
            }
          });
        });
      }

      UserResource.listInGroupCompanyByCondition(searchQueryParam).then(
        successData => {
          if (successData != null && successData.resultList != null) {
            successData.resultList.forEach(function (user) {
              user.text = user.name + '(' + user.no + ')' + '(';
              if(user.organizations != null && user.organizations.length > 0){
                let isFirst = true;
                user.organizations.forEach(item => {
                  if(isFirst === true){
                    user.text += item.organizationName;
                    isFirst = false;
                  }else{
                    user.text += (',' +  item.organizationName);
                  }
                });
              }
              user.text += ')';
            });
            _self.copyUserList = successData.resultList;
          } else {
            _self.copyUserList = [];
          }
          this.fetching = false;
        },
        errorData => {
          this.fetching = false;
          Common.processException(errorData);
        },
      );
    },
  },
};
</script>

<style scoped>
</style>