优化

src/api/monthly/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+import { TeamManagement } from '@/apiConfig/api'
+
+// 获取主页轮播图
+export function materialGetMaterialList(data) {
+  return request({
+    url: TeamManagement + `/material/getMaterialList`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除素材
+export function materialDeleteMaterial(id) {
+  return request({
+    url: TeamManagement + `/material/deleteMaterial?materialId="${id}"`,
+    method: 'get'
+  })
+}

src/views/home/index.vue

@@ -45,7 +45,7 @@
         <div class="home-carousel">
           <el-carousel :height="imgHeight + 'px'" indicator-position="outside">
             <el-carousel-item v-for="(item, index) in abc_img" :key="index">
-              <img ref="image" :src="item.src" style="width: 100%; cursor: pointer;" @load="loadImage()" @click="image_carousel(item)">
+              <img ref="image" :src="item.thumb" style="width: 100%; cursor: pointer;" @load="loadImage()" @click="image_carousel(item)">
             </el-carousel-item>
           </el-carousel>
           <img src="@/assets/home_images/home_inage.png" style="position: absolute; left: 45%; width: 60%;">
@@ -293,6 +293,7 @@ import { mapGetters } from 'vuex'
 import FloatMenu from './floatMenu'
 import { logoutUrl } from '@/apiConfig/requestIP.js'
 import { settingUserGetBiz } from '@/api/projectIndex'
+import { materialGetMaterialList } from '@/api/monthly/index.js'
 
 export default {
   components: {
@@ -300,10 +301,7 @@ export default {
   },
   data() {
     return {
-      abc_img: [
-        { src: require('@/assets/carousel/图层1.png') },
-        { src: require('@/assets/carousel/图层2.png') }
-      ],
+      abc_img: [],
       activeIndex2: '1',
       imgHeight: 300,
       menuColor: 'transparent',
@@ -321,6 +319,7 @@ export default {
     ])
   },
   mounted() {
+    this.materialGetMaterialList()
     window.addEventListener('resize', () => {
       this.imgHeight = this.$refs.image[0].height
     })
@@ -342,8 +341,14 @@ export default {
     loadImage() {
       this.imgHeight = this.$refs.image[0].height
     },
-    image_carousel() {
-      this.$router.push({ name: '月刊详情' })
+    image_carousel(e) {
+      this.$router.push({ name: '月刊详情', query: { id: e.id }})
+    },
+    async materialGetMaterialList() {
+      const res = await materialGetMaterialList({ pageSize: 5 })
+      if (res.code === 200) {
+        this.abc_img = res.data
+      }
     },
     async settingUserGetBiz() { // 获取人员默认业务线
       const res = await settingUserGetBiz()

src/views/monthly/components/createdMonthly.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-dialog :title="title" :show="show" :visible.sync="monthly_show" width="30%" class="public_task" @close="$emit('update:show', false)">
+    <div class="blueStripe" />
+    <el-form ref="monthly_form" :model="monthly_form" label-position="left" label-width="80px">
+      <el-form-item label="标题">
+        <el-input v-model="monthly_form.name" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="缩略图">
+        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :multiple="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+          <i class="el-icon-plus" />
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="素材">
+        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :multiple="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+          <i class="el-icon-plus" />
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="monthly_show = false">取 消</el-button>
+      <el-button type="primary" @click="monthly_show = false">创 建</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    show: { type: Boolean, default: false },
+    title: { type: String, required: true }
+  },
+  data() {
+    return {
+      monthly_show: this.show,
+      monthly_form: {}
+    }
+  },
+  watch: {
+    show: {
+      handler(newV) {
+        this.monthly_show = newV
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleClose(done) {
+      this.monthly_show = false
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.public_task {
+  /deep/ .el-dialog__title {
+    line-height: 24px;
+    font-size: 16px;
+    color: #303133;
+    padding-left: 10px;
+}
+
+.blueStripe {
+  width:4px;
+  height:17px;
+  background:#409EFF;
+  border-radius:1px;
+  position: absolute;
+  top: 23px;
+  left: 20px;
+}
+}
+</style>

src/views/monthly/index.vue

@@ -1,26 +1,112 @@
 <template>
   <el-container>
-    <el-header class="monthly-title" style="padding: 0;">
-      <div class="monthly-zhihui"><img :src="logo"> 质惠</div>
+    <el-header class="monthly-title" style="padding: 0 20px;">
+      <div class="monthly-zhihui" @click="$router.push({ name: '首页' })"><img :src="logo"> 质惠</div>
       <div class="monthly-title">
-        <div class="monthly-nav">项目管理</div>
-        <div class="monthly-nav">环境管理</div>
-        <div class="monthly-nav">工具集合</div>
+        <div class="monthly-nav" @click="handleSelect('4')"><svg-icon icon-class="monthly_project" /> 项目管理</div>
+        <div class="monthly-nav" @click="handleSelect('1')"><svg-icon icon-class="monthly_环境" /> 环境管理</div>
+        <div class="monthly-nav" @click="handleSelect('9')"><svg-icon icon-class="monthly_工具" /> 工具集合</div>
       </div>
     </el-header>
     <el-container>
-      <el-aside width="200px">Aside</el-aside>
-      <el-main>Main</el-main>
+      <el-aside width="215px">
+        <div class="monthly-aside-header">
+          <el-input v-model="monthly_nav_query" size="mini" style="width: 80%; margin-right: 15px;" />
+          <i class="el-icon-circle-plus-outline" @click="addMonthly" />
+        </div>
+        <div v-for="item in monthly_nav_list" :key="item.id">
+          <div class="monthly-nav-center">
+            <i class="el-icon-document monthly-hover" @click="monthlyGetData(item)"> {{ item.title }}</i>
+            <i class="el-icon-close monthly-hover" @click="monthlyDelete(item.id)" />
+          </div>
+        </div>
+      </el-aside>
+      <el-main class="monthly-main">
+        <div class="monthly-main-title">
+          <div>{{ monthly_main_image.title }}</div>
+          <div class="monthly-main-date">{{ monthly_main_image.gmtCreate }}</div>
+        </div>
+        <div class="demo-image__placeholder" style="padding: 20px 0;">
+          <div class="block">
+            <el-image :src="monthly_main_image.content" />
+          </div>
+        </div>
+      </el-main>
     </el-container>
+    <addMonthly :show.sync="show" :title="title" />
   </el-container>
 </template>
 
 <script>
 import logoUrl from '@/assets/内页logo2@2x.png'
+import addMonthly from './components/createdMonthly.vue'
+import { materialGetMaterialList, materialDeleteMaterial } from '@/api/monthly/index.js'
 export default {
+  components: {
+    addMonthly
+  },
   data() {
     return {
-      logo: logoUrl
+      logo: logoUrl,
+      title: '',
+      show: false,
+      monthly_nav_query: 's',
+      monthly_main_image: '',
+      monthly_nav_list: []
+    }
+  },
+  mounted() {
+    this.materialGetMaterialList()
+  },
+  methods: {
+    async materialGetMaterialList() {
+      const num = this.$route.query.id
+      const res = await materialGetMaterialList({ pageSize: 5 })
+      if (res.code === 200) {
+        this.monthly_nav_list = res.data
+        this.monthly_main_image = this.monthly_nav_list.filter(item => item.id === Number(num))[0]
+      }
+    },
+    monthlyGetData(val) {
+      this.monthly_main_image = this.monthly_nav_list.filter(item => item.id === Number(val.id))[0]
+    },
+    handleSelect(key, keyPath) {
+      switch (key) {
+        case '1':
+          this.$router.push({ name: 'env' })
+          break
+        case '4' :
+          if (!this.bizId || this.bizId === -1) {
+            this.$router.push({ name: '业务线选择' })
+          } else {
+            this.$router.push({ name: '项目' })
+          }
+          break
+        case '9':
+          this.$router.push({ name: 'Interface' })
+          break
+      }
+    },
+    monthlyDelete(id) {
+      console.log(id)
+      this.$confirm('确认删除此素材?', '移除确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await materialDeleteMaterial(11)
+        if (res === 200) {
+          this.materialGetMaterialList()
+          this.$message({ type: 'success', message: '删除成功!' })
+        }
+      }).catch(() => {
+        this.$message({ type: 'info', message: '已取消删除' })
+      })
+    },
+    addMonthly() {
+      this.title = '新建'
+      this.show = true
+      console.log(this.show)
     }
   }
 }
@@ -36,18 +122,57 @@ export default {
   justify-content: flex-start;
 }
 .monthly-zhihui {
-  width: 200px;
+  width: 215px;
   text-align: center;
   color: #FFFFFF;
   font-weight: 600;
   font-size: 20pt;
+  cursor: pointer;
   font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
   }
 .monthly-nav {
   cursor: pointer;
-  margin-right: 50px;
+  margin-right: 100px;
+  padding: 0 10px;
 }
 .monthly-nav:hover {
   background: #1e89f7;
 }
+.monthly-main {
+  width: 215px;
+  min-height: calc(100vh - 60px);
+  border: 10px solid #f2f3f6;
+}
+.monthly-main-title {
+  border-bottom: 1px solid #ccc;
+  font-family: PingFangSC-Medium;
+  padding-bottom: 20px;
+  font-size: 20px;
+  color: #333B4A;
+  display: flex;
+  justify-content: space-between;
+}
+.monthly-main-date {
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+  color: #666666;
+}
+.monthly-aside-header {
+  margin: 20px;
+}
+.monthly-nav-center {
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+}
+.monthly-hover {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #444444;
+}
+.monthly-hover:hover {
+  color: #1e89f7;
+  cursor: pointer;
+}
 </style>