1140 lines
35 KiB
Vue
1140 lines
35 KiB
Vue
<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="userInfo.authority.includes('admin')"
|
||
@click="handleOaOrgSync"
|
||
>自动同步组织
|
||
</el-button>
|
||
</template>
|
||
<template #menu="scope">
|
||
<el-link
|
||
type="primary"
|
||
@click.stop="handleAdd(scope.row, scope.index)"
|
||
v-if="userInfo.authority.includes('admin')"
|
||
>新增子项
|
||
</el-link>
|
||
</template>
|
||
<template #deptCategory="{ row }">
|
||
<el-tag>{{ 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">
|
||
当前阶段：{{ 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,
|
||
} from '@/api/system/dept';
|
||
import { getLeaderList } from '@/api/system/user';
|
||
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, '\\$&');
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {},
|
||
leaderOptions: [],
|
||
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',
|
||
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(new Error('请先选择上级组织'));
|
||
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: 'shortName',
|
||
minWidth: 140,
|
||
order: 60,
|
||
},
|
||
{
|
||
label: '助记码',
|
||
prop: 'mnemonicCode',
|
||
minWidth: 120,
|
||
order: 50,
|
||
},
|
||
{
|
||
label: '拼音助记码',
|
||
prop: 'pinyinMnemonic',
|
||
minWidth: 140,
|
||
order: 45,
|
||
},
|
||
{
|
||
label: '组织类型',
|
||
type: 'select',
|
||
dicData: [
|
||
{ label: '一级集团', value: 1 },
|
||
{ label: '二级事业部', value: 2 },
|
||
{ label: '部门', value: 3 },
|
||
{ label: '三级分公司', value: 4 },
|
||
{ label: '物流园区', value: 5 },
|
||
{ label: '承运商', value: 6 },
|
||
],
|
||
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',
|
||
},
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '请选择上级组织',
|
||
trigger: 'click',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
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();
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo', 'permission']),
|
||
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() {
|
||
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('确定从OA先同步公司、再同步部门?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
this.startOaOrgSync();
|
||
});
|
||
},
|
||
startOaOrgSync() {
|
||
this.oaSyncLoading = true;
|
||
this.oaSyncVisible = true;
|
||
this.oaSyncRunning = true;
|
||
this.oaSyncCancelled = false;
|
||
this.oaSyncStatus = 'running';
|
||
this.oaSyncStage = '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 {
|
||
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');
|
||
});
|
||
});
|
||
},
|
||
updateDeptCategoryOptions() {
|
||
const categoryColumn = this.findColumn(this.option.column, 'deptCategory');
|
||
const parent = this.parentDept;
|
||
if (!parent) return;
|
||
let dicData = [];
|
||
if (this.isRootDept(parent)) {
|
||
dicData =
|
||
parent.deptName === '外部组织'
|
||
? [{ label: '承运商', value: 6 }]
|
||
: [{ label: '集团', value: 1 }];
|
||
} else if (Number(parent.deptCategory) === 1) {
|
||
dicData = [
|
||
{ label: '事业部', value: 2 },
|
||
{ label: '部门', value: 3 },
|
||
];
|
||
} else if ([2, 3].includes(Number(parent.deptCategory))) {
|
||
dicData = [
|
||
{ label: '分公司', value: 4 },
|
||
{ label: '物流园区', value: 5 },
|
||
{ label: '承运商', value: 6 },
|
||
];
|
||
}
|
||
categoryColumn.dicData = dicData;
|
||
if (!dicData.some(item => item.value === Number(this.form.deptCategory))) {
|
||
this.form.deptCategory = dicData[0]?.value;
|
||
}
|
||
if (Number(this.form.deptCategory) === 6) {
|
||
this.openCarrierDialog();
|
||
}
|
||
},
|
||
handleDeptCategoryChange(value) {
|
||
if (Number(value) === 6) {
|
||
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) {
|
||
const categoryMap = {
|
||
1: '集团',
|
||
2: '事业部',
|
||
3: '部门',
|
||
4: '分公司',
|
||
5: '物流园区',
|
||
6: '承运商',
|
||
};
|
||
return categoryMap[Number(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('、') : '-';
|
||
},
|
||
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.leaderId = func.join(row.leaderId);
|
||
if (Number(row.deptCategory) === 6 && !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.leaderId = func.join(row.leaderId);
|
||
if (Number(row.deptCategory) === 6 && !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;
|
||
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>
|