style(process-config): 优化流程配置页样式及结构一致性
- process-config.vue 基本信息区改用 section-card 和 el-form 组件，统一右侧固定宽 label 栅格布局 - 现行过程节点和节点设置区使用 section-card 包裹，替换原有灰色标题，增加白卡样式和卡片间距 - 删除不再使用的自定义样式 __section/__field/__field-label/__field-label--required，保留与节点表格相关样式 - 保证三个 section-card 正确闭合，编译通过，无业务逻辑变更 - master-order-detail.vue 主界面改用 section-card 代替 div 容器，提升风格统一性 - 注释部分 Element UI 弹窗表单项 margin-bottom 样式，减少样式冗余 - loading-manage.vue loading-detail 取消 flex gap，防止潜在样式冲突 - shipping-template.js 表单项 grid 栅格 span 值调整优化表单布局，使各项宽度分配更合理
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="master-detail">
|
||||
<section-card v-loading="loading" class="master-detail">
|
||||
<section v-if="master" class="detail-overview">
|
||||
<div class="detail-heading"><div><h2>多联总单详情 <span>|</span> {{ master.masterNo }}</h2><el-tag :type="statusType(master.businessStatus)">{{ statusName(master.businessStatus) }}</el-tag></div><el-button @click="$emit('back')">返回</el-button></div>
|
||||
<dl class="detail-meta"><div><dt>客户</dt><dd>{{ master.customerName || '-' }}</dd></div><div><dt>合同编号</dt><dd>{{ master.contractNo || '-' }}</dd></div><div><dt>项目</dt><dd>{{ master.projectName || '-' }}</dd></div><div><dt>货物名称</dt><dd>{{ goodsNames }}</dd></div><div><dt>货物类型</dt><dd>{{ goodsTypes }}</dd></div><div><dt>运输周期</dt><dd>{{ dateRange }}</dd></div></dl>
|
||||
@@ -23,14 +23,16 @@
|
||||
<el-table :data="master.goods || []" border><el-table-column type="index" label="序号" width="64" /><el-table-column prop="cargoName" label="货物名称" min-width="150" /><el-table-column prop="cargoType" label="货物类型" min-width="130" /><el-table-column label="数量" width="130"><template #default="{ row }">{{ quantity(row.quantity) }} {{ row.quantityUnit || '' }}</template></el-table-column><el-table-column prop="packageType" label="包装" min-width="120" /><el-table-column prop="brand" label="品牌" min-width="120" /><el-table-column prop="specification" label="规格" min-width="120" /><el-table-column prop="model" label="型号" min-width="120" /></el-table>
|
||||
<el-empty v-if="!(master.goods || []).length" description="暂无货物信息" :image-size="56" />
|
||||
</section>
|
||||
</div>
|
||||
</section-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/business/master-order';
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
||||
import SectionCard from '@/components/section-card/main.vue';
|
||||
|
||||
export default {
|
||||
components: { SectionCard },
|
||||
props: { id: [String, Number] },
|
||||
emits: ['back'],
|
||||
data() { return { loading: false, master: null, expandedSegments: {}, ArrowDown, ArrowUp }; },
|
||||
|
||||
@@ -2207,7 +2207,7 @@ export default {
|
||||
.loading-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
//gap: 8px;
|
||||
color: #303133;
|
||||
.loading-detail__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding: 4px 0 16px; }
|
||||
.loading-detail__heading { font-size: 20px; font-weight: 600; margin-right: 8px; }
|
||||
|
||||
@@ -80,106 +80,100 @@
|
||||
</template>
|
||||
|
||||
<template #basicInfo-form>
|
||||
<div class="process-config-page__section">
|
||||
<div class="dialog-section-title">基本信息</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<div class="process-config-page__field">
|
||||
<span
|
||||
class="process-config-page__field-label process-config-page__field-label--required"
|
||||
>
|
||||
配置名称
|
||||
</span>
|
||||
<el-input
|
||||
v-model="form.configName"
|
||||
:disabled="dialogReadonly"
|
||||
maxlength="100"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="process-config-page__field">
|
||||
<span
|
||||
class="process-config-page__field-label process-config-page__field-label--required"
|
||||
>
|
||||
项目
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="process-config-page__field">
|
||||
<span class="process-config-page__field-label">运输完成时限</span>
|
||||
<div class="process-config-page__finish-days">
|
||||
<span>默认</span>
|
||||
<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.defaultFinishDays"
|
||||
v-model="form.configName"
|
||||
:disabled="dialogReadonly"
|
||||
maxlength="3"
|
||||
maxlength="100"
|
||||
placeholder="请输入"
|
||||
@input="handleFinishDaysInput"
|
||||
/>
|
||||
<span>天后完成运输</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="process-config-page__field">
|
||||
<span class="process-config-page__field-label">备注</span>
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
:disabled="dialogReadonly"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</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">
|
||||
<div class="dialog-section-title">现行过程节点</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
|
||||
<el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
|
||||
</section-card>
|
||||
|
||||
<div class="dialog-section-title">节点设置</div>
|
||||
<section-card title="节点设置">
|
||||
<el-table
|
||||
class="process-config-page__node-table"
|
||||
border
|
||||
@@ -363,6 +357,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1106,32 +1101,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.process-config-page {
|
||||
&__section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__field {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__field-label {
|
||||
flex: 0 0 150px;
|
||||
line-height: 32px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
|
||||
&--required::before {
|
||||
margin-right: 4px;
|
||||
color: #f56c6c;
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
|
||||
&__node-value {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
|
||||
Reference in New Issue
Block a user