|
@@ -1,83 +1,44 @@
|
|
|
<template>
|
|
|
- <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
|
|
|
- <div class="formContent-item_title">合同信息</div>
|
|
|
- <el-col :span="12"
|
|
|
- ><el-form-item label="合同编号" prop="contractNo" required>
|
|
|
- <el-input v-model="formData.contractNo" disabled placeholder="请输入合同编号"></el-input> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="合同类型" prop="contractType" required>
|
|
|
- <el-radio v-model="formData.contractType" :label="0">租赁合同</el-radio></el-form-item
|
|
|
- ></el-col
|
|
|
- >
|
|
|
- <div class="formContent-item_title">客户信息</div>
|
|
|
- <el-col :span="24"
|
|
|
- ><el-form-item label="客户类型" required>
|
|
|
- <el-radio v-model="formData.customerType" :label="1">企业</el-radio>
|
|
|
- <el-radio v-model="formData.customerType" :label="2">个人</el-radio>
|
|
|
-
|
|
|
- <el-button type="primary" v-if="formData.customerType == 1" @click="relation">关联企业</el-button>
|
|
|
- </el-form-item></el-col
|
|
|
- >
|
|
|
- <template v-if="formData.customerType == 2">
|
|
|
- <el-col :span="8"
|
|
|
- ><el-form-item label="客户名称" prop="customerName">
|
|
|
- <el-input v-model="formData.customerName" placeholder="请输入客户名称"></el-input> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <el-col :span="8"
|
|
|
- ><el-form-item label="客户手机" prop="customerPhone">
|
|
|
- <el-input v-model="formData.customerPhone" placeholder="请输入客户手机"></el-input> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <el-col :span="8"
|
|
|
- ><el-form-item label="联系地址" prop="customerAddress">
|
|
|
- <el-input v-model="formData.customerAddress" placeholder="请输入联系地址"></el-input> </el-form-item
|
|
|
- ></el-col>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div class="formContent-item_title">物业信息</div>
|
|
|
- <el-col :span="8"
|
|
|
- ><el-form-item label="所属社区" prop="communityId">
|
|
|
- <el-select v-model="formData.communityId" placeholder="请选择所属社区" clearable>
|
|
|
- <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
|
|
|
- </el-select> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <zz-table :cols="cols" :settings="{ stripe: true }" :data="mixins_list"></zz-table>
|
|
|
- <div class="formContent-item_title">合同周期</div>
|
|
|
- <el-col :span="12"
|
|
|
- ><el-form-item label="合同时间" prop="startTime">
|
|
|
- <el-date-picker
|
|
|
- v-model="times"
|
|
|
- class="timeWidth"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- @change="effectiveDateToggle"
|
|
|
- :editable="false"
|
|
|
- ></el-date-picker> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <el-col :span="12"
|
|
|
- ><el-form-item label="签订时间" prop="signTime">
|
|
|
- <el-date-picker
|
|
|
- v-model="formData.signTime"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- type="date"
|
|
|
- range-separator="至"
|
|
|
- placeholder="选择日期"
|
|
|
- :editable="false"
|
|
|
- ></el-date-picker> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <div class="formContent-item_title">合同附件</div>
|
|
|
- <el-form-item label="合同附件"> <bz-upload type="img" :uploadArr="pictureArr" :limit="1"></bz-upload> </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div>
|
|
|
+ <el-form ref="form" :model="formData" :rules="formRules" label-width="90px"></el-form>
|
|
|
+ <div class="steps">
|
|
|
+ <div class="steps-item active">
|
|
|
+ <div class="circularText"><span>1</span></div>
|
|
|
+ <div>基本信息</div>
|
|
|
+ <div class="steps-item-line" :class="showIndex > 0 ? 'active' : ''"></div>
|
|
|
+ </div>
|
|
|
+ <div class="steps-item" :class="showIndex > 0 ? 'active' : ''">
|
|
|
+ <div class="circularText"><span>2</span></div>
|
|
|
+ <div>金额条款</div>
|
|
|
+ <div class="steps-item-line" :class="showIndex > 1 ? 'active' : ''"></div>
|
|
|
+ </div>
|
|
|
+ <div class="steps-item" :class="showIndex > 1 ? 'active' : ''">
|
|
|
+ <div class="circularText"><span>3</span></div>
|
|
|
+ <div>收款计划</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <first-step v-if="showIndex == 0" ref="firststepRef"></first-step>
|
|
|
+ <step-two ref="steptwoRef" v-else-if="showIndex == 1"></step-two>
|
|
|
+ <last-step v-else></last-step>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script >
|
|
|
+import firstStep from './firstStep.vue';
|
|
|
+import stepTwo from './stepTwo.vue';
|
|
|
+import lastStep from './lastStep.vue';
|
|
|
+
|
|
|
export default {
|
|
|
props: ['params'],
|
|
|
+ components: {
|
|
|
+ firstStep,
|
|
|
+ stepTwo,
|
|
|
+ lastStep
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ showIndex: 0,
|
|
|
formData: {
|
|
|
+ contractNo: '662816181',
|
|
|
filePath: '',
|
|
|
contractType: 0,
|
|
|
customerType: 1,
|
|
@@ -87,10 +48,23 @@ export default {
|
|
|
endTime: '',
|
|
|
customerName: '',
|
|
|
customerPhone: '',
|
|
|
- customerAddress: ''
|
|
|
+ customerAddress: '',
|
|
|
+ contractHouseDtoList: []
|
|
|
+ },
|
|
|
+
|
|
|
+ //租赁规则
|
|
|
+ rules: {
|
|
|
+ ruleId: '',
|
|
|
+ enable: 1,
|
|
|
+ earnestMoney: '',
|
|
|
+ freeTime: ''
|
|
|
},
|
|
|
+ contractPlanDtos: [],
|
|
|
+ chargeCycle: '',
|
|
|
times: [],
|
|
|
+ timesTwo: [],
|
|
|
pictureArr: [],
|
|
|
+ relationTable: {},
|
|
|
formRules: {
|
|
|
customerName: [this.$valid.inputRequired('客户名称')],
|
|
|
customerPhone: [this.$valid.inputRequired('客户手机')],
|
|
@@ -109,53 +83,25 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ //多选
|
|
|
+ idsObj: [],
|
|
|
+ //社区
|
|
|
communityArr: [],
|
|
|
- cols: [
|
|
|
- {
|
|
|
- label: '所属社区',
|
|
|
- prop: 'contractNo'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '楼栋',
|
|
|
- prop: 'customerName'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '单元',
|
|
|
- prop: 'customerType',
|
|
|
- format(val) {
|
|
|
- if (val == 1) {
|
|
|
- return '企业';
|
|
|
- } else if (val == 2) {
|
|
|
- return '个人';
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '楼层',
|
|
|
- prop: 'contractType'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '房间号',
|
|
|
- prop: 'houseName'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '房屋类型',
|
|
|
- prop: 'contractStatus',
|
|
|
- format(val) {
|
|
|
- if (val == 0) {
|
|
|
- return '已签约';
|
|
|
- } else if (val == 1) {
|
|
|
- return '已签约';
|
|
|
- } else if (val == 2) {
|
|
|
- return '到期';
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '建筑面积',
|
|
|
- prop: 'startTime'
|
|
|
- }
|
|
|
- ]
|
|
|
+ //社区树
|
|
|
+ communityTree: [],
|
|
|
+ //楼栋树
|
|
|
+ communityTreeArr: [],
|
|
|
+ //楼栋ids
|
|
|
+ communityTreeIds: [],
|
|
|
+ tableArr: [],
|
|
|
+ defaultProps: {
|
|
|
+ multiple: true,
|
|
|
+ emitPath: false,
|
|
|
+ value: 'value', // 唯一标识
|
|
|
+ label: 'name', // 标签显示
|
|
|
+ children: 'children' // 子级
|
|
|
+ },
|
|
|
+ loadings: false
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
@@ -164,13 +110,54 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ findTreeIds(va) {
|
|
|
+ this.tableArr = [];
|
|
|
+ va.map((item, index) => {
|
|
|
+ this.getfindTreeIds(item);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getfindTreeIds(id) {
|
|
|
+ this.loadings = true;
|
|
|
+ this.$http
|
|
|
+ .post('/sc-community/assets/house/page', {
|
|
|
+ id: id,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1
|
|
|
+ })
|
|
|
+ .then(({ data, status, msg }) => {
|
|
|
+ if (0 === status) {
|
|
|
+ this.tableArr.push(data.list[0]);
|
|
|
+ this.loadings = false;
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ communityChange(val) {
|
|
|
+ this.communityTree.map((item) => {
|
|
|
+ if (item.id == val) {
|
|
|
+ this.communityTreeArr = item.children;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
submit() {
|
|
|
+ let installData = this.formData;
|
|
|
+
|
|
|
+ let installObj = JSON.parse(JSON.stringify(this.idsObj));
|
|
|
+ installObj.map((item, index) => {
|
|
|
+ delete item.thisArr;
|
|
|
+ delete item.timesTwo;
|
|
|
+ delete item.increasingYear;
|
|
|
+ delete item.increasingPercentage;
|
|
|
+ });
|
|
|
+ installData.contractHouseDtoList = installObj;
|
|
|
+
|
|
|
this.$refs.form.validate((valid) => {
|
|
|
if (valid) {
|
|
|
var loading = this.$loading();
|
|
|
- let installData = this.formData;
|
|
|
this.$http
|
|
|
- .post(`/sc-community/enterprise/${this.params.todo == 'add' ? 'add' : 'edit'}`, installData)
|
|
|
+ .post(`/sc-community/contract/${this.params.todo == 'add' ? 'add' : 'edit'}`, installData)
|
|
|
.then(({ status, msg }) => {
|
|
|
if (status == 0) {
|
|
|
this.$message.success(msg);
|
|
@@ -211,20 +198,69 @@ export default {
|
|
|
this.$store.dispatch('addPopup', {
|
|
|
url: '/businessManagement/enterpriseManagement/index.vue',
|
|
|
width: '850px',
|
|
|
- height: '600px',
|
|
|
+ height: '400px',
|
|
|
props: {
|
|
|
callback: resolve
|
|
|
},
|
|
|
+ hideStar: true,
|
|
|
title: '关联企业'
|
|
|
});
|
|
|
}).then((res) => {
|
|
|
- debugger;
|
|
|
+ this.relationTable = res;
|
|
|
});
|
|
|
+ },
|
|
|
+ nextStep() {
|
|
|
+ // 0 取消 下一步 ,1 取消 上一步 下一步 ,2 确认 取消 上一步
|
|
|
+ if (this.$store.getters['getPopups'][0].showIndex == 0) {
|
|
|
+ this.$refs.firststepRef.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$store.getters['getPopups'][0].showIndex++;
|
|
|
+ this.showIndex++;
|
|
|
+ this.$store.getters['getPopups'][0].nextStepButton = false;
|
|
|
+ this.$store.getters['getPopups'][0].previousStepButton = true;
|
|
|
+ this.$store.getters['getPopups'][0].showConfirmButton = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (this.$store.getters['getPopups'][0].showIndex == 1) {
|
|
|
+ this.$store.getters['getPopups'][0].showIndex++;
|
|
|
+ this.showIndex++;
|
|
|
+ this.$refs.steptwoRef.getList();
|
|
|
+ // 第二流程 下一步
|
|
|
+ this.$store.getters['getPopups'][0].nextStepButton = false;
|
|
|
+ this.$store.getters['getPopups'][0].showConfirmButton = false;
|
|
|
+ this.$store.getters['getPopups'][0].previousStepButton = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // if (this.$store.getters['getPopups'][0].showIndex == 1) {
|
|
|
+ // this.$store.getters['getPopups'][0].nextStepButton = true;
|
|
|
+ // this.$store.getters['getPopups'][0].previousStepButton = true;
|
|
|
+ // this.$store.getters['getPopups'][0].showConfirmButton = true;
|
|
|
+ // } else if (this.$store.getters['getPopups'][0].showIndex == 2) {
|
|
|
+ // this.$refs.steptwoRef.getList();
|
|
|
+ // // 第二流程 下一步
|
|
|
+ // this.$store.getters['getPopups'][0].nextStepButton = false;
|
|
|
+ // this.$store.getters['getPopups'][0].showConfirmButton = false;
|
|
|
+ // this.$store.getters['getPopups'][0].previousStepButton = true;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ previousStep() {
|
|
|
+ this.$store.getters['getPopups'][0].showIndex--;
|
|
|
+ this.showIndex--;
|
|
|
+ if (this.$store.getters['getPopups'][0].showIndex == 0) {
|
|
|
+ this.$store.getters['getPopups'][0].nextStepButton = true;
|
|
|
+ this.$store.getters['getPopups'][0].previousStepButton = false;
|
|
|
+ this.$store.getters['getPopups'][0].showConfirmButton = true;
|
|
|
+ } else if (this.$store.getters['getPopups'][0].showIndex == 1) {
|
|
|
+ this.$store.getters['getPopups'][0].nextStepButton = true;
|
|
|
+ this.$store.getters['getPopups'][0].previousStepButton = true;
|
|
|
+ this.$store.getters['getPopups'][0].showConfirmButton = true;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- const { todo, data, communityArr } = this.params;
|
|
|
+ const { todo, data, communityArr, communityTree } = this.params;
|
|
|
this.communityArr = communityArr;
|
|
|
+ this.communityTree = communityTree;
|
|
|
if (todo !== 'add') {
|
|
|
this.findDetali(data.id);
|
|
|
}
|
|
@@ -238,6 +274,9 @@ export default {
|
|
|
.timeWidth {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+.mrbt20 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
/deep/ .el-date-editor .el-range-separator {
|
|
|
padding: 0;
|
|
|
}
|
|
@@ -245,4 +284,61 @@ export default {
|
|
|
/deep/ .el-input__inner {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+.steps {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #dbdbdb;
|
|
|
+ .steps-item {
|
|
|
+ display: flex;
|
|
|
+ line-height: 36px;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ .circularText {
|
|
|
+ height: 36px;
|
|
|
+ width: 36px;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ color: #dbdbdb;
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ background: #f8fcff;
|
|
|
+ height: 28px;
|
|
|
+ width: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .steps-item-line {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 50%;
|
|
|
+ width: 200px;
|
|
|
+ height: 2px;
|
|
|
+ background: #f8fcff;
|
|
|
+ border-radius: 2px;
|
|
|
+ &.active {
|
|
|
+ background: #0eaeff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #424656;
|
|
|
+ .circularText {
|
|
|
+ background: #b5e6ff;
|
|
|
+ color: white;
|
|
|
+ span {
|
|
|
+ background: #0eaeff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|