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

<template>
  <div class="app-container">
    <el-form :model="formInline" ref="formInline" size="mini" :inline="true">
      <el-form-item label="实施项目名称：">
        <el-input v-model="formInline.name" placeholder="项目名称"></el-input>
      </el-form-item>
      <el-form-item label="所属医院：">
        <el-select size="mini" clearable filterable v-model="formInline.hname" placeholder="请选择医院">
          <el-option v-for="(item,index) in hnos" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属系统：">
        <el-select size="mini" clearable filterable v-model="formInline.hsytem" placeholder="请选择系统">
          <el-option v-for="(item,index) in hsytem" :key="index" :label="item.dictLabel"
                     :value="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="formInline.status" placeholder="状态" clearable>
          <el-option label="待开始" value="0"></el-option>
          <el-option label="进行中" value="1"></el-option>
          <el-option label="已结束" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchData()">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetSearch()">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="createEnforceFlow()">创建实施</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      size="mini"
      style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column label="实施项目名称" prop="name" width="150" align="center">
      </el-table-column>
      <el-table-column label="实施内容" prop="content" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="实施负责人" prop="enforcer" width="90" align="center">
      </el-table-column>
      <el-table-column label="实施医院" prop="hname" width="150" align="center">
      </el-table-column>
      <el-table-column label="实施日期" prop="time" width="180" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.beginTime }}——{{ scope.row.endTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="hsytem" label="所属系统" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="130" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.status===0" style="color: green">待开始</div>
          <div v-else-if="scope.row.status===1" style="color: red">进行中</div>
          <div v-else>已结束</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="op" width="250" align="center">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.status===0" type="primary" @click="startEnforceFlow(scope.row)">
            启动实施
          </el-button>
          <el-button size="mini" v-if="scope.row.status===0" type="success" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button size="mini" v-if="scope.row.status===0" type="danger" @click="deleteEnforce(scope.row)">删除
          </el-button>
          <el-button size="mini" v-if="scope.row.status!==0" type="primary" @click="getEnforceDetail(scope.row)">
            查看实施详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>


    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="40%" @click="closeDialog"
               :close-on-click-modal="false">
      <el-form label-width="120px" :model="editForm" size="mini">
        <el-form-item label="实施项目名称:">
          <el-input size="mini" v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="实施负责人:" prop="recorder" >
          <el-input size="mini" v-model="editForm.enforcer" readonly="true"
                    @keyup.enter.native="openUsers1()">
            <el-button @click="openUsers1()" icon="el-icon-search" slot="append"></el-button>
          </el-input>
        </el-form-item>

        <el-form-item label="实施医院:">
          <el-select size="mini" clearable filterable v-model="editForm.hname" placeholder="请选择医院">
            <el-option v-for="(item,index) in hnos" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实施系统:">
          <el-select size="mini" clearable filterable v-model="editForm.hsytem" placeholder="请选择所属系统">
            <el-option v-for="(item,index) in hsytem" :key="index" :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实施日期:">
          <el-date-picker
            v-model="editForm.times"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实施内容:">
          <el-input size="mini" type="textarea" :rows="4" v-model="editForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button size="mini" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择人员" :visible.sync="users1Visble" width="30%" @click="closeUser1Dialog"
               :close-on-click-modal="false">
      <el-tree
        ref="dept1"
        :data="userList"
        node-key="id"
        :props="{label:'name'}" default-expand-all="true">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeUser1Dialog">取消</el-button>
        <el-button size="mini" type="primary" class="title" @click="submitUser1Form('editForm')">确定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="启动实施流程" :visible.sync="editEnforceFormVisible" width="45%" @click="closeEnforceDialog"
               :close-on-click-modal="false">
      <el-form label-width="120px" :model="enforceForm" size="mini">
        <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: red">待开始</span>
          </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="mini" 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>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeEnforceDialog">取消</el-button>
        <el-button size="mini" type="primary" class="title" @click="submitEnforceForm('editForm')">启动流程</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择人员" :visible.sync="usersVisble" width="30%" @click="closeUserDialog"
               :close-on-click-modal="false">
      <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="mini" @click="closeUserDialog">取消</el-button>
        <el-button size="mini" type="primary" class="title" @click="submitUserForm('editForm')">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="实施详情" :visible.sync="enforceFlowVisble" width="85%" @click="enforceFlowDialog"
               :close-on-click-modal="false">
      <el-table
        border
        :data="enforceTableData"
        stripe
        style="width: 100%;margin-bottom: 25px" size="mini">
        <el-table-column type="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column
          prop="stepTitle"
          label="步骤名称"
          width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="director"
          label="执行人" align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="createTime" align="center"
          label="创建时间" width="130">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        <el-table-column
          prop="completionTime" align="center"
          label="完成时间" width="130">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.completionTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="files" label="文件列表" width="350">
          <template slot-scope="scope">
            <span>
              <a :href="item.url" v-for="(item,index) in scope.row.fileDatas" style="color: darkgreen">
                <div v-html="item.fileName"></div>
              </a>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>

import Pagination from '@/components/Page/Pagination'
import {
  getEnforcesByPage,
  getHosInfos,
  getHsystems,
  addEnforce,
  deleteEnforce,
  startEnforceFlow,
  getEnforceFlowsByEnforceId
} from '@/api/meeting/enforce'
import {getDeptUserTree} from '@/api/system/user'

export default {
  name: 'enforceflow',
  data() {
    return {
      enforceFlowVisble: false,
      usersVisble: false,
      tableData: [],
      pageparm: {
        current: 1,
        size: 10,
        total: 0
      },
      formInline: {
        current: 1,
        size: 10,
        name: null,
        hname: null,
        hsytem: null,
        status: null

      },
      editForm: {
        id: null,
        name: '',
        hname: null,
        hsytem: null,
        enforcer: null,
        content: null,
        times: null
      },
      editFormVisible: false,
      title: '创建实施项目',
      hnos: [],
      hsytem: [],
      editEnforceFormVisible: false,
      enforceForm: {
        id: null,
        enforceId: null,
        director: null,
        directorId: null,
        remark: null,
      },
      enforceFlow: {
        name: '',
        enforcer: '',
        time: null,
        hno: null,
        hsytem: null,
        content: ''
      },
      fileList: [],
      userList: [],
      userForm: {
        show: false
      },
      enforceFLows: [],
      maxStep: 0,
      enforceTableData: [],
      users1Visble: false,
      users1Flag: '',
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  mounted() {
    this.getHosInfos()
    this.getHsystems()
    this.getData(this.formInline)
    this.getDeptUserTrees()
  },
  methods: {
    // 分页插件事件
    callFather(parm) {
      this.formInline.current = parm.current
      this.formInline.size = parm.size
      this.getData(this.formInline)
    },
    getData(data) {
      let searchParams = data;
      getEnforcesByPage(searchParams).then(response => {
        this.tableData = response.data.records;
        this.pageparm.total = response.data.total;
      });
    },
    getHosInfos() {
      getHosInfos().then(res => {
        this.hnos = res.data
      })
    },
    getHsystems() {
      getHsystems().then(res => {
        this.hsytem = res.data
      })
    },
    closeDialog() {
      this.editFormVisible = false
    },
    resetSearch() {
      this.formInline = {
        current: 1,
        size: 10,
        name: null,
        hname: null,
        hsytem: null,
        status: null
      }
      this.getData(this.formInline);
    },
    searchData() {
      this.getData(this.formInline);
    },
    createEnforceFlow() {
      this.title = '创建实施项目'
      this.editFormVisible = true
      this.editForm.id = null
    },
    submitForm() {
      let data = this.editForm;
      addEnforce(data).then(response => {
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
        this.closeDialog();
        this.getData(this.formInline);
      });
    },
    deleteEnforce(row) {
      let id = row.id;
      deleteEnforce(id).then(response => {
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
        this.getData(this.formInline);
      })
    },
    getEnforceDetail(row) {
      let id = row.id;
      getEnforceFlowsByEnforceId(id).then(response => {
        this.enforceFLows = response.data.dtos;
        this.maxStep = response.data.maxStep
        this.enforceTableData = response.data.dtos

      })
      this.enforceFlowVisble = true
    },
    handleEdit(row) {
      this.editForm = row
      this.editForm.times = [row.beginTime, row.endTime]
      this.editFormVisible = true
    },
    startEnforceFlow(row) {

      this.editEnforceFormVisible = true
      this.enforceFlow.name = row.name
      this.enforceFlow.enforcer = row.enforcer
      this.enforceFlow.time = row.beginTime + '至' + row.endTime
      this.enforceFlow.content = row.content
      this.enforceFlow.hno = row.hname
      this.enforceFlow.hsytem = row.hsytem

      this.enforceForm.enforceId = row.id

    },
    closeEnforceDialog() {
      this.editEnforceFormVisible = false
    },
    submitEnforceForm() {
      let user = this.enforceForm.director;
      if (user == null) {
        this.$message({
          message: '请选择人员!',
          type: 'warning'
        });
        return;
      }
      let data = this.enforceForm;
      startEnforceFlow(data).then(res => {
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
      })
      this.closeEnforceDialog();
      this.resetSearch();

    },
    closeUserDialog() {
      this.usersVisble = false
    },
    getDeptUserTrees() {
      getDeptUserTree('').then(res => {
        this.userList = res.data
      });
    },
    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();
    },
    enforceFlowDialog() {
      this.enforceFlowVisble = false
    },
    closeUser1Dialog(){
      this.users1Visble=false
    },
    openUsers1(){
      this.users1Visble=true
    },
    submitUser1Form(){
      let node = this.$refs.dept1.getCurrentNode();
      if (node === undefined || node === null) {
        this.$message({
          message: '请选择数据!',
          type: 'warning'
        });
        return;
      }
      if (node.type !== 'u') {
        this.$message({
          message: '请选择人员!',
          type: 'warning'
        });
        return;
      }
      this.editForm.enforcer = node.name
     // this.enforceForm.directorId = node.id
      this.closeUser1Dialog();
    }


  }
}
</script>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>