2022.8.4

resources/frontend/src/api/goods.js

@@ -3,8 +3,38 @@ import http from '@/util/http.js'
 // 商品管理列表
 export function goods (data) {
   return http({
-    url: '/api/goods',
+    url: '/api/goods_skus',
     method: 'get',
     data
   })
 }
+// 新建商品
+export function addGoods (data) {
+  return http({
+    url: '/api/goods',
+    method: 'post',
+    data
+  })
+}
+// 查看商品
+export function checkGoods (id) {
+  return http({
+    url: `/api/goods_skus/${id}`,
+    method: 'get'
+  })
+}
+// 商品列表
+export function goodsList () {
+  return http({
+    url: '/api/goods',
+    method: 'get'
+  })
+}
+// 更新商品
+export function updateGoods (id, data) {
+  return http({
+    url: `/api/goods_skus/${id}`,
+    method: 'patch',
+    data
+  })
+}

resources/frontend/src/api/rankingData.js

@@ -55,14 +55,14 @@ export function goods_types (data) {
 export function Delgoods_types (id) {
   return http({
     url: `/api/goods_types/${id}`,
-    method: 'delete',
+    method: 'delete'
 
   })
 }
 // 新增种类
 export function Addgoods_types (data) {
   return http({
-    url: `/api/goods_types/`,
+    url: '/api/goods_types/',
     method: 'post',
     data
   })
@@ -87,8 +87,7 @@ export function Brand_goods_types (data) {
 export function DelBrand_goods_types (id) {
   return http({
     url: `/api/goods_brands/${id}`,
-    method: 'delete',
+    method: 'delete'
-  
   })
 }
 // 新增品牌

resources/frontend/src/api/shop.js

@@ -0,0 +1,24 @@
+import http from '@/util/http.js'
+// 店铺平台列表
+export function shopListId () {
+  return http({
+    url: '/api/shop_platforms',
+    method: 'get'
+  })
+}
+// 店铺新增
+export function shopAdd (data) {
+  return http({
+    url: '/api/shops',
+    method: 'post',
+    data
+  })
+}
+// 店铺列表
+export function storeList (data) {
+  return http({
+    url: '/api/shops',
+    method: 'get',
+    data
+  })
+}

resources/frontend/src/components/mapDrag/index.vue

@@ -1,24 +1,28 @@
 <template>
   <div class="m-map">
-    <div class="search" v-if="placeSearch">
+    <div class="search"
-      <div id="js-result" v-show="searchKey" class="result"></div>
+         v-if="placeSearch">
+      <div id="js-result"
+           v-show="searchKey"
+           class="result"></div>
     </div>
-    <div id="js-container" class="map">正在加载数据 ...</div>
+    <div id="js-container"
+         class="map">正在加载数据 ...</div>
   </div>
 </template>
 
 <script>
 import remoteLoad from '@/util/remoteLoad.js'
 window._AMapSecurityConfig = {
-  securityJsCode: '4c7f32be1ae23595dd423fbdf337df3f'
+  securityJsCode: '4c7f32be1ae23595dd423fbdf337df3f',
 }
-// import { MapKey } from './config'
+
 export default {
   name: 'MapDrag',
   props: {
     searchKey: {
-      default: ''
+      default: '',
-    }
+    },
   },
   data() {
     return {
@@ -28,7 +32,7 @@ export default {
       AMapUI: null,
       AMap: null,
       city: '',
-      geolocation: null
+      geolocation: null,
     }
   },
   watch: {
@@ -36,7 +40,7 @@ export default {
       if (this.searchKey === '') {
         this.placeSearch.clear()
       }
-    }
+    },
   },
   async created() {
     // 已载入高德地图API，则直接初始化地图
@@ -44,7 +48,9 @@ export default {
       this.initMap()
       // 未载入高德地图API，则先载入API再初始化
     } else {
-      await remoteLoad('https://webapi.amap.com/maps?v=2.0&key=4b083a38fc17ad7c5e3df667931e0cf0')
+      await remoteLoad(
+        'https://webapi.amap.com/maps?v=2.0&key=4b083a38fc17ad7c5e3df667931e0cf0'
+      )
       await remoteLoad('https://webapi.amap.com/ui/1.1/main.js')
       this.initMap()
     }
@@ -67,7 +73,7 @@ export default {
 
       AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
         const mapConfig = {
-          zoom: 16
+          zoom: 16,
         }
         const map = new AMap.Map('js-container', mapConfig)
         // 获得当前定位的城市
@@ -81,15 +87,23 @@ export default {
               pageIndex: 1,
               citylimit: false,
               map: map,
-              panel: 'js-result'
+              panel: 'js-result',
               // city: that.city, // 设定搜索城市
             })
-            AMap.Event.addListener(that.placeSearch, 'listElementClick', function (e) {
+            AMap.Event.addListener(
+              that.placeSearch,
+              'listElementClick',
+              function (e) {
                 that.$emit('listElementClick', e)
-            })
+              }
-            AMap.Event.addListener(that.placeSearch, 'markerClick', function (e) {
+            )
+            AMap.Event.addListener(
+              that.placeSearch,
+              'markerClick',
+              function (e) {
                 that.$emit('listElementClick', e)
-            })
+              }
+            )
           })
           // citySearch.getLocalCity(function (status, result) {
           //   console.log('getLocalCity', status, result)
@@ -100,29 +114,32 @@ export default {
           // })
         })
         // 启用工具条
-        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], function () {
+        AMap.plugin(
+          ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'],
+          function () {
             map.addControl(
               new AMap.ToolBar({
-              position: 'RB'
+                position: 'RB',
               })
             )
             map.addControl(
               new AMap.Scale({
-              position: 'LB'
+                position: 'LB',
               })
             )
-        })
+          }
+        )
         // 创建地图拖拽
         const positionPicker = new PositionPicker({
           mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
-          map: map // 依赖地图对象
+          map: map, // 依赖地图对象
         })
 
         // 启动拖放
         positionPicker.start()
       })
-    }
+    },
-  }
+  },
 }
 </script>
 

resources/frontend/src/components/upload/index.vue

@@ -0,0 +1,214 @@
+<!--
+ * @Description:头像上传组件
+ * @Author: czw (725551805@qq.com)
+ * @Date: 2022-03-03 18:50:30
+ * @LastEditors: czw (725551805@qq.com)
+ * @LastEditTime: 2022-03-14 09:14:24
+ * @FilePath: /glxt/src/views/home/home/index.vue
+-->
+<template>
+  <div>
+    <el-upload name="image"
+               :action="uploadAction"
+               :headers="uploadHeaders"
+               :on-preview="handleChange"
+               :on-remove="beforeRemove"
+               :on-success='good'
+               :file-list="img"
+               :limit="number"
+               :before-upload="handleBeforeUpload"
+               :on-change="handleEditChange"
+               accept=".png,.jpg"
+               list-type="picture-card"
+               :class="hideUploadEdit?'hide':''"
+               :show-file-list='true'>
+      <i class="el-icon-plus"></i>
+    </el-upload>
+
+    <div class="demo-image__preview"
+         v-if='imageUrl'>
+      <el-image class="hidden__el-image"
+                ref="elImage"
+                :src="imageUrl"
+                :preview-src-list="previewSrcList">
+      </el-image>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import { getToken } from '@/util/auth'
+export default {
+  name: '', // 页面名称
+  components: {}, // 挂载组件
+  props: {
+    // 上传图片数量
+    number: {
+      type: Number,
+      default: 1,
+    },
+    file: {
+      type: Array,
+      default: () => [],
+    },
+  }, // 组件传值
+  data() {
+    return {
+      hideUploadEdit: false, // 判断显示图片上传限制隐藏
+      url: '/api/upload', // 请求接口
+      imageUrl: '', // 图片展示
+      previewSrcList: [], // 展示图片列表
+      list: [], // 上传图片列表
+      img: [], // 实际展示的图片
+    }
+  },
+  computed: {
+    // 上传的地址
+    uploadAction() {
+      return 'https://ct-upimg.yx090.com' + this.url
+    },
+    // 设置上传的请求头部
+    uploadHeaders() {
+      return {
+        // authorization: 'Bearer' + getToken(),
+        'Content-Type': 'multipart/form-data',
+      }
+    },
+  }, // 计算机属性 类似与data概念
+  watch: {
+    file: {
+      handler(val) {
+        if (val) {
+          console.log(val, 'ppp')
+          var imges = []
+          val.forEach((element) => {
+            imges = element.url.split(',')
+            this.list = imges
+          })
+          imges.forEach((element) => {
+            this.img.push({ url: this.computedGetPictureSrc(element) })
+          })
+          const previewSrcList = imges.map((ele) => {
+            return this.computedGetPictureSrc(ele)
+          })
+          this.previewSrcList = previewSrcList
+          if (val.length === this.number) {
+            this.hideUploadEdit = true
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  }, // 监控data中数据变化
+  methods: {
+    computedGetPictureSrc(src) {
+      return 'https://ct-upimg.yx090.com/' + src
+    },
+    /**
+     * @author: czw (725551805@qq.com)
+     * @description: 判断显示图片上传限制隐藏
+     * @param {*} file
+     * @param {*} fileList
+     * @return {*}
+     * @Date: 2022-03-03 21:16:54
+     */
+    handleEditChange(file, fileList) {
+      if (fileList.length === this.number) {
+        this.hideUploadEdit = true
+      }
+    },
+    /**
+     * @author: czw (725551805@qq.com)
+     * @description: 上传成功
+     * @param {*}
+     * @return {*}
+     * @Date: 2022-03-03 19:59:45
+     */
+    good(file, fileList) {
+      this.previewSrcList.push(fileList.url)
+      console.log(this.previewSrcList, '------')
+      // file.data.forEach((element) => {
+      //   this.list.push(element.url)
+      // })
+
+      this.$emit('urlimg', fileList.url)
+    },
+    /**
+     * @author: czw (725551805@qq.com)
+     * @description: 点击放大
+     * @param {*}
+     * @return {*}
+     * @Date: 2022-03-03 18:59:28
+     */
+    handleChange(file) {
+      this.imageUrl = file.url
+      this.$nextTick(() => {
+        this.$refs.elImage.clickHandler()
+      })
+    },
+    /**
+     * @author: czw (725551805@qq.com)
+     * @description:删除
+     * @param {*}
+     * @return {*}
+     * @Date: 2022-03-03 18:59:40
+     */
+    beforeRemove(file, fileList) {
+      if (fileList.length === this.number) {
+        this.hideUploadEdit = true
+      } else {
+        this.hideUploadEdit = false
+      }
+      if (file.response) {
+        file.response.data.forEach((element) => {
+          for (var i = 0; i < this.list.length; i++) {
+            if (element.url === this.list[i]) {
+              this.list.splice(i, 1)
+            }
+          }
+        })
+      } else {
+        console.log(file, 'iiii')
+        for (var i = 0; i < this.list.length; i++) {
+          if (file.url === this.computedGetPictureSrc(this.list[i])) {
+            this.list.splice(i, 1)
+          }
+        }
+      }
+    },
+    /**
+     * @author: czw (725551805@qq.com)
+     * @description:自动删除
+     * @param {*}
+     * @return {*}
+     * @Date: 2022-03-03 19:53:25
+     */
+    handleBeforeUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+        return false
+      }
+    },
+  }, // 挂载一些方法
+}
+</script>
+
+<style lang="scss">
+.demo-image__preview {
+  height: 0;
+}
+.hidden__el-image {
+  width: 0;
+  height: 0;
+  ::v-deep .el-image__preview {
+    display: none;
+  }
+}
+.hide .el-upload--picture-card {
+  display: none;
+}
+</style>

resources/frontend/src/store/index.js

@@ -1,13 +1,15 @@
-import Vue from "vue";
+import Vue from 'vue'
-import Vuex from "vuex";
+import Vuex from 'vuex'
 
-Vue.use(Vuex);
+Vue.use(Vuex)
 
-const store = new Vuex.Store({
+export default new Vuex.Store({
-  state: {},
+  state: {
-  mutations: {},
+  },
-  actions: {},
+  mutations: {
-  modules: {},
+  },
-});
+  actions: {
-
+  },
-export default store;
+  modules: {
+  }
+})

resources/frontend/src/views/store/store.vue

@@ -1,55 +1,113 @@
 <template>
+  <div>
+    <el-button type="primary"
+               @click="handAdd">新增</el-button>
     <el-table :data="tableData"
               border
               style="width: 100%">
-    <el-table-column prop="date"
+      <el-table-column prop="id"
-                     label="日期"
+                       label="ID"
                        width="180">
       </el-table-column>
       <el-table-column prop="name"
-                     label="姓名"
+                       label="店铺名称"
                        width="180">
       </el-table-column>
+      <el-table-column prop="plat_id"
+                       label="所属平台">
+      </el-table-column>
       <el-table-column prop="address"
-                     label="地址">
+                       label="操作">
+        <template slot-scope="scope">
+          <el-button type="primary"
+                     @click="handEdit(scope.row.id,scope.row)">编辑</el-button>
+          <el-button type="danger"
+                     @click="handdel(scope.row.id)">授权</el-button>
+        </template>
       </el-table-column>
     </el-table>
+    <!-- 新增店铺 -->
+    <el-dialog title="新增店铺"
+               :visible.sync="dialogFormVisible">
+      <el-form :model="form">
+        <el-form-item label="店铺名称">
+          <el-input v-model="form.name"
+                    placeholder="输入店铺名称"></el-input>
+        </el-form-item>
+        <el-form-item label="店铺平台">
+          <el-select v-model="form.plat_id"
+                     placeholder="输入店铺平台">
+            <el-option v-for="(item,index) in storeId"
+                       :key="index"
+                       :label="item"
+                       :value="index">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer"
+           class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="addSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { shopListId, shopAdd, storeList } from '../../api/shop'
 export default {
   name: 'GlxtStore',
 
   data() {
     return {
-      tableData: [
+      dialogFormVisible: false,
-        {
+      form: {
-          date: '2016-05-02',
+        name: '',
-          name: '王小虎',
+        plat_id: '',
-          address: '上海市普陀区金沙江路 1518 弄',
       },
-        {
+      storeId: [], // 店铺id
-          date: '2016-05-04',
+      tableData: [],
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-      ],
     }
   },
-
+  mounted() {
-  mounted() {},
+    // 获取平台
-
+    shopListId().then((res) => {
-  methods: {},
+      this.storeId = res.data.data
+    })
+    // 展示店铺列表
+    this.getStoreList()
+  },
+  methods: {
+    // 点击新增
+    handAdd() {
+      this.form.name = ''
+      this.form.plat_id = ''
+      this.dialogFormVisible = true
+    },
+    // 新增商品
+    addSubmit() {
+      const datas = this.form
+      shopAdd(datas).then((res) => {
+        if (res.status == 200) {
+          this.$message({
+            type: 'success',
+            message: '添加成功',
+          })
+        }
+      })
+      this.dialogFormVisible = false
+      this.getStoreList()
+    },
+    // 店铺列表
+    getStoreList() {
+      storeList().then((res) => {
+        this.tableData = res.data.data
+        console.log(res, 'kkk')
+      })
+    },
+  },
 }
 </script>
 

resources/frontend/src/views/users/users.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="conent">
+    <!-- 新增按钮 -->
     <div class="btn">
       <el-button type="primary" @click="dialogVisible = true">新增</el-button>
     </div>
 
+    <!-- 点击新增弹出表单 -->
     <div class="from">
       <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%">
         <div>
@@ -31,58 +33,132 @@
       </el-dialog>
     </div>
 
+    <!-- 点击编辑弹出表单信息 -->
+    <div class="edit_from">
+      <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
+        <div>
+          <el-form label-width="80px">
+            <el-form-item label="ID">
+              <el-input v-model="edit_from.id"></el-input>
+            </el-form-item>
+            <el-form-item label="姓名">
+              <el-input v-model="edit_from.name"></el-input>
+            </el-form-item>
+            <el-form-item label="邮箱">
+              <el-input v-model="edit_from.email"></el-input>
+            </el-form-item>
+            <el-form-item label="角色">
+              <el-input v-model="edit_from.role_name"></el-input>
+            </el-form-item>
+            <el-form-item label="密码">
+              <el-input v-model="edit_from.password"></el-input>
+            </el-form-item>
+            <el-form-item label="密码确认">
+              <el-input v-model="edit_from.password_confirmation"></el-input>
+            </el-form-item>
+            <div class="from-btn">
+              <el-button type="danger" @click="editVisible = false"
+                >取消</el-button
+              >
+              <el-button @click="onEdit()">确认</el-button>
+            </div>
+          </el-form>
+        </div>
+      </el-dialog>
+    </div>
+
+    <!-- 用户列表 -->
     <div class="table">
       <template>
         <el-table :data="tableList" style="width: 100%">
-          <el-table-column prop="id" label="ID" width="400"></el-table-column>
+          <el-table-column prop="id" label="ID"></el-table-column>
-          <el-table-column prop="name" label="姓名" width="400">
+          <el-table-column prop="name" label="姓名"> </el-table-column>
-          </el-table-column>
+          <el-table-column label="角色"> 超级管理员</el-table-column>
-          <el-table-column prop="email" label="角色" width="400">
-          </el-table-column>
           <el-table-column label="操作">
-            <el-button>编辑</el-button>
+            <template slot-scope="scope">
+              <el-button @click="openEdit(scope.row)">编辑</el-button>
               <el-button type="danger">删除</el-button>
+            </template>
           </el-table-column>
         </el-table>
       </template>
     </div>
+
+    <!-- 分页功能 -->
+    <div class="block">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="current_page"
+        :page-sizes="[15, 50, 100]"
+        :page-size="15"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="Paginationdata.total"
+      >
+      </el-pagination>
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
 export default {
-  name: "GlxtUsers",
-
   data() {
     return {
+      id: "",
       dialogVisible: false, //新增按钮变量
+      editVisible: false, //编辑按钮变量
       tableList: [], //列表数据
       from: {
+        //表单数据（用户名密码确认密码角色名）
         name: "",
         password: "",
         password_confirmation: "",
         role_name: "超级管理员",
       },
+      edit_from: {
+        // 编辑返回默认数据
+        created_at: "",
+        deleted_at: null,
+        email: "",
+        id: "",
+        name: "",
+        password: "",
+        password_confirmation: "",
+        role_name: "超级管理员",
+      },
+      Paginationdata: {}, //分页相关数据
+      current_page: 1, //当前页
+      per_page: 15, //每页显示数量
     };
   },
 
   mounted() {
+    this.getList(); //进入调用用户表单数据请求
+  },
+  methods: {
     //用户表单数据请求
+    getList() {
       axios
         .get("api/users",{
           headers: {
             Authorization:
               "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
           },
+          params:{
+          page:this.current_page,
+          per_page:this.per_page,
+        }
         })
         .then((res) => {
           console.log(res);
           this.tableList = res.data.data;
+          this.Paginationdata = res.data.meta;
         });
     },
-  methods: {
+    //点击新增确认
     onSubmit() {
+      // 请求
       axios
         .post("/api/users", this.from, {
           headers: {
@@ -91,9 +167,67 @@ export default {
           },
         })
         .then((res) => {
-          console.log(res);
+          this.tableList = [...this.tableList, res.data.data];
-        });
           this.dialogVisible = false;
+          this.getList();
+          this.from = {};
+          this.$message({
+            message: "账号添加成功！",
+            type: "success",
+          });
+        });
+    },
+    //点击编辑
+    openEdit(e) {
+      this.editVisible = true;
+      console.log(e.id);
+      let id = e.id;
+      this.id = e.id;
+      // 请求id对应数据
+      axios
+        .get(`/api/users/${id}`, {
+          headers: {
+            Authorization:
+              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
+          },
+        })
+        .then((res) => {
+          console.log(res.data.data);
+          this.edit_from = res.data.data;
+        });
+    },
+    //编辑完确认请求
+    onEdit() {
+      let id = this.id;
+      console.log(id);
+      axios
+        .patch(`/api/users/${id}`, this.edit_from, {
+          headers: {
+            Authorization:
+              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
+          },
+        })
+        .then((res) => {
+          this.tableList = [...this.tableList, res.data.data];
+          this.editVisible = false;
+          this.getList();
+          this.$message({
+            message: "账号修改成功！",
+            type: "success",
+          });
+        });
+      this.editVisible = false;
+    },
+    //分页功能
+    handleSizeChange(val) {
+      this.current_page = val;
+      console.log(this.current_page);
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.per_page = val;
+      console.log(this.per_page);
+      this.getList();
     },
   },
 };
@@ -125,4 +259,8 @@ export default {
   justify-content: space-around;
   align-content: center;
 }
+
+.block {
+  margin-top: 30px;
+}
 </style>

resources/frontend/src/views/yingyeting/addgoods/addgoods.vue

@@ -5,109 +5,104 @@
            style="margin:20px">
         <div class="add-item-info"
              style="margin-bottom:10px;margin-left:52px">
+          <div>
+            <div style="font-size:14px;">商品列表：</div>
+            <el-select v-model="lid"
+                       placeholder="选择商品">
+              <el-option v-for="item in goodschoose"
+                         :key="item.id"
+                         :label="item.title"
+                         :value="item.id">
+              </el-option>
+            </el-select>
+          </div>
           <span style="font-size:14px;">商品图片：</span>
-          <el-upload class="upload"
+          <!-- <UploadTem @urlimg='hanleurlimg'
-                     action="/api/admin/upload"
+                     :number="2"
+                     :file='file' /> -->
+          <!-- <el-upload class="upload"
+                     action="https://ct-upimg.yx090.com/api/upload"
                      list-type="picture-card"
-                     :on-success="uploadGalleryItem"
+                     :on-success="successUpload"
-                     :on-remove="removeGalleryItem"
+                     :on-error="errorUpload"
-                     :file-list="gallery">
+                     :on-remove="removeUpload"
+                     :headers="headers"
+                     :limit="1">
             <img v-if="imageUrl"
                  :src="imageUrl"
                  class="avatar">
             <i v-else
                class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          </el-upload> -->
         </div>
         <el-form ref="form"
                  :inline="true"
                  :model="form">
           <div>
             <el-form-item label="商品名称：">
-              <el-select v-model="form.name1"
+              <el-input placeholder="商品名称"
-                         placeholder="商品名称">
+                        v-model="form.title"></el-input>
-                <el-option v-for="item in options"
+            </el-form-item>
-                           :key="item.value"
+            <el-form-item label="商品编码：">
-                           :label="item.label"
+              <el-input placeholder="商品编码"
-                           :value="item.value">
+                        v-model="form.goods_code"></el-input>
-                </el-option>
-              </el-select>
             </el-form-item>
             <el-form-item label="商品种类：">
-              <el-select v-model="form.name2"
+              <el-select v-model="form.type_id"
                          placeholder="商品种类">
-                <el-option v-for="item in options"
+                <el-option v-for="item in cate"
-                           :key="item.value"
+                           :key="item.id"
-                           :label="item.label"
+                           :label="item.name"
-                           :value="item.value">
+                           :value="item.id">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="商品品牌：">
-              <el-select v-model="form.name3"
+              <el-select v-model="form.brand_id"
                          placeholder="商品品牌">
-                <el-option v-for="item in options"
+                <el-option v-for="item in brand"
-                           :key="item.value"
+                           :key="item.id"
-                           :label="item.label"
+                           :label="item.name"
-                           :value="item.value">
+                           :value="item.id">
                 </el-option>
               </el-select>
             </el-form-item>
           </div>
-          <div v-for="(item,i) in specifyList">
+          <div v-for="(item,i) in skus"
+               :key="i">
             <span style="margin-right:-15px">{{i+1}}.</span>
             <el-form-item label="商品规格：">
-              <el-select v-model="specifyList[i].specify"
+              <el-input placeholder="商品规格"
-                         placeholder="商品规格">
+                        v-model="skus[i].title"></el-input>
-                <!-- <el-option v-for="item in options"
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value">
-                </el-option> -->
-              </el-select>
             </el-form-item>
             <span class="addto"
+                  v-if="!gid"
                   @click="handleAdd()">+</span>
-            <el-form-item label="商品编码：">
+            <el-form-item label="规格编码：">
-              <el-select v-model="specifyList[i].code"
+              <el-input v-model="skus[i].sku_code"
                         placeholder="商品编码">
-                <!-- <el-option v-for="item in options"
+              </el-input>
-                           :key="item.value"
-                           :label="item.label"
-                           :value="item.value">
-                </el-option> -->
-              </el-select>
             </el-form-item>
             <el-form-item label="商品状态：">
-              <el-select v-model="specifyList[i].state"
+              <el-select v-model="skus[i].status"
-                         placeholder="在售（默认）">
+                         placeholder="下架（默认）">
-                <!-- <el-option v-for="item in options"
+                <el-option v-for="item in options"
-                           :key="item.value"
+                           :key="item.id"
                            :label="item.label"
-                           :value="item.value">
+                           :value="item.id">
-                </el-option> -->
+                </el-option>
               </el-select>
             </el-form-item>
             <div>
               <el-form-item label="商品数量：">
-                <el-select v-model="specifyList[i].number"
+                <el-input v-model="skus[i].num"
                           placeholder="商品数量">
-                  <!-- <el-option v-for="item in options"
+                </el-input>
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value">
-                  </el-option> -->
-                </el-select>
               </el-form-item>
               <el-form-item label="商品成本：">
-                <el-select v-model="specifyList[i].cost"
+                <el-input v-model="skus[i].cost"
                           placeholder="商品成本">
-                  <!-- <el-option v-for="item in options"
+                </el-input>
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value">
-                  </el-option> -->
-                </el-select>
               </el-form-item>
               <el-button type="primary"
                          @click="handleDelete(i)">删除</el-button>
@@ -115,7 +110,8 @@
           </div>
           <div class="btn">
             <el-form-item>
-              <el-button type="primary">保存</el-button>
+              <el-button type="primary"
+                         @click="handleSave()">保存</el-button>
               <el-button plain>取消</el-button>
             </el-form-item>
           </div>
@@ -129,69 +125,202 @@
 </template>
 
 <script>
+import UploadTem from '../../../components/upload/index.vue'
+import {
+  addGoods,
+  checkGoods,
+  goodsList,
+  updateGoods,
+} from '../../../api/goods.js'
+import { goods_types, Brand_goods_types } from '../../../api/rankingData.js'
 export default {
+  components: {
+    UploadTem,
+  },
   data() {
     return {
       gallery: '',
       imageUrl: '',
-      specifyList: [
+      lid: '', // 选择的商品列表id
+      gid: '', // 商品id
+      brand: [], // 品牌列表
+      cate: [], // 种类列表
+      goodschoose: [], // 商品列表
+      // 规格列表
+      skus: [
         {
-          specify: '',
+          title: '',
-          code: '',
+          sku_code: '',
-          state: '',
+          status: '',
-          number: '',
+          num: '',
           cost: '',
         },
-      ], // 规格列表
+      ],
+
+      // 增加商品表单
       form: {
-        name1: '',
+        goods_id: '',
-        name2: '',
+        title: '',
-        name3: '',
+        img_url: 'abc.jpg',
-        name4: '',
+        type_id: '',
-        name5: '',
+        brand_id: '',
-        name6: '',
+        goods_code: '',
       },
+      // 商品状态
       options: [
         {
-          value: '选项1',
+          id: '1',
-          label: '黄金糕',
+          label: '在售',
         },
         {
-          value: '选项2',
+          id: '2',
-          label: '双皮奶',
+          label: '预警',
         },
         {
-          value: '选项3',
+          id: '0',
-          label: '蚵仔煎',
+          label: '下架',
-        },
-        {
-          value: '选项4',
-          label: '龙须面',
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭',
         },
       ],
+      file: [],
     }
   },
+
+  watch: {
+    lid: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.goodschoose.forEach((item) => {
+            if (item.id == newVal) {
+              this.form = { ...item }
+            }
+          })
+        }
+      },
+      deep: true, // 深度监听
+      immediate: true, // 第一次改变就执行
+    },
+  },
   methods: {
+    // 查看一个商品
+    handleUpdate() {
+      this.gid = this.$route.query
+      if (this.gid.id) {
+        checkGoods(this.gid.id).then((res) => {
+          console.log(res.data.data, 'oooppuu')
+          const data = res.data.data
+          const sku = this.skus[0]
+          const list = {}
+          Object.keys(data).map((key) => {
+            Object.keys(sku).map((i) => {
+              if (key == i) {
+                list[i] = data[key]
+              }
+            })
+          })
+        })
+      }
+    },
+    // 商品列表
+    handleList() {
+      goodsList().then((res) => {
+        this.goodschoose = res.data.data
+      })
+    },
+    // 保存，增加一个商品
+    handleSave() {
+      if (this.gid) {
+        const goods = this.form
+        const sku = this.skus[0]
+        const updata = {
+          ...goods,
+          ...sku,
+          goods_id: this.lid,
+        }
+        console.log(updata, '24235345')
+        // updateGoods(updata, this.gid).then((res) => {
+        //   console.log(res, '66666666')
+        // })
+      } else {
+        const datas = {
+          ...this.form,
+          skus: this.skus,
+        }
+        addGoods(datas)
+          .then((res) => {
+            if (res.data.httpCode == 200) {
+              this.$message({
+                type: 'success',
+                message: '添加成功',
+              })
+              this.updateForm()
+            }
+          })
+          .catch((e) => {
+            this.$message({
+              type: 'error',
+              message: e.response.data.errorMessage.goods_code[0],
+            })
+          })
+      }
+    },
+    // 修改成功后重置表单
+    updateForm() {
+      this.form = {
+        title: '',
+        img_url: 'abc.jpg',
+        type_id: '',
+        brand_id: '',
+        goods_code: '',
+      }
+      this.skus = [
+        {
+          title: '',
+          sku_code: '',
+          status: '',
+          num: '',
+          cost: '',
+        },
+      ]
+    },
     // 增加一个商品规格
     handleAdd() {
-      this.specifyList.push({
+      this.skus.push({
-        specify: '',
+        title: '',
-        code: '',
+        sku_code: '',
-        state: '',
+        status: '',
-        number: '',
+        num: '',
         cost: '',
       })
     },
     // 删除一个商品规格
     handleDelete(index) {
-      this.specifyList.splice(index, 1)
+      this.skus.splice(index, 1)
     },
-    uploadGalleryItem() {},
+    hanleurlimg(val) {
-    removeGalleryItem() {},
+      console.log(val, '=+++++++++')
+    },
+    // 上传商品图片
+    successUpload(file, fileList) {
+      console.log(file, fileList, 5555)
+    },
+    errorUpload(file, fileList) {
+      console.log(file, fileList, 5555)
+    },
+    // 移除商品图片
+    removeUpload() {},
+  },
+  mounted() {
+    this.gid = this.$route.query
+    // 获取商品种类
+    goods_types().then((res) => {
+      this.cate = res.data.data
+    })
+    // 获取商品品牌
+    Brand_goods_types().then((res) => {
+      this.brand = res.data.data
+    })
+    this.handleList()
+    this.handleUpdate()
   },
 }
 </script>

resources/frontend/src/views/yingyeting/yingyeting.vue

@@ -8,67 +8,67 @@
                  :inline="true"
                  :model="form">
           <el-form-item label="商品名称：">
-            <el-select v-model="form.name1"
+            <el-input v-model="form.goods_title"
                       placeholder="商品名称">
-              <el-option v-for="item in options"
+            </el-input>
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
           </el-form-item>
           <el-form-item label="商品种类：">
-            <el-select v-model="form.name2"
+            <el-select v-model="form.type_id"
                        placeholder="商品种类">
-              <el-option v-for="item in options"
+              <el-option v-for="item in cate"
-                         :key="item.value"
+                         :key="item.id"
-                         :label="item.label"
+                         :label="item.name"
-                         :value="item.value">
+                         :value="item.id">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="商品规格：">
-            <el-select v-model="form.name3"
+            <el-input v-model="form.sku_title"
                       placeholder="商品规格">
-              <el-option v-for="item in options"
+
-                         :key="item.value"
+            </el-input>
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
           </el-form-item>
           <el-form-item label="商品品牌：">
-            <el-select v-model="form.name4"
+            <el-select v-model="form.brand_id"
                        placeholder="商品品牌">
-              <el-option v-for="item in options"
+              <el-option v-for="item in brand"
-                         :key="item.value"
+                         :key="item.id"
-                         :label="item.label"
+                         :label="item.name"
-                         :value="item.value">
+                         :value="item.id">
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="商品库存：">
+            <el-input v-model="form.keyword_type"
+                      placeholder="商品库存">
+
+            </el-input>
+          </el-form-item>
           <el-form-item label="商品状态：">
-            <el-select v-model="form.name5"
+            <el-select v-model="form.status"
                        placeholder="商品状态">
               <el-option v-for="item in options"
-                         :key="item.value"
+                         :key="item.id"
                          :label="item.label"
-                         :value="item.value">
+                         :value="item.id">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="创建时间：">
-            <el-date-picker v-model="value1"
+            <el-date-picker v-model="timer"
                             type="datetimerange"
                             range-separator="至"
                             start-placeholder="开始日期"
                             end-placeholder="结束日期"
-                            align="right">
+                            align="right"
+                            value-format="yyyy-MM-DD hh:mm:ss">
             </el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary">筛选</el-button>
+            <el-button type="primary"
-            <el-button plain>重置筛选</el-button>
+                       @click="handleChoose">筛选</el-button>
+            <el-button plain
+                       @click="handleReChoose">重置筛选</el-button>
           </el-form-item>
 
         </el-form>
@@ -95,9 +95,11 @@
             <el-button type="primary"
                        plain>库存盘点</el-button>
             <el-button type="primary"
-                       plain>导入商品</el-button>
+                       plain
+                       @click="handleImport">导入商品</el-button>
             <el-button type="primary"
-                       plain>表格导出</el-button>
+                       plain
+                       @click="handleExport">表格导出</el-button>
           </div>
         </div>
         <!-- 表格 -->
@@ -112,36 +114,45 @@
                            width="55">
           </el-table-column>
           <el-table-column label="商品信息">
-            <template slot-scope="scope">{{ scope.row.date }}</template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.goods.img_url}}</div>
+              <div>{{ scope.row.goods.title}}</div>
+            </template>
           </el-table-column>
-          <el-table-column prop="name"
+          <el-table-column label="品类">
-                           label="品类">
+            <template slot-scope="scope">
+              <div>{{ scope.row.goods.type?scope.row.goods.type.name:''}}</div>
+            </template>
           </el-table-column>
-          <el-table-column prop="address"
+          <el-table-column label="规格"
-                           label="规格">
+                           prop="title">
           </el-table-column>
-          <el-table-column prop="name"
+          <el-table-column label="品牌">
-                           label="品牌">
+            <template slot-scope="scope">
+              <div>{{ scope.row.goods.brand?scope.row.goods.brand.name:''}}</div>
+            </template>
           </el-table-column>
-          <el-table-column prop="address"
+          <el-table-column prop="two_days_ago_num"
                            sortable
                            label="2天前库存">
           </el-table-column>
-          <el-table-column prop="name"
+          <el-table-column prop="yesterday_num"
                            sortable
                            label="1天前库存">
           </el-table-column>
-          <el-table-column prop=""
+          <el-table-column sortable
-                           sortable
                            label="今日到货">
-            <template>
+            <template slot-scope="scope">
-              <div v-if="isShow">
+              <div>
+                <div v-if="true">
                   <el-input v-model="input"></el-input>
                 </div>
+                <div>{{ scope.row.daily!=null?scope.row.daily.arrived_today_num:0}}</div>
+              </div>
             </template>
 
           </el-table-column>
-          <el-table-column prop=""
+          <el-table-column prop="cost"
                            sortable
                            label="成本">
             <template>
@@ -151,58 +162,76 @@
             </template>
 
           </el-table-column>
-          <el-table-column prop="address"
+          <el-table-column prop="reference_price"
                            sortable
                            label="参考售价">
 
           </el-table-column>
-          <el-table-column prop="name"
+          <el-table-column prop="num"
                            sortable
                            label="总量">
           </el-table-column>
-          <el-table-column prop="address"
+          <el-table-column prop="reserve"
                            sortable
                            label="预留量">
           </el-table-column>
-          <el-table-column prop="name"
+          <!-- <el-table-column prop="name"
                            sortable
                            label="店铺订单">
-          </el-table-column>
+          </el-table-column> -->
-          <el-table-column prop="address"
+          <el-table-column sortable
-                           sortable
                            label="损耗">
-            <template>
+
-              <div class="loss">66</div>
+            <template slot-scope="scope">
+
+              <el-popover width="200"
+                          placement="right"
+                          trigger="hover">
                 <div class="detail">
-                <div>损耗数量：<input /></div>
+                  <span>损耗：</span>
+                  <el-input></el-input>
+                </div>
                 <el-radio-group v-model="radio">
-                  <el-radio :label="3">备选项</el-radio>
+                  <el-radio :label="3">48h以上</el-radio>
-                  <el-radio :label="6">备选项</el-radio>
+                  <el-radio :label="6">到货错误</el-radio>
-                  <el-radio :label="9">备选项</el-radio>
+                  <el-radio :label="9">灰霉</el-radio>
+                  <el-radio :label="2">长度</el-radio>
+                  <el-radio :label="4">花朵</el-radio>
+                  <el-radio :label="5">其他</el-radio>
                 </el-radio-group>
 
+                <div class="list_btn">
+                  <el-button type="primary">保存</el-button>
+                  <el-button>取消</el-button>
                 </div>
+                <div class="loss"
+                     slot="reference">{{ scope.row.daily?scope.row.daily.arrived_loss_num:0}}</div>
+              </el-popover>
+
             </template>
           </el-table-column>
-          <el-table-column prop="name"
+          <el-table-column prop="stock"
                            sortable
                            label="库存">
           </el-table-column>
           <el-table-column prop="address"
                            sortable
                            label="库存盘点">
-            <el-input v-model="input"></el-input>
+            <template slot-scope="scope">
+              <div>{{ scope.row.daily?scope.row.daily.inventory:0}}</div>
+            </template>
           </el-table-column>
-          <el-table-column prop="name"
+          <el-table-column prop="status"
                            label="状态">
           </el-table-column>
           <el-table-column label="操作">
-            <template>
+            <template slot-scope="scope">
               <div>
-                <el-button type="text">修改</el-button>
+                <el-button type="text">库存</el-button>
               </div>
               <div>
-                <el-button type="text">编辑</el-button>
+                <el-button type="text"
+                           @click="handleEdit(scope.row.id)">编辑</el-button>
               </div>
               <div>
                 <el-button type="text">记录</el-button>
@@ -215,90 +244,59 @@
       </div>
       <el-button type="primary">确定</el-button>
     </el-card>
-
+    <div class="page-pagination">
-    <el-pagination @size-change="handleSizeChange"
+      <el-pagination :total="total"
+                     class="mt-4"
+                     :current-page="form.page"
+                     :page-size="form.per_page"
                      @current-change="handleCurrentChange"
-                   :current-page="currentPage4"
+                     @size-change="handleSizeChange"
-                   :page-sizes="[100, 200, 300, 400]"
+                     layout="total, prev, pager, next, jumper">
-                   :page-size="100"
-                   layout="total, sizes, prev, pager, next, jumper"
-                   :total="400">
       </el-pagination>
     </div>
+  </div>
 </template>
 
 <script>
 import { goods } from '../../api/goods'
+import { goods_types, Brand_goods_types } from '../../api/rankingData.js'
 export default {
   data() {
     return {
+      total: 0, // 总条数
+      timer: '', // 筛选的时间
+      radio: '', // 损耗选择的原因
+      brand: [], // 品牌列表
+      cate: [], // 种类列表
       isShow: false, // 点击上新显示输入框
+      tableData: [], // 商品列表
+      // 商品状态
       options: [
         {
-          value: '选项1',
+          id: '1',
-          label: '黄金糕',
+          label: '在售',
         },
         {
-          value: '选项2',
+          id: '2',
-          label: '双皮奶',
+          label: '预警',
         },
         {
-          value: '选项3',
+          id: '0',
-          label: '蚵仔煎',
+          label: '下架',
-        },
-        {
-          value: '选项4',
-          label: '龙须面',
-        },
-        {
-          value: '选项5',
-          label: '北京烤鸭',
-        },
-      ],
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-08',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-06',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-07',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
         },
       ],
+
+      // 请求商品列表的参数
       form: {
-        name1: '',
+        goods_title: '', // 商品名称
-        name2: '',
+        type_id: '', // 商品种类id
-        name3: '',
+        brand_id: '', // 商品品牌id
-        name4: '',
+        sku_title: '', // 商品规格
-        name5: '',
+        status: '', // 商品状态
-        name6: '',
+        keyword_type: '', // 库存
+        keyword_value: '',
+        page: 1,
+        per_page: 5,
       },
       input: '',
       value1: '',
@@ -306,6 +304,52 @@ export default {
     }
   },
   methods: {
+    // 列表编辑
+    handleEdit(id) {
+      this.$router.push('/addgoods?id=' + id)
+    },
+    // 获取商品列表
+    getList() {
+      this.form.keyword_value = this.timer[0] + '-' + this.timer[1]
+      const forms = { ...this.form }
+      console.log(forms, 'opopo')
+      goods(forms).then((res) => {
+        this.tableData = res.data.data
+        console.log(res, 111)
+        // console.log(this.tableData, 'ppp')
+      })
+    },
+    // 筛选
+    handleChoose() {
+      this.getList()
+    },
+    // 分页-当前页改变
+    handleCurrentChange(e) {
+      this.form.page = e
+      this.handleChoose()
+    },
+    // 分页
+    handleSizeChange(e) {
+      this.form.per_page = e
+      this.getList()
+    },
+    // 重置筛选
+    handleReChoose() {
+      this.form = {
+        goods_title: '', // 商品名称
+        type_id: '', // 商品种类id
+        brand_id: '', // 商品品牌id
+        sku_title: '', // 商品规格
+        status: '', // 商品状态
+        keyword_type: '',
+      }
+      this.timer = ''
+    },
+
+    // 导入商品
+    handleImport() {},
+    // 导出商品
+    handleExport() {},
     // 点击上新
     update() {
       this.isShow = true
@@ -318,24 +362,20 @@ export default {
     },
     // 新增商品
     addNewgoods() {
-      this.$router.push({ path: '/index/yingyeting/addgoods' })
+      this.$router.push({ path: '/addgoods' })
     },
-    // 分页
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
   },
-    handleCurrentChange(val) {
+  mounted() {
-      console.log(`当前页: ${val}`)
+    // 获取商品种类
-    },
+    goods_types().then((res) => {
-    // 商品列表
+      this.cate = res.data.data
-    getGoods() {
-      goods().then((res) => {
-        console.log('商品列表', res)
     })
-    },
+    // 获取商品品牌
-  },
+    Brand_goods_types().then((res) => {
-  created() {
+      this.brand = res.data.data
-    this.getGoods()
+    })
+    // 获取商品列表
+    this.getList()
   },
 }
 </script>
@@ -344,14 +384,19 @@ export default {
 .loss {
   position: relative;
 }
-.detail {
+
-  position: absolute;
+/deep/ .detail .el-button,
-  width: 100px;
+/deep/ .detail .el-button--primary {
-  height: 100px;
+  width: 20px;
-  border: 1px solid black;
+  height: 20px;
-  background: red;
+  line-height: 5px;
-  right: 0;
 }
+/deep/ .detail .el-input,
+/deep/ .detail .el-input__inner {
+  width: 20px;
+  height: 20px;
+}
+
 .goods {
 }
 .table {