更新问题答疑完整功能
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