udiwms-vue-frame/src/views/drugInout/stat/IoStatYearSearch.vue

<template>
  <div>
    <el-card class="el-card">
      <el-form :model="filterQuery" class="query-form" size="mini" :inline="true">
        <el-form-item class="query-form-item" label="汇总记录号:">
          <el-input v-model="filterQuery.recordKey" placeholder="请输入汇总记录号"
                    clearable="true"></el-input>
        </el-form-item>

        <el-form-item class="query-form-item" label="汇总日期:">
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="actDateRange"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            >重置
            </el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询
            </el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="list" style="width: 100%;" highlight-current-row class="table-fixed"
                border
                @current-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="仓库" prop="invName"></el-table-column>
        <el-table-column label="名称" prop="title"></el-table-column>
        <el-table-column label="记录号" prop="recordKey"></el-table-column>
        <el-table-column label="汇总日期" prop="date"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getList"
      ></pagination>
    </el-card>

    <el-tabs type="border-card" style="margin: 15px">
      <!--单据业务详情-->
      <el-tab-pane>
        <span slot="label">{{ currentRow.title }}-详情</span>
        <el-form :inline="true" :model="detailQuery" class="query-form" size="mini">
          <el-form-item class="query-form-item" label="产品名称:">
            <el-input
              v-model="detailQuery.productName"
              placeholder="请输入产品名称"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item class="query-form-item" label="批次号:">
            <el-input
              v-model="detailQuery.batchNo"
              placeholder="请输入批次号"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item class="query-form-item" label="规格型号:">
            <el-input
              v-model="detailQuery.ggxh"
              placeholder="请输入规格型号"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="resetDetailQuery"
              >重置
              </el-button>
              <el-button type="primary" @click="searchDetail"
                         icon="el-icon-search"
              >查询
              </el-button>
              <el-button type="primary" @click="excel"
                         icon="el-icon-upload2"
              >导出
              </el-button>
            </el-button-group>
          </el-form-item>
        </el-form>

        <el-table v-loading="detailLoading" :data="detailList" style="width: 100%" border
                  row-key="id"
        >
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="产品名称" prop="productName" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次号" prop="batchNo" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="规格型号" prop="ggxh" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column label="仓库" prop="deptName" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column label="期初" header-align="center">
            <el-table-column label="数量" prop="beginCount" width="80"></el-table-column>
            <el-table-column label="价格" prop="beginPrice" width="100"></el-table-column>
            <el-table-column label="金额" prop="beginAmount" width="100"></el-table-column>
          </el-table-column>
          <el-table-column label="入库" header-align="center">
            <el-table-column label="数量" prop="inCount" width="80"></el-table-column>
            <el-table-column label="价格" prop="inPrice" width="100"></el-table-column>
            <el-table-column label="金额" prop="inAmount" width="100"></el-table-column>
          </el-table-column>
          <el-table-column label="出库" header-align="center">
            <el-table-column label="数量" prop="outCount" width="80"></el-table-column>
            <el-table-column label="价格" prop="outPrice" width="100"></el-table-column>
            <el-table-column label="金额" prop="outAmount" width="100"></el-table-column>
          </el-table-column>

          <el-table-column label="结余" header-align="center">
            <el-table-column label="数量" prop="balanceCount" width="80"></el-table-column>
            <el-table-column label="价格" prop="balancePrice" width="100"></el-table-column>
            <el-table-column label="金额" prop="balanceAmount" width="100"></el-table-column>
          </el-table-column>
        </el-table>
        <pagination
          v-show="detailTotal>0"
          :total="detailTotal"
          :page.sync="detailQuery.page"
          :limit.sync="detailQuery.limit"
          @pagination="getDetailList"
        />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import {getStatOrderList, filterYearList, excelImport} from "@/api/inout/statData";
import {isBlank} from "@/utils/strUtil";

const formJson = {
  site_id: "",
  site_name: "",
  describe: "",
  ads: [],
};

export default {
  name: "IoStatYearSearch",
  data() {
    return {
      showSearch: true,
      filterQuery: {
        recordKey: null,
        type: 1,
        startTime: null,
        endTime: null,
        page: 1,
        limit: 10,
      },
      loading: false,
      list: [],
      total: 0,
      detailQuery: {
        recordKey: null,
        productName: null,
        batchNo: null,
        ggxh: null,
        page: 1,
        limit: 10
      },
      detailLoading: false,
      detailList: [],
      detailTotal: 0,
      currentRow: {
        title: "年汇总记录",
        recordKey: null
      },
      actDateRange: [],
      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]);
            },
          },
        ],
      },
    };
  },
  components: {},
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        recordKey: null,
        type: 1,
        startTime: null,
        endTime: null,
        page: 1,
        limit: 10,
      };
      this.actDateRange = [];
      this.getList();
    },
    onSubmit() {
      this.loading = true;
      this.clearDetailList();
      if (this.actDateRange !== null) {
        this.filterQuery.startTime = this.actDateRange[0];
        this.filterQuery.endTime = this.actDateRange[1];
      } else {
        this.filterQuery.startTime = null;
        this.filterQuery.endTime = null;
      }
      this.filterQuery.page = 1;
      this.getList();
    },
    excel() {
      if (isBlank(this.currentRow.recordKey)) {
        return this.$message.error("请选择要导出的数据！");
      }
      let params = {billNo: this.currentRow.recordKey, key: "year"};
      excelImport(params).then(res => {
        let blob = new Blob([res], {type: "application/vnd.ms-excel"});
        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
        let a = document.createElement("a");
        a.href = url;
        a.click();
        this.$message("成功")
      })

    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    handleSelectionChange(row) {
      this.currentRow = row;
      this.getDetailList();
    },
    // 清空单据详情数据列表
    clearDetailList() {
      this.detailQuery = {
        recordKey: null,
        productName: null,
        batchNo: null,
        ggxh: null,
        page: 1,
        limit: 10
      }
      this.detailLoading = false;
      this.detailList = [];
      this.detailTotal = 0;
    },
    //获取订单列表
    getList() {
      this.loading = true;
      this.clearDetailList();
      this.currentRow = {
        title: "年汇总记录",
        recordKey: null
      };
      getStatOrderList(this.filterQuery).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.list = res.data.list || [];
          this.total = res.data.total || 0;
        }
      }).catch((error) => {
        this.$message.error(error.message);
        this.list = [];
        this.total = 0;
      })
    },
    resetDetailQuery() {
      this.detailQuery = {
        recordKey: null,
        productName: null,
        batchNo: null,
        ggxh: null,
        page: 1,
        limit: 10
      }
      this.getDetailList();
    },
    searchDetail() {
      this.detailQuery.page = 1;
      this.getDetailList();
    },
    getDetailList() {
      this.detailLoading = true;
      this.detailQuery.recordKey = this.currentRow.recordKey;
      filterYearList(this.detailQuery).then((res) => {
        if (res.code === 20000) {
          this.detailLoading = false;
          this.detailList = res.data.list || [];
          this.detailTotal = res.data.total || 0;
        } else {
          this.detailList = [];
          this.detailTotal = 0;
        }
      }).catch((error) => {
        this.$message.error(error.message);
        this.detailList = [];
        this.detailTotal = 0;
      })
    },
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        false: "success",
        true: "warning",
      };
      return statusMap[status];
    },
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>

</style>