供货商端花材列表 ok

ghs/src/components/module/item-list-layer.vue

@@ -1,32 +1,13 @@
 <template>
-  <el-dialog
-    title="选择花材"
-    :visible.sync="selDialog"
-    :close-on-click-modal="false"
-    :append-to-body="true"
-    @close="$emit('update:show', false)"
-    width="800px"
-  >
+  <el-dialog title="选择花材" :visible.sync="selDialog" :close-on-click-modal="false" :append-to-body="true" @close="$emit('update:show', false)" width="950px">
     <div class="recharge-modal-content">
-      <el-checkbox-group
-        v-model="checkList"
-        class="radio-wrap"
-      >
-        <x-crud
-          class="liu-crud-wrap"
-          @load="onLoad"
-        >
+      <el-checkbox-group v-model="checkList" class="radio-wrap" >
+
+        <x-crud class="liu-crud-wrap" @load="onLoad">
           <template #table-column-radio="{scope}">
             <div>
-              <el-checkbox
-                v-if="scope.row.select == 2"
-                disabled
-                :label="scope.row"
-              >{{scope.row.id}}</el-checkbox>
-              <el-checkbox
-                v-else
-                :label="scope.row"
-              >{{scope.row.id}}</el-checkbox>
+              <el-checkbox v-if="scope.row.select == 2" disabled :label="scope.row" >{{scope.row.id}}</el-checkbox>
+              <el-checkbox v-else :label="scope.row" @click.stop.native="stop" >{{scope.row.id}}</el-checkbox>
             </div>
           </template>
 
@@ -36,56 +17,40 @@
           </template>
 
           <template #table-column-stockWarning="{scope}">
-            <el-input
-              v-model="scope.row.stockWarning"
-              placeholder="最低库存"
-              size="small"
-            ></el-input>
+            <el-input v-model="scope.row.stockWarning" @click.stop.native="stop" placeholder="库存预警值" size="small"></el-input>
           </template>
 
           <template #table-column-cost="{scope}">
-            <el-input
-              v-model="scope.row.cost"
-              placeholder="成本价"
-              size="small"
-            ></el-input>
+            <el-input v-model="scope.row.cost" placeholder="成本价" @click.stop.native="stop" size="small" ></el-input>
           </template>
 
           <template #table-column-addPrice="{scope}">
-            <el-input
-              v-model="scope.row.addPrice"
-              placeholder="加价"
-              size="small"
-            ></el-input>
+            <el-input v-model="scope.row.addPrice" placeholder="加价" @click.stop.native="stop" size="small"></el-input>
           </template>
 
           <template #table-column-cover="{scope}">
             <div>
-              <cl-avatar
-                shape="square"
-                :size="40"
-                :src="scope.row.cover | default_avatar"
-                :style="{ margin: 'auto' }"
-              ></cl-avatar>
+              <cl-avatar shape="square" :size="40" :src="scope.row.cover | default_avatar" :style="{ margin: 'auto' }" ></cl-avatar>
             </div>
           </template>
         </x-crud>
+
       </el-checkbox-group>
+
+      <div>
+        <span>花材分类：</span>
+        <el-select style="width:300px;" v-model="sonClassName" size="small" placeholder="请选择分类" @change="selClassFn">
+          <el-option v-for="(item, index) in itemClassList" :key="index" :value="item.name">{{ item.name }}</el-option>
+        </el-select>
+      </div>
+
     </div>
-    <div
-      slot="footer"
-      class="dialog-footer"
-    >
-      <el-button
-        size="small"
-        @click="resetForm"
-      >取 消</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        @click="confirmFn"
-      >确定</el-button>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button size="small" @click="resetForm" >取 消</el-button>
+      <el-button type="primary" size="small" @click="confirmFn">确定</el-button>
     </div>
+
   </el-dialog>
 </template>
 
@@ -97,9 +62,17 @@ export default {
       type: Boolean,
       default: false
     },
+    classId: {
+      type: Number,
+      default: 0
+    },
     multi: {
       type: Boolean,
       default: false
+    },
+    className:{
+      type: String,
+      default:''
     }
   },
   data () {
@@ -108,30 +81,70 @@ export default {
       ruleForm: {},
       checkList: [],
       list: [],
+      //分类列表
+			itemClassList: [],
+      sonClassId:0,
+      sonClassName:''
     };
   },
   computed: {
   },
   watch: {
     show () {
-      console.log(this.show)
       this.selDialog = this.show;
     }
   },
   created () { },
   methods: {
+    stop(){},
+    selClassFn(val){
+			let index = this.itemClassList.findIndex((e) => e.name == val)
+			this.sonClassId = this.itemClassList[index].id
+    },
+		getAllClass() {
+			if (!this.$util.isEmpty(this.itemClassList)) {
+				return this.itemClassList
+			}
+			this.$service.itemClass.getAllClass().then((res) => {
+				this.itemClassList = res.list
+			})
+		},
     confirmFn () {
-      if (this.checkList.length > 0) {
-        this.$emit('confirm', this.checkList);
-      } else {
-        this.$message.warning('请至少选择一项花材');
+      if (this.checkList.length == 0) {
+        this.$message.warning('请选择花材')
+        return false
       }
-
+      if(this.sonClassId == 0){
+        this.$message.warning('请选择分类')
+        return false
+      }
+      this.$emit('confirm', {list:this.checkList,classId:this.sonClassId})
     },
     resetForm () {
       this.$emit('cancel');
     },
+    selectItem(row){
+      console.log(1212121121)
+      console.log(row)
+                //已经选过
+                if(row.select == 2){
+                  return false
+                }
+               let index = this.checkList.findIndex(e => e.id == row.id)
+               if(index === -1){
+                this.checkList = [row,...this.checkList]
+               }else{
+  　　　　　　　　this.checkList.splice(index,1)
+               }
+    },
     onLoad ({ ctx, app }) {
+
+      this.sonClassId = this.classId
+      this.sonClassName = this.className
+
+      //分类列表
+      this.getAllClass()
+
       this.app = app;
 
       let getItemList = () => {
@@ -146,13 +159,13 @@ export default {
               prop: 'radio',
               label: '选择',
               align: 'center',
-              width: 120
+              width: 110
             },
             {
               prop: 'cover',
               label: '图片',
               align: 'center',
-              width: 130
+              width: 120
             },
             {
               prop: 'name',
@@ -174,18 +187,22 @@ export default {
               label: '加价',
               align: 'center'
             },
+            {
+              prop: 'weight',
+              label: '重量',
+              align: 'center'
+            },
             {
               prop: 'select',
               label: '已添加',
               align: 'center'
             }
           ],
-          on: {
-            'row-click': (row, column) => {
-              console.log(666666666666666)
-              console.log(row)
-            }
-          },
+					on: {
+						'row-click': (row, column) => {
+              this.selectItem(row)
+						}
+					},
           // 操作列
           op: {
             visible: false // 是否显示

ghs/src/mock/userInfo.js

@@ -233,30 +233,30 @@ let menu = {
 			type: 0,
 			icon: 'iconshangpinguanli',
 			orderNum: 4,
-			router: '/goods/list',
-			viewPath: 'views/goods/goods-list.vue',
+			router: '/item/list',
+			viewPath: 'views/item/list.vue',
 			keepAlive: 1
 		},
 		{
-			id: '401',
+			id: '405',
 			parentId: '4',
-			name: '花材分类',
+			name: '花材列表',
 			type: 1,
 			icon: 'icon-user',
 			orderNum: 4,
-			router: '/item-class/list',
-			viewPath: 'views/item-class/list.vue',
+			router: '/item/list',
+			viewPath: 'views/item/list.vue',
 			keepAlive: 1
 		},
 		{
-			id: '405',
+			id: '401',
 			parentId: '4',
-			name: '花材列表',
+			name: '花材分类',
 			type: 1,
 			icon: 'icon-user',
 			orderNum: 4,
-			router: '/item/list',
-			viewPath: 'views/item/list.vue',
+			router: '/item-class/list',
+			viewPath: 'views/item-class/list.vue',
 			keepAlive: 1
 		},
 		// 员工管理

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

@@ -23,5 +23,11 @@ export class ItemClassService extends BaseService {
 			params: data
 		});
 	}
+	getAllClass(data) {
+		return this.request({
+			url: '/list',
+			params: data
+		});
+	}
 }
 export default new ItemClassService();

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

@@ -190,7 +190,7 @@ export default {
 		getItemList(data) {
 			let query = {};
 			query.classId = data.id
-			query.name = data.name
+			query.className = data.name
 			this.$router.push({ path: '/item/list', query });
 		},
 		// x-crud 组件

ghs/src/views/item/list.vue

@@ -5,92 +5,66 @@
       @load="onLoad"
     >
       <template #slot-tabs>
-        <el-tabs
-          class="liu-tabs"
-          type="border-card"
-          v-model="tabIndex"
-          @tab-click="tabClick"
-        >
-          <el-tab-pane
-            v-for="(item, index) in tabsData"
-            :key="index"
-            :label="item.text"
-            :name="item.key"
-          >
+        <el-tabs class="liu-tabs" type="border-card" v-model="tabIndex" @tab-click="tabClick">
+          <el-tab-pane v-for="(item, index) in tabsData" :key="index" :label="item.text" :name="item.key">
           </el-tab-pane>
         </el-tabs>
       </template>
 
       <template #table-column-avatarUrl="{scope}">
-        <cl-avatar
-          shape="square"
-          :size="32"
-          :src="scope.row.smallImgList[0]"
-          :style="{ margin: 'auto' }"
-        ></cl-avatar>
+        <cl-avatar shape="square" :size="32" :src="scope.row.smallImgList[0]" :style="{ margin: 'auto' }"></cl-avatar>
       </template>
 
       <template #table-column-goodsName="{scope}">
         <span>{{ scope.row.goodsName }}</span>
       </template>
 
+      <template #table-column-unit="{scope}">
+        <span>{{ scope.row.bigUnit }} / {{scope.row.smallUnit}}</span>
+      </template>
+
+
       <template #table-column-inTurn="{scope}">
         <span v-if="!sort.status">{{ scope.row.inTurn }}</span>
-        <el-input
-          ref="sort-input"
-          focus
-          size="mini"
-          v-else
-          v-model="scope.row.inTurn"
-          @blur="changeSort(scope.row)"
-        ></el-input>
+        <el-input style="width:50%;" ref="sort-input" focus size="mini" v-else v-model="scope.row.inTurn" @blur="changeSort(scope.row)" ></el-input>
       </template>
 
-      <!-- 排序 -->
       <template #table-header-inTurn>
         <div class="set-sort">
           <span>排序</span>
-          <el-button
-            v-if="!sort.status"
-            icon="el-icon-edit-outline"
-            size="small"
-            type="text"
-            @click="showSort"
-            class="show"
-          ></el-button>
+          <el-button v-if="!sort.status" icon="el-icon-edit-outline" size="small" type="text" @click="showSort" class="show"></el-button>
+          <el-button class="hide" v-else size="mini" @click="hideSort" type="primary">完成</el-button>
+        </div>
+      </template>
 
-          <el-button
-            class="hide"
-            v-else
-            size="mini"
-            @click="hideSort"
-            type="primary"
-          >完成</el-button>
+
+      <template #table-column-addPrice="{scope}">
+        <span v-if="!canAddPrice">{{ scope.row.addPrice }}</span>
+        <el-input style="width:50%;" ref="add-price-input" focus size="mini" v-else v-model="scope.row.inTurn"></el-input>
+      </template>
+
+      <template #table-header-addPrice>
+        <div class="set-sort">
+          <span>每扎加价</span>
+          <el-button v-if="!canAddPrice" icon="el-icon-edit-outline" size="small" type="text" @click="showAddPrice" class="show"></el-button>
+          <el-button class="hide" v-else size="mini" @click="hideAddPrice" type="primary">完成</el-button>
         </div>
       </template>
-      <template
-        #slot-add-goods-btn
-        v-if="showAddBtn"
-      >
-        <el-button
-          type="primary"
-          size="mini"
-          @click="add()"
-        >添加</el-button>
+
+
+      <template #slot-add-goods-btn>
+        <el-button type="primary" size="mini" @click="addFn()">添加</el-button>
       </template>
+
     </x-crud>
-    <item-list-layer
-      :show.sync="showItemModal"
-      @confirm="selGoodsConfirmFn"
-      @cancel="showItemModal = false"
-    ></item-list-layer>
+    <item-list-layer :show.sync="showItemModal" :classId.sync="classId" :className.sync="className" @confirm="selectItemFn" @cancel="showItemModal = false">
+    </item-list-layer>
 
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
 import itemListLayer from '@/components/module/item-list-layer';
-
 export default {
   name: 'item_list',
   components: {
@@ -112,20 +86,25 @@ export default {
       sort: {
         status: false
       },
+      canAddPrice:false,
       classId: 0,
-      showAddBtn: false,
+      className:'',
       showItemModal: false,
     };
   },
   computed: {
   },
   methods: {
-    selGoodsConfirmFn (item) {
+    selectItemFn (currentItem) {
+
+      let item = currentItem.list
+      let classId = currentItem.classId
+
       let param = []
       item.forEach(value => {
         let newObj = {}
         newObj.itemId = value.id
-        newObj.classId = this.classId
+        newObj.classId = classId
         newObj.cost = value.cost
         newObj.addPrice = value.addPrice
         newObj.stockWarning = value.stockWarning
@@ -139,27 +118,25 @@ export default {
         this.$router.go(0)
       }).catch(err => { console.log(err) })
     },
-    add () {
+    addFn () {
       this.showItemModal = true
     },
     tabClick (tab, e) {
       this.app.refresh({ classId: this.classId });
     },
     onLoad ({ ctx, app }) {
-      this.app = app;
+
       if (this.$route.query.classId) {
-        this.classId = this.$route.query.classId
-        if (this.$route.query.name != '') {
-          this.tabsData[0].text = this.$route.query.name
-          this.$forceUpdate()
-          this.showAddBtn = true
-        }
-      } else {
-        this.showAddBtn = false
+        this.classId = Number(this.$route.query.classId)
+        this.className = this.$route.query.className
+        this.tabsData[0].text = this.className
       }
+
+      this.app = app
+
       let getItem = () => {
         return this.$service.item.list({ classId: this.classId })
-      };
+      }
       ctx.service({
         page: getItem
       })
@@ -177,28 +154,52 @@ export default {
               'min-width': 180
             },
             {
-              prop: 'stockWarning',
-              label: '库存预警',
+              prop: 'classId',
+              label: '分类',
               align: 'center',
               'min-width': 100
             },
+            {
+              prop: 'stockWarning',
+              label: '库存预警值',
+              align: 'center',
+              'min-width': 90
+            },
             {
               prop: 'cost',
               label: '每扎成本价',
               align: 'center',
-              'min-width': 100
+              'min-width': 90
             },
             {
               prop: 'addPrice',
               label: '每扎加价',
               align: 'center',
+              'min-width': 120
+            },
+            {
+              prop: 'weight',
+              label: '重量',
+              align: 'center',
+              'min-width': 90
+            },
+            {
+              prop: 'unit',
+              label: '单位',
+              align: 'center',
               'min-width': 100
             },
+            {
+              prop: 'ratio',
+              label: '大小单位比',
+              align: 'center',
+              'min-width': 80
+            },
             {
               prop: 'inTurn',
               label: '排序',
               align: 'center',
-              minWidth: 100
+              minWidth: 120
             },
             {
               prop: 'addTime',
@@ -210,7 +211,7 @@ export default {
           op: {
             visible: true,
             props: {
-              width: 300,
+              width: 200,
               align: 'center',
               fixed: 'right',
               label: '操作'
@@ -241,7 +242,12 @@ export default {
     refresh (params) {
       this.app.refresh(params);
     },
-
+    showAddPrice(){
+       this.canAddPrice = true
+    },
+    hideAddPrice(){
+      this.canAddPrice = false
+    },
     showSort (e) {
       this.sort.status = true;
     },

hd/src/components/module/item-list-layer.vue

@@ -113,7 +113,7 @@ export default {
         this.$message.warning('请选择花材')
         return false
       }
-      if(this.classId == 0){
+      if(this.sonClassId == 0){
         this.$message.warning('请选择分类')
         return false
       }

hd/src/views/item/list.vue

@@ -125,10 +125,10 @@ export default {
   computed: {
   },
   methods: {
-    selGoodsConfirmFn (itemVal) {
+    selGoodsConfirmFn (currentItem) {
 
-      let item = itemVal.list
-      let classId = itemVal.classId
+      let item = currentItem.list
+      let classId = currentItem.classId
 
       let param = []
       item.forEach(value => {