自营商城

src/views/platform/self-operated-mall/form.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="app-container">
+        <el-row>
+            <el-form :inline="true">
+                <el-form-item>
+                    <el-input v-model="queryParams.productName" placeholder="请输入商品名称" />
+                </el-form-item>
+                <el-form-item>
+                    <el-input v-model="queryParams.productCode" placeholder="请输入商品编码" />
+                </el-form-item>
+                <el-form-item>
+                    <el-cascader placeholder="请选择商品分类" v-model="queryParams.productCategory"
+                        :options="categoryOptions"></el-cascader>
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="queryParams.productStatus" placeholder="状态" clearable>
+                        <el-option v-for="dict in dict.type.product_status" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd"
+                        type="daterange" range-separator="-" start-placeholder="开始日期"
+                        end-placeholder="结束日期"></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
+                    <el-button icon="el-icon-refresh" size="mini">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-row>
+        <el-row type="flex" justify="space-between">
+            <el-col :span="12">
+                <el-button type="primary">新增商品</el-button>
+                <el-button>批量上架</el-button>
+                <el-button>批量下架</el-button>
+                <el-button>批量删除</el-button>
+            </el-col>
+            <el-col :span="6">
+                <el-button type="text">下载模板</el-button>
+                <el-button>导入</el-button>
+                <el-button>导出</el-button>
+            </el-col>
+        </el-row>
+        <el-row class="table">
+            <el-table>
+                <el-table-column type="selection" width="50" align="center" />
+                <el-table-column label="序号" align="center">
+
+                </el-table-column>
+                <el-table-column label="商品编码" align="center">
+
+                </el-table-column>
+                <el-table-column label="商品名称" align="center">
+
+                </el-table-column>
+                <el-table-column label="商品图片" align="center">
+
+                </el-table-column>
+                <el-table-column label="商品分类" align="center">
+
+                </el-table-column>
+                <el-table-column label="单位" align="center">
+
+                </el-table-column>
+                <el-table-column label="销售价" align="center">
+
+                </el-table-column>
+                <el-table-column label="吊牌价" align="center">
+
+                </el-table-column>
+                <el-table-column label="销量" align="center">
+
+                </el-table-column>
+                <el-table-column label="库存" align="center">
+
+                </el-table-column>
+                <el-table-column label="状态" align="center">
+
+                </el-table-column>
+                <el-table-column label="创建时间" align="center">
+
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+
+                </el-table-column>
+            </el-table>
+        </el-row>
+    </div>
+</template>
+<script>
+export default {
+    name: "BaseForm",
+    dicts: ['product_status'],
+    data() {
+        return {
+            categoryOptions: [{
+                label: '1',
+                children: [{
+                    label: '1-1'
+                }, {
+                    label: '1-2'
+                }]
+            },
+            {
+                label: '2',
+                children: [{
+                    label: '2-1'
+                }]
+            }],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                productName: undefined,
+                productCode: undefined,
+                productCategory: undefined,
+                productStatus: undefined,
+                dateRange: undefined
+            },
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.table {
+    margin-top: 20px;
+}
+</style>

src/views/platform/self-operated-mall/index.vue

@@ -0,0 +1,37 @@
+<template>
+    <el-tabs v-model="activeName" type="border-card" class="custom-tab">
+        <el-tab-pane label="全部商品（120）" name="all">
+            全部商品
+            <base-form />
+        </el-tab-pane>
+        <el-tab-pane label="上架商品（120）" name="on-shelf">
+            上架商品
+            <base-form />
+        </el-tab-pane>
+        <el-tab-pane label="下架商品（120）" name="off-shelf">
+            下架商品
+            <base-form />
+        </el-tab-pane>
+        <el-tab-pane label="库存预警（120）" name="warn">
+            库存预警
+            <base-form />
+        </el-tab-pane>
+    </el-tabs>
+</template>
+<script>
+import BaseForm from "./form"
+export default {
+    name: "Index",
+    components: { BaseForm },
+    data() {
+        return {
+            activeName: "all"
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+div[role='tablist']>div {
+    background-color: #1684fc;
+}
+</style>