lynn
1 year ago
parent
7bcd8af5ac
commit
a245b61408
@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div style="padding: 0 20px;">
|
||||
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="新增支付表格">
|
||||
</lx-header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<!-- 左侧面板 -->
|
||||
<div class="left-panel">
|
||||
<!-- 预览区 -->
|
||||
<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"></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-button
|
||||
size="small"
|
||||
v-if="formatType === 'docx'"
|
||||
@click="handleUpload"
|
||||
>上传文件</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-preview-container">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="codeContent"
|
||||
:rows="10"
|
||||
resize="none"
|
||||
class="code-editor"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧面板 -->
|
||||
<div class="right-panel">
|
||||
<div class="field-config-container">
|
||||
<div class="panel-header">
|
||||
<h5 class="panel-title">字段配置</h5>
|
||||
</div>
|
||||
<div class="field-list">
|
||||
<div
|
||||
v-for="field in fieldList"
|
||||
:key="field.name"
|
||||
class="field-item"
|
||||
@click="handleEditField(field)"
|
||||
>
|
||||
<el-row align="middle">
|
||||
<el-col :span="8">
|
||||
<span class="text-muted">{{ field.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<strong>{{ field.label }}</strong>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span class="text-muted">{{ getTypeDisplay(field.type) }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定保存按钮 -->
|
||||
<div class="footer-actions">
|
||||
<div class="footer-content">
|
||||
<el-button size="large" class="footer-button" @click="$router.back()">取 消</el-button>
|
||||
<el-button size="large" type="primary" class="footer-button" @click="handleSave">保 存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑字段抽屉 -->
|
||||
<el-drawer
|
||||
v-model="showEditDrawer"
|
||||
title="编辑字段"
|
||||
size="400px"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-form :model="editForm" label-width="80px">
|
||||
<el-form-item label="字段名">
|
||||
<el-input v-model="editForm.name" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="中文名">
|
||||
<el-input v-model="editForm.label"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="表单类型">
|
||||
<el-select v-model="editForm.type" class="w-100">
|
||||
<el-option label="文本" value="text"></el-option>
|
||||
<el-option label="数字" value="number"></el-option>
|
||||
<el-option label="日期" value="date"></el-option>
|
||||
<el-option label="下拉选择" value="select"></el-option>
|
||||
<el-option label="复选框" value="checkbox"></el-option>
|
||||
<el-option label="单选框" value="radio"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据选项" v-if="['select', 'checkbox', 'radio'].includes(editForm.type)">
|
||||
<el-input v-model="editForm.options" placeholder="用逗号分隔多个选项"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div style="flex: auto">
|
||||
<el-button @click="showEditDrawer = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSaveField">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddPayForm',
|
||||
data() {
|
||||
return {
|
||||
formatType: 'html',
|
||||
codeContent: '',
|
||||
showEditDrawer: false,
|
||||
editForm: {
|
||||
name: '',
|
||||
label: '',
|
||||
type: 'text',
|
||||
options: ''
|
||||
},
|
||||
fieldList: [
|
||||
{
|
||||
name: 'projectName',
|
||||
label: '项目名称',
|
||||
type: 'text',
|
||||
options: ''
|
||||
},
|
||||
{
|
||||
name: 'budgetAmount',
|
||||
label: '预算金额',
|
||||
type: 'number',
|
||||
options: ''
|
||||
},
|
||||
{
|
||||
name: 'paymentDate',
|
||||
label: '支付日期',
|
||||
type: 'date',
|
||||
options: ''
|
||||
},
|
||||
{
|
||||
name: 'paymentType',
|
||||
label: '支付方式',
|
||||
type: 'select',
|
||||
options: '现金,银行转账,支票,其他'
|
||||
},
|
||||
{
|
||||
name: 'isUrgent',
|
||||
label: '是否加急',
|
||||
type: 'checkbox',
|
||||
options: ''
|
||||
},
|
||||
{
|
||||
name: 'approvalStatus',
|
||||
label: '审批状态',
|
||||
type: 'radio',
|
||||
options: '待审批,已通过,已拒绝'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formatType: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val === 'html') {
|
||||
this.codeContent = '<!DOCTYPE html>\n<html>\n<head>\n <title>支付表格</title>\n</head>\n<body>\n <!-- 这里将显示生成的HTML代码 -->\n</body>\n</html>'
|
||||
} else {
|
||||
this.codeContent = '<?xml version="1.0" encoding="UTF-8"?>\n<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">\n <!-- 这里将显示生成的DOCX代码 -->\n</w:document>'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRefresh() {
|
||||
// 实现刷新预览的逻辑
|
||||
},
|
||||
handleUpload() {
|
||||
// 实现文件上传的逻辑
|
||||
},
|
||||
handleEditField(field) {
|
||||
this.editForm = { ...field }
|
||||
this.showEditDrawer = true
|
||||
},
|
||||
handleSaveField() {
|
||||
const index = this.fieldList.findIndex(item => item.name === this.editForm.name)
|
||||
if (index > -1) {
|
||||
this.fieldList[index] = { ...this.editForm }
|
||||
}
|
||||
this.showEditDrawer = false
|
||||
},
|
||||
getTypeDisplay(type) {
|
||||
const typeMap = {
|
||||
'text': '文本',
|
||||
'number': '数字',
|
||||
'date': '日期',
|
||||
'select': '下拉选择',
|
||||
'checkbox': '复选框',
|
||||
'radio': '单选框'
|
||||
}
|
||||
return typeMap[type] || type
|
||||
},
|
||||
handleSave() {
|
||||
// 这里添加保存逻辑
|
||||
this.$message.success('保存成功')
|
||||
// 保存成功后返回列表页
|
||||
this.$router.push('/business-config/pay-form')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
height: calc(100vh - 180px);
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
border-left: 1px solid #dee2e6;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.panel-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-container,
|
||||
.code-preview-container {
|
||||
height: 300px;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.field-config-container {
|
||||
flex: 1;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.field-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.field-item {
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #6c757d;
|
||||
}
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
z-index: 100;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.footer-button {
|
||||
min-width: 120px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
padding: 0 30px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div ref="contractList" style="padding: 0 20px;">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleSearch">查询</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 新增按钮 -->
|
||||
<div class="operation-wrapper">
|
||||
<el-button type="primary" @click="handleCreate">新增</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
@current-change="handlePageChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PayFormConfig',
|
||||
data() {
|
||||
return {
|
||||
searchForm: {
|
||||
name: '',
|
||||
status: '',
|
||||
type: ''
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
name: '项目采购支付表格',
|
||||
type: 'HTML',
|
||||
status: 'published',
|
||||
scenes: '项目采购、设备采购',
|
||||
createTime: '2024-03-01 10:00',
|
||||
updateTime: '2024-03-05 15:30'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
total: 30,
|
||||
currentPage: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCreate() {
|
||||
this.$router.push('/payment-form-config/create')
|
||||
},
|
||||
handleSearch() {
|
||||
// 实现搜索逻辑
|
||||
console.log('Search with:', this.searchForm)
|
||||
},
|
||||
resetSearch() {
|
||||
this.searchForm = {
|
||||
name: '',
|
||||
status: '',
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$router.push(`/payment-form-config/edit/${row.id}`)
|
||||
},
|
||||
handlePreview(row) {
|
||||
// 实现预览逻辑
|
||||
this.$message.info(`预览：${row.name}`)
|
||||
},
|
||||
handleStatusChange(row) {
|
||||
const action = row.status === 'disabled' ? '启用' : '禁用'
|
||||
this.$confirm(`确定要${action}该表格吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 实现状态变更逻辑
|
||||
this.$message.success(`${action}成功`)
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消操作')
|
||||
})
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.currentPage = page
|
||||
// 实现分页加载逻辑
|
||||
},
|
||||
getStatusType(status) {
|
||||
const types = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
disabled: 'danger'
|
||||
}
|
||||
return types[status] || 'info'
|
||||
},
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
published: '已发布',
|
||||
draft: '草稿',
|
||||
disabled: '已禁用'
|
||||
}
|
||||
return texts[status] || status
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.selects {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
height: 32px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.operation-wrapper {
|
||||
margin-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-button + .el-button) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div ref="contractList" style="padding: 0 20px;">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleSearch">查询</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 新增按钮 -->
|
||||
<div class="operation-wrapper">
|
||||
<el-button type="primary" @click="handleCreate">新增</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
@current-change="handlePageChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PayFormConfig',
|
||||
data() {
|
||||
return {
|
||||
searchForm: {
|
||||
name: '',
|
||||
status: '',
|
||||
type: ''
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
name: '项目采购支付表格',
|
||||
type: 'HTML',
|
||||
status: 'published',
|
||||
scenes: '项目采购、设备采购',
|
||||
createTime: '2024-03-01 10:00',
|
||||
updateTime: '2024-03-05 15:30'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
total: 30,
|
||||
currentPage: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCreate() {
|
||||
this.$router.push('/businessConfig/AddPayForm')
|
||||
},
|
||||
handleSearch() {
|
||||
// 实现搜索逻辑
|
||||
console.log('Search with:', this.searchForm)
|
||||
},
|
||||
resetSearch() {
|
||||
this.searchForm = {
|
||||
name: '',
|
||||
status: '',
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$router.push(`/payment-form-config/edit/${row.id}`)
|
||||
},
|
||||
handlePreview(row) {
|
||||
// 实现预览逻辑
|
||||
this.$message.info(`预览：${row.name}`)
|
||||
},
|
||||
handleStatusChange(row) {
|
||||
const action = row.status === 'disabled' ? '启用' : '禁用'
|
||||
this.$confirm(`确定要${action}该表格吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 实现状态变更逻辑
|
||||
this.$message.success(`${action}成功`)
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消操作')
|
||||
})
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.currentPage = page
|
||||
// 实现分页加载逻辑
|
||||
},
|
||||
getStatusType(status) {
|
||||
const types = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
disabled: 'danger'
|
||||
}
|
||||
return types[status] || 'info'
|
||||
},
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
published: '已发布',
|
||||
draft: '草稿',
|
||||
disabled: '已禁用'
|
||||
}
|
||||
return texts[status] || status
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.selects {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
height: 32px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.operation-wrapper {
|
||||
margin-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-button + .el-button) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -1,193 +1,222 @@
|
||||
<template>
|
||||
<div 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="selects">
|
||||
<div>
|
||||
<span style="padding: 0 6px;word-break: keep-all;">
|
||||
付款计划日期
|
||||
</span>
|
||||
<DatePicker :value="[select.start,select.end]" placeholder="请选择日期" placement="bottom-start"
|
||||
style="width: 200px" type="daterange" @on-change="datePick"></DatePicker>
|
||||
<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>
|
||||
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
|
||||
<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>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<Button style="margin-left: 10px" type="primary"
|
||||
@click="select={showDate:'',start:'',end:'',pageIndex:1,keyword:''}">重置
|
||||
</Button>
|
||||
<Button style="margin-left: 10px" type="primary" @click="getSignPlan">查询</Button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleCreate">新建支付表格</el-button>
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
|
||||
|
||||
<xy-table :list="list" :table-item="table" @delete="deleteContractSign"
|
||||
@editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}">
|
||||
<template v-slot:btns v-if="type==0">
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<xy-table :list="tableData" :table-item="tableColumns">
|
||||
<template #operation="{ row }">
|
||||
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" @click="handlePreview(row)">预览</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:type="row.status === 'disabled' ? 'success' : 'danger'"
|
||||
@click="handleStatusChange(row)"
|
||||
>
|
||||
{{ row.status === 'disabled' ? '启用' : '禁用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div style="display: flex;justify-content: flex-end;">
|
||||
<Page :total="total" @on-change="pageChange" show-elevator show-sizer @on-page-size-change="pageSizeChange" />
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan"></detailContractSign>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getContractSign,
|
||||
delContractSign
|
||||
} from "@/api/contractSign/contractSign"
|
||||
import {
|
||||
parseTime
|
||||
} from "@/utils"
|
||||
import {
|
||||
Message
|
||||
} from "element-ui";
|
||||
|
||||
import detailContractSign from "@/views/contract/components/detailContractSign";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
detailContractSign
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select: {
|
||||
start: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
|
||||
end: `${new Date().getFullYear()}-${new Date().getMonth() + 2}-${new Date().getDate()}`,
|
||||
pageIndex: 1,
|
||||
keyword: '',
|
||||
is_auth: 1,
|
||||
export default {
|
||||
name: 'PayFormConfig',
|
||||
data() {
|
||||
return {
|
||||
searchForm: {
|
||||
name: '',
|
||||
status: '',
|
||||
type: ''
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
name: '项目采购支付表格',
|
||||
type: 'HTML',
|
||||
status: 'published',
|
||||
scenes: '项目采购、设备采购',
|
||||
createTime: '2024-03-01 10:00',
|
||||
updateTime: '2024-03-05 15:30'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
tableColumns: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '表格名称',
|
||||
width: 170,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '类型',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
width: 100,
|
||||
formatter: (row) => this.getStatusText(row.status)
|
||||
},
|
||||
{
|
||||
prop: 'scenes',
|
||||
label: '已使用场景',
|
||||
minWidth: 180,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
prop: 'updateTime',
|
||||
label: '更新时间',
|
||||
width: 160
|
||||
},
|
||||
total: 0,
|
||||
list: [],
|
||||
table: [{
|
||||
prop: 'contract.name',
|
||||
label: '项目名称',
|
||||
width: 170,
|
||||
align: 'left',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'money',
|
||||
label: '计划付款金额（元）',
|
||||
align: 'right',
|
||||
width: 170,
|
||||
formatter: (v1, v2, value) => {
|
||||
return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'date',
|
||||
label: '计划付款日期',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '内容',
|
||||
minWidth: 180,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'contract.created_at',
|
||||
label: '合同签订日期',
|
||||
width: 180,
|
||||
formatter: (v1, v2, value) => {
|
||||
return parseTime(new Date(value), '{y}-{m}-{d}')
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'contract.supply',
|
||||
label: '受款单位',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'admin.name',
|
||||
label: '经办人',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'department.name',
|
||||
label: '经办科室',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'created_at',
|
||||
label: '创建信息',
|
||||
width: 160,
|
||||
formatter: (v1, v2, value) => {
|
||||
return parseTime(new Date(value), '{y}-{m}-{d}')
|
||||
}
|
||||
}
|
||||
],
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
width: 250,
|
||||
slot: true
|
||||
}
|
||||
],
|
||||
total: 30,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCreate() {
|
||||
this.$router.push('/payment-form-config/create')
|
||||
},
|
||||
handleSearch() {
|
||||
console.log('Search with:', this.searchForm)
|
||||
},
|
||||
resetSearch() {
|
||||
this.searchForm = {
|
||||
name: '',
|
||||
status: '',
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pageSizeChange(e) {
|
||||
this.select.pageSize = e;
|
||||
this.select.pageIndex = 1;
|
||||
this.getSignPlan();
|
||||
},
|
||||
async getSignPlan() {
|
||||
const res = await getContractSign({
|
||||
page_size: this.select.pageSize,
|
||||
page: this.select.pageIndex,
|
||||
keyword: this.select.keyword,
|
||||
start_date: this.select.start,
|
||||
end_date: this.select.end,
|
||||
is_auth: this.select.is_auth
|
||||
})
|
||||
this.total = res.total
|
||||
this.list = res.data
|
||||
},
|
||||
deleteContractSign(row) {
|
||||
delContractSign({
|
||||
id: row.id
|
||||
}).then(res => {
|
||||
this.getSignPlan()
|
||||
Message({
|
||||
type: 'success',
|
||||
message: "操作成功"
|
||||
})
|
||||
})
|
||||
},
|
||||
datePick(e) {
|
||||
this.select.start = e[0]
|
||||
this.select.end = e[1]
|
||||
},
|
||||
pageChange(e) {
|
||||
this.select.pageIndex = e
|
||||
this.getSignPlan()
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$router.push(`/payment-form-config/edit/${row.id}`)
|
||||
},
|
||||
handlePreview(row) {
|
||||
this.$message.info(`预览：${row.name}`)
|
||||
},
|
||||
mounted() {
|
||||
this.getSignPlan()
|
||||
handleStatusChange(row) {
|
||||
const action = row.status === 'disabled' ? '启用' : '禁用'
|
||||
this.$confirm(`确定要${action}该表格吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message.success(`${action}成功`)
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消操作')
|
||||
})
|
||||
},
|
||||
created() {
|
||||
let type = parseInt(this.$route.path.split("_")[1]);
|
||||
this.type = this.select.is_auth = type;
|
||||
handlePageChange(page) {
|
||||
this.currentPage = page
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.currentPage = 1
|
||||
},
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
published: '已发布',
|
||||
draft: '草稿',
|
||||
disabled: '已禁用'
|
||||
}
|
||||
return texts[status] || status
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selects {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.selects {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
&>div {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
& > div {
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
:deep(.el-button + .el-button) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue