shujuju/ruoyi-ui/src/components/todoProcess/index.vue

<template>
  <!-- 待办流程 -->
  <div class="TodoProcess">
    <div class="btnArea">
      <el-button type="primary" plain icon="el-icon-search" size="mini"  @click="searchData.page = 1;queryLists()">查询</el-button>
      <el-button type="primary"  icon="el-icon-refresh-left" size="mini" ghost @click="openModal(2)">转派</el-button>
    </div>
    <FormItemComponent
      class="form"
      :formItemLists="formLists"
      :buttonType="false"
      @formChange="formChange"
    ></FormItemComponent>
   <StandardTabletwo
     class="table tabgeu"
     :currentPage="searchData.page"
     :pageSize="searchData.pageSize"
     :total="total"
     :columns="columns"
     :data="data"
     :standardTableEvent="standardTableEvent"
     style="height: 400px;"
   ></StandardTabletwo>
    <Modal
      v-model="openControl"
      :title="modaltitle"
      :mask="true"
      :mask-closable="false"
      :width="852"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <div class="modalCotent">
        <mutipleSelectPop
          ref="dialogtest"
          :loading="loading"
          :resultData="resultData"
          :isUse="false"
          :isMutiple="false"
          :isCallInterface="openControl"
          @getResult="getResult"
        ></mutipleSelectPop>
      </div>
    </Modal>
    <!-- 详情弹框 -->
    <Modal
      v-model="modalShow"
      title="流程详情"
      :width="861"
      :closable="true"
      :mask="true"
      :footer-hide="true"
      :mask-closable="false"
    >
      <FlowChartShow v-if="modalShow" :instanceId="instanceId"></FlowChartShow>
    </Modal>
  </div>
</template>
<script>
import FormItemComponent from "../FormItemComponent";
import ItemComponent from "../ItemComponent";
import StandardTabletwo from "../StandardTabletwo";
import mutipleSelectPop from "../MutipleSelectPop/index.vue";
import FlowChartShow from "../FlowChartShow";
// import { mapState } from "vuex";
// import { mapMutations } from "vuex";
import {
    addGendefini,
    addGendefiniqur,
    addGendefinideal
  } from "@/api/activiti/definition";
export default {
  name: "TodoProcess",
  components: {
    FormItemComponent,
    StandardTabletwo,
    mutipleSelectPop,
    FlowChartShow,

  },
  props: {
    tabalive: { type: String, default: "" }
  },
  data() {
    return {
      modaltype: 0,
      openControl: false, //弹框是否显示控制
      modaltitle: "", //弹框标题
      //待办-同意意见/驳回意见
      agree: "",
      //待办-驳回下拉数据
      ApprovalData: [],
      selectValue: "", //选中的数据
      //表单配置
      formLists: [
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "工作流编号",
            filed: "instanceId",
            props: {
              regx: /^[0-9]*$/
            },
            event:{
              'keydown': (event) => {
                if(event.keyCode === 13){
                  this.searchData.page = 1;
                  this.queryLists()
                }
              }
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "查询索引",
            filed: "businessNumber",
            event:{
              'keydown': (event) => {
                if(event.keyCode === 13){
                  this.searchData.page = 1;
                  this.queryLists()
                }
              }
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "select",
            title: "单据类型",
            filed: "businessType",
            options: [
              { value: 0, label: "发送成功" },
              { value: 1, label: "发送失败(待发送)" },
              { value: 2, label: "消费成功" },
              { value: 3, label: "消费失败(待消费)" }
            ]
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "DatePicker",
            title: "开始时间",
            filed: "createTime"
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "节点名称",
            filed: "nodeName",
            event:{
              'keydown': (event) => {
                if(event.keyCode === 13){
                  this.searchData.page = 1;
                  this.queryLists()
                }
              }
            }
          }
        }
      ],
      //查询条件
      searchData: {
        page: 1,
        pageSize: 10,
        searchType: "0,1",
        excuStatus: 0,
        userId: null,
        createTime: []
      },
      //表格数据
      total: 0,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "工作流编号",
          key: "instanceId"
        },
        {
          title: "查询索引",
          key: "businessNumber"
        },
        {
          title: "单据类型",
          key: "businessName"
        },
        {
          title: "模板名称",
          key: "moduleName"
        },
        {
          title: "节点名称",
          key: "nodeName"
        },
        {
          title: "审批人",
          key: "approverValue",
          render: (h, params) => {
            return h(
              "p",
              {
                style: {
                  maxWidth: "160px",
                  overflow: "hidden",
                  "text-overflow": "ellipsis",
                  "white-space": "nowrap"
                }
              },
              params.row.approvers.join(",")
            );
          }
        },
        {
          title: "发起人",
          key: "initiatorName"
        },
        {
          title: "开始时间",
          key: "createTime"
        },
        {
          title: "消耗时长",
          key: "durationTime"
        },
        {
          title: "流程状态",
          key: "processStatusName"
        },
        {
          title: "详情",
          fixed: "right",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "rgba(16, 142, 233, 1)",
                  cursor: "pointer"
                },
                on: {
                  click: () => {
                    console.log(params.row.instanceId)
                    this.modalShow = true;
                    this.instanceId = params.row.instanceId;
                  }
                }
              },
              "流程进度"
            );
          }
        }
      ],
      data: [],
      standardTableEvent: {
        "on-change": page => {
          this.searchData.page = page;
          this.queryLists();
        },
        "on-page-size-change": pageSize => {
          this.searchData.page = 1;
          this.searchData.pageSize = pageSize;
        },
        "on-select": (selection, row) => {
          //表格行选中事件
          let self = this;
          self.data.map(item => {
            if (item.id === row.id) {
              item._check = true;
            }
          });
        },
        "on-select-cancel": (selection, row) => {
          //表格行取消事件
          let self = this;
          self.data.map(item => {
            if (item.id === row.id) {
              item._check = false;
            }
          });
        },
        "on-select-all": selection => {
          //表格行全部选中
          let self = this;
          self.data.map(item => {
            item._check = true;
          });
        },
        "on-select-all-cancel": selection => {
          //表格行全部取消
          let self = this;
          self.data.map(item => {
            item._check = false;
          });
        }
      },
      loading: false, // z最大loading
      resultData: {}, // 选中结果
      open: false, // 是否打开
      selectRow: {}, //选中的行
      obj: {}, //传给table的对象
      modalShow: false,
      instanceId: null
    };
  },
  computed: {
    // ...mapState(["userInfo"])
  },
  watch: {
    tabalive(newVal, oldVal) {
      if (newVal === "待办流程") {
        this.getselectOption();
        this.queryLists();
      }
    }
  },
  methods: {
    // ...mapMutations(["currentChange", "checkDetailsOpenWindow"]),
    //业务关系下拉数据
    getselectOption() {
      addGendefini().then(res => {
        if (res.resultCode === 0) {
          this.formLists.forEach(outer => {
            if (outer.item.filed === "businessType") {
              outer.item.options = res.data.relations.map(item => {
                item.value = item.businesskey;
                item.label = item.businessName;
                return item;
              });
            }
          });
        }
      });
    },
    ////查询
    queryLists() {
      var that = this
      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;
      var that = this
      addGendefiniqur(obj).then(res => {
        console.log(res.resultCode)
        // that.data = res.data.records
        if (res.resultCode === 0) {
          console.log(1)
          // let data = res.data.data;
          this.total = res.total;
          this.data = res.data.records;
          console.log(res.data.records,23456)
          // console.log(this.data,2345)
        }
      console.log(this.data,2345)
      });
    },
    formChange(data) {
      //表单数据修改时，修改searchData数据
      this.searchData = Object.assign({}, this.searchData, data);
      if (
        Object.prototype.toString.call(this.searchData.businessType) ===
          "[object Array]" &&
        this.searchData.businessType.length === 0
      ) {
        delete this.searchData.businessType;
      }

    },
    //0同意/1驳回、2转派
    batchoperate() {
      let self = this;
      let sendData = {};
      sendData.ids = "";
      self.data.map(item => {
        if (item._check) {
          sendData.ids += item.id + ",";
        }
      });
      sendData.ids = sendData.ids.substring(0, sendData.ids.length - 1);
      if(this.resultData.list.length>0){
         sendData.delegateId = this.resultData.list[0].ID;
      }else{
        this.$message({
                 message: "请选择转派人员",
                 type: 'warning'
               });
        // this.$Message.warning("请选择转派人员");
        return
      }
      // sendData.userId = this.userInfo.userId;
      addGendefinideal(sendData).then(res => {
        let data = res;
        if (data.resultCode === 0) {
          this.queryLists();
          this.msgSuccess(data.resultMsg);
          // this.$Message.success();
        } else {
          this.$message({
                   message: data.resultMsg,
                   type: 'warning'
                 });
          // this.$Message.warning(data.resultMsg);
        }
      });
    },
    getResult(data) {
      this.resultData = Object.assign({}, data);
    },
    ok() {
      this.batchoperate();
      // if (this.modaltype === 3) {
      //   this.setAgent();
      // } else {
      //   this.batchoperate();
      // }
    },
    cancel() {
      if(this.resultData.list){
        this.resultData.list=[];
        this.resultData.total=0;
      }
      this.openControl = false; //关闭弹框
    },
    openModal(type) {
      this.modaltype = type;
      type === 2 || type === 3
        ? (this.modaltitle = "选择转派人")
        : (this.modaltitle = "选择审批人");
      let tableSelectd = [];
      this.data.map(item => {
        if (item._check) {
          tableSelectd.push(item);
        }
      });
      if (tableSelectd.length > 0) {
        this.openControl = true;
        if(this.resultData.list){
        this.resultData.list=[];
        this.resultData.total=0;
      }
      } else {
         this.$message({
                  message: '请选择单据',
                  type: 'warning'
                });
        // this.$Message.warning("请选择单据");
      }
    },
    onRowClick(row, index, vm) {
      this.selectRow = Object.assign(this.selectRow, row);
    }
  },
  created() {
    this.getselectOption();
    this.queryLists();
  },
  mounted() {
    // this.getselectOption();
    // this.queryLists();
    console.log(this.searchData,8765)
  }
};
</script>
<style lang="scss">
.TodoProcess {
  width: 100%;
  display: flex;
  flex-direction: column;
  .btnArea {
    margin-bottom: 10px;
    .burgeon-btn {
      margin-right: 9px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .form {
    margin-bottom: 16px;
  }
  .table {
    flex: 1;
  }
  .tabgeu{
    height: 400px !important;
  }
}
.modalCotent {
  .burgeon-tree {
    overflow-y: auto;
  }
}
</style>