From da31d2bab73ac7e07b60d36a832549c4fefe92d2 Mon Sep 17 00:00:00 2001
From: wxy <you@example.com>
Date: Sun, 21 Apr 2024 20:03:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B8=AC=E8=A9=A6=E9=A0=85=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/product/info.js          |  44 ++++
 src/views/product/info/index.vue | 335 +++++++++++++++++++++++++++++++
 2 files changed, 379 insertions(+)
 create mode 100644 src/api/product/info.js
 create mode 100644 src/views/product/info/index.vue

diff --git a/src/api/product/info.js b/src/api/product/info.js
new file mode 100644
index 0000000..68fe56c
--- /dev/null
+++ b/src/api/product/info.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询商品列表
+export function listInfo(query) {
+  return request({
+    url: '/product/info/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品详细
+export function getInfo(id) {
+  return request({
+    url: '/product/info/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品
+export function addInfo(data) {
+  return request({
+    url: '/product/info',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品
+export function updateInfo(data) {
+  return request({
+    url: '/product/info' + data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品
+export function delInfo(id) {
+  return request({
+    url: '/product/info/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
new file mode 100644
index 0000000..dbb2a38
--- /dev/null
+++ b/src/views/product/info/index.vue
@@ -0,0 +1,335 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryProductReq" ref="queryProductReq" size="small" :inline="true">
+      <el-form-item label="输入搜索：">
+        <el-input
+          v-model="queryProductReq.productName"
+          placeholder="商品名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="商品货号：">
+        <el-input
+          v-model="queryProductReq.productNumber"
+          placeholder="商品货号"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="商品分类：">
+        <el-cascader :options="options" v-model="queryProductReq.typeId"
+                     :show-all-levels="false"
+                     :props="{muliple:true,emitPath:false,value:'value',label:'label'}"
+                     filterable clearable></el-cascader>
+      </el-form-item>
+      <el-form-item label="商品品牌：">
+        <el-select v-model="queryProductReq.brandId" placeholder="请选择品牌" clearable>
+          <el-option v-for="item in brand" :label="item.brandName" :value="item.id" :key="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="上架状态：" prop="status">
+        <el-select
+          v-model="queryProductReq.productStatus"
+          placeholder="全部"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            label="上架"
+            value="1"
+          />
+          <el-option
+            label="下架"
+            value="2"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="审核状态：" prop="status">
+        <el-select
+          v-model="queryProductReq.productExamine"
+          placeholder="全部"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            label="审核通过"
+            value="1"
+          />
+          <el-option
+            label="未审核"
+            value="2"
+          />
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询结果</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8" style="float: right">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['product:info:add']"
+        >新增</el-button>
+      </el-col>
+    </el-row>
+
+
+    <el-table :data="arr" style="width: 100%"  @selection-change="handleSelectionChange">
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        label="序号"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.$index +1}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="商品图片"
+        width="180">
+        <template slot-scope="scope">
+          <img :src="scope.row.imagesUrl"  width="100px" height="100px" alt="图片损坏"/>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="商品名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">名稱:{{ scope.row.productName }}</span><br>
+          <span style="margin-left: 10px">品牌：{{ scope.row.brandName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="价格/货号"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">价格：￥{{ scope.row.salePrice }}</span><br>
+          <span style="margin-left: 10px">货号：{{ scope.row.productNumber }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="标签"
+        width="180">
+        <template slot-scope="scope">
+          上架：<el-switch
+          v-model="scope.row.productStatus"
+          :active-value="1"
+          :inactive-value="0"
+        ></el-switch><br>
+          新品：<el-switch
+          v-model="scope.row.productNew"
+          :active-value="1"
+          :inactive-value="0"
+        ></el-switch><br>
+          推荐：<el-switch
+          v-model="scope.row.productRecommended"
+          :active-value="1"
+          :inactive-value="0"
+        ></el-switch>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="排序"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.productSort }}</span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column
+        label="sku库存"
+        width="180">
+        <template slot-scope="scope">
+          <el-button type="primary" icon="el-icon-edit" circle></el-button>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="销量"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px">{{ scope.row.date }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="审核状态"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.productExamine==0?'待审核':scope.row.productExamine==1?'通过':'驳回'}}</span><br>
+          <el-link type="primary">审核详情</el-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleDetails(scope.row.id)">查看</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!--    详情对话框-->
+    <el-dialog title="详情查看" :visible.sync="dialogFormVisible">
+      <div style="display: flex;">
+        <div style="flex: 1;">
+          <img :src="productVo.imagesUrl" width="200px" height="200px" alt="图片损坏" style="margin-right: 20px;">
+        </div>
+        <div style="flex: 2;">
+          <el-form :model="productVo">
+            <el-form-item :label-width="formLabelWidth" label="活动名称">
+              <el-input v-model="productVo.productName" autocomplete="off" readonly></el-input>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="品牌名称">
+              <el-input v-model="productVo.brandName" autocomplete="off" readonly></el-input>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="产品信息">
+              <el-input v-model="productVo.productInformation" autocomplete="off" readonly></el-input>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="详情标题">
+              <el-input v-model="productVo.detailsTitle" autocomplete="off" readonly></el-input>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="详情信息">
+              <el-input v-model="productVo.detailsInformation" autocomplete="off" readonly></el-input>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="销售价格">
+              <el-input v-model="productVo.salePrice" autocomplete="off" readonly></el-input>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="促销价格">
+              <el-input v-model="productVo.promotionPrice" autocomplete="off" readonly></el-input>
+            </el-form-item>
+            <el-form-item :label-width="formLabelWidth" label="服务名称">
+              <el-input v-model="productVo.serviceName" autocomplete="off" readonly></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {listInfo, getInfo, addInfo, delInfo,updateInfo} from "@/api/product/info";
+
+export default {
+  name: "info",
+  data() {
+    return {
+      dialogTableVisible: false,
+      dialogFormVisible: false,
+      formLabelWidth: '120px',
+      brandName: null,
+      options: [{
+        value: '',
+        label: '',
+        children: [{
+          value: '',
+          label: '',
+        }]
+      }],
+      brand:[],
+      queryProductReq:{
+        pageNum:1,
+        pageSize:10
+      },
+      arr:[],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      productVo:{}
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /**查看详情**/
+    handleDetails(id){
+      getInfo(id).then(
+        response=>{
+          this.productVo = response.data
+          this.dialogFormVisible = true;
+        }
+      )
+    },
+    /**删除**/
+    handleDelete(id){
+      this.$confirm('确认删除此消息吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 用户点击了确定按钮，执行删除操作
+        delInfo(id).then(response => {
+          this.$message.success(response.msg || '删除成功');
+          this.getList();
+        }).catch(error => {
+          this.$message.error(error.message || '删除失败');
+        });
+      }).catch(() => {
+        // 用户点击了取消按钮，不执行任何操作
+      });
+    },
+    /**添加**/
+    handleAdd(){
+
+    },
+    /** 查询商品列表 */
+    getList() {
+      listInfo(this.queryProductReq).then(
+        response => {
+          console.log(response)
+          this.arr = response.data.list
+        }
+      )
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.roleId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+  }
+};
+</script>