settle_down_web/src/views/signingManagement/contractManagement/contractAdd.vue

<template>
  <div>
    <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules">
      <el-row>
        <el-col style="padding-bottom: 10px">
          <el-card shadow="always" style="padding: 15px 5px 5px 15px">
            <el-row>
              <el-col :span="5" class="col-txt"><span>网签备案号</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.recordNumber" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>*合同编号</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item prop="contractNumber">
                  <el-input v-model="form.contractNumber" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>出卖人</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input value="无锡市安居投资发展有限公司" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-for="(item, index) in form.dynamicItem" :key="index">
              <el-col :span="5 " class="col-txt"><span>购房人{{ index + 1 }}</span></el-col>
              <el-col :span="4" class="col-input">
                <el-form-item :prop="'dynamicItem.' + index + '.name'">
                  <el-input
                    v-model="item.name"
                    placeholder="请填写姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" class="col-input">
                <el-form-item :prop="'dynamicItem.' + index + '.identityCard'">
                  <el-input
                    v-model="item.identityCard"
                    placeholder="请填写身份证号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" class="col-input">
                <el-form-item :prop="'dynamicItem.' + index + '.phone'">
                  <el-input
                    v-model="item.phone"
                    placeholder="请填写手机号"
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="index !== 0" :span="6" class="col-input">
                <el-form-item :prop="'dynamicItem.' + index + '.relationship'">
                  <el-select
                    v-model="item.relationship"
                    placeholder="与1的关系"
                    filterable
                    :popper-append-to-body="false"
                    popper-class="statistic_base"
                  >
                    <el-option
                      v-for="relationship in dc_data.RELATIONSHIP"
                      :key="relationship.value"
                      :label="relationship.label"
                      :value="relationship.value"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>房屋</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-cascader
                    v-model="form.houseId"
                    :append-to-body="false"
                    :disabled="isView"
                    style="width: 100%;"
                    :options="TreeData"
                    @change="houseChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>*实测建筑面积</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item prop="actualBuildArea">
                  <el-input v-model="form.actualBuildArea" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>套内建筑面积</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.actualInternalArea" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>分摊共有建筑</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.actualShareArea" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>房产测绘机构</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-select
                    v-model="form.institution"
                    :popper-append-to-body="false"
                    popper-class="statistic_base"
                    placeholder=""
                    filterable
                    :disabled="isView"
                  >
                    <el-option
                      v-for="item in dc_data.MAPPING_INSTITUTION"
                      :key="item.value"
                      popper-class="statistic_base"
                      :popper-append-to-body="false"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>签约日期</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-date-picker
                    v-model="form.signingDate"
                    type="date"
                    placeholder="年月日"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>备注说明</span></el-col>
              <el-col :span="18" class="col-input">
                <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit :disabled="isView" />
              </el-col>
            </el-row>
            <el-row>
              <el-divider />
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span style="font-weight: bold;font-size: large">房价款</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>房屋买卖单价（元/㎡）</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.housePrice" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>总价款（元）</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.totalPrice" @input="totalPriceChange" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>买受人产权份额占比为</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.buyerProportion" @input="proportionChange" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>买受人出资金额（元）</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.buyerMoney" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>付款方式</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-select
                    v-model="form.paymentMethod"
                    placeholder="请选择"
                    size="small"
                    :disabled="isView"
                    :popper-append-to-body="false"
                    popper-class="statistic_base"
                  >
                    <el-option
                      v-for="item in dc_data.PAYMENT_METHODS"
                      :key="item.value"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="form.paymentMethod == '2'">
              <el-col :span="5" class="col-txt"><span>首付比例</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-select
                    v-model="form.downPaymentsProportion"
                    placeholder="请选择"
                    size="small"
                    :disabled="isView"
                    :popper-append-to-body="false"
                    popper-class="statistic_base"
                  >
                    <el-option
                      v-for="item in dc_data.DOWN_PAYMENT_PROPORTION"
                      :key="item.value"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>付款截止日</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-date-picker
                    v-model="form.deadline"
                    type="date"
                    placeholder="年月日"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-divider />
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span style="font-weight: bold;font-size: large">专项维修资金</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>住宅专项维修资金（元/㎡）</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.maintenanceFunds" @input="maintenanceFundsChange"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>总价款（元）</span></el-col>
              <el-col :span="18" class="col-input">
                <el-form-item>
                  <el-input v-model="form.maintenanceTotalPrice" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5" class="col-txt"><span>合同原件</span></el-col>
              <el-col :span="5" class="col-input">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    action="/server/wx/fileController/uploadImage"
                    :http-request="uploadPhoto"
                    :before-remove="beforeRemove"
                    multiple
                    :file-list="contractOriginalList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="file" slot-scope="{file}">
                      <a :href="file.url">{{ file.name }}</a>
                      <span class="el-upload-list__item-actions">
                        <i class="el-icon-delete" @click="handlePictureRemove(file,contractOriginalList)" />
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="5" class="col-txt"><span>其他附件</span></el-col>
              <el-col :span="5" class="col-input">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    action="/server/wx/fileController/uploadImage"
                    :http-request="uploadContractOther"
                    :before-remove="beforeRemove"
                    multiple
                    :file-list="contractOtherList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="file" slot-scope="{file}">
                      <a :href="file.url">{{ file.name }}</a>
                      <span class="el-upload-list__item-actions">
                        <i class="el-icon-delete" @click="handlePictureRemove(file,contractOtherList)" />
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" style="text-align: right">
      <el-button @click="cancel()">关 闭</el-button>
      <el-button type="primary" @click="confirmSubmit()">暂 存</el-button>
      <el-button type="primary" @click="confirmSubmit('signing')">签 约</el-button>
    </div>
  </div>
</template>
<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import { upload } from '@/static/utils/channel'

export default {
    name: 'ContractManage',
    components: {
    },
    mixins: [Base, BaseData],
    props: {
        // 确认从哪个页面跳转过来的,这样可以做相应的操作
        fromAddress: {
            type: String,
            default: ''
        },
        signYear: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dc_key: ['CONTRACT_STATUS', 'MAPPING_INSTITUTION', 'PAYMENT_METHODS', 'DOWN_PAYMENT_PROPORTION', 'RELATIONSHIP'],
            // 弹框相关
            dialogVisible: false,
            dialogTitle: '新增',
            form: {
                dynamicItem: [
                    {
                        id: '',
                        customerManagementId: '',
                        name: '',
                        identityCard: '',
                        phone: '',
                        relationship: ''
                    }
                ]
            },
            rules: {
                contractNumber: [{ required: true, trigger: 'blur', message: '请输入合同编号' }],
                actualBuildArea: [{ required: true, trigger: 'blur', message: '实测建筑面积' }]
            },
            contractOriginalList: [],
            contractOtherList: [],
            signingMaterialsList: [],
            contractId: '',
            TreeData: [],
            isView: false, // 查看按钮权限,
            searchTreeData: []
        }
    },
    watch: {

    },
    mounted() {
        this.findRoomTree()
        this.initDict(this.dc_key).then((res) => {
        })
    },
    methods: {
        initData(val) {
            console.log('111')
            const _this = this
            // 查看或编辑
            if (val.id) {
                _this.isView = val.isView
                const postData = {
                    id: val.id
                }
                this.baseRequest('getById', postData).then((res) => {
                    if (res.data) {
                        const data = res.data
                        _this.form = Object.assign({}, _this.form, res.data)
                        // 合同原件
                        _this.contractOriginalList = data.contractOriginal ? JSON.parse(data.contractOriginal) : []
                        // 其他附件
                        _this.contractOtherList = data.contractOther ? JSON.parse(data.contractOther) : []
                        if (data.institution) {
                            _this.form.institution = data.institution + ''
                        }
                        if (data.paymentMethod) {
                            _this.form.paymentMethod = data.paymentMethod + ''
                        }
                        if (data.downPaymentsProportion) {
                            _this.form.downPaymentsProportion = data.downPaymentsProportion + ''
                        }
                        // 初始化专项维修资金总价款
                        const price = _this.form.maintenanceFunds
                        const area = _this.form.actualBuildArea
                        if (price && area) {
                            _this.form.maintenanceTotalPrice = price * area
                        }
                    }
                }).catch(() => {
                })
                this.baseBuyerRequest('listAll', { customerManagementId: val.customerManagementId }).then(res => {
                    const data = res.data
                    _this.form.dynamicItem = data
                    this.$forceUpdate()
                })
            }
        },
        findRoomTree: function() {
            const _this = this
            this.pubRequest('getTreeData1', '').then((res) => {
                _this.TreeData = res.data.data
            }).catch(() => {
            })
        },
        uploadPhoto: function(param) {
            upload(param, true).then((res) => {
                this.contractOriginalList.push(res)
            })
        },
        uploadContractOther: function(param) {
            upload(param, true).then((res) => {
                this.contractOtherList.push(res)
            })
        },
        confirmSubmit: function(type) {
            const _this = this
            const p1 = new Promise((resolve, reject) => {
                this.$refs['form'].validate((valid) => {
                    if (valid) resolve()
                })
            })

            const p2 = {}

            Promise.all([p1, p2])
                .then(() => {
                    const soaUrl = 'edit'
                    const extraData = {
                        // 合同原件
                        contractOriginal: JSON.stringify(this.contractOriginalList),
                        // 其他附件
                        contractOther: JSON.stringify(this.contractOtherList),
                        // 合同状态
                        contractStatus: type === 'signing' ? 2 : ''
                    }

                    const postData = Object.assign({}, _this.form, extraData)

                    this.baseRequest(soaUrl, postData).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success('保存成功')
                            this.cancel()
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }).catch(err => {
                        this.$message.error(err)
                    })
                })
        },
        cancel() {
            this.$emit('cancel')
        },
        houseChange() {

        },
        totalPriceChange() {
            const _this = this
            const total = _this.form.totalPrice
            const area = _this.form.actualBuildArea
            if (total && area) {
                _this.form.housePrice = (total / area).toFixed(2)
            }
            // 触发买受人产权占比
            _this.proportionChange()
        },
        proportionChange() {
            const _this = this
            const total = _this.form.totalPrice
            const proportion = _this.form.buyerProportion / 100
            if (total && proportion) {
                _this.form.buyerMoney = total * proportion
            }
        },
        maintenanceFundsChange() {
            const _this = this
            const price = _this.form.maintenanceFunds
            const area = _this.form.actualBuildArea
            if (price && area) {
                _this.form.maintenanceTotalPrice = price * area
            }
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('ContractManageController', opUrl, postData, 'project')
        },
        pubRequest(opUrl, postData) {
            return this.$channel.globeRequest('ParkInfoController', opUrl, postData, 'project')
        },
        baseRoomRequest(opUrl, postData) {
            return this.$channel.globeRequest('ParkRoomController', opUrl, postData, 'project')
        },
        baseBuyerRequest(opUrl, postData) {
            return this.$channel.globeRequest('BuyerController', opUrl, postData, 'project')
        }
    }
}
</script>

<style scoped>
  .ch-input .el-input__inner {
      border-color: #32323A;
  }
  .ch-input-size {
      width: 150px;
  }
  .ch-button {
      border-color: #32323A;
      background-color: #32323A;
      color: #fff;
  }
  .ch-button-warning {
      margin-left: 10px;
      border-color: #E6A23C;
      background-color: #E6A23C;
      color: #fff;
  }
  .ch-button-export {
      margin-left: 10px;
      border-color: #98CC1F;
      background-color: #98CC1F;
      color: #fff;
  }
  /deep/.el-dialog__header {
      padding: 10px 20px;
  }
  /deep/.el-dialog__body {
      padding: 10px 20px;
  }
</style>