页面设置

src/components/modules/content.vue

@@ -1,16 +1,35 @@
 <template>
-  <!-- 表单 -->
+  <!-- 内容 -->
   <div>
-    <el-dialog title="编辑" :visible.sync="data.visible" width="600px" custom-class="module" :close-on-click-modal="false">
+    <el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
       <el-form ref="form" :model="data.form" :rules="rules" label-width="80px">
         <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[i]" placeholder="请输入" maxlength="30"></el-input>
+          <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[i]" type="textarea" placeholder="请输入" maxlength="50"></el-input>
+          <el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="50"></el-input>
-          
+          <el-upload
+            v-if="item.type === 'upload'"
+            class="uploader"
+            accept=".jpg,.png,.jpeg"
+            :on-success="res => uploadSuccess(res, data.form)"
+            :show-file-list="false"
+            :action="api.upload">
+              <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
+              <div class="uploader-default" v-else>
+                <i class="el-icon-plus"></i>
+                <p>上传图片</p>
+              </div>
+              <div slot="tip" class="el-upload__tip">
+                <p>只支持.jpg,.png格式</p>
+              </div>
+          </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>
+          </div>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="$emit('close')">取消</el-button>
+        <el-button @click="$emit('update:visible', false)">取消</el-button>
         <el-button type="primary" @click="moduleSubmit">确定</el-button>
       </span>
     </el-dialog>
@@ -21,45 +40,59 @@
 <script>
 import Link from '@/components/modules/link'
 export default {
-  props: {
+  props: ['data', 'visible'],
-    data: {
-      required: true
-    },
-    // diaVisible: {
-    //   type: Boolean,
-    //   required: true
-    // }
-  },
   components: {
     Link
   },
   data() {
     return {
-      rules: {
+      rules: {},
-        groupName: [
-          { required: true, message: "请输入名称", trigger: "blur" }
-        ]
-      },
       linkVisible: false,
       linkForm: {},
-      curIndex: 0
+      curIndex: 0,
     };
   },
+  watch: {
+    visible(open) {
+      // 每次打开的时候处理参数
+      open && this.handleForm()
+    }
+  },
+  mounted() {
+    this.handleForm()
+  },
   methods: {
+    // 处理form表单参数
+    handleForm() {
+      const { forms, type } = this.data
+      // 这两张类型的模块才需要处理参数
+      if (type === 'form' || type === 'introduce') {
+        forms.map(e => {
+          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)
+    },
     // 上传成功
     uploadSuccess(res, row) {
       console.log("🚀 ~ file: index.vue ~ line 238 ~ uploadSuccess ~ res, row", res, row)
       // let url = this.form.columnBanner
       // url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
-      row.banner = res.url
+      this.$set(row, 'pic', res.url)
-    },
+      // row.pic = res.url
-    // 模块设置提交
-    moduleSubmit() {
-      
     },
     // 展示链接设置
-    toLink(row, i) {
+    toLink(row, i = 0) {
-      console.log("🚀 ~ file: index.vue ~ line 399 ~ toLink ~ row, i", row, i)
       this.linkVisible = true
       this.curIndex = i
       this.linkForm = row.link
@@ -87,10 +120,21 @@ export default {
       data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
       this.data.list[this.curIndex].link = data
       this.linkVisible = false
-    }
+    },
+    // 模块设置提交
+    moduleSubmit() {
+      
+    },
   }
 };
 </script>
 <style lang="scss" scoped>
-
+.radio-wrap {
+  display: flex;
+  align-items: center;
+  .el-input {
+    width: 200px;
+    margin-left: -40px;
+  }
+}
 </style>

src/components/modules/module.vue

@@ -2,7 +2,7 @@
   <!-- banner -->
   <div>
     <el-dialog title="Banner模块管理" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
-      <template v-if="data.type === 'banner'">
+      <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>
           <el-table-column label="图片" min-width="140">
@@ -24,11 +24,13 @@
               </el-upload>
             </template>
           </el-table-column>
+          <el-table-column v-if="data.type === 'introduce'" prop="title" label="标题" min-width="140"></el-table-column>
           <el-table-column label="链接" min-width="140">
             <template slot-scope="scope">
               <div class="link-wrap">
                 <span>{{ scope.row.link.linkName }}</span>
-                <el-button class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button>
+                <el-button v-if="data.type === 'banner'" class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button>
+                <el-button v-else class="set-link" type="primary" size="mini" @click="editIntro(scope.row, scope.$index)">编辑</el-button>
               </div>
             </template>
           </el-table-column>
@@ -75,28 +77,101 @@
           </div>
         </el-form-item>
       </el-form>
+      <el-form v-else-if="data.type === 'column'" ref="form" :model="data.form" :rules="columnRules" label-width="100px">
+        <el-form-item prop="site" label="站点选择">
+          <el-select v-model="data.form.site">
+            <el-option
+              v-for="item in $refs.link.sites"
+              :key="item.id"
+              :label="item.siteName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="column" label="关联栏目">
+          <el-select v-model="data.form.column">
+            <el-option
+              v-for="item in columns"
+              :key="item.id"
+              :label="item.siteName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="文章展示数量">
+          <el-select v-model="data.form.articleNum">
+            <el-option
+              v-for="item in articleNums"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="栏目标题">
+          <el-radio v-model="data.form.columnTitle" :label="1">默认读取关联栏目</el-radio>
+          <div class="radio-wrap">
+            <el-radio v-model="data.form.columnTitle" :label="2"></el-radio>
+            <el-input v-model="data.form.columnTitleCustom" size="small" maxlength="10"></el-input>
+          </div>
+        </el-form-item>
+      </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="$emit('update:visible', false)">取消</el-button>
         <el-button type="primary" @click="moduleSubmit">确定</el-button>
       </span>
     </el-dialog>
     <Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
+    <Content :data.sync="data" :visible.sync="contentVisible" />
   </div>
 </template>
 
 <script>
 import Link from '@/components/modules/link'
+import Content from '@/components/modules/content'
 export default {
+  name: 'module',
   props: ['data', 'visible'],
   components: {
-    Link
+    Link,
+    Content
   },
   data() {
     return {
       rules: {},
       linkVisible: false,
       linkForm: {},
-      curIndex: 0
+      curIndex: 0,
+
+      columnRules: {
+        site: [
+          { required: true, message: '请选择站点', trigger: 'change' }
+        ],
+        column: [
+          { required: true, message: '请选择关联栏目', trigger: 'change' }
+        ],
+      },
+      columns: [],
+      articleNums: [
+        {
+          id: '',
+          name: '默认'
+        },
+        {
+          id: 4,
+          name: '4'
+        },
+        {
+          id: 3,
+          name: '3'
+        },
+        {
+          id: 2,
+          name: '2'
+        },
+      ],
+
+      contentVisible: false
     };
   },
   watch: {
@@ -145,18 +220,17 @@ export default {
       }).then(() => {
         list.splice(i, 1)
       }).catch(() => {})
-    },
-    // 模块设置提交
-    moduleSubmit() {
-      
     },
     // 展示链接设置
     toLink(row, i = 0) {
-      console.log("🚀 ~ file: index.vue ~ line 399 ~ toLink ~ row, i", row, i)
       this.linkVisible = true
       this.curIndex = i
       this.linkForm = row.link
     },
+    // 编辑内容
+    editIntro(row, i = 0) {
+      this.contentVisible = true
+    },
     // 链接设置提交
     linkSubmit() {
       // return console.log(3, this.$refs.link.data)
@@ -180,10 +254,21 @@ export default {
       data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
       this.data.list[this.curIndex].link = data
       this.linkVisible = false
-    }
+    },
+    // 模块设置提交
+    moduleSubmit() {
+      
+    },
   }
 };
 </script>
 <style lang="scss" scoped>
-
+.radio-wrap {
+  display: flex;
+  align-items: center;
+  .el-input {
+    width: 200px;
+    margin-left: -40px;
+  }
+}
 </style>

src/pages/column/page/index.vue

@@ -105,8 +105,11 @@
     
     <div class="block">
       <div class="inner">
+        <div class="c-wrap">
           <h2 class="b-title">Light Chasers' Home at IASF</h2>
           <p class="intro">Keep up with what happen with IASF</p>
+          <div class="cover" @click="toSet(6)">点击更换标题与描述</div>
+        </div>
         <ul class="people">
           <li>
             <img class="pic" src="@/assets/images/channel/channel1.png" alt="">
@@ -124,6 +127,15 @@
             </div>
             <img class="pic" src="@/assets/images/channel/channel2.png" alt="">
           </li>
+          <li>
+            <img class="pic" src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+            </div>
+          </li>
+          <div class="cover" @click="toSet(7)">点击更改图片、标题概述与链接</div>
         </ul>
       </div>
     </div>
@@ -137,51 +149,62 @@
           <p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.…</p>
         </div>
       </div>
+      <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
     </div>
 
     <div class="block" style="padding-bottom: 0">
       <div class="inner">
+        <div class="c-wrap">
           <h2 class="glance">IASF at a glance</h2>
+          <div class="cover" @click="toSet(9)">点击更换标题与描述</div>
+        </div>
         <ul class="stat">
           <li>
             <p class="num">2020</p>
             <p class="text">The year IASF was founded</p>
+            <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
           </li>
           <li>
             <p class="num">2</p>
             <p class="text">Facility projects</p>
+            <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
           </li>
           <li>
             <p class="num">240</p>
             <p class="text">Employees</p>
+            <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
           </li>
           <li>
             <p class="num">10</p>
             <p class="text">Academicians</p>
+            <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
           </li>
           <li>
             <p class="num">45%</p>
             <p class="text">Hold doctorates or the highest degree in their field</p>
+            <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
           </li>
           <li>
             <p class="num">$32B+</p>
             <p class="text">Facility construction need-based grant aid provided </p>
+            <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
           </li>
         </ul>
       </div>
     </div>
 
-    <Banner :data.sync="modules[curModule]" :visible.sync="diaVisible" />
+    <Module :data.sync="modules[curModule]" :visible.sync="diaVisible" />
   </div>
 </template>
 
 <script>
 import Setting from '@/setting'
 import Util from '@/libs/util'
-import Banner from '@/components/modules/banner'
+import Module from '@/components/modules/module'
 export default {
   data() {
     return {
+      userId: +this.$store.state.user.userId,
       site: this.$store.state.content.site,
       id: +this.$route.query.id,
       modules: [
@@ -314,8 +337,38 @@ export default {
             des: ''
           }
         },
+        {
+          type: 'column',
+          form: {
+            site: '',
+            column: '',
+            articleNum: '',
+            columnTitle: 1,
+            columnTitleCustom: ''
+          }
+        },
         {
           type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'introduce',
           forms: [
             {
               type: 'upload',
@@ -329,6 +382,11 @@ export default {
               label: '标题',
               required: true
             },
+            {
+              type: 'input',
+              prop: 'subTitle',
+              label: '小标题'
+            },
             {
               type: 'link',
               prop: 'link',
@@ -341,13 +399,87 @@ export default {
             }
           ],
           form: {
+            pic: '',
+            title: '',
+            subTitle: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              linkAddress	: '',
+            },
+            des: ''
+          },
+          list: [
+            {
               pic: '',
               title: '',
               link: {
                 linkName: '无',
                 connectionType: 1,
                 linkAddress	: '',
+                isOpen: 1
+              },
+              isEnable: 1
+            }
+          ]
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
             },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
             des: ''
           }
         },
@@ -357,7 +489,7 @@ export default {
     }
   },
   components: {
-    Banner,
+    Module,
   },
   watch: {
     '$route'() {
@@ -397,6 +529,8 @@ export default {
         columnId: this.id,
         state,
         sort: 1,
+        founderId: this.userId,
+        editorId: this.userId,
         jsonBeforeEditing: this.handleJson(),
         theEditedJson: this.handleJson(),
       }).then(({ data }) => {
@@ -510,6 +644,7 @@ export default {
   }
 
   .people {
+    position: relative;
     li {
       display: flex;
       justify-content: space-between;
@@ -544,6 +679,7 @@ export default {
     flex-wrap: wrap;
     margin-top: 60px;
     li {
+      position: relative;
       width: 30%;
       margin-bottom: 50px;
     }
@@ -564,6 +700,7 @@ export default {
   margin: 0 auto;
 }
 .about {
+  position: relative;
   padding: 77px 0 198px;
   background: url(../../../assets/images/channel/about-bg.png) 0 0/100% 100% no-repeat;
   .line {