yos_web/src/SManagement/actsRec/index.vue

<template>
  <div>
    <normal-layout style="height: calc(100vh - 125px)">
      <div slot="titleRight">
        <exportFile :param="param" :columns="tablecols" fileName="应收账款" :dataid="param.content.dataid" :custom="true" :point="param.content.point" :dateData="dateData"></exportFile>
      </div>
      <div slot="content">
        <div class="container">
          <template>
            <div class="mt-10 inline-16">
              <label class="search__label">{{$t('查询方式')}}:</label>
              <el-select v-model="param.content.point" :placeholder="$t('请选择')" size="small" @change="listData">
                <el-option :label="$t(`出货`)" value="出货" ></el-option>
                <el-option :label="$t(`开票`)" value="开票" ></el-option>
              </el-select>
            </div>
            <div class="mt-10 inline-16" style="margin-left: 20px">
              <departmentSalesperson ref="departmentSalesperson" class="inline-16" @depSelect="depSelect" @personSelect="personSelect" ></departmentSalesperson>
            </div>
            <el-input  style="width:200px;" :placeholder="$t('搜索')" :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="clearSearchValue" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
            </el-input>
            <div>
              <el-row :gutter="20">
                <el-col :span="6" class="mt-10">
                  <div class="acccounet__panel" style="border:1px solid #d8dde8">
                    <p class="normal-margin">{{$t('总应收')}}</p>
                    <p class="normal-title" style="font-size:29px;color:#151515" >
                      <small>{{allList.sumtotalamount || allList.sumtotalamount == '0'?'¥':''}}</small>
                      {{allList.sumtotalamount || allList.sumtotalamount == 0?tool.formatAmount(allList.sumtotalamount,2):'--'}}
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="flex:0 1 auto;width: 100%;">
              <tableMainLayout :layout="tablecols" height="calc(100vh - 410px)" :data="list" fixedName="operation" :width="true" :custom="true"
                               :headerOptions="['receivableamount','totalamount','openingbalance']">
                <template v-slot:header="scope">
                  <div v-if="scope.column.columnname === 'openingbalance'">
                    {{dateData?'期初余额'+'('+dateData+')':'期初余额(2021-12-31)'}}
                  </div>
                  <div v-if="scope.column.columnname == 'receivableamount'">
                    <div v-if="param.content.point == '出货'">{{$t(`出货总金额(2022-01-01至今)`)}}</div>
                    <div v-else>{{$t(`开票总金额(2022-01-01至今)`)}}</div>
                  </div>
                  <div v-if="scope.column.columnname == 'totalamount'">
                    <div v-if="param.content.point == '出货'">{{$t(`出货总应收`)}}</div>
                    <div v-else>{{$t(`开票总应收`)}}</div>
                  </div>
                </template>
                <template v-slot:customcol="scope">
                  <div v-if="scope.column.columnname === 'openingbalance'">
                    <span><small>¥ </small>{{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2):'0.00'}}</span>
                  </div>
                  <div v-else-if="scope.column.columnname === 'receivableamount'">
                    <span><small>¥ </small>{{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2):'0.00'}}</span>
                  </div>
                  <div v-else-if="scope.column.columnname === 'revenueamount'">
                    <span><small>¥ </small>{{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2):'0.00'}}</span>
                  </div>
                  <div v-else-if="scope.column.columnname === 'totalamount'">
                    <span><small>¥ </small>{{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2):'0.00'}}</span>
                  </div>
                  <p v-else>{{scope.column.data[scope.column.columnname] || scope.column.columnname === 'operation'?$t(scope.column.data[scope.column.columnname]):'--'}}</p>
                </template>
                <template v-slot:opreation="scope">
                  <detailInfo :data="scope.data" :items="param.content" :point="param.content.point"></detailInfo>
                </template>
              </tableMainLayout>
            </div>
            <div class="container normal-panel" style="text-align:right">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[100, 50, 100, 200]"
                  :page-size="100"
                  layout="total,sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </template>
        </div>
      </div>
    </normal-layout>
  </div>
</template>

<script>
import departmentSalesperson from "@/views/salesData/components/departmentSalesperson";
import detailInfo from './modules/detailInfo'
import exportFile from '@/components/export_file/index'
export default {
  name: "index",
  components:{departmentSalesperson,detailInfo,exportFile},
  data(){
    return {
      value:'全部',
      options:[],
      tablecols:[],
      list:[],
      currentPage:0,
      total:0,
      allList:{},
      depmentParam:{
        "id": 20230620102004,
        "content": {
        }
      },
      param:{
        "id": 20241217135803,
        "content": {
          "pageNumber": 1,
          "pageSize": 100,
          "type":"0",//1按部门 0按人员
          "dataid":JSON.parse(sessionStorage.getItem('active_account')).userid,//部门人员id
          "querytype":1,//0按业务员 1按客户
          "point":"开票",// 入账节点
          "where": {
            "condition": ""
          }
        }
      },
      dateData:null
    }
  },
  methods:{
    async listData(){
      const res = await this.$api.requested(this.param)
      console.log(res.data,'数据')
      this.list = res.data
      this.allList = res.data.length > 0 ? res.data[0]:{}
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.$refs.departmentSalesperson.deplist = this.createMenu(res.data.dep)
      this.$refs.departmentSalesperson.personnelList = res.data.hr
      const name = JSON.parse(sessionStorage.getItem('active_account')).name
      this.$refs.departmentSalesperson.person = name
      this.queryDate()
    },
    /*获取期初日期*/
    async queryDate(){
      const res = await this.$api.requested({
        "id": 20241218101003,
        "content": {
          "where":{
            "condition":"",
            "begindate":"",
            "enddate":""
          }
        }
      })
      if (res.code == 0){
        this.tool.showMessage(res,()=>{})
      }else {
        if (res.data.length > 0){
          const newDate = new Date(res.data[0].openingdate)
          this.dateData = this.tool.getDataChange(newDate)
        }else {
          this.dateData = null
        }
        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
    },
    /*选择部门*/
    depSelect(val){
      console.log(val,'val3333')
      this.param.content.type = 1
      this.param.content.dataid = val
      this.dataid = val
      this.listData()
    },
    /*选择业务员*/
    personSelect(val){
      this.param.content.type = 0
      this.param.content.dataid = val
      this.dataid = val
      this.listData()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    clearSearchValue () {
      this.$store.dispatch('clearSearchValue')
      this.listData(this.param.content.pageNumber = 1)
    }
  },
  mounted() {
    this.departmentrtment()
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).actsRecTable.tablecols
  }
}
</script>

<style scoped>
.acccounet__panel{
  padding: 10px;
  line-height: 30px;
  border:1px solid #f1f2f3;
  color:#666;
  border-radius: 5px;
  cursor: pointer;
}
</style>