kd-aiot-frontend-wms/src/views/warehouseManagement/statisticalReports/inventoryBalance/index.vue

<template>
  <div id="inventoryBalance">
    <el-card shadow="never">
      <!-- 数据表格 -->
      <div>
        <el-form
          label-width="60px"
          label-position="left"
          class="ele-form-search"
          @keyup.enter.native="search"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="关键词:" prop="keyWord">
                <el-input
                  clearable
                  v-model="keyWord"
                  placeholder="请输入关键词"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="search"
                  size="small"
                >
                  查询
                </el-button>
                <el-button
                  @click="reset"
                  icon="el-icon-refresh-left"
                  size="small"
                  type="primary"
                  >重置</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <ele-pro-table
        ref="table"
        class="table"
        :columns="columns"
        :datasource="datasource"
        :pageSize="20"
        height="calc(100vh - 405px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
      >
        <template v-slot:toolbar="{ row }">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="add(false)"
          >
            新增
          </el-button>
        </template>
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="add(true, row)"
          >
            详情
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-download"
            @click="downLoad(row)"
          >
            下载
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <add ref="addRef" @reload="search" />
  </div>
</template>

<script>
  import add from './add.vue';
  import ItemSearch from './components/item-search.vue';
  import {
    getStatementLogPage,
    exportStockExcel
  } from '@/api/warehouseManagement/statisticalReports';

  export default {
    components: { ItemSearch, add },
    data() {
      return {
        keyWord: '',
        columns: [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center'
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'startTime',
            label: '开始时间',
            slot: 'startTime',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'endTime',
            label: '结束时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            fixed: 'right',
            width: 250,
            align: 'center',
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    methods: {
      downLoad(row) {
        exportStockExcel({
          code: row.code,
          name: row.name,
          startTime: row.startTime,
          endTime: row.endTime,
          exportStatus: 1
        }).then((data) => {
          try {
            let objectUrl1 = window.URL.createObjectURL(new Blob([data]));
            let elink = document.createElement('a');
            elink.setAttribute(
              'download',
              decodeURI(decodeURI('库存余额.xlsx'))
            );
            elink.style.display = 'none';
            elink.href = objectUrl1;
            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink);
            window.URL.revokeObjectURL(elink.href);
            this.search();
          } catch (err) {
            this.$message.error('导出失败,请联系管理员!');
          }
        });
      },
      add(isView, row) {
        console.log('isView--', isView);
        console.log('row-----', row);
        this.$refs.addRef.open(isView, row);
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        const data = getStatementLogPage({
          ...where,
          ...order,
          type: 1,
          keyWord: this.keyWord,
          pageNum: page,
          size: limit
        });
        return data;
      },
      search() {
        this.$refs.table.reload();
      },
      reset() {
        this.keyWord = '';
        this.search();
      }
    }
  };
</script>
<style lang="scss" scoped>
  #inventoryBalance {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    // element-ui样式穿透
    :deep(.el-card) {
      height: 100%;
      .el-card__body {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .ele-pro-table {
          flex: 1;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            // display: flex;
            // flex-direction: column;
            // .el-table__body-wrapper {
            //   flex: 1;
            // }
          }
        }
      }
      .el-form-item {
        margin-bottom: 5px !important;
      }
    }
    .ele-form-actions {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>