Skip to content

S
SuperMan
Commit 2722bf8c authored by 罗超's avatar 罗超
Browse files
Options

新增分类管理功能

parent a3b2658a
Show whitespace changes
Inline Side-by-side
Showing with 399 additions and 3 deletions
src/components/WebSet/WebSiteArea.vue
View file @ 2722bf8c
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<ul> <ul>
<li> <li>
<label>名称</label> <label>名称</label>
<el-input v-model="msg.Name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210"> <el-input v-model="msg.AreaName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
</el-input> </el-input>
</li> </li>
<!-- <li> <!-- <li>
...@@ -245,7 +245,7 @@ import uploadImg from '../../pubComponents/uploadImg' ...@@ -245,7 +245,7 @@ import uploadImg from '../../pubComponents/uploadImg'
Description: '' Description: ''
}, },
msg: { msg: {
Name: '', //名称 AreaName: '', //名称
pageSize: 15, pageSize: 15,
pageIndex: 1, pageIndex: 1,
}, },
......
src/components/WebSet/classification.vue 0 → 100644
View file @ 2722bf8c
<style scoped>
.icon {
height: 30px;
}
</style>>
<template>
<div class="flexOne">
<div class="query-box">
<ul>
<li>
<span><em>名称</em><el-input v-model='msg.CategoryName' class="permiss-input" placeholder="请输入内容"></el-input></span>
</li>
<li>
<span><em>层级</em><el-select v-model="msg.Level" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="第一层级" value="1"></el-option>
<el-option label="第二层级" value="2"></el-option>
<el-option label="第三层级" value="3"></el-option>
</el-select>
</span>
</li>
<li>
<span><em>状态</em><el-select v-model="msg.Enable" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="2"></el-option>
</el-select>
</span>
</li>
<li>
<input type="button" class="hollowFixedBtn" name="" id="" value="查询" @click="resetPageIndex(),getList()" />
<input type="button" @click="outerVisible = true,dialogTitle='新增分类',clearMessage();" class="normalBtn" value="新增" />
</li>
</ul>
</div>
<el-table :data="DataList" style="width:100%" border v-loading='loading'>
<el-table-column fixed label="分类名称">
<template slot-scope="scope">
<div>
{{scope.row.CategoryName}}</div>
</template>
</el-table-column>
<el-table-column fixed label="父级">
<template slot-scope="scope">
<div>
{{scope.row.ParentName}}</div>
</template>
</el-table-column>
<el-table-column fixed label="是否热门">
<template slot-scope="scope">
<div>
{{scope.row.IsHot === 1 ? '是' : '否'}}</div>
<div>{{scope.row.TotalInventory}}</div>
</template>
</el-table-column>
<el-table-column fixed label="排序码">
<template slot-scope="scope">
<div>
{{scope.row.Sort}}</div>
</template>
</el-table-column>
<el-table-column fixed label="图标" min-width="180">
<template slot-scope="scope">
<img class="icon" @click="showImage(scope.row.Icon)" :src="scope.row.Icon"/>
</template>
</el-table-column>
<el-table-column fixed label="状态" min-width="180">
<template slot-scope="scope">
<div>
{{scope.row.Enable === 1 ? '启用' : '禁用'}}</div>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,dialogTitle='编辑分类',updateData(scope.row)">
</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
<el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total='total'>
</el-pagination>
<el-dialog :title="dialogTitle" :visible.sync="outerVisible" center width="1000px">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="CategoryName">
<el-input type="text" v-model="addMsg.CategoryName" maxlength="50" placeholder="名称">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="Sort">
<el-input type="text" v-model="addMsg.Sort" maxlength="50" placeholder="排序">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="层级" prop="Level">
<el-select v-model="addMsg.Level" placeholder="请选择" @change="handleLevelChange">
<el-option label="第一层级" :value="1"></el-option>
<el-option label="第二层级" :value="2"></el-option>
<el-option label="第三层级" :value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="父级分类" prop="ParentId">
<!-- <el-tree show-checkbox ref="tree" node-key="Id" :data="cateGoryTree" :props="{label: 'CategoryName', children: 'SubList'}"
check-strictly highlight-current @check-change="handleClick"></el-tree> -->
<el-select filterable v-model="addMsg.ParentId" placeholder="请选择">
<el-option v-for="item in cateGoryList" :key="item.Id" :label="item.CategoryName"
:value="item.Id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否热门" prop="IsHot">
<el-switch v-model="addMsg.IsHot"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12"><el-form-item label="是否启用" prop="Enable">
<el-switch v-model="addMsg.Enable"></el-switch>
</el-form-item></el-col>
</el-row>
<el-row>
<el-col :span="12"><el-form-item label="图标" prop="Icon">
<!-- <el-input :value="addMsg.Icon" style="dispaly: none;" /> -->
<uploadImg :maxNum="1" ref="Icon"></uploadImg>
</el-form-item>
</el-col>
<el-col :span="12"><el-form-item label="背景图片" prop="BackgroundImage">
<!-- <el-input :value="addMsg.BackgroundImage" style="dispaly: none;"/> -->
<uploadImg :maxNum="1" ref="BackgroundImage"></uploadImg>
</el-form-item></el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
<button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
</div>
</el-dialog>
<viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
<template slot-scope="scope">
<img v-for="src in scope.images" :src="src" :key="src">
</template>
</viewer>
</div>
</template>
<script>
import uploadImg from '../../pubComponents/uploadImg'
export default {
components: {uploadImg},
data() {
return {
imageOptions: {
navbar: false,
title: false
},
images: [],
dialogTitle: '',
loading: false,
DataList: [],
cateGoryTree: [],
cateGoryList: [],
total: 0,
pageSize: '',
currentPage: 1,
outerVisible: false,
msg: { //列表查询请求数据
"pageIndex": 1,
'pageSize': 15,
'ActionName': '',
'ParentId': '',
'ActionStatus': '0',
},
addMsg: {
'Level': '',
'ParentId': '',
'CategoryName': '',
'Icon': '',
'IsHot':false,
'Sort':'',
'BackgroundImage': '',
'Enable': false,
},
rules:{
CategoryName:[
{ required: true, message: '请输入分类名称', trigger: 'blur' }
],
Level:[
{ required: true, message: '请选择层级', trigger: 'change' }
],
// ParentId:[
// { required: true, message: '请选择父级ID', trigger: 'change' }
// ],
// Icon:[
// { required: true, message: '请上传图标', trigger: 'change' }
// ],
// BackgroundImage:[
// { required: true, message: '请上传背景图片', trigger: 'change' }
// ],
},
}
},
mounted() {
this.getList();
},
methods: {
showImage(src) {
this.$set(this.images, 0, src);
setTimeout(() => {
this.$viewer.show();
}, 1000);
},
inited(viewer) {
this.$viewer = viewer
},
handleClick(data,checked, node){
if(checked){
this.$refs.tree.setCheckedNodes([data]);
this.addMsg.ParentId = data.Id
}
},
getList() { //列表查询
this.loading = true
this.apipost('ws_post_GetCategoryPageList', this.msg, res => {
if(res.data.resultCode == 1) {
this.DataList = res.data.data.pageData;
this.total = res.data.data.count;
}
this.loading = false
}, err => {this.loading = false})
},
handleLevelChange() {
this.addMsg.ParentId = ''
if(this.addMsg.Level <= 1) {
this.cateGoryList = []
} else {
this.getCateGoryList()
}
},
getCateGoryList() {
this.apipost('ws_post_GetCategoryList', {Level: Number(this.addMsg.Level) - 1, CategoryName: '', pageIndex: 1, pageSize: 100}, res => {
if(res.data.resultCode == 1) {
this.cateGoryList = res.data.data;
}
}, err => {})
},
addData() { //新增数据
const icon = this.$refs.Icon.ImageList[0]
const background = this.$refs.BackgroundImage.ImageList[0]
this.addMsg.Icon = icon
this.addMsg.BackgroundImage = background
if(!this.addMsg.ParentId && this.addMsg.Level !== 1) {
this.$message.error('请选择父级分类!');
return
}
if(!icon) {
this.$message.error('请上传图标!');
return
}
if(!background) {
this.$message.error('请上传背景图片!');
return
}
let params = {...this.addMsg}
params.isHot = params.isHot ? 1 : 2
params.Enable = params.Enable ? 1 : 2
this.apipost('ws_post_SetCategory', params, res => {
if(res.data.resultCode == 1){
this.outerVisible=false;
this.$message.success(res.data.message)
this.getList();
}else{
this.$message.error(res.data.message);
}
}, err => {})
},
updateData({Id}) { //修改
this.apipost('ws_post_GetCategory',{Id},res=>{
let params = res.data.data
params.isHot = params.isHot === 1
params.Enable = params.Enable === 1
this.addMsg = params
this.$refs.Icon.ImageList = params.Icon ? [params.Icon] : []
this.$refs.BackgroundImage.ImageList = params.BackgroundImage ? [params.BackgroundImage] : []
if(this.addMsg.Level > 1) {
this.getCateGoryList()
}
},err=>{})
},
//删除
deleteData(item) {
var that = this;
that.Confirm("是否删除?", function () {
that.apipost(
"ws_post_RemoveCategory", {
Id: item.Id
},
res => {
if (res.data.resultCode == 1) {
that.Success(res.data.message);
that.getData();
} else {
that.Error(res.data.message);
}
},
null
);
});
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
clearMessage() {
this.addMsg = {
'Level': '',
'ParentId': '',
'CategoryName': '',
'Icon': '',
'IsHot':false,
'Sort':'',
'BackgroundImage': '',
'Enable': false,
}
this.$refs.Icon.ImageList = []
this.$refs.BackgroundImage.ImageList = []
this.$refs.tree.setCheckedKeys([]);
},
resetPageIndex() {
this.msg.pageIndex = 1
this.currentPage = 1
},
submitForm(addMsg) {//提交创建、修改表单
// const icon = this.$refs.Icon.ImageList[0]
// const background = this.$refs.BackgroundImage.ImageList[0]
// this.addMsg.Icon = icon
// this.addMsg.BackgroundImage = background
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.addData()
} else {
return false;
}
});
},
closeChangeMachie(done){//弹出框关闭初始化弹框内表单
done();
this.resetForm('addMsg');
},
resetForm(formName) {//弹出框取消 初始化谈框内表单
this.$refs[formName].resetFields();
}
}
}
</script>
\ No newline at end of file
src/pubComponents/uploadImg.vue
View file @ 2722bf8c
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="add-img"> <div class="add-img" v-show="showAdd">
<div class="reimg-add"> <div class="reimg-add">
<i class="iconfont icon-img_haha bigAdd"></i> <i class="iconfont icon-img_haha bigAdd"></i>
<div class="ad-one"> <div class="ad-one">
...@@ -772,6 +772,11 @@ ...@@ -772,6 +772,11 @@
<script> <script>
export default { export default {
props: {
maxNum: {
default: 0
}
},
data() { data() {
return { return {
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"', defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
...@@ -781,6 +786,11 @@ export default { ...@@ -781,6 +786,11 @@ export default {
}, },
mounted() { mounted() {
}, },
computed: {
showAdd: function() {
return !this.maxNum || (this.ImageList.length < this.maxNum)
}
},
methods: { methods: {
//上传图片 //上传图片
UploadImage(file) { UploadImage(file) {
......
src/router/config.js
View file @ 2722bf8c
...@@ -5265,6 +5265,14 @@ export default { ...@@ -5265,6 +5265,14 @@ export default {
title: '广告管理' title: '广告管理'
}, },
}, },
{
path: '/Classification',
name: 'Classification',
component: resolve => require(['@/components/WebSet/Classification'], resolve),
meta: {
title: '分类管理'
},
},
{ {
path: '/WebSiteCertificate', //前台网站签证护照管理【自定义前端网站】 path: '/WebSiteCertificate', //前台网站签证护照管理【自定义前端网站】
name: 'WebSiteCertificate', name: 'WebSiteCertificate',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment