初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/views/outbound/index.vue

@@ -1,6 +1,241 @@
<template>
  <div style="padding:30px;">
    库存台账
    <el-alert :closable="false" title="menu 2" />
  <div class="out-bound">
    <div class="out-bound-main">
      <el-row type="flex" align="middle" class="main-top">
        <el-col :span="2" :style="{color:'#409EFF'}"> <span class="iconfont icon-taizhangzhangbuxinxichaxun" /> 收发存管理</el-col>
        <el-col :span="20">
          <TableSearch :excel-name="'收发存管理表'" :show="false" :file="file" :get-list="getInventoryList" :search-data="searchData" :search-params="searchModel" />
        </el-col>
        <el-col :span="2">
        <!-- <el-button @click="goToOutboundLedger" icon="iconfont icon-caiwushoufacunguanli">查看台账</el-button> -->
        </el-col>
      </el-row>
      <el-table
        :row-class-name="onTableRowClassName"
        :row-style="{height:0+'px'}"
        :cell-style="{padding:8+'px',textAlign: 'center'}"
        :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
        :stripe="true"
        :data="tableData"
        :border="true"
        header-row-class-name="table-header"
      >
        <!-- <el-table-column
        type="selection"
        width="55">
      </el-table-column> -->
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          prop="productCode"
          label="产品编码"
        />
        <el-table-column
          prop="productName"
          label="产品名称"
        />
        <el-table-column
          prop="productModel"
          label="规格型号"
        />
        <el-table-column
          prop="productUnit"
          label="单位"
        />
        <el-table-column
          prop="beginningInventory"
          label="初期库存数量"
        />
        <el-table-column
          prop="issueInCurrentPeriod"
          label="本期出库数量"
        />
        <el-table-column
          prop="currentPeriod"
          label="本期入库数量"
        />
        <el-table-column
          prop="closingInventory"
          label="期末库存数量"
        />
      <!-- <el-table-column
        label="操作">

        <el-button size="mini" type="text" @click="delItem()">删除</el-button>
      </el-table-column> -->
      </el-table>
      <div class="out-bound-foot">
        <el-pagination
          :current-page="searchModel.pageNo"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="searchModel.pageSize"
          layout="->, total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>
</template>

<script>
import { getInventoryList, file } from '@/api/outbound'
import TableSearch from '@/components/TableSearch'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {
    TableSearch
  },
  data() {
    return {
      file,
      getInventoryList,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      inType: '',
      inStatus: '',
      deptName: '',
      statusType: {},
      queryParams: {
        encode: '',
        type: '',
        depositor: ''
      },
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10,
        endTime: '',
        startTime: ''
      },
      tableData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    delItem() {
      console.log('删除')
    },
    searchData(res) {
      console.log(res)
      const { row, total, startTime, endTime } = res
      this.tableData = row
      this.total = total
      this.searchModel.startTime = startTime
      this.searchModel.endTime = endTime
    },
    onTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return 'onAcitve'
      } else {
        return ''
      }
    },
    goToOutboundLedger() {
    },
    fetchData() {
      this.listLoading = true
      this.listLoading = true
      const obj = {}
      const arr = Object.keys(this.searchModel).filter(key => this.searchModel[key])
      arr.forEach(item => obj[item] = this.searchModel[item])
      console.log(obj)
      getInventoryList(obj).then(response => {
        this.tableData = response.data.row
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';

.out-bound {
 min-height: calc(100vh - 100px);
 padding: 25px;
 background: $mainBg;
 display: flex;
 flex-direction: column;
 .out-bound-main{
  background: #fff;
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
//  .el-table--striped .el-table__body tr.el-table__row--striped td {
//     background: #F2F2F2 !important;
// }
  .main-top{}
  .table-header{
    background: #6095FB;
  }
  .el-table{
    flex: 1;
   ::v-deep .onAcitve td{
    background-color: #F2F2F2 !important;
  }
  }
  .out-bound-foot{
  margin-top: 25px;
  .el-pagination{
    display: flex;
    justify-content: right;
  }
 }
 }
 
}

// /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
//    background: #1e116d;
// }
</style>