item-management-web/src/views/personal/terminateList.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">
        <MoreSearchBar business="PERSONAL_BUSINESS" :cancellation="true" :nodes="personalNodes"  @fliterSearch="fliterSearch" @resetParams="resetParams" :listQuery="listQuery">
          <template v-slot:otherButton>
            <el-button class="filter-item" round @click="showAllLabel()">显示全部列</el-button>
          </template>
        </MoreSearchBar>
      </template>
      <parentTable ref="table" :data="pageData.records" slot="table" style="width: 100%;" @headerClick="switchHeader">
        <el-table-column label="项目编号" align="center" width="150" v-if="!hiddenLabels.includes('orderId')" prop="orderId" >
          <template slot-scope="{row}">
            <span class="enableClick" @click="orderDetail(row)" @contextmenu.prevent="$doCopy(row.orderId)">{{ row.orderId }}</span>
            <input v-show="false" type="text" id="target">
          </template>
        </el-table-column>
        <el-table-column label="坐落" align="center" width="300" v-if="!hiddenLabels.includes('location')" prop="location">
          <template slot-scope="{row}">
            <span class="enableClick" @click="orderDetail(row)">{{ row.location }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面积" align="center" width="130" v-if="!hiddenLabels.includes('acreage')" prop="acreage">
          <template slot-scope="{row}">
            <span>{{ row.acreage? row.acreage+'平': '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" width="130" v-if="!hiddenLabels.includes('price')" prop="price">
          <template slot-scope="{row}">
            <span>{{ row.price? row.price+'元': '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总价" align="center" width="130" v-if="!hiddenLabels.includes('amount')" prop="amount">
          <template slot-scope="{row}">
            <span>{{ row.amount? (row.amount/10000).toFixed(2)+'万': '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="终止原因" align="center" width="130"  prop="comments">
          <template slot-scope="{row}">
            <span style="color: red;">{{ row.comments}}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" width="130" v-if="!hiddenLabels.includes('clientName')" prop="clientName">
          <template slot-scope="{row}">
            <span>{{ row.clientName?row.clientName:'-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务来源" align="center" width="130" v-if="!hiddenLabels.includes('clientSubName')" prop="clientSubName">
          <template slot-scope="{row}">
            <span>{{ row.clientSubName?row.clientSubName:'-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中介" align="center" width="130" v-if="!hiddenLabels.includes('agent')" prop="agent">
          <template slot-scope="{row}">
            <span>{{ row.agent?row.agent:'-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" width="130" v-if="!hiddenLabels.includes('contactName')" prop="contactName">
          <template slot-scope="{row}">
            <span>{{ row.contactName?row.contactName:'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人电话" align="center" width="130" v-if="!hiddenLabels.includes('contactTel')" prop="contactTel">
          <template slot-scope="{row}">
            <span>{{ row.contactTel?row.contactTel:'-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="委托人" align="center" v-if="!hiddenLabels.includes('bailorA')" prop="bailorA">
          <template slot-scope="{row}">
            <span>{{ row.bailorA?row.bailorA:(row.bailorB?row.bailorB:'-')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="委托人电话" align="center" width="130" v-if="!hiddenLabels.includes('bailoraTel')" prop="bailoraTel">
          <template slot-scope="{row}">
            <span>{{ row.bailoraTel?row.bailoraTel:(row.bailorbTel?row.bailorbTel:'-')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户经理" align="center" v-if="!hiddenLabels.includes('clientManager')" prop="clientManager">
          <template slot-scope="{row}">
            <span>{{ row.clientManager }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实勘人" align="center" width="130" v-if="!hiddenLabels.includes('outwardStaffName')" prop="outwardStaffName">
          <template slot-scope="{row}">
            <span>{{ row.outwardStaffName? row.outwardStaffName: '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="内业人员" align="center" width="130" v-if="!hiddenLabels.includes('inwardStaffName')" prop="inwardStaffName">
          <template slot-scope="{row}">
            <span>{{ row.inwardStaffName?row.inwardStaffName:'-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="定价人员" align="center" width="130" v-if="!hiddenLabels.includes('pricingStaffName')" prop="pricingStaffName">
          <template slot-scope="{row}">
            <span>{{ row.pricingStaffName?row.pricingStaffName:'-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center" width="110" v-if="!hiddenLabels.includes('created')" prop="created">
          <template slot-scope="{row}">
            {{ row.created }}
          </template>
        </el-table-column>
        <el-table-column label="节点生成时间" align="center" width="110" v-if="!hiddenLabels.includes('nodeTime')" prop="nodeTime" >
          <template slot-scope="{row}">
            {{ row.nodeTime }}
          </template>
        </el-table-column>
        <el-table-column label="最新备注" align="center" width="150" v-if="!hiddenLabels.includes('comments')" prop="comments">
          <template slot-scope="{row}">
            <span>{{ row.comments?row.comments:'-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="orderDetail(row)">详情</el-button>
            <PermissionButton menu-code="_views_personal_order_terminated" class-name="filter-item" name type="text" @click="terminate(row.currentNodeId, row.orderId)" />
          </template>
        </el-table-column>
      </parentTable>
    </y-page-list-layout>
  </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'
import PermissionButton from '@/components/PermissionButton/PermissionButton'
import MoreSearchBar from '@/components/MoreSearchBar'
import { getCookie,setCookie,removeCookie } from '@/utils/auth'

export default {
  name: 'PersonalPendingList',
  components: {
    Breadcrumb,
    YPageListLayout,
    PermissionButton,
    MoreSearchBar,
  },

  data() {
    return {
      pageData: { records: [] },
      listQuery: {
        page: 1,
        size: 10,
        current: 1,
        descs: null,
        ascs:null,
        keyword:null,
        startDate:null,
        endDate:null
      },
      personalNodes:[],
      hiddenLabels:[],
    }
  },

  
  created() {
    if (getCookie("PersonalPendingList-hiddenLabels")!=undefined){
      this.hiddenLabels = JSON.parse(getCookie("PersonalPendingList-hiddenLabels"))
    }
    this.listQuery.keyword = this.$route.query.keyword;
    this.getPage();
    this.getNodeEnum();
    
  },
  methods: {
    getPage() {
      let loadingInstance =  this.$loading({ fullscreen: true });
      if (getCookie('PersonalPendingList') != undefined){
        this.listQuery.size = parseInt(getCookie('PersonalPendingList'));
      }
      this.$api.personal.getTerminatedPage(this.listQuery).then(res=>{
        if (res.code ===200){
            this.pageData = res.data;
            loadingInstance.close();
        }
      })
    },

    getNodeEnum() {
            this.$api.workNode.nodesByBusiness("PERSONAL_BUSINESS").then(res => {
                if (res.code === 200) {
                    this.personalNodes = res.data;
                }
            })
        },
    fliterSearch(params){
      let loadingInstance =  this.$loading({ fullscreen: true });
      this.$api.personal.getTerminatedPage(params).then(res=>{
        if (res.code ===200){
            this.pageData = res.data;
            loadingInstance.close();
        }
      })
    },

    resetParams(){
      this.$router.push({ query: {} });
      this.listQuery = {
          current: 1,
          size: 10,
          descs: 'created',
      }
      this.getPage();
    },
    searchList() {
      // 重置分页
      this.listQuery.page = 1
      this.listQuery.size = 10
      this.getPage()
    },

    orderDetail(row){
      this.$router.push(`/personal/readonly/detail?id=${row.id}&currentNodeName=${row.currentNodeName}&orderId=${row.orderId}&back=${'/personal/pending/list'}`)
    },

    switchHeader(data){
      this.hiddenLabels.push(data);
      setCookie("PersonalPendingList-hiddenLabels",this.hiddenLabels);
    },
    showAllLabel(){
      removeCookie("PersonalPendingList-hiddenLabels");
      location.reload();
    }
  },
  
}
</script>
<style lang="scss" scoped>
 .enableClick:hover{
    color:#1890ff;
    cursor: pointer;
 }
</style>