初始化项目
This commit is contained in:
18500206848
@@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<basic-container>
|
||||
<div style="border-bottom: 1px solid #1890FF;">
|
||||
<button class="btn" v-for="item in titleList" :key="item.name" :class="item.select ? 'primary' : ''" @click="titleActive(item)">{{item.name}}</button>
|
||||
</div>
|
||||
<div v-if="status" style="height: 23px;"></div>
|
||||
|
||||
<div class="recommendBody" v-if="status">
|
||||
<div class="leftBox">
|
||||
<menuLeft :menu="menu" :loading="leftLoading" switchStatus @change="menuVal"></menuLeft>
|
||||
</div>
|
||||
<div class="containerWrap">
|
||||
<menuBody :menuDetail="menuDetailObj"></menuBody>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<wx-content></wx-content>
|
||||
</div>
|
||||
</basic-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
import menuLeft from './manage/menuLeft'
|
||||
import menuBody from './manage/menuBody'
|
||||
import wxContent from './manageContent/contentManage'
|
||||
import {
|
||||
routesCompany,
|
||||
routesCompanyEdit
|
||||
} from '@/api/help/recommend/route'
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
menuLeft,
|
||||
menuBody,
|
||||
wxContent
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
recommend: this,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initRoute()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
leftLoading: false,
|
||||
menu: [],
|
||||
titleList: [
|
||||
{
|
||||
name: '企业端后台',
|
||||
select: true
|
||||
},
|
||||
{
|
||||
name: '小程序端',
|
||||
select: false
|
||||
}
|
||||
],
|
||||
menuDetailObj: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initRoute(){
|
||||
this.leftLoading = true
|
||||
routesCompany().then(res => {
|
||||
var arr = res.data.data
|
||||
this.menu = this.statusForEach(arr)
|
||||
// this.menu = res.data.data
|
||||
this.menuDetailObj = {}
|
||||
this.leftLoading = false
|
||||
})
|
||||
},
|
||||
statusForEach (arr) {
|
||||
arr.forEach(e => {
|
||||
e.status = false
|
||||
if (e.isShow == 1) {
|
||||
e.status = true
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
this.statusForEach(e.children)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
},
|
||||
titleActive (item) {
|
||||
this.titleList.forEach(e => {
|
||||
e.select = false
|
||||
})
|
||||
item.select = true
|
||||
if (item.name === '企业端后台') {
|
||||
this.menuDetailObj = {}
|
||||
this.initRoute()
|
||||
}
|
||||
},
|
||||
menuVal (item, type){
|
||||
this.menuDetailObj = JSON.parse(JSON.stringify(item))
|
||||
if (type === 'switch') {
|
||||
var params = {
|
||||
menuId: item.menuId,
|
||||
menuCode: item.menuCode,
|
||||
isShow: item.status ? 1 : 0
|
||||
}
|
||||
routesCompanyEdit(params).then(res =>{
|
||||
this.initRoute()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
// "menu",
|
||||
]),
|
||||
status(){
|
||||
return this.titleList[0].select
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.recommendBody{
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.containerWrap{
|
||||
padding-top: 0 !important;
|
||||
flex:1;
|
||||
overflow: auto;
|
||||
}
|
||||
.leftBox{
|
||||
width: 260px;
|
||||
background: #FAFAFA;
|
||||
margin-right: 23px;
|
||||
}
|
||||
.btn{
|
||||
width: 144px;
|
||||
height: 32px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
border: 1px solid #D9D9D9;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
line-height: 32px;
|
||||
|
||||
margin-right: 16px;
|
||||
}
|
||||
.primary{
|
||||
background-color: #1890FF !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<div class="menu-wrapper">
|
||||
<template v-for="item in menu">
|
||||
<!-- 没有二级菜单 -->
|
||||
<el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
|
||||
:index="item[pathKey]"
|
||||
@click="open(item)"
|
||||
:key="item[labelKey]"
|
||||
:class="{'is-active':vaildAvtive(item)}">
|
||||
<div slot="title"
|
||||
:alt="item[pathKey]"
|
||||
class="flexMenu">
|
||||
<span>{{generateTitle(item)}}</span>
|
||||
<el-switch v-if="switchStatus" v-model="item.status" @change="status(item)"></el-switch>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<!-- 有二级菜单 -->
|
||||
<el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
|
||||
:index="item[pathKey]"
|
||||
:key="item[labelKey]">
|
||||
<template slot="title">
|
||||
<span slot="title"
|
||||
:class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
|
||||
</template>
|
||||
<!-- 子集菜单 -->
|
||||
<template v-for="(child,cindex) in item[childrenKey]">
|
||||
<el-menu-item :index="child[pathKey],cindex"
|
||||
@click="open(child)"
|
||||
:class="{'is-active':vaildAvtive(child)}"
|
||||
v-if="validatenull(child[childrenKey])"
|
||||
:key="child[labelKey]">
|
||||
<div slot="title"
|
||||
:alt="item[pathKey]"
|
||||
class="flexMenu">
|
||||
<span>{{generateTitle(child)}}</span>
|
||||
<el-switch v-if="switchStatus" v-model="child.status" @change="status(child)"></el-switch>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<sidebar-item v-else
|
||||
:menu="[child]"
|
||||
:key="cindex"
|
||||
:props="props"
|
||||
:screen="screen"
|
||||
:collapse="collapse"></sidebar-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import {validatenull} from "@/util/validate";
|
||||
import config from "@/page/index/sidebar/config.js";
|
||||
|
||||
export default {
|
||||
name: "sidebarItem",
|
||||
inject:["recommend"],
|
||||
data() {
|
||||
return {
|
||||
config: config
|
||||
};
|
||||
},
|
||||
props: {
|
||||
menu: {
|
||||
type: Array
|
||||
},
|
||||
screen: {
|
||||
type: Number
|
||||
},
|
||||
first: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
props: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
collapse: {
|
||||
type: Boolean
|
||||
},
|
||||
switchStatus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["roles"]),
|
||||
labelKey() {
|
||||
// return this.props.label || this.config.propsDefault.label;
|
||||
return 'menuName'
|
||||
},
|
||||
pathKey() {
|
||||
// return this.props.path || this.config.propsDefault.path;
|
||||
return 'menuPath'
|
||||
},
|
||||
iconKey() {
|
||||
return this.props.icon || this.config.propsDefault.icon;
|
||||
},
|
||||
childrenKey() {
|
||||
return this.props.children || this.config.propsDefault.children;
|
||||
},
|
||||
nowTagValue() {
|
||||
return this.$router.$avueRouter.getValue(this.$route);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateTitle(item) {
|
||||
return this.$router.$avueRouter.generateTitle(
|
||||
item[this.labelKey],
|
||||
(item.meta || {}).i18n
|
||||
);
|
||||
},
|
||||
vaildAvtive(item) {
|
||||
const groupFlag = (item["group"] || []).some(ele =>
|
||||
this.$route.path.includes(ele)
|
||||
);
|
||||
return this.nowTagValue === item[this.pathKey] || groupFlag;
|
||||
},
|
||||
vaildRoles(item) {
|
||||
item.meta = item.meta || {};
|
||||
return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
|
||||
},
|
||||
validatenull(val) {
|
||||
return validatenull(val);
|
||||
},
|
||||
open (item) {
|
||||
this.recommend.menuVal(item)
|
||||
},
|
||||
status (item) {
|
||||
this.recommend.menuVal(item, 'switch')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.flexMenu{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
<template>
|
||||
<div v-if="menuDetail && menuDetail.menuName">
|
||||
<div class="title">{{menuDetail.menuName}} <span class="menuBodyTip" :class="{'select': menuDetail.status}">[{{menuDetail.status ? '展示中' : '未展示'}}]</span></div>
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="bodyData"
|
||||
ref="crud"
|
||||
>
|
||||
<template slot="status" slot-scope="{row}">
|
||||
<el-switch v-model="row.status" @change="status(row)"></el-switch>
|
||||
</template>
|
||||
<template slot="menu" slot-scope="{row}">
|
||||
<el-button type="text" @click="contentManage(row)" v-if="row.display">管理内容</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
routesCompanyEdit
|
||||
} from '@/api/help/recommend/route'
|
||||
|
||||
export default {
|
||||
name: "menuBody",
|
||||
inject:["recommend"],
|
||||
props: {
|
||||
menuDetail: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewDrawer:false,
|
||||
dialogShow:true,
|
||||
loading:false,
|
||||
option: {
|
||||
height: "auto",
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 4,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: "序号",
|
||||
selection: false,
|
||||
viewBtn: false,
|
||||
addBtn: false,
|
||||
editBtn:false,
|
||||
delBtn: false,
|
||||
columnBtn: false,
|
||||
menuWidth: 300,
|
||||
labelWidth: 151,
|
||||
dialogClickModal: false,
|
||||
dialogType: "drawer",
|
||||
dialogFullscreen: true,
|
||||
column: [
|
||||
{
|
||||
label: "类型",
|
||||
prop: "title",
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: "开/关",
|
||||
prop: "status",
|
||||
display: false,
|
||||
slot: true
|
||||
},
|
||||
]
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 100,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
contentManage (item){
|
||||
this.$router.push({ name: '管理内容', params: { type: item.id, id: this.menuDetail.menuId } })
|
||||
},
|
||||
status (row) {
|
||||
var str = ''
|
||||
switch (row.title) {
|
||||
case '政策法规':
|
||||
str = 'isShowPolicy'
|
||||
break
|
||||
|
||||
case '常见问题':
|
||||
str = 'isShowQuestion'
|
||||
break
|
||||
|
||||
case '广告位':
|
||||
str = 'isShowCarousel'
|
||||
break
|
||||
|
||||
case '专属客服':
|
||||
str = 'isShowCustservice'
|
||||
break
|
||||
|
||||
}
|
||||
var item = this.menuDetail
|
||||
var params = {
|
||||
menuId: item.menuId,
|
||||
menuCode: item.menuCode,
|
||||
[str]: row.status ? 1 : 0
|
||||
}
|
||||
routesCompanyEdit(params).then(res =>{
|
||||
this.recommend.initRoute()
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bodyData () {
|
||||
var data = [
|
||||
{
|
||||
title: '政策法规',
|
||||
status: this.menuDetail.isShowPolicy === 0 ? false : true,
|
||||
id: 1,
|
||||
display: true
|
||||
},
|
||||
{
|
||||
title: '常见问题',
|
||||
status: this.menuDetail.isShowQuestion === 0 ? false : true,
|
||||
id: 2,
|
||||
display: true
|
||||
},
|
||||
{
|
||||
title: '广告位',
|
||||
status: this.menuDetail.isShowCarousel === 0 ? false : true,
|
||||
id: 3,
|
||||
display: false
|
||||
},
|
||||
{
|
||||
title: '专属客服',
|
||||
status: this.menuDetail.isShowCustservice === 0 ? false : true,
|
||||
id: 4,
|
||||
display: false
|
||||
},
|
||||
]
|
||||
return data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title{
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
line-height: 24px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
}
|
||||
.select{
|
||||
color: #1890FF !important;
|
||||
}
|
||||
.menuBodyTip {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="border-bottom: 1px solid #E8E8E8;display: flex;justify-content: space-between;margin:0 22px;height: 50px;">
|
||||
<span style="line-height: 4;">菜单</span>
|
||||
<span style="line-height: 4;">{{switchStatus ? "展示(开/关)" : ""}}</span>
|
||||
</div>
|
||||
<div style="overflow: auto;" :style="{'height': height+ 'px'}">
|
||||
|
||||
<div v-if="loading" class="loading">加载中...</div>
|
||||
<el-menu
|
||||
v-else
|
||||
unique-opened
|
||||
mode="vertical"
|
||||
:show-timeout="200"
|
||||
>
|
||||
<sidebar-item
|
||||
:menu="menu"
|
||||
:switchStatus="switchStatus"
|
||||
:props="website.menu.props"
|
||||
first
|
||||
></sidebar-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sidebarItem from "./menu";
|
||||
export default {
|
||||
name: "menu",
|
||||
components: {sidebarItem},
|
||||
props: {
|
||||
menu: {
|
||||
type: Array
|
||||
},
|
||||
switchStatus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return{
|
||||
height: 500,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.tableHeight()
|
||||
},
|
||||
methods: {
|
||||
tableHeight () {
|
||||
let tableH = 280
|
||||
this.height = window.innerHeight - tableH
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menuName{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.menuName .icon{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: rgba(0, 0, 0, 0.1);;
|
||||
border-radius: 50%;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.menuName .icon_blue{
|
||||
background: #1890FF;
|
||||
}
|
||||
.loading{
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,278 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form size="small" label-position="right" style="padding-left: 10px;padding-right: 10px;" :inline="true">
|
||||
<el-row :span="24">
|
||||
<el-form-item label="一级分类" prop="firstId">
|
||||
<el-select v-model="query.firstId" placeholder="请选择分类" @change="secondList">
|
||||
<el-option v-for="(item, index) in first" :key="index" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级分类" prop="secondId">
|
||||
<el-select v-if="query.firstId" v-model="query.secondId" placeholder="请选择标签">
|
||||
<el-option v-for="(item, index) in second" :key="index" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-select v-else disabled v-model="query.secondId" placeholder="请选择标签"></el-select>
|
||||
</el-form-item>
|
||||
<div class="searchBtn">
|
||||
<el-button type="primary" size="small" icon="el-icon-search" @click="searchChange1">搜 索</el-button>
|
||||
<el-button size="small" icon="el-icon-delete" @click="searchReset1">清 空</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
:page.sync="page"
|
||||
ref="crud"
|
||||
@search-change="searchChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@selection-change="selectionChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template slot="menuLeft">
|
||||
<el-button size="small" type="primary" @click="submit" :loading="btnLoading">保存</el-button>
|
||||
</template>
|
||||
<template slot="menu" slot-scope="{row}">
|
||||
<el-button size="small" type="text" @click="look(row)">查看</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<!-- 展示区 -->
|
||||
<el-drawer title="查看" :visible.sync="viewDrawer" size="60%">
|
||||
<modify-dialog v-if="viewDrawer" :formOption="formOption" disabled></modify-dialog>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modifyDialog from "./modifyDialog";
|
||||
import {
|
||||
getAllContentCategoryFirst,
|
||||
getAllContentCategoryFirstList,
|
||||
getAllContentCategorySecondList
|
||||
} from '@/api/help/classify'
|
||||
import {getContentList, contentDel} from '@/api/help/content/allContent'
|
||||
import {sidebarContentSave} from '@/api/help/recommend/contentManage'
|
||||
const wxStatus = process.env.VUE_APP_SITE
|
||||
|
||||
export default {
|
||||
name: "addDialog",
|
||||
inject:["contentManage", "recommend"],
|
||||
components: {modifyDialog},
|
||||
props: {
|
||||
viewDrawerAdd: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.firstList()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
wxStatus,
|
||||
btnLoading:false,
|
||||
loading:false,
|
||||
viewDrawer:false,
|
||||
formOption: {
|
||||
secondId: ''
|
||||
},
|
||||
query: {
|
||||
secondId: ''
|
||||
},
|
||||
option: {
|
||||
height: "auto",
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 4,
|
||||
border: true,
|
||||
index: false,
|
||||
indexLabel: "序号",
|
||||
selection: true,
|
||||
viewBtn: false,
|
||||
addBtn: false,
|
||||
editBtn:false,
|
||||
delBtn: false,
|
||||
columnBtn: false,
|
||||
menuWidth: 300,
|
||||
labelWidth: 151,
|
||||
dialogClickModal: false,
|
||||
dialogType: "drawer",
|
||||
dialogFullscreen: true,
|
||||
column: [
|
||||
{
|
||||
label: "内容标题",
|
||||
prop: "title",
|
||||
display: false,
|
||||
search: false
|
||||
},
|
||||
{
|
||||
label: "一级分类",
|
||||
prop: "firstId",
|
||||
display: false,
|
||||
type: "tree",
|
||||
dicUrl: getAllContentCategoryFirst(),
|
||||
props: {
|
||||
label: "name",
|
||||
value: "id"
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "二级分类",
|
||||
prop: "secondName",
|
||||
display: false,
|
||||
}
|
||||
]
|
||||
},
|
||||
first: [],
|
||||
second: [],
|
||||
data: [],
|
||||
submitList: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 100,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
firstList(){
|
||||
getAllContentCategoryFirstList().then(res => {
|
||||
this.first = res.data.data
|
||||
})
|
||||
},
|
||||
secondList (id) {
|
||||
getAllContentCategorySecondList (id).then(res => {
|
||||
this.formOption.secondId = ''
|
||||
this.second = res.data.data
|
||||
})
|
||||
},
|
||||
/* 按钮方法 */
|
||||
searchChange1() {
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
searchReset1() {
|
||||
this.query = {
|
||||
secondId: ''
|
||||
}
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
submit () {
|
||||
if (this.recommend && this.recommend.titleList[1].select) {
|
||||
this.wxSubmit()
|
||||
} else {
|
||||
this.pcSubmit()
|
||||
}
|
||||
},
|
||||
/*
|
||||
* wxStatus
|
||||
* default 企嘉云
|
||||
* hengshui 衡水
|
||||
* */
|
||||
wxSubmit () {
|
||||
if(this.submitList.length === 0) return
|
||||
this.btnLoading = true
|
||||
var idArr = ''
|
||||
this.submitList.forEach(e => {
|
||||
if (idArr.length === 0) {
|
||||
idArr+=e.id
|
||||
} else {
|
||||
idArr=idArr+','+e.id
|
||||
}
|
||||
})
|
||||
var source = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 1 : 2
|
||||
var params = {
|
||||
sidebarId: '',
|
||||
type: source,
|
||||
contentIds: idArr,
|
||||
source: source
|
||||
}
|
||||
sidebarContentSave(params).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '保存成功!'
|
||||
});
|
||||
this.btnLoading = false
|
||||
this.contentManage.closeAdd()
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
},
|
||||
pcSubmit () {
|
||||
if(this.submitList.length === 0) return
|
||||
this.btnLoading = true
|
||||
var idArr = ''
|
||||
this.submitList.forEach(e => {
|
||||
if (idArr.length === 0) {
|
||||
idArr+=e.id
|
||||
} else {
|
||||
idArr=idArr+','+e.id
|
||||
}
|
||||
})
|
||||
// var source = this.wxStatus === 'default' ? 1 : 2
|
||||
var pcSource = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 3 : 4;
|
||||
var params = {
|
||||
sidebarId: this.$route.params.id,
|
||||
type: this.$route.params.type,
|
||||
contentIds: idArr,
|
||||
source: pcSource
|
||||
}
|
||||
sidebarContentSave(params).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '保存成功!'
|
||||
});
|
||||
this.btnLoading = false
|
||||
this.contentManage.closeAdd()
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
},
|
||||
look (row) {
|
||||
this.formOption = JSON.parse(JSON.stringify(row))
|
||||
this.formOption.type = JSON.parse(JSON.stringify(row.firstName))
|
||||
this.formOption.tag = JSON.parse(JSON.stringify(row.secondName))
|
||||
this.formOption.note = JSON.parse(JSON.stringify(row.content))
|
||||
this.viewDrawer = true
|
||||
},
|
||||
/* 表格方法 */
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getContentList(
|
||||
page.currentPage,
|
||||
page.pageSize,
|
||||
Object.assign(this.query, params)
|
||||
).then((res) => {
|
||||
this.data = res.data.data.records;
|
||||
this.page.total = res.data.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
selectionChange(list){
|
||||
this.submitList = JSON.parse(JSON.stringify(list))
|
||||
},
|
||||
currentChange(val) {
|
||||
this.page.currentPage = val
|
||||
},
|
||||
sizeChange(val) {
|
||||
this.page.currentPage = 1
|
||||
this.page.pageSize = val
|
||||
},
|
||||
refreshChange () {
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.searchBtn {
|
||||
display: inline-block;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,264 +0,0 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<jl-go-back v-if="id"></jl-go-back>
|
||||
|
||||
<!-- 表格区 -->
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
:page.sync="page"
|
||||
ref="crud"
|
||||
@search-change="searchChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchReset"
|
||||
>
|
||||
<template slot="sort">
|
||||
<el-button type="text">上移</el-button>
|
||||
<el-button type="text">下移</el-button>
|
||||
</template>
|
||||
<template slot="menuLeft">
|
||||
<el-button size="small" type="primary" @click="add">添加</el-button>
|
||||
</template>
|
||||
<template slot="menu" slot-scope="{row}">
|
||||
<el-button size="small" type="text" @click="modify(row)">查看</el-button>
|
||||
<el-button size="small" type="text" @click="del(row)">移除</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<!-- 展示区 -->
|
||||
<!-- 添加 -->
|
||||
<el-drawer title="添加" :visible.sync="viewDrawerAdd" size="80%">
|
||||
<add-dialog v-if="viewDrawerAdd"></add-dialog>
|
||||
</el-drawer>
|
||||
<!-- 编辑 -->
|
||||
<el-drawer title="查看" :visible.sync="viewDrawer" size="60%">
|
||||
<modify-dialog v-if="viewDrawer" disabled :formOption="formOption"></modify-dialog>
|
||||
</el-drawer>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addDialog from './addDialog'
|
||||
import modifyDialog from './modifyDialog'
|
||||
import {getAllContentCategoryFirst} from '@/api/help/classify'
|
||||
import {
|
||||
getSidebarContentList,
|
||||
sidebarContentDel,
|
||||
} from '@/api/help/recommend/contentManage'
|
||||
const wxStatus = process.env.VUE_APP_SITE
|
||||
|
||||
export default {
|
||||
name: "test",
|
||||
components: {addDialog, modifyDialog},
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
contentManage: this,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.onLoad(this.page)
|
||||
},
|
||||
watch: {
|
||||
viewDrawerAdd(){
|
||||
if (!this.viewDrawerAdd) {
|
||||
this.onLoad(this.page)
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
wxStatus,
|
||||
loading:false,
|
||||
viewDrawerAdd:false,
|
||||
viewDrawer:false,
|
||||
drawerTitle: '',
|
||||
option: {
|
||||
height: "auto",
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: "序号",
|
||||
selection: false,
|
||||
viewBtn: false,
|
||||
addBtn: false,
|
||||
editBtn:false,
|
||||
delBtn: false,
|
||||
columnBtn: false,
|
||||
menuWidth: 300,
|
||||
labelWidth: 151,
|
||||
dialogClickModal: false,
|
||||
dialogType: "drawer",
|
||||
dialogFullscreen: true,
|
||||
column: [
|
||||
{
|
||||
label: "内容标题",
|
||||
prop: "title",
|
||||
display: false,
|
||||
search: true
|
||||
},
|
||||
{
|
||||
label: "一级分类",
|
||||
prop: "firstId",
|
||||
display: false,
|
||||
search: true,
|
||||
type: "tree",
|
||||
dicUrl: getAllContentCategoryFirst(),
|
||||
props: {
|
||||
label: "name",
|
||||
value: "id"
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "二级分类",
|
||||
prop: "secondName",
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: "更新时间",
|
||||
prop: "createTime",
|
||||
display: false,
|
||||
type: "datetime",
|
||||
// format: "yyyy/MM/dd",
|
||||
}
|
||||
]
|
||||
},
|
||||
data: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 100,
|
||||
},
|
||||
formOption: {},
|
||||
query: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoad(page, params = {}){
|
||||
if (this.id) {
|
||||
this.loading = true;
|
||||
var pcSource = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 3 : 4;
|
||||
getSidebarContentList(
|
||||
this.id,
|
||||
this.type,
|
||||
pcSource,
|
||||
page.currentPage,
|
||||
page.pageSize,
|
||||
Object.assign(this.query, params)
|
||||
).then((res) => {
|
||||
this.data = res.data.data.records;
|
||||
this.page.total = res.data.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
// wx
|
||||
this.loading = true;
|
||||
var source = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 1 : 2;
|
||||
getSidebarContentList(
|
||||
'',
|
||||
source,
|
||||
source,
|
||||
page.currentPage,
|
||||
page.pageSize,
|
||||
Object.assign(this.query, params)
|
||||
).then((res) => {
|
||||
this.data = res.data.data.records;
|
||||
this.page.total = res.data.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 编辑 组建返回结果 */
|
||||
modifyChange (list) {
|
||||
// console.log('编辑后结果 ===',list);
|
||||
this.closeChange()
|
||||
},
|
||||
closeChange (status) {
|
||||
this.viewDrawer = false
|
||||
},
|
||||
/* 表格按钮 */
|
||||
add () {
|
||||
// default 企嘉云 hegnshui 衡水
|
||||
this.viewDrawerAdd = true
|
||||
},
|
||||
closeAdd () {
|
||||
this.viewDrawerAdd = false
|
||||
},
|
||||
modify (row) {
|
||||
this.formOption = JSON.parse(JSON.stringify(row))
|
||||
this.formOption.type = JSON.parse(JSON.stringify(row.firstName))
|
||||
this.formOption.tag = JSON.parse(JSON.stringify(row.secondName))
|
||||
this.formOption.note = JSON.parse(JSON.stringify(row.content))
|
||||
this.viewDrawer = true
|
||||
},
|
||||
del (row) {
|
||||
this.$confirm('是否移除此数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
if (this.id) { // pc
|
||||
var pcSource = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 3 : 4;
|
||||
sidebarContentDel(this.id, this.type, pcSource, row.id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.onLoad(this.page);
|
||||
})
|
||||
} else { // 小程序
|
||||
var source = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 1 : 2;
|
||||
sidebarContentDel('', source, source, row.id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.onLoad(this.page);
|
||||
})
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 表格方法 */
|
||||
searchChange(params,done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
currentChange(val) {
|
||||
this.page.currentPage = val
|
||||
this.onLoad(this.page)
|
||||
},
|
||||
sizeChange(val) {
|
||||
this.page.currentPage = 1
|
||||
this.page.pageSize = val
|
||||
this.onLoad(this.page)
|
||||
},
|
||||
refreshChange () {
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page)
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<el-form :disabled="disabled" :model="formOption" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="内容标题" prop="title">
|
||||
<el-input v-model="formOption.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="一级分类" prop="type">
|
||||
<el-select v-model="formOption.type" placeholder="请选择分类">
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级分类" prop="tag" required>
|
||||
<el-select v-model="formOption.tag" placeholder="请选择标签">
|
||||
</el-select>
|
||||
<!-- <el-input v-model="formOption.tag"></el-input>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="编辑内容" prop="note">
|
||||
<Tinymce v-model="formOption.note" ref="tinymce"></Tinymce>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!disabled">
|
||||
<el-button @click="resetForm('ruleForm')">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tinymce from "@/components/Tinymce";
|
||||
|
||||
|
||||
export default {
|
||||
name: "modifyDialog",
|
||||
components: {Tinymce},
|
||||
inject:["contentManage"],
|
||||
props: {
|
||||
formOption: {},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: '请输入内容标题', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择分类', trigger: 'blur' }
|
||||
],
|
||||
note: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' }
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 编辑 */
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.contentManage.modifyChange(this.formOption)
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.contentManage.closeChange()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user