lynn
8 months ago
parent
1baa5529bf
commit
04cabf4a01
@ -1,222 +1,193 @@
|
||||
<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>
|
||||
<el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
|
||||
<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>
|
||||
</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>
|
||||
<span style="padding: 0 6px;word-break: keep-all;">
|
||||
关键字
|
||||
</span>
|
||||
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
|
||||
</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>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleCreate">新建支付表格</el-button>
|
||||
<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>
|
||||
</slot>
|
||||
</lx-header>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<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>
|
||||
|
||||
<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">
|
||||
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div style="display: flex;justify-content: flex-end;">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
<Page :total="total" @on-change="pageChange" show-elevator show-sizer @on-page-size-change="pageSizeChange" />
|
||||
</div>
|
||||
|
||||
<detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan"></detailContractSign>
|
||||
</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'
|
||||
}
|
||||
],
|
||||
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
|
||||
},
|
||||
{
|
||||
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)
|
||||
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
|
||||
},
|
||||
resetSearch() {
|
||||
this.searchForm = {
|
||||
name: '',
|
||||
status: '',
|
||||
type: ''
|
||||
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,
|
||||
},
|
||||
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}')
|
||||
}
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
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
|
||||
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()
|
||||
},
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.currentPage = 1
|
||||
mounted() {
|
||||
this.getSignPlan()
|
||||
},
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
published: '已发布',
|
||||
draft: '草稿',
|
||||
disabled: '已禁用'
|
||||
}
|
||||
return texts[status] || status
|
||||
created() {
|
||||
let type = parseInt(this.$route.path.split("_")[1]);
|
||||
this.type = this.select.is_auth = type;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selects {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
margin-bottom: 6px;
|
||||
.selects {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-button + .el-button) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
flex-wrap: wrap;
|
||||
|
||||
:deep(.el-table) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&>div {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue