yos_web/src/views/salesData/components/salesTemplate.vue

<template>
  <div>
    <div>
      <div class="div-inline" @click="onChange('订单')">
        <span class="title-font" style="color:#4F7BFD" v-if="title === '订单'">订单</span>
        <span class="title-font" style="color:#515151" v-else>订单</span>
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sortActivation.svg" alt="" v-if="title === '订单'">
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sort.svg" v-else alt="">
      </div>
      <div class="div-inline" @click="onChange('出货')">
        <span class="title-font" style="color:#4F7BFD" v-if="title === '出货'">出货</span>
        <span class="title-font" style="color:#515151" v-else>出货</span>
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sortActivation.svg" alt="" v-if="title === '出货'">
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sort.svg" v-else alt="">
      </div>
      <div class="div-inline" @click="onChange('开票')">
        <span class="title-font" style="color:#4F7BFD" v-if="title === '开票'">开票</span>
        <span class="title-font" style="color:#515151" v-else>开票</span>
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sortActivation.svg" alt="" v-if="title === '开票'">
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sort.svg" v-else alt="">
      </div>
      <div class="div-inline" @click="onChange('回款')">
        <span class="title-font" style="color:#4F7BFD" v-if="title === '回款'">回款</span>
        <span class="title-font" style="color:#515151" v-else>回款</span>
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sortActivation.svg" alt="" v-if="title === '回款'">
        <img class="inline-16" width="12" height="12" src="../../../assets/icons/sort.svg" v-else alt="">
      </div>
      <div class="div-inline" style="float: right">
        <el-button-group >
          <el-button size="small" :type="dateType === '本年'?'primary':''" @click="onChangeType('本年')">本年</el-button>
          <el-button size="small" :type="dateType === '本季'?'primary':''" @click="onChangeType('本季')">本季</el-button>
          <el-button size="small" :type="dateType === '本月'?'primary':''" @click="onChangeType('本月')">本月</el-button>
        </el-button-group>
        <el-date-picker
            v-model="monthDate"
            type="monthrange"
            @change="changMonth"
            :clearable="false"
            style="margin-left:10px;margin-right: 10px"
            format="yyyy-MM"
            value-format="yyyy-MM"
            size="small"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
        </el-date-picker>
        <allSalesTemplate :tablecols="tablecols" :dataid="dataid" :monthDate="monthDate" :dateType="dateType" :type="type" :button-title="buttonTitle" :param="param"></allSalesTemplate>
      </div>
    </div>
    <div style="margin-top: 20px;margin-bottom: 10px">
      <tableTemplate ref="table" :layout="tablecols" :data="list" :opwidth="200" :custom="true" >
        <template v-slot:customcol="scope">
          <p v-if="scope.column.columnname === 'amount'" >
            <span class="highlight-color" v-if="title === '订单'"> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
            <span v-else> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'outamount'">
            <span class="highlight-color" v-if="title === '出货'"> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
            <span v-else> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'taxincludedamount'">
            <span class="highlight-color" v-if="title === '开票'"> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
            <span v-else> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'writeoffamount'">
            <span class="highlight-color" v-if="title === '回款'"> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
            <span v-else> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'customersqty'">
            <span> {{scope.column.data[scope.column.columnname] == 0?0:scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'outcustomer'">
            <span> {{scope.column.data[scope.column.columnname] == 0?0:scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'projectqty'">
            <span> {{scope.column.data[scope.column.columnname] == 0?0:scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'outproejct'">
            <span> {{scope.column.data[scope.column.columnname] == 0?0:scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'rowindex'">
            <span style="font-weight: bold">{{scope.column.data[scope.column.columnname]}}</span>
          </p>
          <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
        </template>
      </tableTemplate>
    </div>
  </div>

</template>

<script>
import tableTemplate from './table';
import allSalesTemplate from "@/views/salesData/components/allSalesTemplate";
export default {
  name: "salesTemplate",
  props:['tablecols','dataid','type','param','buttonTitle'],
  components:{tableTemplate,allSalesTemplate},
  data(){
    return {
      title:'订单',
      tableHeight:'',
      dateType:'本年',
      monthDate:[new Date().getFullYear() + '-1',new Date().getFullYear() + '-' + (new Date().getMonth() + 1)],
      list:[],
    }
  },
  methods:{
    onChange(val){
      this.title = val
      this.param.content.sequence = val
      this.listData()
    },
    onChangeType(val){
      this.param.content.where.begdate = ''
      this.param.content.where.enddate = ''
      if (val === '本年'){
        this.monthDate = [new Date().getFullYear() + '-1',new Date().getFullYear() + '-' + (new Date().getMonth() + 1)]
      }else if(val === '本季'){
        let currentMonth = new Date().getMonth() + 1
        let begMonth = Math.ceil(currentMonth / 3) * 3 - 2
        let endMonth = begMonth + 2
        this.monthDate = [new Date().getFullYear() + '-' + begMonth,new Date().getFullYear() + '-' + endMonth]
      }else {
        this.monthDate[0] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
        this.monthDate[1] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
        this.monthDate = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1),new Date().getFullYear() + '-' + (new Date().getMonth() + 1)]
      }
      this.dateType = val
      this.listData()
    },
    changMonth(){
      this.dateType = ''
      let begdate = new Date(this.monthDate[0])
      let enddate = new Date(this.monthDate[1])
      this.param.content.where.begdate = this.monthDate[0]
      this.param.content.where.enddate = this.monthDate[1]
      this.listData()
    },
    async listData(){
      this.param.content.dateType = this.dateType
      const res = await this.$api.requested(this.param)
      this.list = res.data
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
  .div-inline{
    display: inline-block;
  }
  .title-font{
    color: #515151;
    font-size: 15px;
    display: inline-block !important;
    margin-right: 5px;
  }
  .highlight-color{
    color:#4F7BFD
  }
</style>