yxk-20260513-党委会流程表单
优化样式,尽量一页显示所有内容
This commit is contained in:
@@ -4,20 +4,26 @@
|
||||
<a-form class="main-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :model="mainForm">
|
||||
<div class="base-info-header section-toolbar">
|
||||
<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'" />
|
||||
{{ showBaseInfoDetail ? '收起基础信息' : '展开全部信息' }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="事项名称" name="title" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
|
||||
<a-row class="base-info-row" :gutter="[12, 4]">
|
||||
<a-col :xs="24" :md="9">
|
||||
<a-form-item label="事项名称" name="title" :labelCol="compactLabelCol" :wrapperCol="compactWrapperCol">
|
||||
<a-input v-model:value="mainForm.title" :disabled="mainDisabled" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="会议决议" name="content" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
|
||||
<a-textarea v-model:value="mainForm.content" :rows="3" :disabled="mainDisabled" allow-clear />
|
||||
<a-col :xs="24" :md="15">
|
||||
<a-form-item label="会议决议" name="content" :labelCol="compactLabelCol" :wrapperCol="compactWrapperCol">
|
||||
<a-textarea v-model:value="mainForm.content" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="mainDisabled" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<template v-if="showBaseInfoDetail">
|
||||
@@ -74,14 +80,11 @@
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<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-col>
|
||||
</template>
|
||||
</a-row>
|
||||
<div v-if="!mainDisabled" class="main-actions">
|
||||
<a-button type="primary" :loading="savingMain" @click="submitForm">保存</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
<a-divider />
|
||||
@@ -197,6 +200,8 @@
|
||||
const wrapperCol = { xs: { span: 24 }, sm: { span: 17 } };
|
||||
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
|
||||
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 feedbackModalRef = ref();
|
||||
@@ -453,7 +458,7 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bg-partymatter-bpm-form {
|
||||
padding: 12px 16px 20px;
|
||||
padding: 8px 12px 14px;
|
||||
}
|
||||
|
||||
.main-form {
|
||||
@@ -461,21 +466,21 @@
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid #1677ff;
|
||||
color: #1f2937;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.section-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 8px;
|
||||
padding: 6px 10px;
|
||||
background: #f6fbff;
|
||||
border: 1px solid #d6e8ff;
|
||||
border-radius: 6px;
|
||||
@@ -484,23 +489,55 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.section-action-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 112px;
|
||||
min-width: 58px;
|
||||
justify-content: center;
|
||||
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 {
|
||||
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 {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.feedback-add-button {
|
||||
min-width: 104px;
|
||||
@@ -508,7 +545,7 @@
|
||||
}
|
||||
|
||||
.process-variable-form {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sub-approve-user-row {
|
||||
@@ -521,11 +558,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.main-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 1px;
|
||||
:deep(.ant-divider-horizontal) {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.feedback-attachment-list {
|
||||
|
||||
Reference in New Issue
Block a user