b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(business): 优化 process-config 弹窗及多页面基本信息布局

Browse Source 
- process-config 弹窗改为手写 el-dialog，统一与 credit-score-quantification 风格
- 弹窗内三张 section-card 堆叠，卡间间距12px，底部按钮新增保存草稿/保存并启用
- 删除原 Avue 内置 dialog 及相关表单插槽，移除无用样式，调整弹窗最大高度
- 多页面「基本信息」类分区由3列(span 8)改为4列(span 6)，包含结算、合同、船舶等多处页面
- contract-manage-change.vue 手写表单列宽全部由8改6，保留备注与分区标题整行显示
- business-crud-page.vue contract配置中基本信息分区改为4列显示，调整表单 label 宽度为150px
- temporary-credit-limit 详情弹窗加 align-center 实现上下居中，新增 computed 绑定配置开关
- temporary-credit-limit 弹窗宽度修改为96%，与其他业务页面保持一致
- ship.vue 标签宽度调整为最多6汉字宽，允许超长标签换行，改善显示效果
- common-route.vue 调整部分输入框宽度适配布局
- element-ui.scss 调整 process-config 相关弹窗样式，取消原 Avue 透明化样式，全局灰底内卡片间距统一
- 精简 process-config 相关 option 配置，去除 dialog 相关冗余属性
- 过程配置弹窗新增打开、保存、关闭等手写逻辑，支持查看、编辑不同状态，保持业务逻辑完整
- 删除 process-config 内部 avue-crud 相关操作，整体改用标准 el-dialog 和 el-form 实现
- 其他局部样式细节调整，保证表单布局和交互统一规范
This commit is contained in:
赵忠林
2026-08-21 15:40:16 +08:00
parent 051bda5b3a
commit 851379f4de
17 changed files with 485 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/option/business/process-config.js
-19
View File
@@ -21,13 +21,6 @@ export const config = {
export const option = {
...createCrudOption([
{
label: '',
prop: 'basicInfo',
formslot: true,
span: 24,
hide: true,
},
{
label: '配置名称',
prop: 'configName',
@@ -167,22 +160,10 @@ export const option = {
dicData: [],
filterable: true,
},
{
label: '',
prop: 'nodeConfigJson',
formslot: true,
span: 24,
hide: true,
},
]),
saveBtn: false,
updateBtn: false,
addBtn: false,
viewBtn: false,
editBtn: false,
delBtn: false,
dialogTop: '4vh',
dialogWidth: '96%',
dialogCustomClass: 'process-config-dialog',
menuWidth: 220,
};
src/option/business/temporary-credit-limit.js
+10 -9
View File
@@ -47,6 +47,7 @@ export const config = {
ignoreReadonlyDeleteStatus: ['draft', '草稿'],
detailButton: true,
detailButtonIgnoreDraftStatus: true,
detailAlignCenter: true,
detailSections: [
{
title: '申请信息',
@@ -142,7 +143,7 @@ export const option = {
value: 'projectName',
},
filterable: true,
span: 8,
span: 6,
minWidth: 180,
rules: textRule('项目名称', 100, true),
},
@@ -157,7 +158,7 @@ export const option = {
prop: 'projectCode',
hide: true,
disabled: true,
span: 8,
span: 6,
minWidth: 150,
rules: textRule('项目编号', 50),
},
@@ -166,7 +167,7 @@ export const option = {
prop: 'undertakeDeptName',
hide: true,
disabled: true,
span: 8,
span: 6,
minWidth: 150,
rules: textRule('承办部门', 50, true),
},
@@ -175,7 +176,7 @@ export const option = {
prop: 'projectFundLimit',
hide: true,
disabled: true,
span: 8,
span: 6,
minWidth: 200,
rules: [nonNegativeRule('项目资金使用额度')],
},
@@ -184,7 +185,7 @@ export const option = {
prop: 'usedFundLimit',
hide: true,
disabled: true,
span: 8,
span: 6,
minWidth: 220,
value: 0,
rules: [nonNegativeRule('已使用项目资金额度')],
@@ -194,7 +195,7 @@ export const option = {
prop: 'remainingFundLimit',
hide: true,
disabled: true,
span: 8,
span: 6,
minWidth: 230,
value: 0,
rules: [nonNegativeRule('剩余项目资金使用额度')],
@@ -203,7 +204,7 @@ export const option = {
label: '申请临时额度（万元）',
prop: 'applyLimit',
formslot: true,
span: 8,
span: 6,
minWidth: 180,
rules: [
{ required: true, message: '请输入申请临时额度', trigger: 'blur' },
@@ -216,7 +217,7 @@ export const option = {
type: 'date',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
span: 8,
span: 6,
minWidth: 140,
rules: [{ required: true, message: '请选择申请有效期至', trigger: 'change' }],
},
@@ -303,7 +304,7 @@ export const option = {
},
...auditColumns.map(column => ({ ...column, hide: true })),
]),
dialogWidth: 1400,
dialogWidth: '96%',
menuFixed: 'right',
menuWidth: 320,
index: false,
src/option/settlement/settlementAdjustmentForm.js
+1 -1
View File
@@ -1,6 +1,6 @@
export const settlementAdjustmentFormFields = [
{ label: '单据号', prop: 'adjustmentNo' },
{ label: '* 关联结算单号', prop: 'formalSettlementId' },
{ label: '关联结算单号', prop: 'formalSettlementId' },
{ label: '客户/客商名称', prop: 'customerName' },
{ label: '结算单类型', prop: 'settlementTypeName' },
{ label: '关联合同名称', prop: 'contractName' },
src/styles/element-ui.scss
+5 -20
View File
@@ -607,26 +607,11 @@
background: #fff;
}
// 过程配置新增/编辑弹窗：avue-form 整体白卡透明化，
// 让 <section-card> 分组白卡（基本信息 / 现行过程节点 / 节点设置）独立成卡、卡间露出灰底，
// 与 business/project-apply 表单页的分组卡片风格统一
.process-config-dialog .avue-form {
background: transparent;
box-shadow: none;
padding: 0;
}
// formslot 外层 el-form-item 默认 margin-bottom 与 section-card 自身 margin 叠加会拉大卡距，
// 归零后卡间距统一为 section-card 自身的 12px（与 project-apply 一致）
.process-config-dialog .avue-form__group > .el-col > .el-form-item {
margin-bottom: 0;
}
// 抵消全局 .avue-crud__dialog .avue-dialog__footer 的 -30px 上移
// （avue-form 已透明化，footer 若上移会压住最后一张分组卡片）
.process-config-dialog .avue-dialog__footer,
.avue-crud__dialog .process-config-dialog .avue-dialog__footer {
margin-top: 0 !important;
// 过程配置新增/编辑/查看弹窗（手写 el-dialog，参照 vehicle/credit-score-quantification）：
// 灰底弹窗体（全站 .el-dialog__body 已统一）内堆叠 <section-card> 分组白卡，
// 卡间 12px 间距由 section-card 自身 margin-bottom 保证，与项目其他弹窗风格统一
.process-config-dialog .el-dialog__body {
max-height: calc(100vh - 170px);
}
// 统一表格线条颜色
src/views/business/common-route.vue
+1 -1
View File
@@ -1012,7 +1012,7 @@ export default {
}
.el-input:first-child {
flex: 0 0 34%;
flex: 0 0 42.5%;
}
.el-button {
src/views/business/components/business-crud-page.vue
+13 -1
View File
@@ -694,7 +694,7 @@
<el-form
:model="form"
label-position="right"
label-width="auto"
label-width="150"
class="business-crud-page__task-form business-crud-page__task-form--full"
>
<div class="business-crud-page__task-row">
@@ -2506,6 +2506,7 @@
:title="isTransportPlanDetailLayout ? '' : `${config.title}详情`"
append-to-body
top="10px"
:align-center="detailAlignCenter"
:width="isTransportPlanDetailLayout ? 'calc(100% - 16px)' : '96%'"
show-close
:class="[
@@ -6239,6 +6240,9 @@ export default {
detailSections() {
return this.config.detailSections || [];
},
detailAlignCenter() {
return this.config.detailAlignCenter === true;
},
contractDetailSettlementRows() {
if (!this.isContractConfig) return [];
return [
@@ -6976,6 +6980,14 @@ export default {
});
if (current.length) groups.push(current);
if (groups.length <= 1) return option;
// 合同「基本信息」分区改为 4 列显示（分区标题列与已设整行的字段保持原样）
if (this.isContractConfig && groups[0].length) {
groups[0].forEach(col => {
if (sectionTitleProps.includes(col.prop)) return;
if (col.span === 24) return;
col.span = 6;
});
}
return {
...option,
column: groups[0],
src/views/business/contract-manage-change.vue
+14 -14
View File
@@ -5,20 +5,20 @@
<div class="dialog-section-title">基本信息</div>
<el-row :gutter="28">
<el-col :span="24"><el-form-item label="变更类型"><el-radio-group v-model="form.changeType"><el-radio label="合同信息变更" /><el-radio label="终止合同" /></el-radio-group></el-form-item></el-col>
<el-col :span="8"><el-form-item label="合同编号"><el-input v-model="form.contractNo" disabled /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="合同名称" prop="contractName"><el-input v-model="form.contractName" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="合同类型"><el-select v-model="form.contractCategory" disabled><el-option label="客户合同" value="客户合同" /><el-option label="承运商合同" value="承运商合同" /></el-select></el-form-item></el-col>
<el-col :span="8"><el-form-item label="甲方"><el-input v-model="form.partyA" disabled /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="乙方"><el-input v-model="form.partyB" disabled /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="所属项目"><el-input v-model="form.projectName" disabled /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="合同期限"><el-date-picker v-model="period" type="daterange" value-format="YYYY-MM-DD" range-separator="至" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="所属组织"><el-input v-model="form.organizationName" disabled /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="签订日期"><el-date-picker v-model="form.signDate" type="date" value-format="YYYY-MM-DD" disabled /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="合同格式"><el-select v-model="form.contractFormat"><el-option label="电子合同" value="电子合同" /><el-option label="纸质合同" value="纸质合同" /></el-select></el-form-item></el-col>
<el-col :span="8"><el-form-item label="结算方式"><el-input v-model="form.settlementMode" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="是否需要加盖法人章"><el-select v-model="form.legalSealFlag"><el-option label="是" :value="1" /><el-option label="否" :value="0" /></el-select></el-form-item></el-col>
<el-col :span="8"><el-form-item label="一式"><div class="inline-field"><el-input-number v-model="form.copyCount" :min="1" controls-position="right" /><span>份</span></div></el-form-item></el-col>
<el-col :span="8"><el-form-item label="回款账期"><el-input-number v-model="form.paymentDays" :min="0" controls-position="right" /><span class="unit">天</span></el-form-item></el-col>
<el-col :span="6"><el-form-item label="合同编号"><el-input v-model="form.contractNo" disabled /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="合同名称" prop="contractName"><el-input v-model="form.contractName" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="合同类型"><el-select v-model="form.contractCategory" disabled><el-option label="客户合同" value="客户合同" /><el-option label="承运商合同" value="承运商合同" /></el-select></el-form-item></el-col>
<el-col :span="6"><el-form-item label="甲方"><el-input v-model="form.partyA" disabled /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="乙方"><el-input v-model="form.partyB" disabled /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="所属项目"><el-input v-model="form.projectName" disabled /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="合同期限"><el-date-picker v-model="period" type="daterange" value-format="YYYY-MM-DD" range-separator="至" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="所属组织"><el-input v-model="form.organizationName" disabled /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="签订日期"><el-date-picker v-model="form.signDate" type="date" value-format="YYYY-MM-DD" disabled /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="合同格式"><el-select v-model="form.contractFormat"><el-option label="电子合同" value="电子合同" /><el-option label="纸质合同" value="纸质合同" /></el-select></el-form-item></el-col>
<el-col :span="6"><el-form-item label="结算方式"><el-input v-model="form.settlementMode" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="是否需要加盖法人章"><el-select v-model="form.legalSealFlag"><el-option label="是" :value="1" /><el-option label="否" :value="0" /></el-select></el-form-item></el-col>
<el-col :span="6"><el-form-item label="一式"><div class="inline-field"><el-input-number v-model="form.copyCount" :min="1" controls-position="right" /><span>份</span></div></el-form-item></el-col>
<el-col :span="6"><el-form-item label="回款账期"><el-input-number v-model="form.paymentDays" :min="0" controls-position="right" /><span class="unit">天</span></el-form-item></el-col>
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit /></el-form-item></el-col>
</el-row>
</section>
src/views/business/contract-manage.vue
+3
View File
@@ -31,4 +31,7 @@ export default {
white-space: normal;
line-height: 1.4;
}
.el-col {
margin-bottom: 0 !important;
}
</style>
src/views/business/process-config.vue
+358 -373
View File
@@ -8,9 +8,6 @@
v-model="form"
ref="crud"
:permission="permissionList"
:before-open="beforeOpen"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@@ -25,7 +22,7 @@
type="primary"
icon="el-icon-plus"
v-if="hasPermission('process_config_add')"
@click="$refs.crud.rowAdd()"
@click="openConfig()"
>新建过程配置
</el-button>
<el-button
@@ -46,27 +43,6 @@
</el-button>
</template>
<template #menu-form-before="{ disabled }">
<template v-if="!dialogReadonly">
<el-button
plain
:loading="disabled"
:disabled="disabled"
@click="handleProcessConfigSave('draft')"
>
保存草稿
</el-button>
<el-button
type="primary"
:loading="disabled"
:disabled="disabled"
@click="handleProcessConfigSave('enabled')"
>
保存并启用
</el-button>
</template>
</template>
<template #status="{ row }">
<el-tag :type="statusTagType(row.status)">
{{ row.statusName || displayStatus(row.status) }}
@@ -79,300 +55,18 @@
</span>
</template>
<template #basicInfo-form>
<section-card title="基本信息">
<el-form
:model="form"
label-position="right"
label-width="calc(6em + 24px)"
>
<el-row :gutter="18">
<el-col :span="6">
<el-form-item label="配置名称" required>
<el-input
v-model="form.configName"
:disabled="dialogReadonly"
maxlength="100"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目" required>
<el-select
v-model="selectedProjectId"
clearable
filterable
remote
:remote-method="loadProjectOptions"
:loading="projectLoading"
:disabled="dialogReadonly"
placeholder="请选择"
style="width: 100%"
@change="handleProjectChange"
>
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="formatProjectLabel(item)"
:value="String(item.id)"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="运输完成时限">
<div class="process-config-page__finish-days">
<span>默认</span>
<el-input
v-model="form.defaultFinishDays"
:disabled="dialogReadonly"
maxlength="3"
placeholder="请输入"
@input="handleFinishDaysInput"
/>
<span>天后完成运输</span>
</div>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
:rows="4"
:disabled="dialogReadonly"
maxlength="500"
show-word-limit
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
</template>
<template #nodeConfigJson-form>
<div class="process-config-page__custom-form">
<section-card title="现行过程节点">
<div class="process-config-page__timeline" v-if="enabledNodes.length">
<div class="process-config-page__timeline-line"></div>
<div
v-for="node in enabledNodes"
:key="node.key"
class="process-config-page__timeline-item"
>
<span class="process-config-page__timeline-dot"></span>
<div class="process-config-page__timeline-name">{{ node.name }}</div>
<div class="process-config-page__timeline-desc">
<div v-for="text in timelineDescriptions(node)" :key="text">{{ text }}</div>
</div>
</div>
</div>
<el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
</section-card>
<section-card title="节点设置">
<el-table
class="process-config-page__node-table"
border
:data="nodeRows"
:span-method="nodeSpanMethod"
>
<el-table-column label="节点设置" width="136">
<template #default="{ row, $index }">
<div class="process-config-page__node-cell">
<el-checkbox
v-model="row.enabled"
:disabled="dialogReadonly"
@change="syncNodeFields"
/>
<span class="process-config-page__node-name">{{ row.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作要求" min-width="660">
<template #default="{ row }">
<div class="process-config-page__requirements">
<template v-if="row.key === 'accept'">
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">是否确认</span>
<el-radio-group
v-model="row.confirmMode"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio label="yes">是</el-radio>
<el-radio label="no_confirm_accept">无需确认接单</el-radio>
</el-radio-group>
</div>
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">确认接单人</span>
<el-checkbox
v-model="row.confirmDriver"
:disabled="dialogReadonly || !row.enabled || row.confirmMode !== 'yes'"
@change="syncNodeFields"
>司机</el-checkbox
>
</div>
</template>
<template v-else-if="row.key === 'return'">
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">是否确认</span>
<el-radio-group
v-model="row.confirmMode"
:disabled="dialogReadonly || !row.enabled"
@change="handleReturnConfirmChange(row)"
>
<el-radio label="yes">是</el-radio>
<el-radio label="no_confirm_complete">无需确认完成</el-radio>
</el-radio-group>
</div>
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">确认完成</span>
<el-checkbox
v-model="row.confirmInternal"
:disabled="dialogReadonly || !row.enabled || row.confirmMode !== 'yes'"
@change="syncNodeFields"
>内部人员</el-checkbox
>
</div>
</template>
<template v-else>
<div class="process-config-page__require-grid">
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">是否打卡</span>
<el-radio-group
v-model="row.punch"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div class="process-config-page__require-line" v-if="row.supportCargo">
<span class="process-config-page__require-label">上传货量</span>
<el-radio-group
v-model="row.uploadCargo"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div
class="process-config-page__require-line process-config-page__require-line--wide"
v-if="row.key === 'transit'"
>
<span class="process-config-page__require-label">打卡频次，每</span>
<el-input
v-model="row.frequencyDays"
:disabled="dialogReadonly || !row.enabled || !row.punch"
maxlength="3"
@input="value => handleFrequencyInput(row, value)"
/>
<span>天打卡1次</span>
</div>
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">打卡定位</span>
<el-radio-group
v-model="row.location"
:disabled="dialogReadonly || !row.enabled || !row.punch"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div class="process-config-page__require-line" v-if="row.supportCargo">
<span class="process-config-page__require-label">上传货量类型</span>
<el-checkbox-group
v-model="row.cargoTypes"
:disabled="dialogReadonly || !row.enabled || !row.uploadCargo"
@change="syncNodeFields"
>
<el-checkbox label="重量">重量</el-checkbox>
<el-checkbox label="体积">体积</el-checkbox>
<el-checkbox label="数量">数量</el-checkbox>
</el-checkbox-group>
</div>
<div
class="process-config-page__require-line process-config-page__require-line--wide"
v-if="row.key === 'transit'"
>
<span class="process-config-page__require-label">打卡时段</span>
<el-time-picker
v-model="row.timeStart"
:disabled="dialogReadonly || !row.enabled || !row.punch"
format="HH:mm"
value-format="HH:mm"
placeholder="开始"
/>
<span>-</span>
<el-time-picker
v-model="row.timeEnd"
:disabled="dialogReadonly || !row.enabled || !row.punch"
format="HH:mm"
value-format="HH:mm"
placeholder="结束"
/>
</div>
</div>
</template>
</div>
</template>
</el-table-column>
<el-table-column label="附件要求" min-width="320">
<template #default="{ row }">
<div class="process-config-page__attachments" v-if="row.supportVoucher">
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">上传凭证</span>
<el-radio-group
v-model="row.uploadVoucher"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div class="process-config-page__require-line">
<span class="process-config-page__require-label">凭证类型</span>
<el-checkbox-group
v-model="row.voucherTypes"
:disabled="dialogReadonly || !row.enabled || !row.uploadVoucher"
@change="syncNodeFields"
>
<el-checkbox v-for="item in row.voucherOptions" :key="item" :label="item">
{{ item }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
</el-table-column>
</el-table>
</section-card>
</div>
</template>
<template #menu="{ row, index }">
<el-link
type="primary"
v-if="hasPermission('process_config_view')"
@click="$refs.crud.rowView(row, index)"
@click="openConfig(row, true)"
>
查看
</el-link>
<el-link
type="primary"
v-if="canEdit(row)"
@click="$refs.crud.rowEdit(row, index)"
@click="openConfig(row)"
>
编辑
</el-link>
@@ -407,6 +101,311 @@
</template>
</avue-crud>
<el-dialog
:title="dialogReadonly ? '查看过程配置' : form.id ? '编辑过程配置' : '新建过程配置'"
append-to-body
v-model="configBox"
width="96%"
top="4vh"
class="process-config-dialog"
:close-on-click-modal="false"
@closed="handleDialogClosed"
>
<div class="process-config-form">
<section-card title="基本信息">
<el-form
:model="form"
label-position="right"
label-width="calc(6em + 24px)"
:disabled="dialogReadonly"
>
<el-row :gutter="18">
<el-col :span="6">
<el-form-item label="配置名称" required>
<el-input
v-model="form.configName"
maxlength="100"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目" required>
<el-select
v-model="selectedProjectId"
clearable
filterable
remote
:remote-method="loadProjectOptions"
:loading="projectLoading"
placeholder="请选择"
style="width: 100%"
@change="handleProjectChange"
>
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="formatProjectLabel(item)"
:value="String(item.id)"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="运输完成时限">
<div class="process-config-form__finish-days">
<span>默认</span>
<el-input
v-model="form.defaultFinishDays"
maxlength="3"
placeholder="请输入"
@input="handleFinishDaysInput"
/>
<span>天后完成运输</span>
</div>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
:rows="4"
maxlength="500"
show-word-limit
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
<section-card title="现行过程节点">
<div class="process-config-form__timeline" v-if="enabledNodes.length">
<div class="process-config-form__timeline-line"></div>
<div
v-for="node in enabledNodes"
:key="node.key"
class="process-config-form__timeline-item"
>
<span class="process-config-form__timeline-dot"></span>
<div class="process-config-form__timeline-name">{{ node.name }}</div>
<div class="process-config-form__timeline-desc">
<div v-for="text in timelineDescriptions(node)" :key="text">{{ text }}</div>
</div>
</div>
</div>
<el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
</section-card>
<section-card title="节点设置">
<el-table
class="process-config-form__node-table"
border
:data="nodeRows"
:span-method="nodeSpanMethod"
>
<el-table-column label="节点设置" width="136">
<template #default="{ row }">
<div class="process-config-form__node-cell">
<el-checkbox
v-model="row.enabled"
:disabled="dialogReadonly"
@change="syncNodeFields"
/>
<span class="process-config-form__node-name">{{ row.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作要求" min-width="660">
<template #default="{ row }">
<div class="process-config-form__requirements">
<template v-if="row.key === 'accept'">
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">是否确认</span>
<el-radio-group
v-model="row.confirmMode"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio label="yes">是</el-radio>
<el-radio label="no_confirm_accept">无需确认接单</el-radio>
</el-radio-group>
</div>
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">确认接单人</span>
<el-checkbox
v-model="row.confirmDriver"
:disabled="dialogReadonly || !row.enabled || row.confirmMode !== 'yes'"
@change="syncNodeFields"
>司机</el-checkbox
>
</div>
</template>
<template v-else-if="row.key === 'return'">
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">是否确认</span>
<el-radio-group
v-model="row.confirmMode"
:disabled="dialogReadonly || !row.enabled"
@change="handleReturnConfirmChange(row)"
>
<el-radio label="yes">是</el-radio>
<el-radio label="no_confirm_complete">无需确认完成</el-radio>
</el-radio-group>
</div>
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">确认完成</span>
<el-checkbox
v-model="row.confirmInternal"
:disabled="dialogReadonly || !row.enabled || row.confirmMode !== 'yes'"
@change="syncNodeFields"
>内部人员</el-checkbox
>
</div>
</template>
<template v-else>
<div class="process-config-form__require-grid">
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">是否打卡</span>
<el-radio-group
v-model="row.punch"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div class="process-config-form__require-line" v-if="row.supportCargo">
<span class="process-config-form__require-label">上传货量</span>
<el-radio-group
v-model="row.uploadCargo"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div
class="process-config-form__require-line process-config-form__require-line--wide"
v-if="row.key === 'transit'"
>
<span class="process-config-form__require-label">打卡频次，每</span>
<el-input
v-model="row.frequencyDays"
:disabled="dialogReadonly || !row.enabled || !row.punch"
maxlength="3"
@input="value => handleFrequencyInput(row, value)"
/>
<span>天打卡1次</span>
</div>
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">打卡定位</span>
<el-radio-group
v-model="row.location"
:disabled="dialogReadonly || !row.enabled || !row.punch"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div class="process-config-form__require-line" v-if="row.supportCargo">
<span class="process-config-form__require-label">上传货量类型</span>
<el-checkbox-group
v-model="row.cargoTypes"
:disabled="dialogReadonly || !row.enabled || !row.uploadCargo"
@change="syncNodeFields"
>
<el-checkbox label="重量">重量</el-checkbox>
<el-checkbox label="体积">体积</el-checkbox>
<el-checkbox label="数量">数量</el-checkbox>
</el-checkbox-group>
</div>
<div
class="process-config-form__require-line process-config-form__require-line--wide"
v-if="row.key === 'transit'"
>
<span class="process-config-form__require-label">打卡时段</span>
<el-time-picker
v-model="row.timeStart"
:disabled="dialogReadonly || !row.enabled || !row.punch"
format="HH:mm"
value-format="HH:mm"
placeholder="开始"
/>
<span>-</span>
<el-time-picker
v-model="row.timeEnd"
:disabled="dialogReadonly || !row.enabled || !row.punch"
format="HH:mm"
value-format="HH:mm"
placeholder="结束"
/>
</div>
</div>
</template>
</div>
</template>
</el-table-column>
<el-table-column label="附件要求" min-width="320">
<template #default="{ row }">
<div class="process-config-form__attachments" v-if="row.supportVoucher">
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">上传凭证</span>
<el-radio-group
v-model="row.uploadVoucher"
:disabled="dialogReadonly || !row.enabled"
@change="syncNodeFields"
>
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</div>
<div class="process-config-form__require-line">
<span class="process-config-form__require-label">凭证类型</span>
<el-checkbox-group
v-model="row.voucherTypes"
:disabled="dialogReadonly || !row.enabled || !row.uploadVoucher"
@change="syncNodeFields"
>
<el-checkbox v-for="item in row.voucherOptions" :key="item" :label="item">
{{ item }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
</el-table-column>
</el-table>
</section-card>
</div>
<template #footer>
<el-button @click="configBox = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
<el-button
plain
:loading="submitting"
v-if="!dialogReadonly"
@click="submitConfig('draft')"
>
保存草稿
</el-button>
<el-button
type="primary"
:loading="submitting"
v-if="!dialogReadonly"
@click="submitConfig('enabled')"
>
保存并启用
</el-button>
</template>
</el-dialog>
<empty-pagination
:page="page"
@size-change="sizeChange"
@@ -507,6 +506,8 @@ export default {
loading: true,
data: [],
dialogReadonly: false,
configBox: false,
submitting: false,
projectOptions: [],
projectLoading: false,
selectedProjectId: '',
@@ -518,7 +519,6 @@ export default {
total: 0,
},
selectionList: [],
submitStatus: 1,
};
},
computed: {
@@ -880,11 +880,6 @@ export default {
}
return true;
},
stopSubmitLoading(loading) {
if (typeof loading === 'function') {
loading();
}
},
needsDuplicateVoucherConfirm() {
const signNode = this.nodeRows.find(item => item.key === 'sign');
const returnNode = this.nodeRows.find(item => item.key === 'return');
@@ -914,14 +909,45 @@ export default {
}
);
},
submitRow(row, done, loading, status = this.submitStatus) {
this.submitStatus = 1;
this.syncNodeFields();
const submitRow = this.normalizeRow({ ...row, status });
if (!this.validateRow(submitRow)) {
this.stopSubmitLoading(loading);
openConfig(row, readonly = false) {
this.dialogReadonly = readonly;
if (!row || !row.id) {
this.form = {
configName: '',
projectIds: '',
projectNames: '',
defaultFinishDays: '',
remark: '',
status: 0,
};
this.selectedProjectId = '';
this.resetNodeRows();
this.configBox = true;
return;
}
api.getDetail(row.id).then(res => {
this.form = res.data.data || {};
this.selectedProjectId = this.form.projectIds ? String(this.form.projectIds) : '';
this.ensureSelectedProjectOption();
this.parseNodeConfig(this.form);
this.configBox = true;
});
},
handleDialogClosed() {
this.submitting = false;
this.dialogReadonly = false;
},
submitConfig(mode) {
if (this.submitting) return;
this.syncNodeFields();
const submitRow = this.normalizeRow({
...this.form,
status: mode === 'draft' ? 2 : 1,
});
if (!this.validateRow(submitRow)) {
return;
}
this.submitting = true;
this.checkEnabledProjectBeforeSubmit(submitRow)
.then(exists => {
if (exists) {
@@ -932,9 +958,9 @@ export default {
.then(() => this.confirmDuplicateVoucher())
.then(() => api.submit(submitRow))
.then(() => {
this.configBox = false;
this.onLoad(this.page);
this.$message({ type: 'success', message: '操作成功!' });
done();
})
.catch(error => {
if (
@@ -944,21 +970,11 @@ export default {
) {
window.console.log(error);
}
this.stopSubmitLoading(loading);
})
.finally(() => {
this.submitting = false;
});
},
rowSave(row, done, loading) {
this.submitRow(row, done, loading);
},
rowUpdate(row, index, done, loading) {
this.submitRow(row, done, loading);
},
handleProcessConfigSave(mode) {
this.submitStatus = mode === 'draft' ? 2 : 1;
if (this.$refs.crud && typeof this.$refs.crud.rowSave === 'function') {
this.$refs.crud.rowSave();
}
},
rowDel(row) {
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
@@ -1001,35 +1017,6 @@ export default {
}
this.selectionClear();
},
beforeOpen(done, type) {
this.dialogReadonly = type === 'view';
this.submitStatus = 1;
if (type === 'add') {
this.form = {
configName: '',
projectIds: '',
projectNames: '',
defaultFinishDays: '',
remark: '',
status: 0,
};
this.selectedProjectId = '';
this.resetNodeRows();
done();
return;
}
if (['edit', 'view'].includes(type)) {
api.getDetail(this.form.id).then(res => {
this.form = res.data.data || {};
this.selectedProjectId = this.form.projectIds ? String(this.form.projectIds) : '';
this.ensureSelectedProjectOption();
this.parseNodeConfig(this.form);
done();
});
return;
}
done();
},
searchReset() {
this.query = {};
this.applyDefaultDeptSearch();
@@ -1164,6 +1151,13 @@ export default {
word-break: break-all;
}
:deep(.avue-crud__header) {
margin-top: 12px;
background: transparent;
}
}
.process-config-form {
&__finish-days {
display: flex;
align-items: center;
@@ -1174,10 +1168,6 @@ export default {
}
}
&__custom-form {
width: 100%;
}
&__timeline {
position: relative;
display: flex;
@@ -1285,11 +1275,6 @@ export default {
text-align: right;
}
:deep(.avue-crud__header) {
margin-top: 12px;
background: transparent;
}
:deep(.el-table) {
--el-table-border-color: #eff1f7;
}
src/views/business/project-apply.vue
+9 -2
View File
@@ -106,7 +106,7 @@
:model="form"
:rules="formRules"
label-position="right"
label-width="auto"
label-width="150"
class="project-apply-form"
:disabled="dialogReadonly"
>
@@ -1964,7 +1964,7 @@ export default {
&__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 24px;
row-gap: 0;
margin-bottom: 12px;
@@ -1972,6 +1972,13 @@ export default {
border-radius: 0 0 6px 6px;
padding: 14px 16px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
// label 固定宽度：可容纳 6 个汉字，超出自动换行（覆盖全局 min-width:160px 与 auto 行内宽度）
:deep(.el-form-item__label) {
width: 108px !important;
min-width: 0 !important;
white-space: normal;
}
}
&__picker-icon {
src/views/business/voucher-manage.vue
+2 -2
View File
@@ -364,7 +364,7 @@
:before-close="beforeProgressDialogClose"
@opened="loadProgress"
>
<section class="voucher-manage-page__progress-search">
<section-card class="voucher-manage-page__progress-search">
<el-form :model="progressQuery" label-position="right" label-width="160px"
><div class="voucher-manage-page__search-grid">
<el-form-item label="凭证批次号"
@@ -391,7 +391,7 @@
</div>
</div></el-form
>
</section>
</section-card>
<el-table :data="progressRows" border class="voucher-manage-page__table"
><el-table-column type="selection" width="52" /><el-table-column
type="index"
src/views/settlement/components/pre-settlement-editor.vue
+1 -1
View File
@@ -20,7 +20,7 @@
class="pre-settlement-editor__form"
>
<el-row :gutter="24">
<el-col v-for="field in formFields" :key="field.prop" :span="field.span || 8">
<el-col v-for="field in formFields" :key="field.prop" :span="field.span || 6">
<el-form-item :label="field.label" :prop="field.prop">
<el-select
v-if="field.type === 'contract'"
src/views/settlement/components/settlement-adjustment-editor.vue
+1 -1
View File
@@ -10,7 +10,7 @@
label-width="auto"
>
<el-row :gutter="24">
<el-col v-for="field in fields" :key="field.prop" :span="8"
<el-col v-for="field in fields" :key="field.prop" :span="6"
><el-form-item :label="field.label" :prop="field.prop"
><el-select
v-if="field.prop === 'formalSettlementId' && editable"
src/views/settlement/components/transport-reconciliation-editor.vue
+1 -1
View File
@@ -10,7 +10,7 @@
label-width="auto"
>
<el-row :gutter="24">
<el-col v-for="field in formFields" :key="field.prop" :span="8">
<el-col v-for="field in formFields" :key="field.prop" :span="6">
<el-form-item :label="field.label" :prop="field.prop">
<el-input
v-if="field.prop === 'formalSettlementNo' && editable"
src/views/transportCapacity/ship.vue
+17 -11
View File
@@ -137,13 +137,13 @@
:model="shipForm"
:rules="formRules"
label-position="right"
label-width="auto"
label-width="100"
:disabled="readonly"
class="ship-form archive-form"
>
<section-card title="基础船舶信息">
<el-row :gutter="18">
<el-col :span="8">
<el-col :span="6">
<el-form-item label="船舶所属组织" prop="organizationName">
<el-select
v-model="shipForm.organizationName"
@@ -160,12 +160,12 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="船名" prop="shipName">
<el-input v-model="shipForm.shipName" maxlength="20" show-word-limit />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="安放龙骨日期/建造完工日期" prop="keelLayingDate">
<div class="date-range-inline">
<el-date-picker
@@ -186,7 +186,7 @@
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<el-col :span="6">
<el-form-item label="总长" prop="totalLength">
<el-input
v-model="shipForm.totalLength"
@@ -196,7 +196,7 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="船宽" prop="shipWidth">
<el-input
v-model="shipForm.shipWidth"
@@ -206,7 +206,7 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="型深" prop="moldedDepth">
<el-input
v-model="shipForm.moldedDepth"
@@ -218,7 +218,7 @@
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<el-col :span="6">
<el-form-item label="最大船高" prop="maxShipHeight">
<el-input
v-model="shipForm.maxShipHeight"
@@ -228,7 +228,7 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="空载吃水" prop="lightDraft">
<el-input
v-model="shipForm.lightDraft"
@@ -238,7 +238,7 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="满载吃水" prop="fullLoadDraft">
<el-input
v-model="shipForm.fullLoadDraft"
@@ -250,7 +250,7 @@
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<el-col :span="6">
<el-form-item label="航区" prop="navigationArea">
<div class="navigation-area-field">
<el-select v-model="shipForm.navigationArea" placeholder="请选择">
@@ -1226,6 +1226,12 @@ export default {
:deep(.el-input-number) {
width: 100%;
}
// label 固定宽度：可容纳 6 个汉字，超出自动换行
:deep(.el-form-item__label) {
white-space: normal;
line-height: 20px;
}
}
.date-range-inline {
src/views/vehicle/customer-archive.vue
+3 -3
View File
@@ -1079,7 +1079,7 @@
ref="scoreForm"
:model="currentScore"
label-position="right"
label-width="auto"
label-width="150"
:disabled="readonly"
class="score-detail-form"
>
@@ -4416,8 +4416,8 @@ export default {
flex-wrap: nowrap;
:deep(.el-date-editor) {
flex: 0 0 150px;
width: 150px;
flex: 0 0 140px;
width: 140px;
min-width: 0;
}