内容管理

package-lock.json

@@ -5113,6 +5113,11 @@
         "domelementtype": "1"
       }
     },
+    "dompurify": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npm.taobao.org/dompurify/download/dompurify-2.2.6.tgz",
+      "integrity": "sha1-VJRdxcC0XOWuIocFd36OWdey7cQ="
+    },
     "domready": {
       "version": "1.0.8",
       "resolved": "https://registry.npm.taobao.org/domready/download/domready-1.0.8.tgz",
@@ -12508,6 +12513,14 @@
       "integrity": "sha1-KdTrSCdcf+FbkuH9XZX74qlmQ28=",
       "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": {
       "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",

package.json

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

src/components/Page/PageAdd.vue

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

src/components/Page/PageDate.vue

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

src/components/Page/PageEdit.vue

@@ -8,10 +8,11 @@
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
           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-cascader :options="titles" @change="onChange" placeholder="标题" />
         <!-- 内容 -->
         <a-form-item
           :label-col="formItemLayout.labelCol"
@@ -26,7 +27,7 @@
         </a-form-item>
 
         <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-form-item>
       </a-form>
@@ -57,33 +58,57 @@ export default {
       form: this.$form.createForm(this, { name: 'r-d-add' }),
       maxSize: 2048,
       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: {
     // 修改内容
     changeInput(value) {
-      console.log('value: ', 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) {
       e.preventDefault();
       this.form.validateFieldsAndScroll(async (err, values) => {
         if (!err) {
           try {
-            const { editItem } = this;
-            console.log('editItem', editItem);
-            const params = { param: values };
+            const { content, editItem, edtiTitleCode } = this;
+            const params = { param: { content, id: editItem.id, titleCode: edtiTitleCode || editItem.titleCode } };
             const res = await updatePage(params);
             const { data, msg, code } = res.data;
-            this.$emit('closeModal');
             if (code === 200) {
               this.$message.success('修改成功');
-              // TODO: 填到列表中
+              this.$emit('closeModal');
+              this.edtiTitleCode = '';
+              this.content = '';
             } else {
               throw msg;
             }

src/components/Page/PageSearch.vue

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

src/components/QuillEditor/QuillEditor.vue

@@ -3,7 +3,7 @@
     <quill-editor
       :options="editorOption"
       @blur="onEditorBlur($event)"
-      @change="onEditorChange(placeholder)"
+      @change="onEditorChange()"
       @focus="onEditorFocus($event)"
       ref="myTextEditor"
       v-model="content"
@@ -79,9 +79,9 @@ export default {
     onEditorFocus() {
       //获得焦点事件
     },
-    onEditorChange(placeholder) {
+    onEditorChange() {
       //内容改变事件
-      this.$emit('changeInput', placeholder, this.content);
+      this.$emit('changeInput', this.content);
     },
 
     // 富文本图片上传前

src/main.js

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

src/views/PageManage/PageManage.vue

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