Files
tms-erp-web/src/views/system/dept.vue
T
b2894lxlx 50c1afe9c8 ✨ 列表导出补齐创建人创建时间,并修复组织类型提交
多模块列表与导出展示创建人、创建时间;组织类型强制提交数字编码,避免中文 dictKey 反序列化失败。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-30 14:22:39 +08:00

1315 lines
41 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<basic-container>
<avue-crud
:option="option"
:table-loading="loading"
:data="data"
ref="crud"
v-model="form"
:permission="permissionList"
:before-open="beforeOpen"
:before-close="beforeClose"
@row-del="rowDel"
@row-update="rowUpdate"
@row-save="rowSave"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
@tree-load="treeLoad"
>
<template #menu-left>
<el-button
type="danger"
icon="el-icon-delete"
v-if="permission.dept_delete"
plain
@click="handleDelete"
>删除
</el-button>
<el-button
type="primary"
plain
:loading="oaSyncLoading"
v-if="isAdministrator"
@click="handleOaOrgSync"
>自动同步组织
</el-button>
</template>
<template #menu="scope">
<el-link
type="primary"
@click.stop="handleAdd(scope.row, scope.index)"
v-if="isAdministrator"
>新增子项
</el-link>
</template>
<template #deptCategory="{ row }">
<el-tag>{{ row.deptCategoryName || getDeptCategoryLabel(row.deptCategory) }}</el-tag>
</template>
<template #status="{ row }">
<el-tag :type="Number(row.status) === 1 ? 'success' : 'info'" class="status-text">
{{ Number(row.status) === 1 ? '启用' : '停用' }}
</el-tag>
</template>
</avue-crud>
<el-dialog v-model="carrierDialogVisible" title="选择承运商" width="1100px" append-to-body>
<el-form :inline="true" :model="carrierQuery" class="carrier-search-form">
<el-form-item label="名称">
<el-input v-model="carrierQuery.fullName" placeholder="请输入承运商名称" clearable />
</el-form-item>
<el-form-item label="准入类型">
<el-select v-model="carrierQuery.accessType" placeholder="全部" clearable>
<el-option label="临时" value="temporary" />
<el-option label="正式" value="formal" />
</el-select>
</el-form-item>
<el-form-item label="审批状态">
<el-select v-model="carrierQuery.approvalStatus" placeholder="全部" clearable>
<el-option label="草稿" value="draft" />
<el-option label="审核中" value="reviewing" />
<el-option label="审核通过" value="approved" />
<el-option label="审核不通过" value="rejected" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="carrierQuery.status" placeholder="全部" clearable>
<el-option label="启用" :value="1" />
<el-option label="停用" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchCarrier">搜索</el-button>
<el-button @click="resetCarrierQuery">清空</el-button>
</el-form-item>
</el-form>
<el-table :data="carrierData" border stripe height="420" @row-dblclick="selectCarrier">
<el-table-column prop="customerCode" label="客商编号" min-width="130" />
<el-table-column prop="shortName" label="客商简称" min-width="140" />
<el-table-column prop="fullName" label="客商名称" min-width="200" show-overflow-tooltip />
<el-table-column prop="customerType" label="客户类型" min-width="120" />
<el-table-column prop="customerNature" label="客户性质" min-width="120" />
<el-table-column prop="unifiedCreditCode" label="统一信用代码" min-width="180" />
<el-table-column prop="deptName" label="所属组织" min-width="150" />
<el-table-column prop="accessType" label="准入类型" min-width="110">
<template #default="{ row }">{{ formatAccessType(row.accessType) }}</template>
</el-table-column>
<el-table-column prop="approvalStatus" label="审批状态" min-width="120">
<template #default="{ row }">{{ formatApprovalStatus(row.approvalStatus) }}</template>
</el-table-column>
<el-table-column prop="currentNode" label="当前节点" min-width="130" />
<el-table-column prop="currentProcessor" label="当前处理人" min-width="130" />
<el-table-column prop="approvedTime" label="审核通过时间" min-width="170" sortable />
<el-table-column prop="status" label="状态" width="90">
<template #default="{ row }">{{ Number(row.status) === 1 ? '启用' : '停用' }}</template>
</el-table-column>
<el-table-column label="操作" width="90" fixed="right">
<template #default="{ row }">
<el-link type="primary" @click="selectCarrier(row)">选择</el-link>
</template>
</el-table-column>
</el-table>
<div class="carrier-pagination">
<el-pagination
v-model:current-page="carrierPage.current"
v-model:page-size="carrierPage.size"
:total="carrierPage.total"
:page-sizes="[10, 20, 50]"
layout="total, sizes, prev, pager, next"
@current-change="loadCarrierList"
@size-change="handleCarrierSizeChange"
/>
</div>
</el-dialog>
<el-dialog
v-model="oaSyncVisible"
width="480px"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="!oaSyncRunning"
:show-close="!oaSyncRunning"
class="oa-sync-dialog"
@close="closeOaSyncDialog"
>
<template #header>
<span class="dialog-title">{{ oaSyncDialogTitle }}</span>
</template>
<div class="oa-sync-body">
<el-progress
:percentage="oaSyncPercent"
:status="oaSyncProgressStatus"
:stroke-width="12"
/>
<div class="oa-sync-meta" v-if="oaSyncStage === 'clear'">当前阶段:{{ oaSyncStageLabel }}</div>
<div class="oa-sync-meta" v-else>
当前阶段:{{ oaSyncStageLabel }},第 {{ oaSyncProgress.current || 0 }} / {{ oaSyncTotalPage }} 页
</div>
<div class="oa-sync-stats">
<div class="oa-sync-stat">
<span class="oa-sync-stat__label">同步成功</span>
<span class="oa-sync-stat__value oa-sync-stat__value--success">{{ oaSyncProgress.synced }}</span>
</div>
<div class="oa-sync-stat">
<span class="oa-sync-stat__label">跳过</span>
<span class="oa-sync-stat__value oa-sync-stat__value--skip">{{ oaSyncProgress.skipped }}</span>
</div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button v-if="oaSyncRunning" @click="cancelOaSync">取消</el-button>
<el-button v-else type="primary" @click="closeOaSyncDialog">关闭</el-button>
</span>
</template>
</el-dialog>
</basic-container>
</template>
<script>
import {
getLazyList,
remove,
update,
add,
getDept,
getDeptTree,
syncOaCompany,
syncOaDepartment,
clearNonTopDept,
} from '@/api/system/dept';
import { getLeaderList } from '@/api/system/user';
import { getDictionary } from '@/api/system/dictbiz';
import { getList as getCustomerArchiveList } from '@/api/vehicle/customer-archive';
import { mapGetters } from 'vuex';
import website from '@/config/website';
import func from '@/utils/func';
const escapeRegExp = value => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const ORGANIZATION_TYPE_DICT_CODE = 'organization_type';
export default {
data() {
return {
form: {},
leaderOptions: [],
organizationTypeOptions: [],
parentDeptCode: '',
parentDept: null,
carrierDialogVisible: false,
carrierData: [],
carrierQuery: {
fullName: '',
accessType: '',
approvalStatus: '',
status: undefined,
},
carrierPage: {
current: 1,
size: 10,
total: 0,
},
selectionList: [],
query: {},
loading: true,
oaSyncLoading: false,
oaSyncVisible: false,
oaSyncRunning: false,
oaSyncCancelled: false,
oaSyncStatus: 'running',
oaSyncStage: 'company',
oaSyncClearNonTop: false,
oaSyncController: null,
oaSyncProgress: {
current: 0,
size: 20,
total: 0,
synced: 0,
skipped: 0,
},
parentId: 0,
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
option: {
lazy: true,
tip: false,
simplePage: true,
searchShow: true,
searchMenuSpan: 24,
searchIcon: true,
searchIndex: 4,
searchMenuPosition: 'right',
tree: true,
rowKey: 'id',
border: true,
index: true,
selection: true,
viewBtn: true,
menuWidth: 320,
dialogWidth: 800,
dialogClickModal: false,
labelPosition: 'right',
labelWidth: 'auto',
// 禁用 Avue 列状态持久化,避免增列后表头/单元格错位
columnState: false,
column: [
{
label: '组织名称',
prop: 'deptName',
minWidth: 160,
order: 80,
search: true,
rules: [
{
required: true,
message: '请输入组织名称',
trigger: 'blur',
},
],
},
{
label: '组织编码',
prop: 'deptCode',
minWidth: 140,
order: 70,
maxlength: 30,
showWordLimit: true,
rules: [
{
validator: (rule, value, callback) => {
const deptCode = String(value || '').trim();
// 组织编码非必填,为空直接通过
if (!deptCode) {
callback();
return;
}
if (deptCode.length > 30) {
callback(new Error('组织编码不能超过30个字符'));
return;
}
const parentId = this.normalizeParentId(this.form?.parentId);
// 顶级组织不选择上级时,编码不依赖上级编码
if (!parentId) {
callback();
return;
}
if (!this.parentDept || String(this.parentDept.id) !== String(parentId)) {
this.loadParentDeptCode(parentId);
callback(new Error('正在加载上级组织编码,请稍后重试'));
return;
}
if (!this.parentDeptCode) {
callback(new Error('上级组织未配置组织编码,请先完善上级组织编码'));
return;
}
const pattern = new RegExp(`^${escapeRegExp(this.parentDeptCode)}-\\d+$`);
if (!pattern.test(deptCode)) {
callback(new Error(`组织编码格式应为:${this.parentDeptCode}-分段数字`));
return;
}
callback();
},
trigger: 'blur',
},
],
},
{
label: '金蝶部门代码',
prop: 'kingdeeDeptCode',
minWidth: 140,
order: 65,
maxlength: 64,
showWordLimit: true,
rules: [
{
validator: (rule, value, callback) => {
const code = String(value || '').trim();
if (!code) {
callback();
return;
}
if (code.length > 64) {
callback(new Error('金蝶部门代码不能超过64个字符'));
return;
}
callback();
},
trigger: 'blur',
},
],
},
{
label: '组织简称',
prop: 'shortName',
minWidth: 140,
order: 60,
},
{
label: '助记码',
prop: 'mnemonicCode',
minWidth: 120,
order: 50,
},
{
label: '拼音助记码',
prop: 'pinyinMnemonic',
minWidth: 140,
order: 45,
},
{
label: '组织类型',
type: 'select',
dicData: [],
dataType: 'number',
minWidth: 120,
order: 90,
prop: 'deptCategory',
slot: true,
change: ({ value }) => this.handleDeptCategoryChange(value),
rules: [
{
required: true,
message: '请选择组织类型',
trigger: 'change',
},
],
},
{
label: '负责人',
prop: 'leaderId',
minWidth: 120,
addDisplay: false,
editDisplay: false,
viewDisplay: false,
formatter: row => this.getLeaderValue(row.leaderId, 'realName'),
},
{
label: '联系电话',
prop: 'leaderPhone',
minWidth: 140,
addDisplay: false,
editDisplay: false,
viewDisplay: false,
formatter: row => this.getLeaderValue(row.leaderId, 'phone'),
},
{
label: '是否平台公司',
prop: 'isPlatformCompany',
type: 'select',
dicData: [
{ label: '否', value: 0 },
{ label: '是', value: 1 },
],
dataType: 'number',
value: 0,
width: 120,
order: 35,
formatter: row => (Number(row.isPlatformCompany) === 1 ? '是' : '否'),
rules: [
{
required: true,
message: '请选择是否平台公司',
trigger: 'change',
},
],
},
{
label: '排序',
prop: 'sort',
type: 'number',
align: 'right',
width: 80,
order: 30,
rules: [
{
required: true,
message: '请输入排序',
trigger: 'blur',
},
],
},
{
label: '状态',
prop: 'status',
width: 100,
slot: true,
addDisplay: false,
editDisplay: false,
viewDisplay: false,
},
{
label: '上级组织',
prop: 'parentId',
dicData: [],
type: 'tree',
hide: true,
addDisabled: false,
order: 100,
change: ({ value }) => this.handleParentChange(value),
props: {
label: 'title',
},
},
{
label: '所属租户',
prop: 'tenantId',
type: 'tree',
dicUrl: '/blade-system/tenant/select',
addDisplay: false,
editDisplay: false,
viewDisplay: website.tenantMode,
props: {
label: 'tenantName',
value: 'tenantId',
},
hide: true,
search: website.tenantMode,
},
{
label: '机构全称',
prop: 'fullName',
search: true,
hide: true,
addDisplay: false,
editDisplay: false,
},
{
label: '备注',
prop: 'remark',
type: 'textarea',
hide: true,
addDisplay: false,
editDisplay: false,
},
],
},
data: [],
};
},
created() {
// 清除可能错乱的表格列顺序/列状态缓存,避免新增列后表头/单元格错位
try {
const path = this.$route?.path || '/system/dept';
Object.keys(localStorage).forEach(key => {
if (
(key.startsWith('tms:table-column-order:') && key.includes(path)) ||
(key.startsWith('AVUE_COLUMN_STATE:') && key.includes('dept'))
) {
localStorage.removeItem(key);
}
});
} catch (error) {
// ignore storage errors
}
this.loadLeaderOptions();
this.loadOrganizationTypeOptions();
},
computed: {
...mapGetters(['userInfo', 'permission', 'isAdministrator']),
permissionList() {
return {
addBtn: this.validData(this.permission.dept_add, false),
viewBtn: this.validData(this.permission.dept_view, false),
delBtn: this.validData(this.permission.dept_delete, false),
editBtn: this.validData(this.permission.dept_edit, false),
};
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(',');
},
oaSyncDialogTitle() {
if (this.oaSyncStatus === 'done') {
return '同步完成';
}
if (this.oaSyncStatus === 'cancelled') {
return '已取消同步';
}
if (this.oaSyncStatus === 'error') {
return '同步失败';
}
return '自动同步组织';
},
oaSyncStageLabel() {
if (this.oaSyncStage === 'clear') {
return '清除非顶级组织';
}
return this.oaSyncStage === 'department' ? '同步部门' : '同步公司';
},
oaSyncTotalPage() {
const total = Number(this.oaSyncProgress.total) || 0;
const size = Number(this.oaSyncProgress.size) || 20;
if (total <= 0) {
return this.oaSyncProgress.current || 0;
}
return Math.max(1, Math.ceil(total / size));
},
oaSyncPercent() {
if (this.oaSyncStatus === 'done') {
return 100;
}
const totalPage = this.oaSyncTotalPage;
const current = Number(this.oaSyncProgress.current) || 0;
const stageBase = this.oaSyncStage === 'department' ? 50 : 0;
if (totalPage <= 0) {
return stageBase;
}
const stagePercent = Math.min(50, Math.round((current / totalPage) * 50));
return Math.min(99, stageBase + stagePercent);
},
oaSyncProgressStatus() {
if (this.oaSyncStatus === 'done') {
return 'success';
}
if (this.oaSyncStatus === 'error') {
return 'exception';
}
return undefined;
},
},
methods: {
handleOaOrgSync() {
this.$confirm(
'是否清除非顶级组织?选择“是”将先删除顶级以外的组织后再同步;选择“否”则直接同步。',
'提示',
{
confirmButtonText: '是',
cancelButtonText: '否',
distinguishCancelAndClose: true,
closeOnClickModal: false,
type: 'warning',
}
)
.then(() => {
this.startOaOrgSync(true);
})
.catch(action => {
if (action === 'cancel') {
this.startOaOrgSync(false);
}
});
},
startOaOrgSync(clearNonTop) {
this.oaSyncLoading = true;
this.oaSyncVisible = true;
this.oaSyncRunning = true;
this.oaSyncCancelled = false;
this.oaSyncStatus = 'running';
this.oaSyncClearNonTop = !!clearNonTop;
this.oaSyncStage = clearNonTop ? 'clear' : 'company';
this.oaSyncController = new AbortController();
this.oaSyncProgress = {
current: 0,
size: 20,
total: 0,
synced: 0,
skipped: 0,
};
this.runOaOrgSyncPages();
},
isOaSyncCanceledError(error) {
return (
this.oaSyncCancelled ||
error?.code === 'ERR_CANCELED' ||
error?.name === 'CanceledError' ||
error?.name === 'AbortError'
);
},
async runOaOrgSyncStage(syncApi) {
const size = 20;
let current = 1;
while (!this.oaSyncCancelled) {
const res = await syncApi(current, size, this.oaSyncController?.signal);
const page = res?.data?.data || {};
this.oaSyncProgress.current = page.current || current;
this.oaSyncProgress.size = page.size || size;
this.oaSyncProgress.total = page.total || 0;
this.oaSyncProgress.synced += page.syncedCount || 0;
this.oaSyncProgress.skipped += page.skippedCount || 0;
if (page.finished) {
break;
}
current += 1;
}
},
async runOaOrgSyncPages() {
try {
if (this.oaSyncClearNonTop) {
this.oaSyncStage = 'clear';
await clearNonTopDept(this.oaSyncController?.signal);
if (this.oaSyncCancelled) {
this.oaSyncStatus = 'cancelled';
return;
}
}
this.oaSyncStage = 'company';
await this.runOaOrgSyncStage(syncOaCompany);
if (this.oaSyncCancelled) {
this.oaSyncStatus = 'cancelled';
return;
}
this.oaSyncStage = 'department';
this.oaSyncProgress.current = 0;
this.oaSyncProgress.total = 0;
await this.runOaOrgSyncStage(syncOaDepartment);
if (this.oaSyncCancelled) {
this.oaSyncStatus = 'cancelled';
return;
}
this.oaSyncStatus = 'done';
} catch (error) {
if (this.isOaSyncCanceledError(error)) {
this.oaSyncStatus = 'cancelled';
} else {
this.oaSyncStatus = 'error';
this.$message.error(error?.message || 'OA组织同步失败');
}
} finally {
this.oaSyncRunning = false;
this.oaSyncLoading = false;
if (this.oaSyncStatus === 'done' || this.oaSyncStatus === 'cancelled') {
this.parentId = 0;
this.data = [];
this.$refs.crud?.refreshTable?.();
this.onLoad(this.page, this.query);
}
}
},
cancelOaSync() {
if (!this.oaSyncRunning) {
return;
}
this.oaSyncCancelled = true;
this.oaSyncController?.abort();
},
closeOaSyncDialog() {
if (this.oaSyncRunning) {
this.cancelOaSync();
return;
}
this.oaSyncVisible = false;
},
initData(tenantId) {
getDeptTree(tenantId).then(res => {
const column = this.findColumn(this.option.column, 'parentId');
column.dicData = res.data.data;
});
},
handleParentChange(parentId) {
// Avue tree 选择时可能先触发空值 change,避免把已加载的上级编码清掉
const normalizedId = this.normalizeParentId(parentId);
if (!normalizedId && this.form?.parentId) {
return;
}
this.loadParentDeptCode(normalizedId || this.form?.parentId);
},
normalizeParentId(parentId) {
if (Array.isArray(parentId)) {
parentId = parentId[0];
}
if (parentId && typeof parentId === 'object') {
parentId = parentId.value ?? parentId.id ?? parentId.key;
}
if (!parentId || String(parentId) === '0') {
return '';
}
return parentId;
},
loadParentDeptCode(parentId) {
const normalizedId = this.normalizeParentId(parentId);
if (!normalizedId) {
this.parentDeptCode = '';
this.parentDept = null;
return;
}
getDept(normalizedId).then(res => {
// 防止异步乱序:仅采纳当前表单上级对应的结果
if (
this.form?.parentId &&
String(this.form.parentId) !== '0' &&
String(this.form.parentId) !== String(normalizedId)
) {
return;
}
this.parentDept = res.data.data || null;
this.parentDeptCode = this.parentDept?.deptCode || '';
this.updateDeptCategoryOptions();
this.$nextTick(() => {
this.$refs.crud?.clearValidate?.('deptCode');
});
});
},
loadOrganizationTypeOptions() {
return getDictionary({ code: ORGANIZATION_TYPE_DICT_CODE }).then(res => {
const list = res.data.data || [];
this.organizationTypeOptions = list
.map(item => this.normalizeOrganizationTypeOption(item))
.filter(Boolean);
this.resetDeptCategoryOptions();
if (list.length && !this.organizationTypeOptions.length) {
this.$message.warning('组织类型字典 dictKey 须为数字 1~6,当前无法解析,请检查业务字典配置');
}
// 字典异步返回后触发表格组织类型标签重绘
if (Array.isArray(this.data) && this.data.length) {
this.data = [...this.data];
}
});
},
/**
* 业务字典项转下拉选项。后端 deptCategory 为 Integer,value 必须始终为数字。
* dictKey 为纯数字时直接使用;若配成中文则回退用 sort(1~6)作为层级码。
*/
normalizeOrganizationTypeOption(item) {
const label = item?.dictValue ?? item?.label;
if (label === undefined || label === null || String(label).trim() === '') {
return null;
}
const rawKey = item?.dictKey ?? item?.value;
const keyText = rawKey === undefined || rawKey === null ? '' : String(rawKey).trim();
const keyNumber = Number(keyText);
const isPureNumber = keyText !== '' && !Number.isNaN(keyNumber) && String(keyNumber) === keyText;
if (isPureNumber) {
return {
label: String(label),
value: keyNumber,
};
}
// 兼容 dictKey 误配成中文:用排序号作为 1~6 层级码,保证下拉有数据且可提交 Integer
const sortNumber = Number(item?.sort);
if (!Number.isNaN(sortNumber) && sortNumber >= 1 && sortNumber <= 6) {
return {
label: String(label),
value: sortNumber,
};
}
return null;
},
/**
* 提交前将组织类型规范为 Integer;空状态字段去掉,避免 "" 反序列化失败。
*/
prepareDeptSubmitRow(row) {
const category = this.resolveDeptCategoryValue(row.deptCategory);
if (category === null) {
return false;
}
row.deptCategory = category;
if (row.status === '' || row.status === null || row.status === undefined) {
delete row.status;
} else {
row.status = Number(row.status);
}
return true;
},
resolveDeptCategoryValue(value) {
if (value === null || value === undefined || value === '') {
this.$message.warning('请选择组织类型');
return null;
}
const asNumber = Number(value);
if (!Number.isNaN(asNumber) && String(asNumber) === String(value).trim()) {
return asNumber;
}
// 容错:表单里残留了中文标签时,按字典项 label 反查数字编码
const matched = this.organizationTypeOptions.find(
item => String(item.label) === String(value) || this.isSameDeptCategory(item.value, value)
);
if (matched && typeof matched.value === 'number' && !Number.isNaN(matched.value)) {
return matched.value;
}
this.$message.warning('组织类型无效,请重新选择(字典键须为数字 1~6)');
return null;
},
resetDeptCategoryOptions() {
const categoryColumn = this.findColumn(this.option.column, 'deptCategory');
if (!categoryColumn) {
return;
}
categoryColumn.dicData = [...this.organizationTypeOptions];
},
isSameDeptCategory(left, right) {
if (
left === null ||
left === undefined ||
left === '' ||
right === null ||
right === undefined ||
right === ''
) {
return false;
}
if (String(left) === String(right)) {
return true;
}
const leftNumber = Number(left);
const rightNumber = Number(right);
return !Number.isNaN(leftNumber) && !Number.isNaN(rightNumber) && leftNumber === rightNumber;
},
isCarrierDeptCategory(value) {
if (Number(value) === 6) {
return true;
}
const matched = this.organizationTypeOptions.find(item => this.isSameDeptCategory(item.value, value));
const text = matched?.label || value;
return String(text).includes('承运商');
},
filterOrganizationTypeOptions(values) {
const valueSet = new Set(values.map(item => String(item)));
const filtered = this.organizationTypeOptions.filter(item => valueSet.has(String(item.value)));
// 字典 key 非数字时无法按历史层级码过滤,回退展示全部,避免下拉无选项
return filtered.length ? filtered : [...this.organizationTypeOptions];
},
updateDeptCategoryOptions() {
const categoryColumn = this.findColumn(this.option.column, 'deptCategory');
const parent = this.parentDept;
if (!parent || !categoryColumn) {
return;
}
let dicData = [];
if (this.isRootDept(parent)) {
dicData =
parent.deptName === '外部组织'
? this.filterOrganizationTypeOptions([6])
: this.filterOrganizationTypeOptions([1]);
} else if (Number(parent.deptCategory) === 1) {
dicData = this.filterOrganizationTypeOptions([2, 3]);
} else if ([2, 3].includes(Number(parent.deptCategory))) {
dicData = this.filterOrganizationTypeOptions([4, 5, 6]);
} else {
dicData = [...this.organizationTypeOptions];
}
categoryColumn.dicData = dicData;
if (!dicData.some(item => this.isSameDeptCategory(item.value, this.form.deptCategory))) {
this.form.deptCategory = dicData[0]?.value;
}
if (this.isCarrierDeptCategory(this.form.deptCategory)) {
this.openCarrierDialog();
}
},
handleDeptCategoryChange(value) {
if (this.isCarrierDeptCategory(value)) {
this.openCarrierDialog();
}
},
openCarrierDialog() {
this.carrierDialogVisible = true;
this.loadCarrierList();
},
loadCarrierList() {
getCustomerArchiveList(this.carrierPage.current, this.carrierPage.size, {
...this.carrierQuery,
customerType: '承运商',
}).then(res => {
const page = res.data.data || {};
this.carrierData = page.records || [];
this.carrierPage.total = page.total || 0;
});
},
searchCarrier() {
this.carrierPage.current = 1;
this.loadCarrierList();
},
resetCarrierQuery() {
this.carrierQuery = { fullName: '', accessType: '', approvalStatus: '', status: undefined };
this.searchCarrier();
},
handleCarrierSizeChange(size) {
this.carrierPage.size = size;
this.carrierPage.current = 1;
this.loadCarrierList();
},
selectCarrier(row) {
this.form.carrierCustomerId = row.id;
this.form.deptName = row.fullName;
this.form.shortName = row.shortName;
this.form.mnemonicCode = row.mnemonicCode;
this.carrierDialogVisible = false;
},
formatAccessType(value) {
return value === 'formal' ? '正式' : value === 'temporary' ? '临时' : '-';
},
formatApprovalStatus(value) {
const statusMap = {
draft: '草稿',
reviewing: '审核中',
approved: '审核通过',
rejected: '审核不通过',
};
return statusMap[value] || '-';
},
loadLeaderOptions(tenantId) {
getLeaderList(tenantId).then(res => {
this.leaderOptions = res.data.data || [];
// formatter 依赖负责人字典,异步返回后触发表格重绘
if (Array.isArray(this.data) && this.data.length) {
this.data = [...this.data];
}
});
},
getDeptCategoryLabel(deptCategory) {
if (deptCategory === null || deptCategory === undefined || deptCategory === '') {
return '-';
}
const matched = this.organizationTypeOptions.find(item =>
this.isSameDeptCategory(item.value, deptCategory)
);
return matched?.label || String(deptCategory);
},
getLeaderValue(leaderId, field) {
// func.split 空值时返回 '',需兼容为数组,避免表格 formatter 渲染崩溃导致列错位
const splitResult = func.split(leaderId);
const values = Array.isArray(splitResult)
? splitResult
: String(splitResult || '')
.split(',')
.filter(Boolean);
if (!values.length) {
return '-';
}
const result = values
.map(id => this.leaderOptions.find(item => String(item.id) === String(id))?.[field])
.filter(Boolean);
return result.length ? result.join('、') : '-';
},
normalizeTopParent(row) {
if (!this.normalizeParentId(row?.parentId)) {
row.parentId = 0;
}
},
isRootDept(row) {
return row && (row.parentId === 0 || String(row.parentId) === '0');
},
handleAdd(row) {
this.parentId = row.id;
this.loadParentDeptCode(row.id);
const column = this.findColumn(this.option.column, 'parentId');
column.value = row.id;
column.addDisabled = true;
this.$refs.crud.rowAdd();
},
rowSave(row, done, loading) {
row.tenantId = row.tenantId || this.userInfo.tenantId || website.tenantId;
row.deptCode = String(row.deptCode || '').trim();
row.kingdeeDeptCode = String(row.kingdeeDeptCode || '').trim();
row.leaderId = func.join(row.leaderId);
this.normalizeTopParent(row);
if (!this.prepareDeptSubmitRow(row)) {
loading();
return;
}
if (this.isCarrierDeptCategory(row.deptCategory) && !row.carrierCustomerId) {
this.$message.warning('请选择承运商');
loading();
return;
}
add(row).then(
res => {
// 获取新增数据的相关字段
const data = res.data.data;
row.id = data.id;
row.deptCategoryName = data.deptCategoryName;
row.tenantId = data.tenantId;
this.$message({
type: 'success',
message: '操作成功!',
});
// 数据回调进行刷新
done(row);
},
error => {
window.console.log(error);
loading();
}
);
},
rowUpdate(row, index, done, loading) {
row.tenantId = row.tenantId || this.userInfo.tenantId || website.tenantId;
row.deptCode = String(row.deptCode || '').trim();
row.kingdeeDeptCode = String(row.kingdeeDeptCode || '').trim();
row.leaderId = func.join(row.leaderId);
this.normalizeTopParent(row);
if (!this.prepareDeptSubmitRow(row)) {
loading();
return;
}
if (this.isCarrierDeptCategory(row.deptCategory) && !row.carrierCustomerId) {
this.$message.warning('请选择承运商');
loading();
return;
}
update(row).then(
() => {
this.$message({
type: 'success',
message: '操作成功!',
});
// 数据回调进行刷新
done(row);
},
error => {
window.console.log(error);
loading();
}
);
},
rowDel(row, index, done) {
if (this.isRootDept(row)) {
this.$message.warning('根节点不能删除');
return;
}
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.$message({
type: 'success',
message: '操作成功!',
});
// 数据回调进行刷新
done(row);
});
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning('请选择至少一条数据');
return;
}
const deletableRows = this.selectionList.filter(row => !this.isRootDept(row));
if (deletableRows.length === 0) {
this.$message.warning('根节点不能删除');
return;
}
if (deletableRows.length !== this.selectionList.length) {
this.$message.warning('根节点不能删除,已忽略根节点');
}
const deletableIds = deletableRows.map(row => row.id).join(',');
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
return remove(deletableIds);
})
.then(() => {
// 刷新表格数据并重载
this.data = [];
this.parentId = 0;
this.$refs.crud.refreshTable();
this.$refs.crud.toggleSelection();
// 表格数据重载
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
},
searchReset() {
this.query = {};
this.parentId = 0;
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.parentId = '';
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
beforeOpen(done, type) {
if (type === 'add') {
this.form.tenantId = this.form.tenantId || this.userInfo.tenantId || website.tenantId;
if (this.form.isPlatformCompany === undefined || this.form.isPlatformCompany === null) {
this.form.isPlatformCompany = 0;
}
this.initData(this.form.tenantId);
this.loadParentDeptCode(this.form.parentId);
}
if (type === 'edit') {
this.initData(this.form.tenantId || this.userInfo.tenantId || website.tenantId);
}
if (['edit', 'view'].includes(type)) {
getDept(this.form.id).then(res => {
this.form = Object.assign(res.data.data, {
hasChildren: this.form.hasChildren,
});
if (this.form.parentId === '0') {
this.form.parentId = '';
}
this.loadParentDeptCode(this.form.parentId);
if (this.form.hasOwnProperty('leaderId')) {
const splitResult = func.split(this.form.leaderId);
this.form.leaderId = Array.isArray(splitResult) ? splitResult : [];
}
});
}
done();
},
beforeClose(done) {
this.parentId = '';
this.parentDeptCode = '';
this.parentDept = null;
const column = this.findColumn(this.option.column, 'parentId');
column.value = '';
column.addDisabled = false;
this.resetDeptCategoryOptions();
done();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
this.loading = true;
getLazyList(this.parentId, Object.assign(params, this.query)).then(res => {
this.data = res.data.data;
this.loading = false;
this.selectionClear();
});
},
treeLoad(tree, treeNode, resolve) {
const parentId = tree.id;
getLazyList(parentId).then(res => {
resolve(res.data.data);
});
},
},
};
</script>
<style scoped>
.carrier-search-form {
padding: 12px 12px 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.carrier-pagination {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
/* 操作列布局修正:
1) 全局样式对 .cell.avue-crud__menu 设了 width:auto !important + overflow:visible(为避免 tooltip 裁切),
会覆盖 Avue menuWidth 导致列宽塌陷、flex-wrap 把 4 个按钮压成竖排并溢出列边界。
2) 此处用更具体的选择器 + !important 恢复固定宽度,确保按钮在操作列内横向排列。 */
:deep(.avue-crud .el-table__body-wrapper .cell.avue-crud__menu) {
width: 320px !important;
overflow: hidden;
text-overflow: clip;
}
:deep(.avue-crud__menu) {
display: inline-flex !important;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: flex-start;
> .el-button,
> .el-link,
> .el-dropdown {
flex-shrink: 0;
display: inline-flex;
}
}
/* 操作列删除按钮使用危险色 */
:deep(.avue-crud__menu > .el-button.is-text.avue-crud__delBtn) {
color: var(--el-color-danger);
}
:deep(.avue-crud__menu > .el-button.is-text.avue-crud__delBtn:hover),
:deep(.avue-crud__menu > .el-button.is-text.avue-crud__delBtn:focus) {
color: var(--el-color-danger-light-3);
}
</style>
<style>
.oa-sync-dialog .dialog-title {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: 600;
}
.oa-sync-dialog .dialog-title::before {
width: 4px;
height: 18px;
margin-right: 8px;
background: #409eff;
content: '';
}
.oa-sync-body {
padding: 8px 4px 0;
}
.oa-sync-meta {
margin-top: 12px;
color: #606266;
font-size: 13px;
}
.oa-sync-stats {
display: flex;
gap: 16px;
margin-top: 16px;
}
.oa-sync-stat {
flex: 1;
padding: 12px 16px;
background: #fafafa;
border: 1px solid #eff1f7;
border-radius: 4px;
}
.oa-sync-stat__label {
display: block;
color: #909399;
font-size: 12px;
}
.oa-sync-stat__value {
display: block;
margin-top: 6px;
font-size: 22px;
font-weight: 600;
line-height: 1.2;
}
.oa-sync-stat__value--success {
color: #409eff;
}
.oa-sync-stat__value--skip {
color: #909399;
}
</style>