index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">

      <el-form-item label="指定分类" prop="sortType">
        <el-select v-model="queryParams.sortType" placeholder="请选择分类类型" clearable @change="sortChange">
          <el-option label="按部门分类" value="0"/>
          <el-option label="按经办人分类" value="1"/>
          <el-option label="按使用人分类" value="2"/>
        </el-select>
      </el-form-item>

      <el-form-item label="部门" prop="purchaseDeptId">
        <div style="width: 210px">
          <treeselect
            v-model="queryParams.purchaseDeptId"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择卖方部门"
          />
        </div>
      </el-form-item>

      <el-form-item label="经办人" prop="handledByUserName">
        <el-input
          v-model="queryParams.handledByUserName"
          placeholder="请输入费用名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="使用人" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入使用人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="物品名称" prop="purchaseName" v-if="tab == '0'">
        <el-input
          v-model="queryParams.purchaseName"
          placeholder="请输入物品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="费用名称" prop="purchaseName" v-if="'1' == tab">
        <el-input
          v-model="queryParams.purchaseName"
          placeholder="请输入费用名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="用途" prop="applicationDescription">
        <el-input
          v-model="queryParams.applicationDescription"
          placeholder="请输入费用名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="申请时间">
        <el-date-picker
          v-model="applyTime"
          size="small"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange"
          style="width: 340px"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="状态" prop="purchaseStatus">
        <el-select v-model="queryParams.purchaseStatus" placeholder="请选择采购状态" clearable size="small">
          <el-option
            v-for="item in purchaseStatusList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <el-button
      type="warning"
      plain
      icon="el-icon-download"
      size="mini"
      style="margin-bottom: 10px"
      @click="handleExport">
      导出
    </el-button>

    <el-card class="box-card">
      <div class="outer-div">
        <header class="header">
          <ul class="tab-tilte">
            <li :class="{ active: tab == 0 }" @click="changeTab(0)">
              物品采购
            </li>
            <li :class="{ active: tab == 1 }" @click="changeTab(1)">
              服务费用
            </li>
          </ul>
        </header>

        <div class="tab-content">
          <div v-if="tab == 0" :key="tab">
            <TableList ref="tableList" :param="this.queryParams"/>
          </div>
          <div v-if="tab == 1" :key="tab">
            <TableList ref="tableList" :param="this.queryParams"/>
          </div>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
  import TableList from "../components/TableList";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "purchase-calculate-index",
    components:{
      TableList,
      Treeselect
    },
    data(){
      return{
        queryParams:{
          purchaseDeptId: null,
          purchaseType: '0',
          handledByUserName: null,
          userName: null,
          purchaseName: null,
          applicationDescription: null,
          purchaseStatus: null,
          applyBeginTime: null,
          applyEndTime: null,
          sortType: '0'
        },
        purchaseStatusList: [],
        applyTime: [],
        tab: 0,
        deptOptions: []
      }
    },
    created(){
      this.getPurchaseStatusList();
      this.getTreeselect();
      this.getCurrentMonthTime();
    },
    methods:{
      /** 搜索按钮操作 */
      handleQuery() {
        this.$refs.tableList.getPurchaseList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.applyBeginTime = null;
        this.queryParams.applyEndTime = null;
        this.applyTime = [];
        //this.queryParams.purchaseType = '0';
        this.handleQuery();
      },
      getPurchaseStatusList(){
        this.getDicts("purchaseStatus").then((response) => {
          this.purchaseStatusList = response.data;
        });
      },
      //时间切换
      timeChange(value) {
        if (value) {
          this.queryParams.applyBeginTime = value[0];
          this.queryParams.applyEndTime = value[1];
        }else{
          this.queryParams.applyBeginTime = null;
          this.queryParams.applyEndTime = null;
        }
      },
      changeTab(tabNum){
        this.tab = tabNum;
        if("0" == tabNum){
          this.queryParams.purchaseType = "0";
        }else{
          this.queryParams.purchaseType = "1";
        }
      },
      sortChange(){
        this.handleQuery();
      },
      getTreeselect() {
        treeselect().then((response) => {
          this.deptOptions = response.data;
        });
      },
      //导出
      handleExport(){
        this.$refs.tableList.purchaseExport();
      },
      getCurrentMonthTime(){
        let now = new Date(); // 获取当前日期时间
        let firstDate = new Date(now.getFullYear(), now.getMonth(), 1);
        let lastDate = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
        let firstDateStr = firstDate.toLocaleDateString().replace(/\//g, "-") + " " + firstDate.toTimeString().substr(0, 8);
        let lastDateStr = lastDate.toLocaleDateString().replace(/\//g, "-") + " " + lastDate.toTimeString().substr(0, 8);
        this.applyTime = [firstDateStr,lastDateStr];
        this.timeChange(this.applyTime);
      }
    }
  }
</script>

<style scoped lang="scss">
  .outer-div {
    //padding: 24px;
    margin: 0 auto;
  }
  .header {
    height: 47px;
    width: 100%;
    //border-bottom: 1px solid #ebebeb;
    //margin-bottom: 24px;
  }
  ul li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tab-tilte {
    font-family: PingFangSC-Semibold;
    letter-spacing: 0;
    width: 90%;
    padding-left: 0;
  }
  .tab-tilte li {
    float: left;
    font-size: 16px;
    color: #999999;
    // line-height: 53px;
    text-align: center;
    margin-right: 30px;
    cursor: pointer;
  }
  /* 点击对应的标题添加对应的背景颜色 */
  .tab-tilte .active {
    color: #3385ff;
    // border-bottom: 2px solid #3385ff;
  }

  .tab-content{
    height: 450px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }
</style>