|  | @@ -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>
 |