|
|
@@ -1,19 +1,39 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="myTab4">
|
|
|
<main-top>
|
|
|
<div slot="con" v-if="activeSub['新增']">
|
|
|
- <el-button @click="goto({ id: 'none',status: 0 })" type="primary"
|
|
|
+ <el-button @click="goto({ id: 'none', status: 0 })" type="primary"
|
|
|
>新增</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</main-top>
|
|
|
<div class="tablecon flexcon">
|
|
|
- <accordion
|
|
|
+ <!-- 新增tab栏的按钮 -->
|
|
|
+ <div class="addTab">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="width: 100%"
|
|
|
+ @click="addModule"
|
|
|
+ v-if="limitsEdit"
|
|
|
+ >新增模块</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- <accordion
|
|
|
@select="handleMenu"
|
|
|
:menu="menu"
|
|
|
:default="subMenu"
|
|
|
title="学习园地"
|
|
|
+ /> -->
|
|
|
+
|
|
|
+ <LeftTab
|
|
|
+ @editTab="editTab"
|
|
|
+ @deltTab="deltTab"
|
|
|
+ @select="handleMenu"
|
|
|
+ :menu="menu"
|
|
|
+ :default="goodsModuleId"
|
|
|
+ title="学习园地"
|
|
|
/>
|
|
|
+
|
|
|
<div class="tablebody">
|
|
|
<status :status="status" @select="selectStatus"></status>
|
|
|
<search>
|
|
|
@@ -38,8 +58,10 @@
|
|
|
placeholder="请输入关键字"
|
|
|
></el-input>
|
|
|
<el-button @click="getList" type="primary">查询</el-button>
|
|
|
- <el-button @click="search.date='',search.inputKey='',getList()" >重置</el-button>
|
|
|
-
|
|
|
+ <el-button
|
|
|
+ @click="(search.date = ''), (search.inputKey = ''), getList()"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</search>
|
|
|
<div class="table">
|
|
|
@@ -62,57 +84,189 @@
|
|
|
@submit="submit"
|
|
|
:tableData="list"
|
|
|
>
|
|
|
- <template slot-scope="{data}" slot="record">
|
|
|
- <el-button @click="applyDetail(data,type)" type="text">审核详情</el-button>
|
|
|
+ <template slot-scope="{ data }" slot="record">
|
|
|
+ <el-button @click="applyDetail(data, type)" type="text"
|
|
|
+ >审核详情</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</vtable>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <vdialog :show="showApplyDetail" @close="showApplyDetail=false" :tableData="alDetail"></vdialog>
|
|
|
+ <vdialog
|
|
|
+ :show="showApplyDetail"
|
|
|
+ @close="showApplyDetail = false"
|
|
|
+ :tableData="alDetail"
|
|
|
+ ></vdialog>
|
|
|
|
|
|
+ <!-- 点击新增模块出现的弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="ruleForm.id ? '编辑模块' : '新增模块'"
|
|
|
+ :visible="isShow"
|
|
|
+ @close="addTabX"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="模块名称：">
|
|
|
+ <el-input
|
|
|
+ :disabled="isShowId === 4 || isShowId === 5"
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ maxlength="10"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="展示类型：">
|
|
|
+ <el-radio
|
|
|
+ v-model="ruleForm.type"
|
|
|
+ label="share"
|
|
|
+ :disabled="!!ruleForm.id"
|
|
|
+ >知识共享</el-radio
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ v-model="ruleForm.type"
|
|
|
+ label="info"
|
|
|
+ :disabled="!!ruleForm.id"
|
|
|
+ >知识阅览</el-radio
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="addTabX">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addTabOK">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
-import { raw, menu, menuStr } from "./data";
|
|
|
-import { getList } from "@/configue/api";
|
|
|
+// 导入后面自己写的tab栏组件
|
|
|
+import LeftTab from "./componets/leftTab.vue";
|
|
|
+import { raw, menuStr } from "./data";
|
|
|
+import {
|
|
|
+ getList,
|
|
|
+ getTabStudyList,
|
|
|
+ getTabInfoById,
|
|
|
+ getTabDelById,
|
|
|
+ addTabStudyList,
|
|
|
+} from "@/configue/api";
|
|
|
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
|
|
export default {
|
|
|
+ name: "tabStudy",
|
|
|
+ components: { LeftTab },
|
|
|
data() {
|
|
|
return {
|
|
|
- type:'news',
|
|
|
- showApplyDetail:false,
|
|
|
- alDetail:{},
|
|
|
+ limitsEdit: true,
|
|
|
+ type: "news",
|
|
|
+ showApplyDetail: false,
|
|
|
+ alDetail: {},
|
|
|
search: {
|
|
|
inputKey: "",
|
|
|
date: "",
|
|
|
state: "",
|
|
|
},
|
|
|
status: "all",
|
|
|
- menu,
|
|
|
+ menu: [
|
|
|
+ // 使用的vue里面的menu组件，需要初始化数据，不然刷新会有卡顿
|
|
|
+ { id: 4, name: "..." },
|
|
|
+ { id: 5, name: "..." },
|
|
|
+ { id: 6, name: "..." },
|
|
|
+ { id: 7, name: "..." },
|
|
|
+ { id: 8, name: "..." },
|
|
|
+ { id: 9, name: "..." },
|
|
|
+ { id: 10, name: "..." },
|
|
|
+ ],
|
|
|
list: {},
|
|
|
page: {
|
|
|
size: 25,
|
|
|
pageNum: 1,
|
|
|
- }
|
|
|
+ },
|
|
|
+ goodsModuleId: 4,
|
|
|
+ // 点击新增模块
|
|
|
+ isShowId: null,
|
|
|
+ isShow: false,
|
|
|
+ ruleForm: {
|
|
|
+ name: "",
|
|
|
+ type: "share", //类型, info:知识阅览, share:知识共享
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 点击左上方的新增模块
|
|
|
+ addModule() {
|
|
|
+ this.isShow = true;
|
|
|
+ this.isShowId = null;
|
|
|
+ },
|
|
|
+ async editTab(id) {
|
|
|
+ this.isShowId = id;
|
|
|
+ // console.log('点击了编辑',id);
|
|
|
+ let res = await getTabInfoById(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.ruleForm = res.data;
|
|
|
+ this.isShow = true;
|
|
|
+ } else return this.$message.warning(res.msg);
|
|
|
+ // 根据id获取信息
|
|
|
+ },
|
|
|
+ deltTab(id) {
|
|
|
+ this.$confirm(
|
|
|
+ "确定删除吗? 当前模块下如果存在数据，也会一并删除.",
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }
|
|
|
+ ).then(async () => {
|
|
|
+ let res = await getTabDelById(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success("删除成功!");
|
|
|
+ this.$router.push("/study/info");
|
|
|
+ this.goodsModuleId = 4;
|
|
|
+ this.getTabStudyList();
|
|
|
+ } else return this.$message.warning(res.msg);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //------------------点击新增模块
|
|
|
+ async addTabOK() {
|
|
|
+ if (this.ruleForm.name.trim() === "")
|
|
|
+ return this.$message.warning("模块名称不能为空");
|
|
|
+ else {
|
|
|
+ let res = await addTabStudyList(this.ruleForm);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.getTabStudyList();
|
|
|
+ this.isShow = false;
|
|
|
+ this.addTabX();
|
|
|
+ this.$message.success("操作成功");
|
|
|
+ } else this.$message.warning(res.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addTabX() {
|
|
|
+ this.ruleForm = {
|
|
|
+ name: "",
|
|
|
+ type: "share",
|
|
|
+ };
|
|
|
+ this.isShow = false;
|
|
|
+ },
|
|
|
+ //----------------------- 新增模块结束
|
|
|
selectStatus(item) {
|
|
|
this.status = item.id;
|
|
|
},
|
|
|
handleMenu(data) {
|
|
|
+ // 把索引存起来
|
|
|
+ localStorage.setItem("XJ_studyModuleId", data.id);
|
|
|
+ this.goodsModuleId = data.id;
|
|
|
this.$router.push({
|
|
|
- params: { ...this.$route.params, type: data },
|
|
|
+ params: { ...this.$route.params, type: data.type, id: data.id },
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
getList() {
|
|
|
let { inputKey, date } = this.search;
|
|
|
getList(
|
|
|
@@ -124,44 +278,82 @@ export default {
|
|
|
searchKey: inputKey,
|
|
|
status: this.status == "all" ? "" : this.status,
|
|
|
type: this.subMenu,
|
|
|
+ goodsModuleId: this.goodsModuleId,
|
|
|
},
|
|
|
(data) => {
|
|
|
this.list = data.data;
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
+ //封装获取tab列表的方法
|
|
|
+ async getTabStudyList() {
|
|
|
+ let res = await getTabStudyList();
|
|
|
+ this.menu = res.data;
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters({
|
|
|
activeMenu: "activeMenu",
|
|
|
- activeSub:"activeSub"
|
|
|
+ activeSub: "activeSub",
|
|
|
}),
|
|
|
data() {
|
|
|
return raw[this.$route.params.type];
|
|
|
},
|
|
|
- subMenu(){
|
|
|
- return this.$route.params.type
|
|
|
- }
|
|
|
+ subMenu() {
|
|
|
+ return this.$route.params.type;
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
- subMenu:{
|
|
|
- deep:true,
|
|
|
- immediate:true,
|
|
|
- handler:function (newVal) {
|
|
|
- this.getAuth(this.activeMenu,menuStr[newVal])
|
|
|
+ goodsModuleId:{
|
|
|
+ deep: true,
|
|
|
+ handler: function () {
|
|
|
+ this.getAuth(this.activeMenu, menuStr[this.subMenu]);
|
|
|
this.getList();
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // subMenu: {
|
|
|
+ // deep: true,
|
|
|
+ // immediate: true,
|
|
|
+ // handler: function (newVal) {
|
|
|
+ // this.getAuth(this.activeMenu, menuStr[newVal]);
|
|
|
+ // this.getList();
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ activeMenu: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler: function (newVal) {
|
|
|
+ this.getAuth(newVal, menuStr[this.subMenu]);
|
|
|
+ },
|
|
|
},
|
|
|
- activeMenu:{
|
|
|
- deep:true,
|
|
|
- immediate:true,
|
|
|
- handler:function (newVal) {
|
|
|
- this.getAuth(newVal,menuStr[this.subMenu])
|
|
|
- }
|
|
|
- }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getList();
|
|
|
},
|
|
|
+ created() {
|
|
|
+ // 调用获取tab列表方法
|
|
|
+ let myId = localStorage.getItem("XJ_studyModuleId");
|
|
|
+ if (myId) this.goodsModuleId = Number(myId);
|
|
|
+ else this.goodsModuleId = 1;
|
|
|
+ this.getTabStudyList();
|
|
|
+ //获取自定义模块的权限
|
|
|
+ let temp = localStorage.getItem("XJ_limits_ZDY");
|
|
|
+ temp = JSON.parse(temp).XXYD;
|
|
|
+ this.limitsEdit = temp[0].authority;
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.myTab4 {
|
|
|
+ .tablecon {
|
|
|
+ position: relative;
|
|
|
+ .addTab {
|
|
|
+ width: 201px;
|
|
|
+ z-index: 10;
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
