|
@@ -1,12 +1,20 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryForm" class="main-search" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ class="main-search"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="68px"
|
|
|
+ >
|
|
|
<el-form-item label="分类名称" prop="name">
|
|
|
<el-input
|
|
|
v-model="queryParams.name"
|
|
|
placeholder="请输入分类名称"
|
|
|
clearable
|
|
|
- style="width: 240px;"
|
|
|
+ style="width: 240px"
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
@@ -17,8 +25,18 @@
|
|
|
clearable
|
|
|
style="width: 180px"
|
|
|
>
|
|
|
- <el-option :key="0" label="公共分类" v-if="!this.$store.getters.storeId" :value="0"/>
|
|
|
- <el-option v-for="storeInfo in storeOptions" :key="storeInfo.id" :label="storeInfo.name" :value="storeInfo.id"/>
|
|
|
+ <el-option
|
|
|
+ :key="0"
|
|
|
+ label="公共分类"
|
|
|
+ v-if="!this.$store.getters.storeId"
|
|
|
+ :value="0"
|
|
|
+ />
|
|
|
+ <el-option
|
|
|
+ v-for="storeInfo in storeOptions"
|
|
|
+ :key="storeInfo.id"
|
|
|
+ :label="storeInfo.name"
|
|
|
+ :value="storeInfo.id"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="状态" prop="status">
|
|
@@ -28,13 +46,21 @@
|
|
|
clearable
|
|
|
style="width: 240px"
|
|
|
>
|
|
|
- <el-option key="A" label="启用" value="A"/>
|
|
|
- <el-option key="N" label="禁用" value="N"/>
|
|
|
+ <el-option key="A" label="启用" value="A" />
|
|
|
+ <el-option key="N" label="禁用" value="N" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
plain
|
|
@@ -42,12 +68,20 @@
|
|
|
size="mini"
|
|
|
@click="handleAdd"
|
|
|
v-hasPermi="['goods:cate:index']"
|
|
|
- >新增</el-button>
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
|
|
|
- <el-table-column label="分类ID" prop="id" width="66"/>
|
|
|
+ <el-table
|
|
|
+ ref="tables"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="list"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ :default-sort="defaultSort"
|
|
|
+ @sort-change="handleSortChange"
|
|
|
+ >
|
|
|
+ <el-table-column label="分类ID" prop="id" width="66" />
|
|
|
<el-table-column label="所属店铺" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<span v-if="scope.row.storeName">{{ scope.row.storeName }}</span>
|
|
@@ -57,7 +91,7 @@
|
|
|
<el-table-column label="名称" align="center" prop="name" />
|
|
|
<el-table-column label="图片" align="center" width="200">
|
|
|
<template slot-scope="scope">
|
|
|
- <img class="list-img" :src="imagePath + scope.row.logo">
|
|
|
+ <img class="list-img" :src="imagePath + scope.row.logo" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime">
|
|
@@ -80,7 +114,11 @@
|
|
|
></el-switch>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
size="mini"
|
|
@@ -89,7 +127,8 @@
|
|
|
v-hasPermi="['goods:cate:index']"
|
|
|
v-if="storeId == scope.row.storeId || storeId == 0"
|
|
|
@click="handleUpdate(scope.row)"
|
|
|
- >修改</el-button>
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
@@ -97,13 +136,14 @@
|
|
|
v-hasPermi="['goods:cate:index']"
|
|
|
v-if="storeId == scope.row.storeId || storeId == 0"
|
|
|
@click="handleDelete(scope.row)"
|
|
|
- >删除</el-button>
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<pagination
|
|
|
- v-show="total>0"
|
|
|
+ v-show="total > 0"
|
|
|
:total="total"
|
|
|
:page.sync="queryParams.page"
|
|
|
:limit.sync="queryParams.pageSize"
|
|
@@ -111,20 +151,40 @@
|
|
|
/>
|
|
|
|
|
|
<!-- 添加或修改对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open" class="common-dialog" width="700px" append-to-body>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="open"
|
|
|
+ class="common-dialog"
|
|
|
+ width="700px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="分类名称" prop="name">
|
|
|
- <el-input v-model="form.name" placeholder="请输入名称" maxlength="200" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ maxlength="200"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="所属店铺" prop="storeId">
|
|
|
- <el-select class="input" v-model="form.storeId" clearable placeholder="请选择所属店铺">
|
|
|
- <el-option :key="0" label="公共分类" v-if="storeId == 0" :value="0"/>
|
|
|
+ <el-select
|
|
|
+ class="input"
|
|
|
+ v-model="form.storeId"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择所属店铺"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :key="0"
|
|
|
+ label="公共分类"
|
|
|
+ v-if="storeId == 0"
|
|
|
+ :value="0"
|
|
|
+ />
|
|
|
<el-option
|
|
|
v-for="item in storeOptions"
|
|
|
:key="item.id"
|
|
@@ -140,7 +200,7 @@
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="排序" prop="sort">
|
|
|
- <el-input-number v-model="form.sort" :min="0"/>
|
|
|
+ <el-input-number v-model="form.sort" :min="0" />
|
|
|
<div class="form-tips">提示:数值越小,排行越靠前</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
@@ -149,14 +209,15 @@
|
|
|
<el-col :span="9">
|
|
|
<el-form-item label="图片" prop="image">
|
|
|
<el-upload
|
|
|
- :action="uploadAction"
|
|
|
- list-type="picture-card"
|
|
|
- :class="{hide:hideUpload}"
|
|
|
- :file-list="uploadFiles"
|
|
|
- :auto-upload="true"
|
|
|
- :show-file-list="false"
|
|
|
- :headers="uploadHeader"
|
|
|
- :on-success="handleUploadSuccess">
|
|
|
+ :action="uploadAction"
|
|
|
+ list-type="picture-card"
|
|
|
+ :class="{ hide: hideUpload }"
|
|
|
+ :file-list="uploadFiles"
|
|
|
+ :auto-upload="true"
|
|
|
+ :show-file-list="false"
|
|
|
+ :headers="uploadHeader"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ >
|
|
|
<img
|
|
|
v-if="this.form.logo"
|
|
|
:src="imagePath + this.form.logo"
|
|
@@ -171,7 +232,11 @@
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="备注信息">
|
|
|
- <el-input v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="form.description"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -195,8 +260,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getToken } from '@/utils/auth'
|
|
|
-import { getGoodsCateList, getGoodsCateInfo, saveGoodsCate, updateGoodsCateStatus } from "@/api/goodsCate";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+import {
|
|
|
+ getGoodsCateList,
|
|
|
+ getGoodsCateInfo,
|
|
|
+ saveGoodsCate,
|
|
|
+ updateGoodsCateStatus,
|
|
|
+} from "@/api/goodsCate";
|
|
|
export default {
|
|
|
name: "GoodsCateIndex",
|
|
|
data() {
|
|
@@ -223,12 +293,19 @@ export default {
|
|
|
// 是否显示弹出层
|
|
|
open: false,
|
|
|
// 默认排序
|
|
|
- defaultSort: {prop: 'sort', order: 'descending'},
|
|
|
+ defaultSort: { prop: "sort", order: "descending" },
|
|
|
// 表单参数
|
|
|
- form: { storeId: this.$store.getters.storeId, id: '', name: '', logo: '', sort: 0, status: "A" },
|
|
|
+ form: {
|
|
|
+ storeId: this.$store.getters.storeId,
|
|
|
+ id: "",
|
|
|
+ name: "",
|
|
|
+ logo: "",
|
|
|
+ sort: 0,
|
|
|
+ status: "A",
|
|
|
+ },
|
|
|
// 上传地址
|
|
|
- uploadAction: process.env.VUE_APP_SERVER_URL + 'backendApi/file/upload',
|
|
|
- uploadHeader: { 'Access-Token' : getToken() },
|
|
|
+ uploadAction: process.env.VUE_APP_SERVER_URL + "/backendApi/file/upload",
|
|
|
+ uploadHeader: { "Access-Token": getToken() },
|
|
|
// 隐藏上传
|
|
|
hideUpload: false,
|
|
|
// 上传文件列表
|
|
@@ -237,17 +314,22 @@ export default {
|
|
|
queryParams: {
|
|
|
page: 1,
|
|
|
pageSize: 10,
|
|
|
- name: '',
|
|
|
- status: ''
|
|
|
+ name: "",
|
|
|
+ status: "",
|
|
|
},
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
name: [
|
|
|
{ required: true, message: "名称不能为空", trigger: "blur" },
|
|
|
- { min: 2, max: 200, message: '名称长度必须介于2 和 200 之间', trigger: 'blur' }
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 200,
|
|
|
+ message: "名称长度必须介于2 和 200 之间",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
],
|
|
|
- logo: [{ required: true, message: "请上传图片", trigger: "blur" }]
|
|
|
- }
|
|
|
+ logo: [{ required: true, message: "请上传图片", trigger: "blur" }],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -257,14 +339,14 @@ export default {
|
|
|
// 查询分类列表
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
- getGoodsCateList(this.queryParams).then( response => {
|
|
|
- this.list = response.data.paginationResponse.content;
|
|
|
- this.total = response.data.paginationResponse.totalElements;
|
|
|
- this.imagePath = response.data.imagePath;
|
|
|
- this.storeOptions = response.data.storeList;
|
|
|
- this.loading = false;
|
|
|
- }
|
|
|
- );
|
|
|
+ getGoodsCateList(this.queryParams).then((response) => {
|
|
|
+ this.list = response.data.paginationResponse.content;
|
|
|
+ this.total = response.data.paginationResponse.totalElements;
|
|
|
+ //response.data.imagePath;
|
|
|
+ this.imagePath = process.env.VUE_APP_SERVER_URL;
|
|
|
+ this.storeOptions = response.data.storeList;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
},
|
|
|
// 搜索按钮操作
|
|
|
handleQuery() {
|
|
@@ -274,24 +356,28 @@ export default {
|
|
|
// 重置按钮操作
|
|
|
resetQuery() {
|
|
|
this.resetForm("queryForm");
|
|
|
- this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
|
|
|
+ this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
// 状态修改
|
|
|
handleStatusChange(row) {
|
|
|
let text = row.status == "A" ? "启用" : "禁用";
|
|
|
- this.$modal.confirm('确认要' + text + '"' + row.name + '"吗?').then(function() {
|
|
|
- return updateGoodsCateStatus(row.id, row.status);
|
|
|
- }).then(() => {
|
|
|
- this.$modal.msgSuccess(text + "成功");
|
|
|
- }).catch(function() {
|
|
|
- row.status = row.status === "N" ? "A" : "N";
|
|
|
- });
|
|
|
+ this.$modal
|
|
|
+ .confirm("确认要" + text + '"' + row.name + '"吗?')
|
|
|
+ .then(function () {
|
|
|
+ return updateGoodsCateStatus(row.id, row.status);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$modal.msgSuccess(text + "成功");
|
|
|
+ })
|
|
|
+ .catch(function () {
|
|
|
+ row.status = row.status === "N" ? "A" : "N";
|
|
|
+ });
|
|
|
},
|
|
|
// 多选框选中数据
|
|
|
handleSelectionChange(selection) {
|
|
|
- this.ids = selection.map(item => item.id)
|
|
|
- this.multiple = !selection.length
|
|
|
+ this.ids = selection.map((item) => item.id);
|
|
|
+ this.multiple = !selection.length;
|
|
|
},
|
|
|
// 排序触发事件
|
|
|
handleSortChange(column, prop, order) {
|
|
@@ -314,9 +400,9 @@ export default {
|
|
|
status: "A",
|
|
|
logo: "",
|
|
|
sort: 0,
|
|
|
- description: ""
|
|
|
+ description: "",
|
|
|
};
|
|
|
- this.uploadFiles = []
|
|
|
+ this.uploadFiles = [];
|
|
|
this.resetForm("form");
|
|
|
},
|
|
|
// 取消按钮
|
|
@@ -325,24 +411,24 @@ export default {
|
|
|
this.reset();
|
|
|
},
|
|
|
// 提交按钮
|
|
|
- submitForm: function() {
|
|
|
- this.$refs["form"].validate(valid => {
|
|
|
+ submitForm: function () {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
if (valid) {
|
|
|
if (this.form.logo.length < 1) {
|
|
|
- this.form.logo = '/static/defaultImage/none.png';
|
|
|
+ this.form.logo = "/static/defaultImage/none.png";
|
|
|
}
|
|
|
if (this.form.id) {
|
|
|
- saveGoodsCate(this.form).then(response => {
|
|
|
- this.$modal.msgSuccess("修改成功");
|
|
|
- this.open = false;
|
|
|
- this.getList();
|
|
|
- });
|
|
|
+ saveGoodsCate(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
} else {
|
|
|
- saveGoodsCate(this.form).then(response => {
|
|
|
- this.$modal.msgSuccess("新增成功");
|
|
|
- this.open = false;
|
|
|
- this.getList();
|
|
|
- });
|
|
|
+ saveGoodsCate(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
});
|
|
@@ -351,27 +437,33 @@ export default {
|
|
|
handleUpdate(row) {
|
|
|
this.reset();
|
|
|
const id = row.id || this.ids;
|
|
|
- getGoodsCateInfo(id).then(response => {
|
|
|
+ getGoodsCateInfo(id).then((response) => {
|
|
|
this.form = response.data.cateInfo;
|
|
|
- this.uploadFiles = [{ url: response.data.imagePath + this.form.logo, status: 'finished'}]
|
|
|
+ this.uploadFiles = [
|
|
|
+ { url: response.data.imagePath + this.form.logo, status: "finished" },
|
|
|
+ ];
|
|
|
this.open = true;
|
|
|
this.title = "编辑商品分类";
|
|
|
});
|
|
|
},
|
|
|
// 删除按钮操作
|
|
|
handleDelete(row) {
|
|
|
- const name = row.name
|
|
|
- this.$modal.confirm('是否确认删除"' + name + '"的数据项?').then(function() {
|
|
|
- return updateGoodsCateStatus(row.id, 'D');
|
|
|
- }).then(() => {
|
|
|
- this.getList();
|
|
|
- this.$modal.msgSuccess("删除成功");
|
|
|
- }).catch(() => {});
|
|
|
+ const name = row.name;
|
|
|
+ this.$modal
|
|
|
+ .confirm('是否确认删除"' + name + '"的数据项?')
|
|
|
+ .then(function () {
|
|
|
+ return updateGoodsCateStatus(row.id, "D");
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
handleUploadSuccess(file) {
|
|
|
this.form.logo = file.data.fileName;
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
@@ -381,4 +473,3 @@ export default {
|
|
|
line-height: 60px;
|
|
|
}
|
|
|
</style>
|
|
|
-
|