settle_down_web/src/views/saleManage/checkIn/checkIn.vue

<template>
  <div>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="8">
        <div class="Pageform">
          <div class="formlabel">买受人</div>
          <div class="formvalue">
            <el-input v-model="search.buyerName" class="ch-input ch-input-size" placeholder="买受人" size="small" @keyup.enter.native="handleSearch()" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="Pageform">
          <div class="formlabel">房屋</div>
          <div class="formvalue">
            <el-input v-model="search.houseName" class="ch-input ch-input-size" placeholder="房号" size="small" @keyup.enter.native="handleSearch()" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="Pageform">
          <div class="formlabel">身份证</div>
          <div class="formvalue">
            <el-input v-model="search.buyerIdentityCard" class="ch-input ch-input-size" placeholder="身份证" size="small" @keyup.enter.native="handleSearch()" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="Pageform">
          <div class="formlabel">批次号</div>
          <div class="formvalue">
            <el-input v-model="search.batchNumber" class="ch-input ch-input-size" placeholder="批次号" size="small" @keyup.enter.native="handleSearch()" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="24">
        <el-button class="ch-button-warning" size="small" style="float: right" @click="handleReset()"><i class="el-icon-search" />&nbsp;重置</el-button>
        <el-button class="ch-button" size="small" style="float: right" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
      </el-col>
    </el-row>
    <el-row class="handle-box">
      <el-col :span="24">
        <el-table v-loading="loading" :data="AllData" row-class-name="g_table_row" stripe>
          <el-table-column label="序号" type="index" width="60" />
          <el-table-column label="合同编号" width="280">
            <template scope="scope">
              <el-link :underline="false" type="primary" @click="handleView2(scope.row)">{{ scope.row.contractNumber }}</el-link>
            </template>
          </el-table-column>
          <!--          <el-table-column label="网签备案号" prop="recordNumber" />-->
          <el-table-column label="买受人" prop="buyerName" />
          <el-table-column label="房屋" prop="houseName" width="280" />
          <el-table-column label="入住状态" prop="statusString" />
          <!--          <el-table-column label="备注" prop="remark" />-->
          <el-table-column label="备注" prop="remark">
            <template scope="scope">
              <el-tooltip placement="bottom" effect="light">
                <template slot="content">
                  <p style="max-width:900px;">{{ scope.row.remark }}</p>
                </template>
                <div class="zt_css">{{ scope.row.remark }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="入住日期" prop="inDate" width="150" />
          <el-table-column label="经办人" prop="operater" width="100" />

          <!--          <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />-->
          <!--          <el-table-column label="买卖单价（㎡）" prop="housePrice" />-->
          <!--          <el-table-column label="买受人产权份额占比" prop="buyerProportion" />-->
          <!--          <el-table-column label="付款方式" prop="paymentMethod" />-->
          <!--          <el-table-column label="应收房款（元）" prop="totalPrice" />-->
          <!--          <el-table-column label="应收专项维修资金（元）" prop="maintenanceFunds" />-->
          <!--          <el-table-column label="合同状态" prop="contractStatusStr" width="110">-->
          <!--            <template scope="scope">-->
          <!--              <span-->
          <!--                :style="{'color':scope.row.contractStatusStr==='已退房'?'red':scope.row.contractStatusStr==='已签约'?'green':'gray'}"-->
          <!--              >-->
          <!--                {{ scope.row.contractStatusStr }}-->
          <!--              </span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="签约日期" prop="signingDate" />-->
          <el-table-column header-align="center" label="操作" width="180">
            <template scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.row)">状态登记</el-button>
              <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-page">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="allpage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>

    <!--合同签约/修改-->
    <el-dialog
      :visible.sync="dialogVisible2"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialogTitle2"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <contract-add v-if="dialogVisible2" ref="contractAdd" @cancel="cancel" />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialogTitle"
      width="60%"
      top="70px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <el-form ref="form" :model="form" :rules="rules" style="width: 100%;padding: 5px">
        <el-row>
          <el-col style="padding-bottom: 0px">
            <el-card shadow="always" style="padding: 15px 5px 5px 15px">

              <el-row>
                <el-col :span="3" class="col-txt"><span>入住状态</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item>
                    <el-select
                      v-model="form.status"
                      :disabled="dialogTitle=='查看'"
                      clearable
                      filterable
                      placeholder="入住状态"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in dc_data.RU_ZHU_STATUS"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <div v-if="form.status==1">
                  <el-col :span="4" class="col-txt"><span>入住日期</span></el-col>
                  <el-col :span="8" class="col-input">
                    <el-form-item>
                      <el-date-picker
                        v-model="form.inDate"
                        popper-class="statistic_base"
                        :disabled="dialogTitle=='查看'"
                        placeholder="入住日期"
                        style="width: 100%"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      />
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
              <el-row>
                <el-col :span="3" class="col-txt"><span>备注</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-input
                      v-model="form.remark"
                      autosize
                      :readonly="dialogTitle=='查看'"
                      :rows="4"
                      type="textarea"
                      maxlength="2000"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-top: 50px">
                <el-col :span="3" class="col-txt"><span>经办时间:</span></el-col>
                <el-col :span="20" class="col-input">
                  <span>{{ form.operateTime }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="col-txt"><span>经办人:</span></el-col>
                <el-col :span="20" class="col-input">
                  <span>{{ form.operater }}</span>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="dialogTitle!='查看'" type="primary" :loading="loadingFlag" @click="confirmSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import contractAdd from '@/views/signingManagement/contractManagement/contractAdd.vue'

export default {
    name: 'CheckIn',
    components: { contractAdd },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['RU_ZHU_STATUS'],
            // 列表相关
            search: {
            },
            AllData: [],
            loading: false,
            // 弹框相关
            dialogVisible: false,
            rules: {},
            form: {},
            dialogTitle: '新增',
            dialogVisible2: false,
            dialogTitle2: '查看',
            loadingFlag: false
        }
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
            this.getData()
        })
    },
    methods: {

        getData: function() {
            const _this = this
            _this.loading = true
            _this.AllData = []

            this.search.pageNum = this.currentPage
            this.search.pageSize = this.pageSize
            this.baseRequest('list', this.search).then((res) => {
                if (res.data.rows) {
                    res.data.rows.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                    _this.allpage = res.data.total
                }
                _this.loading = false
            }).catch((e) => {
                // console.log(e)
            })
            // this.initOutData()
        },
        handleSearch: function() {
            this.getData()
        },
        handleReset: function() {
            for (const i in this.search) {
                if (i !== 'pageNum' && i !== 'pageSize') {
                    this.search[i] = ''
                }
            }
            this.handleSearch()
        },
        getItemJson: function(item) {
            if (!item.status) {
                item.status = 'null'
            }
            if (item.contractManageId2) {
                item.contractManageId = item.contractManageId2
            }
            item.statusString = this.dc_map.RU_ZHU_STATUS[item.status]
            item.operateTime = this.$common.transDate(item.operateTime, this.$constant.DATE_PATTERN.DATE_TIME_h)
            item.inDate = this.$common.transDate(item.inDate, this.$constant.DATE_PATTERN.DATE_TIME_h)

            return item
        },
        /* 合同编辑*/
        // handleEdit: function(val) {
        //     this.dialogVisible = true
        //     this.dialogTitle = '签约'
        //     val.isView = false
        //     // 新vue时调用的方法
        //     this.$nextTick(() => {
        //         this.$refs.contractAdd.initData(val)
        //     })
        // },
        /* 合同查看*/
        handleView2(val) {
            this.dialogVisible2 = true
            this.dialogTitle2 = '查看'
            val.isView = true
            val.id = val.contractManageId2
            // 新vue时调用的方法
            // console.log('val.isView',val.isView)
            this.$nextTick(() => {
                // console.log('val.isView',val.isView)
                this.$refs.contractAdd.initData(val)
            })
        },
        cancel: function() {
            this.dialogVisible2 = false
        },
        /* 编辑*/
        handleEdit: function(val) {
            this.form = Object.assign({}, val)
            this.dialogVisible = true
            this.dialogTitle = '状态登记'
            this.loadingFlag = false
        },
        handleView(val) {
            this.dialogVisible = true
            this.dialogTitle = '查看'
            this.form = Object.assign({}, val)
        },
        confirmSubmit: function() {
            const _this = this
            _this.loadingFlag = true
            this.$refs.form.validate(valid => {
                if (valid) {
                    let soaUrl = 'edit'
                    const extraData = {}
                    const postData = Object.assign({}, _this.form, extraData)

                    if (!this.form.id) {
                        soaUrl = 'add'
                    }
                    this.opRecord(postData, soaUrl)
                } else {
                    // console.log('error submit!!')
                    return false
                }
            })
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('CheckInController', opUrl, postData, 'project')
        }
    }
}
</script>
<style lang="scss">
.Pageform{
    display: flex;
    align-items: center;
    .formlabel{
        width: 15%;
        text-align: right;
        font-size:14px ;
    }
    .formvalue{
        width: 75%;
        display: flex;
        margin-left: 2%;
        .ch-input{
            width: 100%;
        }
        .zhi{
            width: 60px;
            text-align: center;
        }
    }
}
</style>

<style scoped>
.zt_css{
    overflow:  hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
  .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>