项目列表选择人员更新
This commit is contained in:
Yuanjianghong
parent
c55c81c701
commit
4f2c3b0b11
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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">
|
||||
<h1>人员选择</h1>
|
||||
<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="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-col>
|
||||
</a-row>
|
||||
<a-button type="primary" @click="toNext">下一步</a-button>
|
||||
<a-button type="primary" @click="toPrev">上一步</a-button>
|
||||
</div>
|
||||
</a-form-model>
|
||||
</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>
|
||||
Loading…
Reference in New Issue