yos_web/src/SDrpManagement/salerAccount/modules/detail.vue

<template>
  <div>
<!--    <el-button size="small" type="text" @click="onShow(dialogFormVisible = true)">明 细</el-button>-->
    <el-drawer
        title="账户流水明细"
        :visible.sync="dialogFormVisible"
        size="90%"
        direction="rtl"
        append-to-body
        :show-close="false"
        @close="onClose">
      <div class="flex-align-stretch drawer__panel" style="margin-bottom: 0 !important;padding-bottom: 10px">
        <div class="mt-10">
          <label  class="search__label">收支类型:</label>
          <el-select class="inline-24" v-model="param.content.where.type" placeholder="请选择类型" @change="selectChange" size="small" clearable>
            <el-option label="收入" value="1"></el-option>
            <el-option label="支出" value="0"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label" >审核时间:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
        <div class="mt-10 inline-16">
          <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>
        <div class="mt-10">
          <exportFile :param="param" :columns="tablecols" fileName="账户流水明细"></exportFile>
        </div>
      </div>
      <div style="padding:0 16px 0 16px">
        <tableNewLayout :layout="tablecols" :data="list" :opwidth="200" height="calc(100vh - 154px)" :width="true" :custom="true" >
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'type'">
              {{scope.column.data[[scope.column.columnname]] == '1' ? '收入':'支出'}}
            </div>
            <div v-else-if="scope.column.columnname === 'amount'">
              {{tool.formatAmount(scope.column.data[[scope.column.columnname]],2)}}
            </div>
            <div v-else>
              {{scope.column.data[[scope.column.columnname]] || scope.column.columnname === 'operation'?scope.column.data[[scope.column.columnname]]:'--'}}
            </div>
          </template>
          <template v-slot:opreation="scope">
            <el-button type="text" size="mini" @click="detailGo(scope.data)">详情</el-button>
          </template>
        </tableNewLayout>
<!--        <div  class="container normal-panel" style="text-align:right">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 150, 200, 250]"
              :page-size="100"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>-->
      </div>

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

<script>
import exportFile from '@/components/export_file/index5.vue'
export default {
  name: "detail",
  props:["hrid"],
  components:{exportFile},
  data(){
    return {
      dialogFormVisible:false,
      status:'',
      dateSelect:'',
      total:0,
      currentPage:0,
      param:{
        "id": 20240111090304,
        "content": {
          "pageSize": 100,
          "pageNumner": 1,
          "hrid": "",
          "where": {
            "condition": "",
            "begdate": "",
            "enddate": "",
            "type":""
          }
        }
      },
      tablecols:[],
      list:[]
    }
  },
  methods:{
    onShow(){
      /*this.$emit('detailId',this.hrid)*/
      this.listData()
    },
    async listData(){
      this.param.content.hrid = this.$route.query.id
      const res = await this.$api.requested(this.param)
      this.list = res.data.rows
      /*this.total = res.total
      this.currentPage = res.pageNumner*/
    },
    selectChange(){
      console.log(this.dateSelect)
      if (this.dateSelect){
        this.param.content.where.begdate = this.dateSelect[0]
        this.param.content.where.enddate = this.dateSelect[1]
      }else {
        this.param.content.where.begdate = ''
        this.param.content.where.enddate = ''
      }
      this.listData()
    },
    onClose(){
      this.$store.dispatch('changeDetailDrawer',false)
      this.dialogFormVisible = false
      this.param.content.where = {
        "condition": "",
        "begdate": "",
        "enddate": "",
        "type":""
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    detailGo(row){
      console.log(row)
      if (row.type === '1'){
        let route = this.$route
        if (route.path !== '/salerIncomeDetail') {
          this.oldRoute = {path:route.path,query:route.query}
          this.$store.dispatch('setHistoryRouter',this.oldRoute)
        }
        this.$store.dispatch('changeDetailDrawer',true)
        this.$router.push({
          path:'/salerIncomeDetail',
          query:{
            id:row.sa_hrcashbillid,
            rowindex:row.rowindex
          }
        })
      }else {
        let route = this.$route
        if (route.path !== '/salerExpenditureDetail') {
          this.oldRoute = {path:route.path,query:route.query}
          this.$store.dispatch('setHistoryRouter',this.oldRoute)
        }
        this.$store.dispatch('changeDetailDrawer',true)
        this.$router.push({
          path:'/salerExpenditureDetail',
          query:{
            id:row.sa_hrcashbillid,
            rowindex:row.rowindex
          }
        })
      }
    },
    async drawerGo(id){
      this.dialogFormVisible = true
      this.param.content.hrid = id
      const res = await this.$api.requested(this.param)
      this.list = res.data.rows
    }
  },
  mounted() {
    this.dialogFormVisible = true
    this.listData()
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).accountDetailTable.tablecols
  }
}
</script>

<style scoped>

</style>