ipms-sjy/yudao-ui-admin/src/views/mall/product/spu/index.vue

<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="卖点" prop="sellPoint">
        <el-input v-model="queryParams.sellPoint" placeholder="请输入卖点" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="分类id" prop="categoryId">
        <el-input v-model="queryParams.categoryId" placeholder="请输入分类id" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="价格(分)" prop="price">
        <el-input v-model="queryParams.price" placeholder="请输入价格 单位使用：分" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="库存数量" prop="quantity">
        <el-input v-model="queryParams.quantity" placeholder="请输入库存数量" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择上下架状态" clearable size="small">
          <el-option label="请选择字典生成" value=""/>
          <el-option label="上架" value="0"/>
          <el-option label="下架" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['product:spu:create']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                   :loading="exportLoading"
                   v-hasPermi="['product:spu:export']">导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="主键" align="center" prop="id"/>
      <el-table-column label="商品名称" align="center" prop="name"/>
      <el-table-column label="卖点" align="center" prop="sellPoint"/>
      <el-table-column label="描述" align="center" prop="description"/>
      <el-table-column label="分类id" align="center" prop="categoryId"/>
      <el-table-column label="商品主图地址" align="center" prop="picUrls"/>
      <el-table-column label="排序字段" align="center" prop="sort"/>
      <el-table-column label="点赞初始人数" align="center" prop="likeCount"/>
      <el-table-column label="价格 (分)" align="center" prop="price"/>
      <el-table-column label="库存数量" align="center" prop="quantity"/>
      <el-table-column label="状态" align="center" prop="status"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['product:spu:update']">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['product:spu:delete']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入商品名称"/>
        </el-form-item>
        <el-form-item label="卖点" prop="sellPoint">
          <el-input v-model="form.sellPoint" placeholder="请输入卖点"/>
        </el-form-item>
        <el-form-item label="描述">
          <editor v-model="form.description" :min-height="192"/>
        </el-form-item>
        <el-form-item label="分类id" prop="categoryIds">
          <el-cascader
            v-model="form.categoryIds"
            placeholder="请输入分类id"
            style="width: 100%"
            :options="categoryList"
            :props="propName"
            clearable></el-cascader>
        </el-form-item>
        <el-form-item label="商品主图地址" prop="picUrls">
          <ImageUpload v-model="form.picUrls" :limit="10"/>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-button size="mini" @click="shopTagInput()">添加规格</el-button>
          <div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
            <span>{{tag.tagName}}</span>
            <el-button class="button-new-tag" type="text"  icon="el-icon-delete" @click="removeTag(tagIndex)">删除</el-button>
            <br/>
            <el-tag
              v-for="(tagItem, tagItemIndex) in tag.tagItems"
              :key="tagItem.valueId"
              closable
              :disable-transitions="false"
              @close="handleTagClose(tagIndex, tagItemIndex)">
              {{tagItem.propValue}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"
              v-model="tagItemInputs[tagIndex].value"
              :ref="`saveTagInput${tagIndex}`"
              size="small"
              @keyup.enter.native="handleInputConfirm(tagIndex)"
              @blur="handleInputConfirm(tagIndex)">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="规格名" v-show="isShowTagInput">
          <el-col :span="8">
            <el-select v-model="addTagInput.name" filterable allow-create default-first-option placeholder="请选择" @change="handleTagClick">
              <el-option
                v-for="item in unUseTags"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="规格值" v-show="isShowTagInput">
          <el-col :span="8">
            <el-select v-model="addTagInput.selectValues" multiple filterable allow-create default-first-option placeholder="请选择">
              <el-option
                v-for="item in dbTagValues"
                :key="item.valueId"
                :label="item.propValue"
                :value="item.propValue">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="addTag()" v-show="isShowTagInput">确定</el-button>
          <el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput">取消</el-button>
        </el-form-item>

        <el-form-item label="排序字段" prop="sort">
          <el-input v-model="form.sort" placeholder="请输入排序字段"/>
        </el-form-item>
        <el-form-item label="点赞初始人数" prop="likeCount">
          <el-input v-model="form.likeCount" placeholder="请输入点赞初始人数"/>
        </el-form-item>
        <el-form-item label="价格 单位使用：分" prop="price">
          <el-input v-model="form.price" placeholder="请输入价格 单位使用：分"/>
        </el-form-item>
        <el-form-item label="库存数量" prop="quantity">
          <el-input v-model="form.quantity" placeholder="请输入库存数量"/>
        </el-form-item>
        <el-form-item label="上下架状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">上架</el-radio>
            <el-radio label="1">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel} from "@/api/mall/product/spu";
    import {
        createCategory,
        deleteCategory,
        exportCategoryExcel,
        getCategory,
        listCategory,
        updateCategory
    } from "@/api/mall/product/category";
    import { createProperty, updateProperty, deleteProperty, getProperty, getPropertyPage, exportPropertyExcel } from "@/api/mall/product/property";

    import Editor from '@/components/Editor';
    import ImageUpload from '@/components/ImageUpload';
    export default {
        name: "Spu",
        components: {
            Editor,ImageUpload
        },
        data() {
            return {
                dbTagValues:[],
                unUseTags:[],
                propertyPageList:[],
                isShowTagInput: false,
                addTagInput: {
                    name: '',
                    selectValues: []
                },
                skuTags:[],
                propName: {
                    checkStrictly: true,
                    label:'name',
                    value:'id'
                },
                categoryList: [],
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 商品spu列表
                list: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                dateRangeCreateTime: [],
                // 查询参数
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    name: null,
                    sellPoint: null,
                    description: null,
                    categoryId: null,
                    picUrls: null,
                    sort: null,
                    likeCount: null,
                    price: null,
                    quantity: null,
                    status: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    sellPoint: [{required: true, message: "卖点不能为空", trigger: "blur"}],
                    description: [{required: true, message: "描述不能为空", trigger: "blur"}],
                    categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"}],
                    picUrls: [{required: true, message: "商品主图地址", trigger: "blur"}],
                    sort: [{required: true, message: "排序字段不能为空", trigger: "blur"}],
                }
            };
        },
        created() {
            this.getList();
            this.getListCategory();
            this.getPropertyPageList();
        },
        methods: {
            addTag(){

            },
            hideTagInput(){

            },
            shopTagInput(){

            },
            removeTag(row){

            },
            handleTagClick(row){

            },
            /** 查询规格 */
            getPropertyPageList() {
                // 执行查询
                getPropertyPage().then(response => {
                    this.propertyPageList = response.data.list;
                    this.unUseTags= this.propertyPageList.map(function (item,index) {
                        return item
                    })
                    console.log(this.propertyPageList)
                });
            },
            /** 查询分类 */
            getListCategory() {
                // 执行查询
                listCategory().then(response => {
                    this.categoryList = this.handleTree(response.data, "id", "parentId");

                });
            },
            /** 查询列表 */
            getList() {
                this.loading = true;
                // 处理查询参数
                let params = {...this.queryParams};
                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
                // 执行查询
                getSpuPage(params).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                });
            },
            /** 取消按钮 */
            cancel() {
                this.open = false;
                this.reset();
            },
            /** 表单重置 */
            reset() {
                this.form = {
                    id: undefined,
                    name: undefined,
                    sellPoint: undefined,
                    description: undefined,
                    categoryId: undefined,
                    categoryIds: [],
                    picUrls: undefined,
                    sort: undefined,
                    likeCount: undefined,
                    price: undefined,
                    quantity: undefined,
                    status: undefined,
                    isShowTagInput:undefined,

                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNo = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRangeCreateTime = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加商品spu";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id;
                getSpu(id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改商品spu";
                });
            },
            /** 提交按钮 */
            submitForm() {
                console.log(this.form.picUrls.split(','));

                this.$refs["form"].validate(valid => {
                    if (!valid) {
                        return;
                    }
                    this.form.categoryId= this.form.categoryIds[(this.form.categoryIds.length-1)]
                    // 修改的提交
                    if (this.form.id != null) {
                        updateSpu(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                        return;
                    }
                    // 添加的提交
                    createSpu(this.form).then(response => {
                        this.$modal.msgSuccess("新增成功");
                        this.open = false;
                        this.getList();
                    });
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const id = row.id;
                this.$modal.confirm('是否确认删除商品spu编号为"' + id + '"的数据项?').then(function () {
                    return deleteSpu(id);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                // 处理查询参数
                let params = {...this.queryParams};
                params.pageNo = undefined;
                params.pageSize = undefined;
                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
                // 执行导出
                this.$modal.confirm('是否确认导出所有商品spu数据项?').then(() => {
                    this.exportLoading = true;
                    return exportSpuExcel(params);
                }).then(response => {
                    this.$download.excel(response, '商品spu.xls');
                    this.exportLoading = false;
                }).catch(() => {
                });
            }
        }
    };
</script>