[add] 选择用户组件

src/common/lang/en-us.js

@@ -365,6 +365,7 @@ module.exports = {
     updateLog: 'Change Log',
     problemKnowledgeBase: 'Knowledge Sharing',
     collection: 'Invoice Collection',
+    subscribe: 'Subscribe',
     textInformation: 'Document Files',
     standardBreakdown: 'Standard Breakdown',
     standardOne: 'Standard',
@@ -476,6 +477,23 @@ module.exports = {
   standardSelect: {
     standardSelection: 'Standard Selection'
   },
+  // 用户/组织结构选择器
+  userOrOrganSelect: {
+    select: 'Select',
+    selectUserOrOrgan: 'Select User/Organization',
+    organization: 'Organization',
+    name: 'name',
+    secondLevel: 'Second Level',
+    threeLevel: 'Three Level'
+  },
+  // 用户选择器
+  userSelect: {
+    select: 'Select',
+    selectUser: 'Select User',
+    userList: 'Users List',
+    name: 'name',
+    post: 'Post'
+  },
   // 弹框上传附件
   uploadFile: {
     clickUpload: 'Click To Upload',

src/common/lang/enterpriseStandardLibrary/en.js

@@ -5,6 +5,9 @@ module.exports = {
     allocationStandard: 'Allocation Standard',
     shiftOutStandard: 'Shift Out Standard',
     initChange: 'Initiate Changes',
-    temporaryPermissionSet: 'Temporary Permission Setting'
+    temporaryPermissionSet: 'Temporary Permission Setting',
+    collection: 'Collect',
+    cancelCollection: 'Cancel Collection',
+    templateExport: 'Enterprise Standard Template'
   }
 }

src/common/lang/zh-cn.js

@@ -486,6 +486,14 @@ module.exports = {
     secondLevel: '二级',
     threeLevel: '三级'
   },
+  // 用户选择器
+  userSelect: {
+    select: '选择',
+    selectUser: '选择用户',
+    userList: '用户列表',
+    name: '姓名',
+    post: '岗位'
+  },
   // 弹框上传附件
   uploadFile: {
     clickUpload: '点击上传',

src/components/customField/AddForm.vue

@@ -31,11 +31,18 @@
                 <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
               </div>
               <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                <user-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                         v-model="formInline[item.dbFieldName]"
+                                v-model="formInline[item.dbFieldName]"
-                                         type="radio"
+                                :filedName="item.dbFieldName"
-                                         selectType="user"
+                                @nameChange="userSelectNameChange"
-                                         :disabled="disabled" />
+                                :nameStr="formInline[item.dbFieldName + '_name']"
+                                type="radio"
+                                :disabled="disabled" />
+<!--                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
+<!--                                         v-model="formInline[item.dbFieldName]"-->
+<!--                                         type="radio"-->
+<!--                                         selectType="user"-->
+<!--                                         :disabled="disabled" />-->
               </a-form-model-item>
             </div>
           </a-col>
@@ -47,11 +54,14 @@
                 <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
               </div>
               <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                <j-select-depart
-                                         v-model="formInline[item.dbFieldName]"
+                  v-model="formInline[item.dbFieldName]"
-                                         selectType="organ"
+                  :backDepart="true">></j-select-depart>
-                                         type="radio"
+<!--                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
-                                         :disabled="disabled" />
+<!--                                         v-model="formInline[item.dbFieldName]"-->
+<!--                                         selectType="organ"-->
+<!--                                         type="radio"-->
+<!--                                         :disabled="disabled" />-->
               </a-form-model-item>
             </div>
           </a-col>
@@ -108,11 +118,16 @@
                 <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
               </div>
               <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                <j-select-depart
-                                         v-model="formInline[item.dbFieldName]"
+                  v-model="formInline[item.dbFieldName]"
-                                         selectType="organ"
+                  :multi="true"
-                                         type="checkbox"
+                  :backDepart="true"
-                                         :disabled="disabled" />
+                  :treeOpera="true">></j-select-depart>
+<!--                <user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
+<!--                                         v-model="formInline[item.dbFieldName]"-->
+<!--                                         selectType="organ"-->
+<!--                                         type="checkbox"-->
+<!--                                         :disabled="disabled" />-->
               </a-form-model-item>
             </div>
           </a-col>
@@ -223,10 +238,11 @@ import StandardSelection from '../selection/StandardSelection'
 import UserOrOrganSelection from '../selection/UserOrOrganSelection'
 import { FieldType } from '../../enums/commonEnums'
 import JMultipleDatePicker from '../JMultipleDatePicker'
+import UserSelection from '../selection/UserSelection'
 
 export default {
   name: 'AddForm',
-  components: { JMultipleDatePicker, StandardSelection, JDictSelectTag, JMultiSelectTag, UploadFile, UserOrOrganSelection },
+  components: { UserSelection, JMultipleDatePicker, StandardSelection, JDictSelectTag, JMultiSelectTag, UploadFile, UserOrOrganSelection },
   props: {
     url: {
       type: Object,
@@ -476,6 +492,10 @@ export default {
       this.formInline[value + '_id'] = id
       this.formInline = { ...this.formInline }
     },
+    // 选择用户得到用户名
+    userSelectNameChange (value, fieldName) {
+      this.formInline[fieldName + '_name'] = value
+    },
     submit () {
       this.$refs.ruleForm.validate(valid => {
         if (valid) {

src/components/selection/UserSelectModal.vue

@@ -0,0 +1,375 @@
+<template>
+  <a-modal
+    :title="$t('userSelect.selectUser')"
+    :maskClosable="false"
+    :width="1000"
+    :closable="true"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    :visible="visible">
+    <div class="modal-search-wrapper table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :sm="6">
+            <a-form-item :label="$t('organization')">
+              <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')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :sm="6">
+            <a-form-item :label="$t('role')">
+              <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 :sm="6">
+            <a-form-item :label="$t('user.account')">
+              <a-input :placeholder="$t('pleaseEnter')"
+                       v-model="queryParam.account"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :sm="6">
+            <a-form-item :label="$t('userSelect.name')">
+              <a-input :placeholder="$t('pleaseEnter')"
+                       v-model="queryParam.realname"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :sm="6">
+            <a-form-item :label="$t('user.workNo')">
+              <a-input :placeholder="$t('pleaseEnter')"
+                       v-model="queryParam.workNo"></a-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" @click="searchReset">{{$t('reset')}}</a-button>
+            <a-button style="margin-left: 8px" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="modal-content">
+      <div class="modal-content-left">
+        <div class="modal-content-title-div">
+          <p class="modal-content-title">{{ $t('userSelect.select') }}</p>
+          <div class="table-operator-tab">
+            <a class="switch-item table-operator-tab-active">{{ $t('userSelect.userList') }}</a>
+          </div>
+        </div>
+        <a-table
+          :columns="columns"
+          rowKey="id"
+          bordered
+          :scroll="{x: 550}"
+          :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>
+      <div class="modal-content-right">
+        <div class="modal-content-title-div">
+          <p class="modal-content-title">选择</p>
+        </div>
+        <a-table
+          :columns="columnsRight"
+          rowKey="id"
+          :pagination="false"
+          bordered
+          :scroll="{x: 250}"
+          :loading="loadingRight"
+          :data-source="dataSourceRight">
+          <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>
+          <template slot="action" slot-scope="text, record, index">
+            <a @click="handleDelete(record, index)" >{{ $t('delete') }}</a>
+          </template>
+        </a-table>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import JSearchSelectTag from '../dict/JSearchSelectTag'
+import { queryall, queryDepartTreeList } from '@/api/api'
+import { getAction } from '@/api/manage'
+
+export default {
+  name: 'UserSelectModal',
+  components: { JSearchSelectTag },
+  props: {
+    type: { // 是单选还是多选
+      type: String,
+      default: 'radio'
+    },
+    value: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        console.log(val)
+        this.selectedRowKeys = val.split(',')
+        this.getUserListByIds(val)
+      }
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      categoryTreeList: [], // 组织机构树
+      rolesList: [], // 角色下拉框
+      queryParam: {},
+      columns: [
+        {
+          title: this.$t('user.account'),
+          dataIndex: 'account',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('userSelect.name'),
+          dataIndex: 'realname',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('user.workNo'),
+          dataIndex: 'workNo',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('role'),
+          dataIndex: 'role',
+          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,
+      columnsRight: [
+        {
+          title: this.$t('userSelect.name'),
+          dataIndex: 'realname',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('operation'),
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+          align: 'center'
+        }
+      ],
+      loadingRight: false,
+      dataSourceRight: [],
+      url: {
+        userList: '/sys/user/page',
+        userListByIds: ''
+      }
+    }
+  },
+  mounted () {
+    this.getSysCategoryTree()
+    this.initRoleList()
+    this.loadData()
+  },
+  methods: {
+    open (value) {
+      this.visible = true
+      if (value) {
+        this.selectedRowKeys = value.split(',')
+        this.getUserListByIds(value)
+      }
+    },
+    // 获取组织机构树
+    getSysCategoryTree () {
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          this.categoryTreeList = res.result
+        } else {
+          this.categoryTreeList = []
+        }
+      })
+    },
+    // 初始化角色字典
+    initRoleList () {
+      queryall().then((res) => {
+        if (res.success) {
+          this.rolesList = res.result.map((item) => {
+            return { text: item.roleName, value: item.id }
+          })
+        }
+      })
+    },
+    searchReset () {
+      this.queryParam = {}
+      this.loadData()
+    },
+    searchQuery () {
+      this.loadData()
+    },
+    // 获取用户左侧树列表
+    loadData () {
+      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,undefined'
+      params.column = 'createTime'
+      params.order = 'desc'
+      this.loadingLeft = true
+      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.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 {
+          // 说明是删除了数据
+          for (const rowIndex in this.dataSourceRight) {
+            if (!selectedRows.find(item => item === this.dataSourceRight[rowIndex].id)) {
+              // 右侧数据在左侧选中不存在则从右侧删掉
+              this.dataSourceRight.splice(rowIndex, 1)
+            }
+          }
+        }
+      } else {
+        this.dataSourceRight = selectedRows
+      }
+    },
+    // 左侧表格改变
+    leftTableChange (pagination) {
+      this.ipaginationLeft = pagination
+      this.loadData()
+    },
+    // 根据ids获取用户列表
+    getUserListByIds (ids) {
+      const params = {}
+      params.ids = ids
+      this.loadingRight = true
+      getAction(this.url.userListByIds, params).then((res) => {
+        if (res.success) {
+          this.dataSourceRight = res.result.records || []
+        } 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)
+      console.log(this.selectedRowKeys)
+    },
+    handleOk () {
+      this.$emit('change', this.selectedRowKeys.join(','))
+      this.$emit('nameChange', this.dataSourceRight.map(item => item.realname + '(' + item.workNo + ')').join(','))
+      this.close()
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.dataSourceRight = []
+      this.selectedRowKeys = []
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.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;
+}
+}
+}
+</style>

src/components/selection/UserSelection.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="user-organ-wrap">
+      <a-input
+        class="user-input"
+        :placeholder="placeholder"
+        :value="checkedValue"
+        @click="selectClick"
+      >
+      </a-input>
+      <a-button type="primary" class="button-box" @click="selectClick">
+        {{$t('userSelect.select')}}
+      </a-button>
+    </div>
+    <user-select-modal v-bind="$attrs" ref="selectModal" @change="selectChange" @nameChange="nameChange"></user-select-modal>
+  </div>
+</template>
+
+<script>
+import UserSelectModal from './UserSelectModal'
+
+export default {
+  name: 'UserSelection',
+  components: { UserSelectModal },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    // 名字字符串
+    nameStr: {
+      type: String,
+      default: ''
+    },
+    // 修改的字段名
+    filedName: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    nameStr: {
+      immediate: true,
+      handler (val) {
+        this.checkedValue = val
+      }
+    }
+  },
+  data () {
+    return {
+      checkedValue: ''
+    }
+  },
+  methods: {
+    selectClick () {
+      this.$refs.selectModal.open(this.value)
+    },
+    selectChange (ids) {
+      this.$emit('change', ids)
+    },
+    nameChange (value) {
+      this.checkedValue = value
+      this.$emit('nameChange', value, this.filedName)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+.user-organ-wrap {
+  width: 100%;
+  position: relative;
+  .user-input {
+    width: calc(100% - 70px);
+  }
+  .button-box {
+    height: 38px;
+    margin-left: 5px;
+    position: absolute;
+    top: 0;
+  }
+}
+</style>