mirror of https://gitee.com/xiaonuobase/snowy
608 lines
15 KiB
Vue
608 lines
15 KiB
Vue
<template>
|
|
<!-- 这是引入后展示的样式 -->
|
|
<div v-if="props.show">
|
|
<a-tag v-for="data in dataArray" closable @close="deleteObj(data)" :key="data.id" class="mb-1">{{
|
|
data.name
|
|
}}</a-tag>
|
|
<a-button
|
|
type="primary"
|
|
size="small"
|
|
@click="openModal"
|
|
v-if="(props.radioModel ? dataArray.length !== 1 : true) && addShow"
|
|
>
|
|
<slot name="button"></slot>
|
|
<span v-if="!hasContent('button')">
|
|
<plus-outlined />
|
|
选择
|
|
</span>
|
|
</a-button>
|
|
</div>
|
|
<!-- 以下是弹窗内容 -->
|
|
<a-modal
|
|
v-model:open="visible"
|
|
title="机构选择"
|
|
:width="1000"
|
|
:mask-closable="false"
|
|
:destroy-on-close="true"
|
|
@ok="handleOk"
|
|
@cancel="handleClose"
|
|
>
|
|
<a-row :gutter="10">
|
|
<a-col :xs="0" :sm="0" :md="0" :lg="7" :xl="7">
|
|
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
|
|
<a-tree
|
|
v-if="treeData"
|
|
v-model:expandedKeys="defaultExpandedKeys"
|
|
:tree-data="treeData"
|
|
:field-names="treeFieldNames"
|
|
@select="treeSelect"
|
|
>
|
|
</a-tree>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
|
|
<div class="table-operator xn-mb10">
|
|
<a-form ref="searchFormRef" :model="searchFormState">
|
|
<a-row :gutter="10">
|
|
<a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
|
|
<a-form-item label="上级组织：" name="parentId">
|
|
<a-tree-select
|
|
v-model:value="searchFormState.parentId"
|
|
class="xn-wd"
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
placeholder="请选择上级组织"
|
|
allow-clear
|
|
:tree-data="treeData"
|
|
:field-names="{
|
|
children: 'children',
|
|
label: 'name',
|
|
value: 'id'
|
|
}"
|
|
selectable="false"
|
|
tree-line
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
|
|
<a-form-item name="searchKey">
|
|
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入机构名" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
|
|
<a-button @click="reset()"> 重置 </a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<div class="selector-table">
|
|
<a-table
|
|
ref="tableRef"
|
|
size="small"
|
|
:columns="commons"
|
|
:data-source="tableData"
|
|
:expand-row-by-click="true"
|
|
:loading="pageLoading"
|
|
bordered
|
|
:pagination="false"
|
|
:scroll="{ x: 'max-content' }"
|
|
>
|
|
<template #title>
|
|
<span>待选择列表 {{ tableRecordNum }} 条</span>
|
|
<div v-if="!radioModel" class="xn-fdr">
|
|
<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
|
|
</div>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.dataIndex === 'action'">
|
|
<a-button type="dashed" size="small" @click="addRecord(record)"><PlusOutlined /></a-button>
|
|
</template>
|
|
<template v-if="column.dataIndex === 'category'">
|
|
{{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<div class="mt-2">
|
|
<a-pagination
|
|
v-if="!isEmpty(tableData)"
|
|
v-model:current="current"
|
|
v-model:page-size="pageSize"
|
|
:total="total"
|
|
size="small"
|
|
showSizeChanger
|
|
@change="paginationChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
|
|
<div class="selector-table">
|
|
<a-table
|
|
ref="selectedTable"
|
|
size="small"
|
|
:columns="selectedCommons"
|
|
:data-source="selectedData"
|
|
:expand-row-by-click="true"
|
|
:loading="selectedTableListLoading"
|
|
bordered
|
|
>
|
|
<template #title>
|
|
<span>已选择: {{ selectedData.length }}</span>
|
|
<div v-if="!radioModel" class="xn-fdr">
|
|
<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
|
|
</div>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.dataIndex === 'action'">
|
|
<a-button type="dashed" danger size="small" @click="delRecord(record)"><MinusOutlined /></a-button>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup name="orgSelector">
|
|
import { message } from 'ant-design-vue'
|
|
import { remove, isEmpty, cloneDeep } from 'lodash-es'
|
|
import userCenterApi from '@/api/sys/userCenterApi'
|
|
import { useSlots } from 'vue'
|
|
// 弹窗是否打开
|
|
const visible = ref(false)
|
|
// 主表格common
|
|
const commons = [
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
align: 'center',
|
|
width: 50
|
|
},
|
|
{
|
|
title: '名称',
|
|
dataIndex: 'name',
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: '分类',
|
|
dataIndex: 'category'
|
|
}
|
|
]
|
|
// 选中表格的表格common
|
|
const selectedCommons = [
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
align: 'center',
|
|
width: 50
|
|
},
|
|
{
|
|
title: '名称',
|
|
dataIndex: 'name',
|
|
ellipsis: true
|
|
}
|
|
]
|
|
const props = defineProps({
|
|
radioModel: {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
dataIsConverterFlw: {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
selectorConverterKey: {
|
|
type: String,
|
|
default: () => 'ORG'
|
|
},
|
|
orgTreeApi: {
|
|
type: Function
|
|
},
|
|
orgPageApi: {
|
|
type: Function
|
|
},
|
|
orgListByIdListApi: {
|
|
type: Function
|
|
},
|
|
value: {
|
|
default: () => ''
|
|
},
|
|
dataType: {
|
|
type: String,
|
|
default: () => 'array'
|
|
},
|
|
show: {
|
|
type: Boolean,
|
|
default: () => true
|
|
},
|
|
addShow: {
|
|
type: Boolean,
|
|
default: () => true
|
|
}
|
|
})
|
|
// 主表格的ref 名称
|
|
const tableRef = ref()
|
|
// 选中表格的ref 名称
|
|
const selectedTable = ref()
|
|
const tableRecordNum = ref()
|
|
const searchFormState = ref({})
|
|
const searchFormRef = ref()
|
|
const cardLoading = ref(true)
|
|
const pageLoading = ref(false)
|
|
const selectedTableListLoading = ref(false)
|
|
const slots = useSlots()
|
|
// 替换treeNode 中 title,key,children
|
|
const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
|
|
// 获取机构树数据
|
|
const treeData = ref()
|
|
// 默认展开二级树的节点id
|
|
const defaultExpandedKeys = ref([])
|
|
const emit = defineEmits(['update:value', 'onBack'])
|
|
const tableData = ref([])
|
|
const selectedData = ref([])
|
|
const recordIds = ref([])
|
|
// 分页相关
|
|
const current = ref(0) // 当前页数
|
|
const pageSize = ref(10) // 每页条数
|
|
const total = ref(0) // 数据总数
|
|
const hasContent = (slotName) => {
|
|
return !!(slots[slotName] && slots[slotName]().length > 0)
|
|
}
|
|
// 打开弹框
|
|
const showModel = (ids = []) => {
|
|
const data = goDataConverter(ids)
|
|
recordIds.value = data
|
|
getDataNameById(data)
|
|
openModal()
|
|
}
|
|
// 获取机构树的api
|
|
const orgTree = (param) => {
|
|
if (typeof props.orgTreeApi === 'function') {
|
|
return props.orgTreeApi(param)
|
|
} else {
|
|
message.warning('未配置机构树API')
|
|
return Promise.resolve([])
|
|
}
|
|
}
|
|
// 获取列表的api
|
|
const orgPage = (param) => {
|
|
if (typeof props.orgPageApi === 'function') {
|
|
return props.orgPageApi(param)
|
|
} else {
|
|
message.warning('未配置机构选择器API')
|
|
return Promise.resolve([])
|
|
}
|
|
}
|
|
// 获取选中列表的api
|
|
const orgListByIdList = (param) => {
|
|
if (typeof props.orgListByIdListApi === 'function') {
|
|
return props.orgListByIdListApi(param)
|
|
} else {
|
|
return userCenterApi.userCenterGetOrgListByIdList(param).then((data) => {
|
|
return Promise.resolve(data)
|
|
})
|
|
}
|
|
}
|
|
const openModal = () => {
|
|
if (typeof props.orgTreeApi !== 'function' || typeof props.orgPageApi !== 'function') {
|
|
message.warning('未配置机构选择器API')
|
|
return
|
|
}
|
|
visible.value = true
|
|
// 获取机构树
|
|
orgTree()
|
|
.then((data) => {
|
|
if (!isEmpty(data)) {
|
|
treeData.value = data
|
|
// 默认展开2级
|
|
treeData.value.forEach((item) => {
|
|
// 因为0的顶级
|
|
if (item.parentId === '0') {
|
|
defaultExpandedKeys.value.push(item.id)
|
|
// 取到下级ID
|
|
if (item.children) {
|
|
item.children.forEach((items) => {
|
|
defaultExpandedKeys.value.push(items.id)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.finally(() => {
|
|
cardLoading.value = false
|
|
})
|
|
searchFormState.value.size = pageSize.value
|
|
loadData()
|
|
if (isEmpty(recordIds.value)) {
|
|
return
|
|
}
|
|
const param = {
|
|
idList: recordIds.value
|
|
}
|
|
selectedTableListLoading.value = true
|
|
orgListByIdList(param)
|
|
.then((data) => {
|
|
selectedData.value = data
|
|
})
|
|
.finally(() => {
|
|
selectedTableListLoading.value = false
|
|
})
|
|
}
|
|
// 点击删除
|
|
const deleteObj = (obj) => {
|
|
// 删除显示的
|
|
remove(dataArray.value, (item) => item.id === obj.id)
|
|
// 删除缓存的
|
|
remove(recordIds.value, (item) => item === obj.id)
|
|
const value = []
|
|
const showData = []
|
|
dataArray.value.forEach((item) => {
|
|
const obj = {
|
|
id: item.id,
|
|
name: item.name
|
|
}
|
|
value.push(item.id)
|
|
// 拷贝一份obj数据
|
|
const objClone = cloneDeep(obj)
|
|
showData.push(objClone)
|
|
})
|
|
dataArray.value = showData
|
|
// 判断是否做数据的转换为工作流需要的
|
|
const resultData = outDataConverter(value)
|
|
emit('update:value', resultData)
|
|
emit('onBack', resultData)
|
|
}
|
|
// 查询主表格数据
|
|
const loadData = () => {
|
|
pageLoading.value = true
|
|
orgPage(searchFormState.value)
|
|
.then((data) => {
|
|
current.value = data.current
|
|
total.value = data.total
|
|
// 重置、赋值
|
|
tableData.value = []
|
|
tableRecordNum.value = 0
|
|
tableData.value = data.records
|
|
if (data.records) {
|
|
tableRecordNum.value = data.records.length
|
|
} else {
|
|
tableRecordNum.value = 0
|
|
}
|
|
})
|
|
.finally(() => {
|
|
pageLoading.value = false
|
|
})
|
|
}
|
|
// pageSize改变回调分页事件
|
|
const paginationChange = (page, pageSize) => {
|
|
searchFormState.value.current = page
|
|
searchFormState.value.size = pageSize
|
|
loadData()
|
|
}
|
|
const judge = () => {
|
|
return !(props.radioModel && selectedData.value.length > 0)
|
|
}
|
|
// 添加记录
|
|
const addRecord = (record) => {
|
|
if (!judge()) {
|
|
message.warning('只可选择一条')
|
|
return
|
|
}
|
|
const selectedRecord = selectedData.value.filter((item) => item.id === record.id)
|
|
if (selectedRecord.length === 0) {
|
|
selectedData.value.push(record)
|
|
} else {
|
|
message.warning('该记录已存在')
|
|
}
|
|
}
|
|
// 添加全部
|
|
const addAllPageRecord = () => {
|
|
let newArray = selectedData.value.concat(tableData.value)
|
|
let list = []
|
|
for (let item1 of newArray) {
|
|
let flag = true
|
|
for (let item2 of list) {
|
|
if (item1.id === item2.id) {
|
|
flag = false
|
|
}
|
|
}
|
|
if (flag) {
|
|
list.push(item1)
|
|
}
|
|
}
|
|
selectedData.value = list
|
|
}
|
|
// 删减记录
|
|
const delRecord = (record) => {
|
|
remove(selectedData.value, (item) => item.id === record.id)
|
|
}
|
|
// 删减记录
|
|
const delAllRecord = () => {
|
|
selectedData.value = []
|
|
}
|
|
// 点击树查询
|
|
const treeSelect = (selectedKeys) => {
|
|
searchFormState.value.current = 0
|
|
if (selectedKeys.length > 0) {
|
|
searchFormState.value.parentId = selectedKeys.toString()
|
|
} else {
|
|
delete searchFormState.value.parentId
|
|
}
|
|
loadData()
|
|
}
|
|
const dataArray = ref([])
|
|
// 确定
|
|
const handleOk = () => {
|
|
dataArray.value = []
|
|
const value = []
|
|
const showData = []
|
|
selectedData.value.forEach((item) => {
|
|
const obj = {
|
|
id: item.id,
|
|
name: item.name
|
|
}
|
|
value.push(item.id)
|
|
// 拷贝一份obj数据
|
|
const objClone = cloneDeep(obj)
|
|
showData.push(objClone)
|
|
})
|
|
dataArray.value = showData
|
|
// 判断是否做数据的转换为工作流需要的
|
|
const resultData = outDataConverter(value)
|
|
emit('update:value', resultData)
|
|
emit('onBack', resultData)
|
|
handleClose()
|
|
}
|
|
// 重置
|
|
const reset = () => {
|
|
searchFormRef.value.resetFields()
|
|
loadData()
|
|
}
|
|
const handleClose = () => {
|
|
searchFormState.value = {}
|
|
tableRecordNum.value = 0
|
|
tableData.value = []
|
|
current.value = 0
|
|
pageSize.value = 20
|
|
total.value = 0
|
|
selectedData.value = []
|
|
// dataArray.value = []
|
|
visible.value = false
|
|
}
|
|
// 数据进入后转换
|
|
const goDataConverter = (data) => {
|
|
if (props.dataIsConverterFlw) {
|
|
const resultData = []
|
|
// 处理对象
|
|
if (!isEmpty(data.value)) {
|
|
const values = data.value.split(',')
|
|
if (values.length > 0) {
|
|
values.forEach((id) => {
|
|
resultData.push(id)
|
|
})
|
|
} else {
|
|
resultData.push(data.value)
|
|
}
|
|
} else {
|
|
// 处理数组
|
|
if (!isEmpty(data) && !isEmpty(data[0]) && !isEmpty(data[0].value)) {
|
|
const values = data[0].value.split(',')
|
|
for (let i = 0; i < values.length; i++) {
|
|
resultData.push(values[i])
|
|
}
|
|
}
|
|
}
|
|
return resultData
|
|
} else {
|
|
if (getValueType() !== 'string') {
|
|
return data
|
|
}
|
|
if (data.length > 1) {
|
|
const resultData = []
|
|
data.split(',').forEach((id) => {
|
|
resultData.push(id)
|
|
})
|
|
return resultData
|
|
} else {
|
|
return data
|
|
}
|
|
}
|
|
}
|
|
// 数据出口转换器
|
|
const outDataConverter = (data) => {
|
|
if (props.dataIsConverterFlw) {
|
|
data = dataArray.value
|
|
const obj = {}
|
|
let label = ''
|
|
let value = ''
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data.length === i + 1) {
|
|
label = label + data[i].name
|
|
value = value + data[i].id
|
|
} else {
|
|
label = label + data[i].name + ','
|
|
value = value + data[i].id + ','
|
|
}
|
|
}
|
|
obj.key = props.selectorConverterKey
|
|
obj.label = label
|
|
obj.value = value
|
|
obj.extJson = ''
|
|
return obj
|
|
} else {
|
|
if (getValueType() !== 'string') {
|
|
return data
|
|
}
|
|
let resultData = ''
|
|
data.forEach((id) => {
|
|
resultData = resultData + ',' + id
|
|
})
|
|
resultData = resultData.substring(1, resultData.length)
|
|
return resultData
|
|
}
|
|
}
|
|
// 获取数据类型
|
|
const getValueType = () => {
|
|
if (props.dataType) {
|
|
return props.dataType
|
|
} else {
|
|
if (props.radioModel) {
|
|
return 'string'
|
|
}
|
|
return typeof typeof props.value
|
|
}
|
|
}
|
|
const getDataNameById = (ids) => {
|
|
if (isEmpty(dataArray.value) && !isEmpty(ids)) {
|
|
const param = {
|
|
idList: recordIds.value
|
|
}
|
|
// 这里必须转为数组类型的
|
|
orgListByIdList(param).then((data) => {
|
|
dataArray.value = data
|
|
})
|
|
}
|
|
}
|
|
watch(
|
|
() => props.value,
|
|
(newValue) => {
|
|
if (!isEmpty(props.value)) {
|
|
const ids = goDataConverter(newValue)
|
|
recordIds.value = ids
|
|
getDataNameById(ids)
|
|
} else {
|
|
dataArray.value = []
|
|
selectedData.value = []
|
|
}
|
|
},
|
|
{
|
|
immediate: true // 立即执行
|
|
}
|
|
)
|
|
defineExpose({
|
|
showModel
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.xn-mr-5 {
|
|
margin-right: 5px;
|
|
}
|
|
.xn-mr-10 {
|
|
margin-right: 10px;
|
|
}
|
|
.selectorTreeDiv {
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
}
|
|
.selector-table {
|
|
overflow: auto;
|
|
max-height: 450px;
|
|
}
|
|
</style>
|