From 010bdd522624db1c490fd30c244bd8e68b1e57d3 Mon Sep 17 00:00:00 2001
From: lideqin <694785430@qq.com>
Date: Thu, 1 Feb 2024 14:06:45 +0800
Subject: [PATCH] =?UTF-8?q?[update]=20=E4=BF=AE=E6=94=B9bug81587?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../selection/UserSelectByContactNoMerge.vue  | 133 +++++++
 .../UserSelectByContactNoMergeModal.vue       | 356 ++++++++++++++++++
 .../modules/ConfirmWhetherCommentBaseInfo.vue |  43 ++-
 3 files changed, 513 insertions(+), 19 deletions(-)
 create mode 100644 src/components/selection/UserSelectByContactNoMerge.vue
 create mode 100644 src/components/selection/UserSelectByContactNoMergeModal.vue

diff --git a/src/components/selection/UserSelectByContactNoMerge.vue b/src/components/selection/UserSelectByContactNoMerge.vue
new file mode 100644
index 00000000..68cd55d0
--- /dev/null
+++ b/src/components/selection/UserSelectByContactNoMerge.vue
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <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-by-contact-no-merge-modal v-bind="$attrs" :nameStr="nameStr" ref="selectModal" @change="selectChange" @listChange="listChange" @nameChange="nameChange"></user-select-by-contact-no-merge-modal>
+  </div>
+</template>
+
+<script>
+import UserSelectByContactNoMergeModal from './UserSelectByContactNoMergeModal'
+export default {
+  name: 'UserSelectByContactNoMerge',
+  components: { UserSelectByContactNoMergeModal },
+  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: ''
+    }
+  },
+  methods: {
+    selectClick () {
+      // 禁用后不弹框
+      if (this.disabled) {
+        return
+      }
+      this.$refs.selectModal.open(this.value)
+    },
+    selectChange (ids) {
+      this.$emit('change', ids)
+    },
+    listChange (value) {
+      this.$emit('listChange', value)
+    },
+    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;
+  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>
diff --git a/src/components/selection/UserSelectByContactNoMergeModal.vue b/src/components/selection/UserSelectByContactNoMergeModal.vue
new file mode 100644
index 00000000..ae827be2
--- /dev/null
+++ b/src/components/selection/UserSelectByContactNoMergeModal.vue
@@ -0,0 +1,356 @@
+<template>
+  <j-modal
+    :title="$t('userSelect.selectUser')"
+    :maskClosable="false"
+    :width="1000"
+    :closable="true"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    switchFullscreen
+    :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 :span="6">
+            <a-form-item :label="$t('system.contact.departName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-input :placeholder="$t('pleaseEnter')+$t('system.contact.departName')" v-model="queryParam.departName"></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item :label="$t('system.contact.contactPerson')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input :placeholder="$t('pleaseEnter')+$t('system.contact.contactPerson')" v-model="queryParam.contact"></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" 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>
+    </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 + item.contactId" class="name-div">
+        {{ item.contactId_dictText }}
+        <a-icon type="close" @click="handleDelete(item, index)" />
+      </div>
+    </div>
+    <a-empty v-else/>
+  </j-modal>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+
+export default {
+  name: 'UserSelectByContactNoMergeModal',
+  props: {
+    type: { // 是单选还是多选
+      type: String,
+      default: 'radio'
+    },
+    value: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    list: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    }
+  },
+  // computed: {
+  //   nameArr () {
+  //     if (this.dataSourceRight && this.dataSourceRight.length > 0) {
+  //       return this.unique(this.dataSourceRight)
+  //     } else {
+  //       return []
+  //     }
+  //   }
+  // },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        console.log(val)
+        if (val) {
+          this.selectedRowKeys = val ? val.split(',') : []
+        }
+      }
+    },
+    list: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        console.log('list改变了------------', val)
+        if (val && val.length > 0) {
+          this.dataSourceRight = JSON.parse(JSON.stringify(val))
+        } else {
+          this.dataSourceRight = []
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      queryParam: {},
+      labelCol: {
+        span: 6
+      },
+      wrapperCol: {
+        span: 18
+      },
+      columns: [
+        { // 部门名称
+          title: this.$t('system.contact.departName'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'departId_dictText',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 标准化工程师
+          title: this.$t('system.contact.standardizationEngineer'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'engineerId_dictText',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 联络人
+          title: this.$t('system.contact.contactPerson'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'contactId_dictText',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 部门联络人主管级领导
+          title: this.$t('system.contact.contactPersonSupervisorLevelLeader'),
+          align: 'center',
+          width: 240,
+          dataIndex: 'leaderId_dictText',
+          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: [],
+      url: {
+        userList: '/laws/system/lawsContactManage/page',
+        userListByIds: '/laws/system/lawsContactManage/queryById'
+      }
+    }
+  },
+  mounted () {
+    this.loadData()
+  },
+  methods: {
+    open (value) {
+      this.visible = true
+      this.loadData()
+      if (value) {
+        this.selectedRowKeys = value.split(',')
+      }
+      if (this.list && this.list.length > 0) {
+        this.dataSourceRight = JSON.parse(JSON.stringify(this.list))
+      } else {
+        this.dataSourceRight = []
+      }
+    },
+    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.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 {
+          // 说明是删除了数据
+          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()
+    },
+    // unique (array) {
+    //   // 定义要返回的数组
+    //   const resultArr = []
+    //   // 循环遍历未去重的数组
+    //   array.forEach(item => {
+    //     // 如果obj中没有改元素属性
+    //     if (!resultArr.find(i => i.contactId === item.contactId)) {
+    //       // 说明还没有这个联络人
+    //       resultArr.push(item)
+    //     }
+    //   })
+    //   return resultArr
+    // },
+    // 名字列表的删除
+    handleDelete (record, index) {
+      this.dataSourceRight.splice(index, 1)
+      this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== record.id)
+    },
+    handleOk () {
+      this.$emit('nameChange', this.dataSourceRight.map(item => item.contactId_dictText).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">
+.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;
+  .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>
diff --git a/src/views/workCenter/enterpriseStandardRevision/modules/ConfirmWhetherCommentBaseInfo.vue b/src/views/workCenter/enterpriseStandardRevision/modules/ConfirmWhetherCommentBaseInfo.vue
index b271dd76..7031a514 100644
--- a/src/views/workCenter/enterpriseStandardRevision/modules/ConfirmWhetherCommentBaseInfo.vue
+++ b/src/views/workCenter/enterpriseStandardRevision/modules/ConfirmWhetherCommentBaseInfo.vue
@@ -43,14 +43,15 @@
                   {{ $t('workCenter.enStandardRevision.departmentalLiaison') }}
                 </span>
           </div>
-          <a-form-model-item class="item-model" prop="contactUser">
-            <user-selection v-model="formInline.contactUser"
-                            :placeholder="$t('pleaseSelect')+$t('workCenter.enStandardRevision.departmentalLiaison')"
-                            :disabled="disabled"
-                            filedName="contactUser"
-                            @nameChange="userSelectNameChange"
-                            :nameStr="formInline.contactUser_dictText"
-                            type="checkbox"/>
+          <a-form-model-item class="item-model" prop="contactUserAndLeader">
+            <!--  用不合并的联络人选人组件需要把回显的和传给后端的字段分开，listChange的时候更新传给后端的内容  -->
+            <user-select-by-contact-no-merge v-model="formInline.contactUserAndLeader"
+                                             :placeholder="$t('pleaseSelect')+$t('workCenter.enStandardRevision.departmentalLiaison')"
+                                             :disabled="disabled"
+                                             @listChange="userSelectListChange"
+                                             :nameStr="formInline.contactUser_dictText"
+                                             :list="formInline.contactUserList"
+                                             type="checkbox"/>
           </a-form-model-item>
         </div>
       </div>
@@ -60,15 +61,11 @@
 
 <script>
 import BaseInfoForm from './BaseInfoForm'
-import UserSelection from '@/components/selection/UserSelection'
-import Vue from 'vue'
-import { kkFilePreview } from '@/utils/kkFilePreview'
-import { ACCESS_TOKEN } from '@/store/mutation-types'
-import { queryFileInfoByEditId } from '../../../../api/workCenter'
-import { Base64 } from 'js-base64'
+import UserSelectByContactNoMerge from '@/components/selection/UserSelectByContactNoMerge'
+
 export default {
   name: 'ConfirmWhetherCommentBaseInfo',
-  components: { BaseInfoForm, UserSelection },
+  components: { BaseInfoForm, UserSelectByContactNoMerge },
   props: {
     disabled: {
       type: Boolean,
@@ -81,7 +78,7 @@ export default {
       formInline: {},
       rules: {
         // 部门联络人
-        contactUser: [
+        contactUserAndLeader: [
           {
             required: true,
             message: this.$t('workCenter.enStandardRevision.departmentalLiaison') + this.$t('cannotEmpty'),
@@ -118,15 +115,23 @@ export default {
       await this.$refs.ruleForm.validate(valid => {
         if (valid) {
           data = Object.assign({}, this.formInline)
+          console.log(data)
         } else {
           data = false
         }
       })
+      // ?????
+      data = false
       return data
     },
-    // 选择用户得到用户名
-    userSelectNameChange (value, fieldName) {
-      this.formInline[fieldName + '_dictText'] = value
+    // 选完联络人得到列表
+    userSelectListChange (list) {
+      console.log(list)
+      // 联络人
+      this.formInline.contactUser = list.map(item => item.contactId).join(',')
+      this.formInline.contactUser_dictText = list.map(item => item.contactId_dictText).join(',')
+      // 联络人选中数据的数组
+      this.formInline.contactUserList = list
     },
     // 在线编辑的查看
     onlineEditView () {