sfel概况两个长页完成，其他bug修复

src/components/modules/history.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 内容 -->
   <div>
-    <el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
+    <el-dialog title="编辑内容" :visible.sync="visible" width="70%" custom-class="module" :close-on-click-modal="false" :before-close="close">
-      <el-table class="module-table" :data="data.list" header-align="center" row-key="id">
+      <el-table class="module-table" :data="list" header-align="center" row-key="id">
         <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
         <el-table-column label="图片" min-width="140" align="center">
           <template slot-scope="scope">
@@ -30,50 +30,36 @@
                 :active-value="1"
                 :inactive-value="0">
               </el-switch>
-              <i v-if="data.type === 'introduce'" class="el-icon-edit-outline del" @click="editIntro(scope.row, scope.$index)"></i>
+              <i class="el-icon-edit-outline del" @click="editHistory(scope.row, scope.$index)"></i>
               <i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i>
             </div>
           </template>
         </el-table-column>
       </el-table>
+      <div class="plus">
+        <i class="el-icon-circle-plus-outline" @click="editHistory(data.originForm, -1)"></i>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="$emit('update:visible', false)">取消</el-button>
-        <el-button type="primary" @click="contentSubmit">确定</el-button>
+        <el-button type="primary" @click="historySubmit">确定</el-button>
       </span>
     </el-dialog>
     
-    <Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
+    <Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" />
-
-    <!-- 剪裁组件弹窗 -->
-    <el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false">
-      <Cropper
-        ref="cropper"
-        :img-file.sync="file"
-        :is-upload="isUpload"
-        :fixed="fixed"
-        :fixedNumber.sync="fixedNumber"
-        @upload="customUpload" />
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import Link from '@/components/modules/link'
 import Setting from '@/setting'
 import Util from '@/libs/util'
-import Cropper from '@/components/img-upload/Cropper'
+import Content from '@/components/modules/content'
-import Axios from 'axios'
 export default {
-  props: ['data', 'visible'],
+  props: ['data', 'visible', 'list'],
   components: {
-    Link,
+    Content
-    Cropper
   },
   data() {
     return {
-      headers: {
-        token: Util.local.get(Setting.tokenKey)
-      },
       rules: {},
       linkVisible: false,
       linkForm: {},
@@ -83,176 +69,45 @@ export default {
       file: {}, // 当前被选择的图片文件
       fileId: '',
       curForm: {},
-      fixed: false,
+      contentVisible: false,
-      fixedNumber: [0.88, 1]
+      curModule: 0,
+      curData: {},
     };
   },
-  watch: {
-    visible(open) {
-      // 每次打开的时候处理参数
-      open && this.handleForm()
-    }
-  },
   mounted() {
-    this.handleForm()
+    
   },
   methods: {
-    // 处理form表单参数
+    // 添加行
-    handleForm() {
+    addRow() {
-      const { forms, type } = this.data
+      this.editHistory(this.data.originForm, -1)
-      // 这两张类型的模块才需要处理参数
+    },
-      if (type === 'form' || type === 'introduce') {
+    // 编辑内容
-        forms.map(e => {
+    editHistory(row, i = 0) {
-          if (e.type === 'upload') {
+      this.data.form = JSON.parse(JSON.stringify(row))
-            if (e.fixedNumber) {
+      this.curModule = i
-              this.fixed = true
+      this.contentVisible = true
-              this.fixedNumber = e.fixedNumber
-            } else {
-              this.fixed = false
-            }
-          }
-          if (e.required) {
-            this.rules[e.prop] = [
-              {
-                required: true,
-                message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`,
-                trigger: e.type === 'input' ? 'blur' : 'change'
-              }
-            ]
-          }
-        })
-      }
     },
     close() {
       this.$emit('update:visible', false)
     },
-    // 图片裁剪上传事件
+    // 模块设置提交
-    customUpload(data) {
+    contentSubmit() {
-      const formData = new FormData()
+      this.contentVisible = false
-      formData.append('file', data, this.file.name)
+      const { form } = this.data
-      this.imgUpload(formData)
+      if (this.curModule === -1) {
-    },
+        this.list.push(JSON.parse(JSON.stringify(this.data.form)))
-    // 压缩图片
-    compress(img) {
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')
-      // let initSize = img.src.length;
-      const width = img.width
-      const height = img.height
-      canvas.width = width
-      canvas.height = height
-      // 铺底色
-      ctx.fillStyle = '#fff'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-      ctx.drawImage(img, 0, 0, width, height)
-      // 进行压缩
-      const ndata = canvas.toDataURL('image/jpeg', 0.8)
-      return ndata
-    },
-    // base64转成bolb对象
-    dataURItoBlob(base64Data) {
-      let byteString
-      if (base64Data.split(',')[0].indexOf('base64') >= 0) {
-        byteString = atob(base64Data.split(',')[1])
-      } else {
-        byteString = unescape(base64Data.split(',')[1])
-      }
-      const mimeString = base64Data
-        .split(',')[0]
-        .split(':')[1]
-        .split(';')[0]
-      const ia = new Uint8Array(byteString.length)
-      for (let i = 0; i < byteString.length; i++) {
-        ia[i] = byteString.charCodeAt(i)
-      }
-      return new Blob([ia], {
-        type: mimeString
-      })
-    },
-    // 图片上传到服务器
-    imgUpload(formData) {
-      this.isUpload = true
-      Axios({
-        method: 'post',
-        url: this.api.upload,
-        data: formData,
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          token: Util.local.get(Setting.tokenKey)
-        },
-      }).then(({ data }) => {
-        this.$set(this.curForm, 'pic', data.url)
-      }).catch(res => {})
-      this.$refs.cropper.isDisabled = false
-      this.isUpload = false
-      this.cropperModel = false
-    },
-    // 图片改变钩子
-    changeFile(file, form) {
-      const { size, name } = file
-      const ext = name.substring(name.lastIndexOf('.') + 1)
-      if (!Util.isImg(ext)) {
-        this.$message.error('请上传图片！')
-        return false
-      }
-      if (size / 1024 / 1024 > 5) {
-        this.$message.error('请上传5M以内的图片！')
-        return false
-      }
-      this.file = file
-      this.curForm = form
-      this.cropperModel = true
-      this.$nextTick(() => {
-        this.$refs.cropper.updateImg({
-          url: window.URL.createObjectURL(file.raw),
-          size: file.size
-        })
-      })
-    },
-    // 上传成功
-    uploadSuccess(res, row) {
-      this.$set(row, 'pic', res.url)
-    },
-    // 展示链接设置
-    toLink(row, i = 0) {
-      this.linkVisible = true
-      this.curIndex = i
-      this.linkForm = row.link
-    },
-    // 链接设置提交
-    linkSubmit() {
-      const el = this.$refs.link
-      const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link
-      let name
-      // 站内链接
-      if (data.connectionType === 1) {
-        if (!data.columnId.length) return Util.errorMsg('请选择站内链接')
-        // 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题
-        if (data.articleId) {
-          const item = el.articles.find(e => e.id == data.articleId)
-          name = item ? item.title : ''
-        } else {
-          name = el.$refs.column.getCheckedNodes()[0].pathLabels.join('/')
-        }
-      } else if (data.connectionType === 3) { // 其他站点链接
-        if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目')
-        // 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题
-        if (data.otherArticleId) {
-          const item = el.articles.find(e => e.id == data.otherArticleId)
-          name = item ? item.title : ''
       } else {
-          name = el.$refs.otherColumn.getCheckedNodes()[0].pathLabels.join('/')
+        const list = this.list[this.curModule]
+        for (const i in form) {
+          this.$set(list, i, form[i])
         }
-      } else { // 站外链接
-        if (!data.linkAddress) return Util.errorMsg('请输入站外链接')
-        name = data.linkAddress
       }
-      data.linkName = name
+      this.data.form = JSON.parse(JSON.stringify(this.data.originForm))
-      this.linkVisible = false
     },
     // 模块设置提交
-    contentSubmit() {
+    historySubmit() {
-      this.$emit('contentSubmit')
+      this.$emit('historySubmit')
     },
   }
 };

src/components/modules/module.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog title="模块管理" :visible.sync="visible" width="700px" custom-class="module" :close-on-click-modal="false" :before-close="close">
+    <el-dialog title="模块管理" :visible.sync="visible" width="700px" custom-class="module" append-to-body :close-on-click-modal="false" :before-close="close">
       <template v-if="data.type === 'banner' || data.type === 'introduce'">
         <el-table class="module-table" :data="data.list" header-align="center" row-key="id">
           <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
@@ -88,6 +88,15 @@
             :action="api.upload">
               <el-button>上传视频</el-button>
           </el-upload>
+          <!-- 图片视频都可上传 -->
+          <el-upload
+            v-if="item.type === 'media'"
+            :on-success="res => uploadSuccess(res, data.form, item)"
+            :file-list="fileList"
+            :headers="headers"
+            :action="api.upload">
+              <el-button>上传资源</el-button>
+          </el-upload>
           <div v-if="item.type === 'link'" class="flex">
             <el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
             <el-button @click="toLink(data.form)">设置链接</el-button>
@@ -137,7 +146,9 @@
         <el-table class="module-table" :data="data.list" header-align="center" row-key="id">
           <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
           <el-table-column prop="title" label="标题" min-width="140" align="center">
-            <el-input v-model="data.form.title" placeholder="请输入" maxlength="100"></el-input>
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.title" placeholder="请输入" maxlength="100"></el-input>
+            </template>
           </el-table-column>
           <el-table-column label="操作" width="100" align="center">
             <template slot-scope="scope">
@@ -147,7 +158,7 @@
                   :active-value="1"
                   :inactive-value="0">
                 </el-switch>
-                <i class="el-icon-edit-outline del" @click="editIntro(scope.row, scope.$index)"></i>
+                <i class="el-icon-edit-outline del" @click="editHistory(scope.row, scope.$index)"></i>
                 <i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i>
               </div>
             </template>
@@ -164,7 +175,7 @@
     </el-dialog>
     <Link ref="link" :data.sync="linkForm" :visible.sync="linkVisible" @linkSubmit="linkSubmit" />
     <Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" />
-    <History :data.sync="data" :visible.sync="historyVisible" @historySubmit="historySubmit" />
+    <History :data.sync="data" :list.sync="historyData" :form.sync="data.form" :visible.sync="historyVisible" @historySubmit="historySubmit" />
   </div>
 </template>
 
@@ -236,6 +247,7 @@ export default {
       curData: {},
 
       historyVisible: false,
+      historyData: []
     };
   },
   watch: {
@@ -314,8 +326,11 @@ export default {
     },
     // 添加行
     addRow() {
-      if (this.data.type === 'banner') {
+      const { type } = this.data
+      if (type === 'banner') {
         this.data.list.push(JSON.parse(JSON.stringify(this.data.originForm)))
+      } else if (type === 'history') {
+        this.data.list.push(JSON.parse(JSON.stringify(this.data.historyForm)))
       } else {
         this.editIntro(this.data.originForm, -1)
       }
@@ -326,6 +341,7 @@ export default {
     // 上传成功
     uploadSuccess(res, row, item = {}) {
       this.$set(row, item.type === 'video' ? 'video' : 'pic', res.url)
+      item.type === 'media' && this.$set(row, 'mediaType', res.title.substr(res.title.lastIndexOf('.') + 1))
     },
     // 删除行（通用）
     delRow(list, i) {
@@ -405,9 +421,15 @@ export default {
       data.linkName = name
       this.linkVisible = false
     },
+    // 编辑history
+    editHistory(row, i = 0) {
+      this.historyData = row.list
+      this.curModule = i
+      this.historyVisible = true
+    },
     // history设置提交
     historySubmit() {
-      
+      this.historyVisible = false
     },
     // 模块设置提交
     moduleSubmit() {

src/const/modules.js

@@ -4205,9 +4205,9 @@ export default {
       type: 'form',
       forms: [
         {
-          type: 'upload',
+          type: 'media',
           prop: 'pic',
-          label: '图片',
+          label: '资源',
           required: true
         },
         {
@@ -4988,12 +4988,38 @@ export default {
     },
     {
       type: 'history',
-      form: {
+      historyForm: {
-        title: '2022',
+        title: '',
+        isEnable: 1,
+        list: []
       },
-      list: [
+      list: [],
+      forms: [
         {
-          pic: 'http://10.10.11.7/images/sfel/1.png',
+          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: '无',
@@ -5006,10 +5032,9 @@ export default {
           otherArticleId: '',
           isOpen: 1
         },
-          des: '',
+        des: ``,
         isEnable: 1
       }
-      ]
     },
   ]
 }

src/mixins/page/index.js

@@ -38,7 +38,7 @@ export default {
     }
   },
   mounted() {
-    // this.getInfo()
+    this.getInfo()
   },
   methods: {
     // 获取详情
@@ -47,7 +47,7 @@ export default {
       this.modules.map(e => {
         const { type, list, form } = e
         // 克隆一个原始row，方便添加
-        if (type === 'banner' || type === 'introduce') {
+        if (type === 'banner' || type === 'introduce' || type === 'history') {
           const data = JSON.parse(JSON.stringify(e.form || e.list[0]))
           for (const i in data) {
             if (typeof data[i] === 'string') data[i] = ''
@@ -71,13 +71,16 @@ export default {
           const str = json[json.state ? 'theEditedJson' : 'jsonBeforeEditing']
           const list = JSON.parse(str)
           this.originModules = str // 原始json，用以页面离开的时候判断是否需要提示保存
+          console.log("🚀 ~ file: index.js:82 ~ this.$post ~ this.modules:", this.modules,list, modules)
+
           list.map((e, i) => {
-            if ((e.type === 'banner' || e.type === 'introduce') && !e.originForm) {
+            if ((e.type === 'banner' || e.type === 'introduce' || e.type === 'history') && !e.originForm) {
               e.originForm = modules[i].originForm
             }
           })
+
           this.modules = list
-          console.log("🚀 ~ file: index.js ~ line 53 ~ this.$post ~ this.modules", this.modules)
+
         }
       }).catch(err => {})
     },

src/pages/article/list/index.vue

@@ -215,8 +215,6 @@ export default {
       // 栏目树形
       getColumn() {
         this.$post(this.api.listWithTree, {
-          
-          
           siteId: this.$store.state.content.site.id,
           columnName: '',
           templateId: '',

src/pages/column/page/exp.vue

@@ -26,7 +26,13 @@
         <div class="inner c-wrap">
           <h6>实验线站</h6>
           <p class="en">EXPERIMENT STATIONS</p>
-          <img class="pic" :src="modules[1].form.pic" alt="">
+          <template v-if="modules[1].form.pic">
+            <video v-if="Util.isVideo(modules[1].form.mediaType)" class="pic" ref="video" autoplay controls loop>
+              <source :src="modules[1].form.pic" type="video/mp4">
+              您的浏览器不支持 video 标签。
+            </video>
+            <img v-else class="pic" :src="modules[1].form.pic" alt="">
+          </template>
           <div class="des">{{ modules[1].form.des }}</div>
           <div class="cover" @click="toSet(1)">点击更改图片与概述</div>
         </div>
@@ -73,11 +79,21 @@
 <script>
 import mixins from '@/mixins/page'
 import Modules from '@/const/modules'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data() {
     return {
-      modules: Modules.exp
+      modules: Modules.exp,
+      Util
+    }
+  },
+  computed: {
+    isVideo() {
+      const { pic } = this.modules[1].form
+      const ext = pic.substr(pic.lastIndexOf('.') + 1)
+      console.log(33, pic)
+      return Util.isVideo(ext)
     }
   },
   mounted() {

src/pages/column/page/overviewDevHistory.vue

@@ -11,12 +11,15 @@
     </div>
 
     <div class="modules">
+      <div class="relative">
         <div class="single-banner single-banner-overview">
           <img class="banner-img" :src="modules[0].form.pic" alt="">
           <div class="texts">
             <h6 class="banner-title">{{ modules[0].form.title }}</h6>
           </div>
         </div>
+        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+      </div>
 
       <ul class="tabs wow fadeInLeft">
         <template v-for="(item, i) in tabs">
@@ -29,28 +32,24 @@
           <h2 class="wow fadeInLeft">发展历程</h2>
           <p class="en">DEVELOPMENT HISTORY</p>
 
-          <div class="event">
+          <div v-if="modules[1].list.length" class="event">
             <ul class="time">
-              <li class="active">2022</li>
+              <template v-for="(item, i) in modules[1].list">
-              <li>2021</li>
+                <li v-if="item.isEnable" :key="i" :class="{active: curYear == i}">{{ item.title }}</li>
-              <li>2020</li>
+              </template>
             </ul>
             <div class="right">
-              <h6 class="year">2022</h6>
+              <h6 class="year">{{ modules[1].list[curYear].title }}</h6>
               <ul class="list">
-                <li>
+                <template v-for="(e, j) in modules[1].list[curYear].list">
+                  <li v-if="e.isEnable" :key="j">
                     <div class="texts">
-                    <p class="date">10月11日</p>
+                      <p class="date">{{ e.title }}</p>
-                    <p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p>
+                      <p class="text">{{ e.des }}</p>
-                  </div>
-                  <img src="@/assets/images/about-bg.png" alt="" class="pic">
-                </li>
-                <li>
-                  <div class="texts">
-                    <p class="date">10月11日</p>
-                    <p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p>
                     </div>
+                    <img v-if="e.pic" :src="e.pic" alt="" class="pic">
                   </li>
+                </template>
               </ul>
             </div>
           </div>
@@ -72,7 +71,8 @@ export default {
     return {
       modules: Modules.overviewDevHistory,
       active: 0,
-      tabs: ['发展历程']
+      tabs: ['发展历程'],
+      curYear: 0
     }
   },
   mounted() {
@@ -148,6 +148,7 @@ export default {
   display: flex;
   justify-content: center;
   .time {
+    width: 200px;
     padding-right: 10px;
     margin-right: 20px;
     border-right: 1px solid #ddd;
@@ -178,6 +179,9 @@ export default {
       }
     }
   }
+  .right {
+    width: 900px;
+  }
   .year {
     margin: 0 0 20px 20px;
     font-size: 3.8rem;
@@ -196,7 +200,6 @@ export default {
     }
     .texts {
       width: 500px;
-      margin-right: 100px;
     }
     .date {
       margin-bottom: 15px;

src/pages/column/page/overviewSetup.vue

@@ -11,12 +11,15 @@
     </div>
     
     <div class="modules">
+      <div class="relative">
         <div class="single-banner single-banner-overview">
           <img class="banner-img" :src="modules[0].form.pic" alt="">
           <div class="texts">
             <h6 class="banner-title">{{ modules[0].form.title }}</h6>
           </div>
         </div>
+        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+      </div>
 
       <ul class="tabs wow fadeInLeft">
         <template v-for="(item, i) in tabs">
@@ -25,12 +28,13 @@
       </ul>
 
       <div class="tab-content">
-        <div class="org">
+        <div class="org c-wrap">
           <div class="left">
             <h6>{{ modules[1].form.title }}</h6>
             <p class="text">{{ modules[1].form.des }}</p>
           </div>
           <img class="pic" src="http://10.10.11.7/images/overviewSetup/1.png" alt="">
+          <div class="cover" style="min-height: 300px;" @click="toSet(1)">点击更换标题与描述</div>
         </div>
         <div class="lg-bg">
           <img width="100%" src="http://10.10.11.7/images/overviewSetup/2.png" alt="">

src/pages/userGroup/list/index.vue

@@ -141,6 +141,11 @@ export default {
       
       // 添加
       add() {
+         this.form = {
+          id: '',
+          groupName: '',
+          description: ''
+        }
         this.formVisible = true
         this.$nextTick(() => {
           this.$refs.form.clearValidate()

src/styles/common.scss

@@ -436,3 +436,6 @@
   border-left: 0;
   background-color: #ccc;
 }
+.tox-tinymce-aux {
+  z-index: 2500 !important;
+}