bonus-ui/src/views/material/repair/scrapLedger/index.vue

<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item  prop="month">
            <el-date-picker
              v-model="queryParams.month"
              type="month"
              placeholder="请选择月份"
              value-format="yyyy-MM">
            </el-date-picker>
        </el-form-item>
        <el-form-item  prop="keyWord">
            <el-input
                v-model="queryParams.keyWord"
                placeholder="请输入关键词"
                clearable
                @keyup.enter.native="handleQuery"
                maxlength="20"
            />
        </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-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning" plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                >导出数据</el-button>
            </el-col>
        </el-row>


      <el-table v-loading="loading" :data="tableList" ref="multipleTable" row-key="taskId"  border>
        <el-table-column label="序号" align="center" width="80" type="index">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="月份" align="center" prop="month"  :show-overflow-tooltip="true"/>
        <el-table-column label="报废数量" align="center" prop="scrapNum"  :show-overflow-tooltip="true"/>
        <el-table-column label="报废费用(万元)" align="center" prop="totalCost" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" width="230">
              <template slot-scope="scope">
                  <el-button
                      type="primary" 
                      icon="el-icon-search"
                      size="mini"
                      @click="handleView(scope.row)"
                  >
                      查看
                  </el-button>
              </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </div>
  </template>

  <script>
import { getScrapList } from '@/api/repair/scrapLedgerReview';
import { downloadFile } from '@/utils/download'
import { getToken } from '@/utils/auth'
  export default {
    name: "ScrapLedgerList",
    dicts: ['part_task_status'],
    data() {
      return {
        // 遮罩层
        loading: false,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        showHouse: false,
        ids: [],
        infos: [],
        // 总条数
        total: 0,
        //表格数据
        tableList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined,
          month:undefined,
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            console.log(this.queryParams)
            getScrapList(this.queryParams).then(response => {
                this.tableList = response.data.rows;
                this.total = response.data.total;
                this.loading = false;
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        //查看
        handleView(row){
            console.log(row)
            let query = { "month":row.month,isView:"true" }
            this.$tab.closeOpenPage({
                path: '/repair/scrapLedgerDetail',
                query,
            })
        },
        handleExport() {
            this.download(
                "/material/scrap_apply_details/exportScrapList",
                { ...this.queryParams},
                `报废台账查询_${new Date().getTime()}.xlsx`
            );
        },


    }
  };
  </script>
  <style lang="scss" scoped>
  .image-type {
    /* 旋转图片 */
    transform: rotate(-90deg);
    /* 确保旋转后的图片不会超出容器 */
    max-width: 100%;
    /* 保持图片的宽高比 */
    width: 40px;
    height: 80px;
  }
  .sign-type{
    width: 80px;
    height: 40px;
  }
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  </style>