jiaoyuju/ruoyi-ui/src/components/listModalComponent/index.vue

// 列表模型块组件
<template>
  <div class="listModalComponent" :class="(active && readonly)?'active':null" @click="ckeckModal">
    <div class="preview" @mouseout="mouseout" :style="`backgroundImage:url(${items.url?items.url:''})`">
      <!-- <img :src="items.url?items.url:''" alt=""> -->

      <div class="more" v-show="!readonly" >
        <Poptip trigger="click" placement="bottom-end" :width="100" ref="poptip" @mouseout.native.stop="">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>

            <ul slot="content" class="options">
              <li @click="releaseProcess" v-if="items.status === 0 || items.status === 2">发布流程</li>
              <li @click="editingProcess" v-if="items.status === 0">编辑流程</li>
              <li @click="copyProcess" v-if="items.status === 0 || items.status === 2 ">复制流程</li>
              <li @click="deleteProcess" v-if="items.status === 0 || items.status === 2 ">删除流程</li>
              <li @click="stopProcess" v-if="items.status === 1">停用流程</li>
              <li @click="previewProcess">预览</li>
            </ul>
        </Poptip>
      </div>
    </div>
    <div class="info">
      <p class="infoTitle">{{items.name}}</p>
      <p>
        <span class="creatTime">创建时间:{{items.createTime}}</span>
      </p>

      <span class="status" :class="statusClass">{{statusName}}</span>
    </div>


  </div>
</template>
<script>
import {DispatchEvent} from '@/utils/dispatchEvent.js'
import {  mapMutations } from 'vuex';
import {
    setPublish,
    setUnpublish,
    setCopy,
    delRemove
  } from '@/api/modeler.js'
export default {
  name:'listModalComponent',
  props:{
    items:{
      type:Object,
      default () {
        return {
          name:'模型名称',
          url:'',  //缩略图base64数据
          createTime:'2019-03-18',
          status:1,  //已发布是1  未发布是2
        }
      }
    },
    readonly:{
      type:Boolean,
      default: false
    }
  },
  data () {
    return {
      active:false
    }
  },
  computed:{
    statusName () {
      let str = ''
      switch (this.items.status) {
        case -1:
          str = '已删除';
          break;
        case 0:
          str = '未发布';
          break;
        case 1:
          str = '已发布';
          break;
        case 2:
          str = '已停用';
          break;
        case 3:
          str = '草稿';
          break;

      }
      return str
    },
    statusClass () {
      return [{
        'published':this.items.status === 1,
        'notRelease':this.items.status === 0,
        'stop':this.items.status === 2
      }]
    }
  },
  watch:{
    readonly () {
      this.active = false
    }
  },
  methods:{
    ...mapMutations(['currentChange','changeKeepAliveArray']),
    mouseout () {
      this.$refs.poptip.handleClose()
    },
    releaseProcess () {  //发布流程
      this.$refs.poptip.handleClose()
      setPublish({id:this.items.id}).then((res) => {
        if(res.resultCode === 0){
        if(typeof this.items.event.queryLists === 'function'){
          this.items.event.queryLists()
        }
        }else{
          this.$Modal.fcWarning({
            title:'警告',
            content:res.resultMsg,
            mask:true
          })
        }
      })
    },
    editingProcess () { //编辑流程
      this.$refs.poptip.handleClose()
      // this.changeKeepAliveArray(['modeler'])
      this.$router.push({ path: `/tool/activiti/TemplateManagementNew/${this.items.id}` })
      // this.currentChange({
      //   path:'/tool/activiti/modeler'
      // });
    },
    deleteProcess () {  //删除流程
      this.$refs.poptip.handleClose()
      delRemove({id:this.items.id}).then((res) => {
        if(typeof this.items.event.queryLists === 'function'){
          this.items.event.queryLists()
        }
      })
    },
    stopProcess () {  //停用流程
      this.$refs.poptip.handleClose()
      setUnpublish({id:this.items.id}).then((res) => {
        if(typeof this.items.event.queryLists === 'function'){
          this.items.event.queryLists()
        }
      })
    },
    copyProcess () {  //复制流程
      this.$refs.poptip.handleClose()
      setCopy({id:this.items.id}).then((res) => {
        if(res.resultCode === 0){
          // this.changeKeepAliveArray(['modeler'])
          this.$router.push({ path: `/tool/activiti/TemplateManagementNew/${res.data.id}` })
          // this.currentChange({
          //   path:'/tool/activiti/modeler'
          // });
        }else{
          this.$Modal.fcError({
            title:'错误',
            content:res.resultMsg,
            onOk: () => {
            }
          })
        }
      })
    },
    previewProcess () { //预览流程
      this.$refs.poptip.handleClose()
      // this.changeKeepAliveArray(['modeler'])
      this.$router.push({ path: `/tool/activiti/TemplateManagementNew/${this.items.id}/1` })
      // this.currentChange({
      //   path:'/tool/activiti/modeler'
      // });
    },

    ckeckModal () {  //选择流程
      if(this.readonly){
        this.active = !this.active
        DispatchEvent('modalClick',{
          detail:{
            items:this.items,
            value:this.active
          }
        })
      }

    }
  }
}
</script>
<style lang="scss" >
.listModalComponent{
  height:220px;
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1)!important;
  border-radius:4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-radius:4px;
  position: relative;

  &.active{
    border: 1px solid #5982E7;
  }

  .info{
    height: 62px;
    padding: 10px 0 8px 12px;
    position: relative;

    .infoTitle{
      height: 20px;
      font-size: 15px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #515a6e;
      line-height: 20px;
      margin-bottom: 6px;
    }

    >p:last-child{
      display: flex;
      align-items: center;
      justify-content: space-between;
      span{
        font-size:12px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(81,90,110,1);
        line-height:16px;
      }
    }

    span.status{
      position: absolute;
      right: 0;
      bottom: 8px;
      width:75px;
      height:24px;
      background:#B4B4B4;
      border-radius:12px 0px 0px 12px;
      color: white;
      text-align: center;
      line-height: 24px;
      font-size:12px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;

      &.published{
        background:rgba(9, 161, 85, 1)
      }

      &.notRelease{
        background:#B4B4B4
      }

      &.stop{
        background: #ED4014;
      }
    }

  }

  .preview{
    flex: 1;
    border-radius:4px 4px 0px 0px;
    overflow: hidden;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    img{
      // width: 100%;
      height: 100%;
    }

    &:hover{
      // transform: translateY(-4px);
      img{

      }
      .more{
        display: block;
      }
    }

    .more{
      width: 40px;
      height: 24px;
      position: absolute;
      top: 12px;
      right: 12px;
      background: white;
      box-shadow:0px 1px 5px 0px rgba(0,0,0,0.1);
      border-radius:4px;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;

    .burgeon-poptip{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .burgeon-poptip-body{
        padding: 5px 0;
      }
      .burgeon-poptip-rel{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
      }

      .burgeon-poptip-popper{
        min-width: auto;
      }
    }


    .dot{
      width: 4px;
      height: 4px;
      background: rgba(51, 51, 51, 1);
      border-radius: 50%;
      display: inline-block;
      margin-right: 4px;

      &:last-child{
        margin-right: 0;
      }
    }

    .options{
        li{
          height: 29px;
          display: flex;
          align-items: center;
          padding-left: 16px;
          font-size:12px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(81,90,110,1);

          &:hover{
            background: rgba(243, 243, 243, 1);
          }
        }
      }
    }
  }
  &:hover{
     transform: translateY(-4px);
  }
}
</style>