粘贴代码

ghs/src/cool/request/index.js

@@ -33,6 +33,7 @@ import ptItem from '@/service/pt-item/index';
 import custom from '@/service/custom/index';
 import product from '@/service/product/index';
 import ptItemClass from '@/service/pt-item-class/index';
+import ghsItemClass from '@/service/ghs-item-class/index';
 
 export function SET_SERVICE({ store }) {
 	// const files = require.context('@/service/', true, /\.js$/);
@@ -71,7 +72,8 @@ export function SET_SERVICE({ store }) {
 		ptItem,
 		custom,
 		product,
-		ptItemClass
+		ptItemClass,
+		ghsItemClass
 	};
 
 	Vue.prototype.$service = modules;

ghs/src/mock/userInfo.js

@@ -159,6 +159,7 @@ let menu = {
 		{id: '4',parentId: null,name: '花材',type: 0,icon: 'iconshangpinguanli',orderNum: 4,router: '/item/list',viewPath: 'views/item/list.vue',keepAlive: 1},
 		{id: '405',	parentId: '4',name: '花材列表',type: 1,icon: 'icon-user',orderNum: 4,router: '/item/list',viewPath: 'views/item/list.vue',keepAlive: 1},
 		{id: '401',parentId: '4',name: '花材分类',type: 1,icon: 'icon-user',orderNum: 4,router: '/item-class/list',viewPath: 'views/item-class/list.vue',keepAlive: 1},
+		{id: '809',parentId: '8',name: '花材导入',type: 1,icon: 'icongongzuotai',orderNum: 4,router: '/item-class/add',viewPath: 'views/item-class/add.vue',keepAlive: 1},
 		// 员工管理
 		{id: '9',parentId: null,name: '员工',type: 0,icon: 'iconyuangongguanli',orderNum: 9,router: '/staff/list',viewPath: 'views/staff/list.vue',keepAlive: 1},
 		{id: '902',parentId: '9',name: '员工列表',type: 1,icon: 'iconkehuguanli',orderNum: 9,router: '/staff/list',viewPath: 'views/staff/list.vue',keepAlive: 1},

ghs/src/service/ghs-item-class/index.js

@@ -0,0 +1,14 @@
+import { BaseService, Service } from '@/cool';
+
+@Service('pt-item-class')
+export class ItemClassService extends BaseService {
+
+  getAllClass(data) {
+    return this.request({
+      url: '/get-all-class',
+      params: data
+    });
+  }
+
+}
+export default new ItemClassService();

ghs/src/views/item-class/add.vue

@@ -0,0 +1,220 @@
+<style lang="scss" scoped>
+    .app-list-content{
+        min-width: 1000px;
+    }
+    .left-box{
+        width: 30%;
+        height: 100%;
+    }
+    .content-box{
+        width: 5%;
+        height: 100%;
+        .switchover-box{
+            div{
+                width: 50px;
+                height: 50px;
+                margin-top: 20px;
+                color: #797979;
+                border: 1px solid #dadada;
+                font-weight: 700;
+                font-size: 36px;
+                cursor:pointer;  //小手
+            }
+        }
+    }
+    .right-box{
+        width: 65%;
+        height: 100%;
+    }
+    .title{
+        width: calc(100% - 2px);
+        height: 40px;
+        /*border: 1px solid #eee;*/
+        border: 1px solid #dadada;
+    }
+    .center-box{
+        margin-top: 20px;
+        height: calc(100% - 64px);
+        .class-list{
+            width: 30%;
+            height: 100%;
+            border: 1px solid #dadada;
+            overflow: scroll;
+            div{
+                height: 40px;
+                cursor:pointer;  //小手
+                &.active{
+                    color: #ffffff;
+                    background: #00ccff;
+                }
+            }
+        }
+        .item-box{
+            position: relative;
+            width: 65%;
+            height: 100%;
+            border: 1px solid #dadada;
+            padding: 0 10px;
+            .item-seek-box{
+                height: 80px;
+                border-bottom: 1px solid #dadada;
+                input{
+                    width: calc(100% - 60px);
+                    padding: 0 10px;
+                    height: 40px;
+                    border: none;
+                    background: #f1f2f6;
+                }
+                .item-seek-btn{
+                    width: 100px;
+                    height: 40px;
+                    color: #ffffff;
+                    background: #169bd5;
+                    cursor:pointer;  //小手
+                }
+            }
+            .infinite-list-title{
+                height: 40px;
+            }
+            .infinite-list{
+                height: calc(100% - 40px - 80px);
+                .infinite-list-item{
+                    height: 60px;
+                    cursor:pointer;  //小手
+                    span{
+                        margin: 0 10px;
+                    }
+                    img{
+                        width: 50px;
+                        height: 50px;
+                    }
+                }
+            }
+            .item-menu-box{
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: calc(100% - 20px);
+                height: 40px;
+                padding: 0 10px;
+                background: #f7f7f7;
+                border-top: 1px solid #dadada;
+            }
+        }
+    }
+</style>
+<template>
+    <div class="flex-center-between app-list-content">
+        <div class="left-box">
+            <div class="flex-center-center title">平台花材</div>
+            <div class="flex-center-between center-box">
+                <div class="class-list">
+                    <div class="flex-center-center " v-for="res in 30">分类</div>
+                </div>
+                <div class="item-box">
+                    <div class="flex-center item-seek-box">
+                        <input type="text" placeholder="请输入花材名称，支持拼音首字母搜索">
+                        <div class="flex-center-center item-seek-btn">搜索</div>
+                    </div>
+                    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+                        <li v-for="i in count" class="flex-center infinite-list-item">
+                            <spam class="el-icon-success" style="color: #b3b3b3"></spam>
+                            <span>{{ i }}</span>
+                            <img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
+                            <span>粉色家人</span>
+                        </li>
+                    </ul>
+                    <div class="flex-center item-menu-box">
+                        <el-checkbox @change="allSelectItem" v-model="checkedAll">全选</el-checkbox>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex-center-center content-box">
+            <div class="switchover-box">
+                <div class="flex-center-center">→</div>
+                <div class="flex-center-center">←</div>
+            </div>
+        </div>
+        <div class="right-box">
+            <div class="flex-center-center title">我的花材</div>
+            <div class="flex-center-between center-box">
+                <div class="item-box">
+                    <div class="flex-center infinite-list-title">
+                        <div style="width: 70px;text-align: center">选择</div>
+                        <div style="width: 70px;text-align: center">图片</div>
+                        <div style="width: 100px;text-align: center">名称</div>
+                        <div style="width: 100px;text-align: center">售价</div>
+                        <div style="width: 100px;text-align: center">初始库存</div>
+                        <div style="width: 100px;text-align: center">库存预警</div>
+                    </div>
+                    <ul class="infinite-list" v-infinite-scroll="load" style="height: calc(100% - 80px);overflow:auto">
+                        <li v-for="i in count" class="flex-center infinite-list-item">
+                            <div style="width: 70px;text-align: center" >
+                                <spam class="el-icon-success" style="color: #b3b3b3"></spam>
+                            </div>
+                            <div style="width: 70px;text-align: center">
+                                <img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
+                            </div>
+                            <div style="width: 100px;text-align: center">
+                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+                            </div>
+                            <div style="width: 100px;text-align: center">
+                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+
+                            </div>
+                            <div style="width: 100px;text-align: center">
+                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+
+                            </div>
+                            <div style="width: 100px;text-align: center">
+                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="flex-center item-menu-box">
+                        <div class="flex-center-center" style="width: 100px;height: 30px;color: #ffffff;background: #008ad3;border-radius: 5px">保存</div>
+                    </div>
+                </div>
+                <div class="class-list">
+                    <div class="flex-center-center " v-for="res in 30">分类</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+  import { mapGetters } from 'vuex';
+
+  export default {
+    name: 'item_add',
+    components: {},
+    data() {
+      return {
+        count: 0,
+        input: 0,
+        checked:false,
+        checkedAll:false,
+      };
+    },
+    computed: {},
+    mounted(){
+      this.getList();
+    },
+    methods: {
+      getList(){
+        this.$service.ptItemClass.getAllClass().then(res => {
+          console.log(res)
+        })
+      },
+      allSelectItem(e){
+        console.log(e)
+      },
+      load () {
+        this.count += 2
+      }
+    },
+  };
+</script>
+