yos_web/src/HDrpManagement/dataanalysis/modules/documents.vue

<template>
  <div>
    <el-scrollbar >
      <div style="margin: auto;">
        <div id="quotationFull" style="background: #FFFFFF" :style="{padding:isFull ?'16px':0}">
          <div style="display: flex;justify-content: space-between">
            <div>
              <span style="font-size: 16px;color: #333">{{$t('报价单')}}</span>
            </div>
            <div>
              <quickDate class="inline-16" @selectQuick="selectQuickQuotation"></quickDate>
              <fullScreen ref="quotationFullRef" class="inline-16" domId="quotationFull" @onFull="onFull('报价')" @backFull="backFull('报价')"></fullScreen>
            </div>
          </div>
          <tableLayout style="margin-top: 10px" :layout="quotationTablecols" :data="quotationList" :opwidth="200" :custom="true" :height="isFull ?'calc(100vh - 150px)':tableHeight">
            <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname === 'status'">
                <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '新建'">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
                <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '提交'">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
                <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '审核'">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
                <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '复核'">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
              </div>
              <p v-else>{{scope.column.data[scope.column.columnname]?$t(scope.column.data[scope.column.columnname]):'--'}}</p>
            </template>
          </tableLayout>
          <div class="container normal-panel" style="text-align:right">
            <el-pagination
                background
                @size-change="quotationHandleSizeChange"
                @current-change="quotationHandleCurrentChange"
                :current-page="quotationCurrentPage"
                :page-sizes="isFull ?[100,150, 200, 250]:[10,20, 50, 100, 200]"
                :page-size="isFull ?100:10"
                layout="total,sizes, prev, pager, next, jumper"
                :total="quotationTotal">
            </el-pagination>
          </div>
        </div>
       <div id="contractFull" style="background: #FFFFFF" :style="{padding:isFull ?'16px':0}">
         <div style="display: flex;justify-content: space-between">
           <div>
             <span style="font-size: 16px;color: #333">{{$t('合同')}}</span>
           </div>
           <div>
             <quickDate class="inline-16" @selectQuick="selectQuickContract"></quickDate>
             <fullScreen ref="contractFullRef" class="inline-16" domId="contractFull" @onFull="onFull('合同')" @backFull="backFull('合同')"></fullScreen>
           </div>
         </div>
         <tableLayout style="margin-top: 10px" :layout="contractTablecols" :data="contractList" :opwidth="200" :custom="true" :height="isFull ?'calc(100vh - 150px)':tableHeight">
           <template v-slot:customcol="scope">
             <div v-if="scope.column.columnname == 'status'">
               <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '新建'">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
               <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '已提交'">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
               <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '审核'">{{$t(scope.column.data[[scope.column.columnname]])}}</span>
               <span style="color:#000000" v-else>{{$t(scope.column.data[[scope.column.columnname]])}}</span>
             </div>
             <p v-else>{{scope.column.data[scope.column.columnname]?$t(scope.column.data[scope.column.columnname]):'--'}}</p>
           </template>
         </tableLayout>
         <div class="container normal-panel" style="text-align:right">
           <el-pagination
               background
               @size-change="contractHandleSizeChange"
               @current-change="contractHandleCurrentChange"
               :current-page="contractCurrentPage"
               :page-sizes="isFull ?[100,150, 200, 250]:[10,20, 50, 100, 200]"
               :page-size="isFull ?100:10"
               layout="total,sizes, prev, pager, next, jumper"
               :total="contractTotal">
           </el-pagination>
         </div>
       </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import quickDate from "@/HDrpManagement/dataanalysis/components/quickDate";
import tableLayout from '@/components/table/index9'
import fullScreen from "@/views/salesData/components/fullScreen";
export default {
  name: "documents",
  props:['param','isDep','dataid','isPerson'],
  components:{quickDate,tableLayout,fullScreen},
  data() {
    return {
      quotationList:[],
      quotationTablecols:[],
      contractList:[],
      contractTablecols:[],
      tableHeight:'',
      quotationCurrentPage:0,
      quotationTotal:0,
      contractCurrentPage:0,
      contractTotal:0,
      begindate:'',
      enddate:'',
      contractSelect:'月',
      quotationSelect:'月',
      sort:[
        {
          reversed : 0,
          sorted: 1,
          sortid: 207,
          sortname: "新增，更新排序"
        },
        {
          reversed : 0,
          sorted: 1,
          sortid: 208,
          sortname: "跟进排序"
        }
      ],
      isFull:false,
      disabled:false
    }
  },
  methods: {
    async queryQuotation() {
     /* this.isDep ? this.param.content.type = 1 : this.isPerson ? this.param.content.type = 0 : this.param.content.type = ''*/
      this.param.content.dataType = 10
    /*  this.param.content.dataid = this.dataid*/
      this.param.content.where.begindate = this.quotationSelect ? '' :this.begindate
      this.param.content.where.enddate = this.quotationSelect ? '' : this.enddate
      this.param.content.dateType = this.quotationSelect
      this.param.content.dataid = this.dataid
      this.param.content.type = this.isDep?1:0
      this.param.content.sort = [this.sort[1]]
      const res = await this.$api.requested(this.param)
      this.quotationList = res.data
      this.quotationCurrentPage = res.pageNumber
      this.quotationTotal = res.total
    },
    quotationHandleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.queryQuotation()
    },
    quotationHandleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.queryQuotation()
    },
    async queryContract() {
     /* this.isDep ? this.param.content.type = 1 : this.isPerson ? this.param.content.type = 0 : this.param.content.type = ''*/
      this.param.content.dataType = 11
     /* this.param.content.dataid = this.dataid*/
      this.param.content.where.begindate = this.contractSelect ? '' :this.begindate
      this.param.content.where.enddate = this.contractSelect ? '' : this.enddate
      this.param.content.dateType = this.contractSelect
      this.param.content.dataid = this.dataid
      this.param.content.type = this.isDep?1:0
      this.param.content.sort = [this.sort[1]]
      const res = await this.$api.requested(this.param)
      this.contractList = res.data
      this.contractCurrentPage = res.pageNumber
      this.contractTotal = res.total
    },
    contractHandleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.queryContract()
    },
    contractHandleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.queryContract()
    },
    /*日期筛选*/
    selectQuickQuotation(begindate,enddate,select){
      this.begindate = begindate
      this.enddate = enddate
      this.quotationSelect = select
      this.queryQuotation(this.param.content.pageNumber = 1)
    },
    selectQuickContract(begindate,enddate,select){
      this.begindate = begindate
      this.enddate = enddate
      this.contractSelect = select
      this.queryContract(this.param.content.pageNumber = 1)
    },
    onFull(type){
      if (type == '报价'){
        this.param.content.dataType = 10
        this.param.content.pageNumber = 1
        this.param.content.pageSize = 100
        this.queryQuotation()
        this.isFull = true
      }else if (type == '合同'){
        this.param.content.dataType = 11
        this.param.content.pageNumber = 1
        this.param.content.pageSize = 100
        this.queryContract()
        this.isFull = true
      }
    },
    backFull(type){
      if (type == '报价'){
        this.param.content.dataType = 10
        this.param.content.pageNumber = 1
        this.param.content.pageSize = 10
        this.queryQuotation()
        this.isFull = false
      }else if (type == '合同'){
        this.param.content.dataType = 11
        this.param.content.pageNumber = 1
        this.param.content.pageSize = 10
        this.queryContract()
        this.isFull = false
      }
    }
  },
  created() {
    this.quotationTablecols = this.tool.tabelCol(this.$route.name).quotationTable.tablecols
    this.contractTablecols = this.tool.tabelCol(this.$route.name).contractTable.tablecols
  }
}
</script>

<style scoped>

</style>