settle_down_web/src/views/transactionRecord/convertRecordIndex.vue

<template>
  <div class="newIndexDiv">
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="2">
        <span>分期</span>
      </el-col>
      <el-col :span="4">
        <el-cascader
          v-model="search.findids"
          :append-to-body="false"
          :options="options"
          clearable
          :props="{ multiple: true}"
          style="width: 100%"
          @change="handleChange"
        />
      </el-col>
      <el-col :span="2">
        <div style="text-align: center"><span>转换日期</span></div>
      </el-col>
      <el-col :span="4">
        <el-date-picker
          v-model="search.collectionDateFrom"
          popper-class="statistic_base"
          type="date"
          placeholder="年月日"
          value-format="yyyy-MM-dd"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2">
        <div style="text-align: center"><span>至</span></div>
      </el-col>
      <el-col :span="4">
        <el-date-picker
          v-model="search.collectionDateTo"
          popper-class="statistic_base"
          type="date"
          placeholder="年月日"
          value-format="yyyy-MM-dd"
          style="width: 100%"
        />
      </el-col>
    </el-row>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="2">
        <span>姓名</span>
      </el-col>
      <el-col :span="4">
        <el-input v-model="search.buyerName" />
      </el-col>
      <el-col :span="2">
        <div style="text-align: center"><span>转换类型</span></div>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="search.convertType"
          style="width: 100%"
          clearable
          filterable
          placeholder="转换类型"
          @change="handleSearch"
        >
          <el-option
            v-for="item in dc_data.CONVERT_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="24" style="margin-top: 20px">
        <el-button size="small" class="ch-button-export" style="float: right" @click="handleExcel"><i class="el-icon-menu" />&nbsp;导出EXCEL</el-button>
        <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-button type="primary" size="small" style="float: right" @click="handleAdd()">&nbsp;NCC提交</el-button>
      </el-col>
    </el-row>
    <el-row class="handle-box">
      <el-col :span="24">
        <el-table
          ref="myTable"
          v-loading="loading"
          :data="AllData"
          row-class-name="g_table_row"
          border
          :header-cell-style="{background:'#f2f2f2'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="60" />
          <el-table-column label="房屋" prop="houseName" width="250" />
          <el-table-column label="流水号" prop="serialNumber" width="250" />
          <el-table-column label="买受人" prop="buyerName" width="200" />
          <el-table-column label="金额（元）" prop="money" width="200" />
          <el-table-column label="转换类型" prop="convertTypeStr" width="110" />
          <el-table-column label="转换日期" prop="convertDate" />
          <el-table-column label="付款账号" prop="bankNumber" />
          <el-table-column label="转换经办人" prop="createdName" />
          <el-table-column label="NCC提交状态" prop="ncSubmitStatusStr" />
          <el-table-column label="最近提交日期" prop="ncSubmitDate" />
          <el-table-column label="NCC提交人" prop="ncSubmitName" />
        </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>

    <!-- ncc提交 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      top="50px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
    >
      <ncc-submit-index v-if="dialogVisible" ref="nccSubmit" @editClose="handleClose" />
    </el-dialog>

  </div>
</template>
<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import NccSubmitIndex from '@/views/transactionRecord/nccSubmitIndex.vue'

export default {
    name: 'ConvertRecordIndex',
    components: { NccSubmitIndex },
    mixins: [Base, BaseData],
    props: {
        fromAddress: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dc_key: ['CONTENT_TYPE', 'COLLECTION_METHODS', 'CONVERT_TYPE'],
            // 列表相关
            search: {
            },
            AllData: [],
            loading: false,
            // 弹框相关
            dialogVisible: false,
            dialogTitle: '新增',
            selectedRows: [],
            selectId: '',
            options: []
        }
    },
    mounted() {
        this.getTreeSelectData()
        this.initDict(this.dc_key).then((res) => {
            this.getData()
        })
    },
    methods: {
        getTreeSelectData: function() {
            this.baseInfoRequest('getTreeData3', {}).then((res) => {
                this.options = res.data.data
            }).catch(() => {
            })
        },
        getData: function() {
            const _this = this
            _this.loading = true
            _this.AllData = []
            this.search.pageNum = this.currentPage
            this.search.pageSize = this.pageSize
            if (this.search.findids && this.search.findids.length > 0) {
                const data = []
                this.search.findids.forEach(item => {
                    if (item[1]) {
                        data.push(item[1])
                    }
                })
                this.search.discIds = data.join(',')
            }
            this.baseRequest('convertRecord', 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) {
            // item.contentTypeStr = this.dc_map.CONTENT_TYPE[item.contentType]
            item.convertTypeStr = this.dc_map.CONVERT_TYPE[item.convertType]
            item.paymentMethodStr = this.dc_map.COLLECTION_METHODS[item.paymentMethod]
            item.ncSubmitStatusStr = item.ncSubmitStatus == '1' ? '已提交' : '未提交'
            return item
        },
        /* ncc提交*/
        handleAdd: function(val) {
            this.dialogTitle = 'NCC提交'
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs.nccSubmit.initData('转换')
            })
        },
        handleClose(refresh) {
            this.dialogVisible = false
            this.getData()
        },
        handleView(val) {

        },
        handleChange() {

        },
        // 导出
        handleExcel: function() {
            const _this = this
            this.OutData = []
            const title = ['房屋', '流水号', '买受人', '金额(元)', '转换类型', '转换日期', '付款账号',
                '转换经办人', 'NCC提交状态', '最近提交日期', 'NCC提交人']
            this.OutData.push(title)
            const temp = []
            this.baseRequest('convertRecordListAll', _this.search).then(res => {
                const data = res.data
                data.forEach(function(item) {
                    const json = _this.getItemJson(item)
                    temp.push(json)
                })
                temp.forEach(function(item) {
                    const jsonArray = []
                    jsonArray.push(item.houseName)
                    jsonArray.push(item.serialNumber)
                    jsonArray.push(item.buyerName)
                    jsonArray.push(item.money)
                    jsonArray.push(item.convertTypeStr)
                    jsonArray.push(item.convertDate)
                    jsonArray.push(item.bankNumber)
                    jsonArray.push(item.createdName)
                    jsonArray.push(item.ncSubmitStatusStr)
                    jsonArray.push(item.ncSubmitDate)
                    jsonArray.push(item.ncSubmitName)
                    _this.OutData.push(jsonArray)
                })
                const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 },
                    { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }]
                const fileName = '转换记录导出 ' + new Date().Format('yyyyMMddhhmm')
                this.$outputXlsxFile(this.OutData, OutSize, fileName)
            })
        },
        cancel: function() {
            this.dialogVisible = false
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('TransactionRecordController', opUrl, postData, 'project')
        },
        baseInfoRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
        }
    }
}
</script>
<style lang="scss">
   .newIndexDiv{
       .qyrqBox{
           display: inline-flex;align-items: center;
           .el-input{
               width: 220px !important;
           }
       }

   }
</style>
<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>