hb_sis_zhfx/src/views/allLifeManage/tab1.vue

<template>
  <div class="knowledge-2">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">供应商：</div>
          <div class="search-input">
            <el-select
              v-model="vendor"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in vendorArray"
                :key="item.company"
                :value="item.company"
                :label="item.company"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">采购单号：</div>
          <div class="search-input">
            <el-input
              placeholder="请输入描述"
              size="middle"
              v-model="ponum"
              clearable
            ></el-input>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">仓库：</div>
          <div class="search-input">
            <el-select
              v-model="warehouse"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in warehouseArray"
                :key="item.warehouse"
                :value="item.warehouse"
                :label="item.warehouse"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              size="medium"
              v-model="dateArea"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="query-actions" style="margin-right: 1500px">
        <button class="btn green" @click="onClickSearch">查询</button>
      </div>
    </div>
    <div>
      <ComTable :data="tableData" height="85vh"></ComTable>
    </div>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";

export default {
  components: { ComTable },
  data() {
    return {
      dateArea: [
        this.fmtDate(
          new Date(
            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30)
          )
        ),
        this.fmtDate(new Date()),
      ],
      pageSize: 100,
      pageNum: 1,
      ponum: "",
      vendor: "联合动力",
      vendorArray: [],
      warehouse: "麻黄山仓库",
      warehouseArray: [],
      tableData: {
        column: [
          {
            name: "采购单号",
            field: "ponum",
            is_num: true,
            is_light: false,
          },
          {
            name: "状态",
            field: "status",
            is_num: false,
            is_light: false,
          },
          {
            name: "状态日期",
            field: "statusdate",
            is_num: false,
            is_light: false,
          },
          {
            name: "供应商",
            field: "vendor",
            is_num: false,
            is_light: false,
          },
          {
            name: "总成本",
            field: "totalcost",
            is_num: false,
            is_light: false,
          },
          {
            name: "含税总成本",
            field: "totaltax",
            is_num: true,
            is_light: false,
          },
          {
            name: "地点",
            field: "sitenum",
            is_num: false,
            is_light: false,
          },
          {
            name: "描述",
            field: "cription",
            is_num: false,
            is_light: false,
          },
          {
            name: "库存项目",
            field: "itemnum",
            is_num: false,
            is_light: false,
          },
          {
            name: "仓库",
            field: "warehouse",
            is_num: false,
            is_light: false,
          },
          {
            name: "订购数量",
            field: "orderqty",
            is_num: false,
            is_light: false,
          },
          {
            name: "订购单位",
            field: "orderunit",
            is_num: false,
            is_light: false,
          },
          {
            name: "不含税单价",
            field: "unitcost",
            is_num: false,
            is_light: false,
          },
          {
            name: "含税行成本",
            field: "linecost",
            is_num: false,
            is_light: false,
          },
          {
            name: "录入日期",
            field: "enterdate",
            is_num: false,
            is_light: false,
          },
          {
            name: "录入人",
            field: "enterby",
            is_num: false,
            is_light: false,
          },
          {
            name: "规格型号",
            field: "modelnum",
            is_num: false,
            is_light: false,
          },
        ],
        data: [],
      },
    };
  },
  created() {
    // this.requestSafeList();
    this.value1 = this.getTime(1);
    this.value2 = this.getTime(2);
    this.getVendor();
  },
  methods: {
    getTime(val) {
      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
      var date = new Date();
      var year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      var begin = year + "-" + month + "-01";
      var end = year + "-" + month + "-" + day;
      if (val == 1) {
        return begin;
      } else if (val == 2) {
        return end;
      }
    },

    // 获取厂家
    getVendor() {
      let that = this;
      that.API.requestData({
        baseURL: "http://192.168.1.18:9988",
        subUrl: "companies/list",
        success(res) {
          that.vendorArray = res.data;
          that.vendor = res.data[0].company;
          that.getWarehouse();
        },
      });
    },
    // 获取仓库
    getWarehouse() {
      let that = this;
      that.API.requestData({
        baseURL: "http://192.168.1.18:9988",
        subUrl: "warehouse/list",
        success(res) {
          that.warehouseArray = res.data;
          that.warehouse = res.data[0].warehouse;
          that.requestSafeList();
        },
      });
    },

    // 格式化日期
    fmtDate(date) {
      let curDate = date || new Date();
      let year = curDate.getFullYear();
      let mouth = curDate.getUTCMonth() + 1;
      let day = curDate.getDate();
      let hour = curDate.getHours();
      let minutes = curDate.getMinutes();
      let seconds = curDate.getSeconds();
      return (
        year +
        "-" +
        (mouth < 10 ? "0" + mouth : mouth) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (seconds < 10 ? "0" + seconds : seconds)
      );
    },
    BeginChange(vl) {
      this.value1 = vl;
    },
    EndChange(vl) {
      this.value2 = vl;
    },
    typeChange(vl) {
      this.type = vl;
    },
    // 搜索按钮
    onClickSearch() {
      this.requestSafeList();
    },
    // 获取查询列表
    requestSafeList() {
      let that = this;
      if (!that.dateArea || !that.dateArea.length) {
        that.BASE.showMsg({
          msg: "请先选择要查询的日期区间后再试",
        });
      } else {
        let starttime = this.dateArea.length
          ? new Date(this.dateArea[0]).formatDate("yyyy-MM-dd hh:mm:ss")
          : "";
        let endtime = this.dateArea.length
          ? new Date(this.dateArea[1]).formatDate("yyyy-MM-dd hh:mm:ss")
          : "";

        // let data = {
        //   category1:'SYZ',
        //   starttime,
        //   endtime,
        //   pagenum: that.pageNum,
        //   pagesize: that.pageSize,
        //   stationid: that.wpId,
        // };

        // http://192.168.1.18:9988/poline/list?pagenum=1&pagesize=10&vendor=联合动力&ponum=PO10564&warehouse=麻黄山仓库&starttime=2021-07-08 18:34:40&endtime=2021-07-08 18:34:45
        that.API.requestData({
          // baseURL:"http://192.168.1.14:8075/",
          baseURL: "http://192.168.1.18:9988",
          subUrl: "poline/list",
          method: "GET",
          data: {
            vendor: that.vendor,
            ponum: that.ponum,
            warehouse: that.warehouse,
            starttime,
            endtime,
            pagenum: that.pageNum,
            pagesize: that.pageSize,
          },
          success(res) {
            if (res.data.records.length) {
              res.data.records.forEach((ele, index) => {
                ele.index = index + 1;
                ele.timeDate = that.fmtDate(new Date(ele.time));
                if (ele.value > 0) {
                  ele.value = parseFloat(ele.value).toFixed(4);
                }
              });
              that.tableData.data = res.data.records || [];
            } else {
              that.BASE.showMsg({
                type: "warning",
                msg: "所选日期区间之内暂无数据，请重试",
              });
            }
            that.showDialog = true;
          },
        });
      }
    },
  },
};
</script>

<style lang="less" scope>
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;
.knowledge-2 {
  .el-select {
    width: 200px;
  }
  .el-input {
    width: 200px;
  }
}
</style>