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

<template>
  <div style=" display: inline-block !important;">
    <el-button type="primary" size="small" @click="showVisible">{{buttonTitle}}<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    <el-drawer
        :title="buttonTitle === '客户全部排名'?'客户销售排名':'业务员销售排名'"
        :visible.sync="visible"
        size="90%"
        direction="rtl"
        append-to-body
        @close="onClose"
        >
      <div class="drawer__panel_new">
        <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>
          <span class="search__label">搜索:</span>
          <el-input style="width:200px;" placeholder="搜索客户" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
          </el-input>
          <div class="mt-10 inline-16">
            <span class="search__label" v-if="buttonTitle === '客户全部排名'">客户类型:</span>
            <el-select v-model="customerType" placeholder="请选择" size="small" class="inline-16" v-if="buttonTitle === '客户全部排名'" @change="onChangeOther" clearable>
              <el-option
                  v-for="item in typeOption"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                <span style="float: left">{{ item.value }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
              </el-option>
            </el-select>
          </div>
          <div class="mt-10 inline-16">
            <span class="search__label" v-if="buttonTitle === '客户全部排名'">客户分类:</span>
            <el-select v-model="customerClass" placeholder="请选择" size="small" class="inline-16" v-if="buttonTitle === '客户全部排名'" @change="onChangeOther" clearable>
              <el-option
                  v-for="item in classOption"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                <span style="float: left">{{ item.value }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>
              </el-option>
            </el-select>
          </div>
          <div class="mt-10 inline-16">
            <span class="search__label">部门:</span>
            <el-cascader class="inline-16" ref="selectdep" size="small" v-model="depment" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep" ></el-cascader>
          </div>
          <div class="mt-10 inline-16">
            <span class="search__label">业务员:</span>
            <el-select v-model="person" filterable placeholder="请选择" size="small"  @change="selectPerson" >
              <el-option
                  v-for="item in personnelList"
                  :key="item.index"
                  :label="item.name"
                  :value="item.userid">
              </el-option>
            </el-select>
          </div>
          <div class="div-inline">
            <el-date-picker
                v-model="monthDate"
                disabled
                type="monthrange"
                :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>
          </div>
        </div>
        <div style="margin-top: 10px;margin-bottom: 10px">
          <tableTemplate ref="table" :layout="tablecols" :data="list" :opwidth="200" :custom="true" :height="height">
            <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 class="div-float container normal-panel">
              <span>订单总金额：</span>
              <span style="color: red">¥{{tool.formatAmount(totalamount,2)}}</span>
            </div>
            <div class="div-float container normal-panel">
              <span>出货总金额：</span>
              <span style="color: red">¥{{tool.formatAmount(totaloutamount,2)}}</span>
            </div>
          <div class="div-float container normal-panel">
            <span>开票总金额：</span>
            <span style="color: red">¥{{tool.formatAmount(totaltaxincludedamount,2)}}</span>
          </div>
            <div class="div-float container normal-panel">
              <span>回款总金额：</span>
              <span style="color: red">¥{{tool.formatAmount(totalwriteoffamount,2)}}</span>
            </div>
            <div  class="container normal-panel" style="text-align:right;float: right">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :pager-count="5"
                  :page-sizes="[50, 100, 200]"
                  :page-size="50"
                  layout="total,sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>


        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import tableTemplate from './table';
export default {
  name: "allSalesTemplate",
  props:['buttonTitle','monthDate','dateType','tablecols','dataid','param','type'],
  components:{tableTemplate},
  data(){
    return {
      visible:false,
      title:'订单',
      list:[],
      total:0,
      currentPage:0,
      height:'calc(100vh - 255px)',
      totalamount:0,
      totaloutamount:0,
      totalwriteoffamount:0,
      totaltaxincludedamount:0,
      typeOption:[],
      classOption:[],
      customerType:'',
      customerClass:'',
      depment:'',
      deplist:[],
      person:'',
      personnelList:[],
      depmentParam:{
        "id": 20230620102004,
        "content": {
        }
      },
    }
  },
  methods:{
    showVisible(){
      this.visible = true
      this.title = '订单'
      this.param.content.pageNumber = 1
      this.param.content.pageSize = 50
      const usertype = JSON.parse(sessionStorage.getItem('active_account')).usertype
      const userName = JSON.parse(sessionStorage.getItem('active_account')).name
      const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
      if (this.param.content.type == 0){
        this.person = usertype!==0?this.param.content.dataid:userid === this.param.content.dataid?userName:this.param.content.dataid
        this.depment = ''
      }else {
        this.depment = this.param.content.dataid
        this.person = ''
      }
      this.queryOptions()
      this.departmentrtment()
    },
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      this.totalamount = res.data[0].totalamount
      this.totaloutamount = res.data[0].totaloutamount
      this.totalwriteoffamount = res.data[0].totalwriteoffamount
      this.totaltaxincludedamount = res.data[0].totaltaxincludedamount
    },
    /*获取部门*/
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
      this.listData()
      /*if (this.dataid){
        this.depment = this.dataid
        this.param.content.dataid = this.dataid
        this.param.content.type = 1
        this.listData()
      }else {
        const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
        this.depment = ''
        this.person = userid
        this.param.content.dataid = userid
        this.param.content.type = 0
        this.listData()
      }*/
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        if (node.subdep.length === 0){
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
          }
        }else {
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
            children: []
          }
        }
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    onChange(val){
      this.title = val
      this.param.content.sequence = val
      this.param.content.pageNumber = 1
      this.listData()
    },
    onChangeOther(){
      this.param.content.where.customergrade = this.customerClass
      this.param.content.where.type = this.customerType
      this.param.content.pageNumber = 1
      this.listData()
    },
    async queryOptions(){
      const res = await this.$store.dispatch('optiontypeselect','customertypemx')
      this.typeOption = res.data
      const res1 = await this.$store.dispatch('optiontypeselect','customergrade')
      this.classOption = res1.data
    },
    onClose(){
      this.currentPage = 0
      this.customerClass = ''
      this.customerType = ''
      this.param.content.where.condition = ''
    },
    selectDep(val){
      this.person = ''
      this.dataid = val[val.length -1]
      this.param.content.type = 1
      this.param.content.dataid = this.dataid
      this.param.content.pageNumber = 1
      this.listData()
    },
    selectPerson(val){
      this.depment = ''
      this.dataid = val
      this.param.content.type = 0
      this.param.content.dataid = this.dataid
      this.param.content.pageNumber = 1
      this.listData()
    }
  },
  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
  }
  .div-float{
    float: left;
  }
  .container{
    position: relative;
    padding: 16px 16px 0 16px;
  }
</style>