[update] 添加选择用户、组织机构弹框

public/color.less

@@ -1,4 +1,4 @@
-@primary-color: #1890ff;
+@primary-color: #D52C26;
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */

src/assets/less/common.less

@@ -273,8 +273,8 @@
   width: calc(100% - 100px);
   line-height: 38px;
   background: #fff;
-  border: 1px #1890ff solid;
+  border: 1px #D52C26 solid;
-  color: #1890ff;
+  color: #D52C26;
 }
 // 新增编辑表单样式--完
 
@@ -312,3 +312,51 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+/* switch的样式 */
+.table-operator-tab {
+  width: fit-content;
+  background-color: #F0F2F4;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.table-operator-tab a {
+  border-radius: 4px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 94px;
+  height: 32px;
+  color: #4E5969;
+}
+
+.table-operator-tab a.table-operator-tab-active {
+  background-color: #D52C26;
+  color: #FFFFFF;
+}
+
+.table-operator-tab a:not(:first-child) {
+  //transform: translateX(-8px);
+  margin-left: -8px;
+}
+/* switch的样式--end */
+
+/*分页的样式start*/
+/deep/ .ant-pagination-item-active {
+  background: #D52C26;
+  border-radius: 3px 3px 3px 3px;
+  border: none;
+  color: #FFFFFF;
+}
+
+/deep/ .ant-pagination-item {
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px !important;
+  color: #1D2129;
+  font-weight: 400;
+  border: 1px solid #E5E6EB;
+}
+
+/*分页的样式end*/

src/common/lang/zh-cn.js

@@ -409,7 +409,7 @@ module.exports = {
       addQuantity: '添加数量',
       enterQuantity: '请输入数量',
       numberRows: '行数',
-      numberColumns: '列数',
+      numberColumns: '列数'
     },
     comparison: {
       releaseSituation: '发布情况',
@@ -471,6 +471,15 @@ module.exports = {
   standardSelect: {
     standardSelection: '标准选择'
   },
+  // 用户/组织结构选择器
+  userOrOrganSelect: {
+    select: '选择',
+    selectUserOrOrgan: '选择用户/机构',
+    organization: '组织机构',
+    name: '姓名',
+    secondLevel: '二级',
+    threeLevel: '三级'
+  },
   // 弹框上传附件
   uploadFile: {
     clickUpload: '点击上传',

src/components/customField/Search.vue

@@ -42,14 +42,14 @@
             </a-form-item>
           </template>
           <!--   日期区间  -->
-          <tempalet v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.field_show_type)">
+          <template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.field_show_type)">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-range-picker v-model="queryParam[item.db_field_name]"
                               :placeholder="$t('pleaseSelect')+item.db_field_txt"
                               format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                               @change="onChange(item.db_field_name)"></a-range-picker>
             </a-form-item>
-          </tempalet>
+          </template>
           <!--  字典单选框  -->
           <template v-else-if="item.field_show_type === FieldType.PULL_SINGLE.value">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -62,6 +62,7 @@
         </template>
 
         <template v-if="index >= minLength && toggleSearchStatus">
+          <!--   树形选择器   -->
           <template v-if="item.field_show_type === FieldType.TREE.value">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-tree-select
@@ -75,6 +76,7 @@
               />
             </a-form-item>
           </template>
+          <!--   输入框  -->
           <template v-else-if="[FieldType.TEXT_STRING.value, FieldType.TEXT.value,FieldType.PERSON.value,
                 FieldType.STANDARD.value, FieldType.TEXT_LINK.value].includes(item.field_show_type)">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -82,12 +84,14 @@
                        v-model="queryParam[item.db_field_name]"></a-input>
             </a-form-item>
           </template>
+          <!--   数字输入框   -->
           <template v-else-if="item.field_show_type === FieldType.TEXT_NUMBER.value">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-input-number :placeholder="$t('pleaseEnter')+item.db_field_txt"
                               v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
             </a-form-item>
           </template>
+          <!--   字典多选框  -->
           <template v-else-if="item.field_show_type === FieldType.PULL_MORE.value">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <j-multi-select-tag v-model="queryParam[item.db_field_name]"
@@ -95,6 +99,7 @@
                                   :triggerChange="false" :dictCode="item.dict_field"/>
             </a-form-item>
           </template>
+          <!--   日期区间选择器  -->
           <template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.field_show_type)">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-range-picker v-model="queryParam[item.db_field_name]"
@@ -102,6 +107,7 @@
                               @change="onChange(item.db_field_name)"></a-range-picker>
             </a-form-item>
           </template>
+          <!--   字典选择器  -->
           <template v-else-if="item.field_show_type === FieldType.PULL_SINGLE.value">
             <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <j-dict-select-tag v-model="queryParam[item.db_field_name]"

src/components/selection/CurrencySearch.vue

@@ -3,118 +3,118 @@
     <a-row :gutter="24">
       <a-col :md="12" :sm="8" v-for="(item,index) in searchList" :key="index" style="line-height: 48px">
         <template v-if="index < 3">
-          <div class="box-title-text" v-if="item.field_show_type == '0'">
+          <!-- 树形选择器 -->
-            <div class="title-text" :title="item.db_field_txt">
+          <template v-if="item.field_show_type === FieldType.TREE.value">
-              <span>{{item.db_field_txt}}</span>
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            </div>
+              <a-tree-select
-            <a-tree-select
+                tree-node-filter-prop="title"
-              class="box-input"
+                v-model="queryParam[item.db_field_name]"
-              tree-node-filter-prop="title"
+                :maxTagCount="1"
-              v-model="queryParam[item.db_field_name]"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
-              :maxTagCount="1"
+                :tree-data="item.tree"
-              :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                tree-checkable
-              :tree-data="item.tree"
+                :placeholder="$t('pleaseSelect')+item.db_field_txt"
-              tree-checkable
+              />
-              :placeholder="$t('PleaseSelect')+item.db_field_txt"
+            </a-form-item>
-            />
+          </template>
-          </div>
+          <!--  输入框 -->
-          <div class="box-title-text" v-else-if="item.field_show_type == '1' || item.field_show_type == '8' ||
+          <template
-          item.field_show_type == '9' || item.field_show_type == '10' || item.field_show_type == '11'">
+            v-else-if="[FieldType.TEXT_STRING.value, FieldType.TEXT.value,FieldType.PERSON.value,
-            <div class="title-text" :title="item.db_field_txt">
+                FieldType.STANDARD.value, FieldType.TEXT_LINK.value].includes(item.field_show_type)">
-              <span>{{item.db_field_txt}}</span>
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            </div>
+              <a-input :placeholder="$t('pleaseEnter')+item.db_field_txt"
-            <a-input class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
+                       v-model="queryParam[item.db_field_name]"></a-input>
-                     v-model="queryParam[item.db_field_name]"></a-input>
+            </a-form-item>
-          </div>
+          </template>
-          <div class="box-title-text" v-if="item.field_show_type == '2'">
+          <!--   数字输入框  -->
-            <div class="title-text" :title="item.db_field_txt">
+          <template v-else-if="item.field_show_type === FieldType.TEXT_NUMBER.value">
-              <span>{{item.db_field_txt}}</span>
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            </div>
+              <a-input-number :placeholder="$t('pleaseEnter')+item.db_field_txt"
-            <a-input-number class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
+                              v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
-                            v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
+            </a-form-item>
-          </div>
+          </template>
-          <div class="box-title-text" v-else-if="item.field_show_type == '4'">
+          <!--   字典多选框  -->
-            <div class="title-text" :title="item.db_field_txt">
+          <template v-else-if="item.field_show_type === FieldType.PULL_MORE.value">
-              <span>{{item.db_field_txt}}</span>
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            </div>
+              <j-multi-select-tag v-model="queryParam[item.db_field_name]"
-            <j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
+                                  :placeholder="$t('pleaseSelect')+item.db_field_txt" :type="'select'"
-                                :placeholder="$t('PleaseSelect')+item.db_field_txt" :type="'select'"
+                                  :triggerChange="false" :dictCode="item.dict_field"/>
-                                :triggerChange="false" :dictCode="item.dict_field"/>
+            </a-form-item>
-          </div>
+          </template>
-          <div class="box-title-text" v-else-if="item.field_show_type == '6' || item.field_show_type == '5'">
+          <!--   日期区间  -->
-            <div class="title-text" :title="item.db_field_txt">
+          <template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.field_show_type)">
-              <span>{{item.db_field_txt}}</span>
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            </div>
+              <a-range-picker v-model="queryParam[item.db_field_name]"
-            <a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"
+                              :placeholder="$t('pleaseSelect')+item.db_field_txt"
-                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                              format="YYYY-MM-DD" value-format="YYYY-MM-DD"
-                            @change="onChange(item.db_field_name)"></a-range-picker>
+                              @change="onChange(item.db_field_name)"></a-range-picker>
-          </div>
+            </a-form-item>
-          <div class="box-title-text" v-else-if="item.field_show_type == '3'">
+          </template>
-            <div class="title-text" :title="item.db_field_txt">
+          <!--  字典单选框  -->
-              <span>{{item.db_field_txt}}</span>
+          <template v-else-if="item.field_show_type === FieldType.PULL_SINGLE.value">
-            </div>
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
+              <j-dict-select-tag v-model="queryParam[item.db_field_name]"
-                               :placeholder="$t('PleaseSelect')+item.db_field_txt"
+                                 :placeholder="$t('pleaseSelect')+item.db_field_txt"
-                               :type="'select'"
+                                 :type="'select'"
-                               :triggerChange="false" :dictCode="item.dict_field"/>
+                                 :triggerChange="false" :dictCode="item.dict_field"/>
-          </div>
+            </a-form-item>
+          </template>
         </template>
-        <template v-if="index >= 3 && toggleSearchStatus">
+        <template v-if="index >= 2 && toggleSearchStatus">
-          <div class="box-title-text" v-if="item.field_show_type == '0'">
+          <!--   树形选择器   -->
-            <div class="title-text" :title="item.db_field_txt">
+          <template v-if="item.field_show_type === FieldType.TREE.value">
-              <span>{{item.db_field_txt}}</span>
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            </div>
+              <a-tree-select
-            <a-tree-select
+                tree-node-filter-prop="title"
-              class="box-input"
+                v-model="queryParam[item.db_field_name]"
-              tree-node-filter-prop="title"
+                :maxTagCount="1"
-              v-model="queryParam[item.db_field_name]"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
-              :maxTagCount="1"
+                :tree-data="item.tree"
-              :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                tree-checkable
-              :tree-data="item.tree"
+                :placeholder="$t('pleaseSelect')+item.db_field_txt"
-              tree-checkable
+              />
-              :placeholder="$t('PleaseSelect')+item.db_field_txt"
+            </a-form-item>
-            />
+          </template>
-          </div>
+          <!--   输入框  -->
-          <div class="box-title-text" v-else-if="item.field_show_type == '1' || item.field_show_type == '8' ||
+          <template v-else-if="[FieldType.TEXT_STRING.value, FieldType.TEXT.value,FieldType.PERSON.value,
-          item.field_show_type == '9' || item.field_show_type == '10' || item.field_show_type == '11'">
+                FieldType.STANDARD.value, FieldType.TEXT_LINK.value].includes(item.field_show_type)">
-            <div class="title-text" :title="item.db_field_txt">
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <span>{{item.db_field_txt}}</span>
+              <a-input :placeholder="$t('pleaseEnter')+item.db_field_txt"
-            </div>
+                       v-model="queryParam[item.db_field_name]"></a-input>
-            <a-input class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
+            </a-form-item>
-                     v-model="queryParam[item.db_field_name]"></a-input>
+          </template>
-          </div>
+          <!--   数字输入框   -->
-          <div class="box-title-text" v-if="item.field_show_type == '2'">
+          <template v-else-if="item.field_show_type === FieldType.TEXT_NUMBER.value">
-            <div class="title-text" :title="item.db_field_txt">
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <span>{{item.db_field_txt}}</span>
+              <a-input-number :placeholder="$t('pleaseEnter')+item.db_field_txt"
-            </div>
+                              v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
-            <a-input-number class="box-input" :placeholder="$t('PleaseEnter')+item.db_field_txt"
+            </a-form-item>
-                            v-model="queryParam[item.db_field_name]" :min="1" :max="99999999"/>
+          </template>
-          </div>
+          <!--   字典多选框  -->
-          <div class="box-title-text" v-else-if="item.field_show_type == '4'">
+          <template v-else-if="item.field_show_type === FieldType.PULL_MORE.value">
-            <div class="title-text" :title="item.db_field_txt">
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <span>{{item.db_field_txt}}</span>
+              <j-multi-select-tag v-model="queryParam[item.db_field_name]"
-            </div>
+                                  :placeholder="$t('pleaseSelect')+item.db_field_txt" :type="'select'"
-            <j-multi-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
+                                  :triggerChange="false" :dictCode="item.dict_field"/>
-                                :placeholder="$t('PleaseSelect')+item.db_field_txt" :type="'select'"
+            </a-form-item>
-                                :triggerChange="false" :dictCode="item.dict_field"/>
+          </template>
-          </div>
+          <!--   日期区间选择器  -->
-          <div class="box-title-text" v-else-if="item.field_show_type == '6' || item.field_show_type == '5'">
+          <template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.field_show_type)">
-            <div class="title-text" :title="item.db_field_txt">
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <span>{{item.db_field_txt}}</span>
+              <a-range-picker v-model="queryParam[item.db_field_name]"
-            </div>
+                              format="YYYY-MM-DD" value-format="YYYY-MM-DD"
-            <a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"
+                              @change="onChange(item.db_field_name)"></a-range-picker>
-                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+            </a-form-item>
-                            @change="onChange(item.db_field_name)"></a-range-picker>
+          </template>
-          </div>
+          <!--   字典选择器  -->
-          <div class="box-title-text" v-else-if="item.field_show_type == '3'">
+          <template v-else-if="item.field_show_type === FieldType.PULL_SINGLE.value">
-            <div class="title-text" :title="item.db_field_txt">
+            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <span>{{item.db_field_txt}}</span>
+              <j-dict-select-tag v-model="queryParam[item.db_field_name]"
-            </div>
+                                 :placeholder="$t('pleaseSelect')+item.db_field_txt"
-            <j-dict-select-tag class="box-input" v-model="queryParam[item.db_field_name]"
+                                 :type="'select'"
-                               :placeholder="$t('PleaseSelect')+item.db_field_txt"
+                                 :triggerChange="false" :dictCode="item.dict_field"/>
-                               :type="'select'"
+            </a-form-item>
-                               :triggerChange="false" :dictCode="item.dict_field"/>
+          </template>
-          </div>
         </template>
       </a-col>
       <span style="float: right;overflow: hidden;margin-right: 41px;margin-bottom: 20px"

src/components/selection/StandardSelection.vue

@@ -86,7 +86,7 @@ export default {
       },
       columns: [
         {
-          title: this.$t('standard'),
+          title: this.$t('number'),
           dataIndex: 'serial_number',
           ellipsis: true,
           align: 'left',

src/components/selection/UserOrOrganSelection.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="box-title-text">
+      <div @click="selectClick">
+        <div v-for="item in selectValue" :key="item.id">{{item.label}}</div>
+      </div>
+      <a-button type="primary" class="button-box" @click="selectClick">
+        {{this.$t('userOrOrganSelect.select')}}
+      </a-button>
+    </div>
+    <user-organ-select-modal ref="selectModal" :selectType="selectType" @change="selectChange"></user-organ-select-modal>
+  </div>
+</template>
+
+<script>
+import UserOrganSelectModal from './UserOrganSelectModal'
+
+export default {
+  name: 'UserOrOrganSelection',
+  components: { UserOrganSelectModal },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    selectType: {
+      type: String,
+      default: 'all'
+    },
+    value: {
+      type: Object,
+      default: () => {
+        return {
+          organ: '',
+          user: ''
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      selectValue: []
+    }
+  },
+  methods: {
+    selectClick () {
+      this.$refs.selectModal.open()
+    },
+    selectChange (arrOne, arrTwo) {
+      if (this.selectType === 'all') {
+        this.selectValue = [...arrOne, ...arrTwo]
+      } else {
+        this.selectValue = arrOne
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/selection/UserOrganSelectModal.vue

@@ -0,0 +1,522 @@
+<template>
+  <a-modal
+    :title="$t('userOrOrganSelect.selectUserOrOrgan')"
+    :maskClosable="false"
+    :width="1000"
+    :closable="true"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    :visible="visible">
+    <div class="modal-search-wrapper table-page-search-wrapper">
+      <a-form v-if="switchValue === 'organ'" layout="inline" @keyup.enter.native="searchQueryOrgan">
+        <a-row :gutter="24">
+          <a-col :sm="6">
+            <a-form-item :label="$t('organization')">
+              <a-tree-select
+                tree-node-filter-prop="title"
+                v-model="queryParamOrgan.departId"
+                :maxTagCount="1"
+                :show-search="true"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                style="width: 100%"
+                :tree-data="categoryTreeList"
+                :placeholder="$t('pleaseSelect')"
+              />
+            </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="searchResetOrgan">{{$t('reset')}}</a-button>
+            <a-button style="margin-left: 8px" type="primary" @click="searchQueryOrgan">{{$t('query')}}</a-button>
+          </span>
+        </a-row>
+      </a-form>
+      <a-form v-if="switchValue === 'user'" layout="inline" @keyup.enter.native="searchQueryUser">
+        <a-row :gutter="24">
+          <a-col :sm="6">
+            <a-form-item :label="$t('user.account')">
+              <a-input :placeholder="$t('pleaseEnter')"
+                       v-model="queryParamUser.account"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :sm="6">
+            <a-form-item :label="$t('userOrOrganSelect.name')">
+              <a-input :placeholder="$t('pleaseEnter')"
+                       v-model="queryParamUser.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="queryParamUser.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="searchResetUser">{{$t('reset')}}</a-button>
+            <a-button style="margin-left: 8px" type="primary" @click="searchQueryUser">{{$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">选择</p>
+          <div class="table-operator-tab">
+            <a class="switch-item" :class="switchValue === 'organ' ? 'table-operator-tab-active' : ''"
+               @click="switchChange('organ')">组织机构
+            </a>
+            <a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
+               @click="switchChange('user')">用户列表
+            </a>
+          </div>
+        </div>
+        <a-table
+          v-if="switchValue === 'organ'"
+          :columns="columnsOrgan"
+          rowKey="id"
+          bordered
+          :scroll="{x: 500}"
+          :data-source="dataSourceOrgan"
+          :pagination="ipaginationOrgan"
+          :row-selection="{ selectedRowKeys: selectedRowKeysOrgan, onChange: onSelectChangeOrgan, getCheckboxProps: getCheckboxPropsOrgan }"
+          :loading="loadingLeft"
+          @change="organLeftTableChange">
+        </a-table>
+        <a-table
+          v-else-if="switchValue === 'user'"
+          :columns="columnsUser"
+          rowKey="id"
+          bordered
+          :scroll="{x: 500}"
+          :data-source="dataSourceUser"
+          :pagination="ipaginationUser"
+          :row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser, getCheckboxProps: getCheckboxPropsUser }"
+          :loading="loadingLeft"
+          @change="userLeftTableChange">
+        </a-table>
+      </div>
+      <div class="modal-content-right">
+        <div class="modal-content-title-div">
+          <p class="modal-content-title">选择</p>
+        </div>
+        <a-table
+          v-if="switchValue === 'organ'"
+          :columns="columnsOrganRight"
+          rowKey="id"
+          bordered
+          :scroll="{x: 300}"
+          :loading="loadingRight"
+          :data-source="dataSourceOrganRight">
+          <template slot="action" slot-scope="text, record, index">
+            <a @click="handleDeleteOrgan(record, index)" >{{ $t('delete') }}</a>
+          </template>
+        </a-table>
+        <a-table
+          v-else-if="switchValue === 'user'"
+          :columns="columnsOrganRight"
+          rowKey="id"
+          bordered
+          :scroll="{x: 300}"
+          :loading="loadingRight"
+          :data-source="dataSourceOrganRight">
+          <template slot="action" slot-scope="text, record, index">
+            <a @click="handleDeleteOrgan(record, index)" >{{ $t('delete') }}</a>
+          </template>
+        </a-table>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import { getAction } from '@/api/manage'
+
+export default {
+  name: 'UserOrganSelectModal',
+  props: {
+    selectType: {
+      type: String,
+      default: 'all'
+    },
+    value: {
+      type: Object,
+      default: () => {
+        return {
+          organ: '',
+          user: ''
+        }
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        if (this.selectType === 'all') {
+          if (val.organ) {
+            this.loadOrganRight(val.organ, () => {
+              if (val.user) {
+                this.loadUserRight(val.user, () => {
+                  this.$emit('change', this.dataSourceOrganRight, this.dataSourceUserRight)
+                })
+              } else {
+                this.$emit('change', this.dataSourceOrganRight, [])
+              }
+            })
+          } else {
+            this.loadUserRight(val.user, () => {
+              this.$emit('change', [], this.dataSourceUserRight)
+            })
+          }
+        } else if (this.selectType === 'organ') {
+          this.loadOrganRight(val.organ, () => {
+            this.$emit('change', this.dataSourceOrganRight)
+          })
+        } else if (this.selectType === 'user') {
+          this.loadUserRight(val.user, () => {
+            this.$emit('change', this.dataSourceUserRight)
+          })
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      labelCol: {
+        sm: 4
+      },
+      wrapperCol: {
+        sm: 20
+      },
+      categoryTreeList: [], // 组织机构查询的组织机构树数据
+      switchValue: 'organ',
+      loadingLeft: false, // 左侧表的加载状态
+      loadingRight: false, // 右侧表的加载
+      // 组织机构左侧表相关数据
+      queryParamOrgan: {},
+      columnsOrgan: [
+        {
+          title: this.$t('organization'),
+          dataIndex: 'title',
+          align: 'center'
+        },
+        {
+          title: this.$t('userOrOrganSelect.secondLevel'),
+          dataIndex: 'secondLevel',
+          align: 'center'
+        },
+        {
+          title: this.$t('userOrOrganSelect.threeLevel'),
+          dataIndex: 'threeLevel',
+          align: 'center'
+        }
+      ],
+      dataSourceOrgan: [],
+      selectedRowKeysOrgan: [],
+      selectedRowsOrgan: [],
+      ipaginationOrgan: {
+        current: 1,
+        pageSize: 5,
+        pageSizeOptions: ['5', '10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      columnsOrganRight: [
+        {
+          title: this.$t('organization'),
+          dataIndex: 'title',
+          align: 'center'
+        },
+        {
+          title: this.$t('operation'),
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+          align: 'center'
+        }
+      ],
+      dataSourceOrganRight: [],
+      // 用户相关数据
+      queryParamUser: {},
+      columnsUser: [
+        {
+          title: this.$t('user.account'),
+          dataIndex: 'account',
+          align: 'center'
+        },
+        {
+          title: this.$t('userOrOrganSelect.name'),
+          dataIndex: 'name',
+          align: 'center'
+        },
+        {
+          title: this.$t('user.workNo'),
+          dataIndex: 'workNo',
+          align: 'center'
+        },
+        {
+          title: this.$t('role'),
+          dataIndex: 'role',
+          align: 'center'
+        },
+        {
+          title: this.$t('organization'),
+          dataIndex: 'organization',
+          align: 'center'
+        }
+      ],
+      dataSourceUser: [],
+      selectedRowKeysUser: [],
+      selectedRowsUser: [],
+      ipaginationUser: {
+        current: 1,
+        pageSize: 5,
+        pageSizeOptions: ['5', '10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      columnsUserRight: [
+        {
+          title: this.$t('userOrOrganSelect.name'),
+          dataIndex: 'title',
+          align: 'center'
+        },
+        {
+          title: this.$t('operation'),
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+          align: 'center'
+        }
+      ],
+      dataSourceUserRight: [],
+      url: {
+        organList: '',
+        userList: '/sys/user/page'
+      }
+    }
+  },
+  created () {
+    this.loadDataOrgan()
+  },
+  methods: {
+    open () {
+      this.visible = true
+    },
+    // switch改变
+    switchChange (value) {
+      this.switchValue = value
+      if (value === 'organ') {
+        this.loadDataOrgan()
+      } else {
+        this.loadDataUser()
+      }
+    },
+    /**
+     * 组织机构相关方法
+     */
+    // 获取组织机构树
+    getSysCategoryTree () {
+      getAction(this.url.getSysCategoryTree, {}).then((res) => {
+        if (res.success) {
+          this.categoryTreeList = res.result
+        } else {
+          this.categoryTreeList = []
+        }
+      })
+    },
+    searchResetOrgan () {
+      this.queryParamOrgan = {}
+      this.loadDataOrgan()
+    },
+    searchQueryOrgan () {
+      this.loadDataOrgan()
+    },
+    // 获取组织机构左侧树列表
+    loadDataOrgan () {
+      const params = Object.assign({}, this.queryParamOrgan)
+      params.pageNo = this.ipaginationOrgan.current
+      params.pageSize = this.ipaginationOrgan.pageSize
+      this.loadingLeft = true
+      getAction(this.url.organList, params).then((res) => {
+        if (res.success) {
+          if (res.result.current > 1 && res.result.records.length === 0) {
+            this.ipaginationOrgan.current = res.result.current - 1
+            this.loadDataOrgan()
+            return
+          }
+          this.dataSourceOrgan = res.result.records || []
+          this.ipaginationOrgan.total = res.result.total
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loadingLeft = false
+      })
+    },
+    // 组织机构左侧树的选择
+    onSelectChangeOrgan (selectedRowKeys, selectedRows) {
+      this.selectedRowKeysOrgan = selectedRows
+      this.selectedRowsOrgan = selectedRows
+      this.dataSourceOrganRight.map(selectedRows)
+    },
+    // 组织结构左侧树的复选框状态
+    getCheckboxPropsOrgan (record) {
+      return {
+        disabled: this.selectedRowKeysOrgan.includes(record.id)
+      }
+    },
+    // 组织机构左侧表格改变
+    organLeftTableChange (pagination) {
+      this.ipaginationOrganLeft = pagination
+      this.loadDataOrgan()
+    },
+    // 组织机构右侧表的删除
+    handleDeleteOrgan (record, index) {
+      this.dataSourceOrganRight.splice(index, 1)
+      this.selectedRowKeysOrgan = this.selectedRowKeysOrgan.filter(item => item === record.id)
+    },
+    // 组织机构初始化右侧树列表
+    loadOrganRight (ids, callback) {
+      this.loadingRight = true
+      getAction(this.url.organList, { ids: ids }).then((res) => {
+        if (res.success) {
+          this.dataSourceOrganRight = res.result.records || []
+          callback && callback()
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loadingRight = false
+      })
+    },
+    /**
+     * 用户相关方法
+     */
+    searchResetUser () {
+      this.queryParamUser = {}
+      this.loadDataUser()
+    },
+    searchQueryUser () {
+      this.loadDataUser()
+    },
+    // 获取用户左侧树列表
+    loadDataUser () {
+      const params = Object.assign({}, this.queryParamUser)
+      params.pageNo = this.ipaginationUser.current
+      params.pageSize = this.ipaginationUser.pageSize
+      this.loadingLeft = true
+      getAction(this.url.userList, params).then((res) => {
+        if (res.success) {
+          if (res.result.current > 1 && res.result.records.length === 0) {
+            this.ipaginationOrgan.current = res.result.current - 1
+            this.loadDataUser()
+            return
+          }
+          this.dataSourceUser = res.result.records || []
+          this.ipaginationUser.total = res.result.total
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loadingLeft = false
+      })
+    },
+    // 用户左侧表的选择
+    onSelectChangeUser (selectedRowKeys, selectedRows) {
+      this.selectedRowKeysUser = selectedRows
+      this.selectedRowsUser = selectedRows
+      this.dataSourceUserRight.map(selectedRows)
+    },
+    // 用户左侧表的复选框状态
+    getCheckboxPropsUser (record) {
+      return {
+        disabled: this.selectedRowKeysUser.includes(record.id)
+      }
+    },
+    // 用户左侧表格改变
+    userLeftTableChange (pagination) {
+      this.ipaginationUserLeft = pagination
+      this.loadDataUser()
+    },
+    // 用户右侧表的删除
+    handleDeleteUser (record, index) {
+      this.dataSourceUserRight.splice(index, 1)
+      this.selectedRowKeysUser = this.selectedRowKeysUser.filter(item => item === record.id)
+    },
+    // 用户初始化右侧树列表
+    loadUserRight (ids, callback) {
+      this.loadingRight = true
+      getAction(this.url.userList, { ids: ids }).then((res) => {
+        if (res.success) {
+          this.dataSourceUserRight = res.result.records || []
+          callback && callback()
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loadingRight = false
+      })
+    },
+    handleOk () {
+      if (this.selectType === 'all') {
+        this.$emit('change', this.dataSourceOrganRight, this.dataSourceUserRight)
+      } else if (this.selectType === 'organ') {
+        this.$emit('change', this.dataSourceOrganRight)
+      } else {
+        this.$emit('change', this.dataSourceUserRight)
+      }
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.dataSourceOrgan = []
+      this.dataSourceUser = []
+      this.dataSourceOrganRight = []
+      this.dataSourceUserRight = []
+      this.selectedRowKeysOrgan = []
+      this.selectedRowKeysUser = []
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</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/defaultSettings.js

@@ -14,7 +14,7 @@
  */
 
 export default {
-  primaryColor: '#1890FF', // primary color of ant design
+  primaryColor: '#D52C26', // primary color of ant design
   navTheme: 'light', // theme for nav menu
   layout: 'sidemenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu

src/mixins/ConfigurableTableMixin.js

@@ -67,9 +67,9 @@ export const ConfigurableTableMixin = {
     this.getTableHeader()
     this.loadData()
     // 过滤没有权限的按钮
-    if (this.needFilterTableBtn) {
+    // if (this.needFilterTableBtn) {
-      this.operationList = this.operationList.filter(item => isHasPermission(item.has))
+    //   this.operationList = this.operationList.filter(item => isHasPermission(item.has))
-    }
+    // }
   },
   methods: {
     /**

src/views/dashboard/Analysis.vue

@@ -1,17 +1,15 @@
 <template>
   <div>
-    <a-button @click="previewFileByOnlyOffice('1693528070103957505')">打开预览onlyOffice</a-button>
+    <user-or-organ-selection></user-or-organ-selection>
-    <a-button @click="editFileByOnlyOffice('1693528070103957505')">打开编辑onlyOffice</a-button>
-    <j-upload />
   </div>
 </template>
 
 <script>
-import onlyOfficePreview from '@/common/onlyOffice/onlyOfficePreview'
+import UserOrOrganSelection from '../../components/selection/UserOrOrganSelection'
-import onlyOfficeEdit from '@/common/onlyOffice/onlyOfficeEdit'
 
 export default {
   name: 'Analysis',
+  components: { UserOrOrganSelection },
   data () {
     return {}
   },
@@ -19,12 +17,6 @@ export default {
 
   },
   methods: {
-    previewFileByOnlyOffice (fileId) {
-      onlyOfficePreview(fileId, '文件名')
-    },
-    editFileByOnlyOffice (fileId) {
-      onlyOfficeEdit(fileId, '文件名')
-    }
   }
 }
 </script>

src/views/system/RoleUserList.vue

@@ -48,6 +48,7 @@
 
         <div style="margin-top: 15px">
           <a-table
+            :components="drag(columns,'columns')"
             style="height:500px"
             ref="table"
             size="middle"
@@ -140,6 +141,7 @@
             <a style="margin-left: 24px" @click="onClearSelected2">{{ $t('empty') }}</a>
           </div>
           <a-table
+            :components="drag(columns2,'columns2')"
             style="height:500px"
             ref="table2"
             bordered
@@ -178,6 +180,7 @@
   </a-row>
 </template>
 <script>
+import '@assets/less/common.less'
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import { postAction, getAction } from '@/api/manage'
 import SelectUserModal from './modules/SelectUserModal'
@@ -186,10 +189,11 @@ import UserModal from './modules/UserModal'
 import { filterObj } from '@/utils/util'
 import UserRoleModal from './modules/UserRoleModal'
 import moment from 'moment'
+import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
 
 export default {
   name: 'RoleUserList',
-  mixins: [JeroListMixin],
+  mixins: [JeroListMixin, ResizeHeader, ResizeColumnProvide],
   components: {
     UserRoleModal,
     SelectUserModal,

src/views/system/UserList.vue

@@ -126,11 +126,10 @@
         <a style="margin-left: 24px" @click="onClearSelected">{{ $t('empty') }}</a>
       </div>
 
-      <a-table
+      <j-table
-        :components="drag(columns,'columns')"
+        :can-drag="true"
         :scroll="{x: '100%'}"
         ref="table"
-        bordered
         size="middle"
         rowKey="id"
         :columns="columns"
@@ -140,13 +139,13 @@
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
         @change="handleTableChange">
 
-        <template slot="avatarslot" slot-scope="text, record/* , index */">
+        <template v-slot:avatarslot="{text, record}">
           <div class="anty-img-wrap">
             <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
           </div>
         </template>
 
-        <span slot="action" slot-scope="text, record">
+        <template v-slot:action="{text, record}">
           <a @click="handleEdit(record)" >{{ $t('edit') }}</a>
 
           <a-divider type="vertical" />
@@ -183,9 +182,9 @@
               </a-menu-item>
             </a-menu>
           </a-dropdown>
-        </span>
+        </template>
 
-      </a-table>
+      </j-table>
     </div>
     <!-- table区域-end -->
 
@@ -204,6 +203,7 @@
 </template>
 
 <script>
+import '@assets/less/common.less'
 import RoleAssignment from './modules/RoleAssignment'
 import UserModal from './modules/UserModal'
 import PasswordModal from './modules/PasswordModal'
@@ -212,18 +212,19 @@ import { frozenBatch, queryall } from '@/api/api'
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JInput from '@/components/jero/JInput'
 import UserRecycleBinModal from './modules/UserRecycleBinModal'
-import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
+import JTable from '@/components/jero/JTable'
 import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
 
 export default {
   name: 'UserList',
-  mixins: [JeroListMixin, ResizeHeader, ResizeColumnProvide],
+  mixins: [JeroListMixin],
   components: {
     RoleAssignment,
     UserModal,
     PasswordModal,
     JInput,
     UserRecycleBinModal,
+    JTable,
     JSearchSelectTag
   },
   data () {
@@ -450,5 +451,4 @@ export default {
 }
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
 </style>

vue.config.js

@@ -65,8 +65,8 @@ module.exports = {
       less: {
         modifyVars: {
           /* less 变量覆盖，用于自定义 ant design 主题 */
-          'primary-color': '#1890FF',
+          'primary-color': '#D52C26',
-          'link-color': '#1890FF',
+          'link-color': '#D52C26',
           'border-radius-base': '4px'
         },
         javascriptEnabled: true
@@ -75,7 +75,7 @@ module.exports = {
   },
 
   devServer: {
-    port: 23084,
+    port: 3334,
     proxy: {
       /* '/api': {
         target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
@@ -86,7 +86,7 @@ module.exports = {
         }
       }, */
       '/laws-sinotruk': {
-        target: 'http://localhost:23085',
+        target: 'http://localhost:8184',
         ws: false,
         changeOrigin: true,
         pathRewrite: {