item-management-web/src/views/personal/facePriceHistory.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getPage">
      <template slot="left">
       
        <el-input v-model="listQuery.userName" placeholder="口估人员" clearable style="width: 200px;float: left;"></el-input>
        <el-input v-model="listQuery.queryTarget" placeholder="口估标的" clearable style="margin-left: 20px;width: 400px;float: left;"></el-input>
        <el-select v-model="listQuery.queryType" placeholder="查询方式" clearable filterable style="margin-left: 20px;width: 100px;float: left;" class="filter-item">
          <el-option label="地址" value="地址" />
          <el-option label="楼盘名" value="楼盘名" />
        </el-select>
        <el-select v-model="listQuery.limitDate" placeholder="口估范围" clearable filterable style="margin-left: 20px;width: 100px;float: left;" class="filter-item">
          <el-option label="两年内" value="两年内" />
          <el-option label="一年内" value="一年内" />
          <el-option label="半年内" value="半年内" />
          <el-option label="三月内" value="三月内" />
          <el-option label="一月内" value="一月内" />
        </el-select>
        <el-date-picker
              style="margin-left: 20px;float: left;"
              v-model="payDate"
              type="daterange"
              align="center"
              unlink-panels
              range-separator="至"
              start-placeholder="价值时点（开始）"
              end-placeholder="价值时点（结束）"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList" round>搜索</el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
      </template>
      <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
        <el-table-column label="口估标的" align="center" width="300" prop="queryTarget">
          <template slot-scope="{row}">
            <span>{{ row.queryTarget}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="查询方式" align="center" prop="queryType">
          <template slot-scope="{row}">
            <span>{{ row.queryType}}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="口估单价(元)" align="center" prop="facePrice">
          <template slot-scope="{row}">
            <span style="color: red;">{{ row.facePrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="口估面积(m²)" align="center"  prop="faceAcreage">
          <template slot-scope="{row}">
            <span style="color: red;">{{ row.faceAcreage}}</span>
          </template>
        </el-table-column>
        <el-table-column label="口估总价(万)" align="center"  prop="faceAmount">
          <template slot-scope="{row}">
            <span style="color: red;">{{ row.faceAmount ? (row.faceAmount / 10000).toFixed(2) + '万' : '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="大友均价(元)" align="center"  prop="dyAvgPrice">
          <template slot-scope="{row}">
            <span>{{ row.dyAvgPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统成交价(元)" align="center" prop="dealPrice">
          <template slot-scope="{row}">
            <span>{{ row.dealPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统挂牌价(元)" align="center"  prop="upPrice">
          <template slot-scope="{row}">
            <span>{{ row.upPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="价值时点" align="center"  prop="valueTiming">
          <template slot-scope="{row}">
            <span>{{ row.valueTiming}}</span>
          </template>
        </el-table-column>
        <el-table-column label="口估人员" align="center" prop="userName">
          <template slot-scope="{row}">
            <span>{{ row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="大友案例个数" align="center"  prop="dyExampleNum">
          <template slot-scope="{row}">
            <span>{{ row.dyExampleNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统案例个数" align="center" prop="externalExampleNum">
          <template slot-scope="{row}">
            <span>{{ row.externalExampleNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="查询范围" align="center"  prop="limitDate">
          <template slot-scope="{row}">
            <span>{{ row.limitDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text"  @click="genWords(row)">复制文案</el-button>
          </template>
        </el-table-column>
      </parentTable>
    </y-page-list-layout>
  </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'
import {copyFacePriceWords} from '@/utils/personalUtil'

export default {
  name: 'facePriceHistory',
  components: {
    Breadcrumb,
    YPageListLayout,
  },

  data() {
    return {
      pageData: { records: [] },
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        current: 1,
        descs: null,
        ascs: null,
        startDate: null,
        endDate: null,
      },
      payDate: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }

  },
  watch: {
   
  }, 
  created() {
    this.getPage();
  },
  methods: {
    getPage() {
     
      this.$api.personalFacePrice.getPage(this.listQuery).then(res => {
        if (res.code === 200) {
          this.pageData = res.data;
        }
      })
    },
    

    resetSearch() {
      this.$router.push({ query: {} });
      this.listQuery = {
        current: 1,
        size: 10,
        descs: 'created',
      }
      this.payDate = ''
      this.getPage();
    },
    searchList() {
      // 重置分页
      this.listQuery.page = 1
      this.listQuery.size = 10
      if (this.payDate) {
        this.listQuery.startDate = this.payDate[0]
        this.listQuery.endDate = this.payDate[1]
      }
      this.getPage()
    },
    genWords(row){
      let date = row.valueTiming.split('-')
      let location = "";
      let community ="";
      if (row.queryType==='地址'){
        location = "【坐落】"+row.queryTarget+"\n";
      }else{
        community = "【小区名称】 "+row.queryTarget+"\n";
      }
      let valueTimeStr = date[0]+'年'+date[1]+'月'+date[2]+'日';
      let faceWords = "\t★★口估结果★★ \n\n"+
                  "【价值时点】"+valueTimeStr+" \n"+
                    location+
                    community+
                  "【建筑面积】"+row.faceAcreage+"㎡\n"+
                  "【单价】"+row.facePrice+"元/㎡\n"+
                  "【总价】"+(row.faceAmount / 10000).toFixed(2)+"万\n"+
                  "\n"+
                  "【备注】本次口估按“精装修”进行估算！\n"
                  copyFacePriceWords(faceWords);
                 // this.$message({'type':'success','message': context+' 已复制!'});

                 let html = faceWords.replace(/\n/g,"</br>")
                 this.$message({ 'type':'success','duration':'5000',
                  dangerouslyUseHTMLString: true,
                  message: html
                });
    }
  },

}
</script>
<style lang="scss" scoped>

</style>