7.19表格产品名字

purchase_ao/src/views/produce/produceHistory/history.vue

@@ -1,17 +1,49 @@
 <template>
   <div>
+    <el-header class="searchBox">
+      <el-form :inline="true" :model="form" class="demo-form-inline">
+        <el-form-item label="产品名称">
+          <el-input v-model="form.productId" placeholder="产品名称" />
+        </el-form-item>
+        <el-form-item label="SPID"
+          ><el-input v-model="form.spId" placeholder="SPID" />
+        </el-form-item>
+        <el-form-item label="操作人"
+          ><el-input v-model="form.userName" placeholder="操作人" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchBtn">查询</el-button>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-header>
+
     <el-main class="tableBox">
       <el-table :data="tableData" style="width: 100%" ref="illustrate">
         <el-table-column prop="userName" label="操作人" />
-        <!-- <el-table-column prop="userName" label="产品名称" /> -->
+        <el-table-column prop="prodceName" label="产品名称" />
+        <el-table-column prop="productId" label="产品ID" />
         <el-table-column prop="spid" label="SPID" />
         <el-table-column prop="createTime" label="创建时间" />
         <el-table-column fixed="right" label="操作">
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="Inquire(scope.row)">查询</el-button>
+            <el-button type="text" size="small" @click="Inquire(scope.row)"
+              >查询</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
+      <div class="block">
+        <el-pagination
+          :current-page.sync="form['pageNum']"
+          :page-sizes="[20, 50, 100, 300]"
+          :page-size="form['pageSize']"
+          layout="total, sizes, pager"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </el-main>
     <el-dialog class="dialog" :visible.sync="infoShow">
       <el-form>
@@ -19,7 +51,11 @@
           <el-input type="textarea" v-model="orderingInfo" :rows="6"></el-input>
         </el-form-item>
         <el-form-item label="赠送话费说明">
-          <el-input v-model="givePhoneInfo" :rows="6" type="textarea"></el-input>
+          <el-input
+            v-model="givePhoneInfo"
+            :rows="6"
+            type="textarea"
+          ></el-input>
         </el-form-item>
         <el-form-item label="活动说明">
           <el-input v-model="manualInfo" :rows="6" type="textarea"></el-input>
@@ -32,49 +68,88 @@
   </div>
 </template>
 <script>
-import { post, get } from '@/api/common'
+import { post, get } from "@/api/common";
 export default {
-  data () {
+  data() {
     return {
       form: {
         pageNum: 1,
-        pageSize: 20
+        pageSize: 20,
+        userName: "",
+        spId: "",
+        productId: "",
       },
       tableData: [],
       infoShow: false,
       phone: [],
       givePhoneInfo: "",
       orderingInfo: "",
-      manualInfo: ""
-    }
+      manualInfo: "",
+      total: 5000,
+    };
   },
 
-  created () {
-    get("/productInfo/getlog", this.form).then(res => {
-      this.tableData = res.data.list
-      console.log(this.tableData)
-      // this.tableData.forEach((a) => {
-      //   // console.log(a.spid)
-      //   // get("/productInfo/page", { spid: a.spid }).then(res => {
-      //   //   // console.log(res)
-      //   //   // this.tableData.prodceName=a.spid.
-      //   // })
-      // })
-    })
-
-
+  created() {
+    // this.search();
+  },
+  mounted() {
+    this.search();
   },
 
   methods: {
-    Inquire (row) {
-      this.infoShow = true
-      this.phone = [JSON.parse(row.notes)]
-      this.givePhoneInfo = this.phone[0].givePhoneInfo
-      this.orderingInfo = this.phone[0].orderingInfo
-      this.manualInfo = this.phone[0].manualInfo
-    }
-  }
-}
+    searchBtn() {
+      // 搜索按钮
+      this.search();
+    },
+
+    Inquire(row) {
+      this.infoShow = true;
+      this.phone = [JSON.parse(row.notes)];
+      this.givePhoneInfo = this.phone[0].givePhoneInfo;
+      this.orderingInfo = this.phone[0].orderingInfo;
+      this.manualInfo = this.phone[0].manualInfo;
+    },
+    search() {
+      get("/productInfo/getlog", this.form).then((res) => {
+        this.tableData = res.data.list;
+        this.total = res.data.total;
+        console.log(res.data.list, "res.data.list");
+        // let arr=[]
+        this.tableData.forEach((a, i) => {
+          get("/productInfo/page", { spid: a.spid }).then((res) => {
+            //  arr.push(res.data.list[0].productName)
+            // this.tableData[i].prodceName = res.data.list[0].productName;
+            this.$set(
+              this.tableData[i],
+              "prodceName",
+              res.data.list[0].productName
+            );
+          });
+        });
+        console.log(this.tableData, "this.tableData");
+      });
+    },
+    reset() {
+      // 重置
+      this.form = {
+        spId: "",
+        pageSize: 20,
+        pageNum: 1,
+      };
+      this.search();
+    },
+    handleSizeChange(e) {
+      // 单页数量
+      this.form.pageSize = e;
+      this.search();
+    },
+    handleCurrentChange(e) {
+      // 跳页
+      this.form.pageNum = e;
+      this.search();
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -88,4 +163,8 @@ export default {
   height: 85vh;
   overflow: auto;
 }
-</style>
+.block {
+  margin-top: 20px;
+  float: right;
+}
+</style>