zhonghan2.0/src/views/Report/QuantityOnHand/index.vue

<template>
  <div>
    <Toptitle>
      <template #left>
        <Button type="primary" @click="is_open = !is_open">{{
          is_open ? "收缩" : "展开"
        }}</Button>
      </template>
      <template #right>
        <Button type="primary" ghost @click="handleExport">导出</Button>
      </template>
    </Toptitle>
    <div
      :style="
        is_open
          ? 'max-height:200px;transition: all .5s;'
          : 'max-height:0px;overflow: hidden;transition: all .5s;'
      "
    >
      <Form :label-width="120" style="display: flex; flex-wrap: wrap">
        <FormItem label="入库日期">
          <DatePicker
              v-model="searchData.crt_time"
              clearable
              type="daterange"
              style="width: 200px"
              transfer
              placeholder="年/月/日"
          />
        </FormItem>
        <FormItem label="所属集团">
          <Select
            transfer
            filterable
            clearable
            v-model="searchData.company_id"
            style="width: 200px"
          >
            <Option
              v-for="item in companyList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="仓库名称">
          <Select
            transfer
            filterable
            clearable
            v-model="searchData.storehouse_id"
            style="width: 200px"
          >
            <Option
              v-for="item in storehouseList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="卷膜分类">
          <Select
            v-model="searchData.b_r_f_id"
            clearable
            filterable
            transfer
            style="width: 200px"
          >
            <Option
              v-for="item in basicRollFilmList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="卷膜代码">
          <Input
            clearable
            placeholder="请输入"
            style="width: 200px"
            v-model="searchData.code"
          />
        </FormItem>
        <FormItem label="卷膜型号">
          <Select
            v-model="searchData.roll_film_id"
            clearable
            filterable
            style="width: 200px"
            transfer
          >
            <Option
              v-for="item in rollFilmList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="卷膜编号">
          <Input
            clearable
            placeholder="请输入"
            style="width: 200px"
            v-model="searchData.roll_film_number"
          />
        </FormItem>
        <FormItem label="在库天数">
          <Input
              clearable
              placeholder="请输入"
              style="width: 200px"
              v-model="startDay"
          />&nbsp;&nbsp;~&nbsp;&nbsp;
          <Input
              clearable
              placeholder="请输入"
              style="width: 200px"
              v-model="endDay"
          />
        </FormItem>
        <FormItem :label-width="40">
          <Button type="primary" @click="handleSearch">查询</Button>
        </FormItem>
      </Form>
    </div>
    <div class="table_content">
      <vxe-grid v-bind="gridOptions"
                :footer-method="footerMethod"
                @checkbox-all="selectAllEvent"
                @checkbox-change="selectChangeEvent">
      </vxe-grid>
    </div>

    <Footer
      :pageSize="pageSize"
      :pageIndex="pageIndex"
      :total="total"
      @changeSize="changeSize"
      @changePage="changePage"
    ></Footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startDay:'',
      endDay:'',
      selectData:[],
      basicRollFilmList: [],
      rollFilmList: [],
      storehouseList: [],
      companyList: [],
      is_open: true,
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      sort: null,
      is_show: false,
      searchData: {},
      proxyData: {},
      gridOptions: {
        border: true,
        resizable: true,
        maxHeight: 'auto',
        showOverflow: true,
        showFooter: true,
        align: 'left',
        columns: [
          { type: 'checkbox', width: 50, fixed: 'left' },
          { type: 'seq', title: '序号', width: 80 },
          { field: 'company_name', title: '所属集团', showHeaderOverflow: true, minWidth: 100 },
          { field: 'storehouse_name', title: '仓库名称', showHeaderOverflow: true, minWidth: 100 },
          { field: 'b_r_f_name', title: '卷膜分类', showHeaderOverflow: true, minWidth: 100 },
          { field: 'code', title: '卷膜代码', showHeaderOverflow: true, minWidth: 100 },
          { field: 'title', title: '卷膜型号', showHeaderOverflow: true, minWidth: 100 },
          { field: 'roll_film_number', title: '卷膜编号', showHeaderOverflow: true, minWidth: 100 },
          { field: 'unit', title: '计量单位', showHeaderOverflow: true, minWidth: 100 },
          { field: 'number', title: '现存数量', showHeaderOverflow: true, minWidth: 100 },
          { field: 'crt_time', title: '入库时间', showHeaderOverflow: true, minWidth: 100 },
        ],
        data: []
      },
    }
  },
  created() {
    //获取集团
    this.axios.post('/api/companyList').then(res => {
      this.companyList = res.data.data;
    })
    //获取仓库
    this.axios.post('/api/storehouseList').then(res => {
      this.storehouseList = res.data.data;
    })
    //获取卷膜型号
    this.axios.post('/api/rollFilmList').then(res => {
      this.rollFilmList = res.data.data
    })
    //获取卷膜分类
    this.axios.post('/api/basicRollFilmList').then(res => {
      this.basicRollFilmList = this.getArr(res.data);
    })
  },
  mounted() {

  },
  methods: {
    selectAllEvent(e) {
      this.selectData = e.records;

    },
    selectChangeEvent(e) {
      this.selectData = e.records;

    },
    async handleExport(){
      if(this.selectData.length==0){
        return this.$Message.warning('请选择需要导出的数据！')
      }
      let id = this.selectData.map(v=>v.id);
      const res = await this.axios.post('/api/exportFileReport',{type:1,id})
      if(res.code === 200){
        let url = `${this.$store.state.ip}/api/getExport/${res.data.file}`
        location.href = url
      }
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, index) => {
          if (index === 0) {
            return '合计'
          } else if (['number'].includes(column.property)) {
            return this.sumNum(data, column.property)
          }
          return null
        })
      ]
    },
    sumNum(list, field) {
      let count = 0
      list.forEach(item => {
        count += Number(item[field] ? item[field] : 0)
      })
      return count.toFixed(2)
    },
    getArr(arr) {
      let data = [];
      arr.forEach(ele => {
        data.push(ele);
        if (ele.children.length != 0) {
          data = [...data, ...this.getArr(ele.children)];
        }


      });
      return data;
    },
    handleSearch() {
      this.pageIndex = 1;
      this.proxyData = JSON.parse(JSON.stringify(this.searchData));
      if(this.startDay&&this.endDay){
        this.proxyData.stock_age = [this.startDay,this.endDay]
      }
      this.proxyData.crt_time = [this.proxyData.crt_time[0] ? Date.parse(this.proxyData.crt_time[0]).toString().slice(0, 10) : '', this.proxyData.crt_time[1] ? (Date.parse(this.proxyData.crt_time[1])+86400000-1).toString().slice(0, 10) : '']
      this.initData(this.proxyData);
    },
    initData(row) {
      this.axios.post('/api/RollFilmInventoryList', { ...row, page_size: this.pageSize, page_index: this.pageIndex }).then(res => {
        this.gridOptions.data = res.data.data;
        this.total = res.data.total;
        this.selectData = [];
      })
    },
    changePage(e) {
      this.pageIndex = e;
      this.initData(this.proxyData);
    },
    changeSize(e) {
      this.pageSize = e;
      this.pageIndex = 1;
      this.initData(this.proxyData);
    },
  }
}
</script>
<style lang="scss" scoped>
.form_item {
  margin-bottom: 15px !important;
}
.table_content {
  height: calc(100% - 250px);
}
</style>