yiliangyiyun-pc/src/views/profitable/pettyAccount.vue

//备用金账户
<template>
  <div class="container">
    <el-row class="row_top">
      <el-col :span="12">
        <h2 class="bg-left title">备用金账户</h2>
      </el-col>
      <el-col :span="12" class="bg-right">
        <el-button class="bg-bottom" type="primary" size="small" @click="returnsales()"><img width="6" height="10"
            style="vertion-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
        </el-button>
      </el-col>
    </el-row>
    <div class="center">
      <el-row style="margin-bottom: 10px;display: flex;">
        <el-col :span="18">
          <el-button style="margin-left: 10px" @click="typeChange('')" :type="searchType == '' ? 'primary' : ''">全部
          </el-button>
          <el-button @click="typeChange(1)" :type="searchType == 1 ? 'primary' : ''">有余额</el-button>
          <el-button @click="typeChange(3)" :type="searchType == 3 ? 'primary' : ''">无余额</el-button>
        </el-col>
        <el-col :span="18">
          <div class="datascreen">
            <el-input style="width: 500px;" class="options_css" v-model="searchKeyWord" placeholder="可按员工姓名进行查找" clearable maxlength="500" type="input"
           @keyup.enter.native="find()"></el-input>
            <el-button class="find" type="primary" @click="find()"><img width="16" height="16" style="left: -8px"
                src="../../../public/img/sousuo.png" alt="" /></el-button>
          </div>
        </el-col>
      </el-row>
      <div class="fromdata">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号">
            <template scope="scope">
              <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
              <span v-else>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="员工姓名">
          </el-table-column>
          <el-table-column prop="deptName" label="部门名称">
          </el-table-column>
          <el-table-column prop="amountMoney" label="账户余额(元)">
          </el-table-column>
          <el-table-column label="账单">
            <template slot-scope="scope">
              <span @click="billView(scope.row)" style="color:blue">查看</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        style="text-align: center" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="deptBudgetTotal">
      </el-pagination>

      <el-dialog width='30%' :visible.sync="dialogVisible" title="账单">
        <el-form ref="form" label-width="90px">
          <div v-if="pettAccount.expenseInfoList">
            <div v-for="item in pettAccount.expenseInfoList">
              <div class="flex">
                <div style="display: block;">
                  <el-form-item>
                    <span v-if="item.expensesType == 1">退款</span>
                    <span v-else-if="item.expensesPurpose != 7 && item.expensesType == 2 ">付款</span>
                    <span v-else-if="item.expensesType == 2">请款</span>
                  </el-form-item>
                  <el-form-item>
                    {{item.costNo}}
                  </el-form-item>
                </div>
                <div style="display:block">
                  <el-form-item>
                    {{item.amountMoney}}元
                  </el-form-item>
                  <el-form-item>
                    {{item.createDate.split(" ")[0] }}
                  </el-form-item>
                </div>
              </div>
              <div style="border-bottom:1px solid #ccc;margin-bottom:18px;"></div>
            </div>
          </div>
          <div style="margin-left:150px">
            <el-form-item>
              <el-button @click="dialogVisible=false">关闭</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import WsUpload from '@/components/WsUpload'
import {
    pettAccountList
} from '@/model/profitable/index'
export default {
  components: {
    WsUpload,
  },
  data() {
    return {
      value: '',
      tableData: [],
      tableData1: [],
      deptBudgetTotal: 0,
      currentPage: 1,
      pageSize: 10,
      showFlag: false,
      size: 100,
      expensesPurpose: '',
      recordList: [],
      dialogVisible: false,
      toExamineType: '',
      compId: localStorage.getItem('ws-pf_compId'),
      deptCircularPage: {},
      searchType: '',
      searchKeyWord: '',
      pettAccount:{},
      userName:'',
      title: '附件',
      title1: '',
      outtotal: 0,
      intotal: 0,
      fujianshow: false,
      statusdata: {},
      appendixIdss: [],
      appendixIdss1: '',
      approveStatus: false,
      currectdata: {},
      choiceObj: [],
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    getList1() {
      this.currentPage = 1
      this.getList()
    },
    returnsales() {
      this.$router.go(-1)
    },
    typeChange(num) {
      this.searchType = num
      this.getList()
    },
    getList() {
      pettAccountList({
        compId: localStorage.getItem('ws-pf_compId'),
        searchKeyWord: this.searchKeyWord,
        expenseName:this.expenseName,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        searchType: this.searchType,
      })
        .toPromise()
        .then((response) => {
          this.tableData = response.records
          this.deptBudgetTotal = response.total
        })
    },
    billView(row){
        this.pettAccount = row
        this.dialogVisible = true
      },
    find() {
      this.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  background: #e8ecf6;
}

.center {
  margin: 0 auto;
  background: #ffffff;
  // height: calc(100vh - 13vh);
  border-radius: 4px;
  padding: 20px 0;

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
  }
}

.row_top {
  background: #f6f7fc;
  border-radius: 4px;
  margin-bottom: 10px;

  .bg-left {
    padding-left: 30px;
  }

  .bg-right {
    padding-right: 10px;
    text-align: right;
  }

  .title {
    position: relative;
  }

  .title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 30px;
    background: #5473e8;
    position: absolute;
    left: 0;
  }
}

.datascreen {
  display: flex;
  justify-content: right;

  .data_css {
    width: 40%;
  }

  .input_css {
    width: 50%;
    margin: 0 10px;
  }

  .find {
    margin-right: 10px;
  }
}

.fromdata {
  margin: 20px 0;
  overflow-y: scroll;
  height: 546px;
}

.top_info {
  margin: 10px 0 0 10px;
  min-width: 712px;

  .info_css {
    margin-right: 20px;
  }
}

.bg-right {
  padding-top: 15px;
}

.options_css {
  margin: 0 5px;
}
</style>