人员项目关联功能开发

2021-11-23 21:05:52 +08:00 · 2021-11-23 21:05:52 +08:00 · 646123cbbe
parent f1097f3fc6
commit 646123cbbe
6 changed files with 308 additions and 18 deletions
--- a/src/api/person/personOrg.js
+++ 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
+  })
+}
--- 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
--- 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 () {
--- 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
      }
    }
--- 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 }
+          })
+        }
      },
      /**
       * 点击左侧机构树查询列表
--- a/src/views/person/PersonOrgForm.vue
+++ 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>