xiaoy
/
contract-business-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成合同配置部分前端界面

Browse Source
master
lynn 8 months ago
parent fc70fe78e8
commit 1baa5529bf
3 changed files with 677 additions and 114 deletions
Show Stats Download Patch File Download Diff File

7
package.json
Unescape View File

@ -17,15 +17,22 @@
"dependencies": {
"axios": "0.18.1",
"core-js": "3.6.5",
"docx": "^9.4.1",
"docx-parser": "^0.2.1",
"docx2html": "^1.3.2",
"docxtemplater": "^3.61.1",
"element-ui": "2.13.2",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"js-cookie": "2.2.0",
"jszip": "^3.10.1",
"less": "^3.13.1",
"mammoth": "^1.9.0",
"moment": "^2.29.4",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"pizzip": "^3.1.8",
"print-js": "^1.6.0",
"view-design": "^4.7.0",
"vue": "2.6.10",

153
src/views/businessConfig/AddPayForm.vue
Unescape View File

@ -7,25 +7,36 @@
<!-- 左侧面板 -->
<div class="left-panel">
<!-- 预览区 -->
<div>
<div>
<div class="panel-header">
<h5 class="panel-title">预览区</h5>
<div class="action-buttons">
<el-button size="small" @click="handleRefresh">刷新</el-button>
</div>
</div>
<div class="preview-container" v-html="previewContent"></div>
</div>
</div>
<div class="preview-container" v-if="formatType === 'html'" v-html="previewContent"></div>
<div class="preview-container" v-else>
<iframe
v-if="docxUrl"
:src="docxUrl"
frameborder="0"
style="width: 100%; height: 100%;"
></iframe>
<div v-else class="no-preview">
请上传文档进行预览
</div>
</div>
</div>
<!-- 代码预览区 -->
<div>
<div>
<div class="panel-header">
<h5 class="panel-title">代码预览区</h5>
<div class="action-buttons">
<el-select v-model="formatType" size="small" style="width: 120px">
<el-option label="HTML" value="html"></el-option>
<el-option label="DOCX" value="docx"></el-option>
</el-select>
<el-option label="HTML" value="html"></el-option>
<el-option label="DOCX" value="docx"></el-option>
</el-select>
<el-button
size="small"
v-if="formatType === 'docx'"
@ -42,15 +53,15 @@
class="code-editor"
></el-input>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧面板 -->
<div class="right-panel">
<div class="field-config-container">
<div class="panel-header">
<h5 class="panel-title">字段配置</h5>
</div>
</div>
<div class="field-list">
<div
v-for="field in fieldList"
@ -129,6 +140,8 @@
</template>
<script>
import mammoth from 'mammoth';
export default {
name: 'AddPayForm',
data() {
@ -769,6 +782,8 @@ export default {
fieldList: [],
previewContent: '',
fieldMetadata: {},
docxContent: '',
docxUrl: ''
}
},
mounted() {
@ -829,7 +844,68 @@ export default {
this.previewContent = processedContent;
},
handleUpload() {
// 实现文件上传的逻辑
// 创建文件输入元素
const input = document.createElement('input');
input.type = 'file';
input.accept = '.docx';
// 监听文件选择事件
input.onchange = async (e) => {
const file = e.target.files[0];
if (file) {
// 检查文件类型
if (!file.name.endsWith('.docx')) {
this.$message.error('请选择docx格式的文件');
return;
}
try {
// 创建临时URL
const blobUrl = URL.createObjectURL(file);
// 使用 Microsoft Office Online Viewer
this.docxUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(blobUrl)}`;
// 清空代码预览区
this.codeContent = '';
// 将文件转换为ArrayBuffer
const arrayBuffer = await this.readFileAsArrayBuffer(file);
// 使用mammoth转换docx为HTML，用于提取变量
const result = await mammoth.convertToHtml({
arrayBuffer,
transformDocument: (document) => {
return document;
}
});
// 提取占位变量
const variables = this.extractVariables(result.value);
// 显示提取的HTML内容
this.codeContent = result.value;
// 更新字段元数据
this.updateFieldMetadata(variables);
} catch (error) {
console.error('处理文档失败:', error);
this.$message.error('处理文档失败，请重试');
}
}
};
// 触发文件选择对话框
input.click();
},
readFileAsArrayBuffer(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => resolve(event.target.result);
reader.onerror = (error) => reject(error);
reader.readAsArrayBuffer(file);
});
},
handleEditField(field) {
this.editForm = { ...field };
@ -902,6 +978,32 @@ export default {
showDrawerOnly() {
this.showEditDrawer = true;
console.log('尝试只打开抽屉');
},
extractVariables(text) {
// 使用更宽松的正则表达式匹配占位变量
const regex = /\{\{([^}]+)\}\}/g;
const matches = text.matchAll(regex);
const variables = new Set();
for (const match of matches) {
// 确保匹配到的是有效的变量名
const variable = match[1].trim();
if (variable && !variable.includes('<') && !variable.includes('>')) {
variables.add(variable);
}
}
// 添加调试信息
console.log('原始文本:', text);
console.log('提取到的变量:', Array.from(variables));
return Array.from(variables);
}
},
// 在组件销毁时释放URL
beforeDestroy() {
if (this.docxUrl) {
URL.revokeObjectURL(this.docxUrl);
}
}
}
@ -972,11 +1074,27 @@ export default {
padding: 20px;
display: flex;
flex-direction: column;
height: calc(100vh - 180px);
overflow: hidden;
}
.field-list {
flex: 1;
overflow-y: auto;
padding-right: 10px;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background-color: #c0c4cc;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background-color: #f5f7fa;
}
}
.field-item {
@ -1087,6 +1205,15 @@ export default {
line-height: 1.5;
}
}
.preview-container {
height: 300px;
border: 1px solid #dee2e6;
padding: 20px;
overflow-y: auto;
margin-bottom: 20px;
background: white;
}
</style>

631
src/views/businessConfig/contractConfig.vue
Unescape View File

@ -1,33 +1,24 @@
<template>
<div ref="contractList" style="padding: 0 20px;">
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="支付表格配置">
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="合同分类配置">
<div slot="content"></div>
<slot>
<!-- 搜索区域 -->
<div class="search-wrapper">
<div class="selects">
<div>
<span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
<el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
</div>
<div>
<span style="padding: 0 6px;word-break: keep-all;">状态</span>
<el-select v-model="searchForm.status" placeholder="所有状态" style="width: 180px">
<el-option label="所有状态" value=""></el-option>
<el-option label="草稿" value="draft"></el-option>
<el-option label="已发布" value="published"></el-option>
<el-option label="已禁用" value="disabled"></el-option>
<span style="padding: 0 6px;word-break: keep-all;">事务类型</span>
<el-select v-model="searchForm.category" placeholder="所有类型" style="width: 180px">
<el-option label="所有类型" value=""></el-option>
<el-option label="项目采购类" value="project"></el-option>
<el-option label="事务类" value="affair"></el-option>
<el-option label="报销类" value="reimbursement"></el-option>
</el-select>
</div>
<div>
<span style="padding: 0 6px;word-break: keep-all;">类型</span>
<el-select v-model="searchForm.type" placeholder="所有类型" style="width: 180px">
<el-option label="所有类型" value=""></el-option>
<el-option label="HTML" value="html"></el-option>
<el-option label="DOCX" value="docx"></el-option>
</el-select>
<span style="padding: 0 6px;word-break: keep-all;">合同类型</span>
<el-input v-model="searchForm.contractType" placeholder="请输入合同类型" style="width: 180px" />
</div>
<el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
@ -46,29 +37,65 @@
<!-- 表格区域 -->
<div class="table-container">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="表格名称"></el-table-column>
<el-table-column prop="type" label="类型"></el-table-column>
<el-table-column label="状态">
<template #default="scope">
<el-tag :type="getStatusType(scope.row.status)" effect="plain">
{{ getStatusText(scope.row.status) }}
</el-tag>
</template>
<el-table-column prop="index" label="序号" width="80"></el-table-column>
<el-table-column prop="category" label="事务类型"></el-table-column>
<el-table-column prop="contractType" label="合同类型"></el-table-column>
<el-table-column label="表单内容">
<el-table-column prop="projectName" label="项目名称" width="100">
<template #default="scope">
<span :class="{'check-mark': scope.row.projectName}">√</span>
</template>
</el-table-column>
<el-table-column prop="projectType" label="项目类型" width="100">
<template #default="scope">
<span :class="{'check-mark': scope.row.projectType}">√</span>
</template>
</el-table-column>
<el-table-column prop="purchaseForm" label="采购形式" width="120"></el-table-column>
<el-table-column prop="purchaseMethod" label="采购方式" width="120"></el-table-column>
<el-table-column prop="budgetPrice" label="预算价" width="100">
<template #default="scope">
<span :class="{'check-mark': scope.row.budgetPrice}">√</span>
</template>
</el-table-column>
<el-table-column prop="fundChannel" label="资金渠道" width="100">
<template #default="scope">
<span :class="{'check-mark': scope.row.fundChannel}">√</span>
</template>
</el-table-column>
<el-table-column prop="budgetPlan" label="关联预算计划" width="120">
<template #default="scope">
<span :class="{'check-mark': scope.row.budgetPlan}">√</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="事项流程">
<el-table-column prop="request" label="请示" width="100">
<template #default="scope">
<span :class="{'check-mark': scope.row.request}">√</span>
</template>
</el-table-column>
<el-table-column prop="purchaseApproval" label="采购业务审批表" width="120">
<template #default="scope">
<span :class="{'check-mark': scope.row.purchaseApproval}">√</span>
</template>
</el-table-column>
<el-table-column prop="tenderReview" label="招标文件审查流程" width="120">
<template #default="scope">
<span :class="{'check-mark': scope.row.tenderReview}">√</span>
</template>
</el-table-column>
<el-table-column prop="contractSign" label="合同会签流程" width="120">
<template #default="scope">
<span :class="{'check-mark': scope.row.contractSign}">√</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="scenes" label="已使用场景"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column prop="updateTime" label="更新时间"></el-table-column>
<el-table-column label="操作" width="250">
<el-table-column prop="paymentForm" label="支付表格" width="100"></el-table-column>
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="small" @click="handlePreview(scope.row)">预览</el-button>
<el-button
size="small"
:type="scope.row.status === 'disabled' ? 'success' : 'danger'"
@click="handleStatusChange(scope.row)"
>
{{ scope.row.status === 'disabled' ? '启用' : '禁用' }}
</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@ -85,103 +112,280 @@
</el-pagination>
</div>
</div>
<!-- 配置表单抽屉 -->
<el-drawer
:visible.sync="dialogVisible"
:title="dialogTitle"
size="500px"
:destroy-on-close="true"
direction="rtl"
custom-class="config-drawer"
>
<div class="drawer-container">
<div class="drawer-content">
<div class="scroll-container">
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="config-form">
<!-- 分类选择 -->
<el-form-item label="分类选择" prop="category" class="form-section">
<el-select v-model="form.category" placeholder="请选择分类" class="form-input">
<el-option label="项目采购类" value="project"></el-option>
<el-option label="事务类" value="affair"></el-option>
<el-option label="报销类" value="reimbursement"></el-option>
</el-select>
</el-form-item>
<!-- 合同类型 -->
<el-form-item label="合同类型" prop="contractType" class="form-section">
<el-input v-model="form.contractType" placeholder="请输入合同类型" class="form-input"></el-input>
</el-form-item>
<!-- 表单内容 -->
<div class="form-section">
<div class="section-title">表单内容</div>
<div class="checkbox-group">
<el-checkbox v-model="form.projectName">项目名称</el-checkbox>
<el-checkbox v-model="form.projectType">项目类型</el-checkbox>
</div>
<div class="sub-section">
<div class="sub-title">采购形式</div>
<el-checkbox v-model="purchaseFormAll" @change="handlePurchaseFormAllChange">全选</el-checkbox>
<el-checkbox-group v-model="form.purchaseForm" @change="handlePurchaseFormChange">
<div class="checkbox-list">
<el-checkbox label="政府采购">政府采购</el-checkbox>
<el-checkbox label="小型项目">小型项目</el-checkbox>
</div>
</el-checkbox-group>
</div>
<div class="sub-section">
<div class="sub-title">采购方式</div>
<el-checkbox v-model="purchaseMethodAll" @change="handlePurchaseMethodAllChange">全选</el-checkbox>
<el-checkbox-group v-model="form.purchaseMethod" @change="handlePurchaseMethodChange">
<div class="checkbox-list">
<el-checkbox label="公开招标">公开招标</el-checkbox>
<el-checkbox label="竞争性磋商">竞争性磋商</el-checkbox>
<el-checkbox label="竞争性谈判">竞争性谈判</el-checkbox>
<el-checkbox label="单一来源采购">单一来源采购</el-checkbox>
<el-checkbox label="直接发包">直接发包</el-checkbox>
<el-checkbox label="网上商城">网上商城</el-checkbox>
</div>
</el-checkbox-group>
</div>
<div class="checkbox-group">
<el-checkbox v-model="form.budgetPrice">预算价</el-checkbox>
<el-checkbox v-model="form.fundChannel">资金渠道</el-checkbox>
<el-checkbox v-model="form.budgetPlan">关联预算计划</el-checkbox>
</div>
</div>
<!-- 事项流程 -->
<div class="form-section">
<div class="section-title">事项流程</div>
<div class="checkbox-group">
<el-checkbox v-model="form.request">请示</el-checkbox>
<el-checkbox v-model="form.purchaseApproval">采购业务审批表</el-checkbox>
<el-checkbox v-model="form.tenderReview">招标文件审查流程</el-checkbox>
<el-checkbox v-model="form.contractSign">合同会签流程</el-checkbox>
</div>
</div>
<!-- 支付表格 -->
<el-form-item label="支付表格" prop="paymentForm" class="form-section">
<el-select v-model="form.paymentForm" placeholder="请选择支付表格" class="form-input">
<el-option label="附件1" value="attachment1"></el-option>
<el-option label="附件2" value="attachment2"></el-option>
<el-option label="附件3" value="attachment3"></el-option>
<el-option label="附件4" value="attachment4"></el-option>
<el-option label="附件5" value="attachment5"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</div>
<div class="drawer-footer">
<div class="footer-buttons">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">保 存</el-button>
</div>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
export default {
name: 'PayFormConfig',
name: 'ContractConfig',
data() {
return {
purchaseFormAll: false,
purchaseMethodAll: false,
searchForm: {
name: '',
status: '',
type: ''
category: '',
contractType: ''
},
tableData: [
{
name: '项目采购支付表格',
type: 'HTML',
status: 'published',
scenes: '项目采购、设备采购',
createTime: '2024-03-01 10:00',
updateTime: '2024-03-05 15:30'
index: 1,
category: '项目采购类',
contractType: '合同类',
projectName: true,
projectType: true,
purchaseForm: '政府采购',
purchaseMethod: '公开招标',
budgetPrice: true,
fundChannel: true,
budgetPlan: true,
request: true,
purchaseApproval: true,
tenderReview: true,
contractSign: true,
paymentForm: '附件5'
},
{
name: '差旅报销表格',
type: 'DOCX',
status: 'draft',
scenes: '差旅报销、交通费报销',
createTime: '2024-03-02 14:20',
updateTime: '2024-03-02 14:20'
},
{
name: '会议费用报销表格',
type: 'DOCX',
status: 'disabled',
scenes: '会议费用、培训费用',
createTime: '2024-02-28 09:15',
updateTime: '2024-03-03 11:45'
index: 2,
category: '项目采购类',
contractType: '借水借电类',
projectName: true,
projectType: false,
purchaseForm: '小型项目',
purchaseMethod: '直接发包',
budgetPrice: false,
fundChannel: true,
budgetPlan: true,
request: true,
purchaseApproval: true,
tenderReview: false,
contractSign: true,
paymentForm: '附件5'
}
],
total: 30,
currentPage: 1
currentPage: 1,
dialogVisible: false,
dialogTitle: '新增配置',
form: {
category: '',
contractType: '',
projectName: false,
projectType: false,
purchaseForm: [],
purchaseMethod: [],
budgetPrice: false,
fundChannel: false,
budgetPlan: false,
request: false,
purchaseApproval: false,
tenderReview: false,
contractSign: false,
paymentForm: ''
},
rules: {
category: [
{ required: true, message: '请选择分类', trigger: 'change' }
],
contractType: [
{ required: true, message: '请输入合同类型', trigger: 'blur' }
],
paymentForm: [
{ required: true, message: '请选择支付表格', trigger: 'change' }
]
}
}
},
methods: {
handleCreate() {
this.$router.push('/payment-form-config/create')
},
handleSearch() {
// 实现搜索逻辑
console.log('Search with:', this.searchForm)
},
resetSearch() {
this.searchForm = {
name: '',
status: '',
type: ''
this.dialogTitle = '新增配置'
this.form = {
category: '',
contractType: '',
projectName: false,
projectType: false,
purchaseForm: [],
purchaseMethod: [],
budgetPrice: false,
fundChannel: false,
budgetPlan: false,
request: false,
purchaseApproval: false,
tenderReview: false,
contractSign: false,
paymentForm: ''
}
this.dialogVisible = true
},
handleEdit(row) {
this.$router.push(`/payment-form-config/edit/${row.id}`)
this.dialogTitle = '编辑配置'
this.form = { ...row }
this.dialogVisible = true
},
handlePreview(row) {
// 实现预览逻辑
this.$message.info(`预览：${row.name}`)
},
handleStatusChange(row) {
const action = row.status === 'disabled' ? '启用' : '禁用'
this.$confirm(`确定要${action}该表格吗？`, '提示', {
handleDelete(row) {
this.$confirm('确定要删除该配置吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 实现状态变更逻辑
this.$message.success(`${action}成功`)
const index = this.tableData.findIndex(item => item.index === row.index)
if (index !== -1) {
this.tableData.splice(index, 1)
this.$message.success('删除成功')
}
}).catch(() => {
this.$message.info('已取消操作')
this.$message.info('已取消删除')
})
},
handleSubmit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
if (this.dialogTitle === '新增配置') {
const newIndex = this.tableData.length + 1
this.tableData.push({
...this.form,
index: newIndex
})
} else {
const index = this.tableData.findIndex(item => item.index === this.form.index)
if (index !== -1) {
this.tableData.splice(index, 1, this.form)
}
}
this.dialogVisible = false
this.$message.success('保存成功')
}
})
},
handleSearch() {
// 实现搜索逻辑
console.log('Search with:', this.searchForm)
},
resetSearch() {
this.searchForm = {
category: '',
contractType: ''
}
},
handlePageChange(page) {
this.currentPage = page
// 实现分页加载逻辑
},
getStatusType(status) {
const types = {
published: 'success',
draft: 'info',
disabled: 'danger'
}
return types[status] || 'info'
handlePurchaseFormAllChange(val) {
const allOptions = ['政府采购', '小型项目']
this.form.purchaseForm = val ? allOptions : []
},
getStatusText(status) {
const texts = {
published: '已发布',
draft: '草稿',
disabled: '已禁用'
}
return texts[status] || status
handlePurchaseFormChange(val) {
const allOptions = ['政府采购', '小型项目']
this.purchaseFormAll = val.length === allOptions.length
},
handlePurchaseMethodAllChange(val) {
const allOptions = ['公开招标', '竞争性磋商', '竞争性谈判', '单一来源采购', '直接发包', '网上商城']
this.form.purchaseMethod = val ? allOptions : []
},
handlePurchaseMethodChange(val) {
const allOptions = ['公开招标', '竞争性磋商', '竞争性谈判', '单一来源采购', '直接发包', '网上商城']
this.purchaseMethodAll = val.length === allOptions.length
}
}
}
@ -242,8 +446,9 @@ export default {
justify-content: center;
}
.w-100 {
width: 100%;
.check-mark {
color: #67C23A;
font-weight: bold;
}
:deep(.el-table) {
@ -253,6 +458,230 @@ export default {
:deep(.el-button + .el-button) {
margin-left: 8px;
}
:deep(.el-form-item__content) {
.el-checkbox {
margin-right: 20px;
}
.el-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
}
.config-drawer {
:deep(.el-drawer__header) {
margin-bottom: 0;
padding: 20px 24px;
border-bottom: 1px solid #e4e7ed;
font-size: 18px;
font-weight: 600;
color: #1f2937;
position: relative;
z-index: 1;
height: 64px;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
:deep(.el-drawer__body) {
height: calc(100% - 64px);
padding: 0;
overflow: hidden;
background-color: #f9fafb;
}
}
.drawer-container {
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.drawer-content {
flex: 1;
min-height: 0;
position: relative;
}
.scroll-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background-color: #c0c4cc;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background-color: #f5f7fa;
}
}
.config-form {
height: auto;
}
.form-section {
margin-bottom: 28px;
padding: 20px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
&:last-child {
margin-bottom: 0;
}
.section-title {
color: #374151;
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
position: relative;
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background-color: #409eff;
}
}
.sub-section {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 20px;
border-left: 3px solid #e5e7eb;
transition: border-color 0.3s ease;
&:hover {
border-left-color: #409eff;
}
&:last-child {
margin-bottom: 0;
}
.sub-title {
font-weight: 500;
font-size: 15px;
color: #4b5563;
margin-bottom: 16px;
}
}
}
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
:deep(.el-checkbox) {
margin-right: 0;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
}
.checkbox-list {
display: flex;
flex-direction: column;
gap: 12px;
:deep(.el-checkbox) {
margin-right: 0;
height: 32px;
display: flex;
align-items: center;
}
}
.form-input {
width: 100%;
:deep(.el-input__inner),
:deep(.el-select__inner) {
height: 36px;
line-height: 36px;
border-radius: 4px;
border-color: #dee2e6;
}
}
.drawer-footer {
flex-shrink: 0;
height: 72px;
padding: 16px 24px;
background: #ffffff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 1;
box-sizing: border-box;
.footer-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
.el-button {
min-width: 88px;
height: 40px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
}
}
}
:deep(.el-form-item__label) {
font-weight: 500;
color: #495057;
}
:deep(.el-checkbox__label) {
font-weight: normal;
color: #606266;
}
</style>

Write Preview
Loading…
Cancel
Save