From 64876b65fd1fae42410ed5dd024dd96b38e64bbc Mon Sep 17 00:00:00 2001
From: x_z <zrhdyxa@163.com>
Date: Tue, 4 Apr 2023 13:46:29 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=B7=BB=E5=8A=A0=E7=94=B3=E8=B4=AD=E5=8D=95?=
 =?UTF-8?q?=E6=98=8E=E7=BB=86=EF=BC=8C=E9=87=87=E8=B4=AD=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E5=92=8C=E9=87=87=E8=B4=AD=E5=8D=95=E6=98=8E=E7=BB=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/purchase/purApply.js                  |  40 ++-
 src/api/purchase/purOrder.js                  |  14 +-
 src/api/purchase/purPlan.js                   |  15 +-
 src/views/purchase/purApply/purApply.vue      |   7 +-
 .../purApply/pureApplySearchDetails.vue       | 295 ++++++++++++++++++
 .../purOrder/purOrderSearchDetails.vue        | 295 ++++++++++++++++++
 .../purchase/purPlan/purPlanSearchDetails.vue | 295 ++++++++++++++++++
 7 files changed, 937 insertions(+), 24 deletions(-)
 create mode 100644 src/views/purchase/purApply/pureApplySearchDetails.vue
 create mode 100644 src/views/purchase/purOrder/purOrderSearchDetails.vue
 create mode 100644 src/views/purchase/purPlan/purPlanSearchDetails.vue

diff --git a/src/api/purchase/purApply.js b/src/api/purchase/purApply.js
index 0d210848..0d9a5bcb 100644
--- a/src/api/purchase/purApply.js
+++ b/src/api/purchase/purApply.js
@@ -102,21 +102,29 @@ export function addApplyId() {
     method: 'post'
   })
 }
-  //更新pur
-  export function updateDetail(data) {
-    return request({
-      url: "/purchase/apply/updateDetail",
-      method: 'post',
-      data: data
-    })
-  }
-
-    //删除申购表和详情表
-    export function delApplyDetailAll(data) {
-      return request({
-        url: "/purchase/apply/delApplyDetailAll",
-        method: 'post',
-        data: data
-      })
+
+//更新pur
+export function updateDetail(data) {
+  return request({
+    url: "/purchase/apply/updateDetail",
+    method: 'post',
+    data: data
+  })
+}
+
+//删除申购表和详情表
+export function delApplyDetailAll(data) {
+  return request({
+    url: "/purchase/apply/delApplyDetailAll",
+    method: 'post',
+    data: data
+  })
 }
 
+export function getDetailList(params) {
+  return axios({
+    url: "/purchase/apply/getDetailList",
+    method: "get",
+    params: params
+  })
+}
diff --git a/src/api/purchase/purOrder.js b/src/api/purchase/purOrder.js
index eb755673..aea76f21 100644
--- a/src/api/purchase/purOrder.js
+++ b/src/api/purchase/purOrder.js
@@ -85,13 +85,14 @@ export function delOrderDetail(id) {
   })
 }
 
-  // 添加puan
+// 添加puan
 export function addOrderId() {
-   return request({
+  return request({
     url: "/purchase/order/add",
     method: 'post'
   })
 }
+
 // 根据申购单添加详情表
 export function addPlanDetailAndOrder(data) {
   return request({
@@ -118,6 +119,7 @@ export function selectOrderDetail(query) {
     params: query
   })
 }
+
 //删除计划表和详情表
 export function delOrderDetailAll(data) {
   return request({
@@ -126,6 +128,7 @@ export function delOrderDetailAll(data) {
     data: data
   })
 }
+
 //更新pur
 export function updateDetail(data) {
   return request({
@@ -135,5 +138,12 @@ export function updateDetail(data) {
   })
 }
 
+export function getDetailList(params) {
+  return axios({
+    url: "/purchase/order/list/getDetailList",
+    method: "get",
+    params: params
+  });
+}
 
 
diff --git a/src/api/purchase/purPlan.js b/src/api/purchase/purPlan.js
index f96b68ff..c6e36f88 100644
--- a/src/api/purchase/purPlan.js
+++ b/src/api/purchase/purPlan.js
@@ -27,7 +27,6 @@ export function selectApprovedList(query) {
 }
 
 
-
 export function listApplyDetail(query) {
   return axios({
     url: '/purchase/plan/list/detail',
@@ -95,13 +94,14 @@ export function delApplyDetail(id) {
   })
 }
 
-  // 添加puan
+// 添加puan
 export function addPlanId() {
-   return request({
+  return request({
     url: "/purchase/plan/add",
     method: 'post'
   })
 }
+
 // 根据申购单添加详情表
 export function addPlanDetailAndApply(data) {
   return request({
@@ -128,6 +128,7 @@ export function selectPlanDetail(query) {
     params: query
   })
 }
+
 //删除计划表和详情表
 export function delPlanDetailAll(data) {
   return request({
@@ -136,6 +137,7 @@ export function delPlanDetailAll(data) {
     data: data
   })
 }
+
 //更新pur
 export function updateDetail(data) {
   return request({
@@ -145,5 +147,12 @@ export function updateDetail(data) {
   })
 }
 
+export function getDetailList(params) {
+  return axios({
+    url: "/purchase/plan/list/getDetailList",
+    method: "get",
+    params: params
+  });
+}
 
 
diff --git a/src/views/purchase/purApply/purApply.vue b/src/views/purchase/purApply/purApply.vue
index 3ff7dd15..abef9ea1 100644
--- a/src/views/purchase/purApply/purApply.vue
+++ b/src/views/purchase/purApply/purApply.vue
@@ -190,6 +190,7 @@ export default {
             originTypes: [],
             list: [],
             createTimes:null,
+            detailLoading: false,
             detailList: [],
             loading: false,
             actDateRange: [],
@@ -300,14 +301,14 @@ export default {
         },
         handleDetail(row) {
             let query = {orderIdFk: row.id};
-            this.loading = true;
+            this.detailLoading = true;
             listApplyDetail(query) //查找该单号下的所有条码
                 .then((response) => {
                     this.detailList = response.data.list || [];
-                    this.loading = false;
+                    this.detailLoading = false;
                 })
                 .catch(() => {
-                    this.loading = false;
+                    this.detailLoading = false;
                     this.detailList = [];
                 });
         },
diff --git a/src/views/purchase/purApply/pureApplySearchDetails.vue b/src/views/purchase/purApply/pureApplySearchDetails.vue
new file mode 100644
index 00000000..73952ef8
--- /dev/null
+++ b/src/views/purchase/purApply/pureApplySearchDetails.vue
@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <el-card class="el-card">
+      <el-form :model="filterQuery" class="query-form" label-width="100px" v-show="showSearch">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="申购单号:">
+              <el-input v-model="filterQuery.billNo" style="width: 90%" placeholder="请输入单据号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="DI/物资编码:">
+              <el-input v-model="filterQuery.productId" style="width: 90%" placeholder="请输入DI/物资编码"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="物资名称:">
+              <el-input v-model="filterQuery.productName" style="width: 90%" placeholder="请输入物资名称"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="规格型号:">
+              <el-input v-model="filterQuery.spec" style="width: 90%" placeholder="请输入规格型号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="注册/备案号:">
+              <el-input v-model="filterQuery.zczbhhzbapzbh" style="width: 90%" placeholder="请输入注册/备案号"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="生产企业:">
+              <el-input v-model="filterQuery.manufactory" style="width: 90%" placeholder="请输入生产企业"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="创建时间:">
+              <el-date-picker
+                :picker-options="pickerOptions"
+                v-model="actDateRange"
+                type="daterange"
+                format="yyyy 年 MM 月 dd 日"
+                style="width: 90%"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div class="top-right-btn">
+        <el-button-group style="display:flex;">
+          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
+          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="onSubmitFind">查询</el-button>
+        </el-button-group>
+      </div>
+      <el-divider style="margin: 15px"></el-divider>
+
+      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
+        <el-table-column label="序号" type="index" width="60"></el-table-column>
+        <el-table-column label="申购单号" prop="billNo"></el-table-column>
+        <el-table-column label="DI/物资编码" prop="productId"></el-table-column>
+        <el-table-column label="物资名称" prop="productName"></el-table-column>
+        <el-table-column label="规格型号" prop="spec"></el-table-column>
+        <el-table-column label="申购数量" prop="count"></el-table-column>
+        <el-table-column label="计量单位" prop="measname"></el-table-column>
+        <el-table-column label="供应商" prop="supName"></el-table-column>
+        <el-table-column label="生产企业" prop="manufactory"></el-table-column>
+        <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"></el-table-column>
+        <el-table-column label="注册/备案人" prop="ylqxzcrbarmc"></el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="filterQuery.page"
+        :limit.sync="filterQuery.limit"
+        @pagination="handleCurrentChange"
+      ></pagination>
+
+    </el-card>
+  </div>
+</template>
+<script>
+import {getDetailList} from "@/api/purchase/purApply";
+
+export default {
+  data() {
+    return {
+      showSearch: true,
+      filterQuery: {
+        billNo: null,
+        productId: null,
+        productName: null,
+        spec: null,
+        zczbhhzbapzbh: null,
+        manufactory: null,
+        startDate: null,
+        endDate: null,
+        page: 1,
+        limit: 10,
+      },
+      total: 0,
+      list: [],
+      loading: false,
+      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]);
+            },
+          },
+        ],
+      },
+
+      pickerAuditOptions: {
+        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]);
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    onReset() {
+      this.$router.push({
+        path: "",
+      });
+      this.filterQuery = {
+        billNo: null,
+        productId: null,
+        productName: null,
+        spec: null,
+        zczbhhzbapzbh: null,
+        manufactory: null,
+        startDate: null,
+        endDate: null,
+        page: 1,
+        limit: 10,
+      };
+      this.actDateRange = [];
+      this.getList();
+    },
+
+    onSubmitFind() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    hideSearch() {
+      this.showSearch = !this.showSearch;
+    },
+    getList() {
+      if (this.actDateRange != null) {
+        this.filterQuery.startDate = this.actDateRange[0];
+        this.filterQuery.endDate = this.actDateRange[1];
+      } else {
+        this.filterQuery.startDate = null;
+        this.filterQuery.endDate = null;
+      }
+      this.loading = true;
+      getDetailList(this.filterQuery)
+        .then((response) => {
+          if (response.code == 20000) {
+            this.list = response.data.list || [];
+            this.total = response.data.total || 0;
+          } else {
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+    },
+    handleCurrentChange(val) {
+      this.filterQuery.page = val.page;
+      this.getList();
+    },
+  },
+  filters: {
+    statusFilterType(status) {
+      const statusMap = {
+        2: "warning",
+        3: "success",
+        4: "danger",
+      };
+      return statusMap[status];
+    },
+  },
+  mounted() {
+  },
+  created() {
+    this.getList();
+  },
+}
+;
+</script>
+<style scoped>
+.itemTag {
+  float: left;
+  text-align: left;
+  margin-top: 10px;
+  width: 25%;
+}
+
+.text {
+  font-size: 13px;
+  font-family: "Microsoft YaHei";
+}
+
+.query-form-item {
+  display: block !important;
+  margin-right: 10px;
+  margin-bottom: 5px;
+}
+
+.el-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.el-col {
+  border-radius: 4px;
+  flex-wrap: wrap;
+}
+</style>
+
diff --git a/src/views/purchase/purOrder/purOrderSearchDetails.vue b/src/views/purchase/purOrder/purOrderSearchDetails.vue
new file mode 100644
index 00000000..63ff1f7a
--- /dev/null
+++ b/src/views/purchase/purOrder/purOrderSearchDetails.vue
@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <el-card class="el-card">
+      <el-form :model="filterQuery" class="query-form" label-width="100px" v-show="showSearch">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="申购单号:">
+              <el-input v-model="filterQuery.billNo" style="width: 90%" placeholder="请输入单据号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="DI/物资编码:">
+              <el-input v-model="filterQuery.productId" style="width: 90%" placeholder="请输入DI/物资编码"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="物资名称:">
+              <el-input v-model="filterQuery.productName" style="width: 90%" placeholder="请输入物资名称"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="规格型号:">
+              <el-input v-model="filterQuery.spec" style="width: 90%" placeholder="请输入规格型号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="注册/备案号:">
+              <el-input v-model="filterQuery.zczbhhzbapzbh" style="width: 90%" placeholder="请输入注册/备案号"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="生产企业:">
+              <el-input v-model="filterQuery.manufactory" style="width: 90%" placeholder="请输入生产企业"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="创建时间:">
+              <el-date-picker
+                :picker-options="pickerOptions"
+                v-model="actDateRange"
+                type="daterange"
+                format="yyyy 年 MM 月 dd 日"
+                style="width: 90%"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div class="top-right-btn">
+        <el-button-group style="display:flex;">
+          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
+          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="onSubmitFind">查询</el-button>
+        </el-button-group>
+      </div>
+      <el-divider style="margin: 15px"></el-divider>
+
+      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
+        <el-table-column label="序号" type="index" width="60"></el-table-column>
+        <el-table-column label="申购单号" prop="billNo"></el-table-column>
+        <el-table-column label="DI/物资编码" prop="productId"></el-table-column>
+        <el-table-column label="物资名称" prop="productName"></el-table-column>
+        <el-table-column label="规格型号" prop="spec"></el-table-column>
+        <el-table-column label="申购数量" prop="count"></el-table-column>
+        <el-table-column label="计量单位" prop="measname"></el-table-column>
+        <el-table-column label="供应商" prop="supName"></el-table-column>
+        <el-table-column label="生产企业" prop="manufactory"></el-table-column>
+        <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"></el-table-column>
+        <el-table-column label="注册/备案人" prop="ylqxzcrbarmc"></el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="filterQuery.page"
+        :limit.sync="filterQuery.limit"
+        @pagination="handleCurrentChange"
+      ></pagination>
+
+    </el-card>
+  </div>
+</template>
+<script>
+import {getDetailList} from "@/api/purchase/purOrder";
+
+export default {
+  data() {
+    return {
+      showSearch: true,
+      filterQuery: {
+        billNo: null,
+        productId: null,
+        productName: null,
+        spec: null,
+        zczbhhzbapzbh: null,
+        manufactory: null,
+        startDate: null,
+        endDate: null,
+        page: 1,
+        limit: 10,
+      },
+      total: 0,
+      list: [],
+      loading: false,
+      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]);
+            },
+          },
+        ],
+      },
+
+      pickerAuditOptions: {
+        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]);
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    onReset() {
+      this.$router.push({
+        path: "",
+      });
+      this.filterQuery = {
+        billNo: null,
+        productId: null,
+        productName: null,
+        spec: null,
+        zczbhhzbapzbh: null,
+        manufactory: null,
+        startDate: null,
+        endDate: null,
+        page: 1,
+        limit: 10,
+      };
+      this.actDateRange = [];
+      this.getList();
+    },
+
+    onSubmitFind() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    hideSearch() {
+      this.showSearch = !this.showSearch;
+    },
+    getList() {
+      if (this.actDateRange != null) {
+        this.filterQuery.startDate = this.actDateRange[0];
+        this.filterQuery.endDate = this.actDateRange[1];
+      } else {
+        this.filterQuery.startDate = null;
+        this.filterQuery.endDate = null;
+      }
+      this.loading = true;
+      getDetailList(this.filterQuery)
+        .then((response) => {
+          if (response.code == 20000) {
+            this.list = response.data.list || [];
+            this.total = response.data.total || 0;
+          } else {
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+    },
+    handleCurrentChange(val) {
+      this.filterQuery.page = val.page;
+      this.getList();
+    },
+  },
+  filters: {
+    statusFilterType(status) {
+      const statusMap = {
+        2: "warning",
+        3: "success",
+        4: "danger",
+      };
+      return statusMap[status];
+    },
+  },
+  mounted() {
+  },
+  created() {
+    this.getList();
+  },
+}
+;
+</script>
+<style scoped>
+.itemTag {
+  float: left;
+  text-align: left;
+  margin-top: 10px;
+  width: 25%;
+}
+
+.text {
+  font-size: 13px;
+  font-family: "Microsoft YaHei";
+}
+
+.query-form-item {
+  display: block !important;
+  margin-right: 10px;
+  margin-bottom: 5px;
+}
+
+.el-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.el-col {
+  border-radius: 4px;
+  flex-wrap: wrap;
+}
+</style>
+
diff --git a/src/views/purchase/purPlan/purPlanSearchDetails.vue b/src/views/purchase/purPlan/purPlanSearchDetails.vue
new file mode 100644
index 00000000..255ab1e7
--- /dev/null
+++ b/src/views/purchase/purPlan/purPlanSearchDetails.vue
@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <el-card class="el-card">
+      <el-form :model="filterQuery" class="query-form" label-width="100px" v-show="showSearch">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="申购单号:">
+              <el-input v-model="filterQuery.billNo" style="width: 90%" placeholder="请输入单据号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="DI/物资编码:">
+              <el-input v-model="filterQuery.productId" style="width: 90%" placeholder="请输入DI/物资编码"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="物资名称:">
+              <el-input v-model="filterQuery.productName" style="width: 90%" placeholder="请输入物资名称"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="规格型号:">
+              <el-input v-model="filterQuery.spec" style="width: 90%" placeholder="请输入规格型号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="注册/备案号:">
+              <el-input v-model="filterQuery.zczbhhzbapzbh" style="width: 90%" placeholder="请输入注册/备案号"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="生产企业:">
+              <el-input v-model="filterQuery.manufactory" style="width: 90%" placeholder="请输入生产企业"
+                        clearable></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="创建时间:">
+              <el-date-picker
+                :picker-options="pickerOptions"
+                v-model="actDateRange"
+                type="daterange"
+                format="yyyy 年 MM 月 dd 日"
+                style="width: 90%"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div class="top-right-btn">
+        <el-button-group style="display:flex;">
+          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
+          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="onSubmitFind">查询</el-button>
+        </el-button-group>
+      </div>
+      <el-divider style="margin: 15px"></el-divider>
+
+      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
+        <el-table-column label="序号" type="index" width="60"></el-table-column>
+        <el-table-column label="申购单号" prop="billNo"></el-table-column>
+        <el-table-column label="DI/物资编码" prop="productId"></el-table-column>
+        <el-table-column label="物资名称" prop="productName"></el-table-column>
+        <el-table-column label="规格型号" prop="spec"></el-table-column>
+        <el-table-column label="申购数量" prop="count"></el-table-column>
+        <el-table-column label="计量单位" prop="measname"></el-table-column>
+        <el-table-column label="供应商" prop="supName"></el-table-column>
+        <el-table-column label="生产企业" prop="manufactory"></el-table-column>
+        <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"></el-table-column>
+        <el-table-column label="注册/备案人" prop="ylqxzcrbarmc"></el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="filterQuery.page"
+        :limit.sync="filterQuery.limit"
+        @pagination="handleCurrentChange"
+      ></pagination>
+
+    </el-card>
+  </div>
+</template>
+<script>
+import {getDetailList} from "@/api/purchase/purPlan";
+
+export default {
+  data() {
+    return {
+      showSearch: true,
+      filterQuery: {
+        billNo: null,
+        productId: null,
+        productName: null,
+        spec: null,
+        zczbhhzbapzbh: null,
+        manufactory: null,
+        startDate: null,
+        endDate: null,
+        page: 1,
+        limit: 10,
+      },
+      total: 0,
+      list: [],
+      loading: false,
+      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]);
+            },
+          },
+        ],
+      },
+
+      pickerAuditOptions: {
+        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]);
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    onReset() {
+      this.$router.push({
+        path: "",
+      });
+      this.filterQuery = {
+        billNo: null,
+        productId: null,
+        productName: null,
+        spec: null,
+        zczbhhzbapzbh: null,
+        manufactory: null,
+        startDate: null,
+        endDate: null,
+        page: 1,
+        limit: 10,
+      };
+      this.actDateRange = [];
+      this.getList();
+    },
+
+    onSubmitFind() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    hideSearch() {
+      this.showSearch = !this.showSearch;
+    },
+    getList() {
+      if (this.actDateRange != null) {
+        this.filterQuery.startDate = this.actDateRange[0];
+        this.filterQuery.endDate = this.actDateRange[1];
+      } else {
+        this.filterQuery.startDate = null;
+        this.filterQuery.endDate = null;
+      }
+      this.loading = true;
+      getDetailList(this.filterQuery)
+        .then((response) => {
+          if (response.code == 20000) {
+            this.list = response.data.list || [];
+            this.total = response.data.total || 0;
+          } else {
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+    },
+    handleCurrentChange(val) {
+      this.filterQuery.page = val.page;
+      this.getList();
+    },
+  },
+  filters: {
+    statusFilterType(status) {
+      const statusMap = {
+        2: "warning",
+        3: "success",
+        4: "danger",
+      };
+      return statusMap[status];
+    },
+  },
+  mounted() {
+  },
+  created() {
+    this.getList();
+  },
+}
+;
+</script>
+<style scoped>
+.itemTag {
+  float: left;
+  text-align: left;
+  margin-top: 10px;
+  width: 25%;
+}
+
+.text {
+  font-size: 13px;
+  font-family: "Microsoft YaHei";
+}
+
+.query-form-item {
+  display: block !important;
+  margin-right: 10px;
+  margin-bottom: 5px;
+}
+
+.el-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.el-col {
+  border-radius: 4px;
+  flex-wrap: wrap;
+}
+</style>
+