zhonghan2.0/src/views/Report/RollFilmInventoryInAndOutList/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="单据类型">
          <Select
              v-model="searchData.order_type_title"
              clearable
              filterable
              style="width: 200px"
              transfer
          >
            <Option label="领料单" value="LL"/>
            <Option label="施工单" value="SG"/>
            <Option label="退料单" value="TL"/>
            <Option label="调拨单" value="DB"/>
            <Option label="盘点单" value="PD"/>
            <Option label="初期单" value="QC"/>
            <Option label="施工单:红冲" value="SGHC"/>
          </Select>
        </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">
        <template #order_number="{ row }">
          <a
            @click="handleClick(row)"
            :disabled="row.order_type ? false : true"
            >{{ row.order_number }}</a
          >
        </template>
      </vxe-grid>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectData:[],
      basicRollFilmList: [],
      rollFilmList: [],
      storehouseList: [],
      companyList: [],
      is_open: true,
      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: 'crt_time', title: '业务日期', showHeaderOverflow: true, minWidth: 100 },
          {
            field: 'order_number', title: '单据编码', showHeaderOverflow: true, minWidth: 140, slots: {
              default: 'order_number'
            }
          },
          { field: 'order_name', title: '单据类型', showHeaderOverflow: true, minWidth: 100 },
          { field: 'start_number', title: '期初数量', showHeaderOverflow: true, minWidth: 100 },
          { field: 'in_number', title: '本期收入', showHeaderOverflow: true, minWidth: 100 },
          { field: 'out_number', title: '本期发出', showHeaderOverflow: true, minWidth: 100 },
          { field: 'end_number', 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:2,id,...this.proxyData})
      if(res.code === 200){
        let url = `${this.$store.state.ip}/api/getExport/${res.data.file}`
        location.href = url
      }
    },
    handleClick(row) {
      let url = '';
      let title;
      switch (row.order_type) {
        case 'PD'://盘点
          url = '/cms/BusinessManagement/InventorySheet/detail';
          title = '盘点单详情';
          break;
        case 'SG'://施工
          url = '/cms/BusinessManagement/Construction/detail';
          title = '施工单详情';
          break;
        case 'LL'://领料
          url = '/cms/BusinessManagement/Picking/detail';
          title = '领料单详情';
          break;
        case 'TL'://退料
          url = '/cms/BusinessManagement/MaterialReturn/detail';
          title = '退料单详情';
          break;
        case 'DB'://调拨
          url = '/cms/BusinessManagement/TransferOrder/detail';
          title = '调拨单详情';
          break;
      }
      this.$router.push({ path: url, query: { order_number: row.order_number, title, type: 3 } })
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, index) => {
          if (index === 0) {
            return '合计'
          } else if (['in_number','out_number','start_number','end_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.proxyData = JSON.parse(JSON.stringify(this.searchData));
      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/RollFilmInventoryInAndOutList', { ...row }).then(res => {
        this.gridOptions.data = res.data;
        this.selectData = [];
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.form_item {
  margin-bottom: 15px !important;
}
.table_content {
  height: calc(100% - 200px);
}
</style>