settle_down_web/src/views/buyingBack/buyingBackAdd.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>
          <el-card shadow="always" style="padding-top: 10px">
            <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.serialNumber" />
                </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-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="invoiceTax">
                  <el-select
                    v-model="form.transferProportion"
                    filterable
                    placeholder="请选择"
                    @change="proportionChange"
                  >
                    <el-option
                      v-for="item in dc_data.TRANSFER_PROPORTION"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </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.transferBuyerProportion" 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.transferCompanyProportion" 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"
      @close="getData"
    >
      <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: {},
            dialogVisible: false,
            dialogTitle: '',
            isView: false,
            bankOptions: [],
            loadingFlag: false,
            fileList: [],
            username: ''
        }
    },
    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.getBankOptions()
            if (data) {
                this.getData(data)
            }
        },
        getData(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
            _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.$message.error(err)
                _this.loadingFlag = false
            })
        },
        handleContract() {
            this.dialogVisible = true
            this.dialogTitle = ''
        },
        getChildrenData(data) {
            console.log('data', data)
            this.dialogVisible = false
            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.transferBuyerProportion = buyerProportion + Number(this.form.transferProportion)
            this.form.transferCompanyProportion = buyerProportion - Number(this.form.transferProportion)
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('BuyingMoreController', opUrl, postData, 'project')
        }
    }
}
</script>

<style lang="scss">

</style>