yxk-20260513-党委会流程表单

优化样式,尽量一页显示所有内容
This commit is contained in:
ye1023
2026-05-13 16:06:07 +08:00
parent 6314b7eb35
commit 4d8e70973b
@@ -4,20 +4,26 @@
<a-form class="main-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :model="mainForm"> <a-form class="main-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :model="mainForm">
<div class="base-info-header section-toolbar"> <div class="base-info-header section-toolbar">
<div class="section-title">基础信息</div> <div class="section-title">基础信息</div>
<a-button class="section-action-button" :type="showBaseInfoDetail ? 'default' : 'primary'" @click="showBaseInfoDetail = !showBaseInfoDetail"> <a-space class="section-actions">
<a-button v-if="!mainDisabled" class="base-save-button" type="link" size="small" :loading="savingMain" @click="submitForm">
<Icon icon="ant-design:save-outlined" />
保存
</a-button>
<a-button class="section-action-button" :type="showBaseInfoDetail ? 'default' : 'link'" size="small" @click="showBaseInfoDetail = !showBaseInfoDetail">
<Icon :icon="showBaseInfoDetail ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> <Icon :icon="showBaseInfoDetail ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
{{ showBaseInfoDetail ? '收起基础信息' : '展开全部信息' }} {{ showBaseInfoDetail ? '收起基础信息' : '展开全部信息' }}
</a-button> </a-button>
</a-space>
</div> </div>
<a-row :gutter="16"> <a-row class="base-info-row" :gutter="[12, 4]">
<a-col :span="24"> <a-col :xs="24" :md="9">
<a-form-item label="事项名称" name="title" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol"> <a-form-item label="事项名称" name="title" :labelCol="compactLabelCol" :wrapperCol="compactWrapperCol">
<a-input v-model:value="mainForm.title" :disabled="mainDisabled" allow-clear /> <a-input v-model:value="mainForm.title" :disabled="mainDisabled" allow-clear />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :xs="24" :md="15">
<a-form-item label="会议决议" name="content" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol"> <a-form-item label="会议决议" name="content" :labelCol="compactLabelCol" :wrapperCol="compactWrapperCol">
<a-textarea v-model:value="mainForm.content" :rows="3" :disabled="mainDisabled" allow-clear /> <a-textarea v-model:value="mainForm.content" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="mainDisabled" allow-clear />
</a-form-item> </a-form-item>
</a-col> </a-col>
<template v-if="showBaseInfoDetail"> <template v-if="showBaseInfoDetail">
@@ -74,14 +80,11 @@
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="实际执行情况" name="actualExect" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol"> <a-form-item label="实际执行情况" name="actualExect" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="mainForm.actualExect" :rows="3" :disabled="mainDisabled" allow-clear /> <a-textarea v-model:value="mainForm.actualExect" :auto-size="{ minRows: 1, maxRows: 2 }" :disabled="mainDisabled" allow-clear />
</a-form-item> </a-form-item>
</a-col> </a-col>
</template> </template>
</a-row> </a-row>
<div v-if="!mainDisabled" class="main-actions">
<a-button type="primary" :loading="savingMain" @click="submitForm">保存</a-button>
</div>
</a-form> </a-form>
<a-divider /> <a-divider />
@@ -197,6 +200,8 @@
const wrapperCol = { xs: { span: 24 }, sm: { span: 17 } }; const wrapperCol = { xs: { span: 24 }, sm: { span: 17 } };
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } }; const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } }; const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } };
const compactLabelCol = { xs: { span: 24 }, sm: { span: 5 } };
const compactWrapperCol = { xs: { span: 24 }, sm: { span: 19 } };
const wideActionWrapperCol = { xs: { span: 24 }, sm: { span: 21, offset: 3 } }; const wideActionWrapperCol = { xs: { span: 24 }, sm: { span: 21, offset: 3 } };
const feedbackModalRef = ref(); const feedbackModalRef = ref();
@@ -453,7 +458,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.bg-partymatter-bpm-form { .bg-partymatter-bpm-form {
padding: 12px 16px 20px; padding: 8px 12px 14px;
} }
.main-form { .main-form {
@@ -461,21 +466,21 @@
} }
.section-title { .section-title {
margin-bottom: 12px; margin-bottom: 8px;
padding-left: 8px; padding-left: 8px;
border-left: 3px solid #1677ff; border-left: 3px solid #1677ff;
color: #1f2937; color: #1f2937;
font-size: 15px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 18px; line-height: 16px;
} }
.section-toolbar { .section-toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 12px; margin-bottom: 8px;
padding: 10px 12px; padding: 6px 10px;
background: #f6fbff; background: #f6fbff;
border: 1px solid #d6e8ff; border: 1px solid #d6e8ff;
border-radius: 6px; border-radius: 6px;
@@ -484,23 +489,55 @@
margin-bottom: 0; margin-bottom: 0;
} }
.section-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.section-action-button { .section-action-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
min-width: 112px; min-width: 58px;
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 500;
box-shadow: 0 2px 6px rgba(22, 119, 255, 0.14); box-shadow: none;
}
.base-save-button {
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 6px;
color: #64748b;
font-weight: 400;
} }
} }
.base-info-header { .base-info-header {
margin-top: 2px; margin-top: 0;
}
.base-info-row {
:deep(.ant-form-item) {
margin-bottom: 6px;
}
:deep(.ant-form-item-label) {
padding-bottom: 0;
}
:deep(.ant-input),
:deep(.ant-picker),
:deep(.ant-select-selector) {
min-height: 30px;
}
} }
.feedback-header { .feedback-header {
margin-bottom: 12px; margin-bottom: 8px;
.feedback-add-button { .feedback-add-button {
min-width: 104px; min-width: 104px;
@@ -508,7 +545,7 @@
} }
.process-variable-form { .process-variable-form {
margin-bottom: 12px; margin-bottom: 8px;
} }
.sub-approve-user-row { .sub-approve-user-row {
@@ -521,11 +558,8 @@
} }
} }
.main-actions { :deep(.ant-divider-horizontal) {
display: flex; margin: 10px 0;
justify-content: center;
gap: 12px;
margin-top: 1px;
} }
.feedback-attachment-list { .feedback-attachment-list {