@@ -2,3 +2,4 @@ | |||
/ext.json | |||
/project.config.json | |||
/.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> |