产品档案 羊皮登记 羊血登记 羊杂登记 配送管理 门店管理 产品追溯

src/api/productManagement.js

@@ -1,6 +1,44 @@
 import { ajax } from "../sdk/ajax";
 
 
-/* 登录 */
-export const reqLogin = (data) => ajax("post", "/core/auth/login", data)
+/* 产品档案  ProductInfo*/
+export const reqProductInfoList = (data) => ajax("post", "/farm-huyang/product-file/list", data)
 
+export const reqAddProductInfo = (data) => ajax("post", "/farm-huyang/product-file/add", data)
+
+export const reqUpdateProductInfo = (data) => ajax("post", "/farm-huyang/product-file/update", data)
+
+export const reqDelProductInfo = (id) => ajax("post", "/farm-huyang/product-file/delete", {id})
+
+
+/* 分割登记  SplitLog*/
+
+
+/* 羊皮登记  SheepskinLog*/
+export const reqSheepskinLogList = (data) => ajax("post", "/farm-huyang/registration-sheepskin/list", data)
+
+export const reqAddSheepskinLog = (data) => ajax("post", "/farm-huyang/registration-sheepskin/add", data)
+
+export const reqUpdateSheepskinLog = (data) => ajax("post", "/farm-huyang/registration-sheepskin/update", data)
+
+export const reqDelSheepskinLog = (id) => ajax("post", "/farm-huyang/registration-sheepskin/delete", {id})
+
+
+/* 羊血登记  GoatBloodLog*/
+export const reqGoatBloodLogList = (data) => ajax("post", "/farm-huyang/registration-blood/list", data)
+
+export const reqAddGoatBloodLog = (data) => ajax("post", "/farm-huyang/registration-blood/add", data)
+
+export const reqUpdateGoatBloodLog = (data) => ajax("post", "/farm-huyang/registration-blood/update", data)
+
+export const reqDelGoatBloodLog = (id) => ajax("post", "/farm-huyang/registration-blood/delete", {id})
+
+
+/* 羊杂登记  GoatHasletLog*/
+export const reqGoatHasletLogList = (data) => ajax("post", "/farm-huyang/registration-miscellaneous/list", data)
+
+export const reqAddGoatHasletLog = (data) => ajax("post", "/farm-huyang/registration-miscellaneous/add", data)
+
+export const reqUpdateGoatHasletLog = (data) => ajax("post", "/farm-huyang/registration-miscellaneous/update", data)
+
+export const reqDelGoatHasletLog = (id) => ajax("post", "/farm-huyang/registration-miscellaneous/delete", {id})

src/api/storeTransportation.js

@@ -1,6 +1,32 @@
 import { ajax } from "../sdk/ajax";
 
 
-/* 登录 */
-export const reqLogin = (data) => ajax("post", "/core/auth/login", data)
+/* 配送管理  Dispatch*/
+export const reqDispatchList = (data) => ajax("post", "/farm-huyang/distribution-management/list", data)
+
+export const reqAddDispatch = (data) => ajax("post", "/farm-huyang/distribution-management/add", data)
+
+export const reqUpdateDispatch = (data) => ajax("post", "/farm-huyang/distribution-management/update", data)
+
+export const reqDelDispatch = (id) => ajax("post", "/farm-huyang/distribution-management/delete", {id})
+
+
+/* 门店管理  ShopStore*/
+export const reqShopStoreList = (data) => ajax("post", "/farm-huyang/store-management/list", data)
+
+export const reqAddShopStore = (data) => ajax("post", "/farm-huyang/store-management/add", data)
+
+export const reqUpdateShopStore = (data) => ajax("post", "/farm-huyang/store-management/update", data)
+
+export const reqDelShopStore = (id) => ajax("post", "/farm-huyang/store-management/delete", {id})
+
+
+/* 产品追溯  ProductQuery*/
+export const reqProductQueryList = (data) => ajax("post", "/farm-huyang/product-traceability/list", data)
+
+export const reqAddProductQuery = (data) => ajax("post", "/farm-huyang/product-traceability/add", data)
+
+export const reqUpdateProductQuery = (data) => ajax("post", "/farm-huyang/product-traceability/update", data)
+
+export const reqDelProductQuery = (id) => ajax("post", "/farm-huyang/product-traceability/delete", {id})
 

src/router/routes.js

@@ -30,6 +30,7 @@ import goatHasletLog from '@/views/productManagement/goatHasletLog.vue'
 import dispatching from '@/views/storeTransportation/dispatching.vue'
 import transportation from '@/views/storeTransportation/transportation.vue'
 import shopStore from '@/views/storeTransportation/shopStore.vue'
+import productQuery from '@/views/storeTransportation/productQuery.vue'
 
 
 /* 模板 */
@@ -175,6 +176,11 @@ export default [
 				name: 'shopStore',
 				component: shopStore
 			},
+			{
+				path: 'productQuery',
+				name: 'productQuery',
+				component: productQuery
+			},
 			
 			
 			// 模板

src/views/Home/mencCofig.js

@@ -168,7 +168,7 @@ export const menuData = [
             {
                 optionName: '产品追溯',
                 index: '4-5',
-                routerName: "aa"
+                routerName: "productQuery"
             },
         ]
     },

src/views/productManagement/goatBloodLog.vue

@@ -1,32 +1,16 @@
 <template>
-    <!-- 静态  羊血登记 -->
-    <div class="goatBloodLog">
+    <div class="GoatBloodLog">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">羊血登记</h2>
         <header id="header">
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
+            <el-row type="flex" :gutter="20">
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
+                    <el-input v-model="search" placeholder="请选择"></el-input>
                 </el-col>
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
+                    <el-button type="primary" @click="getGoatBloodLogList">查找</el-button>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
-                </el-col>
-                <el-col :span="4">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="add">新增</el-button>
                 </el-col>
             </el-row>
         </header>
@@ -37,29 +21,23 @@
                     :data="tableData"
                     tooltip-effect="dark"
                     style="width: 100%"
-                    @selection-change="handleSelectionChange"
                 >
-                    <el-table-column type="selection" width="55"></el-table-column>
-                    <el-table-column prop="id" label="羊ID" width="180"></el-table-column>
-                    <el-table-column prop="date" label="放血时间" width="180"></el-table-column>
-                    <el-table-column prop="a" label="屠宰批次"></el-table-column>
-                    <el-table-column prop="b" label="重量"></el-table-column>
-                    <el-table-column prop="d" label="保质期"></el-table-column>
-                    <el-table-column prop="c" label="位置"></el-table-column>
-                    <!-- <el-table-column label="操作" width="150">
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="sheepId" label="羊ID"></el-table-column>
+                    <el-table-column prop="bleedingTime" label="放血时间"></el-table-column>
+                    <el-table-column prop="slaughterBatch" label="屠宰批次"></el-table-column>
+                    <el-table-column prop="weight" label="重量"></el-table-column>
+                    <el-table-column prop="shelfLife" label="保质期"></el-table-column>
+                    <el-table-column prop="storageLocation" label="存放位置"></el-table-column>
+                    <el-table-column label="操作" width="150">
                         <template slot-scope="scope">
                             <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                             <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                                 <el-button slot="reference" type="text" size="small">删除</el-button>
                             </el-popconfirm>
                         </template>
-                    </el-table-column> -->
+                    </el-table-column>
                 </el-table>
-                <div style="margin-top: 20px">
-                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-                    <el-button @click="toggleSelection()">取消选择</el-button>
-                    <el-button @click="inStore">删除所选</el-button>
-                </div>
 
                 <el-row type="flex" justify="end">
                     <el-col :span="8" class="pagination">
@@ -67,83 +45,161 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :page-count="10"
+                            :page-count="Number(totalPages)"
                         ></el-pagination>
                     </el-col>
                 </el-row>
             </article>
         </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addGoatBloodLog" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="羊ID">
+                            <el-input v-model="formData.sheepId"></el-input>
+                        </el-form-item>
+                        <el-form-item label="剥离时间">
+                            <el-date-picker
+                                v-model="formData.bleedingTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="屠宰批次">
+                            <el-input v-model="formData.slaughterBatch"></el-input>
+                        </el-form-item>
+                        <el-form-item label="重量(kg)">
+                            <el-input v-model.number="formData.weight"></el-input>
+                        </el-form-item>
+                        <el-form-item label="保质期">
+                            <el-input v-model="formData.shelfLife"></el-input>
+                        </el-form-item>
+                        <el-form-item label="存放位置">
+                            <el-input v-model.number="formData.storageLocation"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addGoatBloodLog')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import {
+    reqGoatBloodLogList,
+    reqAddGoatBloodLog,
+    reqUpdateGoatBloodLog,
+    reqDelGoatBloodLog
+} from "@/api/productManagement.js";
 
-const pageSize = 10
-const tableData = [
-                {
-                    id: "12425",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "525g",
-                    d: "25天",
-                    c: "羊血储存一库"
-                },
-                {
-                    id: "12426",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "425g",
-                    d: "25天",
-                    c: "羊血储存一库"
-                },
-                {
-                    id: "12427",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "425g",
-                    d: "25天",
-                    c: "羊血储存一库"
-                },
-                {
-                    id: "12428",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "525g",
-                    d: "25天",
-                    c: "羊血储存一库"
-                },
-                
-            ]
+const pageSize = 10;
+const rules = {};
 
 export default {
+    name: "GoatBloodLog",
     data() {
         return {
-            value: "",
-            multipleSelection: [],
+            search: "",
             page: 1,
-            tableData
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                sheepId: "1010",
+                bleedingTime: this.$moment().format("YYYY-MM-DD"),
+                slaughterBatch: "1210",
+                weight: 16,
+                shelfLife: '365',
+                storageLocation: "冷藏仓"
+            },
+            isAdd: false,
+            rules
         };
     },
-    created() {},
+    created() {
+        // 羊血登记列表
+        this.getGoatBloodLogList();
+    },
     methods: {
-        toggleSelection(rows) {
-            if (rows) {
-                rows.forEach(row => {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    if (this.isAdd) {
+                        reqAddGoatBloodLog(this.formData)
+                            .then(res => {
+                                // 羊血登记列表
+                                this.getGoatBloodLogList();
+                                this.$message.success("添加成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("添加失败！");
+                            });
+                    } else {
+                        reqUpdateGoatBloodLog(this.formData)
+                            .then(res => {
+                                // 羊血登记列表
+                                this.getGoatBloodLogList();
+                                this.$message.success("编辑成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("编辑失败！");
+                            });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 羊血登记列表 
+        getGoatBloodLogList() {
+            reqGoatBloodLogList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.page
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
                 });
-            } else {
-                this.$refs.multipleTable.clearSelection();
-            }
         },
-        // 入待宰栏
-        inStore() {},
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        add() {
+            this.isShow = true;
+            this.isAdd = true
+        },
+        edit(row) {
+            this.formData = row;
+            this.isShow = true;
+            this.isAdd = false
+        },
+        del(row) {
+            reqDelGoatBloodLog(row.id)
+                .then(res => {
+                    console.log(res);
+                    // 羊血登记列表
+                    this.getGoatBloodLogList();
+                    this.$message.success("删除成功！");
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
         },
-        edit(row) {},
-        del(row) {},
         pageChange(p) {
             console.log(p);
+            this.page = p;
+            // 羊血登记列表
+            this.getGoatBloodLogList();
         }
     }
 };

src/views/productManagement/goatHasletLog.vue

@@ -1,32 +1,16 @@
 <template>
-    <!-- 静态  羊杂登记 -->
-    <div class="goatBloodLog">
+    <div class="GoatHasletLog">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">羊杂登记</h2>
         <header id="header">
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
+            <el-row type="flex" :gutter="20">
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
+                    <el-input v-model="search" placeholder="请选择"></el-input>
                 </el-col>
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
+                    <el-button type="primary" @click="getGoatHasletLogList">查找</el-button>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
-                </el-col>
-                <el-col :span="4">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="add">新增</el-button>
                 </el-col>
             </el-row>
         </header>
@@ -37,29 +21,23 @@
                     :data="tableData"
                     tooltip-effect="dark"
                     style="width: 100%"
-                    @selection-change="handleSelectionChange"
                 >
-                    <el-table-column type="selection" width="55"></el-table-column>
-                    <el-table-column prop="id" label="羊ID" width="180"></el-table-column>
-                    <el-table-column prop="date" label="宰杀时间" width="180"></el-table-column>
-                    <el-table-column prop="a" label="屠宰批次"></el-table-column>
-                    <el-table-column prop="b" label="重量"></el-table-column>
-                    <el-table-column prop="d" label="保质期"></el-table-column>
-                    <el-table-column prop="c" label="位置"></el-table-column>
-                    <!-- <el-table-column label="操作" width="150">
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="sheepId" label="羊ID"></el-table-column>
+                    <el-table-column prop="slaughterTime" label="宰杀时间"></el-table-column>
+                    <el-table-column prop="slaughterBatch" label="屠宰批次"></el-table-column>
+                    <el-table-column prop="weight" label="重量"></el-table-column>
+                    <el-table-column prop="shelfLife" label="保质期"></el-table-column>
+                    <el-table-column prop="storageLocation" label="存放位置"></el-table-column>
+                    <el-table-column label="操作" width="150">
                         <template slot-scope="scope">
                             <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                             <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                                 <el-button slot="reference" type="text" size="small">删除</el-button>
                             </el-popconfirm>
                         </template>
-                    </el-table-column> -->
+                    </el-table-column>
                 </el-table>
-                <div style="margin-top: 20px">
-                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-                    <el-button @click="toggleSelection()">取消选择</el-button>
-                    <el-button @click="inStore">删除所选</el-button>
-                </div>
 
                 <el-row type="flex" justify="end">
                     <el-col :span="8" class="pagination">
@@ -67,83 +45,161 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :page-count="10"
+                            :page-count="Number(totalPages)"
                         ></el-pagination>
                     </el-col>
                 </el-row>
             </article>
         </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addGoatHasletLog" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="羊ID">
+                            <el-input v-model="formData.sheepId"></el-input>
+                        </el-form-item>
+                        <el-form-item label="宰杀时间">
+                            <el-date-picker
+                                v-model="formData.slaughterTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="屠宰批次">
+                            <el-input v-model="formData.slaughterBatch"></el-input>
+                        </el-form-item>
+                        <el-form-item label="重量(kg)">
+                            <el-input v-model.number="formData.weight"></el-input>
+                        </el-form-item>
+                        <el-form-item label="保质期">
+                            <el-input v-model="formData.shelfLife"></el-input>
+                        </el-form-item>
+                        <el-form-item label="存放位置">
+                            <el-input v-model.number="formData.storageLocation"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addGoatHasletLog')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import {
+    reqGoatHasletLogList,
+    reqAddGoatHasletLog,
+    reqUpdateGoatHasletLog,
+    reqDelGoatHasletLog
+} from "@/api/productManagement.js";
 
-const pageSize = 10
-const tableData = [
-                {
-                    id: "12425",
-                    date: "2020-07-14",
-                    a: "45625",
-                    b: "1465g",
-                    d: "5天",
-                    c: "羊储存一库"
-                },
-                {
-                    id: "12426",
-                    date: "2020-07-14",
-                    a: "45625",
-                    b: "1465g",
-                    d: "5天",
-                    c: "羊储存一库"
-                },
-                {
-                    id: "12427",
-                    date: "2020-07-14",
-                    a: "45625",
-                    b: "1465g",
-                    d: "5天",
-                    c: "羊储存一库"
-                },
-                {
-                    id: "12428",
-                    date: "2020-07-14",
-                    a: "45625",
-                    b: "1465g",
-                    d: "5天",
-                    c: "羊储存一库"
-                },
-                
-            ]
+const pageSize = 10;
+const rules = {};
 
 export default {
+    name: "GoatHasletLog",
     data() {
         return {
-            value: "",
-            multipleSelection: [],
+            search: "",
             page: 1,
-            tableData
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                sheepId: "1010",
+                slaughterTime: this.$moment().format("YYYY-MM-DD"),
+                slaughterBatch: "1210",
+                weight: 16,
+                shelfLife: '365',
+                storageLocation: "冷藏仓"
+            },
+            isAdd: false,
+            rules
         };
     },
-    created() {},
+    created() {
+        // 羊杂登记列表
+        this.getGoatHasletLogList();
+    },
     methods: {
-        toggleSelection(rows) {
-            if (rows) {
-                rows.forEach(row => {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    if (this.isAdd) {
+                        reqAddGoatHasletLog(this.formData)
+                            .then(res => {
+                                // 羊杂登记列表
+                                this.getGoatHasletLogList();
+                                this.$message.success("添加成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("添加失败！");
+                            });
+                    } else {
+                        reqUpdateGoatHasletLog(this.formData)
+                            .then(res => {
+                                // 羊杂登记列表
+                                this.getGoatHasletLogList();
+                                this.$message.success("编辑成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("编辑失败！");
+                            });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 羊杂登记列表 
+        getGoatHasletLogList() {
+            reqGoatHasletLogList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.page
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
                 });
-            } else {
-                this.$refs.multipleTable.clearSelection();
-            }
         },
-        // 入待宰栏
-        inStore() {},
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        add() {
+            this.isShow = true;
+            this.isAdd = true
+        },
+        edit(row) {
+            this.formData = row;
+            this.isShow = true;
+            this.isAdd = false
+        },
+        del(row) {
+            reqDelGoatHasletLog(row.id)
+                .then(res => {
+                    console.log(res);
+                    // 羊杂登记列表
+                    this.getGoatHasletLogList();
+                    this.$message.success("删除成功！");
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
         },
-        edit(row) {},
-        del(row) {},
         pageChange(p) {
             console.log(p);
+            this.page = p;
+            // 羊杂登记列表
+            this.getGoatHasletLogList();
         }
     }
 };

src/views/productManagement/productInfo.vue

@@ -1,32 +1,16 @@
 <template>
-    <!-- 静态  产品档案-->
-    <div class="productInfo">
+    <div class="ProductInfo">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">产品档案</h2>
         <header id="header">
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
+            <el-row type="flex" :gutter="20">
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
+                    <el-input v-model="search" placeholder="请选择"></el-input>
                 </el-col>
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
+                    <el-button type="primary" @click="getProductInfoList">查找</el-button>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
-                </el-col>
-                <el-col :span="4">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="add">新增</el-button>
                 </el-col>
             </el-row>
         </header>
@@ -37,30 +21,24 @@
                     :data="tableData"
                     tooltip-effect="dark"
                     style="width: 100%"
-                    @selection-change="handleSelectionChange"
                 >
-                    <el-table-column type="selection" width="55"></el-table-column>
-                    <el-table-column prop="id" label="ID编码" width="180"></el-table-column>
-                    <el-table-column prop="date" label="产品名称" width="180"></el-table-column>
-                    <el-table-column prop="a" label="所属批次"></el-table-column>
-                    <el-table-column prop="b" label="规格型号"></el-table-column>
-                    <el-table-column prop="c" label="产品价格"></el-table-column>
-                    <el-table-column prop="d" label="存放地点"></el-table-column>
-                    <el-table-column prop="e" label="保质期"></el-table-column>
-                    <!-- <el-table-column label="操作" width="150">
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="code" label="ID编码" width="180"></el-table-column>
+                    <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
+                    <el-table-column prop="batchNo" label="所属批次"></el-table-column>
+                    <el-table-column prop="specificModel" label="规格型号" width="180"></el-table-column>
+                    <el-table-column prop="productPrice" label="产品价格"></el-table-column>
+                    <el-table-column prop="storageLocation" label="存放地点"></el-table-column>
+                    <el-table-column prop="shelfLife" label="保质期(天)"></el-table-column>
+                    <el-table-column label="操作" width="150">
                         <template slot-scope="scope">
                             <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                             <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                                 <el-button slot="reference" type="text" size="small">删除</el-button>
                             </el-popconfirm>
                         </template>
-                    </el-table-column> -->
+                    </el-table-column>
                 </el-table>
-                <div style="margin-top: 20px">
-                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-                    <el-button @click="toggleSelection()">取消选择</el-button>
-                    <el-button @click="inStore">删除所选</el-button>
-                </div>
 
                 <el-row type="flex" justify="end">
                     <el-col :span="8" class="pagination">
@@ -68,97 +46,160 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :page-count="10"
+                            :page-count="Number(totalPages)"
                         ></el-pagination>
                     </el-col>
                 </el-row>
             </article>
         </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addProductInfo" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="ID编码">
+                            <el-input v-model="formData.code"></el-input>
+                        </el-form-item>
+                        <el-form-item label="产品名称">
+                            <el-input v-model="formData.productName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="所属批次">
+                            <el-input v-model="formData.batchNo"></el-input>
+                        </el-form-item>
+                        <el-form-item label="规格型号">
+                            <el-input v-model="formData.specificModel"></el-input>
+                        </el-form-item>
+                        <el-form-item label="产品价格">
+                            <el-input v-model.number="formData.productPrice"></el-input>
+                        </el-form-item>
+                        <el-form-item label="存放地点">
+                            <el-input v-model="formData.storageLocation"></el-input>
+                        </el-form-item>
+                        <el-form-item label="保质期(天)">
+                            <el-input v-model="formData.shelfLife"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addProductInfo')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import {
+    reqProductInfoList,
+    reqAddProductInfo,
+    reqUpdateProductInfo,
+    reqDelProductInfo
+} from "@/api/productManagement.js";
 
-const pageSize = 10
-const tableData = [
-                {
-                    id: "12425",
-                    date: "带骨羊前腿",
-                    a: "1001",
-                    b: "AAAA",
-                    c: "58元/kg",
-                    d: "冷藏仓1",
-                    e: "180天"
-                },
-                {
-                    id: "12426",
-                    date: "带骨羊前腿",
-                    a: "1001",
-                    b: "AA",
-                    c: "58元/kg",
-                    d: "冷藏仓1",
-                    e: "180天"
-                },
-                {
-                    id: "12427",
-                    date: "羊菲力",
-                    a: "1001",
-                    b: "A",
-                    c: "29元/包",
-                    d: "冷藏仓1",
-                    e: "180天"
-                },
-                {
-                    id: "12428",
-                    date: "羊菲力",
-                    a: "1001",
-                    b: "AAA",
-                    c: "48元/kg",
-                    d: "冷藏仓1",
-                    e: "180天"
-                },
-                {
-                    id: "12429",
-                    date: "羊菲力",
-                    a: "1001",
-                    b: "AAAAA",
-                    c: "66元/kg",
-                    d: "冷藏仓1",
-                    e: "180天"
-                },
-            ]
+const pageSize = 10;
+const rules = {};
 
 export default {
+    name: "ProductInfo",
     data() {
         return {
-            value: "",
-            multipleSelection: [],
+            search: "",
             page: 1,
-            tableData
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                code: "1010",
+                productName: "带骨羊前腿",
+                batchNo: "1010",
+                specificModel: "AAA",
+                productPrice: 168,
+                storageLocation: "冷藏仓",
+                shelfLife: '360'
+            },
+            isAdd: false,
+            rules
         };
     },
     created() {
-        console.log(this)
+        // 出仓管理列表
+        this.getProductInfoList();
     },
     methods: {
-        toggleSelection(rows) {
-            if (rows) {
-                rows.forEach(row => {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    if (this.isAdd) {
+                        reqAddProductInfo(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getProductInfoList();
+                                this.$message.success("添加成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("添加失败！");
+                            });
+                    } else {
+                        reqUpdateProductInfo(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getProductInfoList();
+                                this.$message.success("编辑成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("编辑失败！");
+                            });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 出仓管理列表 
+        getProductInfoList() {
+            reqProductInfoList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.page
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
                 });
-            } else {
-                this.$refs.multipleTable.clearSelection();
-            }
         },
-        // 入待宰栏
-        inStore() {},
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        add() {
+            this.isShow = true;
+            this.isAdd = true
+        },
+        edit(row) {
+            this.formData = row;
+            this.isShow = true;
+            this.isAdd = false
+        },
+        del(row) {
+            reqDelProductInfo(row.id)
+                .then(res => {
+                    console.log(res);
+                    // 出仓管理列表
+                    this.getProductInfoList();
+                    this.$message.success("删除成功！");
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
         },
-        edit(row) {},
-        del(row) {},
         pageChange(p) {
             console.log(p);
+            this.page = p;
+            // 出仓管理列表
+            this.getProductInfoList();
         }
     }
 };

src/views/productManagement/sheepskinLog.vue

@@ -1,32 +1,16 @@
 <template>
-    <!-- 静态  羊皮登记 -->
-    <div class="goatSkin">
+    <div class="SheepskinLog">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">羊皮登记</h2>
         <header id="header">
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
+            <el-row type="flex" :gutter="20">
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
+                    <el-input v-model="search" placeholder="请选择"></el-input>
                 </el-col>
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
+                    <el-button type="primary" @click="getSheepskinLogList">查找</el-button>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
-                </el-col>
-                <el-col :span="4">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="add">新增</el-button>
                 </el-col>
             </el-row>
         </header>
@@ -37,28 +21,22 @@
                     :data="tableData"
                     tooltip-effect="dark"
                     style="width: 100%"
-                    @selection-change="handleSelectionChange"
                 >
-                    <el-table-column type="selection" width="55"></el-table-column>
-                    <el-table-column prop="id" label="羊ID" width="180"></el-table-column>
-                    <el-table-column prop="date" label="剥离时间" width="180"></el-table-column>
-                    <el-table-column prop="a" label="批次号"></el-table-column>
-                    <el-table-column prop="b" label="重量"></el-table-column>
-                    <el-table-column prop="c" label="位置"></el-table-column>
-                    <!-- <el-table-column label="操作" width="150">
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="sheepId" label="羊ID" width="180"></el-table-column>
+                    <el-table-column prop="strippingTime" label="剥离时间" width="180"></el-table-column>
+                    <el-table-column prop="batchNo" label="批次号"></el-table-column>
+                    <el-table-column prop="weight" label="重量" width="180"></el-table-column>
+                    <el-table-column prop="location" label="位置"></el-table-column>
+                    <el-table-column label="操作" width="150">
                         <template slot-scope="scope">
                             <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                             <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                                 <el-button slot="reference" type="text" size="small">删除</el-button>
                             </el-popconfirm>
                         </template>
-                    </el-table-column> -->
+                    </el-table-column>
                 </el-table>
-                <div style="margin-top: 20px">
-                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-                    <el-button @click="toggleSelection()">取消选择</el-button>
-                    <el-button @click="inStore">删除所选</el-button>
-                </div>
 
                 <el-row type="flex" justify="end">
                     <el-col :span="8" class="pagination">
@@ -66,79 +44,157 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :page-count="10"
+                            :page-count="Number(totalPages)"
                         ></el-pagination>
                     </el-col>
                 </el-row>
             </article>
         </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addSheepskinLog" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="ID编码">
+                            <el-input v-model="formData.sheepId"></el-input>
+                        </el-form-item>
+                        <el-form-item label="剥离时间">
+                            <el-date-picker
+                                v-model="formData.strippingTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="批次号">
+                            <el-input v-model="formData.batchNo"></el-input>
+                        </el-form-item>
+                        <el-form-item label="重量(kg)">
+                            <el-input v-model.number="formData.weight"></el-input>
+                        </el-form-item>
+                        <el-form-item label="位置">
+                            <el-input v-model.number="formData.location"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addSheepskinLog')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import {
+    reqSheepskinLogList,
+    reqAddSheepskinLog,
+    reqUpdateSheepskinLog,
+    reqDelSheepskinLog
+} from "@/api/productManagement.js";
 
-const pageSize = 10
-const tableData = [
-                {
-                    id: "12425",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "5kg",
-                    c: "羊皮储存室"
-                },
-                {
-                    id: "12426",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "4kg",
-                    c: "羊皮储存室"
-                },
-                {
-                    id: "12427",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "4kg",
-                    c: "羊皮储存室"
-                },
-                {
-                    id: "12428",
-                    date: "2020-07-14",
-                    a: "24563",
-                    b: "5kg",
-                    c: "羊皮储存室"
-                },
-                
-            ]
+const pageSize = 10;
+const rules = {};
 
 export default {
+    name: "SheepskinLog",
     data() {
         return {
-            value: "",
-            multipleSelection: [],
+            search: "",
             page: 1,
-            tableData
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                sheepId: "1010",
+                strippingTime: this.$moment().format("YYYY-MM-DD"),
+                batchNo: "1210",
+                weight: 168,
+                location: "冷藏仓"
+            },
+            isAdd: false,
+            rules
         };
     },
-    created() {},
+    created() {
+        // 羊皮登记列表
+        this.getSheepskinLogList();
+    },
     methods: {
-        toggleSelection(rows) {
-            if (rows) {
-                rows.forEach(row => {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    if (this.isAdd) {
+                        reqAddSheepskinLog(this.formData)
+                            .then(res => {
+                                // 羊皮登记列表
+                                this.getSheepskinLogList();
+                                this.$message.success("添加成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("添加失败！");
+                            });
+                    } else {
+                        reqUpdateSheepskinLog(this.formData)
+                            .then(res => {
+                                // 羊皮登记列表
+                                this.getSheepskinLogList();
+                                this.$message.success("编辑成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("编辑失败！");
+                            });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 羊皮登记列表 
+        getSheepskinLogList() {
+            reqSheepskinLogList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.page
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
                 });
-            } else {
-                this.$refs.multipleTable.clearSelection();
-            }
         },
-        // 入待宰栏
-        inStore() {},
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        add() {
+            this.isShow = true;
+            this.isAdd = true
+        },
+        edit(row) {
+            this.formData = row;
+            this.isShow = true;
+            this.isAdd = false
+        },
+        del(row) {
+            reqDelSheepskinLog(row.id)
+                .then(res => {
+                    console.log(res);
+                    // 羊皮登记列表
+                    this.getSheepskinLogList();
+                    this.$message.success("删除成功！");
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
         },
-        edit(row) {},
-        del(row) {},
         pageChange(p) {
             console.log(p);
+            this.page = p;
+            // 羊皮登记列表
+            this.getSheepskinLogList();
         }
     }
 };

src/views/storeTransportation/dispatching.vue

@@ -2,30 +2,15 @@
     <div class="dispatching">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">配送管理</h2>
         <header id="header">
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
+            <el-row type="flex" :gutter="20">
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
+                    <el-input v-model="search" placeholder="请选择"></el-input>
                 </el-col>
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
+                    <el-button type="primary" @click="getDispatchList">查找</el-button>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
-                </el-col>
-                <el-col :span="4">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="add">新增</el-button>
                 </el-col>
             </el-row>
         </header>
@@ -36,32 +21,24 @@
                     :data="tableData"
                     tooltip-effect="dark"
                     style="width: 100%"
-                    @selection-change="handleSelectionChange"
                 >
-                    <el-table-column type="selection" width="55"></el-table-column>
-                    <el-table-column prop="id" label="ID编码" width="180"></el-table-column>
-                    <el-table-column prop="aa" label="配送客户/单位"></el-table-column>
-                    <el-table-column prop="date" label="时间" width="180"></el-table-column>
-                    <el-table-column prop="a" label="配送地址"></el-table-column>
-                    <el-table-column prop="b" label="产品名称"></el-table-column>
-                    <el-table-column prop="c" label="重量"></el-table-column>
-                    <el-table-column prop="d" label="配送员"></el-table-column>
-                    <el-table-column label="状态" width="150">
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="code" label="ID编码"></el-table-column>
+                    <el-table-column prop="deliveryCustomer" label="配送客户/单位"></el-table-column>
+                    <el-table-column prop="deliveryAddress" label="配送地址"></el-table-column>
+                    <el-table-column prop="productName" label="产品名称"></el-table-column>
+                    <el-table-column prop="weight" label="重量"></el-table-column>
+                    <el-table-column prop="distributor" label="配送员"></el-table-column>
+                    <el-table-column prop="status" label="状态"></el-table-column>
+                    <el-table-column label="操作" width="150">
                         <template slot-scope="scope">
-                            <div v-if="scope.row.status == 0">
-                                <span>配送中</span>
-                                <el-button @click="edit(scope.row)" type="text" size="small">查看行程</el-button>
-                            </div>
-                            <div v-else-if="scope.row.status == 1">配送完成</div>
-                            <div v-else>错误</div>
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
                         </template>
                     </el-table-column>
                 </el-table>
-                <div style="margin-top: 20px">
-                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-                    <el-button @click="toggleSelection()">取消选择</el-button>
-                    <el-button @click="inStore">删除所选</el-button>
-                </div>
 
                 <el-row type="flex" justify="end">
                     <el-col :span="8" class="pagination">
@@ -69,142 +46,167 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :page-count="10"
+                            :page-count="Number(totalPages)"
                         ></el-pagination>
                     </el-col>
                 </el-row>
             </article>
         </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addDispatch" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="ID编码">
+                            <el-input v-model="formData.code"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="配送客户/单位">
+                            <el-input v-model="formData.deliveryCustomer"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="配送地址">
+                            <el-input v-model="formData.deliveryAddress"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="产品名称">
+                            <el-input v-model="formData.productName"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="重量(kg)">
+                            <el-input v-model.number="formData.weight"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="配送员">
+                            <el-input v-model="formData.distributor"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="状态">
+                            <el-input v-model.number="formData.status"></el-input>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addDispatch')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import {
+    reqDispatchList,
+    reqAddDispatch,
+    reqUpdateDispatch,
+    reqDelDispatch
+} from "@/api/storeTransportation.js";
 
-const pageSize = 10
-const tableData = [
-                {
-                    id: "12425",
-                    aa: "广州广泛食品有限公司",
-                    date: "2020-07-14",
-                    a: "深圳新思路1242号",
-                    b: "带骨羊前腿",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 0
-                },
-                {
-                    id: "12425",
-                    aa: "湖北食品有限公司",
-                    date: "2020-07-14",
-                    a: "深圳新思路1242号",
-                    b: "带骨羊前腿",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 0
-                },
-                {
-                    id: "12425",
-                    aa: "湖北食品有限公司",
-                    date: "2020-07-14",
-                    a: "深圳新思路1242号",
-                    b: "带骨羊前腿",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 0
-                },
-                {
-                    id: "12425",
-                    aa: "广州广泛食品有限公司",
-                    date: "2020-07-14",
-                    a: "湖北省武汉市武昌区高架路135号",
-                    b: "羊菲力",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 0
-                },
-                {
-                    id: "12425",
-                    aa: "广州广泛食品有限公司",
-                    date: "2020-07-14",
-                    a: "湖北省武汉市武昌区高架路135号",
-                    b: "带骨羊前腿",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 0
-                },
-                {
-                    id: "12425",
-                    aa: "绍兴食品有限公司",
-                    date: "2020-07-14",
-                    a: "湖北省武汉市武昌区高架路135号",
-                    b: "羊菲力",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 1
-                },
-                {
-                    id: "12425",
-                    aa: "绍兴食品有限公司",
-                    date: "2020-07-14",
-                    a: "深圳新思路1242号",
-                    b: "羊菲力",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 1
-                },
-                {
-                    id: "12425",
-                    aa: "广州广泛食品有限公司",
-                    date: "2020-07-14",
-                    a: "深圳新思路1242号",
-                    b: "羊菲力",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 1
-                },
-                {
-                    id: "12425",
-                    aa: "广州广泛食品有限公司",
-                    date: "2020-07-14",
-                    a: "深圳新思路1242号",
-                    b: "带骨羊前腿",
-                    c: "5000kg",
-                    d: "张小刚",
-                    status: 1
-                },
-               
-                
-                
-            ]
+const pageSize = 10;
+const rules = {};
 
 export default {
+    name: "dispatching",
     data() {
         return {
-            value: "",
-            multipleSelection: [],
+            search: "",
             page: 1,
-            tableData
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                code: "1010",
+                deliveryCustomer: "xx食品有限公司",
+                deliveryAddress: "深圳新思路",
+                productName: "羊菲力",
+                weight: 20,
+                distributor: "1010",
+                status: 1
+            },
+            isAdd: false,
+            rules
         };
     },
-    created() {},
+    created() {
+        // 出仓管理列表
+        this.getDispatchList();
+    },
     methods: {
-        toggleSelection(rows) {
-            if (rows) {
-                rows.forEach(row => {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    if (this.isAdd) {
+                        reqAddDispatch(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getDispatchList();
+                                this.$message.success("添加成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("添加失败！");
+                            });
+                    } else {
+                        reqUpdateDispatch(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getDispatchList();
+                                this.$message.success("编辑成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("编辑失败！");
+                            });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 出仓管理列表
+        getDispatchList() {
+            reqDispatchList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.page
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
                 });
-            } else {
-                this.$refs.multipleTable.clearSelection();
-            }
         },
-        // 入待宰栏
-        inStore() {},
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        add() {
+            this.isShow = true;
+            this.isAdd = true;
+        },
+        edit(row) {
+            this.formData = row;
+            this.isShow = true;
+            this.isAdd = false;
+        },
+        del(row) {
+            reqDelDispatch(row.id)
+                .then(res => {
+                    console.log(res);
+                    // 出仓管理列表
+                    this.getDispatchList();
+                    this.$message.success("删除成功！");
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
         },
-        edit(row) {},
         pageChange(p) {
             console.log(p);
+            this.page = p;
+            // 出仓管理列表
+            this.getDispatchList();
         }
     }
 };

src/views/storeTransportation/productQuery.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="ProductQuery">
+        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">产品追溯</h2>
+        <header id="header">
+            <el-row type="flex" :gutter="20">
+                <el-col :span="4">
+                    <el-input v-model="search" placeholder="请选择"></el-input>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary" @click="getProductQueryList">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary" @click="add">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                >
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="productCode" label="产品编码"></el-table-column>
+                    <el-table-column prop="productName" label="产品名称"></el-table-column>
+                    <el-table-column prop="saleTime" label="出售时间"></el-table-column>
+                    <el-table-column prop="partitionTime" label="分割时间"></el-table-column>
+                    <el-table-column prop="cuttingTime" label="宰割时间"></el-table-column>
+                    <el-table-column prop="placeOrigin" label="来源地"></el-table-column>
+                    <el-table-column prop="quarantineTime" label="检疫时间"></el-table-column>
+                    <el-table-column prop="quarantineForm" label="检疫单"></el-table-column>
+                    <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column>
+                </el-table>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="Number(totalPages)"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addProductQuery" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="产品编码">
+                            <el-input v-model="formData.productCode"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="产品名称">
+                            <el-input v-model="formData.productName"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="出售时间">
+                            <el-date-picker
+                                v-model="formData.saleTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+
+                         <el-form-item label="分割时间">
+                            <el-date-picker
+                                v-model="formData.partitionTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+
+                         <el-form-item label="宰割时间">
+                            <el-date-picker
+                                v-model="formData.cuttingTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+
+                        <el-form-item label="来源地">
+                            <el-input v-model="formData.placeOrigin"></el-input>
+                        </el-form-item>
+
+                         <el-form-item label="检疫时间">
+                            <el-date-picker
+                                v-model="formData.quarantineTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            ></el-date-picker>
+                        </el-form-item>
+
+                        <el-form-item label="检疫单">
+                            <el-input v-model="formData.quarantineForm"></el-input>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addProductQuery')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {
+    reqProductQueryList,
+    reqAddProductQuery,
+    reqUpdateProductQuery,
+    reqDelProductQuery
+} from "@/api/storeTransportation.js";
+
+const pageSize = 10;
+const rules = {};
+
+export default {
+    name: "ProductQuery",
+    data() {
+        return {
+            search: "",
+            page: 1,
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                productCode: "156546",
+                productName: "产品名称",
+                saleTime: this.$moment().format("YYYY-MM-DD"),
+                partitionTime: this.$moment().format("YYYY-MM-DD"),
+                cuttingTime: this.$moment().format("YYYY-MM-DD"),
+                placeOrigin: "哈斯牧场",
+                quarantineTime: this.$moment().format("YYYY-MM-DD"),
+                quarantineForm: "检疫单"
+            },
+            isAdd: false,
+            rules
+        };
+    },
+    created() {
+        // 出仓管理列表
+        this.getProductQueryList();
+    },
+    methods: {
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    if (this.isAdd) {
+                        reqAddProductQuery(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getProductQueryList();
+                                this.$message.success("添加成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("添加失败！");
+                            });
+                    } else {
+                        reqUpdateProductQuery(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getProductQueryList();
+                                this.$message.success("编辑成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("编辑失败！");
+                            });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 出仓管理列表
+        getProductQueryList() {
+            reqProductQueryList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.page
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        add() {
+            this.isShow = true;
+            this.isAdd = true;
+        },
+        edit(row) {
+            this.formData = row;
+            this.isShow = true;
+            this.isAdd = false;
+        },
+        del(row) {
+            reqDelProductQuery(row.id)
+                .then(res => {
+                    console.log(res);
+                    // 出仓管理列表
+                    this.getProductQueryList();
+                    this.$message.success("删除成功！");
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
+        },
+        pageChange(p) {
+            console.log(p);
+            this.page = p;
+            // 出仓管理列表
+            this.getProductQueryList();
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/storeTransportation/shopStore.vue

@@ -1,31 +1,16 @@
 <template>
-    <div class="shopstare">
+    <div class="shopStore">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">门店管理</h2>
         <header id="header">
-            <el-row type="flex">
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1区" value="11"></el-option>
-                        <el-option label="2区" value="22"></el-option>
-                    </el-select>
-                </el-col>
-                <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="1舍" value="13"></el-option>
-                        <el-option label="2舍" value="24"></el-option>
-                    </el-select>
-                </el-col>
+            <el-row type="flex" :gutter="20">
                 <el-col :span="4">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option label="可用" value="15"></el-option>
-                        <el-option label="可用" value="26"></el-option>
-                    </el-select>
+                    <el-input v-model="search" placeholder="请选择"></el-input>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">查找</el-button>
+                    <el-button type="primary" @click="getShopStoreList">查找</el-button>
                 </el-col>
                 <el-col :span="4">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="add">新增</el-button>
                 </el-col>
             </el-row>
         </header>
@@ -36,28 +21,22 @@
                     :data="tableData"
                     tooltip-effect="dark"
                     style="width: 100%"
-                    @selection-change="handleSelectionChange"
                 >
-                    <el-table-column type="selection" width="55"></el-table-column>
-                    <el-table-column prop="id" label="门店名称" width="180"></el-table-column>
-                    <el-table-column prop="a" label="负责人"></el-table-column>
-                    <el-table-column prop="b" label="负责人电话"></el-table-column>
-                    <el-table-column prop="c" label="门店地址"></el-table-column>
-                    <el-table-column prop="d" label="备注"></el-table-column>
-                    <!-- <el-table-column label="操作" width="150">
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="storeName" label="门店"></el-table-column>
+                    <el-table-column prop="personCharge" label="负责人"></el-table-column>
+                    <el-table-column prop="telephoneNumber" label="负责人电话"></el-table-column>
+                    <el-table-column prop="storeAddress" label="门店地址"></el-table-column>
+                    <el-table-column prop="remarks" label="备注"></el-table-column>
+                    <el-table-column label="操作" width="150">
                         <template slot-scope="scope">
                             <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                             <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                                 <el-button slot="reference" type="text" size="small">删除</el-button>
                             </el-popconfirm>
                         </template>
-                    </el-table-column> -->
+                    </el-table-column>
                 </el-table>
-                <div style="margin-top: 20px">
-                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-                    <el-button @click="toggleSelection()">取消选择</el-button>
-                    <el-button @click="inStore">删除所选</el-button>
-                </div>
 
                 <el-row type="flex" justify="end">
                     <el-col :span="8" class="pagination">
@@ -65,128 +44,157 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :page-count="10"
+                            :page-count="Number(totalPages)"
                         ></el-pagination>
                     </el-col>
                 </el-row>
             </article>
         </section>
+
+        <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
+            <el-row type="flex">
+                <el-col :span="20">
+                    <el-form ref="addShopStore" :model="formData" :rules="rules" label-width="140px">
+                        <el-form-item label="门店名称">
+                            <el-input v-model="formData.storeName"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="负责人">
+                            <el-input v-model="formData.personCharge"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="负责人电话">
+                            <el-input v-model="formData.telephoneNumber"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="门店地址">
+                            <el-input v-model="formData.storeAddress"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="备注">
+                            <el-input v-model="formData.remarks"></el-input>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <el-button @click="isShow=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('addShopStore')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import {
+    reqShopStoreList,
+    reqAddShopStore,
+    reqUpdateShopStore,
+    reqDelShopStore
+} from "@/api/storeTransportation.js";
 
-const pageSize = 10
-const tableData = [
-                {
-                    id: "金华一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "绍兴一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "绍兴一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "绍兴一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "嘉善县一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "XX一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "XX一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "XX一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "XX一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "XX一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                {
-                    id: "XX一号店铺",
-                    a: "张小刚",
-                    b: "13865936595",
-                    d: "北京市海淀区西二旗",
-                    c: "暂无备注"
-                },
-                
-            ]
+const pageSize = 10;
+const rules = {};
 
 export default {
+    name: "shopStore",
     data() {
         return {
-            value: "",
-            multipleSelection: [],
+            search: "",
             page: 1,
-            tableData
+            tableData: [],
+            totalPages: 0,
+            isShow: false,
+            formData: {
+                storeName: "北京一号店铺",
+                personCharge: "李小红",
+                telephoneNumber: "13699637894",
+                storeAddress: "北京市海淀区西二旗",
+                remarks: "备注"
+            },
+            isAdd: false,
+            rules
         };
     },
-    created() {},
+    created() {
+        // 出仓管理列表
+        this.getShopStoreList();
+    },
     methods: {
-        toggleSelection(rows) {
-            if (rows) {
-                rows.forEach(row => {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    if (this.isAdd) {
+                        reqAddShopStore(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getShopStoreList();
+                                this.$message.success("添加成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("添加失败！");
+                            });
+                    } else {
+                        reqUpdateShopStore(this.formData)
+                            .then(res => {
+                                // 出仓管理列表
+                                this.getShopStoreList();
+                                this.$message.success("编辑成功！");
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                this.$message.error("编辑失败！");
+                            });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 出仓管理列表
+        getShopStoreList() {
+            reqShopStoreList({
+                searchStr: this.search,
+                pageSize,
+                pageNum: this.page
+            })
+                .then(res => {
+                    this.tableData = res.content;
+                    this.totalPages = res.totalPages;
+                })
+                .catch(err => {
+                    console.log(err);
                 });
-            } else {
-                this.$refs.multipleTable.clearSelection();
-            }
         },
-        // 入待宰栏
-        inStore() {},
-        handleSelectionChange(val) {
-            this.multipleSelection = val;
+        add() {
+            this.isShow = true;
+            this.isAdd = true;
+        },
+        edit(row) {
+            this.formData = row;
+            this.isShow = true;
+            this.isAdd = false;
+        },
+        del(row) {
+            reqDelShopStore(row.id)
+                .then(res => {
+                    console.log(res);
+                    // 出仓管理列表
+                    this.getShopStoreList();
+                    this.$message.success("删除成功！");
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message.error("删除失败！");
+                });
         },
-        edit(row) {},
-        del(row) {},
         pageChange(p) {
             console.log(p);
+            this.page = p;
+            // 出仓管理列表
+            this.getShopStoreList();
         }
     }
 };