森语-事故处理单-通知

src/views/oa/modules/IncidentTicketModalDetail.vue

@@ -250,7 +250,7 @@
           </a-row>
         </a-form-model>
 
-      <j-select-biz-component   ref="JSelectBizComponent"  :value="value"  :listUrl="url.list"  :columns="columns"  v-on="$listeners"   @send-notice="sendNotice"  />
+      <j-select-biz-component   ref="JSelectBizComponent"    @send-notice="sendNotice" />
     </div>
     </a-spin>
   </a-modal>
@@ -273,7 +273,7 @@
       JDictSelectTag,
       JSelectBizComponent,
       JUpload,
-      JSearchSelectTag
+      JSearchSelectTag,
     },
     data() {
       return {
@@ -467,7 +467,8 @@
     },
     methods: {
       addNotice(){   
-        this.$refs.JSelectBizComponent.visible = true
+        // this.$refs.JSelectBizComponent.visible = true
+        this.$refs.JSelectBizComponent.showModal()
       },
       feedbackNotice(){
         getAction('/oa/incidentTicket/noticeUserReturn', {headId:this.formState.id,title:this.formState.accidentTheme,code:this.formState.accidentNumber}).then((res) => {

src/views/oa/modules/JSelectUserByDepModal.vue

@@ -1,60 +1,53 @@
 <template>
   <a-modal
-    centered
-    :title="name + '选择'"
-    :width="width"
+    width="85%"
     :visible="visible"
-    @ok="handleOk"
+    :title="title"
+    @ok="handleSubmit"
     @cancel="close"
-    cancelText="关闭">
-
-    <a-row :gutter="18">
-      <a-col :span="16">
-        <!-- 查询区域 -->
-        <div class="table-page-search-wrapper">
-          <a-form layout="inline">
-            <a-row :gutter="24">
-
-              <a-col :span="14">
-                <a-form-item :label="(queryParamText||name)">
-                  <a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-                  </span>
-              </a-col>
-
-            </a-row>
-          </a-form>
-        </div>
-
-        <a-table
-          size="small"
-          bordered
-          :rowKey="rowKey"
-          :columns="innerColumns"
-          :dataSource="dataSource"
-          :pagination="ipagination"
-          :loading="loading"
-          :scroll="{ y: 240 }"
-          :rowSelection="{selectedRowKeys, onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}"
-          :customRow="customRowFn"
-          @change="handleTableChange">
-        </a-table>
-
+    cancelText="关闭"
+    style="margin-top: -70px"
+    wrapClassName="ant-modal-cust-warp"
+  >
+    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
+      <a-col :md="6" :sm="24">
+        <a-card :bordered="false">
+          <!--组织机构-->
+          <a-directory-tree
+            selectable
+            :selectedKeys="selectedDepIds"
+            :checkStrictly="true"
+            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
+            :treeData="departTree"
+            :expandAction="false"
+            :expandedKeys.sync="expandedKeys"
+            @select="onDepSelect"
+          />
+        </a-card>
       </a-col>
-      <a-col :span="8">
-        <a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
-
-          <a-table size="small" :rowKey="rowKey" bordered v-bind="selectedTable">
-              <span slot="action" slot-scope="text, record, index">
-                <a @click="handleDeleteSelected(record, index)">删除</a>
-              </span>
+      <a-col :md="18" :sm="24">
+        <a-card :bordered="false">
+          用户姓名:
+          <a-input-search
+            :style="{width:'150px',marginBottom:'15px'}"
+            placeholder="请输入姓名"
+            v-model="queryParam.realname"
+            @search="onSearch"
+          ></a-input-search>
+          <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
+          <!--用户列表-->
+          <a-table
+            ref="table"
+            :scroll="scrollTrigger"
+            size="middle"
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination="ipagination"
+            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
+            :loading="loading"
+            @change="handleTableChange">
           </a-table>
-
         </a-card>
       </a-col>
     </a-row>
@@ -62,96 +55,63 @@
 </template>
 
 <script>
-  import { getAction } from '@/api/manage'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import {filterObj, cloneObject, pushIfNotExist } from '@/utils/util'
-  export default {
-    name: 'JSelectBizComponentModal',
-    mixins: [JeecgListMixin],
-    props: {
-      value: {
-        type: Array,
-        default: () => []
-      },
-      visible: {
-        type: Boolean,
-        default: false
-      },
-      valueKey: {
-        type: String,
-        required: true
-      },
-      multiple: {
-        type: Boolean,
-        default: true
-      },
-      width: {
-        type: Number,
-        default: 900
-      },
+  import {filterObj} from '@/utils/util'
+  import {queryDepartTreeList, getUserList, queryUserByDepId} from '@/api/api'
 
-      name: {
-        type: String,
-        default: ''
-      },
-      listUrl: {
-        type: String,
-        required: true,
-        default: ''
-      },
-      // 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname
-      valueUrl: {
-        type: String,
-        default: ''
-      },
-      displayKey: {
-        type: String,
-        default: null
-      },
-      columns: {
-        type: Array,
-        required: true,
-        default: () => []
-      },
-      // 查询条件Code
-      queryParamCode: {
-        type: String,
-        default: null
-      },
-      // 查询条件文字
-      queryParamText: {
-        type: String,
-        default: null
-      },
-      rowKey: {
-        type: String,
-        default: 'id'
-      },
-    },
+  export default {
+    name: 'JSelectUserByDepModal',
+    components: {},
     data() {
       return {
-        innerValue: [],
-        // 表头
-        innerColumns: this.columns,
-        // 已选择列表
-        selectedTable: {
-          pagination: false,
-          scroll: { y: 240 },
-          columns: [
-            {
-              ...this.columns[0],
-              width: this.columns[0].widthRight || this.columns[0].width,
-            },
-            { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
-          ],
-          dataSource: [],
+        queryParam: {
+          username: "",
         },
-        url: { list: this.listUrl },
-        /* 分页参数 */
+        columns: [
+          {
+            title: '用户账号',
+            align: 'center',
+            dataIndex: 'username'
+          },
+          {
+            title: '用户姓名',
+            align: 'center',
+            dataIndex: 'realname'
+          },
+          {
+            title: '性别',
+            align: 'center',
+            dataIndex: 'sex',
+            customRender: function (text) {
+              if (text === 1) {
+                return '男'
+              } else if (text === 2) {
+                return '女'
+              } else {
+                return text
+              }
+            }
+          },
+          {
+            title: '手机',
+            align: 'center',
+            dataIndex: 'phone'
+          },
+          {
+            title: '部门',
+            align: 'center',
+            dataIndex: 'orgCode'
+          }
+        ],
+        scrollTrigger: {},
+        dataSource: [],
+        selectedRowKeys: [],
+        selectUserRows: [],
+        selectUserIds: [],
+        title: '根据部门选择用户',
         ipagination: {
           current: 1,
-          pageSize: 5,
-          pageSizeOptions: ['5', '10', '20', '30'],
+          pageSize: 10,
+          pageSizeOptions: ['10', '20', '30'],
           showTotal: (total, range) => {
             return range[0] + '-' + range[1] + ' 共' + total + '条'
           },
@@ -159,166 +119,223 @@
           showSizeChanger: true,
           total: 0
         },
-        options: [],
-        dataSourceMap: {},
+        isorter: {
+          column: 'createTime',
+          order: 'desc'
+        },
+        selectedDepIds: [],
+        departTree: [],
+        visible: false,
+        form: this.$form.createForm(this),
+        loading: false,
+        expandedKeys: [],
+      }
+    },
+    props: ['modalWidth', 'multi', 'userIds','customReturnField'],
+    computed: {
+      // 计算属性的 getter
+      getType: function () {
+        return this.multi == true ? 'checkbox' : 'radio';
       }
     },
     watch: {
-      value: {
-        deep: true,
+      userIds: {
         immediate: true,
-        handler(val) {
-          this.innerValue = cloneObject(val)
-          this.selectedRowKeys = []
-          this.valueWatchHandler(val)
-          this.queryOptionsByValue(val)
+        handler() {
+          this.initUserNames()
         }
       },
-      dataSource: {
-        deep: true,
-        handler(val) {
-          this.emitOptions(val)
-          this.valueWatchHandler(this.innerValue)
+    },
+    created() {
+      // 该方法触发屏幕自适应
+      this.resetScreenSize();
+      this.loadData()
+    },
+    methods: {
+        initUserNames() {
+        if (this.userIds) {
+          // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
+          let values = this.userIds.split(',') + ','
+          var param = {
+            // username: values,
+              pageNo: 1,
+            pageSize: values.length
+          }
+          param[this.customReturnField] = values;
+          console.log("回显用户参数",param)
+          getUserList(param).then((res) => {
+            if (res.success) {
+              let selectedRowKeys = []
+              let realNames = []
+              res.result.records.forEach(user => {
+                realNames.push(user['realname'])
+                selectedRowKeys.push(user['id'])
+              })
+              this.selectedRowKeys = selectedRowKeys
+              console.log("回显用户",selectedRowKeys)
+              this.$emit('initComp', realNames.join(','))
+            }
+          })
+        } else {
+          // JSelectUserByDep组件bug issues/I16634
+          this.$emit('initComp', '')
         }
       },
-      selectedRowKeys: {
-        immediate: true,
-        deep: true,
-        handler(val) {
-          this.selectedTable.dataSource = val.map(key => {
-            for (let data of this.dataSource) {
-              if (data[this.rowKey] === key) {
-                pushIfNotExist(this.innerValue, data[this.valueKey])
-                return data
-              }
-            }
-            for (let data of this.selectedTable.dataSource) {
-              if (data[this.rowKey] === key) {
-                pushIfNotExist(this.innerValue, data[this.valueKey])
-                return data
-              }
+      async loadData(arg) {
+        if (arg === 1) {
+          this.ipagination.current = 1;
+        }
+        if (this.selectedDepIds && this.selectedDepIds.length > 0) {
+          await this.initQueryUserByDepId(this.selectedDepIds)
+        } else {
+          this.loading = true
+          let params = this.getQueryParams()//查询条件
+          if(params.realname) params.realname = `*${params.realname}*`;
+          await getUserList(params).then((res) => {
+            if (res.success) {
+              this.dataSource = res.result.records
+              this.ipagination.total = res.result.total
             }
-            console.warn('未找到选择的行信息，key：' + key)
-            return {}
+          }).finally(() => {
+            this.loading = false
           })
-        },
-      }
-    },
-
-    methods: {
+        }
+      },
+      // 触发屏幕自适应
+      resetScreenSize() {
+        let screenWidth = document.body.clientWidth;
+        if (screenWidth < 500) {
+          this.scrollTrigger = {x: 800};
+        } else {
+          this.scrollTrigger = {};
+        }
+      },
+      showModal() {
+        this.visible = true;
+        this.queryDepartTree();
+        this.initUserNames()
+        this.loadData();
+        this.form.resetFields();
+      },
       getQueryParams() {
-        var param = Object.assign({}, this.queryParam, null);
+        let param = Object.assign({}, this.queryParam, '');
         param.field = this.getQueryField();
         param.pageNo = this.ipagination.current;
         param.pageSize = this.ipagination.pageSize;
         return filterObj(param);
       },
-      /** 关闭弹窗 */
+      getQueryField() {
+        let str = 'id,';
+        for (let a = 0; a < this.columns.length; a++) {
+          str += ',' + this.columns[a].dataIndex;
+        }
+        return str;
+      },
+      searchReset(num) {
+        let that = this;
+        if (num !== 0) {
+          that.queryParam = {};
+          that.loadData(1);
+        }
+        that.selectedRowKeys = [];
+        that.selectUserIds = [];
+        that.selectedDepIds = [];
+      },
       close() {
-        this.visible = false
+        this.searchReset(0);
+        this.visible = false;
       },
-
-      valueWatchHandler(val) {
-        val.forEach(item => {
-          this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
-            if (data[this.valueKey] === item) {
-              pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
-            }
-          })
+      handleTableChange(pagination, filters, sorter) {
+        //TODO 筛选
+        if (Object.keys(sorter).length > 0) {
+          this.isorter.column = sorter.field;
+          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
+        }
+        this.ipagination = pagination;
+        this.loadData();
+      },
+      handleSubmit() {
+        let that = this;
+        this.getSelectUserRows();
+        let username = []
+        this.selectUserRows.forEach(user => {
+          username.push(user['username'])
         })
+        that.$emit('send-notice',username.toString());
+        that.searchReset(0)
+        that.close();
       },
-
-      queryOptionsByValue(value) {
-        if (!value || value.length === 0) {
-          return
-        }
-        // 判断options是否存在value，如果已存在数据就不再请求后台了
-        let notExist = false
-        for (let val of value) {
-          let find = false
-          for (let option of this.options) {
-            if (val === option.value) {
-              find = true
-              break
-            }
-          }
-          if (!find) {
-            notExist = true
-            break
+      //获取选择用户信息
+      getSelectUserRows(rowId) {
+        let dataSource = this.dataSource;
+        let userIds = "";
+        this.selectUserRows = [];
+        for (let i = 0, len = dataSource.length; i < len; i++) {
+          if (this.selectedRowKeys.includes(dataSource[i].id)) {
+            this.selectUserRows.push(dataSource[i]);
+            // userIds = userIds + "," + dataSource[i].username
+            userIds = userIds + "," + dataSource[i][this.customReturnField]
           }
         }
-        if (!notExist) return
-        getAction(this.valueUrl || this.listUrl, {
-          // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
-          [this.valueKey]: value.join(',') + ',',
-          pageNo: 1,
-          pageSize: value.length
-        }).then((res) => {
-          if (res.success) {
-            let dataSource = res.result
-            if (!(dataSource instanceof Array)) {
-              dataSource = res.result.records
-            }
-            this.emitOptions(dataSource, (data) => {
-              pushIfNotExist(this.innerValue, data[this.valueKey])
-              pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
-              pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
-            })
+        this.selectUserIds = userIds.substring(1);
+      },
+      // 点击树节点,筛选出对应的用户
+      onDepSelect(selectedDepIds) {
+        if (selectedDepIds[0] != null) {
+          this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
+          if (this.selectedDepIds[0] !== selectedDepIds[0]) {
+            this.selectedDepIds = [selectedDepIds[0]];
           }
-        })
+        }
       },
-
-      emitOptions(dataSource, callback) {
-        dataSource.forEach(data => {
-          let key = data[this.valueKey]
-          this.dataSourceMap[key] = data
-          pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
-          typeof callback === 'function' ? callback(data) : ''
-        })
-        this.$emit('options', this.options, this.dataSourceMap)
+      onSelectChange(selectedRowKeys, selectionRows) {
+        this.selectedRowKeys = selectedRowKeys;
+        this.selectionRows = selectionRows;
       },
-
-      /** 完成选择 */
-      handleOk() {
-        var username =[]
-         this.selectedTable.dataSource.map(data => {
-          username.push(data.username)
-        })
-        var ids = username.toString()
-        this.$emit('send-notice', ids)
-        this.close()
+      onSearch() {
+        this.loadData(1);
       },
-
-      /** 删除已选择的 */
-      handleDeleteSelected(record, index) {
-        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
-        this.selectedTable.dataSource.splice(index, 1)
+      // 根据选择的id来查询用户信息
+      initQueryUserByDepId(selectedDepIds) {
+        this.loading = true
+        let params = this.getQueryParams()//查询条件
+        let realname = params.realname||'';
+        return queryUserByDepId({id: selectedDepIds.toString(),realname:realname}).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result;
+            this.ipagination.total = res.result.length;
+          }
+        }).finally(() => {
+          this.loading = false
+        })
       },
-
-      customRowFn(record) {
-        return {
-          on: {
-            click: () => {
-              let key = record[this.rowKey]
-              if (!this.multiple) {
-                this.selectedRowKeys = [key]
-                this.selectedTable.dataSource = [record]
-              } else {
-                let index = this.selectedRowKeys.indexOf(key)
-                if (index === -1) {
-                  this.selectedRowKeys.push(key)
-                  this.selectedTable.dataSource.push(record)
-                } else {
-                  this.handleDeleteSelected(record, index)
-                }
-              }
-            }
+      queryDepartTree() {
+        queryDepartTreeList().then((res) => {
+          if (res.success) {
+            this.departTree = res.result;
+            // 默认展开父节点
+            this.expandedKeys = this.departTree.map(item => item.id)
           }
-        }
+        })
       },
-
+      modalFormOk() {
+        this.loadData();
+      }
     }
   }
 </script>
-<style lang="less" scoped>
+
+<style scoped>
+  .ant-table-tbody .ant-table-row td {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  #components-layout-demo-custom-trigger .trigger {
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color .3s;
+  }
 </style>