商品管理-门店商品-上下架

src/views/components/el-input-plus.vue

@@ -0,0 +1,18 @@
+<template>
+    <el-input v-model="value" @input="handleInput" placeholder='请输入下架原因' type='textarea' autosize></el-input>
+</template>
+<script>
+export default {
+    name: 'ElInputPlus',
+    data() {
+        return {
+            value: ''
+        }
+    },
+    methods: {
+        handleInput(value) {
+            this.$emit('update:value', value)
+        }
+    }
+}
+</script>

src/views/platform/product_management/stock.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="app-container">
+        商品库存
+    </div>
+</template>

src/views/platform/product_management/store_goods.vue

@@ -34,9 +34,10 @@
                 <el-button>重置</el-button>
             </el-form-item>
         </el-form>
-        <el-button>批量上架</el-button>
-        <el-button>批量下架</el-button>
-        <el-table :data="dataList" class="table">
+        <el-button @click="changeProductStatus(item)" v-for="item in dict.type.product_status" :key="item.value">批量{{
+            item.label
+        }}</el-button>
+        <el-table :data="dataList" class="table" @selection-change="handleSelectionChange">
             <el-table-column type="selection" align="center"></el-table-column>
             <el-table-column label="商品编码" align="center">
                 DS000001
@@ -81,12 +82,14 @@
 </template>
 <script>
 import { mapState } from 'vuex'
+import ElInputPlus from '@/views/components/el-input-plus'
 export default {
     name: 'StoreGoods',
     dicts: ['shop_type', 'product_status'],
+    components: { ElInputPlus },
     data() {
         return {
-            dataList: [{}],
+            dataList: [{ shopCode: undefined }],
             //
             total: 1,
             //查询参数
@@ -99,10 +102,48 @@ export default {
                 productCategory: undefined,
                 shopType: undefined,
                 productStatus: undefined
+            },
+            form: {
+                cause: ''
             }
         }
     },
     methods: {
+        handleSelectionChange(selection) {
+            this.shopCodes = selection.map(item => item.shopCodes);
+
+        },
+        //上下架
+        changeProductStatus(status) {
+            if (this.shopCodes.length === 0) {
+                return
+            }
+            let self = this
+            if (status.label === '下架') {
+                const h = this.$createElement;
+
+                let inputPlus = h('el-input-plus', {
+                    on: {
+                        'update:value': function (value) {
+                            self.form.cause = value
+                        }
+                    },
+                    key: 'fuck' + Math.random(),
+                })
+                this.$confirm(inputPlus, `确定下架这${this.shopCodes.length}件商品？`, {
+                    confirmButtonText: '下架'
+                }).then(() => {
+                    console.info(self.form.cause)
+                }).catch(() => {
+                })
+            } else {
+                this.$modal.confirm(`确定上架这${this.shopCodes.length}件商品？`).then(action => {
+                    console.debug('confirm')
+                }).catch(action => {
+                    console.debug('cancel')
+                })
+            }
+        },
         querySearch() {
 
         },