shujuju/ruoyi-ui/src/views/activiti/TemplateManagementLists/index.vue

<template>
  <div class="TemplateManagementLists">
    <div class="listContent">
      <p class="title">模版管理</p>
      <p class="buttonLists">
        <Button type="primary" @click="searchData.page = 1;queryLists()">查询</Button>
        <Button type="fcdefault" :disabled="listsStatus === 1" @click="addTemplate">新建模板</Button>
        <Button type="fcdefault" v-if="listsStatus === 0" @click="templateMigration">模版迁移</Button>
        <Button type="fcdefault" v-if="listsStatus === 1" @click="removeMigration">取消迁移</Button>
        <Button type="fcdefault" v-if="listsStatus === 1" @click="perform">执行</Button>
        <Button type="fcdefault" v-if="listsStatus === 1" @click="performAll">执行全部</Button>
      </p>
      <Alert show-icon closable v-if="listsStatus === 1">依次单击模板可进行多选模板</Alert>
      <FormItemComponent
        class="form"
        :formItemLists="formLists"
        :buttonType="false"
        @formChange="formChange"
      ></FormItemComponent>

      <StandardTable
        class="table"
        :currentPage="searchData.page"
        :pageSize="searchData.pageSize"
        :pageSizeOpts="[20,40,60,80]"
        :total="total"
        :showTable="false"
        :standardTableEvent="standardTableEvent"
      >
      </StandardTable>

      <div class="list">
        <FormItemComponent
          class="listsForm"
          :formItemLists="listsConfig"
          :buttonType="false"
          :readonly="listsStatus === 1"
        ></FormItemComponent>

        <div  class="noData" v-if="listsConfig.length == 0" >
          <span>
            暂无模版
          </span>
        </div>
      </div>
    </div>

    <!-- 模版迁移弹窗 -->
    <Modal
      v-model="migrationModel"
      title="模版迁移"
      mask
      :width="440"
      :mask-closable="false"
      >
      <div class="migrationModelContent">
        <p>
          <Input v-model="serverUrl"  placeholder="请输入目标服务器地址" style="width: 320px" />
        </p>
      </div>

      <p slot="footer">
        <Button :loading="performloading" @click="migrationModel = false">取消</Button>
        <Button :loading="performloading" type="primary" @click="performConfirm">确定</Button>
      </p>
    </Modal>
  </div>
</template>
<script>
import FormItemComponent from '@/components/FormItemComponent';
import ItemComponent from '@/components/ItemComponent';
import StandardTable from '@/components/StandardTable';
import listModalComponent from '@/components/listModalComponent'
// import router from '../config/router.config'
import {  mapMutations,mapState } from 'vuex';
export default {
  name:'TemplateManagementLists',
  components:{FormItemComponent,StandardTable},
  data () {
    return {
      // 状态  0为搜索状态，1为模版迁移状态
      listsStatus:0,
      //表单配置
      formLists:[
        {
          row:1,
          col:1,
          component:ItemComponent,
          item:{
            type:'input',
            title:'模型名称',
            filed:'name',
            event:{
              'keydown': (event) => {
                if(event.keyCode === 13){
                  this.searchData.page = 1
                  this.queryLists()
                }
              }
            }
          }
        },
        {
          row:1,
          col:1,
          component:ItemComponent,
          item:{
            type:'select',
            title:'模版状态',
            filed:'status',
            options: [
              { value: 1, label: '已发布'},
              { value: 0, label: '未发布'},
              { value: 2, label: '已停用'}
            ],
            props:{
              multiple: true,
              multipleType: true
            },
            value:[0,1]
          }
        },
        {
          row:1,
          col:1,
          component:ItemComponent,
          item:{
            type:'DatePicker',
            title:'创建时间',
            filed:'createTime',
            value:[]
          }
        }
      ],
      //查询条件
      searchData:{
        page:1,
        pageSize:20,
        createTime:[],
        status: [0,1]
      },

      //分页数据
      total:0,
      standardTableEvent:{
        'on-change':(page) => {
          this.searchData.page = page
          this.queryLists()
        },
        'on-page-size-change':(pageSize) => {
          this.searchData.page = 1
          this.searchData.pageSize = pageSize
          this.queryLists()
        }
      },
      listsConfig:[  //列表数据
      ],

      // 迁移数据
      selectModal:[],  //选中的迁移模版
      migrationModel:false, //控制模版迁移弹窗
      serverUrl:null,  //目标服务地址
      migrationType:null,  //0为执行  1为执行全部
      performloading:false

    }
  },
  computed:{
    ...mapState({
      currentMenu:(state) =>{
        return  state.currentMenu
      }
    })
  },
  watch:{
    listsStatus () {
      if(this.listsStatus === 0){
        this.selectModal = []
      }
    }
  },
  methods:{
    ...mapMutations(['currentChange','changeKeepAliveArray']),
    formChange (data) {  //表单数据修改时，修改searchData数据
      if(data.status){
        this.formLists[0].item.value = data.name
        this.formLists[1].item.value = data.status
        this.formLists[2].item.value = data.createTime
        // this.formLists = this.formLists.concat([])
      }
      this.searchData = Object.assign({},this.searchData,data)
      if(Object.prototype.toString.call(this.searchData.status) === '[object Array]' && this.searchData.status.length === 0){
        delete this.searchData.searchStatus
        delete this.searchData.status
      }

      // this.queryLists()
    },
    queryLists () {  //查询列表
      if(this.searchData.status && this.searchData.status.indexOf('bSelect-all') >= 0){
        this.searchData.searchStatus = []
      }else{
        this.searchData.searchStatus = this.searchData.status
      }

      if(this.searchData.createTime && this.searchData.createTime[0] && this.searchData.createTime[1]){
        this.searchData.startTime = new Date(this.searchData.createTime[0]).format('yyyy-MM-dd hh:mm')
        this.searchData.endTime = new Date(this.searchData.createTime[1]).format('yyyy-MM-dd hh:mm')
      }else{
        this.searchData.startTime = ''
        this.searchData.endTime = ''
      }

      let obj = Object.assign({},this.searchData)
      delete obj.createTime
      delete obj.status
      this.$network.post('/p/cs/module/search', obj).then((res) => {
        if(res.data.resultCode !== 0){
          return
        }
        let data = res.data.data
        this.total = data.total

        this.listsConfig = data.records.reduce((arr,item) => {
          let items = {
            event:{
              queryLists:() => {
                this.queryLists()
              }
            }
          }
          items = Object.assign(items,item)
          arr.push({
            row:1,
            col:1,
            component:listModalComponent,
            item:items
          })
          return arr
        },[])
      });
    },
    addTemplate () {  //新建模版
      this.changeKeepAliveArray(['TemplateManagementLists'])
      // router.push({ path: '/TemplateManagementNew/-1' })
      this.currentChange({
        path:'/TemplateManagementLists'
      });
    },
    templateMigration () { //模版迁移
      this.listsStatus = 1
    },
    removeMigration () {  //取消迁移
      this.listsStatus = 0
    },
    modalClick (event) {  //模版点击
      let value = event.detail.value
      let items = event.detail.items
      if(value){
        this.selectModal.push(items.id)
      }else{
        this.selectModal.splice(this.selectModal.findIndex(item => item === items.id), 1)
      }
    },
    perform () {  //执行迁移
      if(this.selectModal.length === 0){
        this.$Modal.fcWarning({
          title:'警告',
          content:'请选择需要迁移的模版!',
          mask:true
        })
        return
      }
      this.migrationType = 0
      this.serverUrl = null
      this.migrationModel = true

    },
    performAll () {  //迁移全部
      this.migrationType = 1
      this.serverUrl = null
      this.migrationModel = true
    },
    performConfirm () {  //模版迁移确认
      let obj = {}
      if(!(this.serverUrl.startsWith('http://') || this.serverUrl.startsWith('https://'))){
        this.$Modal.fcWarning({
          title:'警告',
          content:'目标服务器地址必须以http://或者https://开头',
          mask:true
        })
        return
      }
      this.performloading = true
      if(this.migrationType === 0){  //执行选中模版
        obj = {
          moduleIds:this.selectModal.join(',')
        }
      }else{  //执行所有模版
        if(this.searchData.createTime && this.searchData.createTime[0] && this.searchData.createTime[1]){
          this.searchData.startTime = new Date(this.searchData.createTime[0]).format('yyyy-MM-dd hh:mm')
          this.searchData.endTime = new Date(this.searchData.createTime[1]).format('yyyy-MM-dd hh:mm')
        }else{
          this.searchData.startTime = ''
          this.searchData.endTime = ''
        }

        obj = Object.assign({},this.searchData)
      }

      obj.url = this.serverUrl
      this.$network.post('/p/cs/module/migrate', obj)
        .then((res) => {
          if(res.data.resultCode === 0){
            this.$Modal.fcSuccess({
              title:'成功',
              content:res.data.resultMsg,
              onOk: () => {
                this.queryLists()
                this.listsStatus = 0
                this.migrationModel = false
                this.performloading = false
              }
            })

          }else{
            this.performloading = false
          }

        })
    }
  },
  created () {
    //判断首页跳转状态，修改查询条件
    let status = Number(this.$route.query.status)
    if(status){
      this.searchData.status = [status]
      this.formLists[1].item.value = [status]
      this.formLists = this.formLists.concat([])
    }
    this.queryLists()
  },
  mounted () {
    // 监听modal的点击事件
    window.addEventListener('modalClick',this.modalClick)
  },
  beforeDestroy () {
    window.removeEventListener('modalClick', this.modalClick);
  },
  activated () {
    this.queryLists()
  }
}
</script>
<style lang="less" >
.TemplateManagementLists{
  display: flex;
  flex-direction: column;
  .listContent{
    background: white;
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .title{
      font-size:18px;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(81,90,110,1);
      line-height:24px;
      margin-bottom: 16px;
    }

    .buttonLists{
      margin-bottom: 10px;
      >button{
        width: 90px;
        margin-right: 10px;
      }
    }
    .form{
      margin-bottom: 16px;
    }

    .list{
      flex: 1;
      margin-right: -16px;
      overflow: auto;
      position: relative;
      .listsForm{
        border: none;
        padding: 0;
        margin-left: 5px;
        margin-top: 5px;

        .FormItemComponent-item{
          margin-right: 16px;
          margin-bottom: 20px;
        }
      }

      .noData{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 280px;
        height: 292px;
        margin-top: -146px;
        margin-left: -140px;
        background-image: url('~@/assets/images/nodata.png');
        background-size: cover;

        >span{
          position: absolute;
          bottom: 40px;
          left: 20px;
          display: inline-block;
          width: 240px;
          height: 40px;
          text-align: center;
        }
      }
    }

  }
}

.migrationModelContent{
  height: 115px;
  padding: 30px 44px 17px 44px;
  box-sizing: border-box;
}
</style>