vue-element-admin目录数字

vue-element-admin目录数字

创建allTypeNum.js

// 导入页面api
import { listWaitTasks } from '@/api/project'
import {queryDraftList} from '@/api/project'
import {listBusinessInfo} from '@/api/project'
const state = {
  allTypeNum: {
    bpmnDrafts: 0,
    bpmnToDoWork: 0,
    bpmnWorkDone: 0,
    bpmnProcessSubmitted: 0,
    bpmnProcessRevoked: 0,
    bpmnProcessPassed: 0
  }
}

// 监听事件
const mutations = {
  // 待办
  bpmnToDoWork_num: (state, num) => {
    state.allTypeNum.bpmnToDoWork = num
  },
  // 草稿箱
  draft_num: (state, num) => {
    state.allTypeNum.bpmnDrafts = num
  },
  // 全部
  listBusinessInfo_num: (state, num) => {
    state.allTypeNum.bpmnWorkDone = num
  }

}
// 流程任务中心数据调用
const actions = {
  // 待办
  bg_leftBadge({ commit }) {
    listWaitTasks().then(response => {
      if (response.status === 'success') {
          commit('bpmnToDoWork_num', response.total)
      }
    })
  },

  // 草稿箱
  draft_leftBadge({ commit }) {
    queryDraftList().then(response => {
      if (response.status === 'success') {
        commit('draft_num', response.total)
      }
    })
  },

  // 全部
  listBusinessInfo_leftBadge({ commit }) {
    listBusinessInfo().then(response => {
      if (response.status === 'success') {
        commit('listBusinessInfo_num', response.total)
      }
    })
  }

}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

<template>

</template>
<script>
  import {mapGetters} from 'vuex'
  export default {
 			 data(){
  			}
		    computed: {
      			...mapGetters(['allTypeNum'])
    },
       mounted() {
     	 this.my()
    },
    methods: {
      my(){
        // 待办
        this.$store.dispatch('allTypeNum/bg_leftBadge')

        // 草稿箱
        this.$store.dispatch('allTypeNum/draft_leftBadge')

        // 全部
        this.$store.dispatch('allTypeNum/listBusinessInfo_leftBadge')
      }

    }
}
</script>

<!--
 * @Description: 草稿箱页面
 * @Author: lijinghailjh@163.com
 * @Date: 2021/8/19
 -->
<template>
  <div class="app-container">
<!--    表格v2.0-->
    <el-row class="formBox" style="height: 500px">
      <dms-table
        id="pbTable"
        ref="pbTable"
        :data = "gridData"
        url="bpm/work/flowCtrl/queryDraftList.do"
        :columns="tableColumns"
        :toolbar="nullConfig">

        <template v-slot:operation="{row, column}">
          <el-button @click="handleModify(row)">编辑</el-button>
        </template>
      </dms-table>
    </el-row>

    <create-supply-source :dialogShow="supplySourceDialogInfo.visible"
                          v-if="supplySourceDialogInfo.visible"
                          :openmode="supplySourceDialogInfo.openmode"
                          :draft-id="supplySourceDialogInfo.draftId"
                          @dialogShowChange="supplySourceDialogInfo.visible=false"></create-supply-source>

    <create-supply-HT :dialogShow="supplyHTDialogInfo.visible"
                      v-if="supplyHTDialogInfo.visible"
                      :openmode="supplyHTDialogInfo.openmode"
                      :draft-id="supplyHTDialogInfo.draftId"
                      @dialogShowChange="supplyHTDialogInfo.visible=false"></create-supply-HT>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import createSupplySource from '@/views/gf/components/createSupplySource'
import {
  queryDraftList
} from '@/api/project'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import dmsTable from '@/components/DmsTable/DmsTable'
import createSupplyHT from '@/views/gf/components/createSupplyHT'

export default {
  name: 'draft',
  components: { Pagination, createSupplySource, dmsTable, createSupplyHT },
directives: { waves },
  filters: {

  },
  computed: {
    ...mapGetters(['allTypeNum'])
  },
  data() {
    return {
      myNum: null,
      gridData: [],
      tableData: null,
      nullConfig: null,
      tableColumns: [
        {
          field: 'type',
          title: '流程类型',
          width: 100,
          fixed: 'left',
          align: 'center'
        },
        {
          field: 'title',
          title: '主题',
          fixed: 'left',
          align: 'center'
        },
        {
          field: 'description',
          title: '描述',
          fixed: 'left',
          align: 'center'
        },
        {
          field: 'createTime',
          title: '创建日期',
          fixed: 'left',
          align: 'center'
        },
        {
          field: 'lastUpdateTime',
          title: '最近修改',
          fixed: 'left',
          align: 'center'
        },
        {
          field: 'currentTask',
          title: '当前状态',
          fixed: 'left',
          align: 'center'
        },
        {
          field: 'operation',
          title: '操作',
          slots: {
            default: 'operation'
          },
          align: 'center'
        }
      ],
      draftList: [],
      queryCondition: {
        keys: '',
        pageSize: -1,
        pageIndex: 1,
        total: 0
      },
      listLoading: false,
      supplySourceDialogInfo: {
        visible: false,
        openmode: 'draft',
        draftId: ''
      },
      supplyHTDialogInfo: {
        visible: false,
        openmode: 'draft',
        draftId: ''
      }
    }
  },
  mounted() {
    // this.myqueryDraftList()
    this.queryDraftList()
  },
  methods: {
    onQuery() {
      this.$refs.draftTable.reload()
    },

    setLeftBadge(num) {
      var a = this.allTypeNum
      a.bpmnDrafts = num
      this.$store.commit('allTypeNum/draft_num', a)
    },
    queryDraftList() {
      const self = this
      queryDraftList(this.queryCondition).then(function(res) {
        self.draftList = res.data
        self.setLeftBadge(res.tooltip)
      })
    },

    handleModify(row) {
      if (row.processKey === 'supplierProjectReview') {
        this.supplySourceDialogInfo.draftId = row.id
        this.supplySourceDialogInfo.visible = true
      } else if (row.processKey === 'homeProjectReview') {
        console.log(row)
        this.supplyHTDialogInfo.draftId = row.id
        this.supplyHTDialogInfo.visible = true
      }
    },
    handleDelete(row) {

    }
  }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 200px;
}
.minusWidthTo60 {
  width: 80%;
  margin-right: 10px;
}
.el-dialog__header {
  text-align: center;
}
.el-form-item__content {
  margin-right: 20px;
}

.el-dialog__wrapper .el-select,
.el-dialog__wrapper .el-date-editor {
  width: 100% !important;
}
.line {
  text-align: center;
}
.powerDialog /deep/ .el-dialog .el-dialog__body {
  padding: 0 20px 30px !important;
}
.powerHeadLine.el-divider--horizontal {
  margin: 0 0 24px;
}
</style>

效果图