dzhh-frontend/.svn/pristine/90/90bdbf7b6b5d5a8677943d302ba2568385141497.svn-base

<template>
  <div style="margin:-10px;">
    <a-spin size="large" :spinning="spinning">
    <!-- 添加任务栏 -->
    <div class="addPanel-position-box" v-if="edit">
      <div class="addPanel-container">
        <div class="panel-text-box">
          <a-icon type="credit-card" class="iconfont icon-margin" />
          <span>面板 / </span>
          <span>{{ layout.length }}</span>
        </div>
        <a-divider type="vertical" />
        <div class="add-panel-box" @click="add">
          <a-icon type="plus-circle" class="iconfont icon-margin icon-add" />
          <span >添加面板</span>
        </div>
        <div class="saveBtn-box">
          <a-button type="dashed" @click="handleEdit">退出编辑</a-button>
          <!-- <a-button type="primary">保存</a-button> -->
        </div>
      </div>
    </div>
    <grid-layout
      v-if="layout.length"
      :layout.sync="layout"
      :col-num="24"
      :row-height="30"
      :is-draggable="edit"
      :is-resizable="edit"
      :is-mirrored="false"
      :vertical-compact="true"
      :use-css-transforms="true"
      :margin="[10, 10]"
      @layout-updated="layoutUpdatedEvent"
    >
    <!-- :responsive="true"
      :breakpoints=" { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"
      :cols="{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }" -->
      <grid-item
        v-for="(item,index) in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        @resized="resizedEvent(item.i,item.key)"
      >
        <home-page-card
          :layoutData="item.data"
          :i="item.i"
          :key="item.key"
          :ref="item.i +'_'+ item.key"
          :edit="edit"
          @fn="compFn"
        >
        </home-page-card>
      </grid-item>
    </grid-layout>
    <div v-else class="empty-warp">
      <a-button type="dashed" icon="plus" @click="add">添加区块</a-button>
      <a-button type="dashed" icon="sync" @click="reset">恢复默认</a-button>
    </div>
    <home-page-modal ref="editVueGridLayoutModal" :layout="layout" @add="addGridItem" @delete="layoutItemDelete"></home-page-modal>
    </a-spin>
  </div>
</template>

<script>
// 引入相关的依赖
var testLayout = [
  { 'x': 0, 'y': 0, 'w': 18, 'h': 9, 'i': '0', 'data': { 'code': '', 'title': '我的任务', 'comp': 'MyTaskList', 'url': '/task/MyTaskList' }, 'key': '0' },
  { 'x': 0, 'y': 9, 'w': 18, 'h': 7, 'i': '3', 'data': { 'code': '', 'title': '我发起的流程', 'url': '/task/MyApplyProcessList', 'comp': 'MyApplyProcessList' }, 'key': '3' },
  { 'x': 0, 'y': 16, 'w': 18, 'h': 7, 'i': '2', 'data': { 'code': '', 'title': '系统通知', 'comp': 'Notice', 'url': '/isps/userAnnouncement' }, 'key': '2' },
  { 'x': 18, 'y': 9, 'w': 6, 'h': 14, 'i': '5', 'data': { 'code': '', 'title': '待办计划', 'url': '/pendingWork', 'comp': 'PendingWork' }, 'key': '5' }
]
export default {
  name: 'HomePage',
  components: {
  },
  data() {
    return {
      layout: [],
      edit: false,
      firstItem: { 'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0' },
      url: {
        list: '/sys/sysHomePageLayout/getSysHomePageLayout',
        save: '/sys/sysHomePageLayout/edit',
        add: '/sys/sysHomePageLayout/add'
      },
      id: '',
      spinning: false
    }
  },
  watch: {
    $route(to) {
      if (to.fullPath === '/HomePage') {
        setTimeout(() => { // 解决tab页切换时 触发窗口切换事件 vue-grid-layout挤在一起bug  后期看看是否还有别的方式
          triggerWindowResizeEvent()
        }, 700)
      }
    }
  },
  created() {
    this.loadData()
  },
  // 方法集合
  methods: {
    loadData(parm) {
      this.spinning = true
      return postAction(this.url.list, parm || {}).then(res => {
        if (res.success) {
          this.layout = res.result.jsonData ? res.result.jsonData : []
          if (res.result.isDefaultLayout !== '1') {
            this.id = res.result.id
          }
        } else {
          this.$message.error(res.message)
        }
        this.spinning = false
      })
    },
    save(parm) {
      parm = Object.assign({ id: this.id }, parm)
      if (this.id) {
        putAction(this.url.save, parm || {}).then(res => {
          if (res.success) {
            this.id = res.result.id
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        postAction(this.url.add, parm || {}).then(res => {
          if (res.success) {
            this.id = res.result.id
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    layoutUpdatedEvent(newLayout) { // 调用保存方法
      this.save({ layoutJson: JSON.stringify(newLayout) })
    },
    resizedEvent(i, key) { // 尺寸变化时 触发图形切换
      triggerWindowResizeEvent()
    },
    add() {
      this.$refs.editVueGridLayoutModal.editModalVisible = true
    },
    async reset() {
      // this.layout = [...testLayout]
      try {
        const res = await this.loadData({ 'isDefaultLayout': '1' })
        const res2 = await this.save({ layoutJson: JSON.stringify(this.layout) })
      } catch (err) {
        console.log(err)
      }
    },
    addGridItem(data, comp) { // 添加图表
      if (this.layout.length > 12) {
        this.$message.warning('最多只能添加12个区块')
        return false
      }
      let layout = {}
      if (this.layout.length === 0) {
        layout = { ...this.firstItem }
      } else {
        const lastLayout = this.layout[this.layout.length - 1]
        layout = {
          'x': lastLayout.x >= 16 ? 0 : lastLayout.x + 8,
          'y': lastLayout.x >= 16 ? lastLayout.y + 7 : lastLayout.y,
          'w': 8,
          'h': 7,
          'i': (parseInt(this.layout[this.layout.length - 1].i) + 1).toString()
        }
      }
      layout.data = { ...data }
      layout.key = layout.i
      this.layout.push(layout)
    },
    layoutItemDelete(i) { // 删除图表
      this.layout = this.layout.filter(item => {
        return item.i !== i
      })
    },
    layoutItemRefresh(i) {
      this.layout.forEach(item => {
        if (item.i === i) {
          item.key = new Date().getTime()
          return false
        }
      })
    },
    handleEdit() {
      this.edit = !this.edit
    },
    handleMore() {
      this.$router.push({ path: this.layoutData.url })
    },
    compFn(type, data) {
      switch (type) {
        case 'delete':
          this.layoutItemDelete(data)
          break
        case 'add':
          this.add()
          break
        case 'refresh':
          this.layoutItemRefresh(data)
          break
        case 'edit':
          this.handleEdit()
          break
        case 'reset':
          this.reset()
          break
      }
    }
  }
}
</script>
<style scoped>
 .empty-warp{
    height: 300px;
    width: 100%;
    background: white;
    text-align: center;
    margin: 10px;
    padding: 50px;
 }
 .empty-warp button{
   margin-right: 10px;
 }

 /* 头部添加面板区域 */
.addPanel-position-box {
  position: sticky;
  top: 0px;
  z-index: 100;
}
.addPanel-container {
  height: 56px;
  display: flex;
  align-items: center;
  font-size: 14px;
  position: relative;
  background: #ebeef5;
}
.saveBtn-box {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  right: 10px;
}
.saveBtn-box button{
  margin-right: 10px;
}
.panel-text-box {
  padding: 5px 10px;
}
.add-panel-box {
  padding: 5px 10px;
  cursor: pointer;
}
.add-panel-box:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  color: #409eff;
}
.iconfont{
  font-size: 14px;
}
.icon-margin{
  margin-right:8px;
}
.icon-add{
  color: #40a9ff;
}
</style>