<template>
|
<view class="organization-selector">
|
<view class="form-label" :class="{ required: required }" v-if="showLabel">{{ label }}</view>
|
<picker
|
mode="selector"
|
:range="organizations"
|
:value="selectedIndex"
|
@change="onOrganizationChange"
|
:disabled="disabled"
|
>
|
<view class="form-input picker-input" :class="{ disabled: disabled }">
|
{{ displayText }}
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
</view>
|
</picker>
|
</view>
|
</template>
|
|
<script>
|
import { listBranchCompany } from "@/api/system/dept"
|
import { mapState } from 'vuex'
|
|
export default {
|
name: 'OrganizationSelector',
|
props: {
|
// 标签文本
|
label: {
|
type: String,
|
default: '归属机构'
|
},
|
// 是否显示标签
|
showLabel: {
|
type: Boolean,
|
default: true
|
},
|
// 是否必填
|
required: {
|
type: Boolean,
|
default: false
|
},
|
// 当前选中的归属机构ID
|
value: {
|
type: [Number, String],
|
default: null
|
},
|
// 占位符
|
placeholder: {
|
type: String,
|
default: '请选择归属机构'
|
},
|
// 是否禁用
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
// 是否自动选择当前用户的分公司
|
autoSelectUserDept: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data() {
|
return {
|
organizations: [],
|
organizationOptions: [],
|
selectedIndex: -1
|
}
|
},
|
computed: {
|
...mapState({
|
currentUser: state => ({
|
branchCompanyId: state.user.branchCompanyId,
|
branchCompanyName: state.user.branchCompanyName
|
})
|
}),
|
displayText() {
|
if (this.selectedIndex >= 0 && this.selectedIndex < this.organizations.length) {
|
return this.organizations[this.selectedIndex]
|
}
|
return this.placeholder
|
}
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(newVal) {
|
if (newVal && this.organizationOptions.length > 0) {
|
const index = this.organizationOptions.findIndex(org => org.deptId === newVal)
|
this.selectedIndex = index
|
}
|
}
|
}
|
},
|
mounted() {
|
this.loadOrganizations()
|
},
|
methods: {
|
// 加载分公司数据（parent_id=100的部门）
|
loadOrganizations() {
|
return listBranchCompany().then(response => {
|
// console.log('加载分公司数据:', response.data);
|
const list = response.data || []
|
// 过滤出 parent_id = 100 的部门（分公司）
|
this.organizationOptions = list.filter(dept => dept.parentId == "100")
|
// 生成picker的数据源（只显示名称）
|
this.organizations = this.organizationOptions.map(dept => dept.deptName)
|
|
// 自动选择用户的分公司
|
if (this.autoSelectUserDept && !this.value && this.currentUser.branchCompanyName) {
|
this.selectUserBranchCompany()
|
} else if (this.value) {
|
// 如果有传入的value，设置选中索引
|
const index = this.organizationOptions.findIndex(org => org.deptId === this.value)
|
this.selectedIndex = index
|
}
|
|
return this.organizationOptions
|
}).catch(error => {
|
console.error('加载分公司数据失败:', error)
|
this.organizations = []
|
this.organizationOptions = []
|
return []
|
})
|
},
|
|
// 选择用户所属的分公司
|
selectUserBranchCompany() {
|
if (!this.currentUser.branchCompanyName) {
|
return
|
}
|
|
const index = this.organizationOptions.findIndex(
|
dept => dept.deptName === this.currentUser.branchCompanyName
|
)
|
|
if (index !== -1) {
|
this.selectedIndex = index
|
this.emitChange(this.organizationOptions[index])
|
}
|
},
|
|
// 归属机构选择变化
|
onOrganizationChange(e) {
|
const index = e.detail.value
|
this.selectedIndex = index
|
const selectedOrg = this.organizationOptions[index]
|
this.emitChange(selectedOrg)
|
},
|
|
// 触发事件
|
emitChange(organization) {
|
if (organization) {
|
// 提取地域关键词（去除"分公司"、"总公司"、"总部"后缀）
|
const region = organization.deptName.replace(/(分公司|总公司|总部)$/g, '').trim()
|
// console.log('region', organization)
|
this.$emit('input', organization.deptId)
|
this.$emit('change', {
|
deptId: organization.deptId,
|
deptName: organization.deptName,
|
serviceOrderClass: organization.serviceOrderClass || '',
|
region: region,
|
// 出发地信息
|
departureAddress: organization.departureAddress || '',
|
departureLongitude: organization.departureLongitude || null,
|
departureLatitude: organization.departureLatitude || null
|
})
|
}
|
},
|
|
// 重新加载归属机构列表（供外部调用）
|
reload() {
|
return this.loadOrganizations()
|
},
|
|
// 获取当前选中的组织信息（供外部调用）
|
getSelectedOrganization() {
|
if (this.selectedIndex >= 0 && this.selectedIndex < this.organizationOptions.length) {
|
return this.organizationOptions[this.selectedIndex]
|
}
|
return null
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.organization-selector {
|
.form-label {
|
font-size: 28rpx;
|
margin-bottom: 15rpx;
|
color: #333;
|
|
&.required::before {
|
content: '*';
|
color: #ff0000;
|
margin-right: 5rpx;
|
}
|
}
|
|
.form-input {
|
height: 70rpx;
|
padding: 0 20rpx;
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
font-size: 28rpx;
|
|
&.picker-input {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
&.disabled {
|
background-color: #f5f5f5;
|
color: #999;
|
}
|
}
|
}
|
</style>
|
