Browse Source

内容管理

master
lucky 4 years ago
parent
commit
c00469dd9f
  1. 13
      package-lock.json
  2. 1
      package.json
  3. 3
      src/components/Page/PageAdd.vue
  4. 23
      src/components/Page/PageDate.vue
  5. 45
      src/components/Page/PageEdit.vue
  6. 3
      src/components/Page/PageSearch.vue
  7. 6
      src/components/QuillEditor/QuillEditor.vue
  8. 3
      src/main.js
  9. 24
      src/views/PageManage/PageManage.vue

13
package-lock.json

@ -5113,6 +5113,11 @@
"domelementtype": "1" "domelementtype": "1"
} }
}, },
"dompurify": {
"version": "2.2.6",
"resolved": "https://registry.npm.taobao.org/dompurify/download/dompurify-2.2.6.tgz",
"integrity": "sha1-VJRdxcC0XOWuIocFd36OWdey7cQ="
},
"domready": { "domready": {
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npm.taobao.org/domready/download/domready-1.0.8.tgz", "resolved": "https://registry.npm.taobao.org/domready/download/domready-1.0.8.tgz",
@ -12508,6 +12513,14 @@
"integrity": "sha1-KdTrSCdcf+FbkuH9XZX74qlmQ28=", "integrity": "sha1-KdTrSCdcf+FbkuH9XZX74qlmQ28=",
"dev": true "dev": true
}, },
"vue-dompurify-html": {
"version": "2.3.0",
"resolved": "https://registry.npm.taobao.org/vue-dompurify-html/download/vue-dompurify-html-2.3.0.tgz",
"integrity": "sha1-sXXt2lc2LPewPShkRo+mROBaKtA=",
"requires": {
"dompurify": "^2.0.0"
}
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602498980660&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz", "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602498980660&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz",

1
package.json

@ -15,6 +15,7 @@
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"stylus": "^0.54.8", "stylus": "^0.54.8",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-dompurify-html": "^2.3.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"

3
src/components/Page/PageAdd.vue

@ -99,10 +99,9 @@ export default {
console.log('params: ', params); console.log('params: ', params);
const res = await addPage(params); const res = await addPage(params);
const { data, msg, code } = res.data; const { data, msg, code } = res.data;
this.$emit('closeModal');
if (code === 200) { if (code === 200) {
this.$message.success('添加成功'); this.$message.success('添加成功');
// TODO: this.$emit('closeModal');
} else { } else {
throw msg; throw msg;
} }

23
src/components/Page/PageDate.vue

@ -5,8 +5,10 @@
:columns="columns" :columns="columns"
:data-source="lists" :data-source="lists"
:loading="loading" :loading="loading"
:pagination="pagination"
:row-key="record => record.id" :row-key="record => record.id"
:scroll="{ y: height }" :scroll="{ y: height }"
@change="handleTableChange"
bordered bordered
class="white" class="white"
> >
@ -15,7 +17,7 @@
</template> </template>
<template slot="content" slot-scope="text, record, index"> <template slot="content" slot-scope="text, record, index">
<span>{{ text }}</span> <span v-dompurify-html="text"></span>
</template> </template>
<template slot="edit" slot-scope="text, record"> <template slot="edit" slot-scope="text, record">
@ -64,6 +66,7 @@ const columns = [
align: 'center', align: 'center',
dataIndex: 'edit', dataIndex: 'edit',
key: 'edit', key: 'edit',
width: 150,
scopedSlots: { customRender: 'edit' }, scopedSlots: { customRender: 'edit' },
}, },
]; ];
@ -73,7 +76,7 @@ export default {
components: { components: {
PageEdit, PageEdit,
}, },
props: { lists: { type: Array, default: () => [] } }, props: { lists: { type: Array, default: () => [] }, pagination: { type: Object, default: () => {} } },
data() { data() {
this.cacheData = this.lists.map(item => ({ ...item })); this.cacheData = this.lists.map(item => ({ ...item }));
return { return {
@ -100,12 +103,19 @@ export default {
methods: { methods: {
showEditModal(record) { showEditModal(record) {
this.editItem = record; this.editItem = record;
console.log('this.editItem: ', this.editItem);
this.editVisible = true; this.editVisible = true;
}, },
closeModal() { async closeModal() {
this.editVisible = false; this.editVisible = false;
await this.$emit('getPageList');
console.log(555555555555);
},
handleTableChange(pagination) {
const { current, pageSize } = pagination;
const condition = { current, pageSize };
this.$emit('getPageList', condition);
}, },
// //
@ -116,8 +126,9 @@ export default {
const { data, msg, code } = res.data; const { data, msg, code } = res.data;
if (code === 200) { if (code === 200) {
this.$message.success('删除成功'); this.$message.success('删除成功');
const arr = [...this.lists]; await this.$emit('getPageList');
this.lists = arr.filter(item => item.id !== pageId); // const arr = [...this.lists];
// this.lists = arr.filter(item => item.id !== pageId);
} else { } else {
throw msg; throw msg;
} }

45
src/components/Page/PageEdit.vue

@ -8,10 +8,11 @@
:label-col="formItemLayout.labelCol" :label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol" :wrapper-col="formItemLayout.wrapperCol"
label="标题" label="标题"
v-decorator="['titleCode', { initialValues:editItem.titleCode }]" v-model="edtiTitleCode"
> >
<a-cascader :options="titles" placeholder="标题" /> <a-cascader :options="titles" :placeholder="titleCode" @change="onChange" />
</a-form-item> </a-form-item>
<a-cascader :options="titles" @change="onChange" placeholder="标题" />
<!-- 内容 --> <!-- 内容 -->
<a-form-item <a-form-item
:label-col="formItemLayout.labelCol" :label-col="formItemLayout.labelCol"
@ -26,7 +27,7 @@
</a-form-item> </a-form-item>
<a-form-item class="d-flex flex-row-reverse"> <a-form-item class="d-flex flex-row-reverse">
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button> <a-button @click="closeModal" class="mr-3">取消</a-button>
<a-button class="white--text" html-type="submit" type="primary">保存</a-button> <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -57,33 +58,57 @@ export default {
form: this.$form.createForm(this, { name: 'r-d-add' }), form: this.$form.createForm(this, { name: 'r-d-add' }),
maxSize: 2048, maxSize: 2048,
content: '', content: '',
titleCode: '',
edtiTitleCode: '',
}; };
}, },
computed: mapState(['titles']), computed: {
...mapState(['titles']),
},
watch: {
editVisible(value) {
if (value === true && this.editItem && this.editItem.titleCode) {
this.titleCode = this.editItem.titleCode.replace(/-/g, ' / ');
}
},
},
methods: { methods: {
// //
changeInput(value) { changeInput(value) {
console.log('value: ', value);
this.content = value; this.content = value;
}, },
onChange(value) {
if (value.length > 1) {
this.edtiTitleCode = `${value[0]}-${value[1]}`;
} else {
this.edtiTitleCode = `${value[0]}`;
}
},
closeModal() {
this.edtiTitleCode = '';
this.$emit('closeModal');
},
// //
handleSubmit(e) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
this.form.validateFieldsAndScroll(async (err, values) => { this.form.validateFieldsAndScroll(async (err, values) => {
if (!err) { if (!err) {
try { try {
const { editItem } = this; const { content, editItem, edtiTitleCode } = this;
console.log('editItem', editItem); const params = { param: { content, id: editItem.id, titleCode: edtiTitleCode || editItem.titleCode } };
const params = { param: values };
const res = await updatePage(params); const res = await updatePage(params);
const { data, msg, code } = res.data; const { data, msg, code } = res.data;
this.$emit('closeModal');
if (code === 200) { if (code === 200) {
this.$message.success('修改成功'); this.$message.success('修改成功');
// TODO: this.$emit('closeModal');
this.edtiTitleCode = '';
this.content = '';
} else { } else {
throw msg; throw msg;
} }

3
src/components/Page/PageSearch.vue

@ -41,7 +41,8 @@ export default {
}, },
handleTableChange() { handleTableChange() {
this.$emit('getPageList', this.titleCode); const condition = { titleCode: this.titleCode };
this.$emit('getPageList', condition);
}, },
}, },
}; };

6
src/components/QuillEditor/QuillEditor.vue

@ -3,7 +3,7 @@
<quill-editor <quill-editor
:options="editorOption" :options="editorOption"
@blur="onEditorBlur($event)" @blur="onEditorBlur($event)"
@change="onEditorChange(placeholder)" @change="onEditorChange()"
@focus="onEditorFocus($event)" @focus="onEditorFocus($event)"
ref="myTextEditor" ref="myTextEditor"
v-model="content" v-model="content"
@ -79,9 +79,9 @@ export default {
onEditorFocus() { onEditorFocus() {
// //
}, },
onEditorChange(placeholder) { onEditorChange() {
// //
this.$emit('changeInput', placeholder, this.content); this.$emit('changeInput', this.content);
}, },
// //

3
src/main.js

@ -8,9 +8,12 @@ import store from './store';
import './plugins/ant-design-vue.js'; import './plugins/ant-design-vue.js';
import './plugins/vue-quill-editor.js'; import './plugins/vue-quill-editor.js';
import 'common/portrait.styl'; import 'common/portrait.styl';
import VueDOMPurifyHTML from 'vue-dompurify-html';
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(VueDOMPurifyHTML);
window.vm = new Vue({ window.vm = new Vue({
router, router,
store, store,

24
src/views/PageManage/PageManage.vue

@ -1,7 +1,7 @@
<template> <template>
<div class="pa-3 white fill-height d-flex flex-column"> <div class="pa-3 white fill-height d-flex flex-column">
<page-search @getPageList="getPageList" /> <page-search @getPageList="getPageList" />
<page-date :lists="lists" /> <page-date :lists="lists" :pagination="pagination" @getPageList="getPageList" />
</div> </div>
</template> </template>
@ -20,6 +20,7 @@ export default {
data() { data() {
return { return {
lists: [], lists: [],
pagination: { current: 1, pageSize: 10 },
}; };
}, },
@ -29,16 +30,29 @@ export default {
methods: { methods: {
/** /**
* 页面配置添加 * 页面列表查询
* @param { String } competeTimeId 第几届信息的id * @param { String } pageNum 页码
* @param { String } pageSize 每页多少条
* @param { String } titleCode 模块
*/ */
async getPageList(titleCode) { async getPageList(condition) {
try { try {
const params = { param: { pageNum: 1, pageSize: 10, titleCode: titleCode || '' } }; const params = {
param: {
pageNum: (condition && condition.current) || 1,
pageSize: (condition && condition.pageSize) || 10,
titleCode: (condition && condition.titleCode) || '',
},
};
const res = await getPageList(params); const res = await getPageList(params);
const { code, msg, data } = res.data; const { code, msg, data } = res.data;
if (code === 200) { if (code === 200) {
this.lists = data.list; this.lists = data.list;
const paper = { ...this.pagination };
paper.current = data.pageNum;
paper.total = +data.total;
paper.pageSize = data.pageSize;
this.pagination = paper;
} else { } else {
throw msg || '获取失败'; throw msg || '获取失败';
} }

Loading…
Cancel
Save