<template>
<div class="financial">
<basic-container>
<!-- 头部 -->
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline projectName"
>
<!-- <el-form-item>
<el-select v-model="formInline.type" placeholder="状态">
<el-option label="已收款" value="shanghai"></el-option>
<el-option label="未收款" value="beijing"></el-option>
<el-option label="已开票" value="beijing"></el-option>
<el-option label="未开票" value="beijing"></el-option>
</el-select>
</el-form-item>-->
<el-form-item class="filterCondition" label="关键字">
<el-input
v-model="formInline.Keywork"
placeholder="客户/项目/律师/合同号"
></el-input>
</el-form-item>
<el-form-item label="受理时间">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="formInline.Begin"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-date-picker
placeholder="选择日期"
type="date"
v-model="formInline.End"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="onSubmit" class="search">搜索</el-button>
</el-form-item>
</el-form>
<!-- 主体 -->
<el-collapse v-model="activeName" accordion class="main">
<el-collapse-item
v-for="(item, index) in allData"
:key="index"
:name="index"
>
<template slot="title">
<ul class="box">
<li>
<div>
<img
:src="
item.ProjectType === 'ms'
? require('../../assets/project/ms.png')
: item.ProjectType === 'xs'
? require('../../assets/project/xs.png')
: item.ProjectType === 'xz'
? require('../../assets/project/xz.png')
: item.ProjectType === 'fs'
? require('../../assets/project/fs.png')
: item.ProjectType === 'cg'
? require('../../assets/project/cg.png')
: item.ProjectType === 'zx'
? require('../../assets/project/zx.png')
: ''
"
alt=""
/>
</div>
</li>
<li class="infoBox">
<p class="title" style="text-align: left;">
{{ item.ProjectName }}
</p>
<p class="info">{{ item.ProjectNum }}</p>
</li>
<li class="counselFee">律师费</li>
<li class="price">
<span>{{ item.FixedMoney }}</span
>元
</li>
<li class="HostNames" style="margin-left:80px;color: #2a2b2f;">
{{ item.HostNames ? item.HostNames : "" }}
</li>
</ul>
</template>
<avue-crud
ref="crud"
:data="item.MakeMoney"
:option="option"
:cell-style="cellStyle"
style="100%"
>
<template slot-scope="scope" slot="menu">
<el-button
size="small"
:disabled="item.State == 2 ? true : (item.State == 3 ? true : false)"
style="#453e9a"
@click="changeMoneyStatus(scope.row, 'MoneyState')"
>{{
scope.row.MoneyState === 1 ? "未收款" : "已收款"
}}</el-button
>
<el-button
:disabled="item.State == 2 ? true : (item.State == 3 ? true : false)"
@click="changeMoneyStatus(scope.row, 'InvoiceState')"
size="small"
style=" >{{
scope.row.InvoiceState === 1 ? "未开票" : "已开票"
}}</el-button
>
</template>
</avue-crud>
</el-collapse-item>
</el-collapse>
<el-row style="text-align: right; margin-bottom: 20px;">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.pageNo"
:page-sizes="page.pageSizes"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</el-row>
</basic-container>
</div>
</template>
<script>
import { queryMakeMoney, changeMakeMoneyStatus } from "@/api/financial/index";
import { encryptionObject } from "@/util/util";
import moment from "moment";
const param = { param: "e3BhZ2VObzowLCBwYWdlU2l6ZSA6MjB9" };
export default {
data() {
return {
//待办头部数据
formInline: {
Keywork: "",
Begin: "",
End: ""
},
page: {
pageNo: 1,
pageSize: 10,
total: 40,
pageSizes: [10, 20, 30, 40]
},
// 主体
activeName: "1",
allData: [],
// 应收款表格
data: [
{
contractFee: "合同律师费",
counselFee: "律师费",
price: "100,000,000元",
date: "2020-12-24",
status1: "已收款",
status2: "已开票"
},
{
contractFee: "合同律师费",
counselFee: "律师费",
price: "100,000,000元",
date: "2020-12-24",
status1: "未收款",
status2: "未开票"
},
{
contractFee: "合同律师费",
counselFee: "律师费",
price: "100,000,000元",
date: "2020-12-24",
status1: "已收款",
status2: "未开票"
},
{
contractFee: "合同律师费",
counselFee: "律师费",
price: "100,000,000元",
date: "2020-12-24",
status1: "未收款",
status2: "已开票"
}
],
option: {
header: false,
addBtn: false,
editBtn: false,
columnBtn: false,
delBtn: false,
menu: true,
border: true,
page: false,
align: "center",
menuAlign: "center",
column: [
{
label: "类型",
prop: "MoneyClass",
dicData: [
{
label: "合同律师费",
value: 1
},
{
label: "风险费用",
value: 2
}
]
},
{
label: "款项名称",
prop: "MoneyName"
},
{
label: "应收金额",
prop: "Money"
},
{
label: "预计收款时间",
prop: "ExpectData"
},
{
label: "到账状态",
prop: "MoneyState",
dicData: [
{
label: "已到账",
value: 1
},
{
label: "未到账",
value: 0
}
]
},
{
label: "发票状态",
prop: "InvoiceState",
dicData: [
{
label: "已开票",
value: 1
},
{
label: "未开票",
value: 0
}
]
}
]
}
};
},
methods: {
handleSizeChange(val) {
this.query({
pageSize: val,
pageNo: 0
});
},
handleCurrentChange(val) {
this.query({
pageSize: 10,
pageNo: val - 1
});
},
// 搜索
onSubmit() {
this.query(param);
},
// 应收款方法
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 4) {
if (row.MoneyState === 1) {
return {
color: "#22ca6f"
};
} else if (row.MoneyState === 0) {
return {
color: "#ff4d4d"
};
}
}
if (columnIndex == 5) {
if (row.InvoiceState === 1) {
return {
color: "#22ca6f"
};
} else if (row.InvoiceState === 0) {
return {
color: "#7f8082"
};
}
}
if (columnIndex == 7) {
if (row.InvoiceState === 1) {
return (this.disabled = true);
}
}
},
query(params = { pageSize: 10, pageNo: 0 }) {
let { Keywork, Begin, End } = this.formInline;
let param = {
Keywork: Keywork,
End: End ? moment(End).format("YYYY-MM-DD") : null,
Begin: Begin ? moment(Begin).format("YYYY-MM-DD") : null,
...params
};
let base64Params = encryptionObject({
data: { ...param },
type: "Base64",
key: "avue"
});
queryMakeMoney({ param: base64Params }).then(r => {
if (r.data && r.data.Code === 200 && r.data.Data) {
this.allData = r.data.Data.Items;
// console.log( this.allData,' this.allData')
this.page.total = r.data.Data.Count;
} else {
this.$message.error("获取团队文件树失败！");
}
});
},
changeMoneyStatus(obj, type) {
console.log(obj)
let state;
if (type === "MoneyState") {
if (obj.MoneyState === 1) {
state = 0;
} else {
state = 1;
}
} else if (type === "InvoiceState") {
if (obj.InvoiceState === 1) {
state = 0;
} else {
state = 1;
}
}
let params = { ...obj, [type]: state };
// console.log(params,"params")
changeMakeMoneyStatus(params).then(r => {
this.$confirm("确定执行此操作, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
if (r.data && r.data.Code === 200 && r.data.Data > 0) {
this.$message.success("状态修改成功！");
this.query(param);
} else {
this.$message.error("状态修改失败！");
}
});
});
}
},
created() {
this.query(param);
}
};
</script>
<style lang="scss">
.financial {
padding: 24px;
.projectName {
font-family: SourceHanSansCN-Bold;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #82849d;
margin-left: 8px;
}
.filterCondition {
margin-left: 33px;
}
.search {
88px;
height: 40px;
border: 1px solid transparent;
color: #fff;
margin: 0 6px;
background-color: #453e9a;
border-radius: 4px;
}
.box {
1080px;
height: 84px;
li {
display: inline-block;
vertical-align: middle;
list-style: none;
img {
48px;
height: 48px;
border-radius: 50%;
vertical-align: middle;
}
.title {
385px;
height: 32px;
font-family: SourceHanSansCN-Light;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #2a2b2f;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
padding: 0;
}
.info {
color: #ff4d4d;
margin: 0;
padding: 0;
}
}
.infoBox {
margin-left: 24px;
}
.counselFee {
margin-left: 80px;
}
.price {
margin-left: 80px;
span {
color: #1aabef;
}
}
}
.el-collapse-item__header {
height: 88px;
background-color: #f4f4f6;
}
.el-collapse-item__wrap {
will-change: height;
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
border-bottom: none;
}
.el-collapse-item {
margin: 0 0 24px 0px;
}
.el-collapse-item__content {
padding: 0;
}
.el-card__body {
padding: 20px 10px 0 0;
}
.el-collapse {
margin-left: 8px;
border-top: none;
border-bottom: none;
}
.main {
.el-button {
color: #fff;
88px;
height: 32px;
}
}
}
#avue-view {
overflow: scroll !important;
}
</style>