yxk-electronic-archives/src/views/system/processManage/processDeployment/index.vue

<template>
  <div class="process-dep-container">
    <div class="head-container">
      <div class="head-left">
        <el-button size="mini" @click="handleDeloy">
          <i class="iconfont icon-xinzeng" />
          部署
        </el-button>
        <el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].suspensionState === 1)" @click="activateHandle(1)">
          <i class="iconfont icon-jihuo" />
          激活
        </el-button>
        <el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].suspensionState === 2)" @click="activateHandle(2)">
          <i class="iconfont icon-guaqi" />
          挂起
        </el-button>
        <el-button size="mini" :disabled="selectedItem.length===0" @click="downloadModel(selectedItem[0])">
          <i class="iconfont icon-daochu" />
          导出
        </el-button>
      </div>
      <div class="head-right">
        <el-select v-model="query.suspensionState" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="queryState">
          <i slot="prefix" class="iconfont icon-zhuangtai" />
          <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
      </div>
    </div>
    <div class="process-dep-main">
      <ul class="process-list">
        <li v-for="(item,index) in flowableList" :key="index" :class="isActive === index ? 'active-li': ''" @click="selectProcess(item,index)">
          <p>{{ item.deployName }}</p>
          <i class="iconfont icon-shezhi" style="font-size: 16px;color: #0348f3; margin-right: 6px;" @click="settingModle(item.modelId)" />
          <span :class="item.suspensionState === 1 ? 'process-on': 'process-off'" />
        </li>
      </ul>
      <div v-if="isHasModel" class="process-info">
        <div class="process-info-txt">
          <div class="info-left">
            <p>当前版本：
              <el-select v-model="versionNew" style="width:70px;" @change="selectVersion">
                <el-option
                  v-for="item in versionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </p>
            <p>部署时间：<span>{{ modelInfo.deploymentTime | parseTime }}</span></p>
          </div>
          <div class="info-right ">
            <p>运行中：<span>{{ modelInfo.runCount }}</span></p>
            <p>已完成：<span>{{ modelInfo.completeCount }}</span></p>
          </div>
        </div>
        <div class="process-info-img">
          <img :src="srcImg" alt="" :onerror="defaultImg">
        </div>
      </div>
    </div>
    <eForm ref="mform" @refresh="getList" />
  </div>
</template>

<script>
import { FetchInitFlowAll, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml, FetchFindFolwImgByModelId } from '@/api/system/flowable'
import { downloadFile } from '@/utils/index'
import eForm from './module/form'
export default {
  name: 'ProcessDeployment',
  components: { eForm },
  data() {
    return {
      flowableList: [],
      query: {
        suspensionState: null
      },
      isActive: -1,
      isHasModel: false,
      selectedItem: [],
      modelInfo: {},
      allVersionModel: [],
      versionOptions: [],
      versionNew: null,
      exportVisible: false,
      activateName: '',
      srcImg: null,
      enabledTypeOptions: [
        { key: null, display_name: '全部' },
        { key: 1, display_name: '启用' },
        { key: 2, display_name: '挂起' }
      ],
      defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"'
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(suspensionState) {
      this.selectedItem = []
      this.isActive = -1
      this.isHasModel = false
      FetchInitFlowAll({ 'suspensionState': suspensionState }).then((res) => {
        this.flowableList = res
      }).catch(err => {
        console.log(err)
      })
    },
    queryState(val) {
      this.getList(val)
    },
    selectProcess(item, index) {
      this.selectedItem = []
      this.selectedItem.push(item)
      this.isActive = index
      this.isHasModel = true
      this.modelInfo = item
      FetchAllByKey({ 'key': item.modelKey }).then(res => {
        this.allVersionModel = res
        this.versionOptions = res.map(item => {
          const json = {}
          json.value = item.version
          json.label = item.version
          return json
        })
        this.versionNew = item.version
      }).catch((err) => {
        console.log(err)
      })
      FetchFindFolwImgByModelId({ 'processDefinitionId': item.procdefId }).then((res) => {
        this.srcImg = 'data:image/jpeg;base64,' + res
      }).catch(err => {
        console.log(err)
      })
    },
    selectVersion(val) {
      this.allVersionModel.filter((item, index) => {
        if (item.version === val) {
          this.modelInfo = item
        }
      })
    },
    handleDeloy() {
      this.$refs.mform.uploadVisible = true
      if (this.isActive !== -1) {
        this.$refs.mform.form.name = this.selectedItem[0].deployName
      }
    },
    activateHandle(type) {
      if (type === 1) {
        this.activateName = '激活'
      } else {
        this.activateName = '挂起'
      }
      this.$confirm('此操作将' + this.activateName + '“' + this.selectedItem[0].deployName + '”' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const params = {
          'procdefId': this.selectedItem[0].procdefId,
          'type': type
        }
        FetchSuspendActivate(params).then(res => {
          if (res === 'SUCCESS') {
            this.getList()
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
      })
    },
    settingModle(modelId) {
      console.log('modelId', modelId)
      this.$emit('handleTab', 3, modelId)
    },
    downloadModel(data) {
      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const params = {
          'deployId': data.deployId
        }
        const name = data.modelName
        FetchLeadingOutModelXml(params).then(result => {
          downloadFile(result, name, 'xml')
        }).catch(() => {
          this.$message({ message: '下载失败，请检查好网络后重新下载', type: 'error', offset: 8 })
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang='scss' scoped>
[data-theme=dark] .process-dep-main{
  background-color: transparent;
  border-top: 1px solid #113d72;
  .process-list{
    box-shadow: 5px 2px 10px 1px rgba(15,164,222,.16);
    li{
      &.active-li,
      &:hover{
        background: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
      }
    }
  }
}
[data-theme=light] .process-dep-main{
  background-color: #F5F5F5;
  border: 1px solid #E6E8ED;
  .process-list{
    background-color: #fff;
    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
    li{
      color: #0C0E1E;
      &.active-li,
      &:hover{
        background-color: #E8F2FF;
      }
    }

  }
  .process-info-txt{
    color: #0C0E1E;
    span{
      color: #545B65;
    }
  }
}

[data-theme=light] .head-container{
  margin: 20px 0 !important;
}
.process-dep-container{
  min-height: calc(100vh - 300px);
}
.head-container{
  display: flex;
  justify-content: space-between;

  .head-left{
    width: 342px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    ::v-deep .el-button--mini{
      padding: 7px;
    }
  }
  .head-right{
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .filter-item{
    margin-right: 0;
  }
}
.process-dep-main{
  display: flex;
  justify-content: flex-start;
  height: calc(100vh - 283px);

  .process-list{
    width: 342px;
    li{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      p{
        flex: 1;
      }
      span{
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        &.process-on{
          background-color: #3FE246;
        }
        &.process-off{
          background-color: #ED4A41;
        }
      }

    }
  }
  .process-info{
    flex: 1;
    padding:10px 30px;
    .process-info-txt{
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 30px;
      margin-bottom: 10px;
      .info-left{
        width: 50%;
      }
      .info-right{
        width: 50%;
        text-align: right;
      }

    }
    .process-info-img{
      height: calc(100vh - 374px);
      background-color: #fff;
      border: 1px solid #E6E8ED;
      overflow: hidden;
      & img{
        display: block;
        width: 100%;
      }
    }
  }
}
</style>