microwave-project-unite/src/views/Yishenhe/index.vue

<template>
  <div>
    <router-view></router-view>
    <div>
      <div class="daichuli">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">订单查询</span>
        </div>
        <OrderSearch
          :getOrderList="getOrderList"
          ref="orderSearchPanel"
          @initPage="initPage"
        ></OrderSearch>
      </div>
      <div class="daichuli1">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">查询结果</span>
        </div>
        <el-table
          :header-cell-style="{ background: '#E4E9F1' }"
          :cell-style="tableRowClassName"
          :data="passAuditData"
          style="width: 98%; margin-left: 1%; margin-top: 15px"
        >
          <el-table-column
            prop="order_code"
            label="订单编号"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="create_date"
            label="提交日期"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.create_date | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="satellite_name"
            label="卫星类型"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="satellite_load_name"
            label="载荷"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="product_id" label="产品大类" align="center">
            <template slot-scope="scope">
              {{ scope.row.product_id | categoryFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="product_subclass_id"
            label="产品小类"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.product_subclass_id | cldCategoryFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="validation_method_desc"
            label="检验类型"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="userName" label="创建人员" align="center">
          </el-table-column>
          <el-table-column prop="userName" label="检验人员" align="center">
          </el-table-column>
          <el-table-column
            prop="inspectionName"
            label="审核人员"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="order_status_desc"
            label="订单状态"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="changePage(scope.row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <Pagination
            :page-sizes="[6, 12, 18]"
            :total="pageForm.total"
            :page.sync="pageForm.page"
            :limit.sync="pageForm.limit"
            @pagination="getOrderList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderSearch from "@/components/orderSearch";
import Pagination from "@/components/Pagination";
import { getOrderListByStatus } from "@/api/common";
export default {
  components: {
    OrderSearch,
    Pagination,
  },
  filters: {
    categoryFilter(category) {
      const categoryMap = {
        1: "几何产品",
        2: "辐射产品",
        3: "陆表产品",
        4: "植被产品",
      };
      return categoryMap[category];
    },
    cldCategoryFilter(cldCategory) {
      const cldCategoryMap = {
        1: "正射校正",
        2: "高程产品",
        5: "干涉测量形变产品",
        3: "后向散射系数",
        4: "大气延迟校正",
        9: "地表粗糙度",
        6: "地表覆盖类型",
        7: "土壤水分",
        8: "地表盐碱度",
        10: "植被高度",
        11: "叶面积指数",
        12: "植被物候",
      };
      return cldCategoryMap[cldCategory];
    },
    formatDate(inputTime) {
      if (!inputTime && typeof inputTime !== "number") {
        return "";
      }
      var localTime = "";
      inputTime = new Date(inputTime);
      const offset = new Date().getTimezoneOffset();
      localTime = new Date(inputTime - offset * 60000).toISOString();
      localTime = localTime.substr(0, localTime.lastIndexOf("."));
      localTime = localTime.replace("T", " ");
      return localTime;
    },
  },
  data() {
    return {
      passAuditData: [],
      pageForm: {
        total: 0,
        page: 1,
        limit: 6,
      },
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    changePage(orderMsg) {
      localStorage.setItem(
        this.configration.path.yishenhe,
        JSON.stringify(orderMsg)
      );
      this.$router.push({ name: "已审核订单信息", params: orderMsg });
    },
    getOrderList() {
      const searchVal = this.$refs.orderSearchPanel;
      const sf = searchVal.searchForm;
      sf.inspectionId = Number(localStorage.userId);
      sf.page = this.pageForm.page;
      sf.limit = this.pageForm.limit;
      sf.status = [6, 7];
      getOrderListByStatus(sf).then((res) => {
        if (res.code === 200) {
          this.passAuditData = res.data.dataList;
          this.pageForm.total = res.data.count;
        }
      });
    },
    initPage() {
      this.pageForm.page = 1;
    },
  },
};
</script>

<style scoped lang="less">
.daichuli {
  width: 100%;
  background-color: white;
  font-size: 20px;
}
.daichuli1 {
  width: 100%;
  background-color: white;
  font-size: 20px;
  margin-top: 20px;
}
/deep/.el-icon-arrow-up:before {
  content: "\e78f";
}
.sp1 {
  display: inline-block;
  width: 7px;
  height: 26px;
  background-color: #354595;
  position: relative;
  left: 20px;
  top: 6px;
}
.sp2 {
  margin-left: 30px;
  font-size: 20px;
  font-weight: 700;
  color: #354595;
}
.box1 {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgb(205, 205, 205, 0.5);
}
.block {
  margin-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
/deep/.daichuli1 .el-button--primary {
  color: #354595;
  background-color: transparent;
  border-color: transparent;
}
/deep/.daichuli1 .el-button--primary:hover {
  background-color: #409eff;
  color: #fff;
}
/deep/.el-input__icon {
  line-height: 35px;
}
/deep/.el-table th > .cell {
  font-size: 16px;
}
/deep/.el-button {
  line-height: 0;
}
</style>