项目列表选择人员更新

src/views/project/ProjectStepForm.vue

@@ -11,11 +11,11 @@
       <a-step title="完成" />
     </a-steps>
     <div class="content">
-        <step1 v-bind:form="form" v-if="currentTab === 0" @nextStep="nextStep" />
-        <step2 v-bind:form="form" v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep" />
-        <step3 v-bind:form="form" v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep" />
-        <step4 v-bind:form="form" v-if="currentTab === 3" @nextStep="nextStep" @prevStep="prevStep" />
-        <step5 v-bind:form="form" v-if="currentTab === 4" @prevStep="prevStep" @finish="finish" />
+        <step1 v-if="currentTab === 0" @nextStep="nextStep" />
+        <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep" />
+        <step3 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep" />
+        <step4 v-if="currentTab === 3" @nextStep="nextStep" @prevStep="prevStep" />
+        <step5 v-if="currentTab === 4" @prevStep="prevStep" @finish="finish" />
     </div>
   </a-card>
 </template>

src/views/project/form/ProjectPersonForm.vue

@@ -1,36 +1,119 @@
 <template>
-  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal">
-    <div>
-      <a-row type="flex" justify="center" align="top">
-        <a-col :span="4" id="tree"> 
-          <a-tree>
-            
+  <div>
+    <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"
+            :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-col :span="18" id="table">
+          <a-form layout="inline">
+            <a-row>
+              <a-form-item label="姓名">
+                <a-input v-model="queryParam.name" placeholder="请输入姓名" />
+              </a-form-item>
+              <a-form-item label="人员类型">
+                <a-select default-value="0" style="width: 120px">
+                  <a-select-option value="0"> - 全 部 - </a-select-option>
+                  <a-select-option value="1"> 类 型 一 </a-select-option>
+                  <a-select-option value="2"> 类 型 二 </a-select-option>
+                  <a-select-option value="3"> 类 型 三 </a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
+            </a-row>
+          </a-form>
+          <s-table
+            ref="table"
+            :columns="columns"
+            :data="loadData"
+            :rowKey="(record) => record.id"
+            :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange }"
+          >
+            <span slot="serial" slot-scope="text, record, index">
+              {{ index + 1 }}
+            </span>
+          </s-table>
         </a-col>
-        <a-col :span="20" id="content">
-          <h1>人员选择</h1>
+        <a-col :span="6" id="select">
+          <p>点击列表项取消选择或【<a @click="removeAllSelece">清空所有</a>】</p>
+          <a-list size="small" :data-source="selectedRows" :rowKey="(item) => item.id">
+            <a-list-item slot="renderItem" slot-scope="item" @click="changeList({ item })">
+              {{ item.name + '（' + item.userName + '）' }}
+            </a-list-item>
+          </a-list>
         </a-col>
-      </a-row>
-      <a-button type="primary" @click="toNext">下一步</a-button>
-      <a-button type="primary" @click="toPrev">上一步</a-button>
-    </div>
-  </a-form-model>
+      </a-col>
+    </a-row>
+    <a-button type="primary" @click="toNext">下一步</a-button>
+    <a-button type="primary" @click="toPrev">上一步</a-button>
+  </div>
 </template>
 
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 // 例如：import 《组件名称》 from '《组件路径》'
+import { orgList } from '@/api/org/org'
+import { listToTree } from '@/utils/util'
+import { personPage } from '@/api/person/person'
+import { STable } from '@/components'
+const rootParentId = 0
 
 export default {
   // import引入的组件需要注入到对象中才能使用
-  components: {},
+  components: {
+    orgList,
+    STable,
+  },
   props: {},
   data() {
     // 这里存放数据
-    return {}
+    return {
+      // 查询参数
+      queryParam: { orgType: 1 },
+      replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
+      expandedKeys: [],
+      autoExpandParent: true,
+      defaultExpandedKeys: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      keyData: [], //不动的key列表
+      rowsData: [], //不动的数据列表
+      orgTree: [],
+      orgId: '',
+      orgType: 1,
+      columns: [
+        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
+        { title: '姓名', dataIndex: 'name' },
+        { title: '用户名', dataIndex: 'userName' },
+      ],
+      //人员列表数据
+      loadData: (parameter) => {
+        return personPage(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
+      },
+    }
   },
   // 计算属性 类似于data概念
-  computed: {},
+  computed: {
+    hasSelected() {
+      return this.selectedRowKeys.length > 0
+    },
+  },
   // 监控data中的数据变化
   watch: {},
   // 方法集合
@@ -39,12 +122,86 @@ export default {
     toNext() {
       this.$emit('nextStep')
     },
+    //上一步
     toPrev() {
       this.$emit('prevStep')
     },
+
+    /** 表格行选中后触发 */
+    onSelectChange(selectedRowKeys, selectedRows) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys)
+      console.log('选择的表格数据 : ', selectedRows)
+      this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys])
+      this.selectedRows = this.unique([...this.selectedRows, ...selectedRows])
+    },
+
+    //对象去重
+    unique(arr) {
+      const res = new Map()
+      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
+    },
+
+    //key去重
+    uniqueKeys(arr) {
+      const res = new Map()
+      return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
+    },
+
+    //列表点击删除列表项
+    changeList(item) {
+      console.log('列表点击删除列表项 : ', item)
+      this.selectedRows = this.selectedRows.filter(function (i) {
+        return i.id != item.item.id
+      })
+      this.selectedRowKeys = this.selectedRowKeys.filter(function (i) {
+        return i != item.item.id
+      })
+    },
+
+    //清空选择
+    removeAllSelece() {
+      this.selectedRowKeys = []
+      this.selectedRows = []
+    },
+
+    //选中后触发
+    onSelect(selectedKey, info) {
+      console.log('selected', selectedKey, info)
+      this.queryParam.orgId = selectedKey.toString()
+      this.orgId = selectedKey.toString()
+      this.$refs.table.refresh(true)
+    },
+
+    //树使用的方法
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+
+    /**
+     * 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
+     */
+    async getOrgTree() {
+      await orgList({ orgType: this.orgType }).then((res) => {
+        this.treeLoading = false
+        if (!res.code === 200 || !res.data.length) {
+          return
+        }
+        this.defaultExpandedKeys = []
+        this.orgTree = listToTree(res.data, [], rootParentId)
+        this.orgId = this.orgTree[0].id
+        for (var item of this.orgTree) {
+          if (item.pid === 0) {
+            this.defaultExpandedKeys.push(item.id)
+          }
+        }
+      })
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.getOrgTree()
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   // 生命周期 - 创建之前
@@ -64,7 +221,7 @@ export default {
 }
 </script>
 <style scoped>
-#tree {
+/* #tree {
   height: 750px;
   background-color: beige;
 }
@@ -72,6 +229,6 @@ export default {
 #content {
   height: 750px;
   background-color: bisque;
-}
+} */
 /* /project/form/ProjectPersonForm.vue */
 </style>