|
@@ -0,0 +1,771 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="商品分类" prop="cateId">
|
|
|
+ <treeselect v-model="queryParams.cateId" style="width:205.4px" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择分类" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="商品名称" prop="productName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.productName"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="商品编号" prop="barCode">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.barCode"
|
|
|
+ placeholder="请输入商品编号"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="商品类型" prop="productType">
|
|
|
+ <el-select v-model="queryParams.productType" placeholder="请选择商品类型" clearable size="small" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in productTypeOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="cyan" 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">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ v-hasPermi="['oms:product:add']"
|
|
|
+ >新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ size="mini"
|
|
|
+ :disabled="single"
|
|
|
+ @click="handleUpdate"
|
|
|
+ v-hasPermi="['oms:product:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleDelete"
|
|
|
+ v-hasPermi="['oms:product:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['oms:product:export']"
|
|
|
+ >导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="已审核" name="1"></el-tab-pane>
|
|
|
+ <el-tab-pane label="未审核" name="0"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-table height="500" border v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="ID" align="center" prop="productId" />
|
|
|
+ <el-table-column label="商品图片" align="center" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover
|
|
|
+ placement="right"
|
|
|
+ title=""
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <img slot="reference" :src="scope.row.image" width="100">
|
|
|
+ <img :src="scope.row.image" style="max-width: 150px;">
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
|
|
|
+ <el-table-column label="商品分类" align="center" prop="cateName" />
|
|
|
+ <el-table-column label="售价" align="center" prop="price" >
|
|
|
+ <template slot-scope="scope" >
|
|
|
+ <span v-if="scope.row.price!=null">{{scope.row.price.toFixed(2)}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="原价" align="center" prop="otPrice" >
|
|
|
+ <template slot-scope="scope" >
|
|
|
+ <span v-if="scope.row.otPrice!=null">{{scope.row.otPrice.toFixed(2)}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="类型" align="center" prop="productType" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag prop="productType" v-for="(item, index) in productTypeOptions" v-if="scope.row.productType==item.dictValue">{{item.dictLabel}}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="状态" align="center" prop="isAudit" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag prop="status" v-for="(item, index) in isAuditOptions" v-if="scope.row.isAudit==item.dictValue">{{item.dictLabel}}</el-tag>
|
|
|
+ </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="['oms:product:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['oms:product:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 添加或修改商品对话框 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
+ <el-row >
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="商品名称" prop="productName">
|
|
|
+ <el-input v-model="form.productName" placeholder="请输入商品名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="商品分类" prop="cateId">
|
|
|
+ <treeselect v-model="form.cateId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择商品分类" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="商品简介" prop="productInfo">
|
|
|
+ <el-input v-model="form.productInfo" type="textarea" :rows="2" placeholder="请输入商品简介" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="商品图片" prop="image">
|
|
|
+ <Material v-model="imageArr" type="image" :num="1" :width="150" :height="150" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="轮播图" prop="sliderImage">
|
|
|
+ <Material v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="商品规格:" props="specType">
|
|
|
+ <el-radio-group v-model="form.specType" >
|
|
|
+ <el-radio :label="0" class="radio">单规格</el-radio>
|
|
|
+ <el-radio :label="1">多规格</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- 多规格添加-->
|
|
|
+ <el-col :span="24" v-if="form.specType === 1" class="noForm">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item v-if="attrs!=null&&attrs.length!==0">
|
|
|
+ <div v-for="(item, index) in attrs" :key="index">
|
|
|
+ <div class="acea-row row-middle"><span class="mr5">{{item.value}}</span>
|
|
|
+ <i class="el-icon-circle-close" @click="handleRemoveRole(index)"></i>
|
|
|
+ </div>
|
|
|
+ <div class="rulesBox">
|
|
|
+ <el-tag type="dot" closable color="primary" v-for="(j, indexn) in item.detail" :key="indexn" :name="j" class="mr20" @close="handleRemove2(item.detail,indexn)">{{j}}</el-tag>
|
|
|
+ <el-input placeholder="请输入属性名称" v-model="item.detail.attrsVal"
|
|
|
+ style="width: 200px">
|
|
|
+ <el-button slot="append" type="primary" @click="createAttr(item.detail.attrsVal,index)">添加</el-button>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" v-if="createBnt">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="small" icon="md-add" @click="addBtn" class="mr15">添加新规格</el-button>
|
|
|
+ <el-button type="success" size="small" @click="generate">立即生成</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" v-if="showIput">
|
|
|
+ <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24" >
|
|
|
+ <el-form-item label="规格:">
|
|
|
+ <el-input placeholder="请输入规格" v-model="formDynamic.attrsName" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
|
|
|
+ <el-form-item label="规格值:">
|
|
|
+ <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="6" :lg="5" :md="10" :sm="24" :xs="24" >
|
|
|
+ <el-button type="primary" @click="createAttrName">确定</el-button>
|
|
|
+ <el-button type="danger" @click="closeAttrName" >取消</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <!-- 多规格设置-->
|
|
|
+ <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" v-if="manyFormValidate!=null&&manyFormValidate.length">
|
|
|
+ <!-- 多规格表格-->
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="商品属性:" class="labeltop">
|
|
|
+ <el-table :data="manyFormValidate" size="small" style="width: 90%;">
|
|
|
+ <el-table-column type="myindex" v-for="(item,index) in form.header" :key="index" :width="item.minWidth" :label="item.title" :property="item.slot" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.column.property == 'image'" align="center">
|
|
|
+ <single-img v-model="scope.row[scope.column.property]" type="image" :num="1" :width="60" :height="60" />
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.column.property.indexOf('value') != -1" align="center">
|
|
|
+ {{ scope.row[scope.column.property] }}
|
|
|
+ </div>
|
|
|
+ <div v-else-if="scope.column.property == 'action'" align="center" >
|
|
|
+ <a @click="delAttrTable(scope.$index)" align="center">删除</a>
|
|
|
+ </div>
|
|
|
+ <div v-else align="center">
|
|
|
+ <el-input v-model="scope.row[scope.column.property]" align="center" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <!-- 单规格表格-->
|
|
|
+ <el-col :xl="23" :lg="24" :md="24" :sm="24" :xs="24" v-if="form.specType === 0">
|
|
|
+ <el-form-item >
|
|
|
+ <el-table :data="oneFormValidate" size="small" style="width: 90%;">
|
|
|
+ <el-table-column prop="image" label="图片" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <single-img v-model="scope.row.image" type="image" :num="1" :width="60" :height="60" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price" label="商品价格" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="text" v-model="scope.row.price"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="cost" label="成本价" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="text" v-model="scope.row.cost"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="otPrice" label="原价" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="text" v-model="scope.row.otPrice"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="barCode" label="商品编号" width="130px" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="text" v-model="scope.row.barCode"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="weight" label="重量(KG)" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="text" v-model="scope.row.weight"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="volume" label="体积(m³)" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="text" v-model="scope.row.volume"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="单位名" prop="unitName">
|
|
|
+ <el-input v-model="form.unitName" placeholder="请输入单位名" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="排序" prop="sort">
|
|
|
+ <el-input-number :min="0" v-model="form.sort" placeholder="请输入排序" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="审核状态" prop="isAudit">
|
|
|
+ <el-select style="width: 240px" v-model="form.isAudit" placeholder="请选择是否审核" clearable size="small" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in isAuditOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品类型" prop="productType">
|
|
|
+ <el-select style="width: 240px" v-model="form.productType" placeholder="请选择商品类型" clearable size="small" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in productTypeOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </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 {genFormatAttr, listProduct, getProduct, delProduct, addOrEdit, exportProduct } from "@/api/oms/product";
|
|
|
+import { getAllOmsProductCategory } from "@/api/oms/category";
|
|
|
+
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+import Editor from '@/components/Editor/wang';
|
|
|
+import Material from '@/components/Material'
|
|
|
+import singleImg from '@/components/Material/single'
|
|
|
+export default {
|
|
|
+ name: "StoreProduct",
|
|
|
+ components: {
|
|
|
+ Treeselect,
|
|
|
+ Editor,
|
|
|
+ Material,
|
|
|
+ singleImg,
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ imageArr: function(val) {
|
|
|
+ this.form.image = val.join(',')
|
|
|
+ },
|
|
|
+ photoArr: function(val) {
|
|
|
+ this.form.sliderImage = val.join(',')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showIput: false,
|
|
|
+ createBnt:true,
|
|
|
+ // 规格数据
|
|
|
+ formDynamic: {
|
|
|
+ attrsName: '',
|
|
|
+ attrsVal: ''
|
|
|
+ },
|
|
|
+ isBtn: false,
|
|
|
+ attrs:[],
|
|
|
+ // 多规格表格data
|
|
|
+ manyFormValidate: [],
|
|
|
+ // 单规格表格data
|
|
|
+ oneFormValidate: [
|
|
|
+ {
|
|
|
+ image: '',
|
|
|
+ price: 0,
|
|
|
+ cost: 0,
|
|
|
+ otPrice: 0,
|
|
|
+ barCode: '',
|
|
|
+ weight: 0,
|
|
|
+ volume: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ photoArr:[],
|
|
|
+ imageArr:[],
|
|
|
+ activeName:"1",
|
|
|
+ productTypeOptions:[],
|
|
|
+ isAuditOptions:[],
|
|
|
+ categoryOptions:[],
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 商品表格数据
|
|
|
+ productList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ productName: null,
|
|
|
+ productType: null,
|
|
|
+ isAudit: "1",
|
|
|
+ barCode:null,
|
|
|
+
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ image: [
|
|
|
+ { required: true, message: "商品图片不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ sliderImage: [
|
|
|
+ { required: true, message: "轮播图不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ productName: [
|
|
|
+ { required: true, message: "商品名称不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ productInfo: [
|
|
|
+ { required: true, message: "商品简介不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ unitName: [
|
|
|
+ { required: true, message: "单位名不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ cateId: [
|
|
|
+ { required: true, message: "分类id不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ price: [
|
|
|
+ { required: true, message: "商品价格不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ prescribeSpec: [
|
|
|
+ { required: true, message: "规格不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("store_product_type").then((response) => {
|
|
|
+ this.productTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_product_is_audit").then((response) => {
|
|
|
+ this.isAuditOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getTreeselect();
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 删除表格中的属性
|
|
|
+ delAttrTable (index) {
|
|
|
+ this.manyFormValidate.splice(index, 1);
|
|
|
+ },
|
|
|
+ addBtn () {
|
|
|
+ this.clearAttr();
|
|
|
+ this.createBnt = false;
|
|
|
+ this.showIput = true;
|
|
|
+ },
|
|
|
+ //生成SKU
|
|
|
+ generate () {
|
|
|
+ genFormatAttr(this.form.productId, { attrs: this.attrs }).then(res => {
|
|
|
+ if(this.form.specType === 0){
|
|
|
+ this.oneFormValidate = res.value;
|
|
|
+ this.form.header = res.header;
|
|
|
+ let header = res.header;
|
|
|
+ header.pop();
|
|
|
+ this.oneFormValidate.map((item) => {
|
|
|
+ if(this.imageArr.length>0){
|
|
|
+ item.image = this.imageArr[0]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else if(this.form.specType === 1) {
|
|
|
+ this.manyFormValidate = res.value;
|
|
|
+ let headerdel = {
|
|
|
+ title: '操作',
|
|
|
+ slot: 'action',
|
|
|
+ fixed: 'right',
|
|
|
+ width: 220
|
|
|
+ };
|
|
|
+ res.header.push(headerdel);
|
|
|
+ this.form.header = res.header;
|
|
|
+ let header = res.header;
|
|
|
+ header.pop();
|
|
|
+ // this.manyFormValidate.map((item) => {
|
|
|
+ // if(this.imageArr.length>0){
|
|
|
+ // item.image = this.imageArr[0]
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(res => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 取消添加新规格
|
|
|
+ closeAttrName () {
|
|
|
+ this.showIput = false;
|
|
|
+ this.createBnt = true;
|
|
|
+ },
|
|
|
+ clearAttr () {
|
|
|
+ this.formDynamic.attrsName = '';
|
|
|
+ this.formDynamic.attrsVal = '';
|
|
|
+ },
|
|
|
+ // 删除规格
|
|
|
+ handleRemoveRole (index) {
|
|
|
+ this.attrs.splice(index, 1);
|
|
|
+ this.manyFormValidate.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 删除属性
|
|
|
+ handleRemove2 (item, index) {
|
|
|
+ item.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 添加规则名称
|
|
|
+ createAttrName () {
|
|
|
+ if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
|
|
|
+ let data = {
|
|
|
+ value: this.formDynamic.attrsName,
|
|
|
+ detail: [
|
|
|
+ this.formDynamic.attrsVal
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.attrs.push(data);
|
|
|
+ var hash = {};
|
|
|
+ this.attrs = this.attrs.reduce(function (item, next) {
|
|
|
+ hash[next.value] ? '' : hash[next.value] = true && item.push(next);
|
|
|
+ return item
|
|
|
+ }, [])
|
|
|
+ this.clearAttr();
|
|
|
+ this.showIput = false;
|
|
|
+ this.createBnt = true;
|
|
|
+ } else {
|
|
|
+ this.$message.warning('请添加完整的规格!');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加属性
|
|
|
+ createAttr (num, idx) {
|
|
|
+ if (num) {
|
|
|
+ this.attrs[idx].detail.push(num);
|
|
|
+ var hash = {};
|
|
|
+ this.attrs[idx].detail = this.attrs[idx].detail.reduce(function (item, next) {
|
|
|
+ hash[next] ? '' : hash[next] = true && item.push(next);
|
|
|
+ return item
|
|
|
+ }, [])
|
|
|
+ } else {
|
|
|
+ this.$message.warning('请添加属性!');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateText(text){
|
|
|
+ this.form.description=text
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ this.queryParams.isAudit=tab.name;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 转换商品分类数据结构 */
|
|
|
+ normalizer(node) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.cateId,
|
|
|
+ label: node.cateName,
|
|
|
+ children: node.children
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getTreeselect() {
|
|
|
+ getAllOmsProductCategory().then(response => {
|
|
|
+ this.categoryOptions = [];
|
|
|
+ const data = this.handleTree(response.data, "cateId", "pid");
|
|
|
+ this.categoryOptions=data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 查询商品列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listProduct(this.queryParams).then(response => {
|
|
|
+ this.productList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ productId: 0,
|
|
|
+ image: null,
|
|
|
+ sliderImage: null,
|
|
|
+ productName: null,
|
|
|
+ productInfo: null,
|
|
|
+ barCode: null,
|
|
|
+ cateId: null,
|
|
|
+ price: null,
|
|
|
+ otPrice: null,
|
|
|
+ cost: null,
|
|
|
+ specType: 0,
|
|
|
+ unitName: null,
|
|
|
+ sort: null,
|
|
|
+ productType: "1",
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ isDel: null,
|
|
|
+ isAudit: "0"
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ this.oneFormValidate = [
|
|
|
+ {
|
|
|
+ image: '',
|
|
|
+ price: 0,
|
|
|
+ cost: 0,
|
|
|
+ otPrice: 0,
|
|
|
+ barCode: '',
|
|
|
+ weight: 0,
|
|
|
+ volume: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.attrs=[];
|
|
|
+ this.photoArr=[];
|
|
|
+ this.imageArr=[];
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.productId)
|
|
|
+ this.single = selection.length!==1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.reset();
|
|
|
+
|
|
|
+ this.open = true;
|
|
|
+ this.title = "添加商品";
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ var that=this;
|
|
|
+ this.reset();
|
|
|
+ const productId = row.productId || this.ids
|
|
|
+ getProduct(productId).then(response => {
|
|
|
+ this.form = response.data;
|
|
|
+ // this.form.isDel = response.data.isDel.toString();
|
|
|
+ this.form.isAudit = response.data.isAudit.toString();
|
|
|
+ this.form.productType = response.data.productType.toString();
|
|
|
+ //组装attrs数据
|
|
|
+ if(response.attrs!=null){
|
|
|
+ this.attrs=[];
|
|
|
+ response.attrs.forEach(function (item, index) {
|
|
|
+ var data={value:item.attrName,detail:item.attrValues.split(',')}
|
|
|
+ that.attrs.push(data);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.generate();
|
|
|
+ }, 200);
|
|
|
+ if(this.form.specType === 0){
|
|
|
+ that.manyFormValidate = [];
|
|
|
+ }else {
|
|
|
+ that.createBnt = true;
|
|
|
+ that.oneFormValidate = [
|
|
|
+ {
|
|
|
+ image: '',
|
|
|
+ price: 0,
|
|
|
+ cost: 0,
|
|
|
+ otPrice: 0,
|
|
|
+ barCode: '',
|
|
|
+ weight: 0,
|
|
|
+ volume: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if(this.form.image!=null){
|
|
|
+ this.imageArr=this.form.image.split(",");
|
|
|
+ }
|
|
|
+ if(this.form.sliderImage!=null){
|
|
|
+ this.photoArr=this.form.sliderImage.split(",");
|
|
|
+ }
|
|
|
+ console.log(this.oneFormValidate)
|
|
|
+ this.open = true;
|
|
|
+ this.title = "修改商品";
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if(this.form.specType ===0 ){
|
|
|
+ this.form.items = [];
|
|
|
+ this.form.values = this.oneFormValidate;
|
|
|
+ }else{
|
|
|
+ this.form.items = this.attrs;
|
|
|
+ this.form.values = this.manyFormValidate;
|
|
|
+ }
|
|
|
+ if(this.form.specType === 1 && this.manyFormValidate.length===0){
|
|
|
+ return this.$message.warning('请点击生成规格!');
|
|
|
+ }
|
|
|
+ addOrEdit(this.form).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const productIds = row.productId || this.ids;
|
|
|
+ this.$confirm('是否确认删除商品编号为"' + productIds + '"的数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return delProduct(productIds);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ }).catch(function() {});
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ const queryParams = this.queryParams;
|
|
|
+ this.$confirm('是否确认导出所有商品数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return exportProduct(queryParams);
|
|
|
+ }).then(response => {
|
|
|
+ this.download(response.msg);
|
|
|
+ }).catch(function() {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|