lynn
1 year ago
parent
1baa5529bf
commit
04cabf4a01
@ -1,222 +1,193 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="padding: 0 20px;">
|
<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>
|
<div slot="content"></div>
|
||||||
<slot>
|
<slot>
|
||||||
<!-- 搜索区域 -->
|
|
||||||
<div class="selects">
|
<div class="selects">
|
||||||
<div>
|
<div>
|
||||||
<span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
|
<span style="padding: 0 6px;word-break: keep-all;">
|
||||||
<el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
|
付款计划日期
|
||||||
|
</span>
|
||||||
|
<DatePicker :value="[select.start,select.end]" placeholder="请选择日期" placement="bottom-start"
|
||||||
|
style="width: 200px" type="daterange" @on-change="datePick"></DatePicker>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span style="padding: 0 6px;word-break: keep-all;">状态</span>
|
<span style="padding: 0 6px;word-break: keep-all;">
|
||||||
<el-select v-model="searchForm.status" placeholder="所有状态" style="width: 180px">
|
关键字
|
||||||
<el-option label="所有状态" value=""></el-option>
|
</span>
|
||||||
<el-option label="草稿" value="draft"></el-option>
|
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
|
||||||
<el-option label="已发布" value="published"></el-option>
|
|
||||||
<el-option label="已禁用" value="disabled"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<Button style="margin-left: 10px" type="primary"
|
||||||
<span style="padding: 0 6px;word-break: keep-all;">类型</span>
|
@click="select={showDate:'',start:'',end:'',pageIndex:1,keyword:''}">重置
|
||||||
<el-select v-model="searchForm.type" placeholder="所有类型" style="width: 180px">
|
</Button>
|
||||||
<el-option label="所有类型" value=""></el-option>
|
<Button style="margin-left: 10px" type="primary" @click="getSignPlan">查询</Button>
|
||||||
<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>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
</lx-header>
|
</lx-header>
|
||||||
|
|
||||||
<!-- 表格区域 -->
|
|
||||||
<xy-table :list="tableData" :table-item="tableColumns">
|
<xy-table :list="list" :table-item="table" @delete="deleteContractSign"
|
||||||
<template #operation="{ row }">
|
@editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}">
|
||||||
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
|
<template v-slot:btns v-if="type==0">
|
||||||
<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>
|
</template>
|
||||||
</xy-table>
|
</xy-table>
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div style="display: flex;justify-content: flex-end;">
|
<div style="display: flex;justify-content: flex-end;">
|
||||||
<el-pagination
|
<Page :total="total" @on-change="pageChange" show-elevator show-sizer @on-page-size-change="pageSizeChange" />
|
||||||
background
|
|
||||||
layout="total, sizes, prev, pager, next"
|
|
||||||
:total="total"
|
|
||||||
:current-page="currentPage"
|
|
||||||
:page-size="pageSize"
|
|
||||||
@current-change="handlePageChange"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan"></detailContractSign>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import {
|
||||||
name: 'PayFormConfig',
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
searchForm: {
|
select: {
|
||||||
name: '',
|
start: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
|
||||||
status: '',
|
end: `${new Date().getFullYear()}-${new Date().getMonth() + 2}-${new Date().getDate()}`,
|
||||||
type: ''
|
pageIndex: 1,
|
||||||
|
keyword: '',
|
||||||
|
is_auth: 1,
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
list: [],
|
||||||
|
table: [{
|
||||||
|
prop: 'contract.name',
|
||||||
|
label: '项目名称',
|
||||||
|
width: 170,
|
||||||
|
align: 'left',
|
||||||
|
fixed: 'left'
|
||||||
},
|
},
|
||||||
tableData: [
|
|
||||||
{
|
{
|
||||||
name: '项目采购支付表格',
|
prop: 'money',
|
||||||
type: 'HTML',
|
label: '计划付款金额（元）',
|
||||||
status: 'published',
|
align: 'right',
|
||||||
scenes: '项目采购、设备采购',
|
width: 170,
|
||||||
createTime: '2024-03-01 10:00',
|
formatter: (v1, v2, value) => {
|
||||||
updateTime: '2024-03-05 15:30'
|
return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '差旅报销表格',
|
prop: 'date',
|
||||||
type: 'DOCX',
|
label: '计划付款日期',
|
||||||
status: 'draft',
|
width: 180
|
||||||
scenes: '差旅报销、交通费报销',
|
|
||||||
createTime: '2024-03-02 14:20',
|
|
||||||
updateTime: '2024-03-02 14:20'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '会议费用报销表格',
|
prop: 'content',
|
||||||
type: 'DOCX',
|
label: '内容',
|
||||||
status: 'disabled',
|
minWidth: 180,
|
||||||
scenes: '会议费用、培训费用',
|
|
||||||
createTime: '2024-02-28 09:15',
|
|
||||||
updateTime: '2024-03-03 11:45'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tableColumns: [
|
|
||||||
{
|
|
||||||
prop: 'name',
|
|
||||||
label: '表格名称',
|
|
||||||
width: 170,
|
|
||||||
align: 'left'
|
align: 'left'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'type',
|
prop: 'contract.created_at',
|
||||||
label: '类型',
|
label: '合同签订日期',
|
||||||
width: 100
|
width: 180,
|
||||||
},
|
formatter: (v1, v2, value) => {
|
||||||
{
|
return parseTime(new Date(value), '{y}-{m}-{d}')
|
||||||
prop: 'status',
|
}
|
||||||
label: '状态',
|
|
||||||
width: 100,
|
|
||||||
formatter: (row) => this.getStatusText(row.status)
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'scenes',
|
prop: 'contract.supply',
|
||||||
label: '已使用场景',
|
label: '受款单位',
|
||||||
minWidth: 180,
|
width: 140
|
||||||
align: 'left'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'admin.name',
|
||||||
label: '创建时间',
|
label: '经办人',
|
||||||
width: 160
|
width: 140
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'updateTime',
|
prop: 'department.name',
|
||||||
label: '更新时间',
|
label: '经办科室',
|
||||||
width: 160
|
width: 140
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'operation',
|
prop: 'created_at',
|
||||||
label: '操作',
|
label: '创建信息',
|
||||||
width: 250,
|
width: 160,
|
||||||
slot: true
|
formatter: (v1, v2, value) => {
|
||||||
|
return parseTime(new Date(value), '{y}-{m}-{d}')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
total: 30,
|
|
||||||
currentPage: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleCreate() {
|
pageSizeChange(e) {
|
||||||
this.$router.push('/payment-form-config/create')
|
this.select.pageSize = e;
|
||||||
},
|
this.select.pageIndex = 1;
|
||||||
handleSearch() {
|
this.getSignPlan();
|
||||||
console.log('Search with:', this.searchForm)
|
},
|
||||||
|
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: "操作成功"
|
||||||
|
})
|
||||||
|
})
|
||||||
},
|
},
|
||||||
resetSearch() {
|
datePick(e) {
|
||||||
this.searchForm = {
|
this.select.start = e[0]
|
||||||
name: '',
|
this.select.end = e[1]
|
||||||
status: '',
|
|
||||||
type: ''
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
handleEdit(row) {
|
pageChange(e) {
|
||||||
this.$router.push(`/payment-form-config/edit/${row.id}`)
|
this.select.pageIndex = e
|
||||||
},
|
this.getSignPlan()
|
||||||
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
|
|
||||||
},
|
},
|
||||||
handleSizeChange(size) {
|
mounted() {
|
||||||
this.pageSize = size
|
this.getSignPlan()
|
||||||
this.currentPage = 1
|
|
||||||
},
|
},
|
||||||
getStatusText(status) {
|
created() {
|
||||||
const texts = {
|
let type = parseInt(this.$route.path.split("_")[1]);
|
||||||
published: '已发布',
|
this.type = this.select.is_auth = type;
|
||||||
draft: '草稿',
|
|
||||||
disabled: '已禁用'
|
|
||||||
}
|
|
||||||
return texts[status] || status
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.selects {
|
.selects {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
& > div {
|
&>div {
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-button + .el-button) {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table) {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue