246 lines
8.0 KiB
Vue
246 lines
8.0 KiB
Vue
<template>
|
||
<a-card :bordered="false" title="项目人员信息">
|
||
<!-- <template slot="extra">
|
||
<a-button type="primary" size="default" @click="toNext">下一步</a-button>
|
||
</template>
|
||
<template slot="extra">
|
||
<a-button type="primary" size="default" @click="toPrev">上一步</a-button>
|
||
</template> -->
|
||
<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="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-col :span="24" style="text-align: center;">
|
||
<a-button type="primary" size="default" @click="toPrev" style="margin-right: 8px;">上一步</a-button>
|
||
<a-button type="primary" size="default" @click="toNext">下一步</a-button>
|
||
</a-col>
|
||
</a-card>
|
||
</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: {
|
||
orgList,
|
||
STable,
|
||
},
|
||
props: {
|
||
projectForm: {
|
||
type: Object,
|
||
},
|
||
},
|
||
data() {
|
||
// 这里存放数据
|
||
return {
|
||
form: this.projectForm,
|
||
// 查询参数
|
||
queryParam: { orgType: 1 },
|
||
replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
|
||
expandedKeys: [],
|
||
autoExpandParent: true,
|
||
defaultExpandedKeys: [],
|
||
selectedRowKeys: this.projectForm.personIds || [],
|
||
selectedRows: this.projectForm.projectPersonLists || [],
|
||
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: {
|
||
hasSelected() {
|
||
return this.selectedRowKeys.length > 0
|
||
},
|
||
},
|
||
// 监控data中的数据变化
|
||
watch: {},
|
||
// 方法集合
|
||
methods: {
|
||
//下一步
|
||
toNext() {
|
||
this.form.projectPersonLists = this.selectedRows
|
||
this.form.personIds = this.selectedRowKeys
|
||
if (this.form.personIds.length > 0) {
|
||
this.$emit('nextStep', this.form)
|
||
} else {
|
||
this.$message.warning('培训人员不能为空')
|
||
}
|
||
},
|
||
//上一步
|
||
toPrev() {
|
||
this.form.projectPersonLists = this.selectedRows
|
||
this.form.personIds = this.selectedRowKeys
|
||
this.$emit('prevStep', this.form)
|
||
},
|
||
|
||
/** 表格行选中后触发 */
|
||
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
|
||
},
|
||
|
||
//编辑时初始化人员列表初始化
|
||
initPersonList() {
|
||
if (this.form.personIds) {
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
|
||
*/
|
||
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() {
|
||
this.getOrgTree()
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||
mounted() { },
|
||
// 生命周期 - 创建之前
|
||
beforeCreate() { },
|
||
// 生命周期 - 挂载之前
|
||
beforeMount() { },
|
||
// 生命周期 - 更新之前
|
||
beforeUpdate() { },
|
||
// 生命周期 - 更新之后
|
||
updated() { },
|
||
// 生命周期 - 销毁之前
|
||
beforeDestroy() { },
|
||
// 生命周期 - 销毁完成
|
||
destroyed() { },
|
||
// 如果页面有keep-alive缓存功能，这个函数会触发
|
||
activated() { },
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
/* #tree {
|
||
height: 750px;
|
||
background-color: beige;
|
||
}
|
||
|
||
#content {
|
||
height: 750px;
|
||
background-color: bisque;
|
||
} */
|
||
/* /project/form/ProjectPersonForm.vue */
|
||
</style> |