aivfo-oa-web/src/views/workbench/workbench.vue

<template>
  <div class="app-container">
    <el-row :gutter="10" >
      <el-col :span="6">
        <el-card class="card" >
          <div style="color: white;">
            <h2>我的待办事项：{{todoTaskList}}</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card" style="background-color: indianred" >
          <div style="color: white">
            <h2>我的项目</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card" style="background-color:steelblue" >
          <div style="color: white;">
            <h2>出勤状态:上班</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card" style="background-color:goldenrod" >
          <div style="color: white;">
            <h2>其他事项</h2>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 50px">
      <el-col :span="24">
        <h3>我的待办列表</h3>
        <el-table
          :data="tableData"
          style="width: 100%" border stripe  size="small">
          <el-table-column  type="index" label="序号" width="80"  align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="任务名称"  align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="hname"
            label="实施医院"  align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="hsytem"
            label="实施系统"  align="center"
            width="160">
          </el-table-column>
          <el-table-column
            prop="content"
            label="实施内容"  align="center"
            min-width="250">
          </el-table-column>
          <el-table-column
            prop="taskName"
            label="当前处理步骤"  align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="flowType"
            label="流程类型"  align="center"
            width="180">
          </el-table-column>
          <el-table-column  align="center"
            prop="createTime"
            label="创建时间" width="200">
          </el-table-column>
          <el-table-column prop="op" width="200" label="操作"  align="center">
            <template scope="scope">
              <el-button size="mini"  type="success" @click="searchWorkFlow(scope.row)">查阅流程</el-button>
              <el-button size="mini" type="primary" @click="auditFlow(scope.row)">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog  :visible.sync="workFlowVisble" width="75%" title="实施流程明细">
      <el-steps :active="activeFlow" finish-status="success" align-center  >
        <el-step title="开始" />
        <el-step title="项目启动会" />
        <el-step title="发货" />
        <el-step title="物流签收" />
        <el-step title="进入现场" />
        <el-step title="设备安装" />
        <el-step title="系统调试" />
        <el-step title="操作培训" />
        <el-step title="现场值守" />
        <el-step title="离场" />
        <el-step title="实施复盘" />
        <el-step title="文件归档" />
        <el-step title="结束" />
      </el-steps>
    </el-dialog>

    <!--处理实施工作任务--->
    <el-dialog title="审批处理" :visible.sync="editEnforceFormVisible" width="45%" @click="closeEnforceDialog">
      <el-form label-width="120px" :model="enforceForm" >
        <el-descriptions  title="" :column="2"  border>
          <el-descriptions-item>
            <template slot="label">
              项目名称
            </template>
            {{enforceFlow.name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              项目总负责人
            </template>
            {{enforceFlow.enforcer}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              实施医院
            </template>
            {{enforceFlow.hno}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              实施系统
            </template>
            {{enforceFlow.hsytem}}
          </el-descriptions-item>
          <el-descriptions-item >
            <template slot="label">
              实施时间
            </template>
            {{enforceFlow.time}}
          </el-descriptions-item>
          <el-descriptions-item >
            <template slot="label">
              实施状态
            </template>
            <span style="color: darkred" v-if="enforceFlow.status===0">待开始</span>
            <span style="color: green" v-else-if="enforceFlow.status===1">进行中</span>
            <span style="color: darkblue" v-else="enforceFlow.status===2">已结束</span>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              当前任务
            </template>
            {{enforceFlow.flowType}}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              实施内容
            </template>
            {{enforceFlow.content}}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
             下个步骤负责人
            </template>
            <el-input size="small" v-model="enforceForm.director" :disabled="true" @keyup.enter.native="openUsers()">
              <el-button @click="openUsers" icon="el-icon-search" slot="append"></el-button>
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              备注说明
            </template>
            <el-input size="small" v-model="enforceForm.remark" type="textarea" :rows="4" ></el-input>
          </el-descriptions-item>

          <el-descriptions-item :span="2">
            <template slot="label">
              文件列表
            </template>
            <el-upload
              ref="upload"
              :action="fileAction"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              name="file">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-descriptions-item>

        </el-descriptions>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEnforceDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitEnforceForm('editForm')">确定处理</el-button>
      </div>
    </el-dialog>


    <el-dialog title="选择人员" :visible.sync="usersVisble" width="30%" @click="closeUserDialog">
      <el-tree
        ref="dept"
        :data="userList"
        node-key="id"
        :props="{label:'name'}" default-expand-all="true">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeUserDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitUserForm('editForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Page/Pagination'
import { completeTask, getPersonalTaskList } from '@/api/meeting/enforce'
import { getDeptUserTree } from '@/api/system/user'
import { deleteFile, uploadFileUrl } from '@/api/file/file'

export default {
  name: 'workbench',
  // 注册组件
  components: {
    Pagination
  },
  data() {
    return {
      usersVisble:false,
      userList:[],
      pageparm: {
        current: 1,
        size: 10,
        total: 0
      },
      tableData: [],
      auditWin:false,
      formData:{

      },
      workFlowVisble:false,
      activeFlow:0,
      todoTaskList:0,
      editEnforceFormVisible:false,
      enforceForm:{
        id:null,
        enforceId:null,
        director:null,
        directorId:null,
        remark:null,
        taskId:null,
        currentStep:null,
        filess:[]
      },
      enforceFlow:{
        name:'',
        enforcer:'',
        time:null,
        hno:null,
        hsytem:null,
        content:'',
        status:0,
        flowType:null
      },
      fileAction:''
    }
  },
  mounted(){
    this.getTaskList();
    this.getDeptUserTrees();
    this.fileAction=uploadFileUrl()
  },
  methods:{
    getDeptUserTrees(){
      getDeptUserTree('').then(res => {
        this.userList = res.data
      });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.current = parm.current
      this.formInline.size = parm.size

    },
    getTaskList(){
      getPersonalTaskList().then(res=>{
        this.tableData=res.data
        this.todoTaskList=this.tableData.length
      })
    },
    searchWorkFlow(row){
      this.workFlowVisble=true
      this.activeFlow=row.step
    },
    closeEnforceDialog(){
      this.editEnforceFormVisible=false
    },
    auditFlow(row){
      this.enforceFlow.name=row.name
      this.enforceFlow.enforcer=row.enforcer
      this.enforceFlow.hno=row.hname
      this.enforceFlow.hsytem=row.hsytem
      this.enforceFlow.content=row.content
      this.enforceFlow.time=row.beginTime+"至"+row.endTime
      this.enforceFlow.status=row.status
      this.enforceFlow.flowType=row.taskName
      this.enforceForm.taskId=row.taskId
      this.enforceForm.currentStep=row.step
      this.enforceForm.enforceId=row.id
      this.editEnforceFormVisible=true
    },
    openUsers(){
      this.usersVisble=true
    },
    submitUserForm(){
      //获取选中的节点
      let node=this.$refs.dept.getCurrentNode();
      if(node==undefined || node==null){
        this.$message({
          message: '请选择数据!',
          type: 'warning'
        });
        return;
      }
      if(node.type!=='u'){
        this.$message({
          message: '请选择人员!',
          type: 'warning'
        });
        return;
      }
      this.enforceForm.director=node.name
      this.enforceForm.directorId=node.id
      this.closeUserDialog();
    },
    closeUserDialog(){
      this.usersVisble=false
    },
    handleRemove(file, fileList){
      let url=file.response.data.url;
      deleteFile(url).then(res => {
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
      });
      this.enforceForm.filess.splice(url);
    },
    handleSuccess(response, file, fileList){
      let fileUrl=response.data.url
      this.enforceForm.filess.push(fileUrl)
    },
    handleError(){
      this.$message({
        message: '上传失败，请稍候再试!',
        type: 'warning'
      });
    },
    submitEnforceForm(){
      let data=this.enforceForm;
      completeTask(data).then(res =>{
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
        this.closeEnforceDialog();
        this.getTaskList();
      });

    }
  }
}
</script>

<style scoped>

.card{
  width: 300px;
  height: 150px;
  background-color: #1ab394;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>