更新问题答疑完整功能
Showing
6 changed files
with
115 additions
and
86 deletions
... | @@ -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() | ... | ... |
... | @@ -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)); | ... | ... |
-
Please register or sign in to post a comment