|
@@ -1,154 +1,163 @@
|
|
|
<template>
|
|
|
- <el-form ref="form" :model="formData" :rules="formRules" label-width="110px">
|
|
|
- <div class="formContent-item_title">合同信息</div>
|
|
|
- <el-col :span="12"
|
|
|
- ><el-form-item label="合同编号" prop="name">
|
|
|
- <el-input v-model="formData.name" disabled placeholder="请输入合同编号"></el-input> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="合同类型" prop="abbreviate">
|
|
|
- <el-radio v-model="formData.contactGender" :label="1">租赁合同</el-radio></el-form-item
|
|
|
- ></el-col
|
|
|
- >
|
|
|
- <div class="formContent-item_title">客户信息</div>
|
|
|
- <el-col :span="24"
|
|
|
- ><el-form-item label="客户类型" prop="name">
|
|
|
- <el-radio v-model="formData.contactGender" :label="1">企业</el-radio>
|
|
|
- <el-radio v-model="formData.contactGender" :label="2">个人</el-radio>
|
|
|
- </el-form-item></el-col
|
|
|
- >
|
|
|
- <div class="formContent-item_title">物业信息</div>
|
|
|
- <el-col :span="8"
|
|
|
- ><el-form-item label="所属社区" prop="name">
|
|
|
- <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="name">
|
|
|
- <el-date-picker
|
|
|
- v-model="times"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- 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="name">
|
|
|
- <el-date-picker
|
|
|
- v-model="times"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- type="date"
|
|
|
- range-separator="至"
|
|
|
- placeholder="选择日期"
|
|
|
- @change="effectiveDateToggle"
|
|
|
- :editable="false"
|
|
|
- ></el-date-picker> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <div class="formContent-item_title">合同附件</div>
|
|
|
- </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: {
|
|
|
- name: '',
|
|
|
- abbreviate: '',
|
|
|
- creditCode: '',
|
|
|
- industry: '',
|
|
|
- economicType: '',
|
|
|
- legalPerson: '',
|
|
|
- legalPersonPhone: '',
|
|
|
- address: '',
|
|
|
- businessLicense: '',
|
|
|
- contactName: '',
|
|
|
- contactPhone: '',
|
|
|
- contactIdCard: '',
|
|
|
- contactGender: 1
|
|
|
+ contractNo: '',
|
|
|
+ filePath: '',
|
|
|
+ contractType: 0,
|
|
|
+ customerType: null,
|
|
|
+ communityId: '',
|
|
|
+ signTime: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ customerName: '',
|
|
|
+ customerPhone: '',
|
|
|
+ customerAddress: '',
|
|
|
+ contractHouseDtoList: []
|
|
|
+ },
|
|
|
+
|
|
|
+ //租赁规则
|
|
|
+ rules: {
|
|
|
+ ruleId: '',
|
|
|
+ enable: 1,
|
|
|
+ earnestMoney: '',
|
|
|
+ freeTime: ''
|
|
|
},
|
|
|
+ contractPlanDtos: [],
|
|
|
+ chargeCycle: '',
|
|
|
+ times: [],
|
|
|
+ timesTwo: [],
|
|
|
pictureArr: [],
|
|
|
+ relationTable: {},
|
|
|
formRules: {
|
|
|
- name: [this.$valid.inputRequired('企业名称')],
|
|
|
- abbreviate: [this.$valid.inputRequired('企业简称')],
|
|
|
- creditCode: [this.$valid.inputRequired('信用代码')],
|
|
|
- industry: [this.$valid.selectRequired('所属行业')],
|
|
|
- economicType: [this.$valid.selectRequired('经济类型')],
|
|
|
- legalPerson: [this.$valid.inputRequired('企业法人')],
|
|
|
- legalPersonPhone: [this.$valid.patternPhone('法人手机')],
|
|
|
- contactName: [this.$valid.inputRequired('联系人姓名')],
|
|
|
- contactPhone: [this.$valid.patternPhone('联系人手机')],
|
|
|
- contactIdCard: [this.$valid.inputRequired('联系人身份证')]
|
|
|
- },
|
|
|
- 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 '到期';
|
|
|
+ customerName: [this.$valid.inputRequired('客户名称')],
|
|
|
+ customerPhone: [this.$valid.inputRequired('客户手机')],
|
|
|
+ customerAddress: [this.$valid.inputRequired('联系地址')],
|
|
|
+ communityId: [this.$valid.selectRequired('社区')],
|
|
|
+ signTime: [this.$valid.selectRequired('签订时间')],
|
|
|
+ startTime: this.$valid.custome({
|
|
|
+ validator(rule, value, cb) {
|
|
|
+ const rl = rule;
|
|
|
+ if (!value) {
|
|
|
+ rl.message = '请选择合同时间';
|
|
|
+ cb(new Error());
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- {
|
|
|
- label: '建筑面积',
|
|
|
- prop: 'startTime'
|
|
|
- }
|
|
|
- ]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //多选
|
|
|
+ idsObj: [],
|
|
|
+ //社区
|
|
|
+ communityArr: [],
|
|
|
+ //社区树
|
|
|
+ communityTree: [],
|
|
|
+ //楼栋树
|
|
|
+ communityTreeArr: [],
|
|
|
+ //楼栋ids
|
|
|
+ communityTreeIds: [],
|
|
|
+ tableArr: [],
|
|
|
+ defaultProps: {
|
|
|
+ multiple: true,
|
|
|
+ emitPath: false,
|
|
|
+ value: 'value', // 唯一标识
|
|
|
+ label: 'name', // 标签显示
|
|
|
+ children: 'children' // 子级
|
|
|
+ },
|
|
|
+ loadings: false
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
pictureArr(val) {
|
|
|
- this.formData.businessLicense = val.join();
|
|
|
+ this.formData.filePath = val.join();
|
|
|
}
|
|
|
},
|
|
|
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);
|
|
@@ -179,11 +188,88 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
+ },
|
|
|
+ effectiveDateToggle(e) {
|
|
|
+ this.formData.startTime = `${!!e ? e[0] : ''}`;
|
|
|
+ this.formData.endTime = `${!!e ? e[1] : ''}`;
|
|
|
+ },
|
|
|
+ relation() {
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.$store.dispatch('addPopup', {
|
|
|
+ url: '/businessManagement/enterpriseManagement/index.vue',
|
|
|
+ width: '850px',
|
|
|
+ height: '400px',
|
|
|
+ props: {
|
|
|
+ callback: resolve
|
|
|
+ },
|
|
|
+ hideStar: true,
|
|
|
+ title: '关联企业'
|
|
|
+ });
|
|
|
+ }).then((res) => {
|
|
|
+ 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 = true;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ randomPassword() {
|
|
|
+ let sun = 15;
|
|
|
+ let randomNumber = [];
|
|
|
+ for (let numb = 0; numb < sun; numb++) {
|
|
|
+ randomNumber.push(parseInt(Math.ceil(Math.random() * sun)));
|
|
|
+ }
|
|
|
+ this.formData.contractNo = randomNumber.toString().replace(/,/g, '');
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- const { todo, data, communityArr } = this.params;
|
|
|
+ this.randomPassword();
|
|
|
+ const { todo, data, communityArr, communityTree } = this.params;
|
|
|
this.communityArr = communityArr;
|
|
|
+ this.communityTree = communityTree;
|
|
|
if (todo !== 'add') {
|
|
|
this.findDetali(data.id);
|
|
|
}
|
|
@@ -194,8 +280,74 @@ export default {
|
|
|
.formContent-item_title {
|
|
|
clear: both;
|
|
|
}
|
|
|
+.timeWidth {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.mrbt20 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+/deep/ .el-date-editor .el-range-separator {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
/deep/ .el-form-item__label,
|
|
|
/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>
|