From 646123cbbe83908eaaa681f8c0792830406affd4 Mon Sep 17 00:00:00 2001
From: "aoli.qu" <408346101@qq.com>
Date: Tue, 23 Nov 2021 21:05:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E9=A1=B9=E7=9B=AE=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/person/personOrg.js        |  21 +++
 src/views/org/OrgForm.vue          |   4 +-
 src/views/org/OrgList.vue          |   4 +-
 src/views/person/PersonForm.vue    |   2 +
 src/views/person/PersonList.vue    |  41 +++--
 src/views/person/PersonOrgForm.vue | 254 +++++++++++++++++++++++++++++
 6 files changed, 308 insertions(+), 18 deletions(-)
 create mode 100644 src/api/person/personOrg.js
 create mode 100644 src/views/person/PersonOrgForm.vue

diff --git a/src/api/person/personOrg.js b/src/api/person/personOrg.js
new file mode 100644
index 0000000..d887449
--- /dev/null
+++ b/src/api/person/personOrg.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+const personOrgApi = {
+  listByOrgId: 'person/org/listByOrgId',
+  addPersonOrg: 'person/org/addPersonOrg'
+}
+
+export function listPersonByOrgId(params) {
+  return request({
+    url: personOrgApi.listByOrgId,
+    method: 'get',
+    params: params
+  })
+}
+export function addPersonOrg(params) {
+  return request({
+    url: personOrgApi.addPersonOrg,
+    method: 'post',
+    data: params
+  })
+}
diff --git a/src/views/org/OrgForm.vue b/src/views/org/OrgForm.vue
index eea5757..b9de120 100644
--- a/src/views/org/OrgForm.vue
+++ b/src/views/org/OrgForm.vue
@@ -193,7 +193,7 @@
                   this.$emit('ok', values)
                   this.form.resetFields()
                 } else {
-                  this.$message.error('编辑失败：' + res.message)
+                  this.$message.error('编辑失败：' + res.msg)
                 }
               }).finally((res) => {
                 this.confirmLoading = false
@@ -208,7 +208,7 @@
                   this.$emit('ok', values)
                   this.form.resetFields()
                 } else {
-                  this.$message.error('新增失败：' + res.message)
+                  this.$message.error('新增失败：' + res.msg)
                 }
               }).finally((res) => {
                 this.confirmLoading = false
diff --git a/src/views/org/OrgList.vue b/src/views/org/OrgList.vue
index fdfeaca..10639d7 100644
--- a/src/views/org/OrgList.vue
+++ b/src/views/org/OrgList.vue
@@ -132,10 +132,10 @@
             this.getOrgTree()
             this.$refs.table.clearRefreshSelected()
           } else {
-            this.$message.error('删除失败：' + res.message)
+            this.$message.error('删除失败：' + res.msg)
           }
         }).catch((err) => {
-          this.$message.error('删除错误：' + err.message)
+          this.$message.error('删除错误：' + err.msg)
         })
       },
       handleOk () {
diff --git a/src/views/person/PersonForm.vue b/src/views/person/PersonForm.vue
index 5582560..446f517 100644
--- a/src/views/person/PersonForm.vue
+++ b/src/views/person/PersonForm.vue
@@ -430,6 +430,8 @@
       },
       handleCancel () {
         this.form.resetFields()
+        this.fileList = []
+        this.fileList2 = []
         this.visible = false
       }
     }
diff --git a/src/views/person/PersonList.vue b/src/views/person/PersonList.vue
index d37038b..5b47638 100644
--- a/src/views/person/PersonList.vue
+++ b/src/views/person/PersonList.vue
@@ -5,10 +5,12 @@
         <div v-if="this.orgTree != ''">
           <a-tree
             :treeData="orgTree"
+            :onLoadData="orgTree"
             v-if="orgTree.length"
             @select="handleClick"
             :defaultExpandAll="true"
             :defaultExpandedKeys="defaultExpandedKeys"
+            :defaultSelectedKeys="defaultSelectedKeys"
             :replaceFields="replaceFields" />
         </div>
         <div v-else>
@@ -37,7 +39,7 @@
               </a-col>
               <a-col :md="8" :sm="24">
                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+                <a-button style="margin-left: 8px" @click="() => {queryParam = {}, this.loadData()}">重置</a-button>
               </a-col>
             </a-row>
           </a-form>
@@ -171,6 +173,7 @@
         selectedRowKeys: [],
         selectedRows: [],
         defaultExpandedKeys: [],
+        defaultSelectedKeys: [],
         treeLoading: true,
         simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
         replaceFields: {
@@ -206,13 +209,16 @@
             return
           }
           this.defaultExpandedKeys = []
+          this.defaultSelectedKeys = []
           this.orgTree = listToTree(res.data, [], rootParentId)
           this.orgId = this.orgTree[0].id
+          this.defaultSelectedKeys.push(this.orgId)
           for (var item of this.orgTree) {
             if (item.pid === 0) {
               this.defaultExpandedKeys.push(item.id)
             }
           }
+          console.log(this.defaultExpandedKeys)
         })
       },
       async changeOrgType () {
@@ -230,7 +236,7 @@
             this.$message.success('重置成功')
             // this.$refs.table.refresh()
           } else {
-            this.$message.error('重置失败：' + res.message)
+            this.$message.error('重置失败：' + res.msg)
           }
         })
       },
@@ -243,10 +249,10 @@
             this.$message.success('删除成功')
             this.$refs.table.refresh()
           } else {
-            this.$message.error('删除失败：' + res.message)
+            this.$message.error('删除失败：' + res.msg)
           }
         }).catch((err) => {
-          this.$message.error('删除错误：' + err.message)
+          this.$message.error('删除错误：' + err.msg)
         })
       },
       quit () {
@@ -265,10 +271,10 @@
                 this.$message.success('操作成功')
                 this.$refs.table.refresh()
               } else {
-                this.$message.error('操作失败：' + res.message)
+                this.$message.error('操作失败：' + res.msg)
               }
             }).catch((err) => {
-              this.$message.error('操作错误：' + err.message)
+              this.$message.error('操作错误：' + err.msg)
             })
           },
           onCancel () {
@@ -294,10 +300,10 @@
                 this.$message.success('操作成功')
                 this.$refs.table.refresh()
               } else {
-                this.$message.error('操作失败：' + res.message)
+                this.$message.error('操作失败：' + res.msg)
               }
             }).catch((err) => {
-              this.$message.error('操作错误：' + err.message)
+              this.$message.error('操作错误：' + err.msg)
             })
           },
           onCancel () {
@@ -320,10 +326,10 @@
                 this.$message.success('操作成功')
                 this.$refs.table.refresh()
               } else {
-                this.$message.error('操作失败：' + res.message)
+                this.$message.error('操作失败：' + res.msg)
               }
             }).catch((err) => {
-              this.$message.error('操作错误：' + err.message)
+              this.$message.error('操作错误：' + err.msg)
             })
           },
           onCancel () {
@@ -331,10 +337,17 @@
         })
       },
       personRegister () {
-        this.$router.push({
-          path: '/person/personRegister',
-          query: { orgId: this.orgId }
-        })
+        if (this.orgType === 1) {
+          this.$router.push({
+            path: '/person/personRegister',
+            query: { orgId: this.orgId }
+          })
+        } else {
+          this.$router.push({
+            path: '/person/personOrg',
+            query: { orgId: this.orgId }
+          })
+        }
       },
       /**
        * 点击左侧机构树查询列表
diff --git a/src/views/person/PersonOrgForm.vue b/src/views/person/PersonOrgForm.vue
new file mode 100644
index 0000000..7845854
--- /dev/null
+++ b/src/views/person/PersonOrgForm.vue
@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <a-card :bordered="false">
+      <a-row type="flex" justify="center" align="top">
+        <a-col :span="4" id="tree">
+          <a-page-header title="项目列表" sub-title="" />
+          <div v-if="this.orgTree != ''">
+            <a-tree
+              :treeData="orgTree"
+              v-if="orgTree.length"
+              @select="onSelect"
+              :defaultExpandAll="true"
+              :defaultExpandedKeys="defaultExpandedKeys"
+              :defaultSelectedKeys="defaultSelectedKeys"
+              :replaceFields="replaceFields"
+            >
+              <a-icon slot="switcherIcon" type="down" />
+            </a-tree>
+          </div>
+        </a-col>
+        <a-col :span="20" id="content">
+          <a-page-header title="人员选择" sub-title="" />
+          <a-transfer
+            class="org-transfer"
+            :titles="['未选中', '已选择']"
+            :operations="['添加', '移除']"
+            :data-source="mockData"
+            :target-keys="targetKeys"
+            :show-search="true"
+            :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
+            :show-select-all="false"
+            @change="onChange"
+          >
+            <template
+              slot="children"
+              slot-scope="{
+                props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
+                on: { itemSelectAll, itemSelect },
+              }"
+            >
+              <a-table
+                :row-selection="
+                  getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
+                "
+                :columns="direction === 'left' ? leftColumns : rightColumns"
+                :data-source="filteredItems"
+                size="small"
+                :style="{ pointerEvents: listDisabled ? 'none' : null }"
+                :custom-row="
+                  ({ key, disabled: itemDisabled }) => ({
+                    on: {
+                      click: () => {
+                        if (itemDisabled || listDisabled) return;
+                        itemSelect(key, !selectedKeys.includes(key));
+                      },
+                    },
+                  })
+                "
+              />
+            </template>
+          </a-transfer>
+
+          <div class="draw-button-container align-right">
+            <a-button type="primary" @click="onSubmit">保存</a-button>
+          </div>
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import difference from 'lodash/difference'
+import { orgList } from '@/api/org/org'
+import { listToTree } from '@/utils/util'
+import { personPage } from '@/api/person/person'
+import { listPersonByOrgId, addPersonOrg } from '@/api/person/personOrg'
+import { STable } from '@/components'
+
+const mockData = []
+
+const leftTableColumns = [
+  { title: '姓名', dataIndex: 'title' },
+  { title: '用户名', dataIndex: 'description' }
+]
+const rightTableColumns = [
+  { title: '姓名', dataIndex: 'title' },
+  { title: '用户名', dataIndex: 'description' }
+]
+
+export default {
+  components: {
+    orgList,
+    STable
+  },
+  data () {
+    // 这里存放数据
+    return {
+      form: this.projectForm,
+      // 查询参数
+      queryParam: { orgType: 2 },
+      replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
+      expandedKeys: [],
+      autoExpandParent: true,
+      defaultExpandedKeys: [],
+      defaultSelectedKeys: [],
+      orgTree: [],
+      orgId: this.$route.query.orgId,
+      orgType: 2,
+      mockData: mockData,
+      targetKeys: [],
+      leftColumns: leftTableColumns,
+      rightColumns: rightTableColumns,
+      isLoading: false
+    }
+  },
+  mounted () {
+    this.getPerson()
+    this.listPerson()
+  },
+  // 方法集合
+  methods: {
+    async getPerson () {
+      await personPage({ pageSize: 9999, pageNum: 1 }).then((res) => {
+        if (res.code === 200 && res.rows.length > 0) {
+           this.mockData = res.rows.map(item => {
+             return {
+               key: item.id.toString(),
+               title: item.name,
+               description: item.userName,
+               disabled: false
+             }
+           })
+        }
+      })
+    },
+    async listPerson () {
+      await listPersonByOrgId({ orgId: this.orgId }).then((response) => {
+        if (response.code === 200 && response.data.length > 0) {
+          mockData.filter(item => response.data.indexOf(item.key) > 0).map(item => item.key)
+          const newArray = response.data.map(item => { return item.toString() })
+          this.targetKeys = newArray
+        }
+      })
+    },
+    onSubmit () {
+      if (this.isLoading) {
+        return false
+      }
+      this.isLoading = true
+      addPersonOrg({ personIds: this.targetKeys, orgId: this.orgId }).then(res => {
+        if (res.code === 200) {
+          this.$message.success('保存成功')
+        } else {
+          this.$message.error('保存失败：' + res.msg)
+        }
+      })
+      this.isLoading = false
+    },
+    onChange (nextTargetKeys) {
+      this.targetKeys = nextTargetKeys
+    },
+    triggerShowSearch (showSearch) {
+      this.showSearch = showSearch
+    },
+    getRowSelection ({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
+      return {
+        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
+        onSelectAll (selected, selectedRows) {
+          const treeSelectedKeys = selectedRows
+            .filter(item => !item.disabled)
+            .map(({ key }) => key)
+          const diffKeys = selected
+            ? difference(treeSelectedKeys, selectedKeys)
+            : difference(selectedKeys, treeSelectedKeys)
+          itemSelectAll(diffKeys, selected)
+        },
+        onSelect ({ key }, selected) {
+          itemSelect(key, selected)
+        },
+        selectedRowKeys: selectedKeys
+      }
+    },
+
+    // 选中后触发
+    onSelect (selectedKey, info) {
+      this.queryParam.orgId = selectedKey.toString()
+      this.orgId = selectedKey.toString()
+      this.mockData = []
+      this.targetKeys = []
+      this.getPerson()
+      this.listPerson()
+    },
+
+    // 树使用的方法
+    onExpand (expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+
+    // 编辑时初始化人员列表初始化
+    initPersonList () {
+      if (this.form.personIds) {
+
+      }
+    },
+
+    /**
+     * 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
+     */
+    async getOrgTree () {
+      await orgList({ orgType: this.orgType, pid: this.$route.query.orgId }).then((res) => {
+        this.treeLoading = false
+        if (!res.code === 200 || !res.data.length) {
+          return
+        }
+        var rootParentId = res.data[0].pid
+        this.defaultExpandedKeys = []
+        this.defaultSelectedKeys = []
+        this.orgTree = listToTree(res.data, [], rootParentId)
+        this.orgId = this.orgTree[0].id
+        this.defaultSelectedKeys.push(this.orgId)
+        for (var item of this.orgTree) {
+          if (item.pid === 0) {
+            this.defaultExpandedKeys.push(item.id)
+          }
+        }
+      })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    this.getOrgTree()
+  }
+}
+</script>
+<style lang="less" scoped>
+.org-transfer {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 24px 24px 75px;
+  /deep/ .ant-transfer-list {
+    flex: 1;
+    height: 100%;
+  }
+  /deep/ .ant-transfer-list-body{
+    overflow-y: auto;
+  }
+  /deep/ .ant-transfer-operation .ant-btn {
+    margin-left: 0;
+  }
+}
+</style>