feat: 新增需求

This commit is contained in:
caijun
2026-01-19 17:34:15 +08:00
parent 8fa31df250
commit 9f5b2a92c4
67 changed files with 7518 additions and 481 deletions

View File

@@ -0,0 +1,469 @@
<template>
<u-popup class="jnpf-tree-select-popup" mode="right" v-model="showPopup" width="100%" @close="close">
<view class="jnpf-tree-select-body">
<view class="jnpf-tree-select-title">
<text class="icon-ym icon-ym-report-icon-preview-pagePre backIcon" @tap="close()"></text>
<view class="title">选择用户</view>
</view>
<view class="jnpf-tree-select-search">
<u-search :placeholder="$t('app.apply.pleaseKeyword')" v-model="keyword" height="72"
:show-action="false" @change="handleSearch" bg-color="#f0f2f6" shape="square">
</u-search>
</view>
<view class="jnpf-tree-selected">
<view class="jnpf-tree-selected-head">
<view>{{$t('component.jnpf.common.selected')}}({{selectedList.length||0}})</view>
<view v-if="multiple" class="clear-btn" @click="setCheckAll">
{{$t('component.jnpf.common.clearAll')}}
</view>
</view>
<view class="jnpf-tree-selected-box">
<scroll-view scroll-y="true" class="select-list">
<u-tag closeable @close="delSelect(index)" v-for="(item,index) in selectedList" :key="index"
:text="item.nickName" class="u-selectTag" />
</scroll-view>
</view>
</view>
<view class="jnpf-tree-selected-line"></view>
<view class="jnpf-tree-selected-tabs">
<view class="tab-item" :class="{'tab-item-active':activeKey==='user'}" @click="toggloActive('user')">
用户
</view>
<block v-if="selectType === 'all'">
<!-- <view class="tab-item" :class="{'tab-item-active':activeKey==='position'}"
@click="toggloActive('position')">
组织岗位
</view> -->
<view class="tab-item" :class="{'tab-item-active':activeKey==='role'}"
@click="toggloActive('role')">
角色
</view>
<!-- <view class="tab-item" :class="{'tab-item-active':activeKey==='current'}"
@click="toggloActive('current')">
当前用户
</view> -->
</block>
</view>
<view class="jnpf-tree-selected-breadcrumb" v-if="selectType === 'all' && activeKey!=='current'">
<view class="breadcrumb-item" :class="{'breadcrumb-item-active':!currStep}" @click="handleToFirst()"
v-if="activeKey==='user'">
用户组
</view>
<view class="breadcrumb-item" :class="{'breadcrumb-item-active':!currStep}" @click="handleToFirst()"
v-if="activeKey==='position'">
组织岗位
</view>
<view class="breadcrumb-item" :class="{'breadcrumb-item-active':!currStep}" @click="handleToFirst()"
v-if="activeKey==='role'">
角色
</view>
<view class="icon-ym icon-ym-caret-right breadcrumb-item" v-if="currStep"></view>
<view class="breadcrumb-item" :class="{'breadcrumb-item-active':currStep}" v-if="currStep">
用户列表
</view>
</view>
<view class="jnpf-tree-select-tree">
<scroll-view :scroll-y="true" style="height: 100%" :scroll-top="scrollTop" @scroll="handleScroll"
v-show="(!hasPage && !currStep) && selectType === 'all' && activeKey!=='current'">
<ly-tree ref="tree" :props="realProps" :node-key="realProps.value" :load="getGroupList" lazy
:tree-data="lazyOptions" show-node-icon :defaultExpandAll='false'
@node-click="handleTreeNodeClick" :expandOnClickNode="false" :checkOnClickNode="false"
v-if="activeKey==='position'" />
<block v-else>
<view class="jnpf-selcet-list" v-if="list.length">
<view class="jnpf-selcet-cell" v-for="item in list" :key="item.id"
@click.stop="handleNodeClick(item)">
<view class="jnpf-selcet-cell-icon" :class='item.icon'></view>
<view class="jnpf-selcet-cell-name">
{{item.deptName}}
</view>
</view>
</view>
<Empty class="h-full" v-else />
</block>
</scroll-view>
<scroll-view :scroll-y="true" style="height: 100%" :refresher-enabled="false" :refresher-threshold="100"
:scroll-with-animation='true' :refresher-triggered="triggered" @scrolltolower="handleScrollToLower"
v-if="hasPage||currStep||activeKey==='current'">
<view class="jnpf-selcet-list" v-if="userList.length">
<view class="jnpf-selcet-cell" v-for="item in userList" :key="item.userId"
@click.stop="handleUserNodeClick(item)">
<view class="jnpf-selcet-cell-action">
<lyCheckbox :type="multiple ? 'checkbox' : 'radio'"
:checked="selectedIds.includes(item.userId)" />
</view>
<u-avatar class="jnpf-selcet-cell-avatar" :src="baseURL+item.headIcon" mode="circle"
size="44"></u-avatar>
<view class="jnpf-selcet-cell-name">
{{item.nickName}}
</view>
</view>
</view>
<Empty class="h-full" v-else />
</scroll-view>
</view>
<!-- 底部按钮 -->
<view class="jnpf-tree-select-actions">
<u-button class="buttom-btn" @click="close()">{{$t('common.cancelText')}}</u-button>
<u-button class="buttom-btn" type="primary"
@click.stop="handleConfirm()">{{$t('common.okText')}}</u-button>
</view>
</view>
</u-popup>
</template>
<script>
import {
getOrgAndPosSelector,
getUserList,
getSelectedUserList,
getOrganizeSelector,
getAdapterUserList,
getAdapterRoleList
} from '@/api/common'
import lyCheckbox from '@/components/ly-tree/components/ly-checkbox.vue';
import {
useBaseStore
} from '@/store/modules/base'
import Empty from '../Empty/index.vue'
const baseStore = useBaseStore()
const defaultProps = {
label: 'deptName',
value: 'id',
icon: 'icon',
children: 'children'
}
const defaultUserQuery = {
enabledMark: 1,
groupId: '',
organizeId: '',
positionId: '',
roleId: '',
};
export default {
props: {
selectedData: {
type: Array,
default: () => []
},
ableIds: {
type: Array,
default: () => []
},
selectType: {
type: String,
default: 'all'
},
// 通过双向绑定控制组件的弹出与收起
modelValue: {
type: Boolean,
default: false
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
},
props: {
type: Object,
default: () => ({
label: 'deptName',
value: 'id',
icon: 'icon',
children: 'children',
isLeaf: 'isLeaf'
})
},
multiple: {
type: Boolean,
default: false
}
},
components: {
lyCheckbox,
Empty
},
data() {
return {
moving: false,
selectedList: [],
selectedIds: [],
keyword: '',
showPopup: false,
lazyOptions: [],
activeKey: 'user',
hasPage: false,
pagination: {
hasPage: 1,
currentPage: 1,
pageSize: 20
},
triggered: false,
finish: false,
list: [],
userList: [],
scrollTop: 0,
currStep: 0,
userQuery: {},
};
},
watch: {
// 在select弹起的时候重新初始化所有数据
modelValue: {
handler(val) {
this.showPopup = val
if (val) setTimeout(() => this.init(), 10);
},
immediate: true
},
selectedList: {
handler(val) {
this.selectedIds = val.map((o) => o.userId);
this.$refs.tree && this.$refs.tree.setCheckedKeys(this.selectedIds)
},
deep: true
},
},
computed: {
baseURL() {
return this.define.baseURL
},
uZIndex() {
// 如果用户有传递z-index值优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
},
realProps() {
return {
...defaultProps,
...this.props
}
},
getCurrList() {
const userInfo = uni.getStorageSync('userInfo') || {}
const current = {
fullName: `${userInfo.userName}/${userInfo.userAccount}`,
headIcon: userInfo.headIcon,
id: userInfo.userId,
realName: userInfo.userName,
};
return [current];
}
},
methods: {
init() {
this.keyword = ""
this.hasPage = 0
this.currStep = 0
this.activeKey = 'user'
this.resetQuery()
this.$nextTick(() => {
this.triggered = true
})
this.getGroupList()
// this.selectedList = JSON.parse(JSON.stringify(this.selectedData))
// if (this.selectType === 'all') {
// this.getGroupList()
// } else {
// this.hasPage = 1
// this.getConditionOptions()
// }
},
handleToFirst() {
if (!this.currStep) return
this.currStep = 0
this.hasPage = false
this.keyword = ''
this.resetQuery()
},
resetQuery() {
this.userList = []
this.finish = false
this.pagination.currentPage = 1
},
getConditionOptions() {
if (!this.ableIds.length) return
const query = {
keyword: this.keyword,
ids: this.ableIds,
...this.pagination
}
getSelectedUserList(query).then(res => {
const list = res.data.list || []
if (list.length < this.pagination.pageSize) this.finish = true;
this.userList = this.userList.concat(list);
this.pagination.currentPage++
})
},
loadNode(node, resolve) {
const id = node.key || '0'
const type = node?.data?.type || 'organize'
const data = {
id,
type
}
getOrgAndPosSelector(data).then(res => {
const list = res.data?.list || []
resolve(list)
})
},
handleScroll(e) {
this.scrollTop = e.detail.scrollTop
},
goTop() {
this.scrollTop = 0
},
handleScrollToLower() {
if (this.finish || this.activeKey === 'current') return
this.getUserData()
},
getUserData() {
this.selectType == 'all' ? this.getUserList() : this.getConditionOptions()
},
getUserList() {
let data = {
// keyword: this.keyword,
// ...this.pagination,
...this.userQuery
}
getAdapterUserList(data).then(res => {
const list = res.data.records || []
if (list.length < this.pagination.pageSize) this.finish = true;
this.userList = this.userList.concat(list);
this.pagination.currentPage++
})
},
handleTreeNodeClick(item) {
const data = item.data
this.handleNodeClick(data)
},
handleNodeClick(data) {
console.log(data,'data--------')
// let key = `${this.activeKey==='position'?(data.type||'position'):this.activeKey}Id`;
// if (this.activeKey === 'user') key = 'groupId'
this.hasPage = 1
this.userQuery = {
// ...defaultUserQuery,
deptId: data.deptId,
fieldList: ["userId","nickName","sex","post","deptName"],
pageNo: this.hasPage,
pageSize: 10
};
this.currStep = 1
this.keyword = ''
this.resetQuery()
this.getUserList()
},
handleUserNodeClick(data) {
const index = this.selectedList.findIndex((o) => o.userId === data.userId);
if (index !== -1) return this.selectedList.splice(index, 1);
this.multiple ? this.selectedList.push(data) : (this.selectedList = [data]);
},
delSelect(index) {
this.selectedList.splice(index, 1);
},
setCheckAll() {
this.selectedIds = []
this.selectedList = []
},
handleConfirm() {
this.$emit('confirm', this.selectedList, this.selectedIds);
this.close();
},
close() {
this.$emit('close', false);
},
toggloActive(key) {
if (this.activeKey === key) return
this.currStep = 0
this.keyword = ''
this.resetQuery()
this.$nextTick(async () => {
this.activeKey = key
this.goTop()
if (this.activeKey === 'user') return this.getGroupList()
if (this.activeKey === 'role') return this.getRoleList()
if (this.activeKey === 'current') this.userList = this.getCurrList
})
},
async getGroupList() {
// const list = await baseStore.getGroupList()
const res = await getOrganizeSelector(this.selectType)
const list = this.formatDeptData(res.data) || []
console.log(list,'list-------')
this.list = [{
deptName: '全部用户',
icon: 'icon-ym icon-ym-generator-group1',
id: ''
}, ...list]
},
async getRoleList() {
// const list = await baseStore.getGroupList()
const res = await getAdapterRoleList()
const list = this.formatDeptData(res.data) || []
console.log(list,'list-------role')
// this.list = [{
// deptName: '全部用户',
// icon: 'icon-ym icon-ym-generator-group1',
// id: ''
// }, ...list]
},
formatDeptData(data) {
const result = [];
const formatItem = (item) => {
// 优先使用 depthd 字段(根据打印结果)
let deptId = item.depthd || item.id || item.deptId;
let deptName = item.depthName || item.deptName || item.fullName || item.name || item.orgNameTree;
// 确保ID是字符串
deptId = String(deptId || '');
return {
...item,
deptId: deptId,
deptName: deptName ,
depthd: item.depthd,
depthName: item.depthName,
id: item.id
};
};
// 遍历数据
if (Array.isArray(data)) {
data.forEach(item => {
const formatted = formatItem(item);
if (formatted.deptId) {
result.push(formatted);
}
// 如果有子部门,递归处理
if (item.children && Array.isArray(item.children)) {
const children = this.formatDeptData(item.children);
result.push(...children);
}
});
}
return result;
},
handleSearch(val) {
this.keyword = val
this.hasPage = this.selectType !== 'all' || !!val
this.currStep = val ? 1 : 0
this.goTop()
if (this.activeKey != 'user') this.activeKey = 'user'
this.$nextTick(() => {
if (this.keyword || this.selectType !== 'all') {
this.userQuery = {
...defaultUserQuery
};
this.getGroupList()
this.resetQuery()
this.$u.debounce(this.getUserData, 300)
}
})
},
}
};
</script>

View File

@@ -0,0 +1,116 @@
<template>
<view class="jnpf-user-select w-full">
<selectBox v-model="innerValue" :placeholder="placeholder" @openSelect="openSelect"
:select-open="selectShow" :disabled="disabled" v-if="isInput" />
<SelectPopup v-model="selectShow" :multiple="multiple" :selectedData="selectedData" @close="handleClose"
@confirm="handleConfirm" :selectType="selectType" :ableIds="realAbleIds" />
</view>
</template>
<script>
import SelectPopup from './SelectPopup';
import selectBox from '@/components/selectBox'
import {
getUserInfoList
} from '@/api/common'
export default {
name: 'jnpf-user-select',
components: {
SelectPopup,
selectBox
},
props: {
modelValue: {
default: ''
},
isInput: {
type: Boolean,
default: true
},
placeholder: {
type: String,
default: '请选择'
},
disabled: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
selectType: {
type: String,
default: 'all'
},
ableIds: {
type: Array,
default: () => []
},
ableRelationIds: {
type: [Array, String],
default: () => []
},
},
data() {
return {
selectShow: false,
innerValue: '',
selectedData: [],
realAbleIds: []
}
},
watch: {
// modelValue: {
// handler() {
// this.setDefault()
// },
// immediate: true
// },
},
methods: {
// setDefault() {
// if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
// const ids = this.multiple ? this.modelValue : [this.modelValue];
// getUserInfoList(ids).then((res) => {
// if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
// const selectedData = res.data.list || []
// this.selectedData = selectedData
// this.innerValue = this.selectedData.map(o => o.fullName).join();
// });
// },
setNullValue() {
this.innerValue = '';
this.selectedData = [];
},
openSelect() {
if (this.disabled) return
if (this.selectType === 'custom') {
this.realAbleIds = this.ableIds
} else if (this.selectType != 'all') {
const suffix = '--' + this.selectType;
let ableIds = !this.ableRelationIds ? [] : Array.isArray(this.ableRelationIds) ? this
.ableRelationIds : [this.ableRelationIds];
this.realAbleIds = ableIds.map(o => o + suffix)
} else {
this.realAbleIds = []
}
this.selectShow = true
},
handleConfirm(selectedData, selectedIds) {
this.selectedData = selectedData;
this.innerValue = selectedData.map(o => o.nickName).join();
if (!this.multiple) {
this.$emit('update:modelValue', selectedIds[0])
this.$emit('change', selectedIds[0], selectedData[0])
} else {
this.$emit('update:modelValue', selectedIds)
this.$emit('change', selectedIds, selectedData)
}
},
handleClose() {
this.selectShow = false
}
}
}
</script>

View File

@@ -3,7 +3,7 @@
<view class="jnpf-tree-select-body">
<view class="jnpf-tree-select-title">
<text class="icon-ym icon-ym-report-icon-preview-pagePre backIcon" @tap="close()"></text>
<view class="title">组织选择</view>
<view class="title">选择申请人单位</view>
</view>
<view class="jnpf-tree-select-search">
<u-search :placeholder="$t('app.apply.pleaseKeyword')" v-model="keyword" height="72"
@@ -20,20 +20,20 @@
<view class="jnpf-tree-selected-box">
<scroll-view scroll-y="true" class="select-list">
<u-tag closeable @close="delSelect(index)" v-for="(item,index) in selectedList" :key="index"
:text="item.orgNameTree" class="u-selectTag" />
:text="item.deptName" class="u-selectTag" />
</scroll-view>
</view>
</view>
<view class="jnpf-tree-selected-line"></view>
<view class="jnpf-tree-selected-tabs">
<view class="tab-item" :class="{'tab-item-active':activeKey==='1'}" @click="toggloActive('1')">组织构架
</view>
<!-- <view class="jnpf-tree-selected-tabs">
<view class="tab-item" :class="{'tab-item-active':activeKey==='1'}" @click="toggloActive('1')">组织构架</view>
<view class="tab-item" :class="{'tab-item-active':activeKey==='2'}" @click="toggloActive('2')"
v-if="selectType === 'all'">
当前组织
</view>
</view>
</view> -->
<view class="jnpf-tree-select-tree">
<!-- 树形结构区域 -->
<scroll-view :scroll-y="true" style="height: 100%" v-if="activeKey==='1' && !hasPage">
<ly-tree v-if="selectType !== 'all'" :tree-data="options" :node-key="realProps.value"
default-expand-all :props="realProps" :filter-node-method="filterNode"
@@ -46,18 +46,19 @@
@node-click="handleTreeNodeClick" :show-checkbox="multiple" :show-radio="!multiple"
:expandOnClickNode="false" :checkOnClickNode="true" :expandOnCheckNode="false" checkStrictly />
</scroll-view>
<!-- 列表/搜索结果区域 -->
<scroll-view :scroll-y="true" style="height: 100%" :refresher-enabled="false" :refresher-threshold="100"
:scroll-with-animation='true' :refresher-triggered="triggered" @scrolltolower="handleScrollToLower"
v-if="activeKey==='2'|| (activeKey==='1' && hasPage)">
<view class="jnpf-selcet-list" v-if="list.length">
<view class="jnpf-selcet-cell" v-for="item in list" :key="item.id"
<view class="jnpf-selcet-cell" v-for="item in list" :key="item.deptId"
@click.stop="handleNodeClick(item)">
<view class="jnpf-selcet-cell-action">
<lyCheckbox :type="multiple ? 'checkbox' : 'radio'"
:checked="selectedIds.includes(item.id)" />
:checked="selectedIds.includes(item.deptId)" />
</view>
<view class="jnpf-selcet-cell-name">
{{item.orgNameTree}}
{{item.deptName}}
</view>
</view>
</view>
@@ -73,6 +74,7 @@
</view>
</u-popup>
</template>
<script>
import {
getOrgByOrganizeCondition,
@@ -81,12 +83,15 @@
import lyCheckbox from '@/components/ly-tree/components/ly-checkbox.vue';
import Empty from '../Empty/index.vue'
// 适配接口返回的字段
const defaultProps = {
label: 'fullName',
value: 'id',
label: 'deptName', // 对应接口的deptName
value: 'deptId', // 对应接口的deptId
icon: 'icon',
children: 'children'
children: 'children',// 子节点字段
isLeaf: 'isLeaf' // 叶子节点标识
}
export default {
props: {
selectedData: {
@@ -101,25 +106,21 @@
type: String,
default: 'all'
},
// 通过双向绑定控制组件的弹出与收起
type: {
type: String,
default: 'all'
},
modelValue: {
type: Boolean,
default: false
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
},
props: {
type: Object,
default: () => ({
label: 'fullName',
value: 'id',
icon: 'icon',
children: 'children',
isLeaf: 'isLeaf'
})
default: () => ({})
},
multiple: {
type: Boolean,
@@ -138,7 +139,7 @@
keyword: '',
showPopup: false,
options: [],
lazyOptions: [],
lazyOptions: [{}], // 懒加载根节点占位
activeKey: '1',
hasPage: false,
pagination: {
@@ -152,7 +153,6 @@
};
},
watch: {
// 在select弹起的时候重新初始化所有数据
modelValue: {
handler(val) {
this.showPopup = val
@@ -163,7 +163,8 @@
},
selectedList: {
handler(val) {
this.selectedIds = val.map((o) => o.id);
// 适配deptId字段
this.selectedIds = val.map((o) => o.deptId);
this.$refs.tree && this.$refs.tree.setCheckedKeys(this.selectedIds)
},
deep: true
@@ -171,7 +172,6 @@
},
computed: {
uZIndex() {
// 如果用户有传递z-index值优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
},
realProps() {
@@ -184,23 +184,55 @@
const userInfo = uni.getStorageSync('userInfo') || {}
const list = (userInfo.organizeList || []).map((o) => ({
...o,
orgNameTree: o.treeName
deptName: o.treeName || o.deptName,
deptId: o.id || o.deptId
}))
return list
}
},
methods: {
init() {
this.keyword = ""
this.hasPage = 0
this.activeKey = '1'
this.finish = false
this.pagination.currentPage = 1
this.$nextTick(() => {
this.triggered = true
})
this.selectedList = JSON.parse(JSON.stringify(this.selectedData))
if (this.selectType !== 'all') this.getConditionOptions()
this.keyword = ""
this.hasPage = 0
this.activeKey = '1'
this.finish = false
this.pagination.currentPage = 1
this.$nextTick(() => {
this.triggered = false
})
// 深拷贝选中数据
this.selectedList = JSON.parse(JSON.stringify(this.selectedData)).map(item => ({
deptId: item.id || item.deptId,
deptName: item.orgNameTree || item.deptName || item.fullName,
...item
}))
// 如果是全量选择,预加载根节点
if (this.selectType === 'all') {
this.preloadRootNodes()
} else {
this.getConditionOptions()
}
},
preloadRootNodes() {
const data = {
type: this.type,
}
getOrganizeSelector(data).then(res => {
const list = res.data || []
// 构建根节点树
this.options = this.buildTree(list, 'deptId', 'deptPid', '0')
console.log('预加载的根节点:', this.options)
// 设置初始选中状态
this.$nextTick(() => {
if (this.$refs.tree && this.selectedIds.length > 0) {
this.$refs.tree.setCheckedKeys(this.selectedIds)
}
})
})
},
getConditionOptions() {
if (!this.ableIds.length) return
@@ -208,90 +240,263 @@
ids: this.ableIds
}
getOrgByOrganizeCondition(query).then(res => {
this.options = res.data.list || []
// 适配接口返回的扁平数据为树形结构
this.options = this.buildTree(res.data.list || [], 'deptId', 'deptPid', '0')
this.$refs.tree && this.$refs.tree.setCheckedKeys(this.selectedIds)
})
},
// 扁平数组转树形结构
buildTree(data, idKey, pidKey, rootPid) {
const result = []
const map = {}
// 先构建ID映射
data.forEach(item => {
map[item[idKey]] = { ...item, children: [] }
})
// 组装父子关系
data.forEach(item => {
const parent = map[item[pidKey]]
if (item[pidKey] === rootPid) {
result.push(map[item[idKey]])
} else if (parent) {
parent.children.push(map[item[idKey]])
}
})
return result
},
// 树形节点过滤
filterNode(value, data) {
if (!value) return true;
return data[this.realProps.label].indexOf(value) !== -1;
return data.deptName && data.deptName.indexOf(value) !== -1;
},
// 懒加载节点
loadNode(node, resolve) {
const id = node.key || '0'
const data = {
keyword: '',
parentId: id
}
getOrganizeSelector(data).then(res => {
resolve(res.data?.list)
this.$refs.tree && this.$refs.tree.setCheckedKeys(this.selectedIds)
const parentId = node.key || '0'
// 获取该节点的深度信息
const level = node.level || 0
console.log('加载节点:', { parentId, level, node })
// 如果是根节点level为0直接使用已经构建好的options
if (level === 0 && this.options.length > 0) {
resolve(this.options)
return
}
const data = {
type: this.type,
}
getOrganizeSelector(data).then(res => {
const list = res.data || []
// 将返回的扁平数据转换为树形节点
const treeData = this.buildTree(list, 'deptId', 'deptPid', parentId)
// 设置节点的isLeaf属性根据是否有子节点判断
treeData.forEach(item => {
// 判断该节点是否还有子节点(根据实际情况调整)
// 如果知道接口返回是否有子节点的字段,可以替换这个判断
item.isLeaf = !item.children || item.children.length === 0
})
console.log(`加载父节点 ${parentId} 的子节点:`, treeData)
resolve(treeData)
}).catch(() => {
resolve([]) // 异常时返回空数组,避免组件报错
})
},
// 滚动加载(仅搜索列表使用)
handleScrollToLower() {
if (this.finish || this.activeKey === '2') return
if (this.finish || this.activeKey === '2' || !this.keyword) return
this.getTreeData()
},
// 获取搜索列表数据
getTreeData() {
let data = {
keyword: this.keyword,
parentId: '0',
...this.pagination
const data = {
type: this.type,
// keyword: this.keyword,
// parentId: '0',
// ...this.pagination
}
getOrganizeSelector(data).then(res => {
const list = res.data.list || []
const list = res.data || []
if (list.length < this.pagination.pageSize) this.finish = true;
this.list = this.list.concat(list);
this.pagination.currentPage++
})
},
onTreeCheck(item) {
this.handleTreeNodeClick(item);
},
// 树形节点点击
handleTreeNodeClick(item) {
const data = item.data
const data = item.data || item
this.handleNodeClick(data)
},
// 列表节点点击
handleNodeClick(data) {
const index = this.selectedList.findIndex((o) => o.id === data.id);
if (index !== -1) return this.selectedList.splice(index, 1);
this.multiple ? this.selectedList.push(data) : (this.selectedList = [data]);
// 适配deptId字段
const index = this.selectedList.findIndex((o) => o.deptId === data.deptId);
if (index !== -1) {
this.selectedList.splice(index, 1);
} else {
this.multiple ? this.selectedList.push(data) : (this.selectedList = [data]);
}
},
// 删除选中项
delSelect(index) {
this.selectedList.splice(index, 1);
},
// 清空选中
setCheckAll() {
this.selectedIds = []
this.selectedList = []
},
// 确认选择
handleConfirm() {
this.$emit('confirm', this.selectedList, this.selectedIds);
// 转换回原始字段格式,兼容父组件
const resultList = this.selectedList.map(item => ({
id: item.deptId,
orgNameTree: item.deptName,
...item
}))
const resultIds = resultList.map(item => item.id)
console.log(resultIds,resultList,'数据')
this.$emit('confirm', resultList, resultIds);
this.close();
},
// 关闭弹窗
close() {
this.$emit('update:modelValue', false); // 双向绑定规范
this.$emit('close', false);
},
// 切换标签
toggloActive(key) {
if (this.activeKey === key) return
this.keyword = ''
this.$nextTick(() => {
this.activeKey = key
if (this.activeKey === '2') this.list = this.getCurrOrgList
})
},
handleSearch(val) {
this.keyword = val
if (this.selectType !== 'all') return this.$refs.tree && this.$refs.tree.filter(val)
this.hasPage = !!val
this.list = []
if (this.activeKey != '1') this.activeKey = '1'
this.$nextTick(() => {
if (this.keyword) {
this.pagination.currentPage = 1
this.finish = false
this.$u.debounce(this.getTreeData, 300)
if (this.activeKey === '2') {
this.list = this.getCurrOrgList
} else {
this.list = []
}
})
},
// 搜索处理
handleSearch(val) {
this.keyword = val.trim()
// 非全量选择时,使用树形过滤
if (this.selectType !== 'all') {
this.$refs.tree && this.$refs.tree.filter(this.keyword)
return
}
// 有搜索关键词时,切换为列表展示
this.hasPage = !!this.keyword
this.list = []
this.finish = false
this.pagination.currentPage = 1
this.activeKey = '1'
if (this.keyword) {
this.$u.debounce(this.getTreeData, 300)() // 执行防抖函数
}
},
}
};
</script>
</script>
<style scoped>
/* 保留原有样式,如需补充可添加 */
.jnpf-tree-select-body {
height: 100vh;
display: flex;
flex-direction: column;
background: #fff;
}
.jnpf-tree-select-title {
display: flex;
align-items: center;
padding: 16rpx;
border-bottom: 1rpx solid #eee;
}
.backIcon {
font-size: 32rpx;
margin-right: 16rpx;
}
.title {
font-size: 32rpx;
font-weight: 500;
}
.jnpf-tree-select-search {
padding: 16rpx;
}
.jnpf-tree-selected {
padding: 0 16rpx;
}
.jnpf-tree-selected-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12rpx 0;
}
.clear-btn {
color: #007aff;
font-size: 28rpx;
}
.select-list {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
padding: 8rpx 0;
max-height: 200rpx;
}
.u-selectTag {
margin-bottom: 8rpx;
}
.jnpf-tree-selected-line {
height: 1rpx;
background: #eee;
margin: 8rpx 0;
}
.jnpf-tree-selected-tabs {
display: flex;
}
.tab-item {
flex: 1;
text-align: center;
padding: 16rpx;
font-size: 28rpx;
}
.tab-item-active {
color: #007aff;
border-bottom: 2rpx solid #007aff;
}
.jnpf-tree-select-tree {
flex: 1;
padding: 16rpx;
}
.jnpf-selcet-cell {
display: flex;
align-items: center;
padding: 16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
}
.jnpf-selcet-cell-action {
margin-right: 16rpx;
}
.jnpf-tree-select-actions {
display: flex;
padding: 16rpx;
gap: 16rpx;
}
.buttom-btn {
flex: 1;
height: 88rpx;
line-height: 88rpx;
}
.h-full {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>

View File

@@ -3,16 +3,16 @@
<selectBox v-model="innerValue" :placeholder="placeholder" @openSelect="openSelect" :select-open="selectShow"
:disabled="disabled" />
<SelectPopup v-model="selectShow" :multiple="multiple" :selectedData="selectedData" @close="handleClose"
@confirm="handleConfirm" :selectType="selectType" :ableIds="ableIds" />
@confirm="handleConfirm" :selectType="selectType" :type="type" :ableIds="ableIds" />
</view>
</template>
<script>
import SelectPopup from './SelectPopup';
import selectBox from '@/components/selectBox'
import {
getOrgSelectedList
} from '@/api/common'
// 移除接口导入:不再需要 getOrgSelectedList
// import { getOrgSelectedList } from '@/api/common'
export default {
name: 'jnpf-organize-select',
components: {
@@ -39,9 +39,17 @@
type: String,
default: 'all'
},
type: {
type: String,
default: 'all'
},
ableIds: {
type: Array,
default: () => []
},
innerSelectedData: {
type: Array,
default: () => []
}
},
data() {
@@ -53,24 +61,40 @@
},
watch: {
modelValue: {
handler() {
this.setDefault()
handler(val) {
this.setDefault(val) // 传入modelValue直接处理赋值
},
immediate: true
},
innerSelectedData: {
handler(val) {
if(val.length){
const data = val[0]
this.selectedData = val
this.setDefault(data['id'])
}
},
immediate: true,
deep: true
},
},
methods: {
setDefault() {
if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
const ids = this.multiple ? this.modelValue : [this.modelValue];
getOrgSelectedList({
ids
}).then((res) => {
if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
const selectedData = res.data.list || []
this.selectedData = selectedData
this.innerValue = this.selectedData.map(o => o.orgNameTree).join();
});
// 重构setDefault:不再调用接口,直接处理赋值
setDefault(val) {
if (!val || !val.length) {
return this.setNullValue();
}
// 场景1父组件传入初始值modelValue直接匹配已选数据赋值
// 如果没有初始选中数据innerValue为空即可无需请求接口
// 重点这里不再调用getOrgSelectedList直接用已有的selectedData或空值
if (this.selectedData.length > 0) {
// 有已选数据时,直接拼接名称
this.innerValue = this.selectedData.map(o => o.deptName || o.orgNameTree).join();
} else {
// 无已选数据时若modelValue是ID暂时显示空或根据需要处理
this.innerValue = '';
}
},
setNullValue() {
this.innerValue = '';
@@ -80,7 +104,16 @@
if (this.disabled) return
this.selectShow = true
},
// 核心修改:确认选择时,直接用弹窗返回的原始数据赋值
handleConfirm(selectedData, selectedIds) {
// 1. 保存选中的原始数据
this.selectedData = selectedData;
// 2. 直接拼接名称到显示框innerValue无需接口
this.innerValue = selectedData.map(o => o.deptName || o.orgNameTree).join();
// 3. 向父组件传递选中值(保持原有逻辑)
console.log(this.multiple,'this.multiple')
console.log(selectedData[0],'selectedData[0]')
console.log(selectedIds[0],'selectedIds[0]')
if (!this.multiple) {
this.$emit('update:modelValue', selectedIds[0])
this.$emit('change', selectedIds[0], selectedData[0])
@@ -88,6 +121,8 @@
this.$emit('update:modelValue', selectedIds)
this.$emit('change', selectedIds, selectedData)
}
// 4. 关闭弹窗
this.selectShow = false;
},
handleClose() {
this.selectShow = false

View File

@@ -156,7 +156,7 @@
:relationField="item.relationField" :formData="formData" />
<JnpfOrganizeSelect v-if="config.jnpfKey=='organizeSelect'" v-model="value" :multiple="item.multiple"
:placeholder="item.placeholder" :disabled="item.disabled" :ableIds="item.ableIds"
:selectType="item.selectType" @change="onChange" />
:selectType="item.selectType" :type="item.type" :innerSelectedData="item.innerSelectedData" @change="onChange" />
<JnpfPosSelect v-if="config.jnpfKey=='posSelect'" v-model="value" :multiple="item.multiple"
:placeholder="item.placeholder" :disabled="item.disabled" :ableIds="item.ableIds"
:selectType="item.selectType" @change="onChange" />

View File

@@ -149,7 +149,7 @@
created() {
const token = uni.getStorageSync('token')
this.option = {
url: this.baseURL + '/api/file/Uploader/annex',
url: this.baseURL + '/admin-api/infra/file/jeelowcode/upload',
name: 'file',
header: {
'Authorization': token,
@@ -163,7 +163,18 @@
watch: {
modelValue: {
handler(val) {
this.fileList = JSON.parse(JSON.stringify(val));
if (!val || typeof val !== 'string') {
this.fileList = [];
return;
}
const urlList = val.split(',').filter(item => item.trim());
this.fileList = urlList.map(url => {
const fileName = url.substring(url.lastIndexOf('/') + 1) || '未知文件';
return {
fileUrl: url,
name: fileName
};
});
},
immediate: true
}
@@ -174,13 +185,17 @@
if (item['responseText']) {
let response = JSON.parse(item.responseText)
if (this.fileList.length >= this.limit) return this.$u.toast('已达最大上传数量')
if (response.code != 200) return this.$u.toast(response.msg)
if (response.code != 0) return this.$u.toast(response.msg)
console.log(this.fileList,'fileList---')
this.fileList.push({
fileName: item.name,
name: item.name,
fileId: response.data.name,
url: response.data.url,
fileUrl: response.data.url,
fileExtension: response.data.fileExtension,
fileSize: response.data.fileSize
fileSize: response.data.size,
fileType: response.data.type,
filePath: response.data.path,
})
this.$emit('update:modelValue', this.fileList)
this.$emit('change', this.fileList)

View File

@@ -256,13 +256,13 @@
this.$nextTick(() => {
this.triggered = true
})
this.selectedList = JSON.parse(JSON.stringify(this.selectedData))
if (this.selectType === 'all') {
this.getGroupList()
} else {
this.hasPage = 1
this.getConditionOptions()
}
// this.selectedList = JSON.parse(JSON.stringify(this.selectedData))
// if (this.selectType === 'all') {
// this.getGroupList()
// } else {
// this.hasPage = 1
// this.getConditionOptions()
// }
},
handleToFirst() {