research、application

src/api/index.js

@@ -56,6 +56,8 @@ export default {
   savePage: `iasf/sysColumnLongPage/save`,
   saveRedisPage: `iasf/sysColumnLongPage/saveTheCache`,
   updatePage: `iasf/sysColumnLongPage/update`,
+  listOfColumnTemplates: `iasf/template/listOfColumnTemplates`,
+  theTemplateIdGetsTheStyle: `iasf/template/theTemplateIdGetsTheStyle`,
   queryClassif: `iasf/content/classification/allTheQuery`,
   delClassif: `iasf/content/classification/delete`,
   checkClassif: `iasf/content/classification/checkForHeavy`,

src/components/modules/link.vue

@@ -114,13 +114,13 @@ export default {
       // 每次打开的时候处理参数
       if (open) {
         this.data.connectionType !== 2 && this.getArticle()
+        this.getOtherColumn()
       }
     }
   },
   mounted() {
     this.getList()
     this.getSite()
-    this.getOtherColumn()
   },
   methods: {
     // 栏目列表
@@ -130,7 +130,7 @@ export default {
         columnName: '',
         templateId: '',
         typeId	: '',
-        isSort: 0
+        isSort: 1
       }).then(({ data }) => {
         this.columns = data
         this.data.connectionType !== 2 && this.getArticle()
@@ -152,7 +152,7 @@ export default {
     getArticle() {
       // 站内链接/其他站点链接
       const id = this.data.connectionType === 1 ? this.data.columnId[this.data.columnId.length - 1] : this.data.otherColumnId[this.data.otherColumnId.length - 1]
-      this.$post(this.api.queryArticle, {
+      id && this.$post(this.api.queryArticle, {
         siteId: this.site.id,
         columnIds: [id],
         pageNum: 1,
@@ -174,12 +174,13 @@ export default {
     },
     // 获取指定站点的栏目列表
     getOtherColumn() {
+      console.log(55, this.data)
       this.$post(this.api.listWithTree, {
         siteId: this.data.site,
         columnName: '',
         templateId: '',
         typeId	: '',
-        isSort: 0
+        isSort: 1
       }).then(({ data }) => {
         this.otherColumns = data
       }).catch(err => {})

src/components/modules/module.vue

@@ -58,7 +58,7 @@
           <i class="el-icon-circle-plus-outline" @click="addRow"></i>
         </div>
       </template>
-      <el-form v-else-if="data.type === 'form'" ref="form" :model="data.form" :rules="rules" label-width="60px">
+      <el-form v-else-if="data.type === 'form' || data.type === 'forms'" ref="form" :model="data.form" :rules="rules" label-width="60px">
         <el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
           <el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入" maxlength="30"></el-input>
           <el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="300"></el-input>

src/const/column.js

@@ -99,6 +99,16 @@ export default {
       id: 7,
       path: 'newsProcurement',
       name: 'NEWS&EVENTS-PROCUREMENT'
+    },
+    {
+      id: 8,
+      path: 'research',
+      name: 'RESEARCH'
+    },
+    {
+      id: 9,
+      path: 'application',
+      name: 'APPLICATION'
     }
   ],
 }

src/const/modules.js

@@ -2526,4 +2526,956 @@ export default {
       ]
     },
   ],
+  research: [
+    {
+      type: 'introduce',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        }
+      ],
+      form: {
+        pic: '',
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        },
+        isEnable: 1
+      },
+      list: [
+        {
+          pic: require('@/assets/images/research/1.png'),
+          title: 'RESEARCH',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          isEnable: 1
+        }
+      ]
+    },
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '概述'
+        }
+      ],
+      form: {
+        title: 'Research Areas',
+        des: 'What we can do and beyound'
+      }
+    },
+    {
+      type: 'forms',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '描述'
+        }
+      ],
+      form: {
+        pic: '',
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        },
+        des: ''
+      },
+      list: [
+        {
+          pic: require('@/assets/images/research/res1.png'),
+          title: 'Physics',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: 'Research Field Description',
+        },
+        {
+          pic: require('@/assets/images/research/res2.png'),
+          title: 'Chemistry',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: 'Research Field Description',
+        },
+        {
+          pic: require('@/assets/images/research/res3.png'),
+          title: 'Biology',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: 'Research Field Description',
+        },
+        {
+          pic: require('@/assets/images/research/res4.png'),
+          title: 'Advanced Materials ',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: 'Research Field Description',
+        },
+        {
+          pic: require('@/assets/images/research/res5.png'),
+          title: 'Advanced Manufacturing',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: 'Research Field Description',
+        },
+      ]
+    },
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '概述'
+        }
+      ],
+      form: {
+        title: 'R&D Group',
+        des: 'What makes a ligh chinese bay chaser'
+      }
+    },
+    {
+      type: 'forms',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        }
+      ],
+      form: {
+        pic: '',
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        }
+      },
+      list: [
+        {
+          pic: require('@/assets/images/research/3.png'),
+          title: 'Accelerator',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/4.png'),
+          title: 'Physics',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/5.png'),
+          title: 'Mechanical Engineering',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/6.png'),
+          title: 'Digital Light-source',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/7.png'),
+          title: 'Beam Lines',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/8.png'),
+          title: 'End Stations',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+      ]
+    },
+    
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '概述'
+        }
+      ],
+      form: {
+        title: 'Publications',
+        des: 'What makes a ligh chinese bay chaser'
+      }
+    },
+    {
+      type: 'forms',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '描述'
+        }
+      ],
+      form: {
+        pic: '',
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        },
+        des: ''
+      },
+      list: [
+        {
+          pic: require('@/assets/images/research/12.png'),
+          title: '这里是标题一句话标题',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: 'Online single-shot characterization of ultrafast pulses from high-gain free-electron lasers, Li Zeng，Chao Feng，Duan Gu，Xiaofan Wang，Kaiqing Zhang，Bo Liu，Zhentang Zhao，Fundamental Research',
+        },
+        {
+          pic: require('@/assets/images/research/13.png'),
+          title: '这里是标题一句话标题',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: `产生超快水窗波段X射线的ESASE方案模拟
+          涂凌君 ，冯超 ，王晓凡 ， 赵振堂 ，
+          强激光与粒子束, 
+          2022, 34(3):031019
+          `,
+        },
+        {
+          pic: require('@/assets/images/research/14.png'),
+          title: '这里是标题一句话标题',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          des: `多层膜元件热应力分析方法、系统和终端设备，申请(专利)号：CN202111530134.0，
+          申请日：2021-12-14，申请公布号：CN114239355A，申请人：深圳综合粒子设施研究院，发明人：徐中民
+          `
+        },
+      ]
+    },
+  ],
+  application: [
+    {
+      type: 'introduce',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        }
+      ],
+      form: {
+        pic: '',
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        },
+        isEnable: 1
+      },
+      list: [
+        {
+          pic: require('@/assets/images/application/1.png'),
+          title: 'APPLICATION',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+          isEnable: 1
+        }
+      ]
+    },
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'textarea',
+          prop: 'subTitle',
+          label: '小标题'
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '描述'
+        }
+      ],
+      form: {
+        pic: require('@/assets/images/research/2.png'),
+        title: 'Why IASF?',
+        subTitle: `IASF started its journey to chase light, 
+        The one that can drive innovation, 
+        push the boundaries forward, and discover the unknown.`,
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        },
+        des: `Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao IASF`
+      }
+    },
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '概述'
+        }
+      ],
+      form: {
+        title: 'Applications',
+        des: 'What makes a ligh chinese bay chaser'
+      }
+    },
+    {
+      type: 'forms',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        }
+      ],
+      form: {
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        }
+      },
+      list: [
+        {
+          title: 'Astronomical Science',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'Physics',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'Quantum Materials',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'Energy Catalytic',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'Biomedicine',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'New Energy',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'Cancer Treatment',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'Atomic Science',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'Radioactive Waste Materials',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+        {
+          title: 'High-sensitivity Detection',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          },
+        },
+      ]
+    },
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '概述'
+        }
+      ],
+      form: {
+        title: 'R&D Group',
+        des: 'What makes a ligh chinese bay chaser'
+      }
+    },
+    {
+      type: 'forms',
+      forms: [
+        {
+          type: 'upload',
+          prop: 'pic',
+          label: '图片',
+          required: true
+        },
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'link',
+          prop: 'link',
+          label: '链接'
+        }
+      ],
+      form: {
+        pic: '',
+        title: '',
+        link: {
+          linkName: '无',
+          connectionType: 1,
+          columnId: [],
+          articleId: '',
+          linkAddress	: '',
+          site: '',
+          otherColumnId: [],
+          otherArticleId: '',
+          isOpen: 1
+        }
+      },
+      list: [
+        {
+          pic: require('@/assets/images/research/3.png'),
+          title: 'Accelerator',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/4.png'),
+          title: 'Physics',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/5.png'),
+          title: 'Mechanical Engineering',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/6.png'),
+          title: 'Digital Light-source',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/7.png'),
+          title: 'Beam Lines',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+        {
+          pic: require('@/assets/images/research/8.png'),
+          title: 'End Stations',
+          link: {
+            linkName: '无',
+            connectionType: 1,
+            columnId: [],
+            articleId: '',
+            linkAddress	: '',
+            site: '',
+            otherColumnId: [],
+            otherArticleId: '',
+            isOpen: 1
+          }
+        },
+      ]
+    },
+    {
+      type: 'form',
+      forms: [
+        {
+          type: 'input',
+          prop: 'title',
+          label: '标题',
+          required: true
+        },
+        {
+          type: 'textarea',
+          prop: 'des',
+          label: '概述'
+        }
+      ],
+      form: {
+        title: 'Research & Industry News',
+        des: 'What makes a ligh chinese bay chaser'
+      }
+    },
+    {
+      type: 'column',
+      form: {
+        site: '',
+        column: '',
+        articleNum: '',
+        columnTitle: 1,
+        columnTitleCustom: ''
+      }
+    },
+  ],
 }

src/mixins/page/index.js

@@ -2,6 +2,7 @@ import Module from '@/components/modules/module'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import ColumnConst from '@/const/column'
+import { Loading } from 'element-ui'
 export default {
   data() {
     return {
@@ -57,7 +58,8 @@ export default {
     toSet(i, listIndex) {
       this.curModule = i
       this.curData = JSON.parse(JSON.stringify(this.modules[i]))
-      if (this.curData.type === 'columns') {
+      const { type } = this.curData
+      if (type === 'columns' || type === 'forms') {
         this.curListIndex = listIndex
         this.curData.form = JSON.parse(JSON.stringify(this.curData.list[listIndex]))
       }
@@ -66,9 +68,10 @@ export default {
     // 模块设置提交
     moduleSubmited() {
       this.diaVisible = false
-      if (this.curData.type === 'columns') {
+      const { type } = this.curData
+      if (type === 'columns' || type === 'forms') {
         const { form } = this.curData
-        form.columnName = form[form.columnTitle === 2 ? 'columnTitleCustom' : 'columnName']
+        if (type === 'columns') form.columnName = form[form.columnTitle === 2 ? 'columnTitleCustom' : 'columnName']
         this.modules[this.curModule].list[this.curListIndex] = JSON.parse(JSON.stringify(form))
       } else {
         this.modules[this.curModule] = this.curData
@@ -92,13 +95,17 @@ export default {
     },
     // 预览
     preview() {
+      const load = Loading.service()
       this.$post(this.api.saveRedisPage, {
         columnId: this.columnId,
         json: this.handleJson()
       }).then(res => {
+        load.close()
         const item = ColumnConst.pageStyle.find(e => e.id == this.listStyleId)
-        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/${item ? item.path : 'home'}?id=${this.columnId}&preview=1`)
+        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/${item ? item.path : 'home'}?id=${this.columnId}&preview=1&siteId=${this.$route.query.siteId}`)
-      }).catch(err => {})
+      }).catch(err => {
+        load.close()
+      })
     },
     // 保存
     save(state) {

src/pages/article/add/editor.js

@@ -344,6 +344,7 @@ export default {
       // 设置默认字体
       ed.target.editorCommands.execCommand("fontName", false, "PingFang SC")
       ed.target.editorCommands.execCommand("fontSize", false, "19px")
+      top.document.querySelector('#articleTitle').focus() // 第一个字段聚焦
     })
   },
 }

src/pages/article/add/index.vue

@@ -29,6 +29,7 @@
       </el-form-item>
       <el-form-item prop="title" label="标题">
         <el-input
+          id="articleTitle"
           style="width: 940px"
           placeholder="请输入标题"
           v-model="form.title"
@@ -103,23 +104,27 @@
       <div class="item-line">
         <el-form-item prop="source" label="所属分类">
           <el-select style="width: 234px;" v-model="form.classificationId">
+            <template v-for="item in classifications">
               <el-option
-              v-for="item in classifications"
+                v-if="item.classificationName"
                 :key="item.id"
                 :label="item.classificationName"
                 :value="item.id">
               </el-option>
+            </template>
           </el-select>
           <el-button class="set-btn" type="primary" @click="setClass">设置</el-button>
         </el-form-item>
         <el-form-item prop="author" label="主题标签">
-          <el-select style="width: 234px;" v-model="form.lableId">
+          <el-select style="width: 234px;" v-model="form.lableId" multiple>
+            <template v-for="item in labels">
               <el-option
-              v-for="item in labels"
+                v-if="item.labelName"
                 :key="item.id"
                 :label="item.labelName"
                 :value="item.id">
               </el-option>
+            </template>
           </el-select>
           <el-button class="set-btn" type="primary" @click="setLabel">设置</el-button>
         </el-form-item>
@@ -275,7 +280,7 @@
           <template slot-scope="scope">
             <i v-if="scope.row.edit" class="el-icon-check edit" @click="submitClass(scope.row)"></i>
             <i v-else class="el-icon-edit edit" @click="editClass(scope.row)"></i>
-            <i class="el-icon-delete del" @click="delClass(scope.row)"></i>
+            <i class="el-icon-delete del" @click="delClass(scope.row, scope.$index)"></i>
           </template>
         </el-table-column>
       </el-table>
@@ -307,7 +312,7 @@
           <template slot-scope="scope">
             <i v-if="scope.row.edit" class="el-icon-check edit" @click="submitLabel(scope.row)"></i>
             <i v-else class="el-icon-edit edit" @click="editLabel(scope.row)"></i>
-            <i class="el-icon-delete del" @click="delLabel(scope.row)"></i>
+            <i class="el-icon-delete del" @click="delLabel(scope.row, scope.$index)"></i>
           </template>
         </el-table-column>
       </el-table>
@@ -513,6 +518,7 @@ export default {
       // 获取详情
       getData() {
         this.$post(`${this.api.findArticle}?id=${this.form.id}`).then(({ data }) => {
+          data.lableId = data.lableId.split(',').map(e => +e)
           this.form = data
           if (data.articleTemplate === 3 && data.connectionType !== 2 && data.linkAddress) this.links = data.linkAddress.split(',').map(e => +e)
           this.originalName = data.title
@@ -544,7 +550,8 @@ export default {
         this.$set(row, 'edit', 1)
       },
       // 删除所属分类
-      delClass(row) {
+      delClass(row, i) {
+        if (row.id) {
           this.$confirm('确定要删除吗？', '提示', {
             type: 'warning'
           }).then(() => {
@@ -553,9 +560,13 @@ export default {
               this.getClassification()
             }).catch(res => {})
           }).catch(() => {})
+        } else {
+          this.classifications.splice(i, 1)
+        }
       },
       // 提交所属分类
       submitClass(row) {
+        if (!row.classificationName) return util.errorMsg('请输入分类名称')
         this.$post(`${this.api.checkClassif}?classificationName=${row.classificationName}&siteId=${this.site.id}&classificationId=${row.id}`).then(res => {
           this.$post(this.api[row.id ? 'updateClassif' : 'saveClassif'], {
             classificationName: row.classificationName,
@@ -594,7 +605,8 @@ export default {
         this.$set(row, 'edit', 1)
       },
       // 删除标签
-      delLabel(row) {
+      delLabel(row, i) {
+        if (row.id) {
           this.$confirm('确定要删除吗？', '提示', {
             type: 'warning'
           }).then(() => {
@@ -603,9 +615,13 @@ export default {
               this.getLabel()
             }).catch(res => {})
           }).catch(() => {})
+        } else {
+          this.labels.splice(i, 1)
+        }
       },
       // 提交标签
       submitLabel(row) {
+        if (!row.labelName) return util.errorMsg('请输入主题名称')
         this.$post(`${this.api.checkLabel}?labelName=${row.labelName}&siteId=${this.site.id}&labelId=${row.id}`).then(res => {
           this.$post(this.api[row.id ? 'updateLabel' : 'saveLabel'], {
             labelName: row.labelName,
@@ -749,16 +765,25 @@ export default {
       // 附件上传成功
       uploadSuccessFile(res) {
         console.log("🚀 ~ file: index.vue ~ line 739 ~ handleRemove ~ e", res, this.fileList)
-        this.form.id && this.$post(this.api.saveContentFile, {
+        this.form.id ?
+          this.$post(this.api.saveContentFile, {
             contentId: this.form.id,
             editorId: this.userId,
             founderId: this.userId,
             id: '',
             fileName: res.original,
             filePath: res.url
-        }).then(res => {
+          }).then(({ data }) => {
-          // this.fileList.push()
+            this.fileList.push({
-        }).catch(res => {})
+              name: res.original,
+              url: res.url,
+              id: data
+            })
+          }).catch(res => {}) :
+          this.fileList.push({
+            name: res.original,
+            url: res.url
+          })
       },
       // 预览
       preview() {
@@ -784,7 +809,7 @@ export default {
       // 提交
       submit(isRelease, next) {
         if (this.submiting) return false
-        const { form } = this
+        const form = JSON.parse(JSON.stringify(this.form))
         if (!form.title) return util.errorMsg('请填写标题')
         if (this.nameRepeat) return util.errorMsg('该标题已重复!')
         if (!form.releaseTime && isRelease) return util.errorMsg('请选择发布日期')
@@ -804,6 +829,7 @@ export default {
         if (bannerImg) fileId.push(bannerImg.substr(bannerImg.lastIndexOf('/') + 1))
         if (file) fileId.push(file.substr(file.lastIndexOf('/') + 1))
         if (titleImg) fileId.push(titleImg.substr(titleImg.lastIndexOf('/') + 1))
+        form.lableId = form.lableId.join(',')
         // 更新附件的状态为发布
         fileId.map(e => {
           this.$post(this.api.updateFile, {
@@ -825,7 +851,18 @@ export default {
             this.submiting = false
           })
         } else {
-          this.$post(this.api.saveArticle, form).then(res => {
+          this.$post(this.api.saveArticle, form).then(({ data }) => {
+            // 新增文章完后需要把上传的附件添加到文章附件表
+            this.fileList.map(e => {
+              this.$post(this.api.saveContentFile, {
+                contentId: data,
+                editorId: this.userId,
+                founderId: this.userId,
+                id: '',
+                fileName: e.name,
+                filePath: e.url
+              }).then(res => {}).catch(err => {})
+            })
             util.successMsg('创建成功')
             next ? next() : this.$router.back()
           }).catch(err => {

src/pages/article/list/index.vue

@@ -194,7 +194,7 @@ export default {
           columnName: '',
           templateId: '',
           typeId	: '',
-          isSort: 0
+          isSort: 1
         }).then(({ data }) => {
           this.columns = data
           this.$nextTick(() => {
@@ -278,7 +278,7 @@ export default {
       },
       // 预览
       preview(row) {
-        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/article?id=` + row.id)
+        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/article?id=${row.id}&siteId=${this.$refs.column.getCurrentNode().siteId}`)
       },
       // 编辑
       edit(row) {

src/pages/column/add/index.vue

@@ -22,7 +22,7 @@
       </div>
       <div class="item-line">
         <el-form-item prop="typeId" label="栏目类型">
-          <el-select v-model="form.typeId">
+          <el-select v-model="form.typeId" @change="typeChange">
             <el-option
               v-for="item in types"
               :key="item.id"
@@ -72,11 +72,11 @@
           ></el-input>
         </el-form-item>
         <el-form-item prop="templateId" label="栏目模板">
-          <el-select v-model="form.templateId">
+          <el-select v-model="form.templateId" @change="getStyle">
             <el-option
               v-for="item in templates"
               :key="item.id"
-              :label="item.name"
+              :label="item.templateType"
               :value="item.id">
             </el-option>
           </el-select>
@@ -85,19 +85,19 @@
           <ul class="styles">
             <li v-for="(item, i) in listStyle" :key="i" @click="form.listStyleId = item.id">
               <div class="review">
-                <img :src="require('@/assets/images/list' + item.id + '.png')" alt="">
+                <!-- <img :src="require('@/assets/images/list' + item.id + '.png')" alt=""> -->
               </div>
-              <el-radio v-model="form.listStyleId" :label="item.id">{{ item.name }}</el-radio>
+              <el-radio v-model="form.listStyleId" :label="item.id">{{ item.style }}</el-radio>
             </li>
           </ul>
         </el-form-item>
-        <el-form-item prop="detailStyle" label="详情样式">
+        <el-form-item prop="detailStyleId" label="详情样式">
           <ul class="styles">
-            <li v-for="(item, i) in detailStyle" :key="i" @click="form.detailStyle = item.id">
+            <li v-for="(item, i) in detailStyleId" :key="i" @click="form.detailStyleId = item.id">
               <div class="review">
-                <img :src="require('@/assets/images/article' + item.id + '.png')" alt="">
+                <!-- <img :src="require('@/assets/images/article' + item.id + '.png')" alt=""> -->
               </div>
-              <el-radio v-model="form.detailStyle" :label="item.id">{{ item.name }}</el-radio>
+              <el-radio v-model="form.detailStyleId" :label="item.id">{{ item.style }}</el-radio>
             </li>
           </ul>
         </el-form-item>
@@ -233,10 +233,10 @@ export default {
           site: this.$store.state.content.site,
           isEdit: this.$route.query.type === 'edit',
           nameRepeat: false,
-          listStyle: ColumnConst.listStyle,
+          listStyle: [],
-          detailStyle: ColumnConst.detailStyle,
+          detailStyleId: [],
           types: ColumnConst.types,
-          templates: ColumnConst.templates,
+          templates: [],
           pageStyle: ColumnConst.pageStyle,
           sites: [],
           columns: [],
@@ -266,7 +266,7 @@ export default {
             subtitle: '',
             templateId: 1,
             listStyleId: 1,
-            detailStyle: 1,
+            detailStyleId: 1,
             connectionType: 1,
             linkAddress	: '',
             showWithDetails: 0,
@@ -291,7 +291,7 @@ export default {
             listStyleId: [
               { required: true, message: '请选择栏目模板', trigger: 'change' }
             ],
-            detailStyle: [
+            detailStyleId: [
               { required: true, message: '请选择详情样式', trigger: 'change' }
             ],
             connectionType: [
@@ -334,6 +334,7 @@ export default {
       ])
       this.getList()
       this.getSite()
+      this.getTemplate()
     },
     watch: {
       // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
@@ -373,7 +374,7 @@ export default {
           columnName: '',
           templateId: '',
           typeId	: '',
-          isSort: 0
+          isSort: 1
         }).then(({ data }) => {
           this.columns = data
           if (this.isEdit) {
@@ -395,9 +396,11 @@ export default {
       // 文章列表
       getArticle() {
         // 站内链接/其他站点链接
-        const id = this.form.connectionType === 1 ? this.links[this.links.length - 1] : this.otherLink[this.otherLink.length - 1]
+        const inner = this.form.connectionType === 1
+        const id = inner ? this.links[this.links.length - 1] : this.otherLink[this.otherLink.length - 1]
+        this[inner ? 'article' : 'otherArticle'] = ''
         this.$post(this.api.queryArticle, {
-          siteId: this.site.id,
+          siteId: inner ? this.site.id : this.form.siteSelection,
           columnIds: [id],
           pageNum: 1,
           pageSize: 1000,
@@ -410,15 +413,16 @@ export default {
       getData() {
         this.$post(`${this.api.findColumn}?id=${this.form.id}`).then(({ data }) => {
           this.form = data
+          if (data.typeId === 1 || data.typeId === 4) this.getStyle(0)
           this.originTypeId = data.typeId
           if (data.typeId === 2) {
             if (data.linkAddress) {
               const columnArticle = data.linkAddress.split('-')
               const column = columnArticle[0].split(',').map(e => +e)
-              const article = columnArticle[1] || '' // 获取文章id（文章id是附在linkAddress最后面的id）
+              const article = columnArticle[1] || '' // 获取文章id（文章id是附在linkAddress最后面的-后面的数字）
               // 获取文章
               this.$post(this.api.queryArticle, {
-                siteId: this.site.id,
+                siteId: data.connectionType === 1 ? this.site.id : data.siteSelection,
                 columnIds: [column[column.length - 1]], // 截取走最后面的文章id，最后一个id就是栏目id
                 pageNum: 1,
                 pageSize: 1000,
@@ -447,6 +451,32 @@ export default {
           this.getOtherColumn()
         }).catch(err => {})
       },
+      // 栏目类型切换回调
+      typeChange(val) {
+        if (val === 1 || val === 4) {
+          this.form.templateId = 1
+          
+          this.getStyle()
+        }
+      },
+      // 获取栏目模板
+      getTemplate() {
+        this.$post(this.api.listOfColumnTemplates).then(({ data }) => {
+          this.templates = data
+          this.isEdit || this.getStyle()
+        }).catch(err => {})
+      },
+      // 根据模板id获取样式
+      getStyle(set = 1) {
+        this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => {
+          this.listStyle = data.listingTemplateTypes
+          this.detailStyleId = data.detailsTypeOfTheTemplate
+          if (set) {
+            this.form.listStyleId = this.listStyle[0].id
+            this.form.detailStyleId = this.detailStyleId[0].id
+          }
+        }).catch(err => {})
+      },
       // 获取站点列表
       getSite() {
         this.$post(this.api.site, {
@@ -464,7 +494,7 @@ export default {
           columnName: '',
           templateId: '',
           typeId	: '',
-          isSort: 0
+          isSort: 1
         }).then(({ data }) => {
           this.otherColumns = data
         }).catch(err => {})
@@ -714,6 +744,7 @@ $upload-lg-height: 102px;
 }
 .styles {
   display: inline-flex;
+  flex-wrap: wrap;
   li {
     width: 170px;
     margin-right: 20px;

src/pages/column/list/index.vue

@@ -31,13 +31,9 @@
           {{ types.find(e => e.id == scope.row.typeId) && types.find(e => e.id == scope.row.typeId).name }}
         </template>
       </el-table-column>
-      <el-table-column v-if="settings[2].show" prop="templateId" label="栏目模板" min-width="100"></el-table-column>
+      <el-table-column v-if="settings[2].show" prop="templateName" label="栏目模板" min-width="100"></el-table-column>
-      <el-table-column v-if="settings[3].show" prop="listStyleName" label="列表/长页样式" min-width="100"></el-table-column>
+      <el-table-column v-if="settings[3].show" prop="listStyle" label="列表/长页样式" min-width="100"></el-table-column>
-      <el-table-column v-if="settings[4].show" prop="detailStyle" label="详情样式" min-width="100">
+      <el-table-column v-if="settings[4].show" prop="detailStyle" label="详情样式" min-width="100"></el-table-column>
-        <template slot-scope="scope">
-          {{ detailStyle.find(e => e.id == scope.row.detailStyle) && detailStyle.find(e => e.id == scope.row.detailStyle).name }}
-        </template>
-      </el-table-column>
       <el-table-column v-if="settings[5].show" prop="menuVisible" label="导航菜单" min-width="100">
         <template slot-scope="scope">
           <el-switch
@@ -54,7 +50,7 @@
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="text" @click="edit(scope.row, 'add')">新增下级</el-button>
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text" @click="edit(scope.row, 'edit')">编辑</el-button>
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text" @click="del(scope.row)">删除</el-button>
-          <el-button type="text" @click="preview(scope.row)">预览</el-button>
+          <el-button v-if="scope.row.typeId != 2" type="text" @click="preview(scope.row)">预览</el-button>
           <el-button v-if="scope.row.typeId == 3" class="page-set" type="primary" size="mini" @click="page(scope.row)">页面设置</el-button>
         </template>
       </el-table-column>
@@ -140,10 +136,10 @@ export default {
           siteId: this.$store.state.content.site.id,
           siteName: this.$store.state.content.site.siteName,
           types: ColumnConst.types,
-          templates: ColumnConst.templates,
+          templates: [],
-          listStyle: ColumnConst.listStyle,
+          listStyle: [],
           pageStyle: ColumnConst.pageStyle,
-          detailStyle: ColumnConst.detailStyle,
+          detailStyle: [],
           keyword: '',
           searchTimer: null,
           list: [],
@@ -235,19 +231,32 @@ export default {
           typeId	: '',
           isSort: 1
         }).then(({ data }) => {
-          this.handleList(data)
           this.list = data
           this.listLoading = false
         }).catch(err => {
           this.listLoading = false
         })
       },
+      // 根据模板id获取样式
+      getStyle() {
+        this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => {
+          this.listStyle = data.listingTemplateTypes
+          this.detailStyle = data.detailsTypeOfTheTemplate
+        }).catch(err => {})
+      },
       // 递归处理列表
       handleList(data) {
         data.map(e => {
           // 获取列表/长页样式名称
-          const item = this[(e.typeId === 1 || e.typeId === 4) ? 'listStyle' : 'pageStyle'].find(n => n.id == e.listStyleId)
+          // const item = this[(e.typeId === 1 || e.typeId === 4) ? 'listStyle' : 'pageStyle'].find(n => n.id == e.listStyleId)
-          e.listStyleName = item.name || '--'
+          // e.listStyleName = item.name || '--'
+          this.$set(e, 'templateName', '--')
+          if (e.typeId === 1 || e.typeId === 4) {
+            const item = this.templates.find(n => n.id === e.templateId)
+            if (item) e.templateName = item.templateType
+          } else if (e.typeId === 3) {
+            e.templateName = '长页模板'
+          }
           this.handleList(e.children)
         })
       },
@@ -283,13 +292,18 @@ export default {
       },
       // 预览
       preview(row) {
-        const item = ColumnConst.pageStyle.find(e => e.id == row.listStyleId)
+        let path = 'column'
-        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/${item ? item.path : 'home'}?id=${row.id}`)
+        // 常规/子级优先栏目，则跳转到column；长页则跳转到对应的长页模板
+        if (row.typeId === 3) {
+          const item = this.pageStyle.find(e => e.id == row.listStyleId)
+          if (item) path = item.path
+        }
+        window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/${path}?id=${row.id}&siteId=${row.siteId}`)
       },
       // 页面管理
       page(row) {
-        const item = ColumnConst.pageStyle.find(e => e.id == row.listStyleId)
+        const item = this.pageStyle.find(e => e.id == row.listStyleId)
-        this.$router.push(`${item ? item.path : 'home'}?id=${row.id}&listStyleId=${row.listStyleId}`)
+        this.$router.push(`${item ? item.path : 'home'}?id=${row.id}&listStyleId=${row.listStyleId}&siteId=${row.siteId}`)
       },
       // 批量删除
       batchDel() {

src/pages/column/page/application.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <p class="page-name">页面设置/APPLICATION</p>
+      <div>
+        <el-button type="primary" @click="preview">预览</el-button>
+        <el-button @click="save(0)">保存为草稿</el-button>
+        <el-button type="primary" @click="save(1)">发布</el-button>
+        <el-button @click="$router.back()">放弃编辑</el-button>
+      </div>
+    </div>
+
+    <div class="modules">
+      <div class="relative">
+        <el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+          <template v-for="(item, i) in modules[0].list">
+            <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+              <img width="100%" height="100%" :src="item.pic" alt="">
+            </el-carousel-item>
+          </template>
+        </el-carousel>
+        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+      </div>
+    
+      <div class="block history gray">
+        <div class="inner c-wrap">
+          <h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+          <div class="texts">
+            <div class="left">
+              <h2>{{ modules[1].form.subTitle }}</h2>
+              <div class="line"></div>
+              <div class="des">{{ modules[1].form.des }}</div>
+            </div>
+            <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+          </div>
+          <div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div>
+        </div>
+      </div>
+      
+      <div class="block">
+        <div class="inner" style="width: 1558px">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[2].form.title }}</h2>
+            <p class="intro">{{ modules[2].form.des }}</p>
+            <div class="cover" @click="toSet(2)">点击更换标题与描述</div>
+          </div>
+          <ul class="app">
+            <li v-for="(item, i) in modules[3].list" :key="i">
+              <img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt="">
+              <img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt="">
+              <p class="text">{{ item.title }}</p>
+              <div class="cover" @click="toSet(3, i)">点击更标题与链接</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="block gray">
+        <div class="inner">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[4].form.title }}</h2>
+            <p class="intro">{{ modules[4].form.des }}</p>
+            <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
+          </div>
+          <ul class="group">
+            <li v-for="(item, i) in modules[5].list" :key="i">
+              <img :src="item.pic" alt="">
+              <p class="text">{{ item.title }}</p>
+              <div class="cover" @click="toSet(5, i)">点击更改图片、标题与链接</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="block news-block">
+        <div class="inner">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[6].form.title }}</h2>
+            <p class="intro">{{ modules[6].form.des }}</p>
+            <div class="cover" @click="toSet(6)">点击更换标题与描述</div>
+          </div>
+          <ul class="news">
+            <li>
+              <img src="@/assets/images/channel1.png" alt="">
+              <div class="texts">
+                <h6>2022 New Year Message from President Sun Dongbai</h6>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <span class="meta">2022.08.12</span>
+              </div>
+            </li>
+            <li>
+              <img src="@/assets/images/channel1.png" alt="">
+              <div class="texts">
+                <h6>2022 New Year Message from President Sun Dongbai</h6>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <span class="meta">2022.08.12</span>
+              </div>
+            </li>
+            <li>
+              <img src="@/assets/images/channel1.png" alt="">
+              <div class="texts">
+                <h6>2022 New Year Message from President Sun Dongbai</h6>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <span class="meta">2022.08.12</span>
+              </div>
+            </li>
+            <li>
+              <img src="@/assets/images/channel1.png" alt="">
+              <div class="texts">
+                <h6>2022 New Year Message from President Sun Dongbai</h6>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <span class="meta">2022.08.12</span>
+              </div>
+            </li>
+            <li>
+              <img src="@/assets/images/channel1.png" alt="">
+              <div class="texts">
+                <h6>2022 New Year Message from President Sun Dongbai</h6>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <span class="meta">2022.08.12</span>
+              </div>
+            </li>
+            <li>
+              <img src="@/assets/images/channel1.png" alt="">
+              <div class="texts">
+                <h6>2022 New Year Message from President Sun Dongbai</h6>
+                <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+                <span class="meta">2022.08.12</span>
+              </div>
+            </li>
+            <div class="cover" @click="toSet(7)">点击更换标题与描述</div>
+          </ul>
+        </div>
+      </div>
+    </div>
+    
+    <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Modules from '@/const/modules'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      modules: Modules.application
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.history {
+  h2 {
+    font-size: 30px;
+    color: #333;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 82px 57px 30px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+  }
+  .left {
+    width: 695px;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 22px;
+    color: #181818;
+    line-height: 31px;
+  }
+  .bg {
+    margin: -122px 0 0 0;
+  }
+}
+.app {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 368px;
+    height: 252px;
+    margin: 0 14px 14px 0;
+    &:first-child {
+      width: 750px;
+    }
+    &:nth-child(3), &:nth-child(7), &:nth-child(10) {
+      margin-right: 0;
+    }
+    &:nth-child(9) {
+      width: 563px;
+    }
+    &:nth-child(10) {
+      width: 555px;
+    }
+  }
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .icon {
+    position: relative;
+  }
+  .text {
+    position: relative;
+    margin-top: 20px;
+    font-size: 32px;
+    color: #fff;
+  }
+}
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: 448px;
+    margin: 0 28px 39px 0;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  img {
+    width: 100%;
+    height: 353px;
+  }
+  .text {
+    font-size: 30px;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
+    line-height: 143px;
+    color: #272727;
+    text-align: center;
+    background-color: #F5F5F5;
+  }
+}
+.news-block {
+  background: url(../../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+}
+.news {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    display: inline-flex;
+    width: 686px;
+    padding: 34px;
+    margin-bottom: 28px;
+    background-color: #fff;
+    &:nth-child(odd) {
+      margin-right: 28px;
+    }
+  }
+  img {
+    width: 237px;
+    height: 167px;
+  }
+  .texts {
+    margin-left: 34px;
+  }
+  h6 {
+    font-size: 18px;
+    color: #0648A8;
+  }
+  .des {
+    margin: 14px 0;
+    font-size: 16px;
+    color: #333;
+    line-height: 22px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #999;
+  }
+}
+</style>

src/pages/column/page/research.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <p class="page-name">页面设置/RESEARCH</p>
+      <div>
+        <el-button type="primary" @click="preview">预览</el-button>
+        <el-button @click="save(0)">保存为草稿</el-button>
+        <el-button type="primary" @click="save(1)">发布</el-button>
+        <el-button @click="$router.back()">放弃编辑</el-button>
+      </div>
+    </div>
+
+    <div class="modules">
+      <div class="relative">
+        <el-carousel height="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+          <template v-for="(item, i) in modules[0].list">
+            <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+              <img width="100%" height="100%" :src="item.pic" alt="">
+            </el-carousel-item>
+          </template>
+        </el-carousel>
+        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+      </div>
+
+      <div class="block">
+        <div class="c-wrap">
+          <h2 class="b-title">{{ modules[1].form.title }}</h2>
+          <p class="intro">{{ modules[1].form.des }}</p>
+          <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
+        </div>
+        <ul class="area">
+          <template v-for="(item, i) in modules[2].list">
+            <li :key="i">
+              <img :src="item.pic" alt="" class="pic">
+              <div class="texts">
+                <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
+                <h6>{{ item.title }}</h6>
+                <p class="des">{{ item.des }}</p>
+              </div>
+              <div class="cover" @click="toSet(2, i)">点击更改图片、标题概述与链接</div>
+            </li>
+          </template>
+        </ul>
+      </div>
+
+      <div class="block">
+        <div class="inner">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[3].form.title }}</h2>
+            <p class="intro">{{ modules[3].form.des }}</p>
+            <div class="cover" @click="toSet(3)">点击更换标题与描述</div>
+          </div>
+          <ul class="group">
+            <li v-for="(item, i) in modules[4].list" :key="i">
+              <img :src="item.pic" alt="">
+              <p class="text">{{ item.title }}</p>
+              <div class="cover" @click="toSet(4, i)">点击更改图片、标题与链接</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="block">
+        <div class="inner" style="width: 1558px">
+          <div class="c-wrap">
+            <h2 class="b-title">{{ modules[5].form.title }}</h2>
+            <p class="intro">{{ modules[5].form.des }}</p>
+            <div class="cover" @click="toSet(5)">点击更换标题与描述</div>
+          </div>
+          <ul class="news">
+            <li v-for="(item, i) in modules[6].list" :key="i">
+              <img :src="item.pic" alt="">
+              <div class="texts">
+                <h6>{{ item.title }}</h6>
+                <div class="des">{{ item.des }}</div>
+              </div>
+              <div class="cover" @click="toSet(6, i)">点击更改图片、标题概述与链接</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Modules from '@/const/modules'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      modules: Modules.research
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/page/page.scss";
+.area {
+  display: flex;
+  li {
+    position: relative;
+    width: 19%;
+    height: 653px;
+    color: #fff;
+    background: url(../../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
+    &:nth-child(2) {
+      width: 21%;
+      margin-top: 70px;
+      .texts {
+        background: #2B1B1C;
+      }
+    }
+    &:nth-child(3) {
+      .texts {
+        background: #009C91;
+      }
+    }
+    &:nth-child(4) {
+      margin-top: 70px;
+      .texts {
+        background: #005388;
+      }
+    }
+    &:nth-child(5) {
+      width: 22%;
+      .texts {
+        background: #9A4E10;
+      }
+    }
+  }
+  .pic {
+    width: 100%;
+    height: 443px;
+  }
+  .texts {
+    width: 100%;
+    height: 210px;
+    padding: 20px 40px;
+    background: #08577B;
+  }
+  h6 {
+    font-size: 30px;
+    white-space: nowrap;
+  }
+  .des {
+    font-size: 22px;
+    color: rgba(255,255,255,0.55);
+  }
+}
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: 448px;
+    margin: 0 28px 39px 0;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  img {
+    width: 100%;
+    height: 353px;
+  }
+  .text {
+    font-size: 30px;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
+    line-height: 143px;
+    color: #272727;
+    text-align: center;
+    background-color: #F5F5F5;
+  }
+}
+.news {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: 448px;
+    padding: 11px;
+    margin-right: 28px;
+    color: #333;
+    background-color: #fff;
+    box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
+    border-radius: 10px;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:hover {
+      color: #fff;
+      background-color: #0252D9;
+    }
+  }
+  img {
+    width: 427px;
+    height: 481px;
+  }
+  .texts {
+    padding: 0 18px 50px;
+  }
+  h6 {
+    margin: 35px 0 12px;
+    font-size: 24px;
+    line-height: 33px;
+  }
+  .des {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+</style>

src/router/modules/column.js

@@ -66,6 +66,18 @@ export default {
       path: `newsProcurement`,
       component: () => import('@/pages/column/page/newsProcurement'),
       meta: { title: 'NEWS&Events-procurement' }
+    },
+    {
+      name: `${pre}research`,
+      path: `research`,
+      component: () => import('@/pages/column/page/research'),
+      meta: { title: 'RESEARCH' }
+    },
+    {
+      name: `${pre}application`,
+      path: `application`,
+      component: () => import('@/pages/column/page/application'),
+      meta: { title: 'APPLICATION' }
     }
   ]
 }

vue.config.js

@@ -14,6 +14,6 @@ module.exports = {
   outputDir: Setting.outputDir,
   assetsDir: Setting.assetsDir,
   devServer: {
-    port: 8096 // 固定端口
+    port: 8088 // 固定端口
   }
 }