商品分类界面修改

master
feijinping 3 years ago
parent 810939b3e9
commit 9a96c5a5c8

@ -166,3 +166,11 @@ body
.large-tip .large-tip
font-size 16px font-size 16px
.dialog-form-two
display flex
flex-wrap wrap
> .el-form-item
width calc(50% - 16px)
display flex
> .el-form-item__label
white-space nowrap

@ -1,9 +1,10 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" size="medium" class="ry_form"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" size="medium"
class="ry_form">
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.nameLike"
placeholder="名称" placeholder="名称"
clearable clearable
size="small" size="small"
@ -20,7 +21,7 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="显示状态" prop="showStatus"> <el-form-item label="显示状态" prop="showStatus">
<dict-select v-model="queryParams.showStatus" prop-name="sys_normal_disable" /> <dict-select v-model="queryParams.showStatus" prop-name="sys_normal_disable"/>
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="sort"> <el-form-item label="排序" prop="sort">
<el-input <el-input
@ -46,15 +47,20 @@
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['pms:productCategory:add']" v-hasPermi="['pms:productCategory:add']"
>新增</el-button> >新增
</el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-table v-loading="loading" :data="pmsProductCategoryList" @selection-change="handleSelectionChange" row-key="id"> <el-table
<el-table-column width="55" align="center" /> v-loading="loading"
<el-table-column label="编号" align="center" prop="id" /> :data="pmsProductCategoryList"
<el-table-column label="名称" align="center" prop="name" /> :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
<el-table-column label="层级" align="center" prop="level" /> @selection-change="handleSelectionChange"
row-key="id">
<el-table-column label="编号" align="center" prop="id" width="100"/>
<el-table-column label="名称" align="center" prop="name"/>
<el-table-column label="层级" align="center" prop="level"/>
<el-table-column label="显示状态" align="center" prop="showStatus"> <el-table-column label="显示状态" align="center" prop="showStatus">
<template v-slot="{ row }"> <template v-slot="{ row }">
<dict-tag :value="row.showStatus" prop-name="sys_normal_disable"></dict-tag> <dict-tag :value="row.showStatus" prop-name="sys_normal_disable"></dict-tag>
@ -68,38 +74,40 @@
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['pms:productCategory:edit']" v-hasPermi="['pms:productCategory:edit']"
>修改</el-button> >修改
</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['pms:productCategory:remove']" v-hasPermi="['pms:productCategory:remove']"
>删除</el-button> >删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 添加或修改商品分类对话框 --> <!-- 添加或修改商品分类对话框 -->
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body > <el-dialog :title="title" :visible.sync="open" width="50%">
<el-form ref="form" :model="form" :rules="rules" label-width="108px" inline class="dialog-form-two"> <el-form ref="form" :model="form" :rules="rules" label-width="108px" inline class="dialog-form-two">
<el-form-item label="上级分类" prop="parentId"> <el-form-item label="上级分类" prop="parentId">
<prod-category v-model="form.parentId" /> <prod-category v-model="form.parentId"/>
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="名称" /> <el-input v-model="form.name" placeholder="名称"/>
</el-form-item> </el-form-item>
<el-form-item label="层级" prop="level"> <el-form-item label="层级" prop="level">
<el-input v-model="form.level" placeholder="层级0->1级1->2级" /> <el-input v-model="form.level" placeholder="层级0->1级1->2级"/>
</el-form-item> </el-form-item>
<el-form-item label="显示状态"> <el-form-item label="显示状态">
<dict-select v-model="form.showStatus" prop-name="sys_normal_disable" /> <dict-select v-model="form.showStatus" prop-name="sys_normal_disable"/>
</el-form-item> </el-form-item>
<el-form-item label="顺序" prop="sort"> <el-form-item label="顺序" prop="sort">
<el-input v-model="form.sort" placeholder="顺序" /> <el-input v-model="form.sort" placeholder="顺序"/>
</el-form-item> </el-form-item>
<el-form-item label="图标" prop="icon"> <el-form-item label="图标" prop="icon">
<el-input v-model="form.icon" placeholder="请输入图标" /> <el-input v-model="form.icon" placeholder="请输入图标"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -111,7 +119,14 @@
</template> </template>
<script> <script>
import { listPmsProductCategory, getPmsProductCategory, delPmsProductCategory, addPmsProductCategory, updatePmsProductCategory, exportPmsProductCategory } from "@/api/pms/productCategory"; import {
listPmsProductCategory,
getPmsProductCategory,
delPmsProductCategory,
addPmsProductCategory,
updatePmsProductCategory,
exportPmsProductCategory
} from "@/api/pms/productCategory";
import ProdCategory from "@/views/components/ProdCategory"; import ProdCategory from "@/views/components/ProdCategory";
export default { export default {
@ -140,7 +155,7 @@ export default {
// //
queryParams: { queryParams: {
parentId: null, parentId: null,
name: null, nameLike: null,
level: null, level: null,
showStatus: null, showStatus: null,
sort: null, sort: null,
@ -148,8 +163,7 @@ export default {
// //
form: {}, form: {},
// //
rules: { rules: {},
},
}; };
}, },
created() { created() {
@ -170,16 +184,27 @@ export default {
} }
list.push(it); list.push(it);
}) })
const stack = [...map['0']]; const idMap = {};
while (stack.length > 0) { rows.forEach((it, index) => idMap[it.id] = index);
const p = stack.shift(); const rows1= [...rows]
if (!map[p.id]) { const removeIndex = new Set();
continue for (let i = 0; i < rows1.length; i ++) {
if (removeIndex.has(i)) {
continue;
}
let n = rows1[i];
while (idMap[n.parentId] !== undefined) {
removeIndex.add(idMap[n.id]);
n = rows[idMap[n.parentId]];
n.children = map[n.id];
continue;
} }
p.children = map[p.id];
stack.push(...map[p.id])
} }
this.pmsProductCategoryList = map['0']; const idxs = [...removeIndex].sort();
for (let i = idxs.length - 1; i >= 0; i--) {
rows.splice(idxs[i], 1);
}
this.pmsProductCategoryList = rows;
this.loading = false; this.loading = false;
}); });
}, },
@ -217,7 +242,7 @@ export default {
// //
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.id) this.ids = selection.map(item => item.id)
this.single = selection.length!==1 this.single = selection.length !== 1
this.multiple = !selection.length this.multiple = !selection.length
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
@ -262,13 +287,18 @@ export default {
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; if (row.children && row.children.length > 0) {
this.$modal.confirm('是否确认删除商品分类编号为"' + ids + '"的数据项?').then(function() { this.$message.error('请先删除子目录');
return;
}
const ids = row.id;
this.$modal.confirm('是否确认删除商品分类编号为"' + ids + '"的数据项?').then(function () {
return delPmsProductCategory(ids); return delPmsProductCategory(ids);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {}); }).catch(() => {
});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
@ -279,7 +309,8 @@ export default {
}).then(response => { }).then(response => {
this.$download.download(response); this.$download.download(response);
this.exportLoading = false; this.exportLoading = false;
}).catch(() => {}); }).catch(() => {
});
} }
} }
}; };

Loading…
Cancel
Save