@@ -2,3 +2,4 @@ | |||||
/ext.json | /ext.json | ||||
/project.config.json | /project.config.json | ||||
/.vscode/** | /.vscode/** | ||||
node_modules |
@@ -0,0 +1,23 @@ | |||||
export let ContractUrl={ | |||||
workflowStart:'/api/workflow/start',//开启审批 | |||||
buildBill:'/api/wxPropertyContract/buildBill',//物业合同生成预账单 | |||||
businessList:"/api/wxBusiness/listAll",//经营业态 | |||||
getPayAccountInfo:'/api/wxRentContract/getPayAccountInfo',//获取商场收银信息 | |||||
savePayAccountInfo:'/api/wxRentContract/savePayAccountInfo',//保存商场收银信息 | |||||
getDateDiff:"/api/wxRentContract/getDateDiff",//获取总租期(时间差 --月--天) | |||||
endContract:"/api/wxRentContract/endContract",//终止合同 | |||||
endPropertyContract:"/api/wxPropertyContract/endContract",//终止物业合同 | |||||
rentPropertyContractFindById:"/api/wxRentPropertyContract/findById", //租金+物业合同详情 | |||||
rentPropertyContractList:"/api/wxRentPropertyContract/list", //租金+物业合同列表 | |||||
updateRentContractStatus:"/api/wxRentContract/updateRentContractStatus",//更改合同状态 | |||||
updatePropertyContractStatus:"/api/wxPropertyContract/updatePropertyContractStatus",//更改合同状态 | |||||
buildBillPriceList:"/api/wxRentContract/buildBillPriceList",//更改周期时间返回账单金额 | |||||
buildPropertyBillPriceList:"/api/wxPropertyContract/buildBillPriceList",//更改周期时间返回账单金额 | |||||
// getContractList:"/api/wxRentContractExtension/getAllContractInfo",//获取所有合同信息 | |||||
getContractList:"/api/wxRentContract/getRentContractList",//获取所有合同信息 | |||||
getContractInfo:"/api/wxRentContract/getXuQianRentContract",//获取合同信息详情 | |||||
// getMerchantIdFromName:"/api/wxRentContractExtension/searchMerchant",//根据搜索词来获取商户id | |||||
getMerchantIdFromName:"/api/wxMerchant//IdAndNamelist",//根据搜索词来获取商户id | |||||
getMerchantShops:"/api/wxRentContract/merchantShops",//根据搜索词来获取商户id | |||||
} |
@@ -0,0 +1,993 @@ | |||||
<template> | |||||
<div class="shop-select"> | |||||
<el-form ref="form" :model="formData" :rules="rules" label-width="130px"> | |||||
<div class="public_part_Box"> | |||||
<el-form-item label="选择计算方式" prop="type" class="fx_send"> | |||||
<el-select | |||||
v-model="formData.type" | |||||
@input="changeFormData('type', $event)" | |||||
placeholder="请先选择计算方式" | |||||
class="select-method" | |||||
> | |||||
<el-option | |||||
v-for="index in computedTypes" | |||||
:key="index.value" | |||||
:value="index.value" | |||||
:label="index.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="计租面积" prop="rentArea" class="fx_title numberInputBox"> | |||||
<span>共计</span> | |||||
<span>{{getTotleRentArea+'㎡'}}</span> | |||||
</el-form-item> | |||||
<el-form-item label="" prop="" class="fx_title numberInputBox" style="margin-bottom:0;"> | |||||
<div class="price-list" style="padding-left:0;"> | |||||
<div class="p-list" style="margin-left:0;" v-for="(item,index) in rentInfo" :key="index"> | |||||
<div class="price-items" style="margin-left:0;"> | |||||
<div class="price-title">{{item.shopNumber+"号商铺"}}</div> | |||||
<div class="price-input"> | |||||
<el-input | |||||
:value="item.rentArea" | |||||
@input="changeArea(index, 'rentArea', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="price-unit">㎡</div> | |||||
</div> | |||||
</div> | |||||
</el-form-item> | |||||
<el-form-item | |||||
label="租金录入" | |||||
prop | |||||
class="fx_title numberInputBox" | |||||
v-if="rentInfo.length>1&&formData.type!=2" | |||||
> | |||||
<el-radio-group | |||||
size="small" | |||||
:value="formData.rentInputWay" | |||||
@input="changeFormData('rentInputWay', $event)" | |||||
style="" | |||||
> | |||||
<el-radio-button label="1" value="1">合铺录入</el-radio-button> | |||||
<el-radio-button label="2" value="2">分铺录入</el-radio-button> | |||||
</el-radio-group> | |||||
</el-form-item> | |||||
<div v-if="formData.type==1||formData.type==3"> | |||||
<div v-if="formData.rentInputWay==2"> | |||||
<el-form-item label="租赁单价" prop="priceUnit" class="fx_title numberInputBox"> | |||||
<el-radio-group | |||||
style="margin-left:20px;" | |||||
:value="formData.priceUnit" | |||||
@input="changeFormData('priceUnit', $event)" | |||||
size="small" | |||||
> | |||||
<el-radio-button | |||||
v-for="(item,index) in priceUnitOption" | |||||
:key="index" | |||||
:label="item.value" | |||||
>{{item.name}}</el-radio-button> | |||||
</el-radio-group> | |||||
</el-form-item> | |||||
<el-form-item label prop="priceUnit" class="fx_title numberInputBox"> | |||||
<div class="p-list" v-for="(item,index) in rentInfo" :key="index"> | |||||
<div class="price-items"> | |||||
<div class="price-title">{{item.shopNumber+"号商铺"}}</div> | |||||
<div class="price-input"> | |||||
<el-input | |||||
:value="item.rentPrice" | |||||
@input="changeArea(index, 'rentPrice', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="price-unit"> 元/㎡ </div> | |||||
</div> | |||||
</el-form-item> | |||||
</div> | |||||
<!-- 合铺 --> | |||||
<div v-else> | |||||
<el-form-item | |||||
label="租赁单价" | |||||
v-if="formData.type==1||formData.type==3" | |||||
prop="priceUnit" | |||||
class="fx_title numberInputBox" | |||||
> | |||||
<el-input | |||||
style="width:160px" | |||||
:value="formData.rentPrice" | |||||
@input="changeAllArea('rentPrice', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> 元/㎡ | |||||
<el-radio-group | |||||
:value="formData.priceUnit" | |||||
@input="changeFormData('priceUnit', $event)" | |||||
size="small" | |||||
> | |||||
<el-radio-button | |||||
v-for="(item,index) in priceUnitOption" | |||||
:key="index" | |||||
:label="item.value" | |||||
>{{item.name}}</el-radio-button> | |||||
</el-radio-group> | |||||
</el-form-item> | |||||
</div> | |||||
</div> | |||||
<div v-if="formData.rentInputWay==2"> | |||||
<el-form-item | |||||
label="租金" | |||||
prop="price" | |||||
v-if="formData.type==1||formData.type==3" | |||||
class="fx_send" | |||||
> | |||||
<span>共计</span> | |||||
<span>{{getTotlePrice+'元'}}</span> | |||||
</el-form-item> | |||||
<div class="price-list" v-if="formData.type==1||formData.type==3"> | |||||
<div class="p-list" v-for="(item,index) in rentInfo" :key="index"> | |||||
<div class="price-items"> | |||||
<div class="price-title">{{item.shopNumber+"号商铺"}}</div> | |||||
<div class="price-input"> | |||||
<el-input | |||||
:value="item.price" | |||||
@input="changePrice(index, 'price', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="price-unit">元/{{changeUnitType}}</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div v-else> | |||||
<el-form-item | |||||
label="租金" | |||||
prop | |||||
v-if="formData.type==1||formData.type==3" | |||||
class="fx_send reprice" | |||||
> | |||||
<el-input | |||||
style="width:160px" | |||||
:value="formData.price" | |||||
@input="changeAllPrice('price', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
元/{{changeUnitType}} | |||||
</el-form-item> | |||||
</div> | |||||
<el-form-item label="保底营业额" v-if="formData.type==2" prop="revenue" class="fx_title"> | |||||
<el-input | |||||
:value="formData.revenue" | |||||
@input="changeFormData('revenue', $event)" | |||||
placeholder="请输入保底营业额金额" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
<span class="per"> 元/{{changeUnitType}}</span> | |||||
</el-form-item> | |||||
<el-form-item | |||||
label="联营扣点率" | |||||
v-if="formData.type==2||formData.type==3" | |||||
prop="payRatio" | |||||
class="fx_title numberInputBox"> | |||||
<el-input | |||||
type="number" | |||||
v-if="formData.busDiscountRatio==''" | |||||
v-model="formData.payRatio" | |||||
@input="changeFormData('payRatio', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
<span v-show="formData.busDiscountRatio==''" class="per" style="margin-right:30px;"> %</span> | |||||
<el-button @click="jumpRateSet" size="small" class="jump-rate-set" type="primary">跳点设置</el-button> | |||||
<!-- ul --> | |||||
<show-rate-list v-show="formData.busDiscountRatio!=''"></show-rate-list> | |||||
</el-form-item> | |||||
<div v-if="formData.rentInputWay==2"> | |||||
<el-form-item label="押金" prop="deposit" class="fx_send"> | |||||
<span>共计</span> | |||||
<span> {{getTotleDeposit+'元'}}</span> | |||||
</el-form-item> | |||||
<div class="price-list"> | |||||
<div class="p-list" v-for="(item,index) in rentInfo" :key="index"> | |||||
<div class="price-items"> | |||||
<div class="price-title">{{item.shopNumber+"号商铺"}}</div> | |||||
<div class="price-input"> | |||||
<el-input | |||||
:value="item.deposit" | |||||
@input="changePrice(index, 'deposit', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
</div> | |||||
</div> | |||||
<!-- <div class="price-unit">元</div> --> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div v-else> | |||||
<el-form-item label="押金" prop class="fx_send reprice"> | |||||
<el-input | |||||
style="width:160px" | |||||
:value="formData.deposit" | |||||
@input="changeAllPrice('deposit', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> 元 | |||||
</el-form-item> | |||||
</div> | |||||
<el-form-item label="年租金调整" prop class="fx_send" v-if="rentInfo[0]&&rentInfo[0].adjustRatio&&rentInfo[0].adjustRatio.length>0"> | |||||
<el-radio-group | |||||
:value="formData.adjustRatioWay" | |||||
@input="changeFormData('adjustRatioWay', $event)" | |||||
size="small" | |||||
style="" | |||||
> | |||||
<el-radio-button label="1" value="1">比例上调</el-radio-button> | |||||
<el-radio-button label="2" value="2">固定上调</el-radio-button> | |||||
<el-radio-button label="3" value="3">自定义</el-radio-button> | |||||
</el-radio-group> | |||||
<!-- <help title content="年租金调整为固定上调,请在输入框中输入需要上调的比例或金额"></help> --> | |||||
</el-form-item> | |||||
<div class="price-list" v-for="(items,indexs) in rentInfo" :key="indexs" v-if="(formData.type==1||formData.type==3)&&rentInfo[0].adjustRatio.length>0&&formData.rentInputWay==2"> | |||||
<div class="pss">{{items.shopNumber+"号商铺"}}</div> | |||||
<div class="pss-c"> | |||||
<div class="p-list" v-for="(item,index) in items.adjustRatio" :key="index"> | |||||
<div class="price-items"> | |||||
<div class="price-title">{{'第'+(index+2)+'年'}}</div> | |||||
<div class="price-input"> | |||||
<el-input | |||||
:value="item" | |||||
@input="changePer(indexs, index, $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="price-unit" v-if="formData.adjustRatioWay==1">%</div> | |||||
<div class="price-unit" v-else>元/{{changeUnitType}}</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="price-list" v-if="formData.type==2||formData.rentInputWay==1"> | |||||
<div class="pss-c"> | |||||
<div class="p-list" style="margin-left:0;" v-for="(item,index) in formData.adjustRatio" :key="index"> | |||||
<div class="price-items" style="margin-left:0;"> | |||||
<div class="price-title">{{'第'+(index+2)+'年'}}</div> | |||||
<div class="price-input"> | |||||
<el-input | |||||
:value="item" | |||||
@input="changePer02(index, $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="price-unit" v-if="formData.adjustRatioWay==1">%</div> | |||||
<div class="price-unit" v-else>元/{{changeUnitType}}</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<el-form-item label="付款周期" prop="receivePeriod" class="paydata"> | |||||
<el-select | |||||
:value="formData.receivePeriod" | |||||
filterable | |||||
@input="changeFormData('receivePeriod', $event)" | |||||
class="select-method innerinput" | |||||
style="width:150px" | |||||
> | |||||
<el-option | |||||
v-for="index in cycles" | |||||
:key="index.value" | |||||
:value="index.value" | |||||
:label="index.label" | |||||
></el-option> | |||||
</el-select> | |||||
<!-- <el-input-number v-if="formData.priceUnit==1" :value="formData.receivePeriod" @input="changeFormData('receivePeriod', $event)" controls-position="right" :min="1" :max="365"></el-input-number> --> | |||||
<span class="per">月</span> | |||||
</el-form-item> | |||||
<el-form-item | |||||
label="滞纳金费率" | |||||
prop='latePayRatio' | |||||
> | |||||
<el-input | |||||
style="width:160px" | |||||
:value="formData.latePayRatio" | |||||
@input="changeAllPrice('latePayRatio', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
% | |||||
<span style="margin-left:50px;"> | |||||
欠缴后 <el-input | |||||
style="width:160px" | |||||
:value="formData.latePayDay" | |||||
@input="changeAllPrice('latePayDay', $event)" | |||||
placeholder="请输入" | |||||
maxlength="10" | |||||
clearable | |||||
></el-input> | |||||
日开始计费 | |||||
</span> | |||||
<help title content="例如:“0”为欠缴当天开始计滞纳金"></help> | |||||
</el-form-item> | |||||
</div> | |||||
</el-form> | |||||
<!-- --> | |||||
<jump-rate-set ref="jumpRateSetDialog"></jump-rate-set> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import help from "../../help.vue"; | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil.js"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import jumpRateSet from '../rent/jumpRateSet.vue'; | |||||
import showRateList from '../rent/showRateList.vue'; | |||||
// import {CouponUrl} from "./UrlEnum.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import moment from "moment"; | |||||
export default { | |||||
name: "shopListDg", | |||||
props: ["tKey", "cb", "formDataList"], | |||||
components: { | |||||
TableList, | |||||
help, | |||||
jumpRateSet, | |||||
showRateList, | |||||
}, | |||||
data() { | |||||
return { | |||||
...mapActions(["setRentInfo", "setFormData"]), | |||||
//跳点数据对象 | |||||
rentInfos: [], | |||||
activeType: 1, | |||||
formDataLists: this.formDataList, | |||||
totlePrice: 0, | |||||
totleRentPrice: 0, | |||||
totleDeposit: 0, | |||||
priceUnitOption: ContractData.priceUnitOption, | |||||
//计租计算方式 | |||||
computedTypes: ContractData.computedTypes, | |||||
cycles: ContractData.cycles, | |||||
rules: { | |||||
rentArea: [ | |||||
{ | |||||
required: true, | |||||
message: "抱歉,计租面积为必填项", | |||||
trigger: "blur" | |||||
}, | |||||
], | |||||
revenue: [ | |||||
{ | |||||
required: true, | |||||
pattern: /.+/, | |||||
message: "抱歉,不能识别您输入的营业额", | |||||
trigger: "blur" | |||||
}, | |||||
{ | |||||
validator(rule, value, callback, source, options) { | |||||
var errors = []; | |||||
const reg = /(^[0-9]\d*(\.\d{1,2})?$)|(^1(\.\d{1,2})?$)/; | |||||
if (!reg.test(value)) { | |||||
callback("抱歉,营业额限制为数字"); | |||||
} else { | |||||
if (typeof value == "string") { | |||||
if (value.split(".")[0].length > 7) { | |||||
callback("最大金额为9999999.99"); | |||||
} | |||||
} | |||||
} | |||||
callback(errors); | |||||
} | |||||
} | |||||
], | |||||
receivePeriod: [ | |||||
{ | |||||
required: true, | |||||
trigger: "change", | |||||
message: "抱歉,不能识别您输入的付款周期" | |||||
} | |||||
], | |||||
price: [ | |||||
{ | |||||
required: true, | |||||
message: "抱歉,不能识别您选择的计算方式", | |||||
trigger: "change" | |||||
} | |||||
], | |||||
deposit: [ | |||||
{ | |||||
required: true, | |||||
message: "抱歉,不能识别您选择的计算方式", | |||||
trigger: "change" | |||||
} | |||||
], | |||||
payRatio: [ | |||||
{ | |||||
required: true, | |||||
message: "抱歉,不能识别您输入的联营扣点比例", | |||||
trigger: "change" | |||||
}, | |||||
{ | |||||
validator(rule, value, callback, source, options) { | |||||
var errors = []; | |||||
if (value < 0 || value > 100) { | |||||
callback('抱歉,不能识别您输入的联营扣点比例'); | |||||
} | |||||
callback(errors); | |||||
} | |||||
} | |||||
], | |||||
type: [ | |||||
{ | |||||
required: true, | |||||
message: "抱歉,不能识别您选择的计算方式", | |||||
trigger: "change" | |||||
} | |||||
] | |||||
} | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
rentInfo: state => state.setRentInfo.rentInfo, | |||||
formData: state => state.setRentInfo.formData | |||||
}), | |||||
getFreceveperiodUnit() { | |||||
return this.formData.priceUnit == 1 ? "日" : "月"; | |||||
}, | |||||
changeUnitType() { | |||||
console.log(this.priceUnitOption) | |||||
console.log(this.formData) | |||||
return this.priceUnitOption.filter( | |||||
e => e.value == this.formData.priceUnit | |||||
)[0].name; | |||||
}, | |||||
getTotlePrice() { | |||||
this.totlePrice = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.totlePrice += Number(item.price) * 100; | |||||
}); | |||||
return this.totlePrice ? (this.totlePrice / 100).toFixed(2) : "--"; | |||||
}, | |||||
getTotleDeposit() { | |||||
this.totleDeposit = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.totleDeposit += Number(item.deposit); | |||||
}); | |||||
return this.totleDeposit ? this.totleDeposit.toFixed("2") : "--"; | |||||
}, | |||||
getTotleRentArea() { | |||||
this.rentArea = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.rentArea += Number(item.rentArea); | |||||
}); | |||||
this.rentArea = this.rentArea ? this.rentArea.toFixed("2") : "--"; | |||||
return this.rentArea; | |||||
}, | |||||
//获取租金单价的集合 | |||||
total() { | |||||
let total = null; | |||||
this.rentInfo.map(item => { | |||||
if (item.rentPrice == undefined) { | |||||
total = null; | |||||
} else { | |||||
total += Number(item.rentPrice); | |||||
} | |||||
}); | |||||
return total; | |||||
}, | |||||
deposit() { | |||||
let total = null; | |||||
this.rentInfo.map(item => { | |||||
total += Number(item.deposit); | |||||
}); | |||||
return total; | |||||
}, | |||||
price() { | |||||
let total = null; | |||||
this.rentInfo.map(item => { | |||||
total += Number(item.price); | |||||
}); | |||||
return total; | |||||
} | |||||
}, | |||||
methods: { | |||||
// 打开jumpRateSet 跳点设置弹框组件 | |||||
jumpRateSet() { | |||||
this.$refs['jumpRateSetDialog'].openDialog(); | |||||
}, | |||||
/** | |||||
* 分铺修改租赁面积 | |||||
*/ | |||||
changeArea(index, type, val) { | |||||
let arr = JSON.parse(JSON.stringify(this.rentInfo)); | |||||
arr[index][type] = val; | |||||
arr[index].price = ( | |||||
(Number(arr[index]["rentPrice"] * 100) * | |||||
Number(arr[index]["rentArea"] * 100)) / | |||||
10000 | |||||
).toFixed(2); | |||||
this.setRentInfo(arr); | |||||
}, | |||||
/** | |||||
* 合铺修改租赁面积 | |||||
*/ | |||||
changeAllArea(type, val) { | |||||
let formData = JSON.parse(JSON.stringify(this.formData)); | |||||
formData[type] = val; | |||||
if (type == "rentPrice") { | |||||
let price = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
price += Number(item.rentArea) * Number(val); | |||||
}); | |||||
formData.price = price.toFixed(2); | |||||
} | |||||
this.setFormData(formData); | |||||
}, | |||||
/** | |||||
* 表单校验 | |||||
*/ | |||||
checkFormRule(editType) { | |||||
let errorMessage = ""; | |||||
let haveError = false; | |||||
let indexs01 = 0; | |||||
let indexs02 = 0; | |||||
const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; | |||||
const regInt = /^[0-9]+$/; | |||||
this.rentInfo.map((item, index) => { | |||||
if ( | |||||
!reg.test(item.rentArea) || | |||||
Number(item.rentArea) >= 10000000 || | |||||
Number(item.rentArea) < 0 | |||||
) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺号为" + | |||||
item.shopNumber + | |||||
"的商铺计租面积限制为大于等于0且小于10000000的数字且最多保留两位小数!"; | |||||
} | |||||
}); | |||||
if (haveError) { | |||||
this.$message.error(errorMessage); | |||||
return true; | |||||
} | |||||
if(!this.formData.deposit && this.formData.deposit !== 0 && (this.formData.rentInputWay == 1||this.formData.type ==2)){ | |||||
this.$message.error('抱歉,押金为必填项!') | |||||
return true; | |||||
} | |||||
//年租金调整限制 | |||||
if (this.formData.rentInputWay == 1 &&this.formData.adjustRatioWay == 1) { | |||||
this.formData.adjustRatio.map((item, index) => { | |||||
if (!reg.test(item) || Number(item) > 50 || Number(item) < 0) { | |||||
haveError = true; | |||||
errorMessage = "抱歉,租金调整比例限制为0%~50%且最多保留两位小数!"; | |||||
} | |||||
}); | |||||
} else if (this.formData.rentInputWay == 1 &&(this.formData.adjustRatioWay == 2||this.formData.adjustRatioWay == 3)) { | |||||
this.formData.adjustRatio.map((item, index) => { | |||||
if (!reg.test(item)||Number(item)>=10000000) { | |||||
haveError = true; | |||||
errorMessage = this.formData.adjustRatioWay == 2?"抱歉,租金调整金额限制为大于0小于10000000的数字且最多保留两位小数!":"抱歉,租金调整自定义金额限制为大于0小于10000000的数字且最多保留两位小数!"; | |||||
} | |||||
}); | |||||
} | |||||
if (haveError) { | |||||
this.$message.error(errorMessage); | |||||
return true; | |||||
} | |||||
//分铺租金验证 | |||||
if ( | |||||
(this.formData.type == "1" || this.formData.type == "3") && this.formData.rentInputWay == 2 | |||||
) { | |||||
this.rentInfo.map((item, index) => { | |||||
if ( | |||||
!reg.test(item.price) || | |||||
Number(item.price) >= 10000000 || | |||||
(editType === 1 ? Number(item.price) < 0 : Number(item.price) <= 0) | |||||
) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺号为" + | |||||
item.shopNumber + | |||||
(editType === 1 | |||||
? "的商铺租金金额不合法!" | |||||
: "的商铺租金金额限制为大于0且小于10000000的数字且最多保留两位小数!"); | |||||
} | |||||
}); | |||||
if (haveError) { | |||||
this.$message.error(errorMessage); | |||||
return true; | |||||
} | |||||
if (this.formData.rentInputWay == 2&&this.formData.type!=2) { | |||||
this.rentInfo.map((item, index) => { | |||||
if ( | |||||
!reg.test(item.rentPrice) || | |||||
Number(item.rentPrice) >= 10000000 || | |||||
Number(item.rentPrice) < 0 | |||||
) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺号为" + | |||||
item.shopNumber + | |||||
"的商铺租金单价限制为大于等于0且小于10000000的数字且最多保留两位小数!"; | |||||
} | |||||
}); | |||||
} | |||||
} else if (this.formData.rentInputWay == 1 && this.formData.type != 2) { | |||||
if ( | |||||
!reg.test(this.formData.rentPrice) || | |||||
Number(this.formData.rentPrice) >= 10000000 || | |||||
Number(this.formData.rentPrice) < 0 | |||||
) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺租金单价限制为大于等于0且小于10000000的数字且最多保留两位小数!"; | |||||
} | |||||
} | |||||
if (haveError) { | |||||
this.$message.error(errorMessage); | |||||
return true; | |||||
} | |||||
//合铺租金验证 | |||||
if((this.formData.type == "1" || this.formData.type == "3") && this.formData.rentInputWay == 1){ | |||||
if ( | |||||
!reg.test(this.formData.price) || | |||||
Number(this.formData.price) >= 10000000 || | |||||
Number(this.formData.price) <= 0 | |||||
) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺租金限制为大于0且小于10000000的数字且最多保留两位小数!"; | |||||
} | |||||
} | |||||
if (this.formData.type == 2 && | |||||
(!reg.test(this.formData.revenue) || | |||||
Number(this.formData.revenue) >= 10000000 || | |||||
Number(this.formData.revenue) < 0) | |||||
) { | |||||
this.$message.error( | |||||
"抱歉,保底营业额大于等于0且小于10000000的数字且最多保留两位小数!" | |||||
); | |||||
return true; | |||||
} | |||||
if (this.formData.type == "2" || this.formData.type == "3") { | |||||
if (this.formData.busDiscountRatio == '') { | |||||
if ( | |||||
!reg.test(this.formData.payRatio) || | |||||
Number(this.formData.payRatio) > 100 | |||||
) { | |||||
this.$message.error( | |||||
"抱歉,联营扣点数值限制为大于0%~100%且最多保留两位小数!" | |||||
); | |||||
return true; | |||||
} | |||||
} else { | |||||
this.formData.payRatio = 0; | |||||
} | |||||
} | |||||
console.log(this.formData.deposit) | |||||
console.log(this.rentInfo); | |||||
this.rentInfo.map((item, index) => { | |||||
console.log(item.deposit) | |||||
if ( | |||||
!reg.test(item.deposit) || | |||||
Number(item.deposit) >= 10000000 || | |||||
Number(item.deposit) < 0 | |||||
) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺号为" + | |||||
item.shopNumber + | |||||
"押金金额限制为大于等于0且小于10000000的数字且最多保留两位小数!"; | |||||
} | |||||
}); | |||||
if (haveError) { | |||||
this.$message.error(errorMessage); | |||||
return true; | |||||
} | |||||
if ( | |||||
this.formData.adjustRatioWay == 1 && | |||||
this.formData.rentInputWay == 2 | |||||
) { | |||||
this.rentInfo.map((item, index) => { | |||||
console.log(item) | |||||
item.adjustRatio.map((item01, index01) => { | |||||
if (!reg.test(item01) || Number(item01) > 50) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺号为" + | |||||
item.shopNumber + | |||||
"的第" + | |||||
(index01 + 2) + | |||||
"年" + | |||||
"租金调整比例限制为0%~50%且最多保留两位小数!"; | |||||
} | |||||
}); | |||||
}); | |||||
} else if ( | |||||
(this.formData.adjustRatioWay == 2||this.formData.adjustRatioWay == 3) && | |||||
this.formData.rentInputWay == 2 | |||||
) { | |||||
this.rentInfo.map((item, index) => { | |||||
item.adjustRatio.map((item01, index01) => { | |||||
if (!reg.test(item01)||Number(item01)>=10000000) { | |||||
haveError = true; | |||||
errorMessage = | |||||
"抱歉,商铺号为" + | |||||
item.shopNumber + | |||||
"的第" + | |||||
(index01 + 2) + | |||||
"年" + | |||||
(this.formData.adjustRatioWay == 2?"租金":"自定义租金")+"调整限制大于0小于10000000的数字且最多保留两位小数!"; | |||||
} | |||||
}); | |||||
}); | |||||
} | |||||
if (haveError) { | |||||
this.$message.error(errorMessage); | |||||
return true; | |||||
} | |||||
if (!this.formData.receivePeriod) { | |||||
this.$message.error("抱歉,付款周期为必填项!"); | |||||
return true; | |||||
} | |||||
if ((!reg.test(this.formData.latePayRatio)||Number(this.formData.latePayRatio)>100)&&this.formData.latePayRatio!='') { | |||||
this.$message.error("抱歉,滞纳金费率限制为大于等于0%小于100%且最多保留两位小数!"); | |||||
return true; | |||||
} | |||||
if ((!regInt.test(this.formData.latePayDay)||Number(this.formData.latePayDay)>1000)&&this.formData.latePayDay!='') { | |||||
this.$message.error("抱歉,滞纳金费率计算开始时间限制为限制为0~1000的整数!"); | |||||
return true; | |||||
} | |||||
this.postRentinfo(); | |||||
}, | |||||
changeFormData(type, val) { | |||||
let formData = JSON.parse(JSON.stringify(this.formData)); | |||||
formData[type] = val; | |||||
if (type == "type" && val == 2) { | |||||
formData.priceUnit = 2; | |||||
} | |||||
this.setFormData(formData); | |||||
}, | |||||
changePrice(index, type, val) { | |||||
let arr = JSON.parse(JSON.stringify(this.rentInfo)); | |||||
arr[index][type] = val; | |||||
this.setRentInfo(arr); | |||||
}, | |||||
//合铺租金 | |||||
// changeAllPrice(type, val) { | |||||
// let formData = JSON.parse(JSON.stringify(this.formData)); | |||||
// formData[type] = val; | |||||
// if (type == "type" && val == 2) { | |||||
// formData.priceUnit = 2; | |||||
// } | |||||
// this.setFormData(formData); | |||||
// }, | |||||
//合铺租金 | |||||
changeAllPrice(type, val) { | |||||
let formData = JSON.parse(JSON.stringify(this.formData)); | |||||
formData[type] = val; | |||||
if (type == "type" && val == 2) { | |||||
formData.priceUnit = 2; | |||||
} | |||||
this.setFormData(formData); | |||||
if (type == 'deposit') { | |||||
let curRentInfo = Object.assign([],this.rentInfo); | |||||
curRentInfo.forEach(item => { | |||||
item.deposit = formData.deposit; | |||||
}) | |||||
this.setRentInfo(curRentInfo); | |||||
} | |||||
}, | |||||
changePer02(index02, val) { | |||||
let formData = JSON.parse(JSON.stringify(this.formData)); | |||||
formData.adjustRatio[index02] = val; | |||||
this.setFormData(formData); | |||||
}, | |||||
changePer(index01, index02, val) { | |||||
const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; | |||||
if (this.formData.adjustRatioWay == 1) { | |||||
if (Number(val) > 100 || Number(val) < 0) { | |||||
return; | |||||
} else { | |||||
let arr = JSON.parse(JSON.stringify(this.rentInfo)); | |||||
arr[index01]["adjustRatio"][index02] = val; | |||||
this.setRentInfo(arr); | |||||
} | |||||
} else { | |||||
if (Number(val) < 0) { | |||||
return; | |||||
} else { | |||||
let arr = JSON.parse(JSON.stringify(this.rentInfo)); | |||||
arr[index01]["adjustRatio"][index02] = val; | |||||
this.setRentInfo(arr); | |||||
} | |||||
} | |||||
}, | |||||
//按计租和联营扣点显示不同内容 | |||||
computedChange(item) { | |||||
this.formData.type = item; | |||||
}, | |||||
//合铺将年租金调整比例加入rentinfo | |||||
postRentinfo() { | |||||
if (this.formData.rentInputWay == 1) { | |||||
let formData = JSON.parse(JSON.stringify(this.formData)); | |||||
let arr = JSON.parse(JSON.stringify(this.rentInfo)); | |||||
arr.map((item, index) => { | |||||
item.adjustRatio = formData.adjustRatio; | |||||
}); | |||||
this.setRentInfo(arr); | |||||
} | |||||
} | |||||
}, | |||||
created() { | |||||
console.log(this.formData); | |||||
console.log(this.rentInfo); | |||||
console.log(this.formDataList,"formDataList"); | |||||
if (!this.formData.rentInputWay) { | |||||
this.formData.rentInputWay = 1; | |||||
} | |||||
if (!this.formData.adjustRatioWay) { | |||||
this.formData.adjustRatioWay = 1; | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
ul { | |||||
list-style-type: none; | |||||
} | |||||
.price-list { | |||||
width: 100%; | |||||
height: auto; | |||||
overflow: hidden; | |||||
padding-left: 130px; | |||||
margin-bottom: 22px; | |||||
} | |||||
.pss { | |||||
width: 100px; | |||||
height: auto; | |||||
float: left; | |||||
line-height: 60px; | |||||
} | |||||
.pss-c { | |||||
width: calc(100%-160px); | |||||
height: auto; | |||||
float: left; | |||||
} | |||||
.p-list { | |||||
width: auto; | |||||
float: left; | |||||
overflow: hidden; | |||||
margin: 0 10px; | |||||
} | |||||
.price-items { | |||||
float: left; | |||||
height: 40px; | |||||
overflow: hidden; | |||||
border: 1px solid #dcdfe6; | |||||
border-radius: 4px; | |||||
margin: 10px; | |||||
} | |||||
.price-title { | |||||
width: auto; | |||||
padding: 0 10px; | |||||
line-height: 40px; | |||||
float: left; | |||||
background: #f5f7fa; | |||||
color: #909399; | |||||
border-right: 1px solid #dcdfe6; | |||||
} | |||||
.price-unit { | |||||
width: auto; | |||||
/* padding: 0 10px; */ | |||||
line-height: 60px; | |||||
float: left; | |||||
color: #909399; | |||||
} | |||||
.price-input { | |||||
float: left; | |||||
width: 130px; | |||||
} | |||||
.fx_title .el-input { | |||||
width: 211px; | |||||
} | |||||
.el-dialog { | |||||
width: 565px !important; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .draftBtn, | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
width: 76px; | |||||
height: 35px; | |||||
font-size: 14px; | |||||
padding: 10px 20px; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn { | |||||
margin-right: 7.5px; | |||||
background: RGBA(255, 255, 255, 1); | |||||
color: #555555; | |||||
border: 1px solid #e1e6ea; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
margin-left: 7.5px; | |||||
background: rgba(90, 118, 191, 1); | |||||
color: #ffffff; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn:hover { | |||||
background: RGBA(255, 255, 255, 0.88); | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn:hover { | |||||
background: rgba(90, 118, 191, 0.88); | |||||
} | |||||
.shop-select /deep/ .el-form-item { | |||||
margin-bottom: 18px; | |||||
} | |||||
</style> | |||||
<style> | |||||
.reprice > .el-form-item__label:before { | |||||
content: "*"; | |||||
color: #f56c6c; | |||||
margin-right: 4px; | |||||
} | |||||
.price-input .el-input__inner { | |||||
height: 40px; | |||||
border: 0; | |||||
} | |||||
.div { | |||||
overflow: hidden; | |||||
} | |||||
.shop-select .el-dialog__title { | |||||
padding-left: 10px; | |||||
} | |||||
</style> |
@@ -0,0 +1,217 @@ | |||||
<template> | |||||
<div> | |||||
<el-dialog | |||||
title="选择商户" | |||||
:visible="dialogVisible" | |||||
width="800px" | |||||
:before-close="handleClose" | |||||
:modal-append-to-body="false" | |||||
class="fx_dialog_list_chooseSH" | |||||
> | |||||
<div style="width:100%"> | |||||
<!-- aaa 添加搜索功能 --> | |||||
<el-form | |||||
:inline="true" | |||||
:model="curRuleForm" | |||||
ref="curRuleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="商户名" prop="merchantName" class="fx_title" style="float:left;"> | |||||
<el-input v-model.trim="curRuleForm.merchantName" placeholder="请输入商户名" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item style="float:left;"> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<table-list :ref="tKeynew" :options="optionsTable"></table-list> | |||||
</div> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button class="draftBtn" @click="dialogVisible = false">取 消</el-button> | |||||
<el-button class="putinBtn" @click="getSelectedShop()">确 定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil.js"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
export default { | |||||
name: "shopListDgnew", | |||||
props: ["tKeynew", "cbnew", "shopsType"], | |||||
components: { | |||||
TableList | |||||
}, | |||||
data() { | |||||
return { | |||||
dialogVisible: false, | |||||
curRuleForm: { | |||||
building: "", | |||||
floor: "", | |||||
merchantName: "", | |||||
}, | |||||
floorArr: [], | |||||
buildingArr: [], | |||||
optionsTable: { | |||||
singleSelected: true, | |||||
showCk: true, | |||||
map: [ | |||||
{ | |||||
key: "name", | |||||
val: "商户名" | |||||
}, | |||||
{ | |||||
key: "linkPerson", | |||||
val: "联系人" | |||||
}, | |||||
{ | |||||
key: "linkPhone", | |||||
val: "联系方式" | |||||
}, | |||||
{ | |||||
key: "shoplist", | |||||
val: "商铺号", | |||||
convert: this.changeShop | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return "/api/wxMerchant/listVo?rentShopType=1&type=1&status=1" | |||||
+ "&name=" + this.curRuleForm.merchantName | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.list, | |||||
count: data.data.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}), | |||||
}, | |||||
methods: { | |||||
search: function() { | |||||
let tKey = this.$refs[this.tKeynew]; | |||||
tKey.search(tKey.getParams().index); | |||||
}, | |||||
openDialog() { | |||||
this.dialogVisible = true; | |||||
}, | |||||
changeShop(col, item) { | |||||
let str = ""; | |||||
item.shoplist.map((item, index) => { | |||||
str = str != "" ? str + "," + item.shopNumber : item.shopNumber; | |||||
}); | |||||
return str; | |||||
}, | |||||
handleClose() { | |||||
this.dialogVisible = false; | |||||
}, | |||||
getSelectedShop() { | |||||
let items = this.$refs[this.tKeynew].getCheckedItems("id"); | |||||
if (items.data.length < 1) { | |||||
this.$message({ | |||||
type: "error", | |||||
message: "抱歉,不能识别您选择的商铺" | |||||
}); | |||||
return; | |||||
} else { | |||||
this.cbnew(items); | |||||
} | |||||
this.dialogVisible = false; | |||||
} | |||||
}, | |||||
mounted: function() { | |||||
}, | |||||
created() {} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.el-dialog { | |||||
width: 565px !important; | |||||
} | |||||
.el-dialog { | |||||
width: 565px !important; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .draftBtn, | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
width: 76px; | |||||
height: 35px; | |||||
font-size: 14px; | |||||
padding: 10px 20px; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn { | |||||
margin-right: 7.5px; | |||||
background: RGBA(255, 255, 255, 1); | |||||
color: #555555; | |||||
border: 1px solid #e1e6ea; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
margin-left: 7.5px; | |||||
background: rgba(90, 118, 191, 1); | |||||
color: #ffffff; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn:hover { | |||||
background: RGBA(255, 255, 255, 0.88); | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn:hover { | |||||
background: rgba(90, 118, 191, 0.88); | |||||
} | |||||
</style> | |||||
<style> | |||||
/* .el-dialog { | |||||
width: 800px !important; | |||||
} */ | |||||
.div { | |||||
over-flow: hidden; | |||||
} | |||||
</style> |
@@ -0,0 +1,262 @@ | |||||
<template> | |||||
<div v-if="dialogVisible" class="shop-select"> | |||||
<el-dialog | |||||
:title="shopsType==1?'选择商铺':'选择多经点位商铺'" | |||||
:visible="dialogVisible" | |||||
width="800px" | |||||
:before-close="handleClose" | |||||
:modal-append-to-body="false" | |||||
class="fx_dialog_list_chooseSH" | |||||
> | |||||
<div style="width:100%"> | |||||
<!-- aaa 添加搜索功能 --> | |||||
<el-form | |||||
:inline="true" | |||||
:model="curRuleForm" | |||||
ref="curRuleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="楼座" prop="building" class="fx_send pl_10"> | |||||
<el-select | |||||
style="width:130px;" | |||||
v-model="curRuleForm.building" | |||||
placeholder="请选择" | |||||
@change="changeBuilding" | |||||
clearable | |||||
> | |||||
<el-option | |||||
v-for="(item,index) in buildingArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼层" prop="floor" class="fx_send"> | |||||
<el-select v-model="curRuleForm.floor" placeholder="请选择" clearable style="width:130px;"> | |||||
<el-option | |||||
v-for="(item,index) in floorArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.floorName" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="" prop="shopNumber" class="fx_title"> | |||||
<el-input v-model.trim="curRuleForm.shopNumber" placeholder="请输入商铺号" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<table-list :ref="tKey" :options="optionsTable"></table-list> | |||||
</div> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button class="draftBtn" @click="dialogVisible = false">取 消</el-button> | |||||
<el-button class="putinBtn" @click="getSelectedShop()">确 定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil.js"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
// import {CouponUrl} from "./UrlEnum.js"; | |||||
export default { | |||||
name: "shopListDg", | |||||
props: ["tKey", "cb", "shopsType"], | |||||
components: { | |||||
TableList | |||||
}, | |||||
data() { | |||||
return { | |||||
dialogVisible: false, | |||||
curRuleForm: { | |||||
building: "", | |||||
floor: "", | |||||
shopNumber: "", | |||||
}, | |||||
floorArr: [], | |||||
buildingArr: [], | |||||
optionsTable: { | |||||
singleSelected: false, | |||||
showCk: true, | |||||
map: [ | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号" | |||||
}, | |||||
{ | |||||
key: "floor", | |||||
val: "楼层号" | |||||
}, | |||||
{ | |||||
key: "building", | |||||
val: "楼座号" | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "商铺状态", | |||||
convert: this.cStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return "/api/wxShop/list" + "?status=0" | |||||
+ "&type=" + this.shopsType | |||||
+ "&building=" + this.curRuleForm.building | |||||
+ "&floor=" + this.curRuleForm.floor | |||||
+ "&shopNumber=" + this.curRuleForm.shopNumber | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.list, | |||||
count: data.data.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}), | |||||
}, | |||||
methods: { | |||||
search: function() { | |||||
let tKey = this.$refs[this.tKey]; | |||||
tKey.search(tKey.getParams().index); | |||||
}, | |||||
//获取楼座信息 | |||||
getBuilding: function() { | |||||
this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => { | |||||
this.buildingArr = d.data; | |||||
}); | |||||
}, | |||||
//选择楼座 | |||||
changeBuilding: function(item) { | |||||
for (let building of this.buildingArr) { | |||||
if (item == building.id) { | |||||
this.floorArr = building.floors; | |||||
} | |||||
} | |||||
this.curRuleForm.floor = ""; | |||||
//this.search() | |||||
}, | |||||
openDialog() { | |||||
this.dialogVisible = true; | |||||
}, | |||||
cStatus(col, item) { | |||||
return "未出租"; | |||||
}, | |||||
handleClose() { | |||||
this.dialogVisible = false; | |||||
}, | |||||
getSelectedShop() { | |||||
let items = this.$refs[this.tKey].getCheckedItems("id"); | |||||
if (items.data.length < 1) { | |||||
this.$message({ | |||||
type: "error", | |||||
message: "抱歉,不能识别您选择的商铺" | |||||
}); | |||||
return; | |||||
} else { | |||||
this.cb(items); | |||||
} | |||||
this.dialogVisible = false; | |||||
} | |||||
}, | |||||
mounted: function() { | |||||
//获取楼座信息 | |||||
this.getBuilding(); | |||||
}, | |||||
created() {} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.el-dialog { | |||||
width: 565px !important; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .draftBtn, | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
width: 76px; | |||||
height: 35px; | |||||
font-size: 14px; | |||||
padding: 10px 20px; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn { | |||||
margin-right: 7.5px; | |||||
background: RGBA(255, 255, 255, 1); | |||||
color: #555555; | |||||
border: 1px solid #e1e6ea; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
margin-left: 7.5px; | |||||
background: rgba(90, 118, 191, 1); | |||||
color: #ffffff; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn:hover { | |||||
background: RGBA(255, 255, 255, 0.88); | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn:hover { | |||||
background: rgba(90, 118, 191, 0.88); | |||||
} | |||||
.shop-select /deep/ .el-dialog__header { | |||||
text-align: center; | |||||
} | |||||
</style> | |||||
<style> | |||||
/* .el-dialog { | |||||
width: 800px !important; | |||||
} */ | |||||
.div { | |||||
over-flow: hidden; | |||||
} | |||||
.shop-select .el-dialog__title { | |||||
padding-left: 10px; | |||||
} | |||||
</style> |
@@ -0,0 +1,266 @@ | |||||
<template> | |||||
<div> | |||||
<el-dialog | |||||
:title="shopsType==1?'选择商铺':'选择多经点位商铺'" | |||||
:visible="dialogVisible" | |||||
width="800px" | |||||
:before-close="handleClose" | |||||
:modal-append-to-body="false" | |||||
class="fx_dialog_list_chooseSH" | |||||
> | |||||
<div style="width:100%"> | |||||
<!-- aaa 添加搜索功能 --> | |||||
<el-form | |||||
:inline="true" | |||||
:model="curRuleForm" | |||||
ref="curRuleForm" | |||||
class="demo-form-inline clearfix" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="楼座" prop="building" class="fx_send pl_10 floatL"> | |||||
<el-select | |||||
style="width:130px;" | |||||
v-model="curRuleForm.building" | |||||
placeholder="请选择" | |||||
@change="changeBuilding" | |||||
clearable | |||||
> | |||||
<el-option | |||||
v-for="(item,index) in buildingArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼层" prop="floor" class="fx_send floatL"> | |||||
<el-select v-model="curRuleForm.floor" placeholder="请选择" clearable style="width:130px;"> | |||||
<el-option | |||||
v-for="(item,index) in floorArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.floorName" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="" prop="shopNumber" class="fx_title floatL"> | |||||
<el-input v-model.trim="curRuleForm.shopNumber" placeholder="请输入商铺号" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item class="floatL"> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<table-list :ref="tKey" :options="optionsTable"></table-list> | |||||
</div> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button class="draftBtn" @click="dialogVisible = false">取 消</el-button> | |||||
<el-button class="putinBtn" @click="getSelectedShop()">确 定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil.js"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
// import {CouponUrl} from "./UrlEnum.js"; | |||||
export default { | |||||
name: "shopListDg", | |||||
props: ["tKey", "cb", "shopsType"], | |||||
components: { | |||||
TableList | |||||
}, | |||||
data() { | |||||
return { | |||||
dialogVisible: false, | |||||
curRuleForm: { | |||||
building: "", | |||||
floor: "", | |||||
shopNumber: "", | |||||
}, | |||||
floorArr: [], | |||||
buildingArr: [], | |||||
optionsTable: { | |||||
singleSelected: true, | |||||
showCk: true, | |||||
map: [ | |||||
// {key:"id",val:"商户id"}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号" | |||||
}, | |||||
{ | |||||
key: "floor", | |||||
val: "楼层号" | |||||
}, | |||||
{ | |||||
key: "building", | |||||
val: "楼座号" | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "商铺状态", | |||||
convert: this.cStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
if(this.shopsType== 'all'){ | |||||
return "/api/wxShop/list" + "?status=" + "&type=" | |||||
+ "&building=" + this.curRuleForm.building | |||||
+ "&floor=" + this.curRuleForm.floor | |||||
+ "&shopNumber=" + this.curRuleForm.shopNumber | |||||
}else{ | |||||
return "/api/wxShop/list" + "?status=0" + "&type="+this.shopsType | |||||
+ "&building=" + this.curRuleForm.building | |||||
+ "&floor=" + this.curRuleForm.floor | |||||
+ "&shopNumber=" + this.curRuleForm.shopNumber | |||||
} | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.list, | |||||
count: data.data.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}), | |||||
}, | |||||
methods: { | |||||
search: function() { | |||||
let tKey = this.$refs[this.tKey]; | |||||
tKey.search(tKey.getParams().index); | |||||
}, | |||||
//获取楼座信息 | |||||
getBuilding: function() { | |||||
this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => { | |||||
this.buildingArr = d.data; | |||||
}); | |||||
}, | |||||
//选择楼座 | |||||
changeBuilding: function(item) { | |||||
for (let building of this.buildingArr) { | |||||
if (item == building.id) { | |||||
this.floorArr = building.floors; | |||||
} | |||||
} | |||||
this.curRuleForm.floor = ""; | |||||
//this.search() | |||||
}, | |||||
openDialog() { | |||||
this.dialogVisible = true; | |||||
}, | |||||
cStatus(col, item) { | |||||
if(item.status == 0){ | |||||
return "未出租"; | |||||
}else{ | |||||
return "已出租"; | |||||
} | |||||
}, | |||||
handleClose() { | |||||
this.dialogVisible = false; | |||||
}, | |||||
getSelectedShop() { | |||||
let items = this.$refs[this.tKey].getCheckedItems("id"); | |||||
if (items.data.length < 1) { | |||||
this.$message({ | |||||
type: "error", | |||||
message: "抱歉,不能识别您选择的商铺" | |||||
}); | |||||
return; | |||||
} else { | |||||
this.cb(items); | |||||
} | |||||
this.dialogVisible = false; | |||||
} | |||||
}, | |||||
mounted: function() { | |||||
//获取楼座信息 | |||||
this.getBuilding(); | |||||
}, | |||||
created() {} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.el-dialog { | |||||
width: 565px !important; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .draftBtn, | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
width: 76px; | |||||
height: 35px; | |||||
font-size: 14px; | |||||
padding: 10px 20px; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn { | |||||
margin-right: 7.5px; | |||||
background: RGBA(255, 255, 255, 1); | |||||
color: #555555; | |||||
border: 1px solid #e1e6ea; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn { | |||||
margin-left: 7.5px; | |||||
background: rgba(90, 118, 191, 1); | |||||
color: #ffffff; | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.draftBtn:hover { | |||||
background: RGBA(255, 255, 255, 0.88); | |||||
} | |||||
.fx_dialog_list_chooseSH | |||||
.el-dialog | |||||
.el-dialog__footer | |||||
.dialog-footer | |||||
.putinBtn:hover { | |||||
background: rgba(90, 118, 191, 0.88); | |||||
} | |||||
</style> | |||||
<style> | |||||
/* .el-dialog { | |||||
width: 800px !important; | |||||
} */ | |||||
.div { | |||||
over-flow: hidden; | |||||
} | |||||
</style> |
@@ -0,0 +1,254 @@ | |||||
<template> | |||||
<div> | |||||
<!-- :title="shopsType==1?'选择商铺':'选择点位商铺'" --> | |||||
<el-dialog | |||||
title="选择商户" | |||||
:visible="dialogVisible" | |||||
width="800px" | |||||
:before-close="handleClose" | |||||
:modal-append-to-body="false" | |||||
class="fx_dialog_list_chooseSH"> | |||||
<div style="width:100%"> | |||||
<el-form | |||||
:inline="true" | |||||
:model="curRuleForm" | |||||
ref="curRuleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<!-- <el-form-item label="楼座" prop="building" class="fx_send pl_10 floatL"> | |||||
<el-select | |||||
style="width:130px;" | |||||
v-model="curRuleForm.building" | |||||
placeholder="请选择" | |||||
@change="changeBuilding" | |||||
clearable | |||||
> | |||||
<el-option | |||||
v-for="(item,index) in buildingArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼层" prop="floor" class="fx_send floatL"> | |||||
<el-select v-model="curRuleForm.floor" placeholder="请选择" clearable style="width:130px;"> | |||||
<el-option | |||||
v-for="(item,index) in floorArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.floorName" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="" prop="shopNumber" class="fx_title floatL"> | |||||
<el-input v-model.trim="curRuleForm.shopNumber" placeholder="请输入点位号" clearable></el-input> | |||||
</el-form-item> --> | |||||
<el-form-item label="商户名" prop="merchantName" class="fx_title floatL"> | |||||
<el-input v-model.trim="curRuleForm.merchantName" placeholder="请输入商户名" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item class="floatL"> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<table-list :ref="tKeynew" :options="optionsTable"></table-list> | |||||
</div> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button class="draftBtn" @click="dialogVisible = false">取 消</el-button> | |||||
<el-button class="putinBtn" @click="getSelectedShop()">确 定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import commonUtil from '../../../core/tool/commonUtil.js'; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { | |||||
CouponCacheData | |||||
} from "../../../service/couponData/data.js"; | |||||
// import {CouponUrl} from "./UrlEnum.js"; | |||||
export default { | |||||
name: 'shopListDgnew', | |||||
props: ["tKeynew", "cbnew","shopsType"], | |||||
components: { | |||||
TableList | |||||
}, | |||||
data() { | |||||
return { | |||||
dialogVisible: false, | |||||
curRuleForm: { | |||||
/* building: "", | |||||
floor: "", | |||||
shopNumber: "", */ | |||||
merchantName: '', | |||||
}, | |||||
floorArr: [], | |||||
buildingArr: [], | |||||
optionsTable: { | |||||
singleSelected: true, | |||||
showCk: true, | |||||
map: [ | |||||
// {key:"id",val:"商户id"}, | |||||
{ | |||||
key: "merchantName", | |||||
val: "商户名" | |||||
}, | |||||
{ | |||||
key: "linkPerson", | |||||
val: "联系人" | |||||
}, | |||||
{ | |||||
key: "linkPhone", | |||||
val: "联系方式" | |||||
}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号" | |||||
}, | |||||
/* { | |||||
key: "status", | |||||
val: "商铺状态", | |||||
convert: this.cStatus | |||||
} */ | |||||
], | |||||
getUrl: () => { | |||||
return "/api/wxShop/listShopFromContract?status=1" | |||||
+ "&type=" + this.shopsType | |||||
+ "&merchantName=" + this.curRuleForm.merchantName | |||||
/* + "&building=" + this.curRuleForm.building | |||||
+ "&floor=" + this.curRuleForm.floor | |||||
+ "&shopNumber=" + this.curRuleForm.shopNumber */ | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: (data) => { | |||||
return { | |||||
data: data.data.list, | |||||
count: data.data.total, | |||||
}; | |||||
} | |||||
}, | |||||
} | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}), | |||||
}, | |||||
methods: { | |||||
search: function() { | |||||
let tKey = this.$refs[this.tKeynew]; | |||||
tKey.search(tKey.getParams().index); | |||||
}, | |||||
//获取楼座信息 | |||||
getBuilding: function() { | |||||
this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => { | |||||
this.buildingArr = d.data; | |||||
}); | |||||
}, | |||||
//选择楼座 | |||||
changeBuilding: function(item) { | |||||
for (let building of this.buildingArr) { | |||||
if (item == building.id) { | |||||
this.floorArr = building.floors; | |||||
} | |||||
} | |||||
this.curRuleForm.floor = ""; | |||||
//this.search() | |||||
}, | |||||
openDialog() { | |||||
this.dialogVisible = true; | |||||
}, | |||||
cStatus(col,item){ | |||||
return "已出租"; | |||||
}, | |||||
handleClose() { | |||||
this.dialogVisible = false; | |||||
}, | |||||
getSelectedShop() { | |||||
let items = this.$refs[this.tKeynew].getCheckedItems("id"); | |||||
if (items.data.length < 1) { | |||||
this.$message({ | |||||
type: 'error', | |||||
message: '抱歉,不能识别您选择的商铺' | |||||
}); | |||||
return; | |||||
} else { | |||||
this.cbnew(items); | |||||
} | |||||
this.dialogVisible = false; | |||||
} | |||||
}, | |||||
mounted: function () { | |||||
//获取楼座信息 | |||||
this.getBuilding(); | |||||
}, | |||||
created() { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
.el-dialog { | |||||
width: 565px!important; | |||||
} | |||||
.el-dialog { | |||||
width: 565px!important; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .draftBtn,.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .putinBtn{ | |||||
width:76px; | |||||
height: 35px; | |||||
font-size:14px; | |||||
padding: 10px 20px; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .draftBtn{ | |||||
margin-right: 7.5px; | |||||
background:RGBA(255, 255, 255, 1); | |||||
color:#555555; | |||||
border:1px solid #E1E6EA; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .putinBtn{ | |||||
margin-left: 7.5px; | |||||
background:rgba(90, 118, 191,1); | |||||
color:#FFFFFF; | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .draftBtn:hover{ | |||||
background:RGBA(255, 255, 255, .88); | |||||
} | |||||
.fx_dialog_list_chooseSH .el-dialog .el-dialog__footer .dialog-footer .putinBtn:hover{ | |||||
background:rgba(90, 118, 191,.88); | |||||
} | |||||
</style> | |||||
<style> | |||||
/* .el-dialog { | |||||
width: 800px !important; | |||||
} */ | |||||
.div { | |||||
over-flow: hidden; | |||||
} | |||||
</style> |
@@ -0,0 +1,272 @@ | |||||
<template> | |||||
<div class="rentshop"> | |||||
<el-table | |||||
ref="filterTable1" | |||||
:data="contractList" | |||||
tooltip-effect="dark" | |||||
border | |||||
:height="getHeight" | |||||
style="width: 100%;" | |||||
> | |||||
<el-table-column prop="contractNumber" label="商户关联合同"></el-table-column> | |||||
<el-table-column label="商铺号"> | |||||
<template slot-scope="scope"> | |||||
<span>{{changeShopNum(scope.row,'shopNumber')}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column prop="merchantName" label="商户名称"></el-table-column> | |||||
<el-table-column label="租赁开始日期"> | |||||
<template slot-scope="scope"> | |||||
<span>{{dealTime(scope.row,'rentalStartDate')}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="租赁结束日期"> | |||||
<template slot-scope="scope"> | |||||
<span>{{dealTime(scope.row,'rentalEndDate')}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="租金"> | |||||
<template slot-scope="scope"> | |||||
<span>{{divide(scope.row)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="计租方式"> | |||||
<template slot-scope="scope"> | |||||
<span>{{ctype(scope.row)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="合同状态"> | |||||
<template slot-scope="scope"> | |||||
<span>{{cStatus(scope.row)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="审批状态"> | |||||
<template slot-scope="scope"> | |||||
<span>{{cStatus(scope.row)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="操作"> | |||||
<template slot-scope="scope"> | |||||
<el-button @click="previewDetail(scope.row,scope.$index)" type="text" size="small">查看</el-button> | |||||
<el-button @click="downloadContract(scope.row,scope.$index)" type="text" size="small">下载</el-button> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import shopListDg from "../contractComp/multishopListDg.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import alertDialog from "../../../core/comps/input/alertDialog.vue"; | |||||
import moment, { months } from "moment"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { ContractUrl } from "../businessComp/UrlEnum.js"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
export default { | |||||
components: { | |||||
}, | |||||
props: ["merchantId","contractType", ], | |||||
data() { | |||||
return { | |||||
...mapActions([ | |||||
]), | |||||
tk: "contractTable", | |||||
tKey: "shoplist", | |||||
contractList: [], | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
}), | |||||
getHeight() { | |||||
let num = 110; | |||||
if (this.contractList.length > 1 && this.contractList.length <= 10) { | |||||
num = 110+67.5*(this.contractList.length-1); | |||||
} else if (this.contractList.length > 10) { | |||||
num = 450; | |||||
} | |||||
return num; | |||||
} | |||||
}, | |||||
watch: { | |||||
'merchantId': function(newVal,oldVal) { | |||||
console.log(newVal) | |||||
console.log(oldVal) | |||||
if (newVal) { | |||||
this.getAllContractList(newVal); | |||||
} | |||||
} | |||||
}, | |||||
methods: { | |||||
changeShopNum(row) { | |||||
let rentInfo = []; | |||||
if (row.rentInfo) { | |||||
rentInfo = JSON.parse(row.rentInfo); | |||||
} | |||||
let str = ""; | |||||
rentInfo.map((items, indexs) => { | |||||
str = str != "" ? str + " ," + items.shopNumber : items.shopNumber; | |||||
}); | |||||
return str; | |||||
}, | |||||
divide(item) { | |||||
if (item.bus_discount_ratio != undefined && item.bus_discount_time != 0 && item.bus_discount_ratio !='') { | |||||
return Number(item.price) / 100 +(item.bus_discount_time==1?'元/年':item.bus_discount_time==2?'元/月':'元/周期'); | |||||
} else { | |||||
return Number(item.price) / 100 +(item.price_unit==1?'元/日':item.price_unit==2?'元/月':'元/年'); | |||||
} | |||||
}, | |||||
ctype(item) { | |||||
if (item.type == 1) { | |||||
return "按租赁面积"; | |||||
} else if (item.type == 2) { | |||||
return "联营扣点"; | |||||
} else { | |||||
return "面积计租、联营取高"; | |||||
} | |||||
}, | |||||
cStatus(item) { | |||||
return CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.status.toString(); | |||||
})[0].name; | |||||
}, | |||||
cApplyStatus(item) { | |||||
if (item.applyStatus) { | |||||
return ( | |||||
(item.businessType != 6 ? "签约" : "终止") + | |||||
ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0] | |||||
.name | |||||
); | |||||
} else if (item.applyStatus === 0) { | |||||
return "未提交审核"; | |||||
} | |||||
}, | |||||
getAllContractList(merchantId) { | |||||
this.getFetch(`${ContractUrl.getContractList}?merchantId=${merchantId}&validStatus=1&pageNum=1&pageSize=100000`) | |||||
.then(res=>{ | |||||
console.log(res) | |||||
this.contractList = res.data.list; | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data); | |||||
}) | |||||
}, | |||||
dealTime(row,key) { | |||||
return moment(row[key]).format('YYYY-MM-DD'); | |||||
}, | |||||
//查看 | |||||
previewDetail(row,index) { | |||||
/** | |||||
contractType合同类型:1租金合同,2多经合同,3物业合同,4多经物业合同 | |||||
businessType操作类型:1合同审批,2账单审批,3终止合同审批 | |||||
id为合同id | |||||
*/ | |||||
this.$router.push({ | |||||
path: `rentsCheck?id=${row.id}&contractType=${this.contractType}&businessType=1` | |||||
}); | |||||
}, | |||||
//下载 | |||||
downloadContract(row,index) { | |||||
location.href = "/api/wxRentContract/exportContract?id=" + row.id; | |||||
}, | |||||
}, | |||||
created() { | |||||
// this.getAllContractList(this.merchantId); | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.s-add { | |||||
width: 100%; | |||||
background: #fff; | |||||
height: 59px; | |||||
text-align: center; | |||||
line-height: 59px; | |||||
z-index: 1000; | |||||
position: relative; | |||||
opacity: 1; | |||||
} | |||||
.s-add-box { | |||||
background: rgb(90, 118, 191, 0.1); | |||||
height: 60px; | |||||
padding-top: 12px; | |||||
box-sizing: border-box; | |||||
} | |||||
.add-button { | |||||
margin: 0 auto; | |||||
width: 95px; | |||||
height: 36px; | |||||
line-height: 36px; | |||||
background: rgba(255, 255, 255, 1); | |||||
border: 1px solid rgba(81, 169, 201, 1); | |||||
border-radius: 3px; | |||||
cursor: pointer; | |||||
box-sizing: border-box; | |||||
color: #51a9c9; | |||||
} | |||||
</style> | |||||
<style> | |||||
.marketing-list .line .el-form-item__content { | |||||
margin-left: 0 !important; | |||||
} | |||||
.marketing-list .outer_time_item01 .el-form-item__content { | |||||
margin-left: 0 !important; | |||||
} | |||||
.el-select-dropdown { | |||||
max-width: 222px !important; | |||||
} | |||||
.jiedan-button { | |||||
width: auto !important; | |||||
margin-top: 20px; | |||||
} | |||||
.rentshop { | |||||
background: #fff; | |||||
position: relative; | |||||
} | |||||
.rentshop .el-table { | |||||
border: none !important; | |||||
} | |||||
.rentshop .el-table thead { | |||||
background: #5976bf !important; | |||||
} | |||||
.rentshop .el-table th { | |||||
background: #5976bf !important; | |||||
color: #fff !important; | |||||
border: none !important; | |||||
text-align: center !important; | |||||
height: 40px !important; | |||||
line-height: 40px !important; | |||||
padding: 0 !important; | |||||
font-weight: 400; | |||||
font-size: 14px; | |||||
font-family: "Avenir", Helvetica, Arial, sans-serif; | |||||
} | |||||
.rentshop .el-table__header-wrapper { | |||||
height: 40px; | |||||
} | |||||
.rentshop .el-table td { | |||||
border: none !important; | |||||
text-align: center !important; | |||||
height: 46.2px !important; | |||||
} | |||||
.outer_time_item .el-form-item__content { | |||||
display: inline-block !important; | |||||
} | |||||
.outer_time_item .el-form-item__label { | |||||
padding: 0 12px 0 0px; | |||||
} | |||||
</style> | |||||
@@ -0,0 +1,94 @@ | |||||
<template> | |||||
<div> | |||||
<div class="lists" style="float:left;width:auto;margin-bottom:20px;"> | |||||
<div style="float:left;width:auto;"> | |||||
<div> | |||||
<el-tag style="cursor:pointer;" :disable-transitions="false">发起审批</el-tag> | |||||
</div> | |||||
<div style="text-align:center;line-height:24px;">我</div> | |||||
</div> | |||||
<div | |||||
style="display:block;float:left;padding-left:15px;width:60px;text-align:center;line-height:32px;" | |||||
> | |||||
<i :class="'iconfont icon-cs-jt-xy-1-1 iconBox'"></i> | |||||
</div> | |||||
</div> | |||||
<div | |||||
class="lists" | |||||
v-if="processData&&processData.length>0" | |||||
:key="index" | |||||
v-for="(item,index) in processData" | |||||
style="float:left;width:auto;margin-bottom:20px;" | |||||
> | |||||
<div style="float:left;width:auto;"> | |||||
<div> | |||||
<el-tag style="cursor:pointer;" :disable-transitions="false">{{getName(item.userList)}}</el-tag> | |||||
</div> | |||||
<div style="text-align:center;line-height:24px;">{{getLevel01(index,item.type)}}</div> | |||||
<div style="text-align:center;line-height:24px;">{{getLevel02(index,item.type)}}</div> | |||||
</div> | |||||
<div | |||||
style="display:block;float:left;padding-left:15px;width:60px;text-align:center;line-height:32px;" | |||||
v-if="index!=(processData.length-1)" | |||||
> | |||||
<!-- <i class="el-icon-right"></i> --> | |||||
<i :class="'iconfont icon-cs-jt-xy-1-1 iconBox'"></i> | |||||
</div> | |||||
</div> | |||||
<div class="lists" style="float:left;width:auto;margin-bottom:20px;"> | |||||
<div | |||||
style="display:block;float:left;padding-left:15px;width:60px;text-align:center;line-height:32px;" | |||||
> | |||||
<!-- <i class="el-icon-right"></i> --> | |||||
<i :class="'iconfont icon-cs-jt-xy-1-1 iconBox'"></i> | |||||
</div> | |||||
<div style="float:left;width:auto;"> | |||||
<div> | |||||
<el-tag style="cursor:pointer;" :disable-transitions="false">结束</el-tag> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { PromissionCacheData } from "../../../service/promission/data.js"; | |||||
export default { | |||||
components: {}, | |||||
props: ["processData"], | |||||
data() { | |||||
return {}; | |||||
}, | |||||
computed: {}, | |||||
methods: { | |||||
getName(name) { | |||||
let str = ""; | |||||
name.map((item, index) => { | |||||
str = str + item.name + (index == name.length - 1 ? "" : ","); | |||||
}); | |||||
return str; | |||||
}, | |||||
getLevel01(index, type) { | |||||
return PromissionCacheData.processLevel.filter(e => e.value == index)[0].name | |||||
}, | |||||
getLevel02(index, type) { | |||||
return ( | |||||
"(" + | |||||
PromissionCacheData.processTypes.filter(e => e.value == type)[0].name + | |||||
")" | |||||
); | |||||
} | |||||
}, | |||||
created() { | |||||
console.log(this.processData, 3333333333333333); | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.iconBox { | |||||
font-size: 30px !important; | |||||
color: #0b6ef3 !important; | |||||
margin-right: 16px !important; | |||||
text-shadow: 0 1px 1px #1a2734 !important; | |||||
} | |||||
</style> | |||||
@@ -0,0 +1,434 @@ | |||||
<template> | |||||
<div> | |||||
<el-table :data="tableData" max-height="450" align="center" border style="width: 100%" :row-class-name="tableRowClassName" show-summary :summary-method="getSummaries"> | |||||
<el-table-column prop="period" label="周期" align="center" width="60"></el-table-column> | |||||
<el-table-column label="周期时间" width="200" align="center" v-if="!showEditButton"> | |||||
<template slot-scope="scope"> | |||||
<span>{{changeDateRange(scope.row)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="周期时间" width="200" align="center" v-if="showEditButton"> | |||||
<template slot-scope="scope"> | |||||
<span style="color:#409eff;cursor:pointer;" v-if="(tableData.length-1)!=scope.$index" @click="goEndDate(scope)">{{changeDateRange(scope.row)}}<i class="el-icon-edit"></i></span> | |||||
<span v-if="(tableData.length-1)==scope.$index">{{changeDateRange(scope.row)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="账单日" v-if="!showEditButton" align="center"> | |||||
<template slot-scope="scope"> | |||||
<span>{{changeDate(scope.row.receiveDate)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column v-if="showEditButton" align="center"> | |||||
<template slot="header" slot-scope="scope"> | |||||
<div style="color:#409eff;cursor:pointer;" @click="goEditReceiveDate(1,'')"> | |||||
<span>账单日</span> | |||||
<i class="el-icon-edit"></i> | |||||
</div> | |||||
</template> | |||||
<template slot-scope="scope"> | |||||
<span | |||||
v-if="showEditButton" | |||||
@click="goEditReceiveDate(2,scope)" | |||||
style="color:#409eff;cursor:pointer;" | |||||
> | |||||
{{changeDate(scope.row.receiveDate)}} | |||||
<i class="el-icon-edit"></i> | |||||
</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column prop="needPay" label="合同金额(元)" width="180" align="center"> | |||||
<template slot-scope="scope"> | |||||
<span>{{getNeedPay(scope.row.needPay)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column prop="receivePay" label="实际金额(元)" width="180" align="center"></el-table-column> | |||||
<el-table-column label="调整金额(元)" v-if="showEditButton" align="center"> | |||||
<template slot-scope="scope"> | |||||
<el-input placeholder="请输入内容" maxlength="10" v-model="scope.row.receivePay" clearable></el-input> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="金额变更原因" align="center"> | |||||
<template slot-scope="scope"> | |||||
<el-input | |||||
placeholder="请输入内容" | |||||
type="textarea" | |||||
v-if="(scope.row.receivePay!=scope.row.needPay||(scope.row.needPay==0&&scope.row.receivePay==scope.row.needPay))&&showEditButton" | |||||
maxlength="100" | |||||
v-model="scope.row.comments" | |||||
clearable | |||||
></el-input> | |||||
<span v-if="!showEditButton">{{scope.row.comments}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<el-dialog | |||||
title="账单日编辑" | |||||
:visible.sync="dialogVisible" | |||||
:modal-append-to-body="false" | |||||
width="30%" | |||||
> | |||||
<div style="padding-left:50px;" v-if="editType==1"> | |||||
<el-radio-group v-model="receiveDateUpdateType"> | |||||
<el-radio :label="0">全部提前</el-radio> | |||||
<el-radio :label="1">全部置后</el-radio> | |||||
</el-radio-group> | |||||
</div> | |||||
<div v-if="editType!=1"> | |||||
<el-date-picker | |||||
v-model="receiveDateUpdateVal02" | |||||
:picker-options="pickerOptions" | |||||
:clearable="false" | |||||
type="date" | |||||
placeholder="选择日期" | |||||
></el-date-picker> | |||||
</div> | |||||
<div style="padding:30px 0 0 50px;" v-if="editType==1"> | |||||
<el-input-number | |||||
v-model="receiveDateUpdateVal" | |||||
controls-position="right" | |||||
:min="0" | |||||
:max="365" | |||||
></el-input-number>天 | |||||
</div> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="submitDateChange">确 定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
<el-dialog | |||||
title="周期时间" | |||||
:visible.sync="dateVisible" | |||||
:modal-append-to-body="false" | |||||
width="30%" | |||||
> | |||||
{{starttime + ' - '}} | |||||
<el-date-picker | |||||
v-model="endtime" | |||||
:picker-options="pickerOptions02" | |||||
:clearable="false" | |||||
type="date" | |||||
placeholder="选择日期" | |||||
></el-date-picker> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dateVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="submitEndDateChange">确 定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import shopListDg from "../contractComp/shopListDg.vue"; | |||||
import moment, { months } from "moment"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { deepcopy } from "../../../utils/validate"; | |||||
import { ContractUrl } from "../businessComp/UrlEnum.js" | |||||
import Vue from 'vue'; | |||||
export default { | |||||
components: {}, | |||||
props: ["editIf","id","type"], | |||||
data() { | |||||
return { | |||||
receivePeriod:'', | |||||
tableData: [], | |||||
dialogVisible: false, | |||||
dateVisible: false, | |||||
selectIndex: 0, | |||||
editType: 1, | |||||
receiveDateUpdateType: 0, | |||||
receiveDateUpdateVal: "", | |||||
receiveDateUpdateVal02: "", | |||||
showEditButton: this.editIf ? false : true, //默认展示编辑操作 | |||||
starttime: "", | |||||
endtime: "" | |||||
}; | |||||
}, | |||||
computed: { | |||||
getHeight() { | |||||
return this.tableData.length > 10 ? 450 : null; | |||||
}, | |||||
pickerOptions02: function() { | |||||
return { | |||||
disabledDate: time => { | |||||
let beginDateVal = moment(this.starttime); | |||||
let endTime = moment(this.starttime).add(1, "years").subtract(1,'days'); | |||||
let endDate = this.tableData[this.tableData.length-1].endtime; | |||||
if (beginDateVal && endTime) { | |||||
return ( | |||||
moment(time) < moment(beginDateVal) || | |||||
moment(time) > moment(endTime) || moment(time).valueOf()>moment(endDate).valueOf() | |||||
); | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
pickerOptions: function() { | |||||
return { | |||||
disabledDate: time => { | |||||
let diffDay = moment(this.endtime).diff( | |||||
moment(this.starttime), | |||||
"days" | |||||
)+1; | |||||
let beginDateVal = moment(this.starttime).subtract(diffDay+1, "days"); | |||||
let endTime = moment(this.starttime).add(diffDay-1, "days"); | |||||
if (beginDateVal && endTime) { | |||||
return ( | |||||
moment(time) < moment(beginDateVal) || | |||||
moment(time) > moment(endTime) | |||||
); | |||||
} | |||||
} | |||||
}; | |||||
} | |||||
}, | |||||
methods: { | |||||
tableRowClassName({row, rowIndex}) { | |||||
if (rowIndex%2!==0) { | |||||
return 'success-row'; | |||||
} | |||||
return ''; | |||||
}, | |||||
getSummaries(param) { | |||||
const { columns, data } = param; | |||||
const sums = []; | |||||
columns.forEach((column, index) => { | |||||
if (index === 0) { | |||||
sums[index] = '总价'; | |||||
return; | |||||
} | |||||
const values = data.map(item => Number(item[column.property])); | |||||
if (!values.every(value => isNaN(value))) { | |||||
sums[index] = values.reduce((prev, curr) => { | |||||
const value = Number(curr); | |||||
if (!isNaN(value)) { | |||||
return prev + curr; | |||||
} else { | |||||
return prev; | |||||
} | |||||
}, 0); | |||||
sums[index] = sums[index].toFixed(2); | |||||
} else { | |||||
sums[index] = ''; | |||||
} | |||||
}); | |||||
return sums; | |||||
}, | |||||
getNeedPay(needPay){ | |||||
return Number(needPay)!=0?needPay:'--' | |||||
}, | |||||
goEditReceiveDate(type, row) { | |||||
this.dialogVisible = true; | |||||
this.editType = type; | |||||
if (type == 2) { | |||||
this.selectIndex = row.$index; | |||||
this.receiveDateUpdateVal02 = row.row.receiveDate; | |||||
this.starttime = row.row.starttime; | |||||
this.endtime = row.row.endtime; | |||||
} | |||||
}, | |||||
goEndDate(row){ | |||||
this.dateVisible = true; | |||||
this.selectIndex = row.$index; | |||||
this.starttime = moment(row.row.starttime).format('YYYY-MM-DD'); | |||||
this.endtime = row.row.endtime; | |||||
}, | |||||
changeDateRange(item) { | |||||
return ( | |||||
moment(item.starttime).format("YYYY.MM.DD") + | |||||
" - " + | |||||
moment(item.endtime).format("YYYY.MM.DD") | |||||
); | |||||
}, | |||||
//编辑账单日 | |||||
editReceiveDate() {}, | |||||
getBill(endtime,endDate,tableData){ | |||||
if(moment(endtime)<moment(endDate)){ | |||||
let b = tableData[tableData.length-1]; | |||||
let a={}; | |||||
a.period = tableData.length; | |||||
a.starttime = moment(moment(b.starttime).format('YYYY-MM-DD')).add(this.receivePeriod,'months'); | |||||
a.endtime = moment(moment(b.endtime).format('YYYY-MM-DD')+' 23:59:59').add(this.receivePeriod,'months').subtract(1,'days')>moment(endDate)?moment(endDate):moment(moment(b.endtime).format('YYYY-MM-DD')+' 23:59:59').add(this.receivePeriod,'months'); | |||||
endtime = moment(moment(b.endtime).format('YYYY-MM-DD')+' 23:59:59').add(this.receivePeriod,'months').subtract(1,'days')>moment(endDate)?moment(endDate):moment(moment(b.endtime).format('YYYY-MM-DD')+' 23:59:59').add(this.receivePeriod,'months'); | |||||
a.receiveDate = moment(moment(a.starttime).subtract(1,'days')).valueOf(); | |||||
tableData.push(a); | |||||
return this.getBill(endtime,endDate,tableData) | |||||
}else{ | |||||
return tableData; | |||||
} | |||||
}, | |||||
//修改周期时间保存 | |||||
submitEndDateChange(){ | |||||
let tableData = []; | |||||
if(!this.endtime){ | |||||
this.$message.error('抱歉,日期不能为空!') | |||||
return; | |||||
} | |||||
let endDate = this.tableData[this.tableData.length-1].endtime; | |||||
this.tableData[this.selectIndex].endtime = moment(moment(this.endtime).format('YYYY-MM-DD')+' 23:59:59'); | |||||
let endIf = false; | |||||
this.tableData.map((item,index)=>{ | |||||
moment(item.endtime).format('YYYY-MM-DD') | |||||
if(this.selectIndex<index){ | |||||
if(moment(moment(endDate).format('YYYY-MM-DD')+' 00:00:00').valueOf()>moment(moment(this.tableData[index-1].endtime).format('YYYY-MM-DD')+' 00:00:00').valueOf()&&!endIf){ | |||||
item.period = index+1; | |||||
item.starttime = moment(moment(this.tableData[index-1].endtime).format('YYYY-MM-DD')).add(1,'days'); | |||||
item.endtime = moment(moment(item.starttime).format('YYYY-MM-DD')+' 23:59:59').add(this.receivePeriod,'months').subtract(1,'days')>moment(endDate)?moment(endDate):moment(moment(item.starttime).format('YYYY-MM-DD')+' 23:59:59').add(this.receivePeriod,'months').subtract(1,'days'); | |||||
item.receiveDate = moment(moment(item.starttime).subtract(1,'days')).valueOf(); | |||||
let a=item; | |||||
tableData.push(a); | |||||
}else{ | |||||
endIf = true; | |||||
} | |||||
}else{ | |||||
item.period = index+1; | |||||
tableData.push(item); | |||||
} | |||||
}) | |||||
tableData = this.getBill(tableData[tableData.length-1].endtime,endDate,tableData) | |||||
let param={ | |||||
previewBillRentList:[], | |||||
id:this.id | |||||
} | |||||
tableData.map((item,index)=>{ | |||||
let a={}; | |||||
a.starttime = moment(item.starttime).format('YYYY-MM-DD')+' 00:00:00'; | |||||
a.endtime = moment(item.endtime).format('YYYY-MM-DD')+' 23:59:59'; | |||||
param.previewBillRentList.push(a); | |||||
}) | |||||
let url = this.type==1? ContractUrl.buildBillPriceList : ContractUrl.buildPropertyBillPriceList; | |||||
this.postFetch(url,param) | |||||
.then(d=>{ | |||||
d.data.map((item,index)=>{ | |||||
tableData[index].needPay = (Number(item.needPay)/100).toFixed(2); | |||||
if(index>=this.selectIndex){ | |||||
tableData[index].receivePay = (item.receivePay/100).toFixed(2); | |||||
tableData[index].needPay = (item.needPay/100).toFixed(2); | |||||
} | |||||
}) | |||||
this.tableData = tableData; | |||||
this.$message.success('保存成功!') | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data) | |||||
}) | |||||
this.dateVisible = false; | |||||
}, | |||||
//保存日期修改信息 | |||||
submitDateChange() { | |||||
let haveError = false; | |||||
let message = ""; | |||||
let tableData = JSON.parse(JSON.stringify(this.tableData)); | |||||
if (this.editType == 1) { | |||||
tableData.map((item, index) => { | |||||
item.receiveDate = | |||||
this.receiveDateUpdateType == 0 | |||||
? moment(item.receiveDate).subtract( | |||||
this.receiveDateUpdateVal, | |||||
"days" | |||||
) | |||||
: moment(item.receiveDate).add(this.receiveDateUpdateVal, "days"); | |||||
let diffDay = moment(item.endtime).diff( | |||||
moment(item.starttime), | |||||
"days" | |||||
); | |||||
let diffDay02 = | |||||
this.receiveDateUpdateType == 0 | |||||
? moment(item.starttime) | |||||
.subtract(1, "days") | |||||
.diff(moment(item.receiveDate), "days") | |||||
: moment(item.receiveDate) | |||||
.add(1, "days") | |||||
.diff(moment(item.endtime), "days"); | |||||
if (diffDay02 > diffDay) { | |||||
haveError = true; | |||||
message = | |||||
"周期" + | |||||
item.period + | |||||
(this.receiveDateUpdateType == 0 ? "提前" : "置后") + | |||||
"的天数不能大于付款周期"; | |||||
} | |||||
}); | |||||
if (haveError) { | |||||
this.$notify.error({ | |||||
title: "错误", | |||||
message: message | |||||
}); | |||||
} else { | |||||
this.tableData = tableData; | |||||
} | |||||
} else { | |||||
if(!this.receiveDateUpdateVal02){ | |||||
this.$message.error('抱歉,日期不能为空!') | |||||
return; | |||||
} | |||||
tableData[this.selectIndex].receiveDate = this.receiveDateUpdateVal02; | |||||
this.tableData = tableData; | |||||
} | |||||
this.dialogVisible = false; | |||||
}, | |||||
changeDate(date) { | |||||
return moment(date).format("YYYY-MM-DD"); | |||||
}, | |||||
/** | |||||
* 获取表格数据 | |||||
*/ | |||||
setData(data,receivePeriod) { | |||||
let sData = []; | |||||
this.receivePeriod = receivePeriod; | |||||
console.log(receivePeriod,6666) | |||||
data.map((item, index) => { | |||||
item.needPay = (item.needPay / 100).toFixed(2); | |||||
item.receivePay = (item.receivePay / 100).toFixed(2); | |||||
}); | |||||
this.tableData = data; | |||||
}, | |||||
/** | |||||
* 父组件获取表格数据 | |||||
*/ | |||||
getData() { | |||||
let data = JSON.parse(JSON.stringify(this.tableData)); | |||||
const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; | |||||
let haveError = false; | |||||
let message = ""; | |||||
data.map((item, index) => { | |||||
if ( | |||||
!(Number(item.receivePay) >= 0) || | |||||
Number(item.receivePay) > 200000000 | |||||
) { | |||||
haveError = true; | |||||
message = "抱歉,金额不能为负且小于两亿!"; | |||||
} else if (!reg.test(item.receivePay)) { | |||||
haveError = true; | |||||
message = "抱歉,金额限制为最多两位小数!"; | |||||
} | |||||
}); | |||||
data.map((item, index) => { | |||||
item.needPay = Number((item.needPay * 100).toFixed(2)); | |||||
item.receivePay = Number((item.receivePay * 100).toFixed(2)); | |||||
item.receiveDate = | |||||
moment(item.receiveDate).format("YYYY-MM-DD") + " 00:00:00"; | |||||
}); | |||||
if (haveError) { | |||||
this.$message.error(message); | |||||
return false; | |||||
} else { | |||||
return data; | |||||
} | |||||
} | |||||
}, | |||||
created() {} | |||||
}; | |||||
</script> | |||||
<style> | |||||
.el-table .warning-row { | |||||
background: oldlace; | |||||
} | |||||
.el-table .success-row { | |||||
background: #f0f9eb; | |||||
} | |||||
</style> | |||||
@@ -0,0 +1,237 @@ | |||||
<template> | |||||
<div class="rentshop"> | |||||
<el-table | |||||
ref="filterTable" | |||||
:data="(rentInfo&&rentInfo.length>0?rentInfo:rentInfoData)" | |||||
tooltip-effect="dark" | |||||
border | |||||
:height="getHeight" | |||||
style="width: 100%;" | |||||
> | |||||
<el-table-column prop="shopNumber" label="商铺号"></el-table-column> | |||||
<el-table-column prop="building" label="楼座号"></el-table-column> | |||||
<el-table-column prop="floor" label="楼层号"></el-table-column> | |||||
<el-table-column prop="buildArea" label="建筑面积(㎡)"></el-table-column> | |||||
<el-table-column prop="operationArea" label="可用面积(㎡)"></el-table-column> | |||||
<el-table-column label="参考租金"> | |||||
<template slot-scope="scope"> | |||||
<span>{{getRent(scope.row)}}</span> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column prop="status" label="商铺状态" width="100" v-if="showAddButton||showShopStatus"> | |||||
<template slot-scope="scope"> | |||||
<el-tag | |||||
:type="scope.row.status === '未出租' ? 'primary' : 'success'" | |||||
disable-transitions | |||||
>{{getshopStatus(scope.row.status)}}</el-tag> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="操作" v-if="showAddButton"> | |||||
<template slot-scope="scope"> | |||||
<el-button @click="deleteShop(scope.row,scope.$index)" type="text" size="small">删除</el-button> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<div class="s-add" v-if="showAddButton" :style="'margin-top:'+(rentInfo.length>0?'0':'-60px')"> | |||||
<div class="s-add-box"> | |||||
<div class="add-button" style="display:inline-block" @click="openShopDialog">{{rentInfo.length>0?'+ 添加商铺':'+ 新增'}}</div> | |||||
<div class="add-button" style="display:inline-block;margin-left:30px;" @click="selOriginShop" v-if="fromRenew!=undefined">选择原商铺</div> | |||||
</div> | |||||
</div> | |||||
<shop-list-dg :ref="tKey" :t-key="tKey" :cb="getShopCb" :shops-type="shopsType"></shop-list-dg> | |||||
<alert-dialog ref="alertDialogKey"></alert-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import shopListDg from "../contractComp/multishopListDg.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import alertDialog from "../../../core/comps/input/alertDialog.vue"; | |||||
import moment, { months } from "moment"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import {CouponCacheData} from '../../../service/couponData/data' | |||||
export default { | |||||
components: { | |||||
shopListDg, | |||||
alertDialog | |||||
}, | |||||
props: ["optionData", "merchentEditIf","rentInfoData","showShopStatus","fromRenew","curRentInfoList"], | |||||
data() { | |||||
return { | |||||
...mapActions([ | |||||
"setFormData", | |||||
"setRentInfo" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
tk: "rentshop", | |||||
tKey: "shoplist", | |||||
shopsType: "1", | |||||
priceUnitOption: ContractData.priceUnitOption, | |||||
showAddButton: this.merchentEditIf ? false : true | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
rentInfo: state => state.setRentInfo.rentInfo, | |||||
formData: state => state.setRentInfo.formData | |||||
}), | |||||
getHeight() { | |||||
return this.rentInfo.length > 10 ? 450 : null; | |||||
} | |||||
}, | |||||
methods: { | |||||
// 店铺弹框 | |||||
openShopDialog() { | |||||
this.$refs[this.tKey].openDialog(); | |||||
}, | |||||
selOriginShop() { | |||||
let obj = JSON.parse(JSON.stringify(this.curRentInfoList)); | |||||
console.log(obj) | |||||
this.setRentInfo(obj); | |||||
}, | |||||
getRent(item){ | |||||
return item.rent?item.rent+' 元/㎡/'+this.priceUnitOption.filter(e=>e.value==item.rent_unit)[0].name:'未设置'; | |||||
}, | |||||
getShopCb(items) { | |||||
let haveIndex = false; | |||||
items.data.map((item, index) => { | |||||
let haveIf = false; | |||||
this.rentInfo.map((item01, index01) => { | |||||
if (item.id == item01.id) { | |||||
haveIndex = true; | |||||
haveIf = true; | |||||
} | |||||
}); | |||||
if (haveIf == false) { | |||||
item.shopId = item.id; | |||||
item.price = 0; | |||||
item.rentPrice = 0; | |||||
item.deposit = 0; | |||||
item.rentArea = item.operationArea; | |||||
item.adjustRatio = []; | |||||
if (this.formData.months && this.formData.months.length > 0) { | |||||
this.formData.months.map((item01, index01) => { | |||||
item.adjustRatio.push(0); | |||||
}); | |||||
} | |||||
this.rentInfo.push(item); | |||||
} | |||||
}); | |||||
console.log(this.rentInfo) | |||||
this.setRentInfo(this.rentInfo); | |||||
if (haveIndex) { | |||||
this.$message("已帮您过滤重复商铺!"); | |||||
} | |||||
}, | |||||
/** | |||||
* 删除选中商铺 | |||||
*/ | |||||
deleteShop(item, index) { | |||||
this.$refs["alertDialogKey"].openDialog( | |||||
"此操作删除该商铺,是否要继续?", | |||||
() => { | |||||
this.rentInfo.splice(index, 1); | |||||
} | |||||
); | |||||
}, | |||||
/** | |||||
* 处理合同状态 | |||||
* value = 》合同状态 类型 int | |||||
*/ | |||||
getshopStatus(value){ | |||||
let arr = CouponCacheData.shopStatus | |||||
arr = arr.filter(item=>{ | |||||
return item.value == value | |||||
}) | |||||
return arr[0].name | |||||
// console.log(arr[0].name,"||||||"); | |||||
} | |||||
}, | |||||
created() { | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.s-add { | |||||
width: 100%; | |||||
background: #fff; | |||||
height: 59px; | |||||
text-align: center; | |||||
line-height: 59px; | |||||
z-index: 1000; | |||||
position: relative; | |||||
opacity: 1; | |||||
} | |||||
.s-add-box { | |||||
background: rgb(90, 118, 191, 0.1); | |||||
height: 60px; | |||||
padding-top: 12px; | |||||
box-sizing: border-box; | |||||
} | |||||
.add-button { | |||||
margin: 0 auto; | |||||
width: 95px; | |||||
height: 36px; | |||||
line-height: 36px; | |||||
background: rgba(255, 255, 255, 1); | |||||
border: 1px solid rgba(81, 169, 201, 1); | |||||
border-radius: 3px; | |||||
cursor: pointer; | |||||
box-sizing: border-box; | |||||
color: #51a9c9; | |||||
} | |||||
</style> | |||||
<style> | |||||
.marketing-list .line .el-form-item__content { | |||||
margin-left: 0 !important; | |||||
} | |||||
.marketing-list .outer_time_item01 .el-form-item__content { | |||||
margin-left: 0 !important; | |||||
} | |||||
.el-select-dropdown { | |||||
max-width: 222px !important; | |||||
} | |||||
.jiedan-button { | |||||
width: auto !important; | |||||
margin-top: 20px; | |||||
} | |||||
.rentshop { | |||||
background: #fff; | |||||
position: relative; | |||||
} | |||||
.rentshop .el-table { | |||||
border: none !important; | |||||
} | |||||
.rentshop .el-table thead { | |||||
background: #5976bf !important; | |||||
} | |||||
.rentshop .el-table th { | |||||
background: #5976bf !important; | |||||
color: #fff !important; | |||||
border: none !important; | |||||
text-align: center !important; | |||||
height: 40px !important; | |||||
line-height: 40px !important; | |||||
padding: 0 !important; | |||||
font-weight: 400; | |||||
font-size: 14px; | |||||
font-family: "Avenir", Helvetica, Arial, sans-serif; | |||||
} | |||||
.rentshop .el-table__header-wrapper { | |||||
height: 40px; | |||||
} | |||||
.rentshop .el-table td { | |||||
border: none !important; | |||||
text-align: center !important; | |||||
height: 46.2px !important; | |||||
} | |||||
.outer_time_item .el-form-item__content { | |||||
display: inline-block !important; | |||||
} | |||||
.outer_time_item .el-form-item__label { | |||||
padding: 0 12px 0 0px; | |||||
} | |||||
</style> | |||||
@@ -0,0 +1,173 @@ | |||||
<template> | |||||
<div class="block"> | |||||
<el-dialog | |||||
title="提前终止合同" | |||||
:modal-append-to-body="false" | |||||
:visible.sync="dialogVisible" | |||||
width="48%" | |||||
:before-close="handleClose" | |||||
> | |||||
<el-form :model="formData" ref="form" :rules="rules" label-width="100px" class="demo-dynamic"> | |||||
<el-form-item label="审批流程" v-if="processData.length>0"> | |||||
<process-template :processData="processData"></process-template> | |||||
</el-form-item> | |||||
<el-form-item label="终止类型:" v-if="stopType!=2&&(type==6||type==7)" prop="endProperty"> | |||||
<el-radio | |||||
v-for="(item,index) in stopTypeOption" | |||||
:label="item.value" | |||||
:key="index" | |||||
v-model="formData.endProperty" | |||||
>{{item.name}}</el-radio> | |||||
</el-form-item> | |||||
<!-- <div style="text-align:center;" v-if="!(processData.length>0)"> | |||||
您确定要提前终止此合同吗? | |||||
</div> --> | |||||
<el-form-item label="备注" prop="remark" v-if="processData.length>0"> | |||||
<el-input | |||||
type="textarea" | |||||
v-model="formData.remark" | |||||
placeholder="请填写备注!" | |||||
maxlength="150" | |||||
class="edit-item-input" | |||||
></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="saveForm">确 定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import Vue from "vue"; | |||||
import { CouponUrl } from "../../../components/marketing/businessComp/UrlEnum.js"; | |||||
import { ContractUrl } from "../businessComp/UrlEnum.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import processTemplate from "./processTemplate.vue"; | |||||
export default { | |||||
props: ["options", "processData", "type"], | |||||
components: { | |||||
processTemplate | |||||
}, | |||||
data() { | |||||
return { | |||||
contractType: this.options.contractType, | |||||
stopType: this.options.stopType, | |||||
formData: { | |||||
firstTaskUser: "", | |||||
secondTaskUser: "", | |||||
remark: "", | |||||
endProperty: "" | |||||
}, | |||||
rules: { | |||||
firstTaskUser: [ | |||||
{ required: true, message: "请选择初审人!", trigger: "change" } | |||||
], | |||||
endProperty: [ | |||||
{ required: true, message: "请选择终止类型!", trigger: "change" } | |||||
] | |||||
}, | |||||
stopTypeOption: [ | |||||
{ | |||||
name: "终止租金合同", | |||||
value: 1 | |||||
}, | |||||
{ | |||||
name: "终止租金合同及物业合同", | |||||
value: 2 | |||||
} | |||||
], | |||||
dialogVisible: false, | |||||
businessId: "", | |||||
contractNumber: "" | |||||
}; | |||||
}, | |||||
//新增的 | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
handleClose(done) { | |||||
this.$confirm("确认关闭?") | |||||
.then(_ => { | |||||
done(); | |||||
}) | |||||
.catch(_ => {}); | |||||
}, | |||||
showLog(businessId, contractNumber) { | |||||
this.businessId = businessId; | |||||
this.contractNumber = contractNumber; | |||||
this.dialogVisible = true; | |||||
this.formData = { | |||||
firstTaskUser: "", | |||||
secondTaskUser: "", | |||||
remark: "", | |||||
endProperty: "" | |||||
}; | |||||
}, | |||||
saveForm() { | |||||
let _this = this; | |||||
this.$refs["form"].validate(valid => { | |||||
if (valid) { | |||||
if (this.processData.length > 0) { | |||||
let param = { | |||||
businessId: this.businessId, | |||||
variables: [ | |||||
{ | |||||
key: "contractType", | |||||
value: this.contractType | |||||
}, | |||||
{ | |||||
key: "contractNumber", | |||||
value: this.contractNumber | |||||
}, | |||||
{ | |||||
key: "endProperty", | |||||
value: this.stopType==2?'':(this.type==18||this.type==20) ? 2: this.formData.endProperty | |||||
} | |||||
], | |||||
businessType: this.type, | |||||
remark: this.formData.remark | |||||
}; | |||||
this.postFetch(ContractUrl.workflowStart, param) | |||||
.then(d => { | |||||
_this.$message.success("提交成功"); | |||||
_this.dialogVisible = false; | |||||
_this.$parent.search(); | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} else { | |||||
let param={ | |||||
id:this.businessId, | |||||
endProperty:this.stopType==2?'':(this.type==18||this.type==20) ? 2: this.formData.endProperty | |||||
} | |||||
this.postFetch(ContractUrl.endContract, param) | |||||
.then(d => { | |||||
_this.$message.success("提交成功"); | |||||
_this.dialogVisible = false; | |||||
_this.$parent.search(); | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} | |||||
} else { | |||||
console.log("error submit!!"); | |||||
return false; | |||||
} | |||||
}); | |||||
} | |||||
}, | |||||
created() { | |||||
console.log(11111) | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
</style> |
@@ -0,0 +1,726 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<div class="shopBox" style="margin-bottom:20px;" v-if="fromAddTask != 'fromAddTask'"> | |||||
<rent-shop :rentInfoData='wxShops' :merchentEditIf="merchentEditIf"></rent-shop> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">合同信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同编号:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.contractNumber}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同状态:</el-col> | |||||
<el-col :span="18" class="span-text">{{cStatus(wxRentContract.status)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同签约日:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.signDate)}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<!-- 商户信息 --> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">商户信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">商户名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.merchantName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同主体名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.subjectName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">经营品牌:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBrand(wxRentContract.brand)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">业态:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBusiness(wxRentContract.businessId)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">店面类型:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeShopType(wxRentContract.shopType)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">负责人:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPerson}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">联系电话:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPhone}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<!-- --> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">租赁信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalStartDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁截止日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalEndDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">总租期:</el-col> | |||||
<el-col :span="18" class="span-text">{{totalPeriodMonth+'个月'+totalPeriodDay+"天"}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">装修期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.fixStartDate+' 至 '+wxRentContract.fixEndDate}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">计租开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.startDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">账单生成方式:</el-col> | |||||
<el-col :span="18" class="span-text">{{getAdjustPeriod}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">租金信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">计租面积:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.rentArea+'㎡'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title" v-if="contractType!=3&&contractType!=4">计租方式:</el-col> | |||||
<el-col :span="18" class="span-text" v-if="contractType!=3&&contractType!=4">{{changeType(wxRentContract.type)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" class="span-title">保底营业额:</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" class="span-text">{{wxRentContract.revenue/100+'元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租金单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.rentPrice+' ㎡/元/'+priceUnitType}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" v-if="wxRentContract.type!=2" class="span-title">租金</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type!=2" class="span-text">{{wxRentContract.price/100+' 元/'+priceUnitType}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4" class="span-title">联营扣点:</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio!=''" class="span-text"> | |||||
<!-- aaa --> | |||||
<show-rate-list class="cur-rate-list"></show-rate-list> | |||||
</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio==''" class="span-text">{{wxRentContract.payRatio/100+'%'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">押金:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.deposit/100+' 元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">付款周期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.receivePeriod+' 月'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.latePayRatio"> | |||||
<el-col :span="3" class="span-title">滞纳金费率:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.latePayRatio+ '%'}}<span style="margin-left:30px;">{{'欠缴后 '+wxRentContract.latePayDay+' 日开始计费'}}</span></el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.adjustRatio&&wxRentContract.adjustRatio.length>0"> | |||||
<el-col :span="3" class="span-title"> | |||||
年租金调整: | |||||
</el-col> | |||||
<el-col v-if="wxRentContract.adjustRatioWay==1" :span="18" class="span-text"><span v-for="(item,index) in wxRentContract.adjustRatio" :key='index'>{{"第"+(index+2)+"年上浮"+item/100+'%'+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}}</span></el-col> | |||||
<el-col v-else :span="18" class="span-text"> | |||||
<span v-for="(item,index) in wxRentContract.adjustRatio" :key='index'> | |||||
{{"第"+(index+2)+"年上浮"+item/100+'元/'+priceUnitType+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}} | |||||
</span> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">租金账单</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title"></el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<rent-bill :data="billData" :editIf='true' :ref="billTk"></rent-bill> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">物业信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">计租面积:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.rentArea+'㎡'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">物业费单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxPropertyContract.rentPrice/100+' ㎡/元/'+priceUnitType02}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" v-if="wxPropertyContract.type!=2" class="span-title">物业费</el-col> | |||||
<el-col :span="18" v-if="wxPropertyContract.type!=2" class="span-text">{{wxPropertyContract.price/100+' 元/'+priceUnitType02}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">物业押金:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxPropertyContract.deposit/100+' 元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">付款周期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxPropertyContract.receivePeriod+' 月'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxPropertyContract.latePayRatio"> | |||||
<el-col :span="3" class="span-title">滞纳金费率:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxPropertyContract.latePayRatio+ '%'}}<span style="margin-left:30px;">{{'欠缴后 '+wxPropertyContract.latePayDay+' 日开始计费'}}</span></el-col> | |||||
</el-row> | |||||
<el-row | |||||
v-if="wxPropertyContract.adjustRatio&&wxPropertyContract.adjustRatio.length>0" | |||||
> | |||||
<el-col :span="3" class="span-title">年物业费调整:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<div>{{getPricePer03(wxPropertyContract.adjustRatio)}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">物业费账单</div> | |||||
<div class="text-box-content"> | |||||
<el-row > | |||||
<el-col :span="20" class="span-text"> | |||||
<rent-bill :data="billData" :editIf='true' :ref="billTk02"></rent-bill> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同附件:</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length<=0">无</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length>0"><div class="download-file" v-for="(item,index) in fileNames" :key="index" @click.stop.prevent="download(index)">{{item.name}}</div></el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<el-row style="margin:20px 0 0;text-align:center;"> | |||||
<el-button @click.stop.prevent="cancel">返回</el-button> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../../core/tool/ajaxService"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { ContractUrl } from "../../contract/businessComp/UrlEnum.js"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import rentBill from "../../contract/contractutil/rentbill.vue"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import rentShop from "./../contractutil/rentshop.vue"; | |||||
import showRateList from "../rent/showRateList.vue"; | |||||
import moment from "moment"; | |||||
export default { | |||||
name: "pointLeaseCheck", | |||||
components: { | |||||
rentBill, | |||||
rentShop, | |||||
showRateList | |||||
}, | |||||
data() { | |||||
return { | |||||
brands: [], | |||||
merchentEditIf: true, | |||||
priceUnitType: "", | |||||
priceUnitType02: "", | |||||
fromAddTask:"", | |||||
priceUnitOption: ContractData.priceUnitOption, | |||||
totalPeriodMonth: 0, | |||||
totalPeriodDay: 0, | |||||
contractType: 0, | |||||
remark: "", | |||||
wxShops: [], | |||||
billData: [], | |||||
billTk: "rentbill", | |||||
billTk02: "rentbill02", | |||||
wxRentContract: "", | |||||
rentOweCount: "", | |||||
propertyOweCount: "", | |||||
depositOweCount: "", | |||||
sRemark: "", | |||||
wxMerchant: "", | |||||
businessIds: [], | |||||
progressData: [], | |||||
fileNames: [], | |||||
active: 0, | |||||
// 店铺类型 | |||||
shopTypes: ContractData.shopTypes, | |||||
//计租计算方式 | |||||
computedTypes: ContractData.computedTypes, | |||||
// 物业账单调整 | |||||
wxPropertyContract: { | |||||
adjustRatioWay: "1", //年物业费调整方式1、比例上调2、按固定上调 | |||||
rentStartType: 1, | |||||
rentShopType: 2, | |||||
signDate: "", //合同签约日 | |||||
rentalStartDate: "", //计租开始日期 | |||||
startDate: "", //起租日 | |||||
brand: "", //商铺经营品牌 | |||||
merchantName: "", //商户名称 | |||||
merchantId: "", //商户id | |||||
contractNumber: "", //合同编号 | |||||
status: "", //合同状态 | |||||
linkPerson: "", //联系人 | |||||
linkPhone: "", //联系人电话 | |||||
rentArea: "", //计租面积 | |||||
shopType: "", //店铺类型 | |||||
zuqi: "", //计租日期 | |||||
price: "", //租金 | |||||
deposit: "", //押金 | |||||
receivePeriod: 0, //付款周期 | |||||
payAccount: "", //支付账号 | |||||
payDate: "", //支付规则 | |||||
shopId: "", //商铺id | |||||
filepath: "", //文件路径 | |||||
filename: "", //文件名称 | |||||
merchantId: "", //商户id | |||||
businessId: "", //经营业态 | |||||
adjustRatio: "", //上浮比例 | |||||
adjustPeriod: "2", | |||||
id: "" | |||||
} | |||||
}; | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
topNav: state => state.topNav.data, //将 this.topNav 映射为 this.$store.topNav.data | |||||
navigationInfo: state => state.topNav.navigationInfo, | |||||
formData: state => state.setRentInfo.formData | |||||
}), | |||||
getAdjustPeriod() { | |||||
return this.wxRentContract.adjustPeriod == 3 | |||||
? "按自然月生成" | |||||
: "按计租日期"; | |||||
} | |||||
}, | |||||
methods: { | |||||
cStatus(item) { | |||||
return item != undefined | |||||
? CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.toString(); | |||||
})[0].name | |||||
: ""; | |||||
}, | |||||
changeBrand(brand) { | |||||
return this.brands.length > 0 && brand | |||||
? this.brands.filter(e => e.id == brand)[0].value | |||||
: ""; | |||||
}, | |||||
changeBusiness(businessId) { | |||||
return this.businessIds.length > 0 && businessId != undefined | |||||
? this.businessIds.filter(e => e.id == businessId)[0].title | |||||
: ""; | |||||
}, | |||||
changeShopType(id) { | |||||
return id != undefined | |||||
? this.shopTypes.filter(e => e.value == id)[0].label | |||||
: ""; | |||||
}, | |||||
getPricePer02(items, indexs) { | |||||
let str = ""; | |||||
if ( | |||||
this.wxRentContract.adjustRatioWay == 1 || | |||||
this.wxPropertyContract.adjustRatioWay == 1 | |||||
) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + ",第" + (index + 2) + "年上浮" + item + "%" | |||||
: str + "第" + (index + 2) + "年上浮" + item + "%"; | |||||
}) | |||||
: ""; | |||||
} else if ( | |||||
this.wxRentContract.adjustRatioWay == 2 || | |||||
this.wxPropertyContract.adjustRatioWay == 2 | |||||
) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}) | |||||
: ""; | |||||
} else { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}) | |||||
: ""; | |||||
} | |||||
return str; | |||||
}, | |||||
getPricePer03(items, indexs) { | |||||
let str = ""; | |||||
if (this.wxPropertyContract.adjustRatioWay == 1) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + ",第" + (index + 2) + "年上浮" + item + "%" | |||||
: str + "第" + (index + 2) + "年上浮" + item + "%"; | |||||
}) | |||||
: ""; | |||||
} else if (this.wxPropertyContract.adjustRatioWay == 2) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02 | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02; | |||||
}) | |||||
: ""; | |||||
} else { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02 | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02; | |||||
}) | |||||
: ""; | |||||
} | |||||
return str; | |||||
}, | |||||
changeDate(date) { | |||||
return moment(date).format("YYYY-MM-DD"); | |||||
}, | |||||
changeType(type) { | |||||
return type != undefined | |||||
? this.computedTypes.filter(e => e.value == type)[0].label | |||||
: ""; | |||||
}, | |||||
...mapActions([ | |||||
"setFormData", | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
download: function(index) { | |||||
window.open(this.fileNames[index].url); | |||||
}, | |||||
cancel() { | |||||
this.$router.back(-1); | |||||
}, | |||||
getData() { | |||||
let _this = this; | |||||
this.contractType = this.$route.query.contractType; | |||||
// if(this.$route.query.contractType==3||this.$route.query.contractType==4){ | |||||
// this.getFetch( | |||||
// "/api/wxRentPropertyContract/findById?id=" + this.$route.query.id | |||||
// ).then(d => { | |||||
// if(d.data&&d.data.property){ | |||||
// this.wxPropertyContract = Object.assign(this.wxPropertyContract, d.data.property); | |||||
// _this.$refs[_this.billTk02].setData(d.data.property.previewBillRentList); | |||||
// } | |||||
// if(d.data&&d.data.rent){ | |||||
// debugger | |||||
// d.data.rent.wxPropertyContract.adjustRatio=d.data.rent.wxPropertyContract.adjustRatio?JSON.parse(d.data.rent.wxPropertyContract.adjustRatio):''; | |||||
// debugger | |||||
// _this.wxRentContract=d.data.wxPropertyContract; | |||||
// _this.wxRentContract.fixStartDate=_this.wxRentContract.fixStartDate?moment(_this.wxRentContract.fixStartDate).format('YYYY-MM-DD'):"" | |||||
// _this.wxRentContract.fixEndDate=_this.wxRentContract.fixEndDate?moment(_this.wxRentContract.fixEndDate).format('YYYY-MM-DD'):"" | |||||
// this.priceUnitType = this.wxRentContract.priceUnit?this.priceUnitOption.filter(e=>e.value==this.wxRentContract.priceUnit)[0].name:''; | |||||
// _this.totalPeriodMonth = d.data.rent.totalPeriodMonth | |||||
// _this.totalPeriodDay = d.data.rent.totalPeriodDay | |||||
// _this.fileNames = JSON.parse(d.data.rent.wxPropertyContract.fileNames); | |||||
// _this.wxShops=d.data.rent.wxShops | |||||
// _this.$refs[_this.billTk].setData(d.data.rent.previewBillRentList); | |||||
// } | |||||
// }); | |||||
// } | |||||
this.getFetch( | |||||
"/api/wxRentPropertyContract/findById?id=" + this.$route.query.id | |||||
).then(d => { | |||||
if (d.data && d.data.property) { | |||||
this.wxPropertyContract = d.data.property; | |||||
this.wxPropertyContract = Object.assign( | |||||
this.wxPropertyContract, | |||||
d.data.property | |||||
); | |||||
this.$refs[this.billTk02].setData( | |||||
d.data.property.previewBillRentList | |||||
); | |||||
this.fileNames = JSON.parse(d.data.property.fileNames); | |||||
let adjustRatio02 = []; | |||||
JSON.parse(d.data.property.adjustRatio).map((item, index) => { | |||||
let a = item / 100; | |||||
adjustRatio02.push(a); | |||||
}); | |||||
this.wxPropertyContract.adjustRatio = adjustRatio02; | |||||
this.priceUnitType02 = this.wxPropertyContract.priceUnit | |||||
? this.priceUnitOption.filter( | |||||
e => e.value == this.wxPropertyContract.priceUnit | |||||
)[0].name | |||||
: ""; | |||||
} | |||||
if (d.data && d.data.rent) { | |||||
d.data.rent.wxRentContract.adjustRatio = d.data.rent.wxRentContract | |||||
.adjustRatio | |||||
? JSON.parse(d.data.rent.wxRentContract.adjustRatio) | |||||
: ""; | |||||
_this.wxRentContract = d.data.rent.wxRentContract; | |||||
_this.wxRentContract.fixStartDate = _this.wxRentContract.fixStartDate | |||||
? moment(_this.wxRentContract.fixStartDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
_this.wxRentContract.fixEndDate = _this.wxRentContract.fixEndDate | |||||
? moment(_this.wxRentContract.fixEndDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
this.priceUnitType = this.wxRentContract.priceUnit | |||||
? this.priceUnitOption.filter( | |||||
e => e.value == this.wxRentContract.priceUnit | |||||
)[0].name | |||||
: ""; | |||||
_this.totalPeriodMonth = d.data.rent.totalPeriodMonth; | |||||
_this.totalPeriodDay = d.data.rent.totalPeriodDay; | |||||
// _this.fileNames = JSON.parse(d.data.rent.wxRentContract.fileNames); | |||||
_this.wxShops = d.data.rent.wxShops; | |||||
_this.$refs[_this.billTk].setData(d.data.rent.previewBillRentList); | |||||
//aaa | |||||
if ( | |||||
d.data.rent.wxRentContract.busDiscountRatio == undefined || | |||||
d.data.rent.wxRentContract.busDiscountTime == undefined | |||||
) { | |||||
d.data.rent.wxRentContract.busDiscountRatio = ""; | |||||
d.data.rent.wxRentContract.busDiscountTime = 1; | |||||
} | |||||
let curObj = Object.assign({}, this.formData); | |||||
curObj.busDiscountRatio = d.data.rent.wxRentContract.busDiscountRatio; | |||||
curObj.busDiscountTime = d.data.rent.wxRentContract.busDiscountTime; | |||||
curObj.payRatio = d.data.rent.wxRentContract.payRatio; | |||||
this.setFormData(curObj); | |||||
} | |||||
}); | |||||
this.getFetch( | |||||
"/api/workflow/applyHistoryAndAssignee?businessId=" + | |||||
this.$route.query.id | |||||
).then(d => { | |||||
let progressData = d.data; | |||||
progressData = d.data; | |||||
progressData.reverse(); | |||||
let indexs = 0; | |||||
_this.progressData = []; | |||||
progressData.map((item, index) => { | |||||
if (item.isLastStart) { | |||||
indexs = index; | |||||
} | |||||
}); | |||||
progressData.map((item, index) => { | |||||
if (index >= indexs) { | |||||
_this.progressData.push(item); | |||||
} | |||||
}); | |||||
_this.progressData.map((item, index) => { | |||||
if (item.status == 1) { | |||||
item.userName = item.userName + "( 发起审批)"; | |||||
} else if (item.status == 2) { | |||||
item.userName = item.userName + "( 已审批)"; | |||||
} else if (item.status == 3) { | |||||
item.userName = item.userName + "( 驳回)"; | |||||
} else if (item.status == 4) { | |||||
item.userName = item.userName + "( 待审批)"; | |||||
} | |||||
}); | |||||
for (var i = 1; _this.progressData.length <= 10; i++) { | |||||
if (_this.progressData[i].status == 4) { | |||||
_this.active = i; | |||||
break; | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
}, | |||||
mounted: function() { | |||||
// this.getFetch("/api/at/list?describe=") | |||||
commonUtil.pvuv.setPVUV.apply(this, []); | |||||
}, | |||||
created() { | |||||
// this.reload() | |||||
if (this.$route.query.contractType == 2) { | |||||
this.setNavData(["合同管理", "多经点位", "租金合同", "查看"]); | |||||
} else { | |||||
this.setNavData(["合同管理", "多经点位", "物业合同", "查看"]); | |||||
} | |||||
this.getData(); | |||||
if(this.$route.query.flags){ | |||||
this.fromAddTask = this.$route.query.flags; | |||||
this.setNavData(["招商管理", "多经点位", "租金合同", "查看"]); | |||||
} | |||||
//获取品牌列表 | |||||
this.getFetch("/api/wxBrand/queryBrand") | |||||
.then(d => { | |||||
this.brands = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
this.getFetch(ContractUrl.businessList) | |||||
.then(d => { | |||||
this.businessIds = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.text-box { | |||||
background: #fff; | |||||
margin-bottom: 20px; | |||||
} | |||||
.download-file { | |||||
cursor: pointer; | |||||
} | |||||
.text-box-title { | |||||
height: 42px; | |||||
line-height: 42px; | |||||
padding-left: 20px; | |||||
color: #fff; | |||||
font-weight: 400px; | |||||
font-size: 14px; | |||||
background: rgba(51, 153, 255, 1); | |||||
} | |||||
.text-box-content { | |||||
padding: 20px; | |||||
line-height: 36px; | |||||
font-size: 12px; | |||||
} | |||||
.span-title { | |||||
text-align: right; | |||||
padding-right: 15px; | |||||
} | |||||
.layout-content { | |||||
width: 100%; | |||||
height: auto; | |||||
min-height: 300px; | |||||
background: #141e29; | |||||
border-radius: 2px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
/* width: 200px; */ | |||||
} | |||||
/* .el-select{ | |||||
width:120px; | |||||
} */ | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width: 60px; */ | |||||
border: none !important; | |||||
margin: 0 10px; | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 100px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.fx_send .el-form-item__content .el-select { | |||||
width: 120px !important; | |||||
} | |||||
.fx_title .el-input { | |||||
width: 150px; | |||||
} | |||||
.approval-list .span-title { | |||||
padding-right: 0; | |||||
} | |||||
.cur-rate-list /deep/ .rate-show-list li { | |||||
margin-top: 6px; | |||||
} | |||||
</style> |
@@ -0,0 +1,572 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<el-form | |||||
:inline="true" | |||||
:model="ruleForm" | |||||
ref="ruleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="商铺号" prop="name" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="商户名称" prop="merchantName" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="合同状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in options" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="审批状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in applyStatusOptions" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="计租方式" class="fx_send"> | |||||
<el-select v-model="ruleForm.type" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in types" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-button type="primary" class="builtBtn" @click="goSave" style="margin-right:4px;"> | |||||
<i>+</i>新建 | |||||
</el-button> | |||||
<el-button type="primary" class="builtBtn" @click="goBulu" style="margin-left:4px;"> | |||||
<i>+</i>补录 | |||||
</el-button> | |||||
<el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;"> | |||||
<i>+</i>续签 | |||||
</el-button> | |||||
<table-list :ref="tk" :options="optionsTable"></table-list> | |||||
<!-- <stop-contract :ref="st" :options="stopOptions"></stop-contract> --> | |||||
<stop-contract :ref="st" :type='20' :processData="processData" :options="stopOptions"></stop-contract> | |||||
</div> | |||||
<div> | |||||
<el-dialog | |||||
title="提示" | |||||
:visible.sync="dialogVisible" | |||||
width="40%" | |||||
:modal-append-to-body="false" | |||||
:before-close="handleClose" | |||||
> | |||||
<span>当前有欠缴账单未结清,是否要继续终止合同?</span> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="stopContract">确定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import StopContract from "../contractutil/stopcontract.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../../core/tool/ajaxService"; | |||||
import reportTool from "../../../core/tool/report.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { promissionUrl } from "../../../urlconfig/promission/url.js"; | |||||
import { ContractUrl } from "../businessComp/UrlEnum.js"; | |||||
let echarts = require("echarts"); | |||||
export default { | |||||
inject: ["reload"], | |||||
extends: AjaxUtil, | |||||
name: "pointrentlist", | |||||
components: { | |||||
TableList, | |||||
StopContract | |||||
}, | |||||
data() { | |||||
return { | |||||
processData:[], | |||||
waitSignCount: "", //待签约 | |||||
endSoonCount: "", //将到期合同 | |||||
dialogVisible: false, | |||||
rendPaidCount: "", //计租中合同 | |||||
shopcount: "", //空余商铺 | |||||
tk: "manjianTableKey", | |||||
st: "stopContract", | |||||
stopOptions: { | |||||
contractType: "6" | |||||
}, | |||||
buildingArr: [], | |||||
floorArr: [], | |||||
applyStatusOptions:ContractData.applyStatus, | |||||
ruleForm: { | |||||
building: "", | |||||
buildingId: "", | |||||
floor: "", | |||||
floorId: "", | |||||
shopNumber: "", | |||||
merchantName: "", | |||||
status: "", | |||||
type: "", | |||||
applyStatus:"" | |||||
}, | |||||
options: ContractData.statusOptions, | |||||
types: [ | |||||
{ | |||||
value: "1", | |||||
label: "按租赁面积" | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "联营扣点" | |||||
}, | |||||
{ | |||||
value: 3, | |||||
label: "面积计租、联营取高" | |||||
} | |||||
], | |||||
optionsTable: { | |||||
actions: [ | |||||
{ | |||||
key: "edit", | |||||
val: "编辑", | |||||
action: this.aCount, | |||||
show: item => { | |||||
return item.status == 0 || | |||||
((item.status == 1 || item.status == 8) && | |||||
// ((item.applyStatus == 0 && item.merchantId) || | |||||
( item.applyStatus == 0 || | |||||
item.applyStatus == 3 || | |||||
item.applyStatus == 5)) | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "终止", | |||||
action: this.endcontract, | |||||
show: item => { | |||||
if ( | |||||
(item.status == 2 || item.status == 3 || item.status == 4) && | |||||
item.applyStatus != 1 | |||||
) { | |||||
return true; | |||||
} else { | |||||
return false; | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "查看", | |||||
action: this.goCheck, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "download", | |||||
val: "下载", | |||||
action: this.goDownload, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "审批进度", | |||||
action: this.checkCurrentStatus, | |||||
show: item => { | |||||
return item.applyStatus == 1 || | |||||
item.applyStatus == 2 || | |||||
item.applyStatus == 3 | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "绑定商户", | |||||
action: this.goToEditShop, | |||||
show: item => { | |||||
return (item.applyStatus == 2||(item.applyStatus == 0 && !item.merchantId)) && item.propertyStatus == 1 &&item.status == 1 ? true : false; | |||||
} | |||||
} | |||||
], | |||||
showCk: false, | |||||
map: [ | |||||
{ | |||||
key: "contractNumber", | |||||
val: "合同编号" | |||||
}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "merchantName", | |||||
val: "商户名称" | |||||
}, | |||||
{ | |||||
key: "rentalStartDate", | |||||
val: "租赁开始日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentalEndDate", | |||||
val: "租赁结束日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentPrice", | |||||
val: "租金", | |||||
convert: this.divide, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "propertyPrice", | |||||
val: "物业费", | |||||
convert: this.divide1, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "type", | |||||
val: "计租方式", | |||||
convert: this.ctype | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "合同状态", | |||||
convert: this.cStatus | |||||
}, | |||||
{ | |||||
key: "applyStatus", | |||||
val: "审批状态", | |||||
convert: this.cApplyStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return ( | |||||
"/api/wxRentPropertyContract/list?merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&status=" + | |||||
this.ruleForm.status + | |||||
"&type=" + | |||||
this.ruleForm.type + | |||||
"&applyStatus=" + | |||||
this.ruleForm.applyStatus+ | |||||
"&rentShopType=2"+ | |||||
"&operationType=2" | |||||
); | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.list, | |||||
count: data.data.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
changeBuilding: function(item) { | |||||
for (let building of this.buildingArr) { | |||||
if (item == building.id) { | |||||
this.floorArr = building.floors; | |||||
} | |||||
} | |||||
this.ruleForm.floor = ""; | |||||
//this.search() | |||||
}, | |||||
getBuilding: function() { | |||||
this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => { | |||||
this.buildingArr = d.data; | |||||
}); | |||||
}, | |||||
cApplyStatus(col, item) { | |||||
if (item.applyStatus) { | |||||
return ( | |||||
(item.businessType != 20 ? "签约" : "终止") + | |||||
ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0] | |||||
.name | |||||
); | |||||
} else if (item.applyStatus === 0) { | |||||
return "未提交审核"; | |||||
} | |||||
}, | |||||
goToEditShop(item) { | |||||
this.$router.push({ | |||||
path: "/pointsMerchant/pointmerchantAdd?contractId=" + item.id | |||||
}); | |||||
}, | |||||
checkCurrentStatus(item, row) { | |||||
this.$router.push({ | |||||
path: "rentApprovals?id=" + item.id | |||||
}); | |||||
}, | |||||
cStatus(col, item) { | |||||
return CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.status.toString(); | |||||
})[0].name; | |||||
}, | |||||
divide(col, item) { | |||||
//aaa | |||||
if (item.busDiscountRatio != undefined && item.busDiscountTime != 0 && item.busDiscountRatio !='') { | |||||
return Number(item.rentPrice) / 100 +(item.busDiscountTime==1?'元/年':item.busDiscountTime==2?'元/月':'元/周期'); | |||||
} else { | |||||
return Number(item.rentPrice) / 100 +(item.rentPriceUnit==1?'元/日':item.rentPriceUnit==2?'元/月':'元/年'); | |||||
} | |||||
}, | |||||
divide1(col, item) { | |||||
return item.propertyPrice?Number(item.propertyPrice) / 100 +(item.propertyPriceUnit==1?'元/日':item.propertyPriceUnit==2?'元/月':'元/年'):'暂未设置'; | |||||
}, | |||||
ctype(col, item) { | |||||
if (item.type == 1) { | |||||
return "按租赁面积"; | |||||
} else if (item.type == 2) { | |||||
return "联营扣点"; | |||||
} else { | |||||
return "面积计租、联营取高"; | |||||
} | |||||
}, | |||||
aCount: function(item, row) { | |||||
if (item.merchantId) { | |||||
this.$router.push({ | |||||
path: "pointLeaseBulu?id=" + item.id | |||||
}); | |||||
} else { | |||||
this.$router.push({ | |||||
path: "pointLeaseEdit?id=" + item.id | |||||
}); | |||||
} | |||||
}, | |||||
goCheck: function(item, row) { | |||||
/** | |||||
contractType合同类型:1租金+物业合同,2多经合同,3物业合同,4多经物业合同 | |||||
businessType操作类型:1合同审批,2账单审批,3终止合同审批 | |||||
id为合同id | |||||
*/ | |||||
this.$router.push({ | |||||
path: `/pointLeaseCheck?id=${item.id}&contractType=6&businessType=1` | |||||
}); | |||||
}, | |||||
handleClose(done) { | |||||
this.$confirm("确认关闭?") | |||||
.then(_ => { | |||||
done(); | |||||
}) | |||||
.catch(_ => {}); | |||||
}, | |||||
endcontract: function(item, row) { | |||||
let that = this; | |||||
this.getFetch("/api/wxBillAll/oweBillCount?type=1&contractId=" + item.id) | |||||
.then(d => { | |||||
that.contractId = item.id; | |||||
that.contractNumber = item.contractNumber; | |||||
if (Number(d.data) > 0) { | |||||
that.dialogVisible = true; | |||||
} else { | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(item.id, item.contractNumber); | |||||
}else{ | |||||
this.makeSure(); | |||||
} | |||||
} | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
makeSure(){ | |||||
this.$confirm('您确定要提前终止此合同吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.endProperty(); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消删除' | |||||
}); | |||||
}); | |||||
}, | |||||
endProperty(){ | |||||
let _this=this; | |||||
let param={ | |||||
id:this.contractId, | |||||
endProperty:2 | |||||
} | |||||
this.postFetch(ContractUrl.endContract, param) | |||||
.then(d => { | |||||
_this.$message.success("操作成功"); | |||||
_this.dialogVisible = false; | |||||
_this.search(); | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
}, | |||||
stopContract() { | |||||
let _this=this; | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}else{ | |||||
this.endProperty(); | |||||
} | |||||
}, | |||||
goSave: function() { | |||||
this.$router.push({ | |||||
path: "/pointLeaseEdit" | |||||
}); | |||||
}, | |||||
goBulu: function() { | |||||
this.$router.push({ | |||||
path: "/pointLeaseBulu" | |||||
}); | |||||
}, | |||||
goRenew(){ | |||||
this.$router.push({ | |||||
path: "/pointLeaseEdit", | |||||
query:{ | |||||
Renew:true | |||||
} | |||||
}); | |||||
}, | |||||
goDownload: function(item) { | |||||
location.href = "/api/wxRentContract/exportContract?id=" + item.id; | |||||
}, | |||||
search: function() { | |||||
let tk = this.$refs[this.tk]; | |||||
tk.search(tk.getParams().index); | |||||
}, | |||||
/** | |||||
* 根据业务查询模板 | |||||
*/ | |||||
getModelBybusiness(){ | |||||
this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=20`) | |||||
.then(d=>{ | |||||
if(d.data.length>0){ | |||||
this.processData = JSON.parse(d.data[0].flow).lists; | |||||
} | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data); | |||||
}) | |||||
} | |||||
}, | |||||
created(){ | |||||
this.setNavData(["合同管理", "多经点位", "租金+物业合同"]); | |||||
}, | |||||
activated(){ | |||||
this.search() | |||||
this.setNavData(["合同管理", "多经点位", "租金+物业合同"]); | |||||
this.getBuilding(); | |||||
this.getModelBybusiness() | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
} | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width:60px; */ | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 80px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.el-form-item .el-form-item__content, | |||||
.el-form-item .el-form-item__content .el-date-editor, | |||||
.el-form-item .el-form-item__content .el-date-editor .el-input__inner { | |||||
width: 150px; | |||||
} | |||||
/* .fx_send .el-form-item__content .el-select { | |||||
width: 133px !important; | |||||
} */ | |||||
.fx_title .el-input { | |||||
width: 193px; | |||||
} | |||||
</style> |
@@ -0,0 +1,187 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<div class="text-content"> | |||||
<el-row v-for="(item,index) in applyData" :key="index"> | |||||
<el-col :span="3" class="left"> | |||||
<div class="date">{{changeDate(item.updateDate,0)}}</div> | |||||
<div class="time">{{changeDate(item.updateDate,1)}}</div> | |||||
</el-col> | |||||
<el-col :span="1" class="center"> | |||||
<div class="img" v-if="index!=0"> | |||||
<div class="circle"></div> | |||||
</div> | |||||
<div class="icon-img" v-if="index==0"> | |||||
<i | |||||
:class="'iconfont iconBox '+changeIcon(item.status)" | |||||
style="color:rgba(200, 89, 98, 1);font-size:26px" | |||||
></i> | |||||
</div> | |||||
<div | |||||
class="line" | |||||
:style="'height:'+(item.remark!=undefined?((((1519-308)*5)/6)/(((bodyWidth-308)*5)/6))*((item.remark.length/70))*32+58:'58')+'px'" | |||||
></div> | |||||
</el-col> | |||||
<el-col :span="20" class="right"> | |||||
<div | |||||
class="right-title" | |||||
:style="'color:'+(index==0?'rgba(200, 89, 98, 1)':'rgba(51,51,51,1)')" | |||||
>{{changeApplyStatus(item.status)}}</div> | |||||
<div class="right-content">{{item.remark}}</div> | |||||
<div class="right-content">{{'审批人:'+item.userName}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import moment from "moment"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
let echarts = require("echarts"); | |||||
export default { | |||||
inject: ["reload"], | |||||
name: "pointrentApprovals", | |||||
components: { | |||||
TableList, | |||||
bodyWidth: 0 | |||||
}, | |||||
data() { | |||||
return { | |||||
applyData: [] | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
changeIcon(status) { | |||||
return status | |||||
? ContractData.applyHistoryStatus.filter(e => e.value == status)[0].icon | |||||
: ""; | |||||
}, | |||||
changeDate(date, index) { | |||||
if (index === 0) { | |||||
return moment(date).format("YYYY-MM-DD"); | |||||
} else { | |||||
return moment(date).format("HH:mm:ss"); | |||||
} | |||||
}, | |||||
changeApplyStatus(item) { | |||||
return item | |||||
? ContractData.applyHistoryStatus.filter(e => e.value == item)[0].name | |||||
: ""; | |||||
}, | |||||
getData() { | |||||
this.getFetch( | |||||
"/api/workflow/applyHistory?businessId=" + this.$route.query.id | |||||
) | |||||
.then(d => { | |||||
this.applyData = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} | |||||
}, | |||||
mounted() { | |||||
this.setNavData(["合同管理", "审批进度"]); | |||||
}, | |||||
created() { | |||||
this.getData(); | |||||
this.bodyWidth = document.body.offsetWidth; | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.text-content { | |||||
padding: 30px 0; | |||||
width: 100%; | |||||
height: auto; | |||||
background: #fff; | |||||
} | |||||
.left { | |||||
text-align: right; | |||||
padding-right: 20px; | |||||
} | |||||
.date { | |||||
font-size: 14px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(153, 153, 153, 1); | |||||
line-height: 32px; | |||||
} | |||||
.time { | |||||
font-size: 14px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(51, 51, 51, 1); | |||||
line-height: 26px; | |||||
} | |||||
.img { | |||||
width: 26px; | |||||
height: 26px; | |||||
border-radius: 13px; | |||||
border: 1px solid rgba(234, 240, 254, 1); | |||||
box-sizing: border-box; | |||||
margin: 4px auto; | |||||
} | |||||
.icon-img { | |||||
width: 30px; | |||||
height: 30px; | |||||
margin: 4px auto; | |||||
} | |||||
.circle { | |||||
width: 20px; | |||||
height: 20px; | |||||
border-radius: 10px; | |||||
background: rgba(234, 240, 254, 1); | |||||
margin: 2px auto 0; | |||||
box-sizing: border-box; | |||||
} | |||||
.line { | |||||
/* height: 64px; */ | |||||
width: 2px; | |||||
background: rgba(234, 240, 254, 1); | |||||
border-radius: 1px; | |||||
margin: 0 auto; | |||||
box-sizing: border-box; | |||||
} | |||||
.right { | |||||
padding: 0 40px 0 20px; | |||||
} | |||||
.right-title { | |||||
font-size: 18px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(51, 51, 51, 1); | |||||
line-height: 32px; | |||||
} | |||||
.right-content { | |||||
font-size: 14px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(153, 153, 153, 1); | |||||
line-height: 26px; | |||||
} | |||||
</style> |
@@ -0,0 +1,554 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<el-form | |||||
:inline="true" | |||||
:model="ruleForm" | |||||
ref="ruleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="商铺号" prop="name" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="商户名称" prop="merchantName" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="楼座" prop="building" class="fx_send"> | |||||
<el-select | |||||
v-model="ruleForm.building" | |||||
placeholder="请选择" | |||||
@change="changeBuilding" | |||||
clearable | |||||
> | |||||
<el-option | |||||
v-for="(item,index) in buildingArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼层" prop="floor" class="fx_send"> | |||||
<el-select v-model="ruleForm.floor" placeholder="请选择" clearable> | |||||
<el-option | |||||
v-for="(item,index) in floorArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.floorName" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="合同状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in options" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="审批状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in applyStatusOptions" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="计租方式" class="fx_send"> | |||||
<el-select v-model="ruleForm.type" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in types" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-button type="primary" class="builtBtn" @click="goSave" style="margin-right:4px;"> | |||||
<i>+</i>新建 | |||||
</el-button> | |||||
<el-button type="primary" class="builtBtn" @click="goBulu" style="margin-left:4px;"> | |||||
<i>+</i>补录 | |||||
</el-button> | |||||
<el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;"> | |||||
<i>+</i>续签 | |||||
</el-button> | |||||
<table-list :ref="tk" :options="optionsTable"></table-list> | |||||
<stop-contract :ref="st" :type='7' :processData="processData" :options="stopOptions"></stop-contract> | |||||
</div> | |||||
<div> | |||||
<el-dialog | |||||
title="提示" | |||||
:visible.sync="dialogVisible" | |||||
width="40%" | |||||
:modal-append-to-body="false" | |||||
:before-close="handleClose" | |||||
> | |||||
<span>当前有欠缴账单未结清,是否要继续终止合同?</span> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="stopContract">确定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import StopContract from "../contractutil/stopcontract.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../../core/tool/ajaxService"; | |||||
import reportTool from "../../../core/tool/report.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { promissionUrl } from "../../../urlconfig/promission/url.js"; | |||||
let echarts = require("echarts"); | |||||
export default { | |||||
inject: ["reload"], | |||||
extends: AjaxUtil, | |||||
name: "pointrentlist", | |||||
components: { | |||||
TableList, | |||||
StopContract | |||||
}, | |||||
data() { | |||||
return { | |||||
processData:[], | |||||
waitSignCount: "", //待签约 | |||||
endSoonCount: "", //将到期合同 | |||||
dialogVisible: false, | |||||
rendPaidCount: "", //计租中合同 | |||||
shopcount: "", //空余商铺 | |||||
tk: "manjianTableKey", | |||||
st: "stopContract", | |||||
stopOptions: { | |||||
contractType: "2" | |||||
}, | |||||
buildingArr: [], | |||||
floorArr: [], | |||||
applyStatusOptions:ContractData.applyStatus, | |||||
ruleForm: { | |||||
building: "", | |||||
buildingId: "", | |||||
floor: "", | |||||
floorId: "", | |||||
shopNumber: "", | |||||
merchantName: "", | |||||
status: "", | |||||
type: "", | |||||
applyStatus:"" | |||||
}, | |||||
options: ContractData.statusOptions, | |||||
types: [ | |||||
{ | |||||
value: "1", | |||||
label: "按租赁面积" | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "联营扣点" | |||||
}, | |||||
{ | |||||
value: 3, | |||||
label: "面积计租、联营取高" | |||||
} | |||||
], | |||||
optionsTable: { | |||||
actions: [ | |||||
{ | |||||
key: "edit", | |||||
val: "编辑", | |||||
action: this.aCount, | |||||
show: item => { | |||||
return item.status == 0 || | |||||
((item.status == 1 || item.status == 8) && | |||||
// ((item.applyStatus == 0 && item.merchantId) || | |||||
( item.applyStatus == 0 || | |||||
item.applyStatus == 3 || | |||||
item.applyStatus == 5)) | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "终止", | |||||
action: this.endcontract, | |||||
show: item => { | |||||
if ( | |||||
(item.status == 2 || item.status == 3 || item.status == 4) && | |||||
item.applyStatus != 1 | |||||
) { | |||||
return true; | |||||
} else { | |||||
return false; | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "查看", | |||||
action: this.goCheck, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "download", | |||||
val: "下载", | |||||
action: this.goDownload, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "审批进度", | |||||
action: this.checkCurrentStatus, | |||||
show: item => { | |||||
return item.applyStatus == 1 || | |||||
item.applyStatus == 2 || | |||||
item.applyStatus == 3 | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "绑定商户", | |||||
action: this.goToEditShop, | |||||
show: item => { | |||||
return (item.applyStatus == 2||(item.applyStatus == 0 && !item.merchantId)) && item.status == 1 ? true : false; | |||||
} | |||||
} | |||||
], | |||||
showCk: false, | |||||
map: [ | |||||
{ | |||||
key: "contractNumber", | |||||
val: "合同编号" | |||||
}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "merchantName", | |||||
val: "商户名称" | |||||
}, | |||||
{ | |||||
key: "buildingName", | |||||
val: "商户楼座" | |||||
}, | |||||
{ | |||||
key: "floorName", | |||||
val: "商户楼层" | |||||
}, | |||||
{ | |||||
key: "rentalStartDate", | |||||
val: "租赁开始日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentalEndDate", | |||||
val: "租赁结束日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "price", | |||||
val: "租金", | |||||
convert: this.divide, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "type", | |||||
val: "计租方式", | |||||
convert: this.ctype | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "合同状态", | |||||
convert: this.cStatus | |||||
}, | |||||
{ | |||||
key: "applyStatus", | |||||
val: "审批状态", | |||||
convert: this.cApplyStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return ( | |||||
"/api/wxRentContract/list?merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&status=" + | |||||
this.ruleForm.status + | |||||
"&type=" + | |||||
this.ruleForm.type + | |||||
"&rentShopType=2&building="+ | |||||
this.ruleForm.building + | |||||
"&floor=" + | |||||
this.ruleForm.floor + | |||||
"&applyStatus=" + | |||||
this.ruleForm.applyStatus+ | |||||
"&operationType=1" | |||||
); | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.pageInfo.list, | |||||
count: data.data.pageInfo.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
changeBuilding: function(item) { | |||||
for (let building of this.buildingArr) { | |||||
if (item == building.id) { | |||||
this.floorArr = building.floors; | |||||
} | |||||
} | |||||
this.ruleForm.floor = ""; | |||||
//this.search() | |||||
}, | |||||
getBuilding: function() { | |||||
this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => { | |||||
this.buildingArr = d.data; | |||||
}); | |||||
}, | |||||
cApplyStatus(col, item) { | |||||
if (item.applyStatus) { | |||||
return ( | |||||
(item.businessType != 7 ? "签约" : "终止") + | |||||
ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0] | |||||
.name | |||||
); | |||||
} else if (item.applyStatus === 0) { | |||||
return "未提交审核"; | |||||
} | |||||
}, | |||||
goToEditShop(item) { | |||||
this.$router.push({ | |||||
path: "/pointsMerchant/pointmerchantAdd?contractId=" + item.id | |||||
}); | |||||
}, | |||||
checkCurrentStatus(item, row) { | |||||
this.$router.push({ | |||||
path: "rentApprovals?id=" + item.id | |||||
}); | |||||
}, | |||||
cStatus(col, item) { | |||||
return CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.status.toString(); | |||||
})[0].name; | |||||
}, | |||||
divide(col, item) { | |||||
if (item.bus_discount_ratio != undefined && item.bus_discount_time != 0 && item.bus_discount_ratio !='') { | |||||
return Number(item.price) / 100 +(item.bus_discount_time==1?'元/年':item.bus_discount_time==2?'元/月':'元/周期'); | |||||
} else { | |||||
return Number(item.price) / 100 +(item.price_unit==1?'元/日':item.price_unit==2?'元/月':'元/年'); | |||||
} | |||||
}, | |||||
ctype(col, item) { | |||||
if (item.type == 1) { | |||||
return "按租赁面积"; | |||||
} else if (item.type == 2) { | |||||
return "联营扣点"; | |||||
} else { | |||||
return "面积计租、联营取高"; | |||||
} | |||||
}, | |||||
aCount: function(item, row) { | |||||
if (item.merchantId) { | |||||
this.$router.push({ | |||||
path: "pointrentBulu?id=" + item.id | |||||
}); | |||||
} else { | |||||
this.$router.push({ | |||||
path: "pointrentEdit?id=" + item.id | |||||
}); | |||||
} | |||||
}, | |||||
goCheck: function(item, row) { | |||||
/** | |||||
contractType合同类型:1租金合同,2多经合同,3物业合同,4多经物业合同 | |||||
businessType操作类型:1合同审批,2账单审批,3终止合同审批 | |||||
id为合同id | |||||
*/ | |||||
this.$router.push({ | |||||
path: `/pointsCheck?id=${item.id}&contractType=2&businessType=1` | |||||
}); | |||||
}, | |||||
handleClose(done) { | |||||
this.$confirm("确认关闭?") | |||||
.then(_ => { | |||||
done(); | |||||
}) | |||||
.catch(_ => {}); | |||||
}, | |||||
endcontract: function(item, row) { | |||||
let that = this; | |||||
this.getFetch("/api/wxBillAll/oweBillCount?type=1&contractId=" + item.id) | |||||
.then(d => { | |||||
if (Number(d.data) > 0) { | |||||
that.dialogVisible = true; | |||||
that.contractId = item.id; | |||||
that.contractNumber = item.contractNumber; | |||||
} else { | |||||
this.$refs[this.st].showLog(item.id, item.contractNumber); | |||||
} | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
stopContract() { | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}, | |||||
goSave: function() { | |||||
this.$router.push({ | |||||
path: "/pointrentEdit" | |||||
}); | |||||
}, | |||||
goBulu: function() { | |||||
this.$router.push({ | |||||
path: "/pointrentBulu" | |||||
}); | |||||
}, | |||||
goRenew(){ | |||||
this.$router.push({ | |||||
path: "/pointrentEdit", | |||||
query:{ | |||||
Renew:true | |||||
} | |||||
}); | |||||
}, | |||||
goDownload: function(item) { | |||||
location.href = "/api/wxRentContract/exportContract?id=" + item.id; | |||||
}, | |||||
search: function() { | |||||
let tk = this.$refs[this.tk]; | |||||
tk.search(tk.getParams().index); | |||||
}, | |||||
/** | |||||
* 根据业务查询模板 | |||||
*/ | |||||
getModelBybusiness(){ | |||||
this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=7`) | |||||
.then(d=>{ | |||||
if(d.data.length>0){ | |||||
this.processData = JSON.parse(d.data[0].flow).lists; | |||||
} | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data); | |||||
}) | |||||
} | |||||
}, | |||||
activated(){ | |||||
this.search() | |||||
this.getBuilding(); | |||||
this.getModelBybusiness() | |||||
this.setNavData(["合同管理", "多经点位", "租金合同"]); | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
} | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width:60px; */ | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 80px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.el-form-item .el-form-item__content, | |||||
.el-form-item .el-form-item__content .el-date-editor, | |||||
.el-form-item .el-form-item__content .el-date-editor .el-input__inner { | |||||
width: 150px; | |||||
} | |||||
/* .fx_send .el-form-item__content .el-select { | |||||
width: 133px !important; | |||||
} */ | |||||
.fx_title .el-input { | |||||
width: 193px; | |||||
} | |||||
</style> |
@@ -0,0 +1,525 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<el-form | |||||
:inline="true" | |||||
:model="ruleForm" | |||||
ref="ruleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="商铺号" prop="name" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="商户名称" prop="merchantName" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="合同状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in options" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="审批状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in applyStatusOptions" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼座" prop="building" class="fx_send"> | |||||
<el-select | |||||
v-model="ruleForm.building" | |||||
placeholder="请选择" | |||||
@change="changeBuilding" | |||||
clearable | |||||
> | |||||
<el-option | |||||
v-for="(item,index) in buildingArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼层" prop="floor" class="fx_send"> | |||||
<el-select v-model="ruleForm.floor" placeholder="请选择" clearable> | |||||
<el-option | |||||
v-for="(item,index) in floorArr" | |||||
:key="index" | |||||
:value="item.id" | |||||
:label="item.floorName" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-button type="primary" class="builtBtn" @click="goSave"> | |||||
<i>+</i>新建 | |||||
</el-button> | |||||
<el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;"> | |||||
<i>+</i>续签 | |||||
</el-button> | |||||
<table-list :ref="tk" :options="optionsTable"></table-list> | |||||
<stop-contract :ref="st" :type='16' :processData="processData" :options="stopOptions"></stop-contract> | |||||
</div> | |||||
<el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :modal-append-to-body="false"> | |||||
<span>当前有欠缴账单未结清,是否要继续终止物业合同?</span> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="stopContract">确定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import StopContract from "../contractutil/stopcontract.vue"; | |||||
import reportTool from "../../../core/tool/report.js"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../../core/tool/ajaxService"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { promissionUrl } from "../../../urlconfig/promission/url.js"; | |||||
import { ContractUrl } from "../businessComp/UrlEnum.js" | |||||
let echarts = require("echarts"); | |||||
export default { | |||||
inject: ["reload"], | |||||
extends: AjaxUtil, | |||||
name: "pointtenementlist", | |||||
components: { | |||||
TableList, | |||||
StopContract | |||||
}, | |||||
data() { | |||||
return { | |||||
processData:[], | |||||
waitSignCount: "", //待签约 | |||||
endSoonCount: "", //将到期合同 | |||||
rendPaidCount: "", //计租中合同 | |||||
shopcount: "", //空余商铺 | |||||
area: "", //商铺总面积 | |||||
tk: "manjianTableKey", | |||||
st: "stopContract", | |||||
businessId: "", | |||||
stopOptions: { | |||||
contractType: "4", | |||||
stopType: 2 //物业合同 | |||||
}, | |||||
dialogVisible: false, | |||||
buildingArr: [], | |||||
floorArr: [], | |||||
applyStatusOptions:ContractData.applyStatus, | |||||
options: ContractData.statusOptions, | |||||
ruleForm: { | |||||
building: "", | |||||
buildingId: "", | |||||
floor: "", | |||||
floorId: "", | |||||
shopNumber: "", | |||||
merchantName: "", | |||||
status:"", | |||||
applyStatus:"" | |||||
}, | |||||
navInfo: { | |||||
name: "满减券", | |||||
index: "0" | |||||
}, | |||||
optionsTable: { | |||||
actions: [ | |||||
{ | |||||
key: "edit", | |||||
val: "编辑", | |||||
action: this.goEdit, | |||||
show: item => { | |||||
return item.status == 1 && | |||||
(item.applyStatus == 0 || | |||||
item.applyStatus == 3 || | |||||
item.applyStatus == 5) | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "终止", | |||||
action: this.endcontract, | |||||
// show: this.isendcontract(item), | |||||
show: item => { | |||||
if ( | |||||
(item.status == 2 || item.status == 3 || item.status == 4) && | |||||
item.applyStatus != 1 | |||||
) { | |||||
return true; | |||||
} else { | |||||
return false; | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "查看", | |||||
action: this.goCheck, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "download", | |||||
val: "下载", | |||||
action: this.goDownload, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "审批进度", | |||||
action: this.checkCurrentStatus, | |||||
show: item => { | |||||
return item.applyStatus == 1 || | |||||
item.applyStatus == 2 || | |||||
item.applyStatus == 3 | |||||
? true | |||||
: false; | |||||
} | |||||
} | |||||
], | |||||
showCk: false, | |||||
map: [ | |||||
{ | |||||
key: "contractNumber", | |||||
val: "合同编号" | |||||
}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "merchantName", | |||||
val: "商户名称" | |||||
}, | |||||
{ | |||||
key: "buildingName", | |||||
val: "商户楼座" | |||||
}, | |||||
{ | |||||
key: "floorName", | |||||
val: "商户楼层" | |||||
}, | |||||
{ | |||||
key: "rentalStartDate", | |||||
val: "租赁开始日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentalEndDate", | |||||
val: "计租结束日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "price", | |||||
val: "物业费", | |||||
convert: this.divide, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "合同状态", | |||||
convert: this.cStatus | |||||
}, | |||||
{ | |||||
key: "applyStatus", | |||||
val: "审批状态", | |||||
convert: this.cApplyStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return ( | |||||
"/api/wxPropertyContract/list?merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&rentShopType=2&building="+ | |||||
this.ruleForm.building + | |||||
"&floor=" + | |||||
this.ruleForm.floor + | |||||
"&applyStatus=" + | |||||
this.ruleForm.applyStatus + | |||||
"&status=" + | |||||
this.ruleForm.status+ | |||||
"&operationType=1" | |||||
); | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.pageInfo.list, | |||||
count: data.data.pageInfo.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
changeBuilding: function(item) { | |||||
for (let building of this.buildingArr) { | |||||
if (item == building.id) { | |||||
this.floorArr = building.floors; | |||||
} | |||||
} | |||||
this.ruleForm.floor = ""; | |||||
//this.search() | |||||
}, | |||||
getBuilding: function() { | |||||
this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => { | |||||
this.buildingArr = d.data; | |||||
}); | |||||
}, | |||||
cApplyStatus(col, item) { | |||||
if (item.applyStatus) { | |||||
return ( | |||||
(item.businessType != 16 ? "签约" : "终止") + | |||||
ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0] | |||||
.name | |||||
); | |||||
} else if (item.applyStatus === 0) { | |||||
return "未提交审核"; | |||||
} | |||||
}, | |||||
goToEditShop(item) { | |||||
this.$router.push({ | |||||
path: "/merchant/merchantAdd?contractId=" + item.id | |||||
}); | |||||
}, | |||||
checkCurrentStatus(item, row) { | |||||
this.$router.push({ | |||||
path: "rentApprovals?id=" + item.id | |||||
}); | |||||
}, | |||||
cStatus(col, item) { | |||||
return CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.status.toString(); | |||||
})[0].name; | |||||
}, | |||||
goEdit: function(item, row) { | |||||
this.$router.push({ | |||||
path: "pointtenementAdd?id=" + item.id | |||||
}); | |||||
}, | |||||
divide(col, item) { | |||||
return Number(item.price) / 100 +(item.price_unit==1?'元/日':item.price_unit==2?'元/月':'元/年'); | |||||
}, | |||||
endcontract: function(item, row) { | |||||
let that = this; | |||||
that.contractId = item.id; | |||||
that.contractNumber = item.contractNumber; | |||||
this.getFetch("/api/wxBillAll/oweBillCount?type=2&contractId=" + item.id) | |||||
.then(d => { | |||||
if (Number(d.data) > 0) { | |||||
that.dialogVisible = true; | |||||
} else { | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}else{ | |||||
this.makeSure(); | |||||
} | |||||
} | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
stopContract() { | |||||
// this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}else{ | |||||
this.endProperty(); | |||||
} | |||||
}, | |||||
makeSure(){ | |||||
this.$confirm('您确定要提前终止此合同吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.endProperty(); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消删除' | |||||
}); | |||||
}); | |||||
}, | |||||
endProperty(){ | |||||
let _this=this; | |||||
let param={ | |||||
id:this.contractId | |||||
} | |||||
this.postFetch(ContractUrl.endPropertyContract, param) | |||||
.then(d => { | |||||
_this.$message.success("操作成功"); | |||||
_this.dialogVisible = false; | |||||
_this.search(); | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
}, | |||||
bCount: function(item, row, cellValue) { | |||||
if (cellValue === 1) { | |||||
return "已出租"; | |||||
} else if (cellValue === 0) { | |||||
return "未出租"; | |||||
} | |||||
}, | |||||
goSave: function() { | |||||
this.$router.push({ | |||||
path: "/pointtenementAdd" | |||||
}); | |||||
}, | |||||
goRenew(){ | |||||
this.$router.push({ | |||||
path: "/pointtenementAdd", | |||||
query:{ | |||||
Renew:true | |||||
} | |||||
}); | |||||
}, | |||||
goCheck: function(item, row) { | |||||
/** | |||||
contractType合同类型:1租金合同,2多经合同,3物业合同,4多经物业合同 | |||||
businessType操作类型:1合同审批,2账单审批,3终止合同审批 | |||||
id为合同id | |||||
*/ | |||||
this.$router.push({ | |||||
path: `/pointsCheck?id=${item.id}&contractType=4&businessType=1` | |||||
}); | |||||
}, | |||||
search: function() { | |||||
let tk = this.$refs[this.tk]; | |||||
tk.search(tk.getParams().index); | |||||
}, | |||||
goDownload: function(item) { | |||||
location.href = | |||||
"/api/wxRentContract/exportContract?id=" + item.rentContractId; | |||||
}, | |||||
/** | |||||
* 根据业务查询模板 | |||||
*/ | |||||
getModelBybusiness(){ | |||||
this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=16`) | |||||
.then(d=>{ | |||||
if(d.data.length>0){ | |||||
this.processData = JSON.parse(d.data[0].flow).lists; | |||||
} | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data); | |||||
}) | |||||
} | |||||
}, | |||||
activated(){ | |||||
this.search() | |||||
this.getBuilding(); | |||||
this.getModelBybusiness(); | |||||
this.setNavData(["合同管理", "多经点位", "物业合同"]); | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
} | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
width: 60px; | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 100px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.el-form-item .el-form-item__content, | |||||
.el-form-item .el-form-item__content .el-date-editor, | |||||
.el-form-item .el-form-item__content .el-date-editor .el-input__inner { | |||||
width: 150px; | |||||
} | |||||
.fx_title .el-input { | |||||
width: 193px; | |||||
} | |||||
</style> |
@@ -0,0 +1,515 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<div class="shopBox" style="margin-bottom:20px;" v-if="fromAddTask != 'fromAddTask'"> | |||||
<rent-shop :rentInfoData='wxShops' :merchentEditIf="merchentEditIf"></rent-shop> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">合同信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同编号:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.contractNumber}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同状态:</el-col> | |||||
<el-col :span="18" class="span-text">{{cStatus(wxRentContract.status)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同签约日:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.signDate)}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">乙方信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">商户名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.merchantName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同主体名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.subjectName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">经营品牌:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBrand(wxRentContract.brand)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">业态:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBusiness(wxRentContract.businessId)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">店面类型:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeShopType(wxRentContract.shopType)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">负责人:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPerson}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">联系电话:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPhone}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">签约信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalStartDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁截止日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalEndDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">总租期:</el-col> | |||||
<el-col :span="18" class="span-text">{{totalPeriodMonth+'个月'+totalPeriodDay+"天"}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">装修期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.fixStartDate+' 至 '+wxRentContract.fixEndDate}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">计租开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.startDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">账单生成方式:</el-col> | |||||
<el-col :span="18" class="span-text">{{getAdjustPeriod}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title" v-if="contractType!=3&&contractType!=4">计租方式:</el-col> | |||||
<el-col :span="18" class="span-text" v-if="contractType!=3&&contractType!=4">{{changeType(wxRentContract.type)}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">费用明细</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">计租面积:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.rentArea+'㎡'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title" v-if="contractType!=3&&contractType!=4">计租方式:</el-col> | |||||
<el-col :span="18" class="span-text" v-if="contractType!=3&&contractType!=4">{{changeType(wxRentContract.type)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" class="span-title">保底营业额:</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" class="span-text">{{wxRentContract.revenue/100+'元'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==2"> | |||||
<el-col :span="3" class="span-title">租金单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.rentPrice+' ㎡/元/'+priceUnitType}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==4"> | |||||
<el-col :span="3" class="span-title">物业费单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.rentPrice/100+' ㎡/元/'+priceUnitType}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" v-if="wxRentContract.type!=2" class="span-title">{{contractType==2?"租金:":"物业费:"}}</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type!=2" class="span-text">{{wxRentContract.price/100+' 元/'+priceUnitType}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4" class="span-title">联营扣点:</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio!=''" class="span-text"> | |||||
<!-- aaa --> | |||||
<show-rate-list class="cur-rate-list"></show-rate-list> | |||||
</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio==''" class="span-text">{{wxRentContract.payRatio/100+'%'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">押金:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.deposit/100+' 元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">付款周期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.receivePeriod+' 月'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.latePayRatio"> | |||||
<el-col :span="3" class="span-title">滞纳金费率:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.latePayRatio+ '%'}}<span style="margin-left:30px;">{{'欠缴后 '+wxRentContract.latePayDay+' 日开始计费'}}</span></el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.adjustRatio&&wxRentContract.adjustRatio.length>0"> | |||||
<el-col :span="3" class="span-title"> | |||||
年租金调整: | |||||
</el-col> | |||||
<el-col v-if="wxRentContract.adjustRatioWay==1" :span="18" class="span-text"><span v-for="(item,index) in wxRentContract.adjustRatio" :key='index'>{{"第"+(index+2)+"年上浮"+item/100+'%'+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}}</span></el-col> | |||||
<el-col v-if="wxRentContract.adjustRatioWay==2" :span="18" class="span-text"><span v-for="(item,index) in wxRentContract.adjustRatio" :key='index'>{{"第"+(index+2)+"年上浮"+item/100+'元/'+priceUnitType+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}}</span></el-col> | |||||
<el-col v-if="wxRentContract.adjustRatioWay==3" :span="18" class="span-text"><span v-for="(item,index) in wxRentContract.adjustRatio" :key='index'>{{"第"+(index+2)+"年"+item/100+'元/'+priceUnitType+(wxRentContract.adjustRatio.length>1&&wxRentContract.adjustRatio.length>index+1?', ':'')}}</span></el-col> | |||||
</el-row> | |||||
<el-row v-show="businessType!='3'"> | |||||
<el-col :span="3" class="span-title">合同账单:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<rent-bill :data="billData" :editIf='true' :ref="billTk"></rent-bill> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box" v-if="businessType==3"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">租赁信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="2" class="span-title">租赁费用:</el-col> | |||||
<el-col :span="6" class="span-text">{{Number(rentOweCount)>0?'有欠缴':'无欠缴'}}</el-col> | |||||
<el-col :span="2" class="span-title">物业费用:</el-col> | |||||
<el-col :span="6" class="span-text">{{Number(propertyOweCount)>0?'有欠缴':'无欠缴'}}</el-col> | |||||
<el-col :span="2" class="span-title">押金情况:</el-col> | |||||
<el-col :span="6" class="span-text">{{Number(depositOweCount)>0?'有欠缴':'无欠缴'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="2" class="span-title">其他:</el-col> | |||||
<el-col :span="6" class="span-text">{{sRemark}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<!-- <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">审批意见</div> --> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同附件:</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length<=0">无</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length>0"><div class="download-file" v-for="(item,index) in fileNames" :key="index" @click.stop.prevent="download(index)">{{item.name}}</div></el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<el-row style="margin:20px 0 0;text-align:center;"> | |||||
<el-button @click.stop.prevent="cancel">返回</el-button> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import commonUtil from "../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../core/tool/ajaxService"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import{ ContractUrl } from "../contract/businessComp/UrlEnum.js" | |||||
import { CouponCacheData } from "../../service/couponData/data.js"; | |||||
import rentBill from "../contract/contractutil/rentbill.vue"; | |||||
import { ContractData } from "../../service/contract/data.js"; | |||||
import rentShop from "./contractutil/rentshop.vue"; | |||||
import showRateList from './rent/showRateList.vue'; | |||||
import moment from "moment"; | |||||
export default { | |||||
name: "pointsCheck", | |||||
components: { | |||||
rentBill, | |||||
rentShop, | |||||
showRateList, | |||||
}, | |||||
data() { | |||||
return { | |||||
brands:[], | |||||
fromAddTask:"", | |||||
merchentEditIf: true, | |||||
priceUnitType:'', | |||||
priceUnitOption:ContractData.priceUnitOption, | |||||
totalPeriodMonth: 0, | |||||
totalPeriodDay: 0, | |||||
contractType:0, | |||||
remark: "", | |||||
wxShops:[], | |||||
billData:[], | |||||
billTk: "rentbill", | |||||
wxRentContract:'', | |||||
rentOweCount:'', | |||||
propertyOweCount :'', | |||||
businessType:'', | |||||
depositOweCount:'', | |||||
sRemark:'', | |||||
wxMerchant:'', | |||||
businessIds:[], | |||||
progressData:[], | |||||
fileNames:[], | |||||
active:0, | |||||
// 店铺类型 | |||||
shopTypes: ContractData.shopTypes, | |||||
//计租计算方式 | |||||
computedTypes: ContractData.computedTypes, | |||||
}; | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
topNav: state => state.topNav.data, //将 this.topNav 映射为 this.$store.topNav.data | |||||
navigationInfo: state => state.topNav.navigationInfo, | |||||
formData: state => state.setRentInfo.formData, | |||||
}), | |||||
getAdjustPeriod() { | |||||
return this.wxRentContract.adjustPeriod == 3 | |||||
? "按自然月生成" | |||||
: "按计租日期生成"; | |||||
}, | |||||
}, | |||||
methods: { | |||||
cStatus(item) { | |||||
return item!=undefined?CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.toString(); | |||||
})[0].name:''; | |||||
}, | |||||
changeBrand(brand){ | |||||
return this.brands.length>0&&brand?this.brands.filter(e=>e.id==brand)[0].value:'' | |||||
}, | |||||
changeBusiness(businessId){ | |||||
return this.businessIds.length>0&&businessId!=undefined?this.businessIds.filter(e=>e.id==businessId)[0].title:'' | |||||
}, | |||||
changeShopType(id){ | |||||
return id!=undefined?this.shopTypes.filter(e=>e.value==id)[0].label:''; | |||||
}, | |||||
changeDate(date) { | |||||
return moment(date).format("YYYY-MM-DD"); | |||||
}, | |||||
changeType(type){ | |||||
return type!=undefined?this.computedTypes.filter(e=>e.value==type)[0].label:''; | |||||
}, | |||||
...mapActions([ | |||||
"setNavData", // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
"setFormData", | |||||
]), | |||||
download:function(index){ | |||||
window.open(this.fileNames[index].url) | |||||
}, | |||||
cancel(){ | |||||
this.$router.back(-1); | |||||
}, | |||||
getData() { | |||||
let _this=this; | |||||
this.contractType=this.$route.query.contractType; | |||||
if(this.$route.query.contractType==3||this.$route.query.contractType==4){ | |||||
this.getFetch( | |||||
"/api/wxPropertyContract/findById?id=" + this.$route.query.id | |||||
).then(d => { | |||||
d.data.wxPropertyContract.adjustRatio=d.data.wxPropertyContract.adjustRatio?JSON.parse(d.data.wxPropertyContract.adjustRatio):''; | |||||
_this.wxRentContract=d.data.wxPropertyContract; | |||||
_this.wxRentContract.fixStartDate=_this.wxRentContract.fixStartDate?moment(_this.wxRentContract.fixStartDate).format('YYYY-MM-DD'):"" | |||||
_this.wxRentContract.fixEndDate=_this.wxRentContract.fixEndDate?moment(_this.wxRentContract.fixEndDate).format('YYYY-MM-DD'):"" | |||||
this.priceUnitType = this.wxRentContract.priceUnit?this.priceUnitOption.filter(e=>e.value==this.wxRentContract.priceUnit)[0].name:''; | |||||
_this.totalPeriodMonth = d.data.totalPeriodMonth | |||||
_this.totalPeriodDay = d.data.totalPeriodDay | |||||
_this.fileNames = JSON.parse(d.data.wxPropertyContract.fileNames); | |||||
_this.wxShops=d.data.wxShops | |||||
if(_this.$route.query.businessType==3){ | |||||
_this.rentOweCount=d.data.rentOweCount; | |||||
_this.propertyOweCount=d.data.propertyOweCount; | |||||
_this.depositOweCount=d.data.depositOweCount; | |||||
_this.sRemark=d.data.remark; | |||||
} | |||||
if(_this.businessType!=3){ | |||||
_this.$refs[_this.billTk].setData(d.data.previewBillRentList); | |||||
} | |||||
if (d.data.wxRentContract.busDiscountRatio == undefined || d.data.wxRentContract.busDiscountTime == undefined) { | |||||
d.data.wxRentContract.busDiscountRatio = ''; | |||||
d.data.wxRentContract.busDiscountTime = 1; | |||||
} | |||||
//aaa | |||||
this.formData.busDiscountRatio = d.data.wxRentContract.busDiscountRatio; | |||||
this.formData.busDiscountTime = d.data.wxRentContract.busDiscountTime; | |||||
this.formData.payRatio = d.data.wxRentContract.payRatio; | |||||
let curObj = Object.assign({},this.formData); | |||||
this.setFormData(curObj); | |||||
}); | |||||
}else{ | |||||
this.getFetch( | |||||
"/api/wxRentContract/findById?id=" + this.$route.query.id | |||||
).then(d => { | |||||
d.data.wxRentContract.adjustRatio=d.data.wxRentContract.adjustRatio?JSON.parse(d.data.wxRentContract.adjustRatio):''; | |||||
_this.wxRentContract=d.data.wxRentContract; | |||||
_this.wxRentContract.fixStartDate=_this.wxRentContract.fixStartDate?moment(_this.wxRentContract.fixStartDate).format('YYYY-MM-DD'):"" | |||||
_this.wxRentContract.fixEndDate=_this.wxRentContract.fixEndDate?moment(_this.wxRentContract.fixEndDate).format('YYYY-MM-DD'):"" | |||||
this.priceUnitType = this.wxRentContract.priceUnit?this.priceUnitOption.filter(e=>e.value==this.wxRentContract.priceUnit)[0].name:''; | |||||
_this.totalPeriodMonth = d.data.totalPeriodMonth | |||||
_this.totalPeriodDay = d.data.totalPeriodDay | |||||
_this.fileNames = JSON.parse(d.data.wxRentContract.fileNames); | |||||
_this.wxShops=d.data.wxShops; | |||||
if(_this.$route.query.businessType==3){ | |||||
_this.rentOweCount=d.data.rentOweCount; | |||||
_this.propertyOweCount=d.data.propertyOweCount; | |||||
_this.depositOweCount=d.data.depositOweCount; | |||||
_this.sRemark=d.data.remark; | |||||
} | |||||
if(_this.businessType!=3){ | |||||
_this.$refs[_this.billTk].setData(d.data.previewBillRentList); | |||||
} | |||||
if (d.data.wxRentContract.busDiscountRatio == undefined || d.data.wxRentContract.busDiscountTime == undefined) { | |||||
d.data.wxRentContract.busDiscountRatio = ''; | |||||
d.data.wxRentContract.busDiscountTime = 1; | |||||
} | |||||
//aaa | |||||
this.formData.busDiscountRatio = d.data.wxRentContract.busDiscountRatio; | |||||
this.formData.busDiscountTime = d.data.wxRentContract.busDiscountTime; | |||||
this.formData.payRatio = d.data.wxRentContract.payRatio; | |||||
let curObj = Object.assign({},this.formData); | |||||
this.setFormData(curObj); | |||||
}); | |||||
} | |||||
this.getFetch( | |||||
"/api/workflow/applyHistoryAndAssignee?businessId=" + this.$route.query.id | |||||
).then(d => { | |||||
let progressData=d.data; | |||||
progressData=d.data; | |||||
progressData.reverse(); | |||||
let indexs=0; | |||||
_this.progressData=[] | |||||
progressData.map((item,index)=>{ | |||||
if(item.isLastStart){ | |||||
indexs=index | |||||
} | |||||
}) | |||||
progressData.map((item,index)=>{ | |||||
if(index>=indexs){ | |||||
_this.progressData.push(item) | |||||
} | |||||
}) | |||||
_this.progressData.map((item,index)=>{ | |||||
if(item.status==1){ | |||||
item.userName=item.userName+'( 发起审批)' | |||||
}else if(item.status==2){ | |||||
item.userName=item.userName+'( 已审批)' | |||||
}else if(item.status==3){ | |||||
item.userName=item.userName+'( 驳回)' | |||||
}else if(item.status==4){ | |||||
item.userName=item.userName+'( 待审批)' | |||||
} | |||||
}) | |||||
for(var i=1;_this.progressData.length<=10;i++) { | |||||
if(_this.progressData[i].status==4) { | |||||
_this.active=i | |||||
break; | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
}, | |||||
mounted: function() { | |||||
// this.getFetch("/api/at/list?describe=") | |||||
commonUtil.pvuv.setPVUV.apply(this, []); | |||||
}, | |||||
created() { | |||||
// this.reload() | |||||
this.businessType=this.$route.query.businessType; | |||||
if(this.$route.query.contractType==2){ | |||||
this.setNavData(["合同管理", "多经点位", "租金合同", "查看"]); | |||||
}else{ | |||||
this.setNavData(["合同管理", "多经点位", "物业合同", "查看"]); | |||||
} | |||||
if(this.$route.query.flags){ | |||||
this.fromAddTask = this.$route.query.flags; | |||||
this.setNavData(["招商管理", "多经点位", "租金合同", "查看"]); | |||||
} | |||||
this.getData(); | |||||
//获取品牌列表 | |||||
this.getFetch("/api/wxBrand/queryBrand") | |||||
.then(d => { | |||||
this.brands = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
this.getFetch(ContractUrl.businessList) | |||||
.then(d => { | |||||
this.businessIds = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.text-box { | |||||
background: #fff; | |||||
margin-bottom: 20px; | |||||
} | |||||
.download-file{ | |||||
cursor: pointer; | |||||
} | |||||
.text-box-title { | |||||
height: 42px; | |||||
line-height: 42px; | |||||
padding-left: 20px; | |||||
color: #fff; | |||||
font-weight: 400px; | |||||
font-size: 14px; | |||||
background: rgba(51, 153, 255, 1); | |||||
} | |||||
.text-box-content { | |||||
padding: 20px; | |||||
line-height: 36px; | |||||
font-size: 12px; | |||||
} | |||||
.span-title { | |||||
text-align: right; | |||||
padding-right: 15px; | |||||
} | |||||
.layout-content { | |||||
width: 100%; | |||||
height: auto; | |||||
min-height: 300px; | |||||
background: #141e29; | |||||
border-radius: 2px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
/* width: 200px; */ | |||||
} | |||||
/* .el-select{ | |||||
width:120px; | |||||
} */ | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width: 60px; */ | |||||
border: none !important; | |||||
margin: 0 10px; | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 100px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.fx_send .el-form-item__content .el-select { | |||||
width: 120px !important; | |||||
} | |||||
.fx_title .el-input { | |||||
width: 150px; | |||||
} | |||||
.approval-list .span-title{ | |||||
padding-right: 0; | |||||
} | |||||
.cur-rate-list /deep/ .rate-show-list li { | |||||
margin-top: 6px; | |||||
} | |||||
</style> |
@@ -0,0 +1,81 @@ | |||||
<template> | |||||
<div class="rate-set-wrap"> | |||||
<!-- 跳点比率设置 label-width="120px" :rules="editRateRules"--> | |||||
<el-dialog id="my-dialog-close" title="" :visible.sync="dialogVisible" width="450px" :modal-append-to-body='false'> | |||||
<div style="width:100%"> | |||||
<h4 class="title-text">清空跳点设置</h4> | |||||
<p class="tip-text">您将清空当前的所有配置信息</p> | |||||
</div> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button class="draftBtn" type="primary" @click="doClearJumpRate">清空</el-button> | |||||
<el-button class="putinBtn" @click="closeDialog">取消</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
inject: ["reload"], | |||||
name: "closeJumpRateSet", | |||||
props: [], | |||||
components: { | |||||
}, | |||||
data() { | |||||
return { | |||||
dialogVisible: false, | |||||
}; | |||||
}, | |||||
mounted: function() { | |||||
//初始化处理 | |||||
}, | |||||
watch: { | |||||
}, | |||||
computed:{ | |||||
}, | |||||
methods: { | |||||
openDialog() { | |||||
this.dialogVisible = true; | |||||
}, | |||||
// | |||||
doClearJumpRate() { | |||||
this.$emit('doClearRateSet'); | |||||
this.closeDialog(); | |||||
}, | |||||
closeDialog() { | |||||
this.dialogVisible = false; | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.title-text { | |||||
height: 40px; | |||||
line-height: 40px; | |||||
text-align: center; | |||||
font-weight: 500; | |||||
} | |||||
.el-dialog__body { | |||||
padding-top: 0; | |||||
} | |||||
#my-dialog-close /deep/ .el-dialog__body { | |||||
padding-top: 0; | |||||
} | |||||
.tip-text { | |||||
line-height: 40px; | |||||
font-size: 16px; | |||||
text-align: center; | |||||
} | |||||
</style> |
@@ -0,0 +1,629 @@ | |||||
<template> | |||||
<div class="rate-set-wrap"> | |||||
<!-- 跳点比率设置 label-width="120px" :rules="editRateRules"--> | |||||
<el-dialog id="my-dialog-title-left" title="自定义跳点设置 (注:营业额<=某区间金额,取该区间对应的扣点率)" :visible.sync="dialogVisible" width="900px" :modal-append-to-body='false'> | |||||
<div style="width:100%"> | |||||
<el-form ref="rateForm" :model="jumpRateObj" status-icon style="margin-top:15px;"> | |||||
<el-row :gutter="24" class=""> | |||||
<el-col :span="24"> | |||||
<el-form-item label-width="120px" label="时间范围" class="reprice"> | |||||
<el-select v-model="jumpRateObj.timeCycle" @change="changeTimeCycle" class="floatL ml_30"> | |||||
<el-option :value="item.value" :label="item.label" v-for="(item,index) in timeCycleList" :key="index"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="24" class="clearfix"> | |||||
<el-form-item label-width='120px' label="区间设置" class="reprice floatL"></el-form-item> | |||||
<!-- <el-form-item label="区间设置" prop="rateList"> --> | |||||
<ul class="pl_30 floatL clearfix"> | |||||
<li v-for="(item,index) in jumpRateObj.rateList" :key="index" class="rate-item clearfix"> | |||||
<el-form-item class="floatL numberInputBox"> | |||||
<el-input type="number" v-if="index==0" class="edit-rate-item mr_20" value="0" disabled></el-input> | |||||
</el-form-item> | |||||
<!-- <el-form-item class="floatL" :prop="'firstNum'+index" :rules="{required:true,message:'最多保留4位小数',trigger:'blur'}"> --> | |||||
<el-form-item class="floatL numberInputBox" :prop="'rateList.' + index + '.firstNum'" :rules="editRateRules.editFirstNum"> | |||||
<el-input type="number" @input="checkEditNum(item.firstNum,index)" v-if="index!=0" disabled class="edit-rate-item mr_20" v-model="item.firstNum"></el-input> | |||||
</el-form-item> | |||||
<span class="floatL mr_10 my-label-span">万元</span> <span class="floatL mr_10 my-label-span">— —</span> | |||||
<el-form-item class="floatL numberInputBox" :prop="'rateList.' + index + '.endNum'" :rules="editRateRules.editEndNum"> | |||||
<el-input :ref="'endNum'+index" @input="editNextItem(item,index)" type="number" class="edit-rate-item ml_20 mr_20" v-model="item.endNum"></el-input><span class="mr_10">万元</span> | |||||
</el-form-item> | |||||
<el-form-item class="floatL numberInputBox" :prop="'rateList.' + index + '.rateNum'" :rules="editRateRules.editRate"> | |||||
<el-input type="number" class="edit-rate-item-ratio mr_20" v-model="item.rateNum"></el-input><span class="mr_10">%</span> | |||||
</el-form-item> | |||||
<i v-show="index == jumpRateObj.rateList.length-1" @click="addRateLine" class="iconfont icon-jiahao ml-10 mr_20 add-rate-icon my-label-span"></i> | |||||
<i v-show="index == jumpRateObj.rateList.length-1 && index" @click="reduceRateLine" class="iconfont icon-jianhao mr_20 reduce-rate-icon my-label-span"></i> | |||||
</li> | |||||
</ul> | |||||
<!-- </el-form-item> --> | |||||
</el-col> | |||||
<el-col :span="24"> | |||||
<!-- <el-form-item label="上限设置" prop="rateList"> --> | |||||
<el-form-item label-width='120px' label="上限设置" class=""> | |||||
<el-switch class="ml_30" style="float:left;margin-top:8px;" v-model="addLimitType" active-color="#409EFF" inactive-color="#999"></el-switch> | |||||
</el-form-item> | |||||
<el-form-item label-width='120px' v-if="addLimitType" class=""> | |||||
<ul class="pl_30 floatL clearfix"> | |||||
<li> | |||||
<span class="floatL mr_10 my-label-span">超过</span> | |||||
<el-form-item class="floatL numberInputBox" prop="limitNum" :rules="editRateRules.editLimitNum"> | |||||
<el-input @input="checkLimitNum" type="number" class="edit-rate-item ml_20 mr_20" v-model="jumpRateObj.limitNum"></el-input> | |||||
</el-form-item> | |||||
<span class="floatL mr_10 my-label-span">万元时, 超出部分</span> | |||||
<el-form-item class="floatL numberInputBox" prop="limitRate" :rules="editRateRules.editLimitRate"> | |||||
<el-input type="number" class="edit-rate-item-ratio ml_20 mr_10" v-model="jumpRateObj.limitRate"></el-input> | |||||
</el-form-item> | |||||
<span class="floatL mr_10 my-label-span">%</span> | |||||
</li> | |||||
</ul> | |||||
</el-form-item> | |||||
<!-- </el-form-item> --> | |||||
</el-col> | |||||
</el-row> | |||||
</el-form> | |||||
</div> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button class="draftBtn" type="primary" @click="saveRateSet">保存设置</el-button> | |||||
<el-button class="putinBtn" @click="openJumpRateSetDialog">清空设置</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
<!-- --> | |||||
<close-jump-rate-set @doClearRateSet="clearRateSet" ref="closeJumpRateSetDialog"></close-jump-rate-set> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { | |||||
deepcopy | |||||
} from "../../../utils/validate"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import closeJumpRateSet from './closeJumpRateSet.vue'; | |||||
var curEditRateList = []; | |||||
var curLimitNum = 0; | |||||
export default { | |||||
inject: ["reload"], | |||||
name: "jumpRateSet", | |||||
props: [], | |||||
components: { | |||||
closeJumpRateSet, | |||||
}, | |||||
data() { | |||||
return { | |||||
...mapActions(["setRentInfo", "setFormData"]), | |||||
dialogVisible: false, | |||||
addLimitType: false, | |||||
timeCycleList: [ | |||||
{ | |||||
label: '年', | |||||
value: 1, | |||||
}, | |||||
{ | |||||
label: '月', | |||||
value: 2, | |||||
}, | |||||
{ | |||||
label: '周期', | |||||
value: 3, | |||||
} | |||||
], | |||||
//校验规则待完善 | |||||
editRateRules: { | |||||
editFirstNum: [ | |||||
{ | |||||
required: true, | |||||
message: '最多保留4位小数', | |||||
trigger: 'blur' | |||||
}, | |||||
{ | |||||
validator(rule, value, callback, source, options) { | |||||
value = Number(value); | |||||
let errors = []; | |||||
let numberReg = /^\d+$/; | |||||
let regPos = /^\d+(\.\d+)?$/; //非负浮点数 | |||||
if (!numberReg.test(value) && !regPos.test(value)) { | |||||
callback("最多保留4位小数"); | |||||
} | |||||
let str = value + ''; | |||||
if (str.indexOf('.') != -1) { | |||||
let arr = str.split('.'); | |||||
if (arr[1].length > 4) { | |||||
callback("最多保留4位小数"); | |||||
} | |||||
} | |||||
callback(errors); | |||||
} | |||||
} | |||||
], | |||||
editEndNum: [ | |||||
{ | |||||
required: true, | |||||
message: '最多保留4位小数', | |||||
trigger: 'blur' | |||||
}, | |||||
{ | |||||
validator(rule, value, callback, source, options) { | |||||
value = Number(value); | |||||
let errors = []; | |||||
let numberReg = /^\d+$/; | |||||
let regPos = /^\d+(\.\d+)?$/; //非负浮点数 | |||||
if (!numberReg.test(value) && !regPos.test(value)) { | |||||
callback("请输入数字,最多保留4位小数"); | |||||
} | |||||
let str = value + ''; | |||||
if (str.indexOf('.') != -1) { | |||||
let arr = str.split('.'); | |||||
if (arr[1].length > 4) { | |||||
callback("最多保留4位小数"); | |||||
} | |||||
} | |||||
//判断从小到大输入 | |||||
/* let isOk = true; | |||||
curEditRateList.forEach((item, index) => { | |||||
item.firstNum = Number(item.firstNum); | |||||
item.endNum = Number(item.endNum); | |||||
if (index == 0) { | |||||
if (item.endNum <= 0) { | |||||
isOk = false; | |||||
} | |||||
} else { | |||||
if (item.firstNum < curEditRateList[index-1].endNum || item.firstNum >= item.endNum) { | |||||
isOk = false; | |||||
} | |||||
} | |||||
}) | |||||
if (!isOk) { | |||||
callback("请从小到大输入区间值"); | |||||
} */ | |||||
let dotStartNum = rule.field.indexOf('.'); | |||||
let dotEndNum = rule.field.indexOf('.',dotStartNum+1); | |||||
let curIndex = Number(rule.field.slice(dotStartNum+1,dotEndNum)); | |||||
for (let i=0;i<curEditRateList.length;i++) { | |||||
let item = curEditRateList[i]; | |||||
item.firstNum = Number(item.firstNum); | |||||
item.endNum = Number(item.endNum); | |||||
if (i <= curIndex) { | |||||
if (i == 0) { | |||||
if (item.endNum <= 0) { | |||||
callback("请输入正数"); | |||||
return; | |||||
} | |||||
} else { | |||||
if (item.firstNum < curEditRateList[i-1].endNum || item.firstNum >= item.endNum) { | |||||
callback("请从小到大输入区间值"); | |||||
return; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
callback(errors); | |||||
} | |||||
} | |||||
], | |||||
editLimitNum: [ | |||||
{ | |||||
required: false, | |||||
message: '最多保留4位小数', | |||||
trigger: 'blur' | |||||
}, | |||||
{ | |||||
validator(rule, value, callback, source, options) { | |||||
value = Number(value); | |||||
let errors = []; | |||||
curLimitNum = value; | |||||
if (value) { | |||||
let numberReg = /^\d+$/; | |||||
let regPos = /^\d+(\.\d+)?$/; //非负浮点数 | |||||
if (!numberReg.test(value) && !regPos.test(value)) { | |||||
callback("请输入数字,最多保留4位小数"); | |||||
} | |||||
let str = value + ''; | |||||
if (str.indexOf('.') != -1) { | |||||
let arr = str.split('.'); | |||||
if (arr[1].length > 4) { | |||||
callback("最多保留4位小数"); | |||||
} | |||||
} | |||||
//判断 | |||||
value = Number(value); | |||||
if (value != Number(curEditRateList[curEditRateList.length-1].endNum)) { | |||||
callback("请与区间值最大值保持一致"); | |||||
} else { | |||||
callback(errors); | |||||
} | |||||
} | |||||
callback(errors); | |||||
} | |||||
} | |||||
], | |||||
editRate: [ | |||||
{ | |||||
required: true, | |||||
message: '请输入0~100间的数', | |||||
trigger: 'blur' | |||||
}, | |||||
{ | |||||
validator(rule, value, callback, source, options) { | |||||
let errors = []; | |||||
let numberReg = /^\d+$/; | |||||
let regPos = /^\d+(\.\d+)?$/; //非负浮点数 | |||||
if (!numberReg.test(value) && !regPos.test(value)) { | |||||
callback("请输入数字,最多保留2位小数"); | |||||
} | |||||
value = Number(value); | |||||
if (value < 0 || value >100) { | |||||
callback("请输入0~100间的数"); | |||||
} | |||||
let str = value + ''; | |||||
if (str.indexOf('.') != -1) { | |||||
let arr = str.split('.'); | |||||
if (arr[1].length > 2) { | |||||
callback("最多保留2位小数"); | |||||
} | |||||
} | |||||
callback(errors); | |||||
} | |||||
} | |||||
], | |||||
editLimitRate: [ | |||||
{ | |||||
required: false, | |||||
message: '请输入0~100间的数', | |||||
trigger: 'blur' | |||||
}, | |||||
{ | |||||
validator(rule, value, callback, source, options) { | |||||
let errors = []; | |||||
if (!curLimitNum) { | |||||
if (value) { | |||||
callback("请先输入上限区间"); | |||||
} | |||||
callback(errors); | |||||
} else { | |||||
let numberReg = /^\d+$/; | |||||
let regPos = /^\d+(\.\d+)?$/; //非负浮点数 | |||||
if (!numberReg.test(value) && !regPos.test(value)) { | |||||
callback("请输入数字,最多保留2位小数"); | |||||
} | |||||
value = Number(value); | |||||
if (value < 0 || value >100) { | |||||
callback("请输入0~100间的数"); | |||||
} | |||||
let str = value + ''; | |||||
if (str.indexOf('.') != -1) { | |||||
let arr = str.split('.'); | |||||
if (arr[1].length > 2) { | |||||
callback("最多保留2位小数"); | |||||
} | |||||
} | |||||
} | |||||
callback(errors); | |||||
} | |||||
} | |||||
], | |||||
}, | |||||
jumpRateObj:{ | |||||
timeCycle: 1, | |||||
limitNum: '', | |||||
limitRate: '', | |||||
rateList: [ | |||||
{ | |||||
firstNum: 0, | |||||
endNum: '', | |||||
rateNum: '' | |||||
} | |||||
] | |||||
}, | |||||
jumpRateBaseObj:{ | |||||
timeCycle: 1, | |||||
limitNum: '', | |||||
limitRate: '', | |||||
rateList: [ | |||||
{ | |||||
firstNum: 0, | |||||
endNum: '', | |||||
rateNum: '' | |||||
} | |||||
] | |||||
}, | |||||
}; | |||||
}, | |||||
mounted: function() { | |||||
//初始化处理 | |||||
this.dealRateInfo(); | |||||
// console.log(this.formData) | |||||
}, | |||||
watch: { | |||||
dialogVisible: function(newVal, oldVal) { | |||||
if (newVal) { | |||||
this.dealRateInfo(); | |||||
} | |||||
}, | |||||
'jumpRateObj.rateList': function(newVal, oldVal) { | |||||
curEditRateList = newVal; | |||||
}, | |||||
addLimitType: function(newVal, oldVal) { | |||||
let val01 = ''; | |||||
let val02 = ''; | |||||
let arr = this.jumpRateObj.rateList; | |||||
if (arr[arr.length-1].endNum) { | |||||
val01 = arr[arr.length-1].endNum; | |||||
val02 = arr[arr.length-1].rateNum; | |||||
} | |||||
this.jumpRateObj.limitNum = val01; | |||||
this.jumpRateObj.limitRate = val02; | |||||
curLimitNum = val01; | |||||
} | |||||
}, | |||||
computed:{ | |||||
...mapState({ | |||||
formData: state => state.setRentInfo.formData | |||||
}), | |||||
}, | |||||
methods: { | |||||
checkLimitNum() { | |||||
// umpRateObj.limitNum | |||||
}, | |||||
editNextItem(item,index) { | |||||
// | |||||
this.jumpRateObj.rateList.map((it,i) => { | |||||
if (index != i) { | |||||
console.log(this.$refs['endNum'+i]) | |||||
this.$refs['endNum'+i][0].blur(); | |||||
} | |||||
}) | |||||
// | |||||
if (index+1 < this.jumpRateObj.rateList.length) { | |||||
this.jumpRateObj.rateList[index+1].firstNum = item.endNum; | |||||
} | |||||
if (index+1 == this.jumpRateObj.rateList.length) { | |||||
this.jumpRateObj.limitNum = this.jumpRateObj.rateList[index].endNum; | |||||
this.jumpRateObj.limitRate = this.jumpRateObj.rateList[index].rateNum; | |||||
curLimitNum = this.jumpRateObj.rateList[index].endNum; | |||||
} | |||||
}, | |||||
//验证输入数字 | |||||
checkEditNum(val, index) { | |||||
// if (isNumber()) | |||||
}, | |||||
//添加rate行 | |||||
addRateLine() { | |||||
let curFirstStr = this.jumpRateObj.rateList[this.jumpRateObj.rateList.length-1].endNum; | |||||
curFirstStr = curFirstStr ? curFirstStr : ''; | |||||
let obj = { | |||||
firstNum: curFirstStr, | |||||
endNum: '', | |||||
rateNum: '' | |||||
} | |||||
this.jumpRateObj.rateList.push(obj); | |||||
}, | |||||
//删除rate行 | |||||
reduceRateLine() { | |||||
if (this.jumpRateObj.rateList.length > 1) { | |||||
this.jumpRateObj.rateList.pop(); | |||||
} | |||||
}, | |||||
//初始化处理 | |||||
dealRateInfo() { | |||||
if (this.formData.busDiscountRatio == undefined || this.formData.busDiscountTime == undefined || this.formData.payRatio == undefined) { | |||||
this.formData.busDiscountRatio = ''; | |||||
this.formData.busDiscountTime = 1; | |||||
this.formData.payRatio = 0; | |||||
} | |||||
let {busDiscountRatio, busDiscountTime} = this.formData; | |||||
this.jumpRateObj.timeCycle = busDiscountTime; | |||||
if (busDiscountRatio != '') { | |||||
let arr = JSON.parse(busDiscountRatio); | |||||
//如果有上限> | |||||
if (busDiscountRatio.indexOf('>') != -1) { | |||||
let curLastStr = arr.pop(); | |||||
let limitArr = []; | |||||
curLastStr = curLastStr.replace('>',','); | |||||
curLastStr = curLastStr.replace(':',','); | |||||
limitArr = curLastStr.split(','); | |||||
this.dealStrFormat(arr, busDiscountRatio); | |||||
this.jumpRateObj.limitNum = limitArr[1]; | |||||
this.jumpRateObj.limitRate = limitArr[2]/100; | |||||
this.addLimitType = true; | |||||
} else { | |||||
this.dealStrFormat(arr, busDiscountRatio); | |||||
} | |||||
} else { | |||||
// this.$set(this.jumpRateObj, this.jumpRateBaseObj); | |||||
// this.jumpRateObj = Object.assign({},this.jumpRateObj,this.jumpRateBaseObj); | |||||
this.jumpRateObj = deepcopy(this.jumpRateBaseObj); | |||||
} | |||||
}, | |||||
//deal | |||||
dealStrFormat(arr, busDiscountRatio) { | |||||
let curInfoArr = []; | |||||
//没有初始值-重置一个默认用于显示 | |||||
if (busDiscountRatio.indexOf('-') == -1) { | |||||
curInfoArr.push({ | |||||
firstNum: 0, | |||||
endNum: '', | |||||
}) | |||||
} else { | |||||
arr.map((item, index) => { | |||||
item = item.replace('-',','); | |||||
item = item.replace(':',','); | |||||
let curSplitArr = item.split(','); | |||||
let dealNum = Number(curSplitArr[2]); | |||||
//后端存储的时候要是三位正整数,保存的时候要*100,但是显示的时候要/100,在 | |||||
//往vuex存储的时候保存的是*100后的,提交保存的时候那步在其他页面也有,故在这里强制处理 | |||||
dealNum = this.dealNumFn(dealNum); | |||||
let obj = { | |||||
firstNum: curSplitArr[0], | |||||
endNum: curSplitArr[1], | |||||
rateNum: dealNum, | |||||
} | |||||
curInfoArr.push(obj); | |||||
}) | |||||
} | |||||
// this.jumpRateObj.rateList = curInfoArr; | |||||
this.$set(this.jumpRateObj,'rateList',curInfoArr) | |||||
// this.jumpRateObj.rateList = Object.assign({},this.jumpRateObj.rateList,curInfoArr); | |||||
}, | |||||
dealNumFn(dealNum) { | |||||
dealNum = dealNum+''; | |||||
let curNumLength = dealNum.length - 2; | |||||
curNumLength = curNumLength == 1 ? 2 : curNumLength; | |||||
dealNum = dealNum >= 100 ? dealNum/(Math.pow(10,curNumLength)) : dealNum; | |||||
dealNum = Number(dealNum); | |||||
return dealNum; | |||||
}, | |||||
// this.$refs["form"].clearValidate(); | |||||
//保存设置 | |||||
saveRateSet() { | |||||
this.$refs['rateForm'].validate((valid) => { | |||||
if (valid) { | |||||
let curReturnRateArr = []; | |||||
let turnArr = deepcopy(this.jumpRateObj.rateList); | |||||
for (let i=0;i<turnArr.length;i++) { | |||||
let item = turnArr[i]; | |||||
item.firstNum = Number(item.firstNum); | |||||
item.endNum = Number(item.endNum); | |||||
item.rateNum = Number(item.rateNum); | |||||
item.rateNum = (Number(item.rateNum) * 100).toFixed(0); | |||||
if (i != 0) { | |||||
if (item.endNum > item.firstNum && item.firstNum >= turnArr[i-1].endNum) { | |||||
let str = ''; | |||||
str = item.firstNum + '-' + item.endNum + ':' +item.rateNum; | |||||
curReturnRateArr.push(str); | |||||
} else { | |||||
continue; | |||||
} | |||||
} else { | |||||
if (item.firstNum < item.endNum && item.rateNum) { | |||||
let str = ''; | |||||
str = item.firstNum + '-' + item.endNum + ':' +item.rateNum; | |||||
curReturnRateArr.push(str); | |||||
} | |||||
} | |||||
} | |||||
//如果有上限 | |||||
if (this.addLimitType && this.jumpRateObj.limitNum && this.jumpRateObj.limitRate) { | |||||
curReturnRateArr.push(`>${this.jumpRateObj.limitNum}:${(Number(this.jumpRateObj.limitRate) * 100).toFixed(0)}`); | |||||
} | |||||
curReturnRateArr = JSON.stringify(curReturnRateArr); | |||||
let curObj = Object.assign({},this.formData); | |||||
curObj.busDiscountRatio = curReturnRateArr; | |||||
curObj.busDiscountTime = Number(this.jumpRateObj.timeCycle); | |||||
curObj.payRatio = 0; | |||||
this.setFormData(curObj); | |||||
this.$refs.rateForm.clearValidate(); | |||||
this.dialogVisible = false; | |||||
// this.jumpRateObj.rateList = []; | |||||
} | |||||
}) | |||||
}, | |||||
openJumpRateSetDialog() { | |||||
this.$refs['closeJumpRateSetDialog'].openDialog(); | |||||
}, | |||||
clearRateSet() { | |||||
let curObj = Object.assign({},this.formData); | |||||
curObj.busDiscountRatio = ''; | |||||
curObj.busDiscountTime = 1; | |||||
curObj.payRatio = 0; | |||||
this.setFormData(curObj); | |||||
this.$refs.rateForm.resetFields(); | |||||
this.dialogVisible = false; | |||||
this.dealRateInfo(); | |||||
}, | |||||
openDialog() { | |||||
this.dialogVisible = true; | |||||
}, | |||||
changeTimeCycle(val) { | |||||
this.formData.busDiscountTime = val; | |||||
this.setFormData(this.formData); | |||||
}, | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
li { | |||||
list-style-type: none; | |||||
} | |||||
.edit-rate-item { | |||||
width: 140px; | |||||
} | |||||
.edit-rate-item-ratio { | |||||
width: 80px; | |||||
} | |||||
.rate-item { | |||||
margin-top: 8px; | |||||
} | |||||
.rate-item:first-child { | |||||
margin-top: 0; | |||||
} | |||||
.my-label-span { | |||||
height: 40px; | |||||
line-height: 40px; | |||||
} | |||||
.el-dialog__title { | |||||
float: left!important; | |||||
} | |||||
#my-dialog-title-left /deep/ .el-dialog__title { | |||||
float: left; | |||||
} | |||||
#my-dialog-title-left /deep/ .el-dialog__body { | |||||
padding-bottom: 0; | |||||
} | |||||
#my-dialog-title-left /deep/ .el-input__validateIcon { | |||||
display: none; | |||||
} | |||||
.add-rate-icon { | |||||
font-size: 20px; | |||||
} | |||||
.reduce-rate-icon { | |||||
font-size: 20px; | |||||
} | |||||
#my-dialog-title-left /deep/ .el-form-item { | |||||
margin-bottom: 12px; | |||||
} | |||||
.label-item-span { | |||||
text-align: center; | |||||
} | |||||
.floatL { | |||||
float: left; | |||||
} | |||||
.draftBtn { | |||||
width: 104px; | |||||
height: 38px; | |||||
} | |||||
</style> |
@@ -0,0 +1,214 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<div class="text-content"> | |||||
<el-row v-if="approvalType" style="margin-bottom:30px;"> | |||||
<el-col :span="3" class="title">审批类型:</el-col> | |||||
<el-col :span="21" class="title">{{getApproavl()}}</el-col> | |||||
</el-row> | |||||
<el-row v-for="(item,index) in applyData" :key="index"> | |||||
<el-col :span="3" class="left"> | |||||
<div class="date">{{changeDate(item.updateDate,0)}}</div> | |||||
<div class="time">{{changeDate(item.updateDate,1)}}</div> | |||||
</el-col> | |||||
<el-col :span="1" class="center"> | |||||
<div class="img" v-if="index!=0"> | |||||
<div class="circle"></div> | |||||
</div> | |||||
<div class="icon-img" v-if="index==0"> | |||||
<i | |||||
:class="'iconfont iconBox '+changeIcon(item.status)" | |||||
style="color:rgba(200, 89, 98, 1);font-size:26px" | |||||
></i> | |||||
</div> | |||||
<div | |||||
class="line" | |||||
:style="'height:'+(item.remark!=undefined?((((1519-308)*5)/6)/(((bodyWidth-308)*5)/6))*((item.remark.length/70))*32+58:'58')+'px'" | |||||
></div> | |||||
</el-col> | |||||
<el-col :span="20" class="right"> | |||||
<div | |||||
class="right-title" | |||||
:style="'color:'+(index==0?'rgba(200, 89, 98, 1)':'rgba(51,51,51,1)')" | |||||
>{{changeApplyStatus(item.status)}}</div> | |||||
<div class="right-content">{{item.remark}}</div> | |||||
<div class="right-content">{{'操作人:'+item.userName}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="group-btn"> | |||||
<el-button class="quxiaoBtn" @click="cancel()">返回</el-button> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import moment from "moment"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
export default { | |||||
inject: ["reload"], | |||||
name: "rentApprovals", | |||||
components: { | |||||
TableList, | |||||
}, | |||||
data() { | |||||
return { | |||||
applyData: [], | |||||
bodyWidth: 0, | |||||
approvalType:''//券审批操作类型 | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
changeIcon(status) { | |||||
return status | |||||
? ContractData.applyHistoryStatus.filter(e => e.value == status)[0].icon | |||||
: ""; | |||||
}, | |||||
getApproavl(){ | |||||
return CouponCacheData.couponApplyType.filter(e=>e.value==this.approvalType)[0].name | |||||
}, | |||||
cancel: function() { | |||||
this.$router.back(-1); | |||||
}, | |||||
changeDate(date, index) { | |||||
if (index === 0) { | |||||
return moment(date).format("YYYY-MM-DD"); | |||||
} else { | |||||
return moment(date).format("HH:mm:ss"); | |||||
} | |||||
}, | |||||
changeApplyStatus(item) { | |||||
return item | |||||
? ContractData.applyHistoryStatus.filter(e => e.value == item)[0].name | |||||
: ""; | |||||
}, | |||||
getData() { | |||||
this.getFetch( | |||||
"/api/workflow/applyHistory?businessId=" + this.$route.query.id | |||||
// "/api/wxRentPropertyContract/getContractApplyInfo?rentId=" + this.$route.query.id + '&propertyId='+this.$route.propertyId | |||||
) | |||||
.then(d => { | |||||
this.applyData = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} | |||||
}, | |||||
mounted() { | |||||
this.setNavData(["合同管理", "审批进度"]); | |||||
if(this.$route.query.approvalType!=0&&this.$route.query.approvalType){ | |||||
this.approvalType = this.$route.query.approvalType | |||||
} | |||||
}, | |||||
created() { | |||||
this.getData(); | |||||
this.bodyWidth = document.body.offsetWidth; | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.title{ | |||||
font-size: 16px; | |||||
font-weight: 600; | |||||
padding-right: 20px; | |||||
text-align: left; | |||||
} | |||||
.title:first-child{ | |||||
text-align: right; | |||||
} | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.text-content { | |||||
padding: 30px 0; | |||||
width: 100%; | |||||
height: auto; | |||||
background: #fff; | |||||
} | |||||
.left { | |||||
text-align: right; | |||||
padding-right: 20px; | |||||
} | |||||
.date { | |||||
font-size: 14px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(153, 153, 153, 1); | |||||
line-height: 32px; | |||||
} | |||||
.time { | |||||
font-size: 14px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(51, 51, 51, 1); | |||||
line-height: 26px; | |||||
} | |||||
.img { | |||||
width: 26px; | |||||
height: 26px; | |||||
border-radius: 13px; | |||||
border: 1px solid rgba(234, 240, 254, 1); | |||||
box-sizing: border-box; | |||||
margin: 4px auto; | |||||
} | |||||
.icon-img { | |||||
width: 30px; | |||||
height: 30px; | |||||
margin: 4px auto; | |||||
} | |||||
.circle { | |||||
width: 20px; | |||||
height: 20px; | |||||
border-radius: 10px; | |||||
background: rgba(234, 240, 254, 1); | |||||
margin: 2px auto 0; | |||||
box-sizing: border-box; | |||||
} | |||||
.line { | |||||
/* height: 64px; */ | |||||
width: 2px; | |||||
background: rgba(234, 240, 254, 1); | |||||
border-radius: 1px; | |||||
margin: 0 auto; | |||||
box-sizing: border-box; | |||||
} | |||||
.right { | |||||
padding: 0 40px 0 20px; | |||||
} | |||||
.right-title { | |||||
font-size: 18px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(51, 51, 51, 1); | |||||
line-height: 32px; | |||||
} | |||||
.right-content { | |||||
font-size: 14px; | |||||
font-family: MicrosoftYaHei; | |||||
font-weight: 400; | |||||
color: rgba(153, 153, 153, 1); | |||||
line-height: 26px; | |||||
} | |||||
</style> |
@@ -0,0 +1,587 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<el-form | |||||
:inline="true" | |||||
:model="ruleForm" | |||||
ref="ruleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="商铺号" prop="name" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="商户名称" prop="merchantName" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="合同状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in options" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="审批状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in applyStatusOptions" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="计租方式" class="fx_send"> | |||||
<el-select v-model="ruleForm.type" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in types" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-button type="primary" class="builtBtn" @click="goSave" style="margin-right:4px;"> | |||||
<i>+</i>新建 | |||||
</el-button> | |||||
<!-- <el-button type="primary" class="builtBtn" @click="goBulu" style="margin-left:4px;"> | |||||
<i>+</i>补录 | |||||
</el-button> --> | |||||
<el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;"> | |||||
<i>+</i>续签 | |||||
</el-button> | |||||
<table-list :ref="tk" :options="optionsTable"></table-list> | |||||
<stop-contract :ref="st" :type='6' :processData="processData" :options="stopOptions"></stop-contract> | |||||
</div> | |||||
<div> | |||||
<el-dialog | |||||
title="提示" | |||||
:visible.sync="dialogVisible" | |||||
width="40%" | |||||
:modal-append-to-body="false" | |||||
:before-close="handleClose" | |||||
> | |||||
<span>当前有欠缴账单未结清,是否要继续终止合同?</span> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="stopContract">确定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import StopContract from "../contractutil/stopcontract.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import reportTool from "../../../core/tool/report.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { promissionUrl } from "../../../urlconfig/promission/url.js"; | |||||
let echarts = require("echarts"); | |||||
export default { | |||||
inject: ["reload"], | |||||
name: "rentlist", | |||||
components: { | |||||
TableList, | |||||
StopContract | |||||
}, | |||||
data() { | |||||
return { | |||||
processData:[], | |||||
waitSignCount: "", //待签约 | |||||
endSoonCount: "", //将到期合同 | |||||
dialogVisible: false, | |||||
rendPaidCount: "", //计租中合同 | |||||
shopcount: "", //空余商铺 | |||||
tk: "manjianTableKey", | |||||
st: "stopContract", | |||||
stopOptions: { | |||||
contractType: "1" | |||||
}, | |||||
applyStatusOptions:ContractData.applyStatus, | |||||
ruleForm: { | |||||
shopNumber: "", | |||||
merchantName: "", | |||||
status: "", | |||||
type: "", | |||||
applyStatus:"" | |||||
}, | |||||
options: ContractData.statusOptions, | |||||
types: [ | |||||
{ | |||||
value: "1", | |||||
label: "按租赁面积" | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "联营扣点" | |||||
}, | |||||
{ | |||||
value: 3, | |||||
label: "面积计租、联营取高" | |||||
} | |||||
], | |||||
optionsTable: { | |||||
actions: [ | |||||
{ | |||||
key: "edit", | |||||
val: "提交审批", | |||||
action: this.doApply, | |||||
show: item => { | |||||
return item.status == 1 | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "编辑", | |||||
action: this.aCount, | |||||
show: item => { | |||||
return item.status == 10 && (item.applyStatus == 3 || item.applyStatus == 5) | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "终止", | |||||
action: this.endcontract, | |||||
show: item => { | |||||
if ( | |||||
(item.status == 2 || item.status == 3) | |||||
) { | |||||
return true; | |||||
} else { | |||||
return false; | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "查看", | |||||
action: this.goCheck, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "download", | |||||
val: "下载", | |||||
action: this.goDownload, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "审批进度", | |||||
action: this.checkCurrentStatus, | |||||
show: item => { | |||||
return item.applyStatus == 1 || | |||||
item.applyStatus == 2 || | |||||
item.applyStatus == 3 || | |||||
item.applyStatus == 5 | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
// { | |||||
// key: "edit", | |||||
// val: "绑定商户", | |||||
// action: this.goToEditShop, | |||||
// show: item => { | |||||
// return (item.applyStatus == 2||(item.applyStatus == 0 && !item.merchantId)) && item.status == 1 ? true : false; | |||||
// } | |||||
// } | |||||
], | |||||
showCk: false, | |||||
map: [ | |||||
{ | |||||
key: "contractNumber", | |||||
val: "合同编号" | |||||
}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号", | |||||
convert: this.changeShopNum, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "merchantName", | |||||
val: "商户名称" | |||||
}, | |||||
{ | |||||
key: "rentalStartDate", | |||||
val: "租赁开始日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentalEndDate", | |||||
val: "租赁结束日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "price", | |||||
val: "租金", | |||||
convert: this.divide, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "type", | |||||
val: "计租方式", | |||||
convert: this.ctype | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "合同状态", | |||||
convert: this.cStatus | |||||
}, | |||||
{ | |||||
key: "applyStatus", | |||||
val: "审批状态", | |||||
convert: this.cApplyStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return ( | |||||
"/api/wxRentContract/list?merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&status=" + | |||||
this.ruleForm.status + | |||||
"&type=" + | |||||
this.ruleForm.type + | |||||
"&rentShopType=1&applyStatus=" + | |||||
this.ruleForm.applyStatus+ | |||||
"&operationType=1" | |||||
); | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.list, | |||||
count: data.data.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
doApply(item,row) { | |||||
console.log(item) | |||||
let params = { | |||||
remark: '', | |||||
id: item.id | |||||
} | |||||
this.postFetch("/api/wxRentContract/apply",params) | |||||
.then(d => { | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
changeShopNum(item, row) { | |||||
let rentInfo = JSON.parse(row.rentInfo); | |||||
let str = ""; | |||||
rentInfo.map((items, indexs) => { | |||||
str = str != "" ? str + " ," + items.shopNumber : items.shopNumber; | |||||
}); | |||||
return str; | |||||
}, | |||||
cApplyStatus(col, item) { | |||||
if (item.applyStatus) { | |||||
return ( | |||||
(item.businessType != 6 ? "签约" : "终止") + | |||||
ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0] | |||||
.name | |||||
); | |||||
} else if (item.applyStatus === 0) { | |||||
return "未提交审核"; | |||||
} | |||||
}, | |||||
goToEditShop(item) { | |||||
this.$router.push({ | |||||
path: "/merchant/merchantAdd?contractId=" + item.id | |||||
}); | |||||
}, | |||||
checkCurrentStatus(item, row) { | |||||
this.$router.push({ | |||||
path: "rentApprovals?id=" + item.id + 'propertyId'+item.operationType | |||||
}); | |||||
}, | |||||
cStatus(col, item) { | |||||
return CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.status.toString(); | |||||
})[0].name; | |||||
}, | |||||
divide(col, item) { | |||||
if (item.bus_discount_ratio != undefined && item.bus_discount_time != 0 && item.bus_discount_ratio !='') { | |||||
return Number(item.price) / 100 +(item.bus_discount_time==1?'元/年':item.bus_discount_time==2?'元/月':'元/周期'); | |||||
} else { | |||||
return Number(item.price) / 100 +(item.price_unit==1?'元/日':item.price_unit==2?'元/月':'元/年'); | |||||
} | |||||
}, | |||||
ctype(col, item) { | |||||
if (item.type == 1) { | |||||
return "按租赁面积"; | |||||
} else if (item.type == 2) { | |||||
return "联营扣点"; | |||||
} else { | |||||
return "面积计租、联营取高"; | |||||
} | |||||
}, | |||||
aCount: function(item, row) { | |||||
/* if (item.merchantId) { | |||||
this.$router.push({ | |||||
path: "rentBulu?id=" + item.id | |||||
}); | |||||
} else { | |||||
this.$router.push({ | |||||
path: "rentEdit?id=" + item.id | |||||
}); | |||||
} */ | |||||
this.$router.push({ | |||||
path: "rentEdit?id=" + item.id | |||||
}); | |||||
}, | |||||
goCheck: function(item, row) { | |||||
/** | |||||
contractType合同类型:1租金合同,2多经合同,3物业合同,4多经物业合同 | |||||
businessType操作类型:1合同审批,2账单审批,3终止合同审批 | |||||
id为合同id | |||||
*/ | |||||
this.$router.push({ | |||||
path: `rentsCheck?id=${item.id}&contractType=1&businessType=1` | |||||
}); | |||||
}, | |||||
handleClose(done) { | |||||
this.$confirm("确认关闭?") | |||||
.then(_ => { | |||||
done(); | |||||
}) | |||||
.catch(_ => {}); | |||||
}, | |||||
endcontract: function(item, row) { | |||||
let that = this; | |||||
this.getFetch("/api/wxBillAll/oweBillCount?type=1&contractId=" + item.id) | |||||
.then(d => { | |||||
if (Number(d.data) > 0) { | |||||
that.dialogVisible = true; | |||||
that.contractId = item.id; | |||||
that.contractNumber = item.contractNumber; | |||||
} else { | |||||
this.$refs[this.st].showLog(item.id, item.contractNumber); | |||||
} | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
stopContract() { | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}, | |||||
goSave: function() { | |||||
this.$router.push({ | |||||
path: "/rentEdit?" +'fromNew='+true | |||||
}); | |||||
}, | |||||
goBulu: function() { | |||||
this.$router.push({ | |||||
path: "/rentBulu" | |||||
}); | |||||
}, | |||||
goRenew(){ | |||||
this.$router.push({ | |||||
path: "/rentEdit", | |||||
query:{ | |||||
Renew:true | |||||
} | |||||
}); | |||||
}, | |||||
goDownload: function(item) { | |||||
location.href = "/api/wxRentContract/exportContract?id=" + item.id; | |||||
}, | |||||
getcount: function() { | |||||
this.getFetch( | |||||
"/api/wxRentContract/list?pageNum=1&pageSize=10&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&status=" + | |||||
this.ruleForm.status + | |||||
"&rentShopType=1" | |||||
) | |||||
.then(d => { | |||||
/* this.waitSignCount = d.data.rentContractStatusInfo.waitSignCount; //带签约合同 | |||||
this.endSoonCount = d.data.rentContractStatusInfo.endSoonCount; //将到期合同 | |||||
this.rendPaidCount = d.data.rentContractStatusInfo.rendPaidCount; //计租中合同 | |||||
this.shopcount = | |||||
d.data.rentContractStatusInfo.shopCountInfo.unrentedCount; //空余商铺 | |||||
let allRentCount = | |||||
Number(d.data.rentContractStatusInfo.allCount) == 0 | |||||
? 100 | |||||
: Number(d.data.rentContractStatusInfo.allCount); //合同总数 | |||||
let allShopCount = | |||||
Number(d.data.rentContractStatusInfo.shopCountInfo.allCount) == 0 | |||||
? 100 | |||||
: Number(d.data.rentContractStatusInfo.shopCountInfo.allCount); //商铺总数 | |||||
let value_spare = Number(this.shopcount) || 0; | |||||
let myChart_spare = echarts.init(document.getElementById("spare")); | |||||
myChart_spare.setOption( | |||||
reportTool.myPie("空余商铺", "#5976BF", value_spare, allShopCount) | |||||
); | |||||
let value_signed = Number(this.waitSignCount) || 0; | |||||
let myChart_signed = echarts.init(document.getElementById("signed")); | |||||
myChart_signed.setOption( | |||||
reportTool.myPie("待签约", "#C85963", value_signed, allRentCount) | |||||
); | |||||
let value_expire = Number(this.endSoonCount) || 0; | |||||
let myChart_expire = echarts.init(document.getElementById("expire")); | |||||
myChart_expire.setOption( | |||||
reportTool.myPie("将到期", "#EE7653", value_expire, allRentCount) | |||||
); | |||||
let value_planning = Number(this.rendPaidCount) || 0; | |||||
let myChart_planning = echarts.init( | |||||
document.getElementById("planning") | |||||
); | |||||
myChart_planning.setOption( | |||||
reportTool.myPie("计租中", "#3FC496", value_planning, allRentCount) | |||||
); */ | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
}, | |||||
search: function() { | |||||
let tk = this.$refs[this.tk]; | |||||
tk.search(tk.getParams().index); | |||||
}, | |||||
/** | |||||
* 根据业务查询模板 | |||||
*/ | |||||
getModelBybusiness(){ | |||||
this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=6`) | |||||
.then(d=>{ | |||||
if(d.data.length>0){ | |||||
this.processData = JSON.parse(d.data[0].flow).lists; | |||||
} | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data); | |||||
}) | |||||
} | |||||
}, | |||||
activated(){ | |||||
this.search() | |||||
// this.getcount(); | |||||
this.getModelBybusiness(); | |||||
this.setNavData(["合同管理", "店铺", "租金合同"]); | |||||
}, | |||||
created() { | |||||
if (this.$route.query.status) { | |||||
this.ruleForm.status = this.$route.query.status.toString(); | |||||
}; | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
} | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width:60px; */ | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 80px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.el-form-item .el-form-item__content, | |||||
.el-form-item .el-form-item__content .el-date-editor, | |||||
.el-form-item .el-form-item__content .el-date-editor .el-input__inner { | |||||
width: 150px; | |||||
} | |||||
/* .fx_send .el-form-item__content .el-select { | |||||
width: 153px !important; | |||||
} */ | |||||
.fx_title .el-input { | |||||
width: 193px; | |||||
} | |||||
</style> |
@@ -0,0 +1,173 @@ | |||||
<template> | |||||
<div class="show-rate-wrap"> | |||||
<ul class="rate-show-list clearfix"> | |||||
<li>{{computedCycleStr}}</li> | |||||
<li v-for="(item, index) in jumpRateObj.rateList" :key="index">{{`${item.firstNum}-${item.endNum}万 扣点 ${item.rateNum}%`}}</li> | |||||
<li v-if="jumpRateObj.limitNum && jumpRateObj.limitRate">{{`超过${jumpRateObj.limitNum}万时,超出部分扣点 ${jumpRateObj.limitRate}%`}}</li> | |||||
</ul> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { | |||||
deepcopy | |||||
} from "../../../utils/validate"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { promissionUrl } from "../../../urlconfig/promission/url.js"; | |||||
export default { | |||||
inject: ["reload"], | |||||
name: "jumpRateSet", | |||||
props: ['parentJumpRateObj'], | |||||
components: { | |||||
}, | |||||
data() { | |||||
return { | |||||
...mapActions(["setRentInfo", "setFormData"]), | |||||
jumpRateObj:{ | |||||
timeCycle: 1, | |||||
limitNum: '', | |||||
limitRate: '', | |||||
rateList: [ | |||||
] | |||||
}, | |||||
jumpRateBaseObj:{ | |||||
timeCycle: 1, | |||||
limitNum: '', | |||||
limitRate: '', | |||||
rateList: [ | |||||
] | |||||
}, | |||||
}; | |||||
}, | |||||
mounted: function() { | |||||
//初始化处理 | |||||
this.dealRateInfo(); | |||||
}, | |||||
computed:{ | |||||
...mapState({ | |||||
formData: state => state.setRentInfo.formData | |||||
}), | |||||
computedCycleStr() { | |||||
if (this.jumpRateObj.timeCycle == 1) { | |||||
return '年营业额'; | |||||
} else if (this.jumpRateObj.timeCycle == 2) { | |||||
return '月营业额'; | |||||
} else if (this.jumpRateObj.timeCycle == 3) { | |||||
return '周期营业额'; | |||||
} | |||||
}, | |||||
}, | |||||
watch: { | |||||
formData: { | |||||
handler(newVal, oldVal) { | |||||
this.dealRateInfo(); | |||||
}, | |||||
deep: true, | |||||
immediate: true | |||||
} | |||||
}, | |||||
methods: { | |||||
//初始化处理 | |||||
dealRateInfo() { | |||||
if (this.formData.busDiscountRatio == undefined || this.formData.busDiscountTime == undefined || this.formData.payRatio == undefined) { | |||||
this.formData.busDiscountRatio = ''; | |||||
this.formData.busDiscountTime = 1; | |||||
this.formData.payRatio = 0; | |||||
} | |||||
let {busDiscountRatio, busDiscountTime} = this.formData; | |||||
if (busDiscountRatio != '') { | |||||
let arr = JSON.parse(busDiscountRatio); | |||||
//如果有上限> | |||||
if (busDiscountRatio.indexOf('>') != -1) { | |||||
let curLastStr = arr.pop(); | |||||
let limitArr = []; | |||||
curLastStr = curLastStr.replace('>',','); | |||||
curLastStr = curLastStr.replace(':',','); | |||||
limitArr = curLastStr.split(','); | |||||
this.dealStrFormat(arr, busDiscountRatio); | |||||
this.jumpRateObj.limitNum = limitArr[1]; | |||||
this.jumpRateObj.limitRate = limitArr[2]/100; | |||||
} else { | |||||
this.dealStrFormat(arr, busDiscountRatio); | |||||
this.jumpRateObj.limitNum = ''; | |||||
this.jumpRateObj.limitRate = ''; | |||||
} | |||||
} else { | |||||
this.jumpRateObj = deepcopy(this.jumpRateBaseObj); | |||||
// this.jumpRateObj = Object.assign({},this.jumpRateObj,this.jumpRateBaseObj); | |||||
} | |||||
}, | |||||
//deal | |||||
dealStrFormat(arr, busDiscountRatio) { | |||||
let curInfoArr = []; | |||||
//没有初始值-重置一个默认用于显示 | |||||
if (busDiscountRatio.indexOf('-') == -1) { | |||||
curInfoArr.push({ | |||||
firstNum: 0, | |||||
endNum: '', | |||||
}) | |||||
} else { | |||||
arr.map((item, index) => { | |||||
item = item.replace('-',','); | |||||
item = item.replace(':',','); | |||||
let curSplitArr = item.split(','); | |||||
let dealNum = Number(curSplitArr[2]); | |||||
//后端存储的时候要是三位正整数,保存的时候要*100,但是显示的时候要/100,在 | |||||
//往vuex存储的时候保存的是*100后的,提交保存的时候那步在其他页面也有,故在这里强制处理 | |||||
dealNum = this.dealNumFn(dealNum); | |||||
let obj = { | |||||
firstNum: curSplitArr[0], | |||||
endNum: curSplitArr[1], | |||||
rateNum: dealNum, | |||||
} | |||||
curInfoArr.push(obj); | |||||
}) | |||||
} | |||||
this.$set(this.jumpRateObj,'rateList',curInfoArr); | |||||
this.$set(this.jumpRateObj,'timeCycle',this.formData.busDiscountTime); | |||||
}, | |||||
dealNumFn(dealNum) { | |||||
dealNum = dealNum+''; | |||||
let curNumLength = dealNum.length - 2; | |||||
curNumLength = curNumLength == 1 ? 2 : curNumLength; | |||||
dealNum = dealNum >= 100 ? dealNum/(Math.pow(10,curNumLength)) : dealNum; | |||||
return dealNum; | |||||
}, | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
li { | |||||
list-style-type: none; | |||||
} | |||||
.jump-rate-set { | |||||
/* margin-left: 30px; */ | |||||
} | |||||
.rate-show-list { | |||||
padding-left: 0; | |||||
} | |||||
.rate-show-list li { | |||||
float: left; | |||||
height: 24px; | |||||
line-height: 24px; | |||||
padding: 0 15px; | |||||
background: #eee; | |||||
border-radius: 14px; | |||||
text-align: center; | |||||
margin: 15px 15px 0 0; | |||||
} | |||||
</style> |
@@ -0,0 +1,789 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<div class="shopBox" style="margin-bottom:20px;" v-if="fromAddTask != 'fromAddTask'"> | |||||
<rent-shop :rentInfoData="rentInfo" :merchentEditIf="merchentEditIf"></rent-shop> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">合同信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同编号:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.contractNumber}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同状态:</el-col> | |||||
<el-col :span="18" class="span-text">{{cStatus(wxRentContract.status)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同签约日:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.signDate)}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">乙方信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">商户名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.merchantName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同主体名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.subjectName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">经营品牌:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBrand(wxRentContract.brand)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">业态:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBusiness(wxRentContract.businessId)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">店面类型:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeShopType(wxRentContract.shopType)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">负责人:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPerson}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">联系电话:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPhone}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">签约信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalStartDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁截止日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalEndDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">总租期:</el-col> | |||||
<el-col :span="18" class="span-text">{{totalPeriodMonth+'个月'+totalPeriodDay+"天"}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">装修期:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
class="span-text" | |||||
>{{wxRentContract.fixStartDate+' 至 '+wxRentContract.fixEndDate}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">计租开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.startDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">账单生成方式:</el-col> | |||||
<el-col :span="18" class="span-text">{{getAdjustPeriod}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title" v-if="contractType!=3&&contractType!=4">计租方式:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
class="span-text" | |||||
v-if="contractType!=3&&contractType!=4" | |||||
>{{changeType(wxRentContract.type)}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">租金费用明细</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col | |||||
:span="3" | |||||
v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" | |||||
class="span-title" | |||||
>保底营业额:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" | |||||
class="span-text" | |||||
>{{wxRentContract.revenue/100+'元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col | |||||
:span="3" | |||||
v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4" | |||||
class="span-title" | |||||
>联营扣点:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio==''" | |||||
class="span-text" | |||||
>{{wxRentContract.payRatio/100+'%'}}</el-col> | |||||
<el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio!=''" class="span-text"> | |||||
<!-- aaa --> | |||||
<show-rate-list class="cur-rate-list"></show-rate-list> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">总面积:</el-col> | |||||
<el-col :span="18" class="span-text">{{getTotleArea+'㎡'+' ('+getAreaList+')'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==5"> | |||||
<el-col :span="3" class="span-title">租金单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{getRentPrice}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==5"> | |||||
<el-col :span="3" class="span-title">租金:</el-col> | |||||
<el-col v-if="wxRentContract.rentInputWay==2" :span="18" class="span-text">{{getTotlePrice+' ('+getPriceList+')'}}</el-col> | |||||
<el-col v-else :span="18" class="span-text">{{getTotlePrice}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==5"> | |||||
<el-col :span="3" class="span-title">押金:</el-col> | |||||
<el-col v-if="wxRentContract.rentInputWay==2" :span="18" class="span-text">{{getTotleDeposit+' ('+getDepositList+')'}}</el-col> | |||||
<el-col v-else :span="18" class="span-text">{{getTotleDeposit}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">付款周期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.receivePeriod+ ' 月'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.latePayRatio"> | |||||
<el-col :span="3" class="span-title">滞纳金费率:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.latePayRatio+ '%'}}<span style="margin-left:30px;">{{'欠缴后 '+wxRentContract.latePayDay+' 日开始计费'}}</span></el-col> | |||||
</el-row> | |||||
<el-row | |||||
v-if="wxRentContract.type!=2&&rentInfo[0]&&rentInfo[0].adjustRatio.length>0&&wxRentContract.rentInputWay==2" | |||||
> | |||||
<el-col :span="3" class="span-title">年租金调整:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<div v-for="(item,index) in rentInfo" :key="index">{{getAdjustRatio(item)}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row | |||||
v-if="(wxRentContract.type==2&&wxRentContract.adjustRatio&&wxRentContract.adjustRatio.length>0)||wxRentContract.rentInputWay==1" | |||||
> | |||||
<el-col :span="3" class="span-title">年租金调整:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<div>{{getPricePer02(wxRentContract.adjustRatio)}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租金账单:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<rent-bill :editIf="true" :ref="billTk"></rent-bill> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box" v-show="wxRentContract02"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">物业费用明细</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">物业费单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract02.rentPrice/100+'㎡/元/'+priceUnitType02}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">物业费:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract02.price/100+'元/'+priceUnitType02}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">物业押金:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract02.deposit/100+'元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">付款周期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract02.receivePeriod+ ' 月'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract02.latePayRatio"> | |||||
<el-col :span="3" class="span-title">滞纳金费率:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract02.latePayRatio+ '%'}}<span style="margin-left:30px;">{{'欠缴后 '+wxRentContract02.latePayDay+' 日开始计费'}}</span></el-col> | |||||
</el-row> | |||||
<el-row | |||||
v-if="wxRentContract02.adjustRatio&&wxRentContract02.adjustRatio.length>0" | |||||
> | |||||
<el-col :span="3" class="span-title">年物业费调整:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<div>{{getPricePer03(wxRentContract02.adjustRatio)}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">物业账单:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<rent-bill :editIf="true" :ref="billTk02"></rent-bill> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<!-- <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">审批意见</div> --> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<!-- <label class="text" style="color:blue;" v-for="(item,index) in fileNames" :key="index" @click="download(index)"><u>{{item.name}}</u></label> --> | |||||
<el-col :span="3" class="span-title">合同附件:</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length<=0">无</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length>0"> | |||||
<div | |||||
class="download-file" | |||||
v-for="(item,index) in fileNames" | |||||
:key="index" | |||||
@click.stop.prevent="download(index)" | |||||
>{{item.name}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<el-row style="margin:20px 0 0;text-align:center;"> | |||||
<el-button @click.stop.prevent="cancel">返回</el-button> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import commonUtil from "../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../core/tool/ajaxService"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import rentBill from "../contract/contractutil/rentbill.vue"; | |||||
import { ContractUrl } from "../contract/businessComp/UrlEnum.js"; | |||||
import { CouponCacheData } from "../../service/couponData/data.js"; | |||||
import { ContractData } from "../../service/contract/data.js"; | |||||
import rentShop from "./contractutil/rentshop.vue"; | |||||
import showRateList from "./rent/showRateList.vue"; | |||||
import moment from "moment"; | |||||
export default { | |||||
extends: AjaxUtil, | |||||
name: "rentLeaseCheck", | |||||
components: { | |||||
rentBill, | |||||
rentShop, | |||||
showRateList | |||||
}, | |||||
data() { | |||||
return { | |||||
brands: [], | |||||
merchentEditIf: true, | |||||
priceUnitType: "", | |||||
fromAddTask:"", | |||||
priceUnitType02: "", | |||||
priceUnitOption: ContractData.priceUnitOption, | |||||
contractType: 0, | |||||
totalPeriodMonth: 0, | |||||
totalPeriodDay: 0, | |||||
remark: "", | |||||
wxShops: "", | |||||
rentInfo: [], | |||||
fileNames: [], | |||||
billTk: "rentbill", | |||||
billTk02: "rentbill02", | |||||
wxRentContract: "", | |||||
wxRentContract02: "", | |||||
wxMerchant: "", | |||||
businessIds: [], | |||||
active: 0, | |||||
// 店铺类型 | |||||
shopTypes: ContractData.shopTypes, | |||||
//计租计算方式 | |||||
computedTypes: ContractData.computedTypes | |||||
}; | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
topNav: state => state.topNav.data, //将 this.topNav 映射为 this.$store.topNav.data | |||||
navigationInfo: state => state.topNav.navigationInfo, | |||||
formData: state => state.setRentInfo.formData | |||||
}), | |||||
getRentPrice() { | |||||
let str = ""; | |||||
if (this.wxRentContract.rentInputWay == 2) { | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != "" | |||||
? str + | |||||
", " + | |||||
item.shopNumber + | |||||
"号铺:" + | |||||
item.rentPrice + | |||||
"㎡/元/" + | |||||
this.priceUnitType | |||||
: item.shopNumber + | |||||
"号铺:" + | |||||
item.rentPrice + | |||||
"㎡/元/" + | |||||
this.priceUnitType; | |||||
}); | |||||
} else { | |||||
str = this.wxRentContract.rentPrice + "㎡/元/" + this.priceUnitType; | |||||
} | |||||
return str; | |||||
}, | |||||
getAdjustPeriod() { | |||||
return this.wxRentContract.adjustPeriod == 3 | |||||
? "按自然月生成" | |||||
: "按计租日期生成"; | |||||
}, | |||||
getTotleArea() { | |||||
this.rentArea = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.rentArea += Number(item.rentArea); | |||||
}); | |||||
return this.rentArea; | |||||
}, | |||||
getAreaList() { | |||||
let str = ""; | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != "" | |||||
? str + ", " + item.shopNumber + "号铺:" + item.rentArea + "㎡" | |||||
: item.shopNumber + "号铺:" + item.rentArea + "㎡"; | |||||
}); | |||||
return str; | |||||
}, | |||||
getTotlePrice() { | |||||
if (this.wxRentContract.rentInputWay == 1) { | |||||
return ( | |||||
Number(this.wxRentContract.price) / 100 + "元/" + this.priceUnitType | |||||
); | |||||
} else { | |||||
this.price = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.price += Number(item.price); | |||||
}); | |||||
return this.price + "元/" + this.priceUnitType; | |||||
} | |||||
}, | |||||
getPriceList() { | |||||
let str = ""; | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != "" | |||||
? str + | |||||
", " + | |||||
item.shopNumber + | |||||
"号铺: " + | |||||
item.price + | |||||
"元/" + | |||||
this.priceUnitType | |||||
: item.shopNumber + | |||||
"号铺: " + | |||||
item.price + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}); | |||||
return str; | |||||
}, | |||||
getTotleDeposit() { | |||||
if (this.wxRentContract.rentInputWay == 1) { | |||||
return Number(this.wxRentContract.deposit) / 100 + "元"; | |||||
} else { | |||||
this.deposit = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.deposit += Number(item.deposit); | |||||
}); | |||||
return this.deposit + "元"; | |||||
} | |||||
}, | |||||
getDepositList() { | |||||
let str = ""; | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != "" | |||||
? str + ", " + item.shopNumber + "号铺: " + item.deposit + "元" | |||||
: item.shopNumber + "号铺: " + item.deposit + "元"; | |||||
}); | |||||
return str; | |||||
} | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData", | |||||
"setFormData", | |||||
"setRentInfo" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
cStatus(item) { | |||||
return item != undefined | |||||
? CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.toString(); | |||||
})[0].name | |||||
: ""; | |||||
}, | |||||
getPricePer02(items, indexs) { | |||||
let str = ""; | |||||
if ( | |||||
this.wxRentContract.adjustRatioWay == 1 || | |||||
this.wxRentContract02.adjustRatioWay == 1 | |||||
) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + ",第" + (index + 2) + "年上浮" + item + "%" | |||||
: str + "第" + (index + 2) + "年上浮" + item + "%"; | |||||
}) | |||||
: ""; | |||||
} else if ( | |||||
this.wxRentContract.adjustRatioWay == 2 || | |||||
this.wxRentContract02.adjustRatioWay == 2 | |||||
) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}) | |||||
: ""; | |||||
} else { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}) | |||||
: ""; | |||||
} | |||||
return str; | |||||
}, | |||||
getPricePer03(items, indexs) { | |||||
let str = ""; | |||||
if ( | |||||
this.wxRentContract.adjustRatioWay == 1 || | |||||
this.wxRentContract02.adjustRatioWay == 1 | |||||
) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + ",第" + (index + 2) + "年上浮" + item + "%" | |||||
: str + "第" + (index + 2) + "年上浮" + item + "%"; | |||||
}) | |||||
: ""; | |||||
} else if ( | |||||
this.wxRentContract.adjustRatioWay == 2 || | |||||
this.wxRentContract02.adjustRatioWay == 2 | |||||
) { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02 | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02; | |||||
}) | |||||
: ""; | |||||
} else { | |||||
items != undefined | |||||
? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + | |||||
",第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02 | |||||
: str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType02; | |||||
}) | |||||
: ""; | |||||
} | |||||
return str; | |||||
}, | |||||
getAdjustRatio(items) { | |||||
let str = items.shopNumber + "号铺: "; | |||||
if (this.wxRentContract.adjustRatioWay == 1) { | |||||
items.adjustRatio.map((item, index) => { | |||||
str = str + "第" + (index + 2) + "年上浮" + item + "% "; | |||||
}); | |||||
} else if(this.wxRentContract.adjustRatioWay == 2){ | |||||
items.adjustRatio.map((item, index) => { | |||||
str = | |||||
str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年上浮" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}); | |||||
} else { | |||||
items.adjustRatio.map((item, index) => { | |||||
str = | |||||
str + | |||||
"第" + | |||||
(index + 2) + | |||||
"年" + | |||||
item + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}); | |||||
} | |||||
return str; | |||||
}, | |||||
changeBrand(brand) { | |||||
return this.brands.length > 0 && brand | |||||
? this.brands.filter(e => e.id == brand)[0].value | |||||
: ""; | |||||
}, | |||||
changeBusiness(businessId) { | |||||
return this.businessIds.length > 0 && businessId != undefined | |||||
? this.businessIds.filter(e => e.id == businessId)[0].title | |||||
: ""; | |||||
}, | |||||
changeShopType(id) { | |||||
return id != undefined | |||||
? this.shopTypes.filter(e => e.value == id)[0].label | |||||
: ""; | |||||
}, | |||||
changeDate(date) { | |||||
return moment(date).format("YYYY-MM-DD"); | |||||
}, | |||||
changeType(type) { | |||||
return type != undefined | |||||
? this.computedTypes.filter(e => e.value == type)[0].label | |||||
: ""; | |||||
}, | |||||
download: function(index) { | |||||
window.open(this.fileNames[index].url); | |||||
}, | |||||
cancel() { | |||||
this.$router.back(-1); | |||||
}, | |||||
getData() { | |||||
let _this = this; | |||||
this.contractType = this.$route.query.contractType; | |||||
this.getFetch( | |||||
ContractUrl.rentPropertyContractFindById + "?id=" + this.$route.query.id | |||||
).then(d => { | |||||
console.log(d); | |||||
_this.wxRentContract = d.data.rent.wxRentContract; | |||||
_this.wxRentContract.fixStartDate = _this.wxRentContract.fixStartDate | |||||
? moment(_this.wxRentContract.fixStartDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
_this.wxRentContract.fixEndDate = _this.wxRentContract.fixEndDate | |||||
? moment(_this.wxRentContract.fixEndDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
this.priceUnitType = this.wxRentContract.priceUnit | |||||
? this.priceUnitOption.filter( | |||||
e => e.value == this.wxRentContract.priceUnit | |||||
)[0].name | |||||
: ""; | |||||
_this.totalPeriodMonth = d.data.rent.totalPeriodMonth; | |||||
_this.totalPeriodDay = d.data.rent.totalPeriodDay; | |||||
_this.rentInfo = d.data.rent.wxRentContract.rentInfo | |||||
? JSON.parse(d.data.rent.wxRentContract.rentInfo) | |||||
: []; | |||||
let adjustRatio = []; | |||||
JSON.parse(d.data.rent.wxRentContract.adjustRatio).map( | |||||
(item, index) => { | |||||
let a = item / 100; | |||||
adjustRatio.push(a); | |||||
} | |||||
); | |||||
_this.wxRentContract.adjustRatio = adjustRatio; | |||||
_this.$refs[_this.billTk].setData(d.data.rent.previewBillRentList); | |||||
//aaa | |||||
if ( | |||||
d.data.rent.wxRentContract.busDiscountRatio == undefined || | |||||
d.data.rent.wxRentContract.busDiscountTime == undefined | |||||
) { | |||||
d.data.rent.wxRentContract.busDiscountRatio = ""; | |||||
d.data.rent.wxRentContract.busDiscountTime = 1; | |||||
} | |||||
let curObj = Object.assign({}, this.formData); | |||||
curObj.busDiscountRatio = d.data.rent.wxRentContract.busDiscountRatio; | |||||
curObj.busDiscountTime = d.data.rent.wxRentContract.busDiscountTime; | |||||
curObj.payRatio = d.data.rent.wxRentContract.payRatio; | |||||
this.setFormData(curObj); | |||||
//如果没有设置物业信息不走下面的语句 | |||||
if (!d.data.property) { | |||||
return; | |||||
} | |||||
_this.wxRentContract02 = d.data.property; | |||||
_this.wxRentContract02.fixStartDate = _this.wxRentContract02 | |||||
.fixStartDate | |||||
? moment(_this.wxRentContract02.fixStartDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
_this.wxRentContract02.fixEndDate = _this.wxRentContract02.fixEndDate | |||||
? moment(_this.wxRentContract02.fixEndDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
this.priceUnitType02 = this.wxRentContract02.priceUnit | |||||
? this.priceUnitOption.filter( | |||||
e => e.value == this.wxRentContract02.priceUnit | |||||
)[0].name | |||||
: ""; | |||||
_this.fileNames = d.data.property.fileNames | |||||
? JSON.parse(d.data.property.fileNames) | |||||
: []; | |||||
let adjustRatio02 = []; | |||||
JSON.parse(d.data.property.adjustRatio).map((item, index) => { | |||||
let a = item / 100; | |||||
adjustRatio02.push(a); | |||||
}); | |||||
_this.wxRentContract02.adjustRatio = adjustRatio02; | |||||
_this.$refs[_this.billTk02].setData( | |||||
d.data.property.previewBillRentList | |||||
); | |||||
}); | |||||
} | |||||
}, | |||||
mounted: function() { | |||||
commonUtil.pvuv.setPVUV.apply(this, []); | |||||
}, | |||||
created() { | |||||
this.setNavData(["合同管理", "店铺", "租金+物业合同", "查看"]); | |||||
this.getData(); | |||||
if(this.$route.query.flags){ | |||||
this.fromAddTask = this.$route.query.flags; | |||||
this.setNavData(["招商管理", "店铺", "租金+物业合同", "查看"]); | |||||
} | |||||
//获取品牌列表 | |||||
this.getFetch("/api/wxBrand/queryBrand") | |||||
.then(d => { | |||||
this.brands = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
this.getFetch(ContractUrl.businessList) | |||||
.then(d => { | |||||
this.businessIds = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.text-box { | |||||
background: #fff; | |||||
margin-bottom: 20px; | |||||
} | |||||
.download-file { | |||||
cursor: pointer; | |||||
} | |||||
.text-box-title { | |||||
height: 42px; | |||||
line-height: 42px; | |||||
padding-left: 20px; | |||||
color: #fff; | |||||
font-weight: 400px; | |||||
font-size: 14px; | |||||
background: rgba(51, 153, 255, 1); | |||||
} | |||||
.text-box-content { | |||||
padding: 20px; | |||||
line-height: 36px; | |||||
font-size: 12px; | |||||
} | |||||
.span-title { | |||||
text-align: right; | |||||
padding-right: 15px; | |||||
} | |||||
.layout-content { | |||||
width: 100%; | |||||
height: auto; | |||||
min-height: 300px; | |||||
background: #141e29; | |||||
border-radius: 2px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
/* width: 200px; */ | |||||
} | |||||
/* .el-select{ | |||||
width:120px; | |||||
} */ | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width: 60px; */ | |||||
border: none !important; | |||||
margin: 0 10px; | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 100px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.fx_send .el-form-item__content .el-select { | |||||
width: 120px !important; | |||||
} | |||||
.fx_title .el-input { | |||||
width: 150px; | |||||
} | |||||
.cur-rate-list /deep/ .rate-show-list li { | |||||
margin-top: 6px; | |||||
} | |||||
</style> |
@@ -0,0 +1,578 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<el-form | |||||
:inline="true" | |||||
:model="ruleForm" | |||||
ref="ruleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="商铺号" prop="name" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="商户名称" prop="merchantName" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="合同状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in options" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="审批状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in applyStatusOptions" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="计租方式" class="fx_send"> | |||||
<el-select v-model="ruleForm.type" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in types" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
size="medium" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-button type="primary" class="builtBtn" @click="goSave" style="margin-right:4px;"> | |||||
<i>+</i>新建 | |||||
</el-button> | |||||
<!-- <el-button type="primary" class="builtBtn" @click="goBulu" style="margin-left:4px;"> | |||||
<i>+</i>补录 | |||||
</el-button> --> | |||||
<el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;"> | |||||
<i>+</i>续签 | |||||
</el-button> | |||||
<table-list :ref="tk" :options="optionsTable"></table-list> | |||||
<stop-contract :ref="st" :type='18' :processData="processData" :options="stopOptions"></stop-contract> | |||||
</div> | |||||
<div> | |||||
<el-dialog | |||||
title="提示" | |||||
:visible.sync="dialogVisible" | |||||
width="40%" | |||||
:modal-append-to-body="false" | |||||
:before-close="handleClose" | |||||
> | |||||
<span>当前有欠缴账单未结清,是否要继续终止合同?</span> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="stopContract">确定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import StopContract from "../contractutil/stopcontract.vue"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import reportTool from "../../../core/tool/report.js"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { promissionUrl } from "../../../urlconfig/promission/url.js"; | |||||
import { ContractUrl } from "../businessComp/UrlEnum.js" | |||||
let echarts = require("echarts"); | |||||
export default { | |||||
inject: ["reload"], | |||||
name: "rentLeaselist", | |||||
components: { | |||||
TableList, | |||||
StopContract | |||||
}, | |||||
data() { | |||||
return { | |||||
processData:[], | |||||
waitSignCount: "", //待签约 | |||||
endSoonCount: "", //将到期合同 | |||||
dialogVisible: false, | |||||
rendPaidCount: "", //计租中合同 | |||||
shopcount: "", //空余商铺 | |||||
tk: "manjianTableKey", | |||||
st: "stopContract", | |||||
stopOptions: { | |||||
contractType: "1" | |||||
}, | |||||
applyStatusOptions:ContractData.applyStatus, | |||||
ruleForm: { | |||||
shopNumber: "", | |||||
merchantName: "", | |||||
status: "", | |||||
type: "", | |||||
applyStatus:"" | |||||
}, | |||||
options: ContractData.statusOptions, | |||||
types: [ | |||||
{ | |||||
value: "1", | |||||
label: "按租赁面积" | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "联营扣点" | |||||
}, | |||||
{ | |||||
value: 3, | |||||
label: "面积计租、联营取高" | |||||
} | |||||
], | |||||
optionsTable: { | |||||
actions: [ | |||||
{ | |||||
key: "edit", | |||||
val: "提交审批", | |||||
action: this.doApply, | |||||
show: item => { | |||||
return item.status == 1 | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "编辑", | |||||
action: this.aCount, | |||||
show: item => { | |||||
//合同状态 审批状态 | |||||
return item.status == 10 && (item.applyStatus == 3 || item.applyStatus == 5) | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "终止", | |||||
action: this.endcontract, | |||||
show: item => { | |||||
if ( | |||||
item.status == 2 || item.status == 3 | |||||
) { | |||||
return true; | |||||
} else { | |||||
return false; | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "查看", | |||||
action: this.goCheck, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "download", | |||||
val: "下载", | |||||
action: this.goDownload, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "审批进度", | |||||
action: this.checkCurrentStatus, | |||||
show: item => { | |||||
return item.applyStatus == 1 || | |||||
item.applyStatus == 2 || | |||||
item.applyStatus == 3 || | |||||
item.applyStatus == 5 | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "绑定商户", | |||||
action: this.goToEditShop, | |||||
show: item => { | |||||
return (item.applyStatus == 2||(item.applyStatus == 0 && !item.merchantId)) && item.propertyStatus == 1 &&item.status == 1 ? true : false; | |||||
} | |||||
} | |||||
], | |||||
showCk: false, | |||||
map: [ | |||||
{ | |||||
key: "contractNumber", | |||||
val: "合同编号" | |||||
}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号", | |||||
convert: this.changeShopNum, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "merchantName", | |||||
val: "商户名称" | |||||
}, | |||||
{ | |||||
key: "rentalStartDate", | |||||
val: "租赁开始日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentalEndDate", | |||||
val: "租赁结束日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentPrice", | |||||
val: "租金", | |||||
convert: this.divide, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "propertyPrice", | |||||
val: "物业费", | |||||
convert: this.divide02, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "type", | |||||
val: "计租方式", | |||||
convert: this.ctype | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "合同状态", | |||||
convert: this.cStatus | |||||
}, | |||||
{ | |||||
key: "applyStatus", | |||||
val: "审批状态", | |||||
convert: this.cApplyStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return ( | |||||
ContractUrl.rentPropertyContractList+"?merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&status=" + | |||||
this.ruleForm.status + | |||||
"&type=" + | |||||
this.ruleForm.type + | |||||
"&rentShopType=1&applyStatus=" + | |||||
this.ruleForm.applyStatus+ | |||||
"&operationType=2" | |||||
); | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.list, | |||||
count: data.data.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
doApply(item,row) { | |||||
console.log(item) | |||||
let params = { | |||||
remark: '', | |||||
id: item.id | |||||
} | |||||
this.postFetch("/api/wxRentContract/apply",params) | |||||
.then(d => { | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
changeShopNum(item, row) { | |||||
let rentInfo = JSON.parse(row.rentInfo); | |||||
let str = ""; | |||||
rentInfo.map((items, indexs) => { | |||||
str = str != "" ? str + " ," + items.shopNumber : items.shopNumber; | |||||
}); | |||||
return str; | |||||
}, | |||||
cApplyStatus(col, item) { | |||||
if (item.applyStatus) { | |||||
return ( | |||||
(item.businessType != 18 ? "签约" : "终止") + | |||||
ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0] | |||||
.name | |||||
); | |||||
} else if (item.applyStatus === 0) { | |||||
return "未提交审核"; | |||||
} | |||||
}, | |||||
goToEditShop(item) { | |||||
this.$router.push({ | |||||
path: "/merchant/merchantAdd?contractId=" + item.id | |||||
}); | |||||
}, | |||||
checkCurrentStatus(item, row) { | |||||
this.$router.push({ | |||||
path: "rentApprovals?id=" + item.id | |||||
}); | |||||
}, | |||||
cStatus(col, item) { | |||||
return CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.status.toString(); | |||||
})[0].name; | |||||
}, | |||||
divide(col, item) { | |||||
//aaa | |||||
if (item.busDiscountRatio != undefined && item.busDiscountTime != 0 && item.busDiscountRatio !='') { | |||||
return Number(item.rentPrice) / 100 +(item.busDiscountTime==1?'元/年':item.busDiscountTime==2?'元/月':'元/周期'); | |||||
} else { | |||||
return Number(item.rentPrice) / 100 +(item.rentPriceUnit==1?'元/日':item.rentPriceUnit==2?'元/月':'元/年'); | |||||
} | |||||
}, | |||||
divide02(col, item) { | |||||
return item.propertyPrice?Number(item.propertyPrice) / 100 +(item.propertyPriceUnit==1?'元/日':item.propertyPriceUnit==2?'元/月':'元/年'):'暂未设置'; | |||||
}, | |||||
ctype(col, item) { | |||||
if (item.type == 1) { | |||||
return "按租赁面积"; | |||||
} else if (item.type == 2) { | |||||
return "联营扣点"; | |||||
} else { | |||||
return "面积计租、联营取高"; | |||||
} | |||||
}, | |||||
aCount: function(item, row) { | |||||
if (item.merchantId) { | |||||
this.$router.push({ | |||||
path: "rentLeaseBulu?id=" + item.id | |||||
}); | |||||
} else { | |||||
this.$router.push({ | |||||
path: "rentLeaseEdit?id=" + item.id | |||||
}); | |||||
} | |||||
}, | |||||
goCheck: function(item, row) { | |||||
/** | |||||
contractType合同类型:1租金合同,2多经合同,3物业合同,4多经物业合同 | |||||
businessType操作类型:1合同审批,2账单审批,3终止合同审批 | |||||
id为合同id | |||||
*/ | |||||
this.$router.push({ | |||||
path: `rentLeaseCheck?id=${item.id}&contractType=5&businessType=1` | |||||
}); | |||||
}, | |||||
handleClose(done) { | |||||
this.$confirm("确认关闭?") | |||||
.then(_ => { | |||||
done(); | |||||
}) | |||||
.catch(_ => {}); | |||||
}, | |||||
endcontract: function(item, row) { | |||||
let that = this; | |||||
this.getFetch("/api/wxBillAll/oweBillCount?type=1&contractId=" + item.id) | |||||
.then(d => { | |||||
that.dialogVisible = true; | |||||
that.contractId = item.id; | |||||
if (Number(d.data) > 0) { | |||||
that.contractNumber = item.contractNumber; | |||||
} else { | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(item.id, item.contractNumber); | |||||
}else{ | |||||
this.makeSure(); | |||||
} | |||||
} | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
makeSure(){ | |||||
this.$confirm('您确定要提前终止此合同吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.endProperty(); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消删除' | |||||
}); | |||||
}); | |||||
}, | |||||
endProperty(){ | |||||
let _this=this; | |||||
let param={ | |||||
id:this.contractId, | |||||
endProperty:2 | |||||
} | |||||
this.postFetch(ContractUrl.endContract, param) | |||||
.then(d => { | |||||
_this.$message.success("操作成功"); | |||||
_this.dialogVisible = false; | |||||
_this.search(); | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
}, | |||||
stopContract() { | |||||
let _this=this; | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}else{ | |||||
this.endProperty(); | |||||
} | |||||
}, | |||||
goSave: function() { | |||||
this.$router.push({ | |||||
path: "/rentLeaseEdit" | |||||
}); | |||||
}, | |||||
goBulu: function() { | |||||
this.$router.push({ | |||||
path: "/rentLeaseBulu" | |||||
}); | |||||
}, | |||||
goRenew(){ | |||||
this.$router.push({ | |||||
path: "/rentLeaseEdit", | |||||
query:{ | |||||
Renew:true | |||||
} | |||||
}); | |||||
}, | |||||
goDownload: function(item) { | |||||
location.href = "/api/wxRentContract/exportContract?id=" + item.id; | |||||
}, | |||||
search: function() { | |||||
let tk = this.$refs[this.tk]; | |||||
tk.search(tk.getParams().index); | |||||
}, | |||||
/** | |||||
* 根据业务查询模板 | |||||
*/ | |||||
getModelBybusiness(){ | |||||
this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=18`) | |||||
.then(d=>{ | |||||
if(d.data.length>0){ | |||||
this.processData = JSON.parse(d.data[0].flow).lists; | |||||
} | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data); | |||||
}) | |||||
} | |||||
}, | |||||
activated(){ | |||||
this.search() | |||||
this.getModelBybusiness(); | |||||
this.setNavData(["合同管理", "店铺", "租金+物业合同"]); | |||||
}, | |||||
created() { | |||||
if (this.$route.query.status) { | |||||
this.ruleForm.status = this.$route.query.status.toString(); | |||||
}; | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
} | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width:60px; */ | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 80px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.el-form-item .el-form-item__content, | |||||
.el-form-item .el-form-item__content .el-date-editor, | |||||
.el-form-item .el-form-item__content .el-date-editor .el-input__inner { | |||||
width: 150px; | |||||
} | |||||
/* .fx_send .el-form-item__content .el-select { | |||||
width: 153px !important; | |||||
} */ | |||||
.fx_title .el-input { | |||||
width: 193px; | |||||
} | |||||
</style> |
@@ -0,0 +1,678 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<div class="shopBox" style="margin-bottom:20px;" v-if="fromAddTask != 'fromAddTask'"> | |||||
<rent-shop :rentInfoData='rentInfo' :merchentEditIf="merchentEditIf"></rent-shop> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">合同信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同编号:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.contractNumber}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同状态:</el-col> | |||||
<el-col :span="18" class="span-text">{{cStatus(wxRentContract.status)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同签约日:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.signDate)}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">乙方信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">商户名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.merchantName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同主体名称:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.subjectName}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">经营品牌:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBrand(wxRentContract.brand)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">业态:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeBusiness(wxRentContract.businessId)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">店面类型:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeShopType(wxRentContract.shopType)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">负责人:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPerson}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">联系电话:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.linkPhone}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">签约信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalStartDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">租赁截止日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.rentalEndDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">总租期:</el-col> | |||||
<el-col :span="18" class="span-text">{{totalPeriodMonth+'个月'+totalPeriodDay+"天"}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">装修期:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
class="span-text" | |||||
>{{wxRentContract.fixStartDate+' 至 '+wxRentContract.fixEndDate}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">计租开始日期:</el-col> | |||||
<el-col :span="18" class="span-text">{{changeDate(wxRentContract.startDate)}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">账单生成方式:</el-col> | |||||
<el-col :span="18" class="span-text">{{getAdjustPeriod}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title" v-if="contractType!=3&&contractType!=4">计租方式:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
class="span-text" | |||||
v-if="contractType!=3&&contractType!=4" | |||||
>{{changeType(wxRentContract.type)}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">费用明细</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col | |||||
:span="3" | |||||
v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" | |||||
class="span-title" | |||||
>保底营业额:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
v-if="wxRentContract.type==2&&contractType!=3&&contractType!=4" | |||||
class="span-text" | |||||
>{{wxRentContract.revenue/100+'元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col | |||||
:span="3" | |||||
v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4" | |||||
class="span-title" | |||||
>联营扣点:</el-col> | |||||
<el-col | |||||
:span="18" | |||||
v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4&& wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio==''" | |||||
class="span-text" | |||||
>{{wxRentContract.payRatio/100+'%'}}</el-col> | |||||
<!-- aaa --> | |||||
<el-col :span="18" v-if="wxRentContract.type!=1&&contractType!=3&&contractType!=4 && wxRentContract.busDiscountRatio!=undefined &&wxRentContract.busDiscountRatio!=''" class="span-text"> | |||||
<!-- aaa --> | |||||
<show-rate-list class="cur-rate-list"></show-rate-list> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">总面积:</el-col> | |||||
<el-col :span="18" class="span-text">{{getTotleArea+'㎡'+' ('+getAreaList+')'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==1"> | |||||
<el-col :span="3" class="span-title">租金单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{getRentPrice}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==1"> | |||||
<el-col :span="3" class="span-title">租金:</el-col> | |||||
<el-col v-if="wxRentContract.rentInputWay==2" :span="18" class="span-text">{{getTotlePrice+' ('+getPriceList+')'}}</el-col> | |||||
<el-col v-else :span="18" class="span-text">{{getTotlePrice}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==1"> | |||||
<el-col :span="3" class="span-title">押金:</el-col> | |||||
<el-col v-if="wxRentContract.rentInputWay==2" :span="18" class="span-text">{{getTotleDeposit+' ('+getDepositList+')'}}</el-col> | |||||
<el-col v-else :span="18" class="span-text">{{getTotleDeposit}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==3"> | |||||
<el-col :span="3" class="span-title">物业费单价:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.rentPrice/100+'㎡/元/'+this.priceUnitType}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==3"> | |||||
<el-col :span="3" class="span-title">物业费:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.price/100+'元/'+this.priceUnitType}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.type!=2&&contractType==3"> | |||||
<el-col :span="3" class="span-title">物业押金:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.deposit/100+'元'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">付款周期:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.receivePeriod+ ' 月'}}</el-col> | |||||
</el-row> | |||||
<el-row v-if="wxRentContract.latePayRatio"> | |||||
<el-col :span="3" class="span-title">滞纳金费率:</el-col> | |||||
<el-col :span="18" class="span-text">{{wxRentContract.latePayRatio+ '%'}}<span style="margin-left:30px;">{{'欠缴后 '+wxRentContract.latePayDay+' 日开始计费'}}</span></el-col> | |||||
</el-row> | |||||
<el-row | |||||
v-if="wxRentContract.type!=2&&rentInfo[0]&&rentInfo[0].adjustRatio.length>0&&contractType==1&&wxRentContract.rentInputWay==2" | |||||
> | |||||
<el-col :span="3" class="span-title">年租金调整:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<div v-for="(item,index) in rentInfo" :key="index">{{getAdjustRatio(item)}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row | |||||
v-if="(wxRentContract.type==2&&wxRentContract.adjustRatio&&wxRentContract.adjustRatio.length>0)||contractType==3||wxRentContract.rentInputWay==1" | |||||
> | |||||
<el-col :span="3" class="span-title">{{contractType!=3?'年租金调整:':'年物业费调整:'}}</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<div>{{getPricePer02(wxRentContract.adjustRatio)}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="3" class="span-title">合同账单:</el-col> | |||||
<el-col :span="18" class="span-text"> | |||||
<rent-bill :data="billData" :editIf="true" :ref="billTk"></rent-bill> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box" v-if="businessType==3"> | |||||
<div class="text-box-title" :style="{background:navigationInfo.moduleColor}">租赁信息</div> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<el-col :span="2" class="span-title">租赁费用:</el-col> | |||||
<el-col :span="6" class="span-text">{{Number(rentOweCount)>0?'有欠缴':'无欠缴'}}</el-col> | |||||
<el-col :span="2" class="span-title">物业费用:</el-col> | |||||
<el-col :span="6" class="span-text">{{Number(propertyOweCount)>0?'有欠缴':'无欠缴'}}</el-col> | |||||
<el-col :span="2" class="span-title">押金情况:</el-col> | |||||
<el-col :span="6" class="span-text">{{Number(depositOweCount)>0?'有欠缴':'无欠缴'}}</el-col> | |||||
</el-row> | |||||
<el-row> | |||||
<el-col :span="2" class="span-title">其他:</el-col> | |||||
<el-col :span="6" class="span-text">{{sRemark}}</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<div class="text-box"> | |||||
<!-- <div class="text-box-title" :style="{background:navigationInfo.moduleColor}">审批意见</div> --> | |||||
<div class="text-box-content"> | |||||
<el-row> | |||||
<!-- <label class="text" style="color:blue;" v-for="(item,index) in fileNames" :key="index" @click="download(index)"><u>{{item.name}}</u></label> --> | |||||
<el-col :span="3" class="span-title">合同附件:</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length<=0">无</el-col> | |||||
<el-col :span="6" class="span-text" style="color:blue;" v-if="fileNames.length>0"> | |||||
<div | |||||
class="download-file" | |||||
v-for="(item,index) in fileNames" | |||||
:key="index" | |||||
@click.stop.prevent="download(index)" | |||||
>{{item.name}}</div> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
<el-row style="margin:20px 0 0;text-align:center;"> | |||||
<el-button @click.stop.prevent="cancel">返回</el-button> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import commonUtil from "../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../core/tool/ajaxService"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import rentBill from "../contract/contractutil/rentbill.vue"; | |||||
import { ContractUrl } from "../contract/businessComp/UrlEnum.js"; | |||||
import { CouponCacheData } from "../../service/couponData/data.js"; | |||||
import { ContractData } from "../../service/contract/data.js"; | |||||
import rentShop from "./contractutil/rentshop.vue"; | |||||
import showRateList from './rent/showRateList.vue'; | |||||
import moment from "moment"; | |||||
export default { | |||||
extends: AjaxUtil, | |||||
name: "rentsCheck", | |||||
components: { | |||||
rentBill, | |||||
rentShop, | |||||
showRateList, | |||||
}, | |||||
data() { | |||||
return { | |||||
brands:[], | |||||
fromAddTask:"", | |||||
merchentEditIf: true, | |||||
priceUnitType: "", | |||||
priceUnitOption: ContractData.priceUnitOption, | |||||
contractType: 0, | |||||
totalPeriodMonth: 0, | |||||
totalPeriodDay: 0, | |||||
remark: "", | |||||
wxShops: "", | |||||
rentInfo: [], | |||||
billData: [], | |||||
fileNames: [], | |||||
billTk: "rentbill", | |||||
wxRentContract: "", | |||||
rentOweCount: "", | |||||
propertyOweCount: "", | |||||
businessType: "", | |||||
depositOweCount: "", | |||||
sRemark: "", | |||||
wxMerchant: "", | |||||
businessIds: [], | |||||
active: 0, | |||||
// 店铺类型 | |||||
shopTypes: ContractData.shopTypes, | |||||
//计租计算方式 | |||||
computedTypes: ContractData.computedTypes | |||||
}; | |||||
}, | |||||
//新增computed属性 | |||||
computed: { | |||||
...mapState({ | |||||
topNav: state => state.topNav.data, //将 this.topNav 映射为 this.$store.topNav.data | |||||
navigationInfo: state => state.topNav.navigationInfo, | |||||
formData: state => state.setRentInfo.formData, | |||||
}), | |||||
getRentPrice() { | |||||
let str = ""; | |||||
if(this.wxRentContract.rentInputWay==2){ | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != ""? str + ", " + item.shopNumber + "号铺:" + item.rentPrice + "㎡/元/"+this.priceUnitType: item.shopNumber + "号铺:" + item.rentPrice + "㎡/元/"+this.priceUnitType; | |||||
}); | |||||
}else{ | |||||
str = this.wxRentContract.rentPrice + "㎡/元/"+this.priceUnitType; | |||||
} | |||||
return str; | |||||
}, | |||||
getAdjustPeriod() { | |||||
return this.wxRentContract.adjustPeriod == 3 | |||||
? "按自然月生成" | |||||
: "按计租日期生成"; | |||||
}, | |||||
getTotleArea() { | |||||
this.rentArea = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.rentArea += Number(item.rentArea); | |||||
}); | |||||
return this.rentArea; | |||||
}, | |||||
getAreaList() { | |||||
let str = ""; | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != "" | |||||
? str + ", " + item.shopNumber + "号铺:" + item.rentArea + "㎡" | |||||
: item.shopNumber + "号铺:" + item.rentArea + "㎡"; | |||||
}); | |||||
return str; | |||||
}, | |||||
getTotlePrice() { | |||||
if(this.wxRentContract.rentInputWay==1){ | |||||
return Number(this.wxRentContract.price)/100 + "元/"+ this.priceUnitType; | |||||
}else{ | |||||
this.price = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.price += Number(item.price); }); | |||||
return this.price + "元/" + this.priceUnitType; | |||||
} | |||||
}, | |||||
getPriceList() { | |||||
let str = ""; | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != "" | |||||
? str + | |||||
", " + | |||||
item.shopNumber + | |||||
"号铺: " + | |||||
item.price + | |||||
"元/" + | |||||
this.priceUnitType | |||||
: item.shopNumber + | |||||
"号铺: " + | |||||
item.price + | |||||
"元/" + | |||||
this.priceUnitType; | |||||
}); | |||||
return str; | |||||
}, | |||||
getTotleDeposit() { | |||||
if(this.wxRentContract.rentInputWay==1){ | |||||
return Number(this.wxRentContract.deposit)/100 + "元"; | |||||
}else{ | |||||
this.deposit = 0; | |||||
this.rentInfo.map((item, index) => { | |||||
this.deposit += Number(item.deposit); | |||||
}); | |||||
return this.deposit + "元"; | |||||
} | |||||
}, | |||||
getDepositList() { | |||||
let str = ""; | |||||
this.rentInfo.map((item, index) => { | |||||
str = | |||||
str != "" | |||||
? str + ", " + item.shopNumber + "号铺: " + item.deposit + "元" | |||||
: item.shopNumber + "号铺: " + item.deposit + "元"; | |||||
}); | |||||
return str; | |||||
} | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData", | |||||
"setRentInfo", | |||||
"setFormData", | |||||
// 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
cStatus(item) { | |||||
return item!=undefined?CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.toString(); | |||||
})[0].name:''; | |||||
}, | |||||
getPricePer02(items, indexs) { | |||||
let str = ""; | |||||
if(this.wxRentContract.adjustRatioWay==1){ | |||||
items != undefined? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + ",第" + (index + 2) + "年上浮" + item + "%" | |||||
: str + "第" + (index + 2) + "年上浮" + item + "%"; | |||||
}): ""; | |||||
}else if(this.wxRentContract.adjustRatioWay==2){ | |||||
items != undefined? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + ",第" + (index + 2) + "年上浮" + item + "元/"+this.priceUnitType | |||||
: str + "第" + (index + 2) + "年上浮" + item + "元/"+this.priceUnitType; | |||||
}): ""; | |||||
}else{ | |||||
items != undefined? items.map((item, index) => { | |||||
str = | |||||
index != 0 | |||||
? str + ",第" + (index + 2) + "年" + item + "元/"+this.priceUnitType | |||||
: str + "第" + (index + 2) + "年" + item + "元/"+this.priceUnitType; | |||||
}): ""; | |||||
} | |||||
return str; | |||||
}, | |||||
getAdjustRatio(items) { | |||||
let str = items.shopNumber + "号铺: "; | |||||
if(this.wxRentContract.adjustRatioWay==1){ | |||||
items.adjustRatio.map((item, index) => { | |||||
str = str + "第" + (index + 2) + "年上浮" + item + "% "; | |||||
}); | |||||
}else{ | |||||
items.adjustRatio.map((item, index) => { | |||||
str = str + "第" + (index + 2) + "年上浮" + item + "元/"+this.priceUnitType; | |||||
}); | |||||
} | |||||
return str; | |||||
}, | |||||
changeBrand(brand){ | |||||
return this.brands.length>0&&brand!=undefined?this.brands.filter(e=>e.id==brand)[0].value:'' | |||||
}, | |||||
changeBusiness(businessId) { | |||||
return this.businessIds.length > 0 && businessId != undefined | |||||
? this.businessIds.filter(e => e.id == businessId)[0].title | |||||
: ""; | |||||
}, | |||||
changeShopType(id) { | |||||
return id != undefined | |||||
? this.shopTypes.filter(e => e.value == id)[0].label | |||||
: ""; | |||||
}, | |||||
changeDate(date) { | |||||
return moment(date).format("YYYY-MM-DD"); | |||||
}, | |||||
changeType(type) { | |||||
return type != undefined | |||||
? this.computedTypes.filter(e => e.value == type)[0].label | |||||
: ""; | |||||
}, | |||||
download: function(index) { | |||||
window.open(this.fileNames[index].url); | |||||
}, | |||||
cancel() { | |||||
this.$router.back(-1); | |||||
}, | |||||
getData() { | |||||
let _this = this; | |||||
this.contractType = this.$route.query.contractType; | |||||
if ( | |||||
this.$route.query.contractType == 3 || | |||||
this.$route.query.contractType == 4 | |||||
) { | |||||
this.getFetch( | |||||
"/api/wxPropertyContract/findById?id=" + this.$route.query.id | |||||
).then(d => { | |||||
_this.wxRentContract = d.data.wxPropertyContract; | |||||
_this.wxRentContract.fixStartDate = _this.wxRentContract.fixStartDate | |||||
? moment(_this.wxRentContract.fixStartDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
_this.wxRentContract.fixEndDate = _this.wxRentContract.fixEndDate | |||||
? moment(_this.wxRentContract.fixEndDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
this.priceUnitType = this.wxRentContract.priceUnit | |||||
? this.priceUnitOption.filter( | |||||
e => e.value == this.wxRentContract.priceUnit | |||||
)[0].name | |||||
: ""; | |||||
_this.totalPeriodMonth = d.data.totalPeriodMonth; | |||||
_this.totalPeriodDay = d.data.totalPeriodDay; | |||||
_this.rentInfo = JSON.parse(d.data.wxPropertyContract.rentInfo); | |||||
_this.fileNames = JSON.parse(d.data.wxPropertyContract.fileNames); | |||||
let adjustRatio = []; | |||||
JSON.parse(d.data.wxPropertyContract.adjustRatio).map( | |||||
(item, index) => { | |||||
let a = item / 100; | |||||
adjustRatio.push(a); | |||||
} | |||||
); | |||||
_this.wxRentContract.adjustRatio = adjustRatio; | |||||
if (_this.$route.query.businessType == 3) { | |||||
_this.rentOweCount = d.data.rentOweCount; | |||||
_this.propertyOweCount = d.data.propertyOweCount; | |||||
_this.depositOweCount = d.data.depositOweCount; | |||||
_this.sRemark = d.data.remark; | |||||
} | |||||
if (_this.businessType != 3) { | |||||
_this.$refs[_this.billTk].setData(d.data.previewBillRentList); | |||||
} | |||||
if (d.data.wxRentContract.busDiscountRatio == undefined || d.data.wxRentContract.busDiscountTime == undefined) { | |||||
d.data.wxRentContract.busDiscountRatio = ''; | |||||
d.data.wxRentContract.busDiscountTime = 1; | |||||
} | |||||
//aaa | |||||
let curObj = Object.assign({},this.formData); | |||||
curObj.busDiscountRatio = d.data.wxRentContract.busDiscountRatio; | |||||
curObj.busDiscountTime = d.data.wxRentContract.busDiscountTime; | |||||
curObj.payRatio = d.data.wxRentContract.payRatio; | |||||
this.setFormData(curObj); | |||||
}); | |||||
} else { | |||||
this.getFetch( | |||||
"/api/wxRentContract/findById?id=" + this.$route.query.id | |||||
).then(d => { | |||||
_this.wxRentContract = d.data.wxRentContract; | |||||
_this.wxRentContract.fixStartDate = _this.wxRentContract.fixStartDate | |||||
? moment(_this.wxRentContract.fixStartDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
_this.wxRentContract.fixEndDate = _this.wxRentContract.fixEndDate | |||||
? moment(_this.wxRentContract.fixEndDate).format("YYYY-MM-DD") | |||||
: ""; | |||||
this.priceUnitType = this.wxRentContract.priceUnit | |||||
? this.priceUnitOption.filter( | |||||
e => e.value == this.wxRentContract.priceUnit | |||||
)[0].name | |||||
: ""; | |||||
_this.totalPeriodMonth = d.data.totalPeriodMonth; | |||||
_this.totalPeriodDay = d.data.totalPeriodDay; | |||||
_this.rentInfo = JSON.parse(d.data.wxRentContract.rentInfo); | |||||
_this.fileNames = JSON.parse(d.data.wxRentContract.fileNames); | |||||
// _this.wxShops=d.data.wxShops[0] | |||||
if (_this.$route.query.businessType == 3) { | |||||
_this.rentOweCount = d.data.rentOweCount; | |||||
_this.propertyOweCount = d.data.propertyOweCount; | |||||
_this.depositOweCount = d.data.depositOweCount; | |||||
_this.sRemark = d.data.remark; | |||||
} | |||||
let adjustRatio = []; | |||||
JSON.parse(d.data.wxRentContract.adjustRatio).map((item, index) => { | |||||
let a = item / 100; | |||||
adjustRatio.push(a); | |||||
}); | |||||
_this.wxRentContract.adjustRatio = adjustRatio; | |||||
if (_this.businessType != 3) { | |||||
_this.$refs[_this.billTk].setData(d.data.previewBillRentList); | |||||
} | |||||
//aaa | |||||
let curObj = Object.assign({},this.formData); | |||||
curObj.busDiscountRatio = d.data.wxRentContract.busDiscountRatio; | |||||
curObj.busDiscountTime = d.data.wxRentContract.busDiscountTime; | |||||
curObj.payRatio = d.data.wxRentContract.payRatio; | |||||
this.setFormData(curObj); | |||||
console.log(_this.wxRentContract, _this.businessType, 333333333); | |||||
}); | |||||
} | |||||
} | |||||
}, | |||||
mounted: function() { | |||||
commonUtil.pvuv.setPVUV.apply(this, []); | |||||
}, | |||||
created() { | |||||
this.businessType = this.$route.query.businessType; | |||||
if(this.$route.query.contractType==1){ | |||||
this.setNavData(["合同管理", "店铺", "租金合同", "查看"]); | |||||
}else{ | |||||
this.setNavData(["合同管理", "店铺", "物业合同", "查看"]); | |||||
} | |||||
if(this.$route.query.flags){ | |||||
this.fromAddTask = this.$route.query.flags; | |||||
this.setNavData(["招商管理", "店铺", "租金合同", "查看"]); | |||||
} | |||||
this.getData(); | |||||
//获取品牌列表 | |||||
this.getFetch("/api/wxBrand/queryBrand") | |||||
.then(d => { | |||||
this.brands = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
this.getFetch(ContractUrl.businessList) | |||||
.then(d => { | |||||
this.businessIds = d.data; | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
} | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.text-box { | |||||
background: #fff; | |||||
margin-bottom: 20px; | |||||
} | |||||
.download-file { | |||||
cursor: pointer; | |||||
} | |||||
.text-box-title { | |||||
height: 42px; | |||||
line-height: 42px; | |||||
padding-left: 20px; | |||||
color: #fff; | |||||
font-weight: 400px; | |||||
font-size: 14px; | |||||
background: rgba(51, 153, 255, 1); | |||||
} | |||||
.text-box-content { | |||||
padding: 20px; | |||||
line-height: 36px; | |||||
font-size: 12px; | |||||
} | |||||
.span-title { | |||||
text-align: right; | |||||
padding-right: 15px; | |||||
} | |||||
.layout-content { | |||||
width: 100%; | |||||
height: auto; | |||||
min-height: 300px; | |||||
background: #141e29; | |||||
border-radius: 2px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
/* width: 200px; */ | |||||
} | |||||
/* .el-select{ | |||||
width:120px; | |||||
} */ | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
/* width: 60px; */ | |||||
border: none !important; | |||||
margin: 0 10px; | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 100px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.fx_send .el-form-item__content .el-select { | |||||
width: 120px !important; | |||||
} | |||||
.fx_title .el-input { | |||||
width: 150px; | |||||
} | |||||
.cur-rate-list /deep/ .rate-show-list li { | |||||
margin-top: 6px; | |||||
} | |||||
</style> |
@@ -0,0 +1,532 @@ | |||||
<template> | |||||
<div> | |||||
<div class="layout-content"> | |||||
<el-form | |||||
:inline="true" | |||||
:model="ruleForm" | |||||
ref="ruleForm" | |||||
class="demo-form-inline" | |||||
label-position="right" | |||||
> | |||||
<el-form-item label="商铺号" prop="name" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="商户名称" prop="merchantName" class="fx_title"> | |||||
<el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="合同状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in options" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.label" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="审批状态" class="fx_send"> | |||||
<el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method"> | |||||
<el-option | |||||
v-for="(item,index) in applyStatusOptions" | |||||
:key="index" | |||||
:value="item.value" | |||||
:label="item.name" | |||||
></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button | |||||
class="hoverBtn" | |||||
type="primary" | |||||
icon="el-icon-search" | |||||
:style="'border:0;background:'+navigationInfo.moduleColor" | |||||
@click="search" | |||||
></el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-button type="primary" class="builtBtn" @click="goSave"> | |||||
<i>+</i>新建 | |||||
</el-button> | |||||
<!-- <el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;"> | |||||
<i>+</i>续签 | |||||
</el-button> --> | |||||
<table-list :ref="tk" :options="optionsTable"></table-list> | |||||
<stop-contract :ref="st" :type='14' :processData="processData" :options="stopOptions"></stop-contract> | |||||
</div> | |||||
<el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :modal-append-to-body="false"> | |||||
<span>当前有欠缴账单未结清,是否要继续终止物业合同?</span> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="stopContract">确定</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import TableList from "../../../core/comps/table/tableList.vue"; | |||||
import reportTool from "../../../core/tool/report.js"; | |||||
import commonUtil from "../../../core/tool/commonUtil"; | |||||
import AjaxUtil from "../../../core/tool/ajaxService"; | |||||
import StopContract from "../contractutil/stopcontract.vue"; | |||||
import { mapState, mapActions } from "vuex"; | |||||
import { CouponCacheData } from "../../../service/couponData/data.js"; | |||||
import { ContractData } from "../../../service/contract/data.js"; | |||||
import { promissionUrl } from "../../../urlconfig/promission/url.js"; | |||||
import { ContractUrl } from "../businessComp/UrlEnum.js"; | |||||
let echarts = require("echarts"); | |||||
export default { | |||||
inject: ["reload"], | |||||
extends: AjaxUtil, | |||||
name: "tenementlist", | |||||
components: { | |||||
TableList, | |||||
StopContract | |||||
}, | |||||
data() { | |||||
return { | |||||
processData:[], | |||||
waitSignCount: "", //待签约 | |||||
endSoonCount: "", //将到期合同 | |||||
rendPaidCount: "", //计租中合同 | |||||
shopcount: "", //空余商铺 | |||||
tk: "manjianTableKey", | |||||
st: "stopContract", | |||||
stopOptions: { | |||||
contractType: "3", | |||||
stopType: 2 //物业合同 | |||||
}, | |||||
applyStatusOptions:ContractData.applyStatus, | |||||
ruleForm: { | |||||
shopNumber: "", | |||||
merchantName: "", | |||||
status:"", | |||||
applyStatus:'' | |||||
}, | |||||
options:ContractData.statusOptions, | |||||
dialogVisible: false, | |||||
optionsTable: { | |||||
actions: [ | |||||
{ | |||||
key: "edit", | |||||
val: "提交审批", | |||||
action: this.doApply, | |||||
show: item => { | |||||
return item.status == 1 | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "编辑", | |||||
action: this.goEdit, | |||||
show: item => { | |||||
return item.status == 10 && (item.applyStatus == 3 || item.applyStatus == 5) | |||||
? true | |||||
: false; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "终止", | |||||
action: this.endcontract, | |||||
// show: this.isendcontract(item), | |||||
show: item => { | |||||
if ( | |||||
item.status == 2 || item.status == 3 | |||||
) { | |||||
return true; | |||||
} else { | |||||
return false; | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "查看", | |||||
action: this.goCheck, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "download", | |||||
val: "下载", | |||||
action: this.goDownload, | |||||
show: item => { | |||||
return true; | |||||
} | |||||
}, | |||||
{ | |||||
key: "edit", | |||||
val: "审批进度", | |||||
action: this.checkCurrentStatus, | |||||
show: item => { | |||||
return item.applyStatus == 1 || | |||||
item.applyStatus == 2 || | |||||
item.applyStatus == 3 || | |||||
item.applyStatus == 5 | |||||
? true | |||||
: false; | |||||
} | |||||
} | |||||
], | |||||
showCk: false, | |||||
map: [ | |||||
{ | |||||
key: "contractNumber", | |||||
val: "合同编号" | |||||
}, | |||||
{ | |||||
key: "shopNumber", | |||||
val: "商铺号", | |||||
convert: this.changeShopNum, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "merchantName", | |||||
val: "商户名称" | |||||
}, | |||||
{ | |||||
key: "rentalStartDate", | |||||
val: "租赁开始日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "rentalEndDate", | |||||
val: "租赁结束日期", | |||||
type: "date", | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "price", | |||||
val: "物业费", | |||||
convert: this.divide, | |||||
sortable:true | |||||
}, | |||||
{ | |||||
key: "status", | |||||
val: "合同状态", | |||||
convert: this.cStatus | |||||
}, | |||||
{ | |||||
key: "applyStatus", | |||||
val: "审批状态", | |||||
convert: this.cApplyStatus | |||||
} | |||||
], | |||||
getUrl: () => { | |||||
return ( | |||||
"/api/wxPropertyContract/list?merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&rentShopType=1&applyStatus=" + | |||||
this.ruleForm.applyStatus + | |||||
"&status=" + | |||||
this.ruleForm.status+ | |||||
"&operationType=1" | |||||
); | |||||
}, | |||||
pageOption: { | |||||
sizeKey: "pageSize", | |||||
indexKey: "pageNum", | |||||
index: 1, | |||||
size: 10 | |||||
}, | |||||
analysis: data => { | |||||
return { | |||||
data: data.data.pageInfo.list, | |||||
count: data.data.pageInfo.total | |||||
}; | |||||
} | |||||
} | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState({ | |||||
navigationInfo: state => state.topNav.navigationInfo | |||||
}) | |||||
}, | |||||
methods: { | |||||
...mapActions([ | |||||
"setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData') | |||||
]), | |||||
doApply(item,row) { | |||||
console.log(item) | |||||
let params = { | |||||
remark: '', | |||||
id: item.id | |||||
} | |||||
this.postFetch("/api/wxRentContract/apply",params) | |||||
.then(d => { | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
changeShopNum(item, row) { | |||||
let rentInfo = row.rentInfo?JSON.parse(row.rentInfo):[]; | |||||
let str = ""; | |||||
rentInfo.map((items, indexs) => { | |||||
str = str != "" ? str + " ," + items.shopNumber : items.shopNumber; | |||||
}); | |||||
return str; | |||||
}, | |||||
cApplyStatus(col, item) { | |||||
if (item.applyStatus) { | |||||
return ( | |||||
(item.businessType != 14 ? "签约" : "终止") + | |||||
ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0] | |||||
.name | |||||
); | |||||
} else if (item.applyStatus === 0) { | |||||
return "未提交审核"; | |||||
} | |||||
}, | |||||
checkCurrentStatus(item, row) { | |||||
this.$router.push({ | |||||
path: "rentApprovals?id=" + item.id | |||||
}); | |||||
}, | |||||
cStatus(col, item) { | |||||
return CouponCacheData.rentStatus.filter(e => { | |||||
return e.value == item.status.toString(); | |||||
})[0].name; | |||||
}, | |||||
goEdit: function(item, row) { | |||||
this.$router.push({ | |||||
path: "tenementAdd?id=" + item.id | |||||
}); | |||||
}, | |||||
divide(col, item) { | |||||
return Number(item.price) / 100 +(item.price_unit==1?'元/日':item.price_unit==2?'元/月':'元/年'); | |||||
}, | |||||
endcontract: function(item, row) { | |||||
let that = this; | |||||
that.contractId = item.id; | |||||
that.contractNumber = item.contractNumber; | |||||
this.getFetch("/api/wxBillAll/oweBillCount?type=2&contractId=" + item.id) | |||||
.then(d => { | |||||
if (Number(d.data) > 0) { | |||||
that.dialogVisible = true; | |||||
} else { | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}else{ | |||||
this.makeSure(); | |||||
} | |||||
} | |||||
}) | |||||
.catch(err => { | |||||
this.$message.success(err.data); | |||||
}); | |||||
}, | |||||
stopContract() { | |||||
// this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
if(this.processData.length>0){ | |||||
this.dialogVisible = false; | |||||
this.$refs[this.st].showLog(this.contractId, this.contractNumber); | |||||
}else{ | |||||
this.endProperty(); | |||||
} | |||||
}, | |||||
makeSure(){ | |||||
this.$confirm('您确定要提前终止此合同吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.endProperty(); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消删除' | |||||
}); | |||||
}); | |||||
}, | |||||
endProperty(){ | |||||
let _this=this; | |||||
let param={ | |||||
id:this.contractId | |||||
} | |||||
this.postFetch(ContractUrl.endPropertyContract, param) | |||||
.then(d => { | |||||
_this.$message.success("操作成功"); | |||||
_this.dialogVisible = false; | |||||
_this.search(); | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
}, | |||||
goSave: function() { | |||||
this.$router.push({ | |||||
path: "/tenementAdd" | |||||
}); | |||||
}, | |||||
goRenew(){ | |||||
this.$router.push({ | |||||
path: "/tenementAdd", | |||||
query:{ | |||||
Renew:true | |||||
} | |||||
}); | |||||
}, | |||||
goCheck: function(item, row) { | |||||
/** | |||||
contractType合同类型:1租金合同,2多经合同,3物业合同,4多经物业合同 | |||||
businessType操作类型:1合同审批,2账单审批,3终止合同审批 | |||||
id为合同id | |||||
*/ | |||||
this.$router.push({ | |||||
path: `rentsCheck?id=${item.id}&contractType=3&businessType=1` | |||||
}); | |||||
}, | |||||
getcount: function() { | |||||
this.getFetch( | |||||
"/api/wxPropertyContract/list?pageNum=1&pageSize=10&shopNumber=" + | |||||
this.ruleForm.shopNumber + | |||||
"&merchantName=" + | |||||
this.ruleForm.merchantName + | |||||
"&rentShopType=1" | |||||
) | |||||
.then(d => { | |||||
this.waitSignCount = d.data.rentContractStatusInfo.waitSignCount; | |||||
this.endSoonCount = d.data.rentContractStatusInfo.endSoonCount; | |||||
this.rendPaidCount = d.data.rentContractStatusInfo.rendPaidCount; | |||||
this.shopcount = | |||||
d.data.rentContractStatusInfo.shopCountInfo.unrentedCount; //空余商铺 | |||||
let allRentCount = | |||||
Number(d.data.rentContractStatusInfo.allCount) == 0 | |||||
? 100 | |||||
: Number(d.data.rentContractStatusInfo.allCount); //合同总数 | |||||
let allShopCount = | |||||
Number(d.data.rentContractStatusInfo.shopCountInfo.allCount) == 0 | |||||
? 100 | |||||
: Number(d.data.rentContractStatusInfo.shopCountInfo.allCount); //商铺总数 | |||||
let value_spare = Number(this.shopcount) || 0; | |||||
let myChart_spare = echarts.init(document.getElementById("spare")); | |||||
myChart_spare.setOption( | |||||
reportTool.myPie("空余商铺", "#5976BF", value_spare, allShopCount) | |||||
); | |||||
let value_signed = Number(this.waitSignCount) || 0; | |||||
let myChart_signed = echarts.init(document.getElementById("signed")); | |||||
myChart_signed.setOption( | |||||
reportTool.myPie("待签约", "#C85963", value_signed, allRentCount) | |||||
); | |||||
let value_expire = Number(this.endSoonCount) || 0; | |||||
let myChart_expire = echarts.init(document.getElementById("expire")); | |||||
myChart_expire.setOption( | |||||
reportTool.myPie("将到期", "#EE7653", value_expire, allRentCount) | |||||
); | |||||
let value_planning = Number(this.rendPaidCount) || 0; | |||||
let myChart_planning = echarts.init( | |||||
document.getElementById("planning") | |||||
); | |||||
myChart_planning.setOption( | |||||
reportTool.myPie("计租中", "#3FC496", value_planning, allRentCount) | |||||
); | |||||
}) | |||||
.catch(err => { | |||||
this.$message.error(err.data); | |||||
}); | |||||
}, | |||||
search: function() { | |||||
let tk = this.$refs[this.tk]; | |||||
tk.search(tk.getParams().index); | |||||
}, | |||||
goDownload: function(item) { | |||||
location.href = | |||||
"/api/wxRentContract/exportContract?id=" + item.rentContractId; | |||||
}, | |||||
/** | |||||
* 根据业务查询模板 | |||||
*/ | |||||
getModelBybusiness(){ | |||||
this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=14`) | |||||
.then(d=>{ | |||||
if(d.data.length>0){ | |||||
this.processData = JSON.parse(d.data[0].flow).lists; | |||||
} | |||||
}) | |||||
.catch(err=>{ | |||||
this.$message.error(err.data); | |||||
}) | |||||
} | |||||
}, | |||||
created(){ | |||||
this.setNavData(["合同管理", "店铺", "物业合同"]); | |||||
}, | |||||
activated(){ | |||||
this.search() | |||||
// this.getcount(); | |||||
this.getModelBybusiness(); | |||||
this.setNavData(["合同管理", "店铺", "物业合同"]); | |||||
} | |||||
}; | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
.layout-content { | |||||
width: 100%; | |||||
background: #141e29; | |||||
height: auto; | |||||
border-radius: 2px; | |||||
min-height: 300px; | |||||
padding: 0 20px 20px 20px; | |||||
overflow: hidden; | |||||
text-align: left; | |||||
} | |||||
.el-form { | |||||
background: #f5f7f8; | |||||
text-align: left; | |||||
padding: 25px 22px 22px; | |||||
margin-bottom: 20px !important; | |||||
} | |||||
.el-form .el-form-item { | |||||
margin-bottom: 0 !important; | |||||
} | |||||
.tableContainer { | |||||
margin-top: 20px !important; | |||||
background: #fff; | |||||
} | |||||
.el-button { | |||||
width: 60px; | |||||
height: 40px; | |||||
} | |||||
.builtBtn { | |||||
width: 100px; | |||||
height: 32px; | |||||
background: rgba(81, 169, 201, 1); | |||||
border: 0 !important; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
margin: 0; | |||||
padding: 0 !important; | |||||
} | |||||
.builtBtn:hover { | |||||
background: rgba(81, 169, 201, 0.88); | |||||
} | |||||
.builtBtn i { | |||||
margin-right: 10px; | |||||
} | |||||
.el-form-item .el-form-item__content, | |||||
.el-form-item .el-form-item__content .el-date-editor, | |||||
.el-form-item .el-form-item__content .el-date-editor .el-input__inner { | |||||
width: 150px; | |||||
} | |||||
.fx_title .el-input { | |||||
width: 193px; | |||||
} | |||||
</style> |