27abcbec by chenyunhao

更新问题答疑完整功能

1 parent 7a320b0f
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
12 :defaultConfig="editorConfig" 12 :defaultConfig="editorConfig"
13 :mode="mode" 13 :mode="mode"
14 @onCreated="onCreated" 14 @onCreated="onCreated"
15 @customPaste="customPaste"
15 /> 16 />
16 </div> 17 </div>
17 </template><script> 18 </template><script>
...@@ -87,25 +88,13 @@ export default Vue.extend({ ...@@ -87,25 +88,13 @@ export default Vue.extend({
87 }, 88 },
88 methods: { 89 methods: {
89 onCreated(editor) { 90 onCreated(editor) {
90 this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
91 },
92 onCreated(editor) {
93 this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错 91 this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
94 editor.on("modalOrPanelShow", modalOrPanel => {}); 92 editor.on("modalOrPanelShow", modalOrPanel => {});
95 // 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层
96 // this.editor.on("modalOrPanelShow", modalOrPanel => {
97 // modalOrPanel.isShow = false;
98 // // modalOrPanel.$elem[0].style.display = "none";
99 // // if (modalOrPanel.type !== "modal") return;
100 // // const { $elem } = modalOrPanel; // modal element
101
102 // // 设置 modal 样式(定位、z-index)
103 // // 显示蒙层
104 // });
105 this.editor.on("modalOrPanelHide", () => { 93 this.editor.on("modalOrPanelHide", () => {
106 // 隐藏蒙层 94 // 隐藏蒙层
107 }); 95 });
108 }, 96 },
97
109 onOk() { 98 onOk() {
110 this.editor.restoreSelection(); 99 this.editor.restoreSelection();
111 SlateTransforms.setNodes( 100 SlateTransforms.setNodes(
...@@ -114,10 +103,14 @@ export default Vue.extend({ ...@@ -114,10 +103,14 @@ export default Vue.extend({
114 { match: n => SlateElement.isElement(n) } 103 { match: n => SlateElement.isElement(n) }
115 ); 104 );
116 }, 105 },
106
117 onChange(editor) { 107 onChange(editor) {
118 console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容 108 console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
119 // console.log(this.editor.getFragment()); 109 this.html = this.pasteTextHandle("aa");
120 } 110 },
111
112 customPaste(editor, event) {
113 },
121 }, 114 },
122 mounted() { 115 mounted() {
123 setTimeout(() => { 116 setTimeout(() => {
......
...@@ -12,7 +12,7 @@ import store from './store' ...@@ -12,7 +12,7 @@ import store from './store'
12 import router from './router' 12 import router from './router'
13 13
14 import '@/icons' // icon 14 import '@/icons' // icon
15 // import '@/permission' // permission control 15 import '@/permission' // permission control
16 16
17 17
18 import { 18 import {
......
...@@ -2,32 +2,23 @@ import router from './router' ...@@ -2,32 +2,23 @@ import router from './router'
2 import store from './store' 2 import store from './store'
3 import NProgress from 'nprogress' // progress bar 3 import NProgress from 'nprogress' // progress bar
4 import 'nprogress/nprogress.css' // progress bar style 4 import 'nprogress/nprogress.css' // progress bar style
5 import { Message } from 'element-ui' 5 import {
6 import { getToken } from '@/utils/auth' // getToken from cookie 6 Message
7 } from 'element-ui'
8 import {
9 getToken
10 } from '@/utils/auth' // getToken from cookie
7 11
8 NProgress.configure({ showSpinner: false })// NProgress configuration 12 NProgress.configure({
13 showSpinner: false
14 }) // NProgress configuration
9 15
10 const whiteList = ['/login'] // 不重定向白名单 16 const whiteList = ['/login'] // 不重定向白名单
11 router.beforeEach((to, from, next) => { 17 router.beforeEach((to, from, next) => {
18 console.log('getToken()', getToken())
12 NProgress.start() 19 NProgress.start()
13 if (getToken()) { 20 if (getToken()) {
14 if (to.path === '/login') { 21 next()
15 next({ path: '/' })
16 NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
17 } else {
18 if (store.getters.roles.length === 0) {
19 store.dispatch('GetInfo').then(res => { // 拉取用户信息
20 next()
21 }).catch((err) => {
22 store.dispatch('FedLogOut').then(() => {
23 Message.error(err || 'Verification failed, please login again')
24 next({ path: '/' })
25 })
26 })
27 } else {
28 next()
29 }
30 }
31 } else { 22 } else {
32 if (whiteList.indexOf(to.path) !== -1) { 23 if (whiteList.indexOf(to.path) !== -1) {
33 next() 24 next()
......
...@@ -102,3 +102,7 @@ a:hover { ...@@ -102,3 +102,7 @@ a:hover {
102 .el-date-editor .el-range-separator { 102 .el-date-editor .el-range-separator {
103 padding: 0; 103 padding: 0;
104 } 104 }
105
106 .maxItem {
107 width: 100%;
108 }
......
...@@ -12,12 +12,19 @@ ...@@ -12,12 +12,19 @@
12 element-loading-spinner="el-icon-loading" 12 element-loading-spinner="el-icon-loading"
13 element-loading-background="rgba(255, 255, 255, 0.9)" 13 element-loading-background="rgba(255, 255, 255, 0.9)"
14 > 14 >
15 <el-form-item label="类型">
16 <el-select v-model="editForm.type" placeholder="请选择类型">
17 <el-option key="0" label="文章" :value="0"></el-option>
18 <el-option key="1" label="外链" :value="1"></el-option>
19 </el-select>
20 </el-form-item>
21
15 <el-form-item 22 <el-form-item
16 label="所属分类" 23 label="所属分类"
17 prop="classifyCode" 24 prop="classifyCodes"
18 :rules="{ required: true, message: '所属分类不能为空', trigger: 'change' }" 25 :rules="{ required: true, message: '所属分类不能为空', trigger: 'change' }"
19 > 26 >
20 <el-select class="maxItem" v-model="editForm.classifyCode" placeholder="请选择所属分类"> 27 <el-select class="maxItem" v-model="editForm.classifyCodes" placeholder="请选择所属分类" multiple>
21 <el-option 28 <el-option
22 v-for="item in classifyList" 29 v-for="item in classifyList"
23 :key="item.classifyCode" 30 :key="item.classifyCode"
...@@ -35,50 +42,50 @@ ...@@ -35,50 +42,50 @@
35 <el-input v-model="editForm.articleTitle" placeholder="请输入标题"></el-input> 42 <el-input v-model="editForm.articleTitle" placeholder="请输入标题"></el-input>
36 </el-form-item> 43 </el-form-item>
37 44
38 <el-form-item 45 <el-form-item v-if="editForm.type == 1" label="外部链接" prop="outerLink">
39 label="内容" 46 <el-input v-model="editForm.outerLink" placeholder="请输入外部链接"></el-input>
40 prop="content"
41 :rules="{ required: true, message: '内容不能为空', trigger: 'blur' }"
42 >
43 <WangEditor v-model="editForm.content" :subPath="subPath" />
44 </el-form-item> 47 </el-form-item>
45 48
46 <el-form-item label="附件"> 49 <template v-else-if="editForm.type == 0">
47 <el-upload 50 <el-form-item
48 class="upload-demo" 51 label="内容"
49 :onSuccess="successFile" 52 prop="content"
50 :onRemove="removeFile" 53 :rules="{ required: true, message: '内容不能为空', trigger: 'blur' }"
51 :file-list="editForm.attachments"
52 drag
53 action="https://api.k.wxpai.cn/bizproxy/tianbaoServiceApi/common/upload"
54 multiple
55 :data="extraData"
56 accept="application/pdf"
57 > 54 >
58 <i class="el-icon-upload"></i> 55 <WangEditor v-model="editForm.content" :subPath="subPath" />
59 <div class="el-upload__text"> 56 </el-form-item>
60 将文件拖到此处,或
61 <em>点击上传</em>
62 </div>
63 <div class="el-upload__tip" slot="tip">*只能上传pdf文件</div>
64 </el-upload>
65 </el-form-item>
66 57
67 <el-form-item label="排序值"> 58 <el-form-item label="附件">
68 <el-input-number v-model="editForm.orderId" :min="0"></el-input-number> 59 <el-upload
69 </el-form-item> 60 class="upload-demo"
70 <el-form-item label="是否在线" prop="onlineStatus"> 61 :onSuccess="successFile"
71 <el-switch 62 :onRemove="removeFile"
72 v-model="editForm.onlineStatus" 63 :file-list="editForm.attachments"
73 inactive-color="rgb(234,236,240)" 64 drag
74 ></el-switch> 65 action="https://api.k.wxpai.cn/bizproxy/tianbaoServiceApi/common/upload"
75 </el-form-item> 66 multiple
76 <el-form-item label="是否置顶" prop="inTop"> 67 :data="extraData"
77 <el-switch 68 accept="application/pdf"
78 v-model="editForm.inTop" 69 >
79 inactive-color="rgb(234,236,240)" 70 <i class="el-icon-upload"></i>
80 ></el-switch> 71 <div class="el-upload__text">
81 </el-form-item> 72 将文件拖到此处,或
73 <em>点击上传</em>
74 </div>
75 <div class="el-upload__tip" slot="tip">*只能上传pdf文件</div>
76 </el-upload>
77 </el-form-item>
78
79 <el-form-item label="排序值">
80 <el-input-number v-model="editForm.orderId" :min="0"></el-input-number>
81 </el-form-item>
82 <el-form-item label="是否在线" prop="onlineStatus">
83 <el-switch v-model="editForm.onlineStatus" inactive-color="rgb(234,236,240)"></el-switch>
84 </el-form-item>
85 <el-form-item label="是否置顶" prop="inTop">
86 <el-switch v-model="editForm.inTop" inactive-color="rgb(234,236,240)"></el-switch>
87 </el-form-item>
88 </template>
82 </el-form> 89 </el-form>
83 <div slot="footer" class="dialog-footer" style="padding-right:30px"> 90 <div slot="footer" class="dialog-footer" style="padding-right:30px">
84 <el-button @click="componentClose">取 消</el-button> 91 <el-button @click="componentClose">取 消</el-button>
...@@ -104,7 +111,7 @@ export default { ...@@ -104,7 +111,7 @@ export default {
104 subPath: "article", 111 subPath: "article",
105 editForm: { 112 editForm: {
106 articleCode: null, 113 articleCode: null,
107 classifyCode: null, 114 classifyCodes: [],
108 articleTitle: null, 115 articleTitle: null,
109 articleThumb: 0, 116 articleThumb: 0,
110 author: null, 117 author: null,
...@@ -113,7 +120,9 @@ export default { ...@@ -113,7 +120,9 @@ export default {
113 orderId: 0, 120 orderId: 0,
114 onlineStatus: true, 121 onlineStatus: true,
115 inTop: false, 122 inTop: false,
116 attachments: [] 123 attachments: [],
124 outerLink: "",
125 type: 0
117 }, 126 },
118 classifyList: [], 127 classifyList: [],
119 extraData: { 128 extraData: {
...@@ -143,13 +152,19 @@ export default { ...@@ -143,13 +152,19 @@ export default {
143 .then(res => { 152 .then(res => {
144 res.inTop = res.inTop == 1 ? true : false; 153 res.inTop = res.inTop == 1 ? true : false;
145 res.onlineStatus = res.onlineStatus == 1 ? true : false; 154 res.onlineStatus = res.onlineStatus == 1 ? true : false;
155 res.classifyCodes = res.classifyCodes.split(",");
146 156
147 if (res.attachments) { 157 if (res.attachments) {
148 res.attachments = JSON.parse(res.attachments); 158 res.attachments = JSON.parse(res.attachments);
149 } else { 159 } else {
150 res.attachments = []; 160 res.attachments = [];
151 } 161 }
152 162
163 if (res.outerLink) {
164 res.type = 1;
165 } else {
166 res.type = 0;
167 }
153 this.editForm = res; 168 this.editForm = res;
154 }); 169 });
155 }, 170 },
...@@ -178,6 +193,7 @@ export default { ...@@ -178,6 +193,7 @@ export default {
178 } else { 193 } else {
179 editForm.attachments = ""; 194 editForm.attachments = "";
180 } 195 }
196 editForm.classifyCodes = editForm.classifyCodes.join(",");
181 197
182 console.log("this.editForm", editForm); 198 console.log("this.editForm", editForm);
183 app 199 app
......
...@@ -3,9 +3,25 @@ ...@@ -3,9 +3,25 @@
3 <!-- 筛选参数 --> 3 <!-- 筛选参数 -->
4 <el-header> 4 <el-header>
5 <el-form :inline="true" style="display:flex"> 5 <el-form :inline="true" style="display:flex">
6 <el-form-item style="flex-grow: 1"> 6 <el-form-item>
7 <el-input @change="getList" v-model="queryForm.query" placeholder="请输入标题名称"></el-input> 7 <el-input @change="getList" v-model="queryForm.query" placeholder="请输入标题名称"></el-input>
8 </el-form-item> 8 </el-form-item>
9 <el-form-item style="flex-grow: 1">
10 <el-select
11 @change="getList"
12 class="maxItem"
13 v-model="queryForm.classifyCode"
14 placeholder="请选择分类"
15 clearable
16 >
17 <el-option
18 v-for="item in classifyList"
19 :key="item.classifyCode"
20 :label="item.classifyName"
21 :value="item.classifyCode"
22 ></el-option>
23 </el-select>
24 </el-form-item>
9 <el-form-item> 25 <el-form-item>
10 <el-button @click="handleShowEdit(null)" type="primary" icon="el-icon-plus">新建</el-button> 26 <el-button @click="handleShowEdit(null)" type="primary" icon="el-icon-plus">新建</el-button>
11 </el-form-item> 27 </el-form-item>
...@@ -90,9 +106,7 @@ export default { ...@@ -90,9 +106,7 @@ export default {
90 page: 1, 106 page: 1,
91 size: 10, 107 size: 10,
92 query: "", 108 query: "",
93 onlineStatus: null, 109 classifyCode: ""
94 messageType: null,
95 vipMark: null
96 }, //列表默认传参 110 }, //列表默认传参
97 list: [], //列表数据 111 list: [], //列表数据
98 total: 0, //列表总数 112 total: 0, //列表总数
...@@ -101,7 +115,8 @@ export default { ...@@ -101,7 +115,8 @@ export default {
101 115
102 pojo: null, 116 pojo: null,
103 showEdit: false, 117 showEdit: false,
104 showChangePwd: false 118 showChangePwd: false,
119 classifyList: []
105 }; 120 };
106 }, 121 },
107 created() { 122 created() {
...@@ -112,6 +127,7 @@ export default { ...@@ -112,6 +127,7 @@ export default {
112 // 初始化数据 127 // 初始化数据
113 async initData() { 128 async initData() {
114 this.getList(); 129 this.getList();
130 this.getClassifyList();
115 }, 131 },
116 // 获取列表 132 // 获取列表
117 getList(resize) { 133 getList(resize) {
...@@ -140,6 +156,15 @@ export default { ...@@ -140,6 +156,15 @@ export default {
140 }); 156 });
141 }, 157 },
142 158
159 getClassifyList() {
160 app
161 .get({ url: app.api.getArticleClassify, data: null })
162 .then(res => {
163 this.classifyList = res.list;
164 })
165 .catch(e => {});
166 },
167
143 // 更新内容 168 // 更新内容
144 setList(item) { 169 setList(item) {
145 let editForm = JSON.parse(JSON.stringify(item)); 170 let editForm = JSON.parse(JSON.stringify(item));
......