|
- <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>
|