|
@@ -5,13 +5,23 @@
|
|
|
<div class="formSearch">
|
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
<el-form-item label="商品名称">
|
|
|
- <el-input v-model="formInline.search" maxlength="20" placeholder="请输入商品名称" />
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.search"
|
|
|
+ maxlength="20"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品型号">
|
|
|
- <el-input v-model="formInline.productMarque" placeholder="请输入商品型号" />
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.productMarque"
|
|
|
+ placeholder="请输入商品型号"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="上架状态">
|
|
|
- <el-select v-model="formInline.shelveState" placeholder="请选择上架状态">
|
|
|
+ <el-select
|
|
|
+ v-model="formInline.shelveState"
|
|
|
+ placeholder="请选择上架状态"
|
|
|
+ >
|
|
|
<el-option label="全部" :value="null" />
|
|
|
<el-option label="上架" value="1" />
|
|
|
<el-option label="下架" value="0" />
|
|
@@ -19,21 +29,37 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="官方分类">
|
|
|
<el-cascader
|
|
|
- v-model="formInline.classifyId" :options="categoryList" clearable :props="{
|
|
|
+ v-model="formInline.classifyId"
|
|
|
+ :options="categoryList"
|
|
|
+ clearable
|
|
|
+ :props="{
|
|
|
checkStrictly: true,
|
|
|
expandTrigger: 'hover',
|
|
|
label: 'categoryName',
|
|
|
value: 'id',
|
|
|
- children: 'childs'
|
|
|
+ children: 'childs',
|
|
|
}"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="商品分组">
|
|
|
+ <el-cascader
|
|
|
+ v-model="formInline.groupId" :options="groupList" clearable :props="{
|
|
|
+ checkStrictly: false,
|
|
|
+ label: 'groupName',
|
|
|
+ value: 'shopGroupId',
|
|
|
+ children: 'childs',
|
|
|
+ checkStrictly: true,
|
|
|
+ emitPath: false
|
|
|
+ }"></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" plain @click="search">查询</el-button>
|
|
|
<el-button plain @click="clear">重置</el-button>
|
|
|
<el-button type="success" plain @click="add">新增商品</el-button>
|
|
|
<el-button type="success" plain @click="sends">批量导入</el-button>
|
|
|
- <el-button type="success" plain @click="productDataExport">导出商品</el-button>
|
|
|
+ <el-button type="success" plain @click="productDataExport"
|
|
|
+ >导出商品</el-button
|
|
|
+ >
|
|
|
<!-- <span v-for="(item,index) in btnList" :key="index" class="promissStyle">
|
|
|
<el-button type="success" plain @click="btnClick(item)">{{ item.permissionName }}</el-button>
|
|
|
</span> -->
|
|
@@ -43,26 +69,56 @@
|
|
|
<!-- 表格 -->
|
|
|
<div class="tableBox">
|
|
|
<el-table
|
|
|
- ref="multipleTable" :data="tableData" border
|
|
|
- :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
>
|
|
|
- <el-table-column prop="productId" label="商品id" show-overflow-tooltip />
|
|
|
+ <el-table-column
|
|
|
+ prop="productId"
|
|
|
+ label="商品id"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
<el-table-column label="商品主图" width="150" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<!-- 修复图片不能正常显示的问题 -->
|
|
|
- <img height="80" width="80" :src="scope.row.productImage.replace(/http:\/\//, 'https://')" alt srcset>
|
|
|
+ <img
|
|
|
+ height="80"
|
|
|
+ width="80"
|
|
|
+ :src="scope.row.productImage.replace(/http:\/\//, 'https://')"
|
|
|
+ alt
|
|
|
+ srcset
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="productName" label="商品名称" width="220" />
|
|
|
- <el-table-column prop="section" label="售价区间" show-overflow-tooltip />
|
|
|
- <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip />
|
|
|
- <el-table-column prop="ifCredit" label="积分兑换" show-overflow-tooltip>
|
|
|
+ <el-table-column
|
|
|
+ prop="section"
|
|
|
+ label="售价区间"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="memberSection"
|
|
|
+ label="会员价"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="ifCredit"
|
|
|
+ label="积分兑换"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
<template slot-scope="scope">
|
|
|
<span v-if="scope.row.ifCredit == 1">允许</span>
|
|
|
<span v-if="scope.row.ifCredit == 0">不允许</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
|
|
|
+ <el-table-column
|
|
|
+ prop="stockNumber"
|
|
|
+ label="库存"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
<el-table-column prop="volume" label="销量" show-overflow-tooltip />
|
|
|
<el-table-column prop="volume" label="上架状态" show-overflow-tooltip>
|
|
|
<template slot-scope="scope">
|
|
@@ -72,55 +128,111 @@
|
|
|
<span v-if="scope.row.shelveState == 3">审核失败</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip />
|
|
|
- <el-table-column :formatter="row => getBrandName(row)" label="品牌" show-overflow-tooltip />
|
|
|
+ <el-table-column
|
|
|
+ prop="reject"
|
|
|
+ label="驳回原因"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ :formatter="(row) => getBrandName(row)"
|
|
|
+ label="品牌"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
<el-table-column prop="createTime" label="创建时间" width="180" />
|
|
|
<el-table-column label="操作" width="200">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="btnList">
|
|
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button>
|
|
|
- <el-button v-if="scope.row.shelveState == 0" type="text" @click="down(scope.row)">上架</el-button>
|
|
|
- <el-button v-if="scope.row.shelveState == 1" type="text" @click="down(scope.row)">下架</el-button>
|
|
|
- <el-button v-if="scope.row.shelveState == 1" type="text" @click="setVipPrice(scope.row)">设置会员价</el-button>
|
|
|
- <el-button v-if="scope.row.shelveState != 1" type="text" @click="del(scope.row)">删除</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.shelveState == 0"
|
|
|
+ type="text"
|
|
|
+ @click="down(scope.row)"
|
|
|
+ >上架</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.shelveState == 1"
|
|
|
+ type="text"
|
|
|
+ @click="down(scope.row)"
|
|
|
+ >下架</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.shelveState == 1"
|
|
|
+ type="text"
|
|
|
+ @click="setVipPrice(scope.row)"
|
|
|
+ >设置会员价</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.shelveState != 1"
|
|
|
+ type="text"
|
|
|
+ @click="del(scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="fenye">
|
|
|
<el-pagination
|
|
|
- :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
|
|
|
- layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
|
|
+ :current-page="formInline.page"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 批量导入 -->
|
|
|
- <el-dialog title="批量导入商品" :visible.sync="batchAdd" :close-on-click-modal="false" center width="400px">
|
|
|
+ <el-dialog
|
|
|
+ title="批量导入商品"
|
|
|
+ :visible.sync="batchAdd"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ center
|
|
|
+ width="400px"
|
|
|
+ >
|
|
|
<div class="uploadDialog">
|
|
|
<el-upload
|
|
|
- drag :limit="1" :auto-upload="false" accept=".xlsx"
|
|
|
- :headers="headers" :action="UploadUrls"
|
|
|
- :before-upload="beforeUploadFile" :on-change="fileChange" :on-remove="batchRemove" :on-exceed="exceedFile"
|
|
|
- :on-success="handleSuccess" :on-error="handleError" :file-list="batchFileList"
|
|
|
+ drag
|
|
|
+ :limit="1"
|
|
|
+ :auto-upload="false"
|
|
|
+ accept=".xlsx"
|
|
|
+ :headers="headers"
|
|
|
+ :action="UploadUrls"
|
|
|
+ :before-upload="beforeUploadFile"
|
|
|
+ :on-change="fileChange"
|
|
|
+ :on-remove="batchRemove"
|
|
|
+ :on-exceed="exceedFile"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-error="handleError"
|
|
|
+ :file-list="batchFileList"
|
|
|
>
|
|
|
<i class="el-icon-upload" />
|
|
|
<div class="el-upload__text">
|
|
|
<em>点击上传</em>
|
|
|
</div>
|
|
|
- <div slot="tip" class="el-upload__tip">只能上传xlsx文件,且不超过10M</div>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 只能上传xlsx文件,且不超过10M
|
|
|
+ </div>
|
|
|
<div slot="tip" class="el-upload__tip">
|
|
|
上传前不知道excel模板的,请点击
|
|
|
<span class="clickMe" @click="poDownload">点我下载模板</span> 去下载
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
- <br>
|
|
|
- <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
|
|
|
+ <br />
|
|
|
+ <el-button size="small" type="primary" @click="uploadFile"
|
|
|
+ >立即上传</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<!-- 设置会员价弹窗 -->
|
|
|
- <el-dialog title="设置会员价" :visible.sync="vipPriceVisible" width="50%" class="vipDialog">
|
|
|
+ <el-dialog
|
|
|
+ title="设置会员价"
|
|
|
+ :visible.sync="vipPriceVisible"
|
|
|
+ width="50%"
|
|
|
+ class="vipDialog"
|
|
|
+ >
|
|
|
<el-form ref="form" label-width="80px">
|
|
|
<el-form-item label="优惠方式">
|
|
|
<el-radio-group v-model="mode" @change="modeChange">
|
|
@@ -144,14 +256,24 @@
|
|
|
<td>
|
|
|
{{ item.price }}
|
|
|
</td>
|
|
|
- <td v-for="(itemJ, indexJ) in item.memberPrices" :key="indexJ" class="td-input">
|
|
|
- <el-input v-model="itemJ.price" maxlength="9" oninput="value=value.replace(/([^\d|\.])/g, '')" /> {{
|
|
|
- mode == 1 ? '折' : '元' }}
|
|
|
+ <td
|
|
|
+ v-for="(itemJ, indexJ) in item.memberPrices"
|
|
|
+ :key="indexJ"
|
|
|
+ class="td-input"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="itemJ.price"
|
|
|
+ maxlength="9"
|
|
|
+ oninput="value=value.replace(/([^\d|\.])/g, '')"
|
|
|
+ />
|
|
|
+ {{ mode == 1 ? "折" : "元" }}
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
- <el-button type="success" class="clearBtn" @click="clearProductMember">清除所有旧会员价</el-button>
|
|
|
+ <el-button type="success" class="clearBtn" @click="clearProductMember"
|
|
|
+ >清除所有旧会员价</el-button
|
|
|
+ >
|
|
|
</el-form>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="vipPriceVisible = false">取 消</el-button>
|
|
@@ -160,12 +282,20 @@
|
|
|
</el-dialog>
|
|
|
<!-- 新增/修改商品弹窗 -->
|
|
|
<el-dialog
|
|
|
- :title="!commId ? '新增商品' : '编辑商品'" :visible.sync="commidyVisible" width="74%" center
|
|
|
+ :title="!commId ? '新增商品' : '编辑商品'"
|
|
|
+ :visible.sync="commidyVisible"
|
|
|
+ width="74%"
|
|
|
+ center
|
|
|
top="10vh"
|
|
|
- :close-on-click-modal="false" @before-close="closeModal" @close="closeModal"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @before-close="closeModal"
|
|
|
+ @close="closeModal"
|
|
|
>
|
|
|
<CommAdd
|
|
|
- ref="child" :voucher-list="voucherList" :show-tinymce="showTinymce" :product-id="commId"
|
|
|
+ ref="child"
|
|
|
+ :voucher-list="voucherList"
|
|
|
+ :show-tinymce="showTinymce"
|
|
|
+ :product-id="commId"
|
|
|
@cancel="cancelForm"
|
|
|
/>
|
|
|
</el-dialog>
|
|
@@ -173,10 +303,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import CommAdd from '@/views/commodity/commoditySystem/addCommodity.vue'
|
|
|
-import { getBtnList, getToken } from '@/utils/auth'
|
|
|
-import { uploadUrl } from '@/utils/request'
|
|
|
+import CommAdd from "@/views/commodity/commoditySystem/addCommodity.vue";
|
|
|
+import { getBtnList, getToken } from "@/utils/auth";
|
|
|
+import { uploadUrl } from "@/utils/request";
|
|
|
import {
|
|
|
+ getGroupSelect,
|
|
|
getClassifyGetAll,
|
|
|
getClassifyDelete,
|
|
|
getClassifyStart,
|
|
@@ -188,27 +319,28 @@ import {
|
|
|
clearProductMember,
|
|
|
productExport,
|
|
|
getBrandList,
|
|
|
- getVoucher
|
|
|
-} from '@/api/commodity'
|
|
|
+ getVoucher,
|
|
|
+} from "@/api/commodity";
|
|
|
export default {
|
|
|
- name: 'CommoditySystem',
|
|
|
+ name: "CommoditySystem",
|
|
|
components: {
|
|
|
- CommAdd
|
|
|
+ CommAdd,
|
|
|
},
|
|
|
data() {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
showTinymce: false,
|
|
|
- btnList: '',
|
|
|
- activeName: 'first',
|
|
|
+ btnList: "",
|
|
|
+ activeName: "first",
|
|
|
formInline: {
|
|
|
- productMarque: '', // 商品型号
|
|
|
- search: '', // 搜索字段
|
|
|
- shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
|
|
|
- stock: '', // 库存状态 1-有库存 0-无库存 null-全部
|
|
|
- classifyId: '', // 最下级分类id
|
|
|
+ productMarque: "", // 商品型号
|
|
|
+ search: "", // 搜索字段
|
|
|
+ shelveState: "", // 上架状态 1-上架 0-不上架 null-全部
|
|
|
+ stock: "", // 库存状态 1-有库存 0-无库存 null-全部
|
|
|
+ classifyId: "", // 最下级分类id
|
|
|
+ groupId:"", // 商品分组
|
|
|
page: 1, // 当前页
|
|
|
- pageSize: 10
|
|
|
+ pageSize: 10,
|
|
|
},
|
|
|
batchAdd: false,
|
|
|
batchFileList: [],
|
|
@@ -217,7 +349,7 @@ export default {
|
|
|
categoryList: [],
|
|
|
UploadUrl: uploadUrl,
|
|
|
headers: {
|
|
|
- 'Authorization-business': getToken()
|
|
|
+ "Authorization-business": getToken(),
|
|
|
},
|
|
|
vipPriceVisible: false,
|
|
|
productId: 0,
|
|
@@ -227,141 +359,152 @@ export default {
|
|
|
commidyVisible: false,
|
|
|
commId: 0,
|
|
|
brandList: [],
|
|
|
- voucherList: []
|
|
|
- }
|
|
|
+ voucherList: [],
|
|
|
+ groupList: [], // 商品分组
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
getBrandName() {
|
|
|
return (row) => {
|
|
|
- const find = this.brandList.find((item) => item.id === row.brandId)
|
|
|
- if (find) return find.brandName
|
|
|
- return '-'
|
|
|
- }
|
|
|
- }
|
|
|
+ const find = this.brandList.find((item) => item.id === row.brandId);
|
|
|
+ if (find) return find.brandName;
|
|
|
+ return "-";
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
- getVoucher().then((res) => { // 获取可选的代金卷,用于创建和修改商品时定义代金卷的使用规则
|
|
|
- this.voucherList = res.data
|
|
|
+ getVoucher().then((res) => {
|
|
|
+ // 获取可选的代金卷,用于创建和修改商品时定义代金卷的使用规则
|
|
|
+ this.voucherList = res.data;
|
|
|
this.voucherList.push({
|
|
|
- voucherName: '不使用代金卷',
|
|
|
- updateTime: '123123123123',
|
|
|
- ratio: 'xxx',
|
|
|
- enabled: '666',
|
|
|
+ voucherName: "不使用代金卷",
|
|
|
+ updateTime: "123123123123",
|
|
|
+ ratio: "xxx",
|
|
|
+ enabled: "666",
|
|
|
id: 0,
|
|
|
- desc: '不支持代金卷'
|
|
|
- })
|
|
|
- })
|
|
|
+ desc: "不支持代金卷",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 请求商品分组列表
|
|
|
+ this.getGroupList()
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getBrandList()
|
|
|
- this.getAll(this.formInline)
|
|
|
- this.queryAllCategory()
|
|
|
- this.btnList = getBtnList()
|
|
|
+ this.getBrandList();
|
|
|
+ this.getAll(this.formInline);
|
|
|
+ this.queryAllCategory();
|
|
|
+ this.btnList = getBtnList();
|
|
|
},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
+ // 获取商品分组列表
|
|
|
+ async getGroupList(){
|
|
|
+ let {data} = await await getGroupSelect({});
|
|
|
+ this.groupList = data
|
|
|
+ },
|
|
|
async getBrandList() {
|
|
|
- const { data } = await getBrandList()
|
|
|
- this.brandList = data
|
|
|
+ const { data } = await getBrandList();
|
|
|
+ this.brandList = data;
|
|
|
},
|
|
|
cancelForm() {
|
|
|
- this.commidyVisible = false
|
|
|
+ this.commidyVisible = false;
|
|
|
this.formInline = {
|
|
|
- search: '',
|
|
|
- shelveState: '',
|
|
|
- stock: '',
|
|
|
- classifyId: '',
|
|
|
+ search: "",
|
|
|
+ shelveState: "",
|
|
|
+ stock: "",
|
|
|
+ classifyId: "",
|
|
|
page: 1,
|
|
|
- pageSize: 10
|
|
|
- }
|
|
|
- this.getAll(this.formInline)
|
|
|
- this.closeModal()
|
|
|
+ pageSize: 10,
|
|
|
+ };
|
|
|
+ this.getAll(this.formInline);
|
|
|
+ this.closeModal();
|
|
|
},
|
|
|
closeModal() {
|
|
|
- this.showTinymce = false
|
|
|
- this.$refs.child.last()
|
|
|
- this.$refs.child.reset()
|
|
|
+ this.showTinymce = false;
|
|
|
+ this.$refs.child.last();
|
|
|
+ this.$refs.child.reset();
|
|
|
},
|
|
|
btnClick(id) {
|
|
|
- if (id.permissionName === '批量导入') {
|
|
|
- this.sends()
|
|
|
- } else if (id.permissionName === '新增商品') {
|
|
|
- this.add()
|
|
|
+ if (id.permissionName === "批量导入") {
|
|
|
+ this.sends();
|
|
|
+ } else if (id.permissionName === "新增商品") {
|
|
|
+ this.add();
|
|
|
}
|
|
|
},
|
|
|
handleSizeChange(val) {
|
|
|
- this.formInline.pageSize = val
|
|
|
- this.getAll(this.formInline)
|
|
|
+ this.formInline.pageSize = val;
|
|
|
+ this.getAll(this.formInline);
|
|
|
},
|
|
|
handleCurrentChange(val) {
|
|
|
- this.formInline.page = val
|
|
|
- this.getAll(this.formInline)
|
|
|
+ this.formInline.page = val;
|
|
|
+ this.getAll(this.formInline);
|
|
|
},
|
|
|
// 查询
|
|
|
search() {
|
|
|
- this.total = 1
|
|
|
- this.formInline.page = 1
|
|
|
- this.getAll(this.formInline)
|
|
|
+ this.total = 1;
|
|
|
+ this.formInline.page = 1;
|
|
|
+ this.getAll(this.formInline);
|
|
|
},
|
|
|
// 重置
|
|
|
clear() {
|
|
|
this.formInline = {
|
|
|
- search: '', // 搜索字段
|
|
|
- shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
|
|
|
- stock: '', // 库存状态 1-有库存 0-无库存 null-全部
|
|
|
- classifyId: '', // 最下级分类id
|
|
|
+ search: "", // 搜索字段
|
|
|
+ shelveState: "", // 上架状态 1-上架 0-不上架 null-全部
|
|
|
+ stock: "", // 库存状态 1-有库存 0-无库存 null-全部
|
|
|
+ classifyId: "", // 最下级分类id
|
|
|
page: 1, // 当前页
|
|
|
- pageSize: 10
|
|
|
- }
|
|
|
+ pageSize: 10,
|
|
|
+ };
|
|
|
},
|
|
|
// 新增商品
|
|
|
add() {
|
|
|
- this.showTinymce = true
|
|
|
+ this.showTinymce = true;
|
|
|
if (this.commId) {
|
|
|
- this.$refs.child.reset()
|
|
|
+ this.$refs.child.reset();
|
|
|
}
|
|
|
- this.commidyVisible = true
|
|
|
- this.commId = 0
|
|
|
+ this.commidyVisible = true;
|
|
|
+ this.commId = 0;
|
|
|
// this.$router.push({ name: 'addCommodity', params: { id: '1' }})
|
|
|
},
|
|
|
// 导出商品
|
|
|
async productDataExport() {
|
|
|
this.$message({
|
|
|
- message: '数据导出中,请勿重复操作!',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- const res = await productExport(this.formInline)
|
|
|
- if (!res) { return }
|
|
|
- const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
|
|
|
- const fileName = '商品数据明细表.xls'
|
|
|
- if ('download' in document.createElement('a')) {
|
|
|
+ message: "数据导出中,请勿重复操作!",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ const res = await productExport(this.formInline);
|
|
|
+ if (!res) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
|
|
+ const fileName = "商品数据明细表.xls";
|
|
|
+ if ("download" in document.createElement("a")) {
|
|
|
// 非IE下载
|
|
|
- const elink = document.createElement('a')
|
|
|
- elink.download = fileName
|
|
|
- elink.href = URL.createObjectURL(blob)
|
|
|
- elink.style.display = 'none'
|
|
|
- document.body.appendChild(elink)
|
|
|
- elink.click()
|
|
|
- URL.revokeObjectURL(elink.href) // 释放URL 对象
|
|
|
- document.body.removeChild(elink)
|
|
|
+ const elink = document.createElement("a");
|
|
|
+ elink.download = fileName;
|
|
|
+ elink.href = URL.createObjectURL(blob);
|
|
|
+ elink.style.display = "none";
|
|
|
+ document.body.appendChild(elink);
|
|
|
+ elink.click();
|
|
|
+ URL.revokeObjectURL(elink.href); // 释放URL 对象
|
|
|
+ document.body.removeChild(elink);
|
|
|
} else {
|
|
|
// IE10+下载
|
|
|
- navigator.msSaveBlob(blob, fileName)
|
|
|
+ navigator.msSaveBlob(blob, fileName);
|
|
|
}
|
|
|
},
|
|
|
// 批量导入
|
|
|
sends() {
|
|
|
- this.batchAdd = true
|
|
|
- this.batchFileList = []
|
|
|
+ this.batchAdd = true;
|
|
|
+ this.batchFileList = [];
|
|
|
},
|
|
|
// 编辑商品
|
|
|
edit(row) {
|
|
|
- this.showTinymce = true
|
|
|
- this.commidyVisible = true
|
|
|
- this.commId = row.productId
|
|
|
+ this.showTinymce = true;
|
|
|
+ this.commidyVisible = true;
|
|
|
+ this.commId = row.productId;
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.child?.details()
|
|
|
- })
|
|
|
+ this.$refs.child?.details();
|
|
|
+ });
|
|
|
// this.$router.push({
|
|
|
// name: 'addCommodity',
|
|
|
// params: { productId: row.productId }
|
|
@@ -371,134 +514,137 @@ export default {
|
|
|
},
|
|
|
// 设置会员价
|
|
|
setVipPrice(row) {
|
|
|
- var _ = this
|
|
|
- this.productId = row.productId
|
|
|
+ var _ = this;
|
|
|
+ this.productId = row.productId;
|
|
|
getProductMembers({ productId: row.productId }).then((res) => {
|
|
|
- if (res.code === '') {
|
|
|
- _.productData = res.data
|
|
|
+ if (res.code === "") {
|
|
|
+ _.productData = res.data;
|
|
|
if (_.productData && _.productData.length > 0) {
|
|
|
- _.gradeList = []
|
|
|
- const _memberPrices = _.productData[0].memberPrices
|
|
|
+ _.gradeList = [];
|
|
|
+ const _memberPrices = _.productData[0].memberPrices;
|
|
|
_memberPrices.forEach(function (item, i) {
|
|
|
- _.gradeList.push(item.memberLevelName)
|
|
|
- })
|
|
|
- _.mode = _.productData[0].mode ? _.productData[0].mode : 1
|
|
|
- _.vipPriceVisible = true
|
|
|
+ _.gradeList.push(item.memberLevelName);
|
|
|
+ });
|
|
|
+ _.mode = _.productData[0].mode ? _.productData[0].mode : 1;
|
|
|
+ _.vipPriceVisible = true;
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 设置会员价提交
|
|
|
vipPriceSubmit() {
|
|
|
for (let i = 0; i < this.productData.length; i++) {
|
|
|
- this.productData[i].mode = this.mode
|
|
|
+ this.productData[i].mode = this.mode;
|
|
|
for (let j = 0; j < this.productData[i].memberPrices.length; j++) {
|
|
|
- this.productData[i].memberPrices[j].mode = this.mode
|
|
|
- var _price = this.productData[i].memberPrices[j].price
|
|
|
+ this.productData[i].memberPrices[j].mode = this.mode;
|
|
|
+ var _price = this.productData[i].memberPrices[j].price;
|
|
|
if (!_price) {
|
|
|
this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '会员价格不能为空!'
|
|
|
- })
|
|
|
- return false
|
|
|
+ type: "warning",
|
|
|
+ message: "会员价格不能为空!",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
} else if (this.productData[i].mode === 1) {
|
|
|
if (_price <= 0 || _price >= 10) {
|
|
|
this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '会员折数必须大于0小于10!'
|
|
|
- })
|
|
|
- return false
|
|
|
+ type: "warning",
|
|
|
+ message: "会员折数必须大于0小于10!",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
}
|
|
|
} else if (this.productData[i].mode === 2) {
|
|
|
if (_price > this.productData[i].price) {
|
|
|
this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '会员价格不能大于原价!'
|
|
|
- })
|
|
|
- return false
|
|
|
+ type: "warning",
|
|
|
+ message: "会员价格不能大于原价!",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- setProductMember({ productId: this.productId, members: this.productData }).then((res) => {
|
|
|
- if (res.code === '') {
|
|
|
+ setProductMember({
|
|
|
+ productId: this.productId,
|
|
|
+ members: this.productData,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === "") {
|
|
|
this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '设置成功!'
|
|
|
- })
|
|
|
- this.getAll(this.formInline)
|
|
|
- this.vipPriceVisible = false
|
|
|
+ type: "success",
|
|
|
+ message: "设置成功!",
|
|
|
+ });
|
|
|
+ this.getAll(this.formInline);
|
|
|
+ this.vipPriceVisible = false;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 清空会员价
|
|
|
clearProductMember() {
|
|
|
- console.log(this.productData, 'this.productData')
|
|
|
- this.$confirm('该商品所有旧设置的会员价将被清除, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
+ console.log(this.productData, "this.productData");
|
|
|
+ this.$confirm("该商品所有旧设置的会员价将被清除, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
}).then(() => {
|
|
|
clearProductMember({ productId: this.productId }).then((res) => {
|
|
|
- if (res.code === '') {
|
|
|
+ if (res.code === "") {
|
|
|
this.productData.map((item) => {
|
|
|
item.memberPrices.map((itemChild) => {
|
|
|
- itemChild.price = null
|
|
|
- })
|
|
|
- })
|
|
|
- this.$message.success('清除成功')
|
|
|
+ itemChild.price = null;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.$message.success("清除成功");
|
|
|
// this.vipPriceVisible = false
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
// 删除商品
|
|
|
del(row) {
|
|
|
- this.$confirm('选中数据将被永久删除, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
+ this.$confirm("选中数据将被永久删除, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
getClassifyDelete({ productId: row.productId }).then((res) => {
|
|
|
- if (res.code === '') {
|
|
|
+ if (res.code === "") {
|
|
|
this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '删除成功!'
|
|
|
- })
|
|
|
- this.getAll(this.formInline)
|
|
|
+ type: "success",
|
|
|
+ message: "删除成功!",
|
|
|
+ });
|
|
|
+ this.getAll(this.formInline);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
})
|
|
|
- .catch(() => { })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
// 商品上下架
|
|
|
async down(row) {
|
|
|
- console.log(row.shelveState)
|
|
|
+ console.log(row.shelveState);
|
|
|
if (row.shelveState) {
|
|
|
- console.log(111)
|
|
|
+ console.log(111);
|
|
|
const res = await getClassifyStart({
|
|
|
productId: row.productId,
|
|
|
- shelveState: 0
|
|
|
- })
|
|
|
- if (res.code === '') {
|
|
|
+ shelveState: 0,
|
|
|
+ });
|
|
|
+ if (res.code === "") {
|
|
|
this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '下架成功!'
|
|
|
- })
|
|
|
- this.getAll(this.formInline)
|
|
|
+ type: "success",
|
|
|
+ message: "下架成功!",
|
|
|
+ });
|
|
|
+ this.getAll(this.formInline);
|
|
|
}
|
|
|
} else {
|
|
|
const res = await getClassifyStart({
|
|
|
productId: row.productId,
|
|
|
- shelveState: 1
|
|
|
- })
|
|
|
- if (res.code === '') {
|
|
|
+ shelveState: 1,
|
|
|
+ });
|
|
|
+ if (res.code === "") {
|
|
|
this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '上架成功!'
|
|
|
- })
|
|
|
- this.getAll(this.formInline)
|
|
|
+ type: "success",
|
|
|
+ message: "上架成功!",
|
|
|
+ });
|
|
|
+ this.getAll(this.formInline);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -508,197 +654,200 @@ export default {
|
|
|
this.formInline.classifyId[2] ||
|
|
|
this.formInline.classifyId[1] ||
|
|
|
this.formInline.classifyId[0] ||
|
|
|
- this.formInline.classifyId
|
|
|
- const res = await getClassifyGetAll(formInline)
|
|
|
- this.total = res.data.total
|
|
|
- this.tableData = res.data.list
|
|
|
+ this.formInline.classifyId;
|
|
|
+ const res = await getClassifyGetAll(formInline);
|
|
|
+ this.total = res.data.total;
|
|
|
+ this.tableData = res.data.list;
|
|
|
},
|
|
|
// 初始化查询所有分类
|
|
|
async queryAllCategory() {
|
|
|
- const res = await getClassify()
|
|
|
- this.categoryList = res.data
|
|
|
- this.handleRemoveEmptyChild(this.categoryList)
|
|
|
+ const res = await getClassify();
|
|
|
+ this.categoryList = res.data;
|
|
|
+ this.handleRemoveEmptyChild(this.categoryList);
|
|
|
},
|
|
|
handleRemoveEmptyChild(arr) {
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
if (arr[i].childs && Array.isArray(arr[i].childs)) {
|
|
|
- this.handleRemoveEmptyChild(arr[i].childs)
|
|
|
+ this.handleRemoveEmptyChild(arr[i].childs);
|
|
|
}
|
|
|
- if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {
|
|
|
- delete arr[i].childs
|
|
|
+ if (
|
|
|
+ arr[i].childs &&
|
|
|
+ Array.isArray(arr[i].childs) &&
|
|
|
+ arr[i].childs.length === 0
|
|
|
+ ) {
|
|
|
+ delete arr[i].childs;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// *********************导入部分
|
|
|
UploadUrls() {
|
|
|
// 因为action参数是必填项,我们使用二次确认进行文件上传时,直接填上传文件的url会因为没有参数导致api报404,所以这里将action设置为一个返回为空的方法就行,避免抛错
|
|
|
- return ''
|
|
|
+ return "";
|
|
|
},
|
|
|
// 下载模板
|
|
|
poDownload() {
|
|
|
downloadTemplate().then((res) => {
|
|
|
- console.log(res, 1111)
|
|
|
+ console.log(res, 1111);
|
|
|
// const content = res
|
|
|
- const blob = new Blob([ res ])
|
|
|
- const fileName = '批量导入商品模板.xlsx'
|
|
|
- if ('download' in document.createElement('a')) {
|
|
|
+ const blob = new Blob([res]);
|
|
|
+ const fileName = "批量导入商品模板.xlsx";
|
|
|
+ if ("download" in document.createElement("a")) {
|
|
|
// 非IE下载
|
|
|
- const elink = document.createElement('a')
|
|
|
- elink.download = fileName
|
|
|
- elink.style.display = 'none'
|
|
|
- elink.href = URL.createObjectURL(blob)
|
|
|
- document.body.appendChild(elink)
|
|
|
- elink.click()
|
|
|
- URL.revokeObjectURL(elink.href) // 释放URL 对象
|
|
|
- document.body.removeChild(elink)
|
|
|
+ const elink = document.createElement("a");
|
|
|
+ elink.download = fileName;
|
|
|
+ elink.style.display = "none";
|
|
|
+ elink.href = URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(elink);
|
|
|
+ elink.click();
|
|
|
+ URL.revokeObjectURL(elink.href); // 释放URL 对象
|
|
|
+ document.body.removeChild(elink);
|
|
|
} else {
|
|
|
// IE10+下载
|
|
|
- navigator.msSaveBlob(blob, fileName)
|
|
|
+ navigator.msSaveBlob(blob, fileName);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 导入
|
|
|
uploadFile() {
|
|
|
if (this.batchFileList.length === 0) {
|
|
|
- this.$message.warning('请上传文件')
|
|
|
+ this.$message.warning("请上传文件");
|
|
|
} else {
|
|
|
- const formDate = new FormData()
|
|
|
- formDate.append('file', this.batchFileList[0])
|
|
|
- console.log(formDate.get('file'))
|
|
|
+ const formDate = new FormData();
|
|
|
+ formDate.append("file", this.batchFileList[0]);
|
|
|
+ console.log(formDate.get("file"));
|
|
|
importProduct(formDate).then((res) => {
|
|
|
- console.log(res)
|
|
|
- if (res.code === '') {
|
|
|
- this.$message.success('导入成功')
|
|
|
- this.batchAdd = false
|
|
|
- this.batchFileList = []
|
|
|
- this.getAll(this.formInline)
|
|
|
+ console.log(res);
|
|
|
+ if (res.code === "") {
|
|
|
+ this.$message.success("导入成功");
|
|
|
+ this.batchAdd = false;
|
|
|
+ this.batchFileList = [];
|
|
|
+ this.getAll(this.formInline);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
|
|
|
beforeUploadFile(file) {
|
|
|
- console.log('before upload')
|
|
|
- console.log(file)
|
|
|
- const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
|
|
- const size = file.size / 1024 / 1024
|
|
|
- if (extension !== 'xlsx') {
|
|
|
- this.$message.warning('只能上传后缀是.xlsx的文件')
|
|
|
+ console.log("before upload");
|
|
|
+ console.log(file);
|
|
|
+ const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
|
|
|
+ const size = file.size / 1024 / 1024;
|
|
|
+ if (extension !== "xlsx") {
|
|
|
+ this.$message.warning("只能上传后缀是.xlsx的文件");
|
|
|
}
|
|
|
if (size > 10) {
|
|
|
- this.$message.warning('文件大小不得超过10M')
|
|
|
+ this.$message.warning("文件大小不得超过10M");
|
|
|
}
|
|
|
},
|
|
|
// 文件状态改变时的钩子
|
|
|
fileChange(file, batchFileList) {
|
|
|
- console.log(file.raw)
|
|
|
- this.batchFileList.push(file.raw)
|
|
|
- console.log(this.batchFileList)
|
|
|
+ console.log(file.raw);
|
|
|
+ this.batchFileList.push(file.raw);
|
|
|
+ console.log(this.batchFileList);
|
|
|
},
|
|
|
batchRemove(file, batchFileList) {
|
|
|
- this.batchFileList = []
|
|
|
+ this.batchFileList = [];
|
|
|
},
|
|
|
// 文件超出个数限制时的钩子
|
|
|
exceedFile(files, batchFileList) {
|
|
|
- this.$message.warning(`只能选择1个文件`)
|
|
|
+ this.$message.warning(`只能选择1个文件`);
|
|
|
},
|
|
|
// 文件上传成功时的钩子
|
|
|
handleSuccess(res, file, batchFileList) {
|
|
|
- this.$message.success('文件上传成功')
|
|
|
+ this.$message.success("文件上传成功");
|
|
|
},
|
|
|
// 文件上传失败时的钩子
|
|
|
handleError() {
|
|
|
- this.$message.error('文件上传失败')
|
|
|
+ this.$message.error("文件上传失败");
|
|
|
},
|
|
|
// 切换优惠方式清除内容
|
|
|
modeChange() {
|
|
|
this.productData.forEach((item) => {
|
|
|
item.memberPrices.forEach((itemJ) => {
|
|
|
- itemJ.price = ''
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ itemJ.price = "";
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang='scss' scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
@import url("../../../styles/elDialog.scss");
|
|
|
|
|
|
.pending {
|
|
|
- padding: 30px;
|
|
|
+ padding: 30px;
|
|
|
}
|
|
|
|
|
|
.fenye {
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
.clickMe {
|
|
|
- color: #3a68f2;
|
|
|
- cursor: pointer;
|
|
|
+ color: #3a68f2;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.uploadDialog {
|
|
|
-
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- // justify-content: center;
|
|
|
- >>>.el-upload__tip {
|
|
|
- display: inline-block;
|
|
|
- width: 360px;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ >>> .el-upload__tip {
|
|
|
+ display: inline-block;
|
|
|
+ width: 360px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.vipDialog {
|
|
|
- .priceTable {
|
|
|
- table {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- border-left: 1px solid #EBEEF5;
|
|
|
- border-bottom: 1px solid #EBEEF5;
|
|
|
- font-size: 14px;
|
|
|
- color: #606266;
|
|
|
- border-collapse: collapse;
|
|
|
+ .priceTable {
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ border-left: 1px solid #ebeef5;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ border-collapse: collapse;
|
|
|
|
|
|
- tr {
|
|
|
- border-top: 1px solid #EBEEF5;
|
|
|
+ tr {
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
|
|
|
- th {
|
|
|
- padding: 12px 0;
|
|
|
- background: #EEF3FF;
|
|
|
- color: #333;
|
|
|
- border-right: 1px solid #EBEEF5;
|
|
|
- }
|
|
|
+ th {
|
|
|
+ padding: 12px 0;
|
|
|
+ background: #eef3ff;
|
|
|
+ color: #333;
|
|
|
+ border-right: 1px solid #ebeef5;
|
|
|
+ }
|
|
|
|
|
|
- td {
|
|
|
- padding: 12px 0;
|
|
|
- border-right: 1px solid #EBEEF5;
|
|
|
+ td {
|
|
|
+ padding: 12px 0;
|
|
|
+ border-right: 1px solid #ebeef5;
|
|
|
|
|
|
- &.td-input {
|
|
|
- .el-input {
|
|
|
- width: 80px;
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.td-input {
|
|
|
+ .el-input {
|
|
|
+ width: 80px;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(1),
|
|
|
- &:nth-child(2) {
|
|
|
- width: 80px;
|
|
|
- }
|
|
|
+ &:nth-child(1),
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
|
|
|
- .el-input {
|
|
|
- width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-input {
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .clearBtn {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
+ .clearBtn {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|