权限申请流程，标准化审批，只能选择“流程与标准化”部门的人员

# Conflicts:
#	src/views/workCenter/permissionApplicationProcess/modules/PersonnelInfoPap.vue
#	src/views/workCenter/permissionApplicationProcess/modules/UserSelectModalPap.vue
#	src/views/workCenter/permissionApplicationProcess/modules/UserSelectionPap.vue

src/views/workCenter/permissionApplicationProcess/PermissionApplicationProcess.vue

@@ -120,7 +120,7 @@
     <div v-show="switchValue === 'user'" class="detail-page-scroll-content p-0">
       <process-detail-list :process-key="processKey">
         <template #personnelInfo>
-          <personnel-info ref="personnelInfo" :data="personnelInfoData" :current-node="currentNode" />
+          <personnel-info-pap ref="personnelInfo" :data="personnelInfoData" :current-node="currentNode" />
         </template>
       </process-detail-list>
     </div>
@@ -146,7 +146,8 @@
 import '@assets/less/common.less'
 import InternalDetailPage from '@comp/InternalDetailPage'
 import ProcessDetailList from '@comp/ProcessDetailList'
-import PersonnelInfo from '@comp/PersonnelInfo'
+// import PersonnelInfo from '@comp/PersonnelInfo'
+import PersonnelInfoPap from './modules/PersonnelInfoPap'
 import BaseInfoTable from '@views/workCenter/permissionApplicationProcess/modules/BaseInfoTable'
 import UserSelectModal from '@comp/selection/UserSelectModal'
 import { WorkCenterMixin } from '@/mixins/WorkCenterMixin'
@@ -163,7 +164,7 @@ import { cloneDeep } from 'lodash'
 const tabList = ['base', 'user']
 export default {
   name: 'PermissionApplicationProcess',
-  components: { UserSelectModal, BaseInfoTable, PersonnelInfo, ProcessDetailList, InternalDetailPage },
+  components: { PersonnelInfoPap, UserSelectModal, BaseInfoTable, ProcessDetailList, InternalDetailPage },
   mixins: [WorkCenterMixin],
   data () {
     return {

src/views/workCenter/permissionApplicationProcess/modules/PersonnelInfoPap.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="person-comp-box">
+    <a-steps direction="vertical">
+      <!--  没有currentNode说明流程已经结束了，图标和线都显示已经走过的样式  -->
+      <a-step v-for="(step, index) in stepsData" :key="step.id" :status="step.nodeName === currentNode ? 'process' : 'wait'"
+              :class="{'red-tail': currentNode ? index < currentNodeIndex : true}">
+        <template #icon>
+          <div class="step-cus-icon"
+               :class="{'step-cus-icon-done': currentNode ? index < currentNodeIndex : true, 'step-cus-icon-now': index === currentNodeIndex}">
+            <i class="iconfont icon-user" />
+          </div>
+        </template>
+        <!--        流程节点标题-->
+        <!--<template #title>-->
+        <!--  <a-tooltip>-->
+        <!--    <template #title>{{ step.nodeName }}</template>-->
+        <!--    <div class="step-title">{{ step.nodeName }}</div>-->
+        <!--  </a-tooltip>-->
+        <!--</template>-->
+        <!--        流程节点选人内容-->
+        <template #description>
+          <div class="personnel-container">
+            <div class="personnel-container-title" :class="{'personnel-container-select-title': index === 0}">
+              <a-tooltip>
+                <template #title>{{ step.nodeName }}</template>
+                <div class="personnel-container-title-text">{{ step.nodeName }}</div>
+              </a-tooltip>
+            </div>
+            <div class="personnel-container-content">
+              <div class="personnel-container-content-text">
+                <template v-if="step.canChoose && index >= currentNodeIndex">
+                  <user-select-by-work-group v-if="step.chooseSource === 'workGroup'"
+                                             v-model="step.linkUserIds"
+                                             :type="step.chooseType"
+                                             :name-str="step.linkUserIds_dictText"
+                                             :filedName="step.variableName"
+                                             @nameChange="nameChange"
+                                             input-type="textarea" />
+                  <user-select-by-contact v-else-if="step.chooseSource === 'contactManage'"
+                                          v-model="step.linkUserIds"
+                                          :type="step.chooseType"
+                                          :name-str="step.linkUserIds_dictText"
+                                          :filedName="step.variableName"
+                                          @nameChange="nameChange"
+                                          input-type="textarea" />
+                  <user-selection v-else-if="step.chooseSource === 'user' && step.nodeName !== '标准化审批'  "
+                                  :type="step.chooseType"
+                                  v-model="step.linkUserIds"
+                                  :name-str="step.linkUserIds_dictText"
+                                  :filedName="step.variableName"
+                                  @nameChange="nameChange"
+                                  input-type="textarea" />
+                  <user-selection-pap v-else-if="step.chooseSource === 'user' && step.nodeName === '标准化审批' "
+                                  :type="step.chooseType"
+                                  v-model="step.linkUserIds"
+                                  :name-str="step.linkUserIds_dictText"
+                                  :filedName="step.variableName"
+                                  @nameChange="nameChange"
+                                  input-type="textarea" />
+                </template>
+                <div class="personnel-container-content-echo-text" v-else>{{ step.userList }}</div>
+              </div>
+              <a-icon type="clock-circle" theme="filled" v-if="index === currentNodeIndex" class="personnel-container-content-icon" />
+              <a-icon type="check"
+                      v-if="index < currentNodeIndex"
+                      class="personnel-container-content-icon personnel-container-content-icon-now" />
+            </div>
+          </div>
+        </template>
+      </a-step>
+    </a-steps>
+  </div>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import UserSelection from '../../../../components/selection/UserSelection'
+import UserSelectionPap from './UserSelectionPap'
+import UserSelectByWorkGroup from '../../../../components/selection/UserSelectByWorkGroup'
+import UserSelectByContact from '../../../../components/selection/UserSelectByContact'
+
+export default {
+  name: 'PersonnelInfoPap',
+  components: { UserSelectByContact, UserSelectByWorkGroup, UserSelection, UserSelectionPap },
+  props: {
+    // 数据
+    data: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    },
+    // 当前节点
+    currentNode: {
+      type: String,
+      required: false,
+      default: null
+    },
+    // 特殊流程需要用indexOf判断的前缀
+    specialProcessNodePrefix: {
+      type: String,
+      required: false,
+      default: null
+    },
+    // 不需要做必填校验的字段,用于应对第一个节点选没选人决定节点跳不跳过的问题
+    notPermissField: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      stepsData: []
+    }
+  },
+  computed: {
+    // 当前节点的位置
+    currentNodeIndex () {
+      if (this.specialProcessNodePrefix) {
+        return this.stepsData.findIndex(tt => tt.xmlNodeId.indexOf(this.specialProcessNodePrefix) === 0)
+      }
+      return this.stepsData.findIndex(tt => tt.xmlNodeId === this.currentNode)
+    }
+  },
+  watch: {
+    data: {
+      handler () {
+        this.stepsData = JSON.parse(JSON.stringify(this.data))
+        console.log('watch this.stepsData', this.stepsData)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted () {
+    console.log('PersonnelInfoPap mounted')
+    console.log('this.stepsData', this.stepsData)
+    console.log('this.data', this.data)
+  },
+  methods: {
+    // 获取人员对象，无校验
+    getDataObj () {
+      const personnelObj = {}
+      // for (let i = 0; i < this.stepsData.length; i++) {
+      //   // 该属性还没有人就给他赋值
+      //   if ((this.stepsData[i].canChoose || i === 0) && !personnelObj[this.stepsData[i].variableName]) {
+      //     personnelObj[this.stepsData[i].variableName] = this.stepsData[i].linkUserIds
+      //     personnelObj[this.stepsData[i].variableName + '_dictText'] = this.stepsData[i].linkUserIds_dictText || this.stepsData[i].userList
+      //   }
+      // }
+      for (const item of this.stepsData) {
+        console.log(item)
+        // 该属性还没有人就给他赋值
+        if (!personnelObj[item.variableName]) {
+          personnelObj[item.variableName] = item.linkUserIds
+          personnelObj[item.variableName + '_dictText'] = item.linkUserIds_dictText || item.userList
+        }
+        // if ((item.canChoose || item.sort === 1) && !personnelObj[item.variableName]) {
+        //   personnelObj[item.variableName] = item.linkUserIds
+        //   personnelObj[item.variableName + '_dictText'] = item.linkUserIds_dictText || item.userList
+        // }
+      }
+      return personnelObj
+    },
+    // 有校验的获取人员对象
+    getDataObjVerify () {
+      let personnelObj = {}
+      console.log(this.stepsData)
+      for (let i = 0; i < this.stepsData.length; i++) {
+        // 该属性还没有人就给他赋值,并且如果minLength有值的话，需要判断选的人数过了这个限制
+        if ((this.stepsData[i].canChoose || i === 0) && !personnelObj[this.stepsData[i].variableName]) {
+          if (this.stepsData[i].minLength) {
+            // 有设置至少选几人
+            if (this.stepsData[i].linkUserIds && this.stepsData[i].linkUserIds.split(',').length >= this.stepsData[i].minLength) {
+              // 说明人数通过了限制
+              personnelObj[this.stepsData[i].variableName] = this.stepsData[i].linkUserIds
+              personnelObj[this.stepsData[i].variableName + '_dictText'] = this.stepsData[i].linkUserIds_dictText || this.stepsData[i].userList
+            } else {
+              // 提示XX节点至少选择XX人
+              this.$message.warning(this.stepsData[i].nodeName + this.$t('node') + this.$t('atLeastSelect') + this.stepsData[i].minLength + this.$t('personnal'))
+              personnelObj[this.stepsData[i].variableName] = ''
+              return
+            }
+          } else {
+            personnelObj[this.stepsData[i].variableName] = this.stepsData[i].linkUserIds
+            personnelObj[this.stepsData[i].variableName + '_dictText'] = this.stepsData[i].linkUserIds_dictText || this.stepsData[i].userList
+          }
+        }
+      }
+      console.log(personnelObj)
+      for (const item in personnelObj) {
+        if (!this.notPermissField.includes(item) && !personnelObj[item]) {
+          // 不在不需要做必填校验的字段里，说明是必填并且没有数据
+          this.$message.warning(this.$t('pleaseEnterPersonnelInfo'))
+          personnelObj = false
+          break
+        }
+      }
+      return personnelObj
+    },
+    nameChange (value, fieldName) {
+      this.stepsData.find(item => item.variableName === fieldName).linkUserIds_dictText = value
+      this.stepsData.find(item => item.variableName === fieldName).userList = value
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.person-comp-box {
+  height: 100%;
+}
+
+/deep/ .ant-steps-vertical .ant-steps-item-icon {
+  margin-right: 0;
+}
+
+/deep/ .ant-steps-item-title {
+  max-width: 100%;
+}
+
+/deep/ .ant-steps-item-content {
+  padding: 0 12px 30px 12px;
+
+}
+
+.step-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+  color: #1D2129;
+  font-weight: 550;
+}
+
+.personnel-container {
+  &-title {
+    height: 36px;
+    background: #6A7484;
+    border-radius: 8px 8px 0 0;
+    padding: 0 16px;
+
+    &-text {
+      font-size: 16px;
+      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+      color: #FFFFFF;
+      line-height: 36px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  &-select-title {
+    background: #9F5258;
+  }
+
+  &-content {
+    background: #FFFFFF;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+
+    &-text {
+      flex: 1;
+      width: 0;
+    }
+
+    &-icon {
+      margin-left: 16px;
+      color: @primary-color;
+      font-size: 20px;
+    }
+
+    &-icon-now {
+      font-size: 10px;
+      width: 20px;
+      height: 20px;
+      background: #FAE6E5;
+      border-radius: 10px 10px 10px 10px;
+      opacity: 1;
+      line-height: 20px;
+      text-align: center;
+    }
+
+    &-echo-text {
+      font-size: 14px;
+      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+      font-weight: 400;
+      color: #4E5969;
+      line-height: 22px;
+      word-break: break-all;
+    }
+  }
+}
+
+/deep/ .user-organ-wrap .button-box {
+  height: 32px;
+}
+
+/deep/ .ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
+  left: 14px;
+  padding: 31px 0 4px;
+}
+
+.step-cus-icon {
+  width: 28px;
+  height: 28px;
+  background: #F2F3F5;
+  border-radius: 32px 32px 32px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &-done {
+    background: rgba(213, 44, 38, 0.08);
+    color: @primary-color;
+  }
+
+  &-now {
+    color: white;
+    background: @primary-color;
+  }
+}
+
+/deep/ .red-tail > .ant-steps-item-container > .ant-steps-item-tail::after {
+  background-color: @primary-color;
+}
+</style>

src/views/workCenter/permissionApplicationProcess/modules/UserSelectModalPap.vue

@@ -0,0 +1,534 @@
+<template>
+  <j-modal
+    :title="$t('userSelect.selectUser')"
+    :maskClosable="false"
+    :width="1000"
+    :closable="true"
+    centered
+    @ok="handleOk"
+    @cancel="handleCancel"
+    switchFullscreen
+    :visible="visible">
+    <div class="modal-search-wrapper table-page-search-wrapper search-wrap">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :span="6">
+            <a-form-item :label="$t('organization')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-tree-select
+                tree-node-filter-prop="title"
+                v-model="queryParam.departId"
+                :maxTagCount="1"
+                :show-search="true"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                style="width: 100%"
+                :tree-data="categoryTreeList"
+                :placeholder="$t('pleaseSelect')"
+                disabled
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item :label="$t('role')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-search-select-tag
+                :placeholder="$t('pleaseSelect') + $t('role')"
+                v-model="queryParam.roleId"
+                :dictOptions="rolesList">
+              </j-search-select-tag>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item :label="$t('user.workNo')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-input :placeholder="$t('pleaseEnter')"
+                       v-model="queryParam.username"></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item :label="$t('userSelect.name')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-input :placeholder="$t('pleaseEnter')"
+                       v-model="queryParam.realname"></j-input>
+            </a-form-item>
+          </a-col>
+          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+            <a-button style="margin-left: 8px" type="primary" icon="search" @click="searchQuery">{{$t('query')}}</a-button>
+            <a-button style="margin-left: 8px" type="primary" ghost icon="reload" @click="searchReset">{{$t('reset')}}</a-button>
+          </span>
+        </a-row>
+      </a-form>
+      <!--  全选所有  -->
+      <a-checkbox v-if="type === 'checkbox'" v-model="isCheckedAll" class="modal-title-check" @change="checkedAllChange">{{ $t('checkedAll') }}</a-checkbox>
+    </div>
+    <div class="modal-content">
+      <a-table
+        :columns="columns"
+        rowKey="id"
+        bordered
+        :scroll="{x: '100%', y: '280px'}"
+        :data-source="dataSource"
+        :pagination="ipagination"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: type }"
+        :loading="loadingLeft"
+        @change="leftTableChange">
+        <template slot="text" slot-scope="text">
+          <a-tooltip overlay-class-name="tooltip-style">
+            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+            <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+      </a-table>
+    </div>
+    <p class="modal-content-title">{{ $t('userSelect.selectedPersonnel') }}</p>
+    <div v-if="dataSourceRight && dataSourceRight.length > 0" class="name-content">
+      <div v-for="(item, index) in dataSourceRight" :key="item.id" class="name-div">
+        {{ item.realname + '(' + item.username + ')' }}
+        <a-icon type="close" @click="handleDelete(item, index)" />
+      </div>
+    </div>
+    <a-empty v-else/>
+  </j-modal>
+</template>
+
+<script>
+import JSearchSelectTag from '../../../../components/dict/JSearchSelectTag'
+import { queryall, queryDepartTreeList } from '@/api/api'
+import { getAction, postAction } from '@/api/manage'
+
+export default {
+  name: 'UserSelectModalPap',
+  components: { JSearchSelectTag },
+  props: {
+    type: { // 是单选还是多选
+      type: String,
+      default: 'radio'
+    },
+    value: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    // 是否校验必选
+    checkRequired: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  mounted () {
+    console.log('UserSelectModalPap mounted')
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        console.log(val)
+        if (val) {
+          this.selectedRowKeys = val ? val.split(',') : []
+          this.getUserListByIds(val)
+        }
+      }
+    },
+    dataSourceRight: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        console.log(this.currentQueryAllData)
+        const arrOne = this.currentQueryAllData.map(item => item.id)
+        const arrTwo = this.dataSourceRight.map(item => item.id)
+        const temp = []
+        for (const item of arrTwo) {
+          arrOne.includes(item) ? temp.push(item) : ''
+        }
+        if (val.length !== 0 && this.dataSourceRight.length >= this.ipagination.total && temp.length === this.currentQueryAllData.length) {
+          // 选中数据长度等于当前表格总长度
+          this.isCheckedAll = true
+        } else {
+          this.isCheckedAll = false
+        }
+      }
+    },
+    currentQueryAllData: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        console.log(this.currentQueryAllData)
+        const arrOne = this.currentQueryAllData.map(item => item.id)
+        const arrTwo = this.dataSourceRight.map(item => item.id)
+        const temp = []
+        for (const item of arrTwo) {
+          arrOne.includes(item) ? temp.push(item) : ''
+        }
+        if (this.dataSourceRight.length !== 0 && this.dataSourceRight.length >= this.ipagination.total && temp.length === this.currentQueryAllData.length) {
+          // 选中数据长度等于当前表格总长度
+          this.isCheckedAll = true
+        } else {
+          this.isCheckedAll = false
+        }
+      }
+    },
+    queryParam: {
+      deep: true,
+      handler (val) {
+        this.isClickedSearch = false
+      }
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      categoryTreeList: [], // 组织机构树
+      rolesList: [], // 角色下拉框
+      queryParam: {},
+      labelCol: {
+        span: 6
+      },
+      wrapperCol: {
+        span: 18
+      },
+      columns: [
+        {
+          title: this.$t('user.workNo'),
+          dataIndex: 'username',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('userSelect.name'),
+          dataIndex: 'realname',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('role'),
+          dataIndex: 'roleTxt',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('userSelect.post'),
+          dataIndex: 'post',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      dataSource: [],
+      ipagination: {
+        current: 1,
+        pageSize: 5,
+        pageSizeOptions: ['5', '10', '20', '30', '100', '200'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      selectedRowKeys: [],
+      loadingLeft: false,
+      dataSourceRight: [],
+      isCheckedAll: false, // 是否选中所有
+      url: {
+        userList: '/sys/user/page',
+        userListByIds: '/sys/user/queryByIds'
+      },
+      isClickedSearch: false, // 改完搜索条件是否点击过搜索
+      oldQueryParam: {}, // 上一次的搜索条件，用于从一个搜索条件改成另一个搜索条件，但是没有点搜索，这时候全选时传旧的搜索条件
+      oldTotal: 0,
+      currentQueryAllData: [] // 当前查询条件下的所有数据
+    }
+  },
+  methods: {
+    open (value) {
+      this.getSysCategoryTree()
+      this.initRoleList()
+      // this.loadData()
+      this.visible = true
+      if (value) {
+        this.selectedRowKeys = value.split(',')
+        this.getUserListByIds(value)
+      }
+    },
+    // 获取组织机构树
+    getSysCategoryTree () {
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          this.categoryTreeList = res.result
+          console.log('this.categoryTreeList', this.categoryTreeList)
+          const targetNode = this.findNodeInTreeList(this.categoryTreeList, '流程与标准化')
+          console.log('targetNode', targetNode)
+          this.queryParam.departId = targetNode.id
+        } else {
+          this.categoryTreeList = []
+        }
+      })
+    },
+    // 在树数组中查找
+    findNodeInTreeList (treeList, name) {
+      let result = null
+      for (const tree of treeList) {
+        result = this.findNodeByName(tree, name)
+        if (result) return result
+      }
+    },
+    // 在树中根据名称查找对应项
+    findNodeByName (node, name) {
+      // console.log('node.departName', node.departName)
+      if (node.departName === name) return node
+      if (!node.children) return null
+      let result = null
+      // 深度优先搜索
+      for (const child of node.children) {
+        result = this.findNodeByName(child, name)
+        if (result) return result
+      }
+    },
+    // 初始化角色字典
+    initRoleList () {
+      queryall().then((res) => {
+        if (res.success) {
+          this.rolesList = res.result.map((item) => {
+            return { text: item.roleName, value: item.id }
+          })
+        }
+      })
+    },
+    // 全选所有
+    checkedAllChange (e) {
+      console.log(e.target.checked)
+      if (e.target.checked) {
+        this.checkCurrentAll()
+      } else {
+        this.dataSourceRight = []
+        this.selectedRowKeys = []
+      }
+    },
+    checkCurrentAll () {
+      this.loadingLeft = true
+      let params
+      if (this.isClickedSearch) {
+        // 点击过搜索了，传搜索条件
+        params = Object.assign({}, this.queryParam)
+      } else {
+        // 没点击过搜索，传旧的搜索条件
+        params = Object.assign({}, this.oldQueryParam)
+      }
+      params.pageNo = 1
+      params.pageSize = this.ipagination.total + 10
+      params.field = 'id,avatar,username,realname,sex_dictText,phone,orgCodeTxt,roleTxt,status_dictText'
+      params.column = 'createTime'
+      params.order = 'desc'
+      getAction(this.url.userList, params).then(res => {
+        if (res.success) {
+          this.dataSourceRight = res.result.records || []
+          this.selectedRowKeys = (res.result.records || []).map(item => item.id)
+          this.oldTotal = res.result.total
+        }
+      }).finally(() => {
+        this.loadingLeft = false
+      })
+    },
+    // 获取当前查询条件的所有数据
+    async getCurrentAllData () {
+      const params = Object.assign({}, this.queryParam)
+      params.pageNo = 1
+      params.pageSize = 100000000
+      params.field = 'id,avatar,username,realname,sex_dictText,phone,orgCodeTxt,roleTxt,status_dictText'
+      params.column = 'createTime'
+      params.order = 'desc'
+      await getAction(this.url.userList, params).then(res => {
+        if (res.success) {
+          this.currentQueryAllData = res.result.records || []
+        }
+      })
+    },
+    searchReset () {
+      this.queryParam = {}
+      this.loadData(1)
+    },
+    searchQuery () {
+      this.isClickedSearch = true
+      this.loadData(1)
+    },
+    // 获取用户左侧树列表
+    async loadData (arg) {
+      this.loadingLeft = true
+      if (this.type === 'checkbox') {
+        await this.getCurrentAllData()
+      }
+      if (arg) {
+        this.ipagination.current = 1
+      }
+      const params = Object.assign({}, this.queryParam)
+      params.pageNo = this.ipagination.current
+      params.pageSize = this.ipagination.pageSize
+      params.field = 'id,avatar,username,realname,sex_dictText,phone,orgCodeTxt,roleTxt,status_dictText'
+      params.column = 'createTime'
+      params.order = 'desc'
+      getAction(this.url.userList, params).then((res) => {
+        if (res.success) {
+          if (res.result.current > 1 && res.result.records.length === 0) {
+            this.ipagination.current = res.result.current - 1
+            this.loadData()
+            return
+          }
+          this.oldQueryParam = Object.assign({}, this.queryParam)
+          this.dataSource = res.result.records || []
+          this.ipagination.total = res.result.total
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loadingLeft = false
+      })
+    },
+    // 表格选择
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      if (this.type === 'checkbox') {
+        if (selectedRowKeys.length > this.dataSourceRight.length) {
+          // 说明是增加了数据
+          for (const rowIndex in selectedRows) {
+            if (!this.dataSourceRight.find(item => item.id === selectedRows[rowIndex].id)) {
+              // 右侧不存在，追加到右侧表格
+              this.dataSourceRight.push(selectedRows[rowIndex])
+            }
+          }
+        } else {
+          // 说明是删除了数据
+          if (selectedRowKeys && selectedRowKeys.length > 0) {
+            // 没有选中数据，说明这一页没有选中数据了
+            for (let i = 0; i < this.dataSourceRight.length; i++) {
+              if (!selectedRowKeys.find(item => item === this.dataSourceRight[i].id)) {
+                // 表格选中中没有找到这一条数据，说明已经被删了
+                this.dataSourceRight.splice(i, 1)
+                i--
+              }
+            }
+          } else {
+            this.dataSourceRight = []
+          }
+        }
+        console.log(this.dataSourceRight)
+      } else {
+        this.dataSourceRight = selectedRows
+      }
+    },
+    // 左侧表格改变
+    leftTableChange (pagination) {
+      this.ipagination = pagination
+      this.loadData()
+    },
+    // 根据ids获取用户列表
+    getUserListByIds (ids) {
+      const params = {}
+      params.userIds = ids
+      this.loadingRight = true
+      postAction(this.url.userListByIds, params).then((res) => {
+        if (res.success) {
+          this.dataSourceRight = res.result || []
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loadingRight = false
+      })
+    },
+    // 名字列表的删除
+    handleDelete (record, index) {
+      this.dataSourceRight.splice(index, 1)
+      this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== record.id)
+    },
+    handleOk () {
+      if (this.checkRequired && (!this.selectedRowKeys || this.selectedRowKeys.length === 0)) {
+        if (this.type === 'radio') {
+          this.$message.warning(this.$t('docTool.split.pleaseSelectUser'))
+        } else {
+          this.$message.warning(this.$t('pleaseAtLeastSelectOneUser'))
+        }
+        return
+      }
+      this.$emit('nameChange', this.dataSourceRight.map(item => item.realname + '(' + item.username + ')').join(','))
+      this.$emit('change', this.selectedRowKeys.join(','))
+      this.$emit('listChange', this.dataSourceRight)
+      this.close()
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.dataSourceRight = []
+      this.selectedRowKeys = []
+      this.queryParam = {}
+      this.ipagination = {
+        current: 1,
+        pageSize: 5,
+        pageSizeOptions: ['5', '10', '20', '30', '100', '200'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.search-wrap {
+  position: relative;
+}
+.modal-title-check {
+  position: absolute;
+  left: 25px;
+  bottom: 10px;
+}
+.modal-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  &-left {
+    width: 58%;
+  }
+  &-right {
+    width: 40%;
+  }
+  &-title-div {
+    display: flex;
+    align-items: center;
+    height: 28px;
+    margin: 20px 0;
+    .modal-content-title {
+      color: #1D2129;
+      font-weight: 500;
+      margin-right: 12px;
+      margin-bottom: 0;
+    }
+  }
+}
+.name-content {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  .name-div {
+    width: auto;
+    padding: 5px 16px;
+    margin-right: 12px;
+    margin-top: 8px;
+    background: rgba(213, 44, 38, 0.08);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    color: @primary-color;
+    white-space: nowrap;
+    /deep/ .anticon {
+      margin-left: 4px;
+    }
+  }
+}
+
+/deep/ .ant-form-item-label{
+  min-width: 70px !important;
+}
+</style>

src/views/workCenter/permissionApplicationProcess/modules/UserSelectionPap.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="wrapper-box">
+    <div class="user-organ-wrap">
+      <a-input
+        :type="inputType"
+        :autoSize="true"
+        :rows="1"
+        readOnly
+        :disabled="disabled"
+        :class="{
+          'input-readonly': !disabled,
+          'user-input': showBtn
+        }"
+        :placeholder="placeholder"
+        :value="checkedValue"
+        @click="selectClick"
+        :title="checkedValue">
+      </a-input>
+      <a-button type="primary" class="button-box" @click="selectClick" :disabled="disabled" v-if="showBtn && !disabled">
+        {{ $t('userSelect.select') }}
+      </a-button>
+    </div>
+    <user-select-modal-Pap v-bind="$attrs"
+                       :nameStr="nameStr"
+                       ref="selectModal"
+                       @change="selectChange"
+                       @nameChange="nameChange"
+                       @listChange="listChange" />
+  </div>
+</template>
+
+<script>
+import UserSelectModalPap from './UserSelectModalPap'
+
+export default {
+  name: 'UserSelectionPap',
+  components: { UserSelectModalPap },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    // 名字字符串
+    nameStr: {
+      type: String,
+      default: ''
+    },
+    // 修改的字段名
+    filedName: {
+      type: [String, Number],
+      default: ''
+    },
+    // 回显输入框的类型，默认是input
+    inputType: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
+    // 是否展示按钮
+    showBtn: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  watch: {
+    nameStr: {
+      immediate: true,
+      handler (val) {
+        this.checkedValue = val
+      }
+    }
+  },
+  data () {
+    return {
+      checkedValue: ''
+    }
+  },
+  mounted () {
+    console.log('UserSelectionPap mounted')
+  },
+  methods: {
+    selectClick () {
+      console.log('点击了')
+      // 禁用后不弹框
+      if (this.disabled) {
+        return
+      }
+      this.$refs.selectModal.open(this.value)
+    },
+    selectChange (ids) {
+      this.$emit('change', ids, this.filedName)
+    },
+    nameChange (value) {
+      this.checkedValue = value
+      this.$emit('nameChange', value, this.filedName)
+    },
+    listChange (list) {
+      this.$emit('listChange', list)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+.wrapper-box {
+  display: flex;
+}
+
+.user-organ-wrap {
+  width: 100%;
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  //height: 39.98px;
+
+  .user-input {
+    resize: none;
+    //width: calc(100% - 70px);
+  }
+
+  // 因为需要加title，所以不能把鼠标事件去掉
+  /deep/ .input-readonly.ant-input-disabled {
+    background: #fff;
+    color: rgba(0, 0, 0, 0.65);
+    cursor: default;
+  }
+
+  .button-box {
+    margin-left: 5px;
+  }
+}
+</style>