|
|
|
|
@ -41,18 +41,67 @@
|
|
|
|
|
size="small"
|
|
|
|
|
stripe
|
|
|
|
|
highlight-row
|
|
|
|
|
:height="400"
|
|
|
|
|
:height="300"
|
|
|
|
|
:data="leases"
|
|
|
|
|
:columns="leaseTable"
|
|
|
|
|
></Table>
|
|
|
|
|
<Page
|
|
|
|
|
style="margin-top: 14px; display: flex; justify-content: flex-end"
|
|
|
|
|
<div class="page">
|
|
|
|
|
<Page
|
|
|
|
|
style="margin-top: 14px; display: flex; justify-content: flex-end"
|
|
|
|
|
size="small"
|
|
|
|
|
:current.sync="leaseSelect.page"
|
|
|
|
|
:total="leaseTotal"
|
|
|
|
|
show-elevator
|
|
|
|
|
show-total
|
|
|
|
|
:page-size="leaseSelect.page_size"
|
|
|
|
|
@on-change="getLeases"
|
|
|
|
|
></Page>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-title" style="margin-top: 20px;">
|
|
|
|
|
<div class="title-icon">
|
|
|
|
|
<i class="el-icon-s-claim"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<p>临期收租</p>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="lease-status-switch"
|
|
|
|
|
:data-status="radio1"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in status"
|
|
|
|
|
:data-status="index"
|
|
|
|
|
:class="{ 'active-switch': radio1 === index }"
|
|
|
|
|
@click="radio1Pick(index)"
|
|
|
|
|
>
|
|
|
|
|
<el-badge :value="statusTotal1[index]" :max="99">
|
|
|
|
|
{{ item }}
|
|
|
|
|
</el-badge>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
<Table
|
|
|
|
|
:loading="payTableLoading"
|
|
|
|
|
size="small"
|
|
|
|
|
:total="leaseTotal"
|
|
|
|
|
show-elevator
|
|
|
|
|
show-total
|
|
|
|
|
:page-size="leaseSelect.page_size"
|
|
|
|
|
></Page>
|
|
|
|
|
stripe
|
|
|
|
|
highlight-row
|
|
|
|
|
:height="300"
|
|
|
|
|
:data="pays"
|
|
|
|
|
:columns="payTable"
|
|
|
|
|
></Table>
|
|
|
|
|
<div class="page">
|
|
|
|
|
<Page
|
|
|
|
|
style="margin-top: 14px; display: flex; justify-content: flex-end"
|
|
|
|
|
size="small"
|
|
|
|
|
:current.sync="paySelect.page"
|
|
|
|
|
:total="payTotal"
|
|
|
|
|
show-elevator
|
|
|
|
|
show-total
|
|
|
|
|
:page-size="paySelect.page_size"
|
|
|
|
|
@on-change="getLeasePay"
|
|
|
|
|
></Page>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
</el-col>
|
|
|
|
|
@ -162,6 +211,16 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
config: {
|
|
|
|
|
lease: {
|
|
|
|
|
time: 1,
|
|
|
|
|
unit: "months",
|
|
|
|
|
},
|
|
|
|
|
pay: {
|
|
|
|
|
time: 3,
|
|
|
|
|
unit: "months",
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
statusTotal: [],
|
|
|
|
|
status: ["已过期", "临期"], //同步改scss变量
|
|
|
|
|
col: "",
|
|
|
|
|
@ -194,11 +253,149 @@ export default {
|
|
|
|
|
orderArr: [],
|
|
|
|
|
chartData: {},
|
|
|
|
|
|
|
|
|
|
radio: 0,
|
|
|
|
|
config: {
|
|
|
|
|
time: 1,
|
|
|
|
|
unit: "months",
|
|
|
|
|
//pay
|
|
|
|
|
statusTotal1: [],
|
|
|
|
|
radio1: 0,
|
|
|
|
|
payTableLoading: false,
|
|
|
|
|
pays: [],
|
|
|
|
|
payTotal: 0,
|
|
|
|
|
paySelect: {
|
|
|
|
|
table_name: "lease_plans",
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 10,
|
|
|
|
|
filter: [
|
|
|
|
|
{
|
|
|
|
|
key: "zujindiyicidaoweishijian",
|
|
|
|
|
op: "range",
|
|
|
|
|
value: `${this.$moment(0).format('YYYY-MM-DD')},${this.$moment().format('YYYY-MM-DD')}`,
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
payTable: [
|
|
|
|
|
{
|
|
|
|
|
title: "序号",
|
|
|
|
|
fixed: "left",
|
|
|
|
|
align: "center",
|
|
|
|
|
width: 60,
|
|
|
|
|
render: (h, { row, column, index }) => {
|
|
|
|
|
return h(
|
|
|
|
|
"div",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
height: "18px",
|
|
|
|
|
width: "18px",
|
|
|
|
|
"border-radius": "100%",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
background: "#4986cc",
|
|
|
|
|
"text-align": "center",
|
|
|
|
|
"font-size": "12px",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
index + 1
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "地块名称",
|
|
|
|
|
key: "dikuaimingcheng",
|
|
|
|
|
width: 200,
|
|
|
|
|
fixed: "left",
|
|
|
|
|
align: "left",
|
|
|
|
|
render: (h, { row }) => {
|
|
|
|
|
let tags = [
|
|
|
|
|
...row?.land?.map((i) =>
|
|
|
|
|
h(
|
|
|
|
|
"Tag",
|
|
|
|
|
{
|
|
|
|
|
props: {
|
|
|
|
|
type: "dot",
|
|
|
|
|
color: "#3fa45a",
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
background: "#e5f4ea !important",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
i.name
|
|
|
|
|
)
|
|
|
|
|
),
|
|
|
|
|
...row?.houses?.map((i) =>
|
|
|
|
|
h(
|
|
|
|
|
"Tag",
|
|
|
|
|
{
|
|
|
|
|
props: {
|
|
|
|
|
type: "dot",
|
|
|
|
|
color: "#2254e4",
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
background: "#e8edfc !important",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
i.name
|
|
|
|
|
)
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
return h("div", [
|
|
|
|
|
...tags.slice(0, 1),
|
|
|
|
|
h(
|
|
|
|
|
"el-popover",
|
|
|
|
|
{
|
|
|
|
|
props: {
|
|
|
|
|
title: "地块名称",
|
|
|
|
|
width: 200,
|
|
|
|
|
trigger: "hover",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
[
|
|
|
|
|
h(
|
|
|
|
|
"el-link",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
"word-break": "keep-all",
|
|
|
|
|
display: tags.length > 1 ? "inline" : "none",
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
type: "primary",
|
|
|
|
|
},
|
|
|
|
|
slot: "reference",
|
|
|
|
|
},
|
|
|
|
|
"更多"
|
|
|
|
|
),
|
|
|
|
|
h("div", tags),
|
|
|
|
|
]
|
|
|
|
|
),
|
|
|
|
|
]);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: "zujindiyicidaoweishijian",
|
|
|
|
|
title: "租金到位时间",
|
|
|
|
|
width: 180
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: "yingshou",
|
|
|
|
|
title: "应收",
|
|
|
|
|
width: 140,
|
|
|
|
|
render: (h, { row }) => h('div',{ style: { 'text-align': 'right' } },row.yingshou)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: "zulinjieduanjieshuriqi",
|
|
|
|
|
title: "租赁阶段结束日期",
|
|
|
|
|
width: 160
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: "zulinjieduankaishiriqi",
|
|
|
|
|
title: "租赁阶段开始日期",
|
|
|
|
|
width: 160
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: "weidaoweiyuanyin",
|
|
|
|
|
title: "未到位原因",
|
|
|
|
|
minWidth: 140
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
//lease
|
|
|
|
|
radio: 0,
|
|
|
|
|
leaseTableLoading: false,
|
|
|
|
|
leaseSelect: {
|
|
|
|
|
table_name: "leases",
|
|
|
|
|
@ -248,7 +445,7 @@ export default {
|
|
|
|
|
{
|
|
|
|
|
title: "地块名称",
|
|
|
|
|
key: "dikuaimingcheng",
|
|
|
|
|
width: 260,
|
|
|
|
|
width: 200,
|
|
|
|
|
fixed: "left",
|
|
|
|
|
align: "left",
|
|
|
|
|
render: (h, { row }) => {
|
|
|
|
|
@ -285,7 +482,7 @@ export default {
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
return h("div", [
|
|
|
|
|
...tags.slice(0, 3),
|
|
|
|
|
...tags.slice(0, 1),
|
|
|
|
|
h(
|
|
|
|
|
"el-popover",
|
|
|
|
|
{
|
|
|
|
|
@ -301,7 +498,7 @@ export default {
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
"word-break": "keep-all",
|
|
|
|
|
display: tags.length > 3 ? "inline" : "none",
|
|
|
|
|
display: tags.length > 1 ? "inline" : "none",
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
type: "primary",
|
|
|
|
|
@ -565,7 +762,7 @@ export default {
|
|
|
|
|
if (this.status[e] === "临期") {
|
|
|
|
|
let date = this.$moment();
|
|
|
|
|
let preDate = date
|
|
|
|
|
.add(this.config.time, this.config.unit)
|
|
|
|
|
.add(this.config['lease'].time, this.config['lease'].unit)
|
|
|
|
|
.format("YYYY-MM-DD");
|
|
|
|
|
this.leaseSelect.filter[0].value = `${this.$moment().format(
|
|
|
|
|
"YYYY-MM-DD"
|
|
|
|
|
@ -590,20 +787,31 @@ export default {
|
|
|
|
|
this.leaseSelect.page = 1;
|
|
|
|
|
await this.getLeases();
|
|
|
|
|
},
|
|
|
|
|
async radio1Pick (e) {
|
|
|
|
|
if (this.radio1 === e) return;
|
|
|
|
|
this.radio1 = e;
|
|
|
|
|
if (this.status[e] === "临期") {
|
|
|
|
|
this.paySelect.filter[0].value = `${this.$moment().format('YYYY-MM-DD')},${this.$moment().add(this.config?.pay?.time,this.config?.pay?.unit).format('YYYY-MM-DD')}`;
|
|
|
|
|
}
|
|
|
|
|
if (this.status[e] === "已过期") {
|
|
|
|
|
this.paySelect.filter[0].value = `${this.$moment(0).format('YYYY-MM-DD')},${this.$moment().format('YYYY-MM-DD')}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.paySelect.page = 1;
|
|
|
|
|
await this.getLeasePay();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getConfig() {
|
|
|
|
|
const res = await index({
|
|
|
|
|
table_name: "warnings",
|
|
|
|
|
filter: [
|
|
|
|
|
{
|
|
|
|
|
key: "flag",
|
|
|
|
|
op: "eq",
|
|
|
|
|
value: "contract",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
this.config.time = Number(res.data[0]?.time);
|
|
|
|
|
this.config.unit = res.data[0]?.unit;
|
|
|
|
|
let leaseConfig = res.data.find(i => i.flag === 'contract');
|
|
|
|
|
this.config['lease'].time = Number(leaseConfig?.time);
|
|
|
|
|
this.config['lease'].unit = leaseConfig?.unit;
|
|
|
|
|
|
|
|
|
|
let payConfig = res.data.find(i => i.flag === 'pay');
|
|
|
|
|
this.config['pay'].time = Number(payConfig?.time);
|
|
|
|
|
this.config['pay'].unit = payConfig?.unit;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getNotices() {
|
|
|
|
|
@ -638,13 +846,26 @@ export default {
|
|
|
|
|
this.leaseTableLoading = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getLeasePay () {
|
|
|
|
|
try {
|
|
|
|
|
this.payTableLoading = true;
|
|
|
|
|
const res = await index(this.paySelect, false);
|
|
|
|
|
this.pays = res.data;
|
|
|
|
|
this.payTotal = res.total;
|
|
|
|
|
this.statusTotal1[this.radio1] = res.total;
|
|
|
|
|
this.payTableLoading = false;
|
|
|
|
|
} catch (err) {
|
|
|
|
|
this.payTableLoading = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getNotices();
|
|
|
|
|
this.getSystems();
|
|
|
|
|
this.getConfig().then((_) => {
|
|
|
|
|
this.getLeases();
|
|
|
|
|
this.getAssetSafetyPlan();
|
|
|
|
|
this.getLeasePay();
|
|
|
|
|
//this.getAssetSafetyPlan();
|
|
|
|
|
});
|
|
|
|
|
//this.loadData();
|
|
|
|
|
},
|
|
|
|
|
@ -663,6 +884,10 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.page {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ivu-card-body {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
