settle_down_web/src/views/buyingMore/buyingMoreAdd.vue

<template>
  <div class="addInvoice">
    <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules">
      <el-row>
        <el-col style="padding-bottom: 10px">
          <span class="card_title">增购登记</span>
          <span v-if="!isView">&nbsp;&nbsp;&nbsp;&nbsp;买受人当前最新产权份额占比为（%）:</span>
          <span v-if="!isView">{{ form.buyerProportion }}</span>
          <el-card shadow="always" style="padding-top: 10px">
            <el-row>
              <el-col :span="4" class="col-txt"><span><span class="red-asterisk">*</span>增购编号</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.serialNumber" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="!isView&&!id">
              <el-col :span="4" class="col-txt"><span><span class="red-asterisk">*</span>原签约信息</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-button type="text" @click="handleContract()">去选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>买受人</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.buyerName" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>房屋</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.houseName" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>实测建筑面积（㎡）</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.actualBuildArea" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>签约日期</span></el-col>
              <el-col :span="20" 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="4" class="col-txt"><span>房屋买卖单价（元/㎡）</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.housePrice" />
                </el-form-item>
              </el-col>
            </el-row>
            <!--            <el-row>-->
            <!--              <el-col :span="4" class="col-txt"><span>买受人产权份额占比为（%）</span></el-col>-->
            <!--              <el-col :span="20" class="col-input">-->
            <!--                <el-form-item>-->
            <!--                  <el-input v-model="form.buyerProportion" />-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <el-row>
              <el-col :span="4" class="col-txt"><span>转让份额</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item prop="transferProportion">
                  <el-input v-model="form.transferProportion" @input="proportionChange" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>转让后买受人产权份额占比为（%）</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item prop="transferBuyerProportionAfter">
                  <el-input v-model="form.transferBuyerProportionAfter" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>转让后安居公司产权份额占比为（%）</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item prop="transferCompanyProportionAfter">
                  <el-input v-model="form.transferCompanyProportionAfter" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>转让单价（元/每平方）</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.transferPrice" oninput="value=value.replace(/[^\d.]/g,'')" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>转让金（元）</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="form.transferMoney" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>登记日期</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-date-picker
                    v-model="form.registrationDate"
                    type="date"
                    placeholder="年月日"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>相关资料</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    action="/server/wx/fileController/uploadImage"
                    :http-request="uploadFile"
                    :before-remove="beforeRemove"
                    multiple
                    :file-list="fileList"
                  >
                    <el-button v-if="!isView" size="small" type="primary">点击上传</el-button>
                    <div slot="file" slot-scope="{file}">
                      <a :href="file.url">{{ file.name }}</a>
                      <span v-show="!isView" class="el-upload-list__item-actions">
                        <i class="el-icon-delete" @click="handlePictureRemove(file,fileList)" />
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="col-txt"><span>登记人</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="username" readonly />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="!isView" :loading="loadingFlag" type="primary" @click="confirmSubmit()">确 定</el-button>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <contract-index v-if="dialogVisible" ref="contractIndex" from-address="addInvoice" @getChildrenData="getChildrenData" />
    </el-dialog>

  </div>
</template>

<script>
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'
import { upload } from '@/static/utils/channel'
import ContractIndex from '@/views/signingManagement/contractManagement/index.vue'

export default {
    name: 'BuyingMoreAdd',
    components: { ContractIndex },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['TRANSFER_PROPORTION'],
            form: {},
            rules: {
                serialNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
                transferProportion: [{ required: true, message: '请输入转让份额', trigger: 'blur' }],
                transferBuyerProportionAfter: [{ required: true, message: '请输入转让后买受人产权份额占比', trigger: 'change' }],
                transferCompanyProportionAfter: [{ required: true, message: '请输入转让后安居公司产权份额占比', trigger: 'change' }]
            },
            dialogVisible: false,
            dialogTitle: '',
            isView: false,
            bankOptions: [],
            loadingFlag: false,
            fileList: [],
            username: '',
            id: ''
        }
    },
    mounted() {
        const username = this.$common.currUser().username
        this.username = username
        this.initDict(this.dc_key).then((res) => {
        })
    },
    methods: {
        initData(data) {
            this.isView = data.isView
            this.id = data.id
            if (data.id) {
                this.getData(data)
            }
        },
        getData(data) {
            console.log(data)
            const postData = {
                id: data.id
            }
            this.baseRequest('getById', postData).then(res => {
                if (res.data) {
                    this.form = res.data
                    this.username = this.form.createdName
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        cancel() {
            this.$emit('cancel')
        },
        confirmSubmit() {
            const _this = this
            if (!_this.form.contractId) {
                _this.$message.warning('请选择合同')
                return
            }
            this.$refs.form.validate(valid => {
                if (valid) {
                    _this.loadingFlag = true
                    const soaUrl = 'add'
                    const extraData = {
                        type: '1'
                    }
                    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)
                        }
                        _this.loadingFlag = false
                    }).catch(err => {
                        _this.loadingFlag = false
                    })
                } else {
                    return false
                }
            })
        },
        handleContract() {
            this.dialogVisible = true
            this.dialogTitle = ''
        },
        getChildrenData(data) {
            this.dialogVisible = false
            if (!data) return
            const postData = {
                contractId: data
            }
            this.baseRequest('getByContractId', postData).then(res => {
                if (res.data) {
                    this.form = res.data
                }
            })
        },
        uploadFile: function(param) {
            upload(param, true).then((res) => {
                this.fileList.push(res)
            })
        },
        proportionChange() {
            const buyerProportion = Number(this.form.buyerProportion)
            this.form.transferBuyerProportionAfter = buyerProportion + Number(this.form.transferProportion)
            this.form.transferCompanyProportionAfter = 100 - Number(this.form.transferBuyerProportionAfter)
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('BuyingMoreController', opUrl, postData, 'project')
        }
    }
}
</script>

<style lang="scss">

</style>
<style scoped>
.red-asterisk {
    color: red;
}
</style>