cloud-web-corejs 1.0.128 → 1.0.130

package/src/views/user/wf/wfReport/index.vue

@@ -0,0 +1,448 @@
+<template>
+  <div id="containt">
+    <div class="filter-btns">
+      <el-select class="f-btn" v-model="formData.dateRange" @change="handleSelectChange">
+        <el-option :label="$t1('本日')" :value="1"></el-option>
+        <el-option :label="$t1('本周')" :value="2"></el-option>
+        <el-option :label="$t1('本月')" :value="3"></el-option>
+        <el-option :label="$t1('本年')" :value="4"></el-option>
+      </el-select>
+      <el-select
+        class="f-btn"
+        v-model="formData.stat"
+        :placeholder="$t2('全部状态', 'components.wf.wfReport.allStatus')"
+        clearable
+        @clear="formData.stat = null"
+        @change="handleSelectChange"
+      >
+        <el-option
+          :label="$t2('审核中', 'components.wf.wfStatus1')"
+          :value="1"
+        ></el-option>
+        <el-option
+          :label="$t2('已完成', 'components.wf.wfStatus2')"
+          :value="2"
+        ></el-option>
+        <el-option
+          :label="$t2('已驳回', 'components.wf.wfStatus3')"
+          :value="3"
+        ></el-option>
+      </el-select>
+    </div>
+    <div class="sum-statistics">
+      <div class="item">
+        <p>总流程数</p>
+        <b>{{ countData.total || 0 }}</b>
+        <!-- <p class="f-gray">较上月增长 12%</p> -->
+        <i class="ico iconfont icon-liuchengshu"></i>
+      </div>
+      <div class="item">
+        <p>快速处理</p>
+        <b>{{ countData.count_1 || 0 }}</b>
+        <p class="f-gray"><1天完成</p>
+        <i class="ico iconfont icon-kuaisuchuli"></i>
+      </div>
+      <div class="item">
+        <p>正常处理</p>
+        <b>{{ countData.count_1_3 || 0 }}</b>
+        <p class="f-gray">1-3天完成</p>
+        <i class="ico iconfont icon-zhengchangchuli"></i>
+      </div>
+      <div class="item">
+        <p>缓慢处理</p>
+        <b>{{ countData.count_3_7 || 0 }}</b>
+        <p class="f-gray">3-7天完成</p>
+        <i class="ico iconfont icon-huanmanchuli"></i>
+      </div>
+      <div class="item">
+        <p>超时处理</p>
+        <b>{{ countData.count_7 || 0 }}</b>
+        <p class="f-gray">>7天完成</p>
+        <i class="ico iconfont icon-chaoshichuli"></i>
+      </div>
+    </div>
+    <el-row style="margin: 0 -5px">
+      <el-col :span="16">
+        <el-card class="box-style1">
+          <div slot="header" class="clearfix">
+            <span>流程详情列表</span>
+          </div>
+          <div style="height: 100%">
+            <vxe-grid ref="table-m1" v-bind="vxeOption" :data="tableData"> </vxe-grid>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-style1">
+          <div slot="header" class="clearfix">
+            <span>节点详情</span>
+          </div>
+          <div class="node-box">
+            <div class="info" v-if="currentRow.name">
+              <p class="tit">{{ currentRow.name }}</p>
+              <p>总耗时: {{ currentRow.duration }}分钟</p>
+              <el-tag type="warning" v-if="currentRow.stat === 1">{{
+                $t2("审核中", "components.wf.wfStatus1")
+              }}</el-tag>
+              <el-tag type="success" v-if="currentRow.stat === 2">{{
+                $t2("已完成", "components.wf.wfStatus3")
+              }}</el-tag>
+              <el-tag type="danger" v-if="currentRow.stat === 3">{{
+                $t2("已驳回", "components.wf.wfStatus2")
+              }}</el-tag>
+            </div>
+            <el-steps direction="vertical" :active="1" class="step-box3">
+              <el-step v-for="(row, index) in nodeList" :key="index">
+                <div slot="title">
+                  <div class="name">{{ row.task_name }}</div>
+                  <div class="a-time">耗时: {{ row.duration }}分钟</div>
+                </div>
+                <div slot="description">
+                  <p>
+                    <span class="use">{{ row.candidate_names }}</span>
+                    <span class="time">{{ row.approve_time }}</span>
+                  </p>
+                  <p v-if="taskStatuses[row.type]" :class="taskStatuses[row.type].class">
+                    {{ taskStatuses[row.type].value }}
+                  </p>
+                  <p v-if="row.opinion">审批意见：{{ row.opinion }}</p>
+                </div>
+              </el-step>
+            </el-steps>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import scriptHttpMixin from "@base/components/xform/mixins/scriptHttp";
+export default {
+  name: "wf_report:index",
+  mixins: [scriptHttpMixin],
+  data() {
+    return {
+      vxeOption: {},
+      serviceName: "sf-cloud-user",
+      tableData: [],
+      countData: {},
+      currentRow: {},
+      nodeList: [],
+
+      taskStatuses: {
+        start: {
+          class: "f-blue",
+          value: this.$t2("开始", "components.wf.startStatus"),
+        },
+        approve: {
+          class: "f-orgn",
+          value: this.$t2("待审批", "components.wf.approveStatus"),
+        },
+        submit: {
+          class: "f-green",
+          value: this.$t2("同意", "components.wf.submitStatus"),
+        },
+        reject: {
+          class: "f-red",
+          value: this.$t2("驳回", "components.wf.rejectStatus"),
+        },
+        transfer: {
+          class: "f-green",
+          value: this.$t2("转办", "components.wf.transferStatus"),
+        },
+        addIncreaseSign: {
+          class: "f-green",
+          value: this.$t2("加签", "components.wf.addIncreaseSignStatus"),
+        },
+        revoke: {
+          class: "f-red",
+          value: this.$t2("撤回", "components.wf.revokeStatus"),
+        },
+        end: {
+          class: "f-gray",
+          value: this.$t2("结束", "components.wf.endStatus"),
+        },
+      },
+      formData: {
+        dateRange: 3,
+        stat: null,
+      },
+    };
+  },
+  mounted() {
+    this.initTableList();
+    this.loadWfSummaryCount();
+  },
+  methods: {
+    searchEvent() {
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    initTableList() {
+      let that = this;
+      let formCode = this.$route.query.formCode;
+      let tableOption = {
+        vue: this,
+        tableRef: "table-m1",
+        tableName: "user-wf-report-index-m1",
+        path: `/${this.serviceName}/bd_api/intf/wfSummaryList`,
+        param: () => {
+          return {
+            ...this.formData,
+          };
+        },
+        columns: [
+          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
+          { field: "obj_type_name", title: "流程类型", width: 150, fixed: "left" },
+          { field: "name", title: "流程主题", width: 180 },
+          {
+            field: "stat",
+            title: "状态",
+            width: 150,
+            slots: {
+              default: ({ row }) => {
+                if (row.stat === 1) {
+                  return [
+                    <el-tag type="warning">
+                      {this.$t2("审核中", "components.wf.wfStatus1")}
+                    </el-tag>,
+                  ];
+                } else if (row.stat === 2) {
+                  return [
+                    <el-tag type="success">
+                      {this.$t2("已完成", "components.wf.wfStatus2")}
+                    </el-tag>,
+                  ];
+                } else if (row.stat === 3) {
+                  return [
+                    <el-tag type="info">
+                      {this.$t2("已驳回", "components.wf.wfStatus3")}
+                    </el-tag>,
+                  ];
+                }
+              },
+            },
+          },
+          { field: "task_name", title: "当前节点", width: 180 },
+          {
+            field: "candidate_names",
+            title: "当前处理人",
+            width: 180,
+            slots: {
+              default: ({ row }) => {
+                return [
+                  <div class="txt-mid">
+                    <i class="iconfont icon-dangqianchuliren"></i>
+                    <sapn>{row.candidate_names}</sapn>
+                  </div>,
+                ];
+              },
+            },
+          },
+          {
+            field: "duration",
+            title: "总耗时",
+            width: 180,
+            slots: {
+              default: ({ row }) => {
+                return [
+                  <div class="txt-mid">
+                    <i class="iconfont icon-shijian"></i>
+                    <sapn> {row.duration}</sapn>
+                  </div>,
+                ];
+              },
+            },
+          },
+          {
+            field: "task_duration",
+            title: "当前节点耗时",
+            width: 180,
+            slots: {
+              default: ({ row }) => {
+                return [
+                  <div class="txt-mid">
+                    <i class="iconfont icon-shijian"></i>
+                    <sapn> {row.task_duration}</sapn>
+                  </div>,
+                ];
+              },
+            },
+          },
+          {
+            width: 47,
+            fixed: "right",
+            title: "",
+            sortable: false,
+            slots: {
+              default: ({ row }) => {
+                return [
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    onclick={() => {
+                      this.loadWfSummaryNode(row);
+                    }}
+                  >
+                    <el-tooltip
+                      enterable={false}
+                      effect="dark"
+                      content="查看"
+                      placement="top"
+                      popper-class="tooltip-skin"
+                    >
+                      <i class="iconfont icon-dianji" />
+                    </el-tooltip>
+                  </a>,
+                ];
+              },
+            },
+          },
+        ],
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
+        this.vxeOption = opts;
+      });
+    },
+    loadWfSummaryCount() {
+      this.$http({
+        url: `/${this.serviceName}/bd_api/intf/wfSummaryCount`,
+        method: "post",
+        data: {
+          ...this.formData,
+        },
+        success: (res) => {
+          this.countData = res.objx || {};
+        },
+      });
+    },
+    loadWfSummaryNode(row) {
+      this.$http({
+        url: `/${this.serviceName}/bd_api/intf/wfSummaryNode`,
+        method: "post",
+        data: {
+          proc_inst_id: row.proc_inst_id,
+        },
+        success: (res) => {
+          this.currentRow = row;
+          this.nodeList = res.objx || [];
+        },
+      });
+    },
+    clearWfSummaryNode() {
+      this.currentRow = {};
+      this.nodeList = [];
+    },
+    handleSelectChange() {
+      if (this.formData.stat === "") {
+        this.formData.stat = null;
+      }
+      this.loadWfSummaryCount();
+      this.searchEvent();
+      this.clearWfSummaryNode();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+#containt {
+  background: none;
+  padding: 10px 0 0;
+  box-shadow: none;
+}
+.filter-btns {
+  .f-btn {
+    margin-right: 10px;
+  }
+}
+.sum-statistics {
+  display: flex;
+  margin: 10px -5px 0;
+  .item {
+    flex: 1;
+    background: #fff;
+    border: solid 1px #e9e9e9;
+    border-radius: 6px;
+    margin: 0 5px;
+    padding: 10px 14px 8px;
+    font-size: 12px;
+    position: relative;
+    .ico {
+      position: absolute;
+      top: 50%;
+      right: 18px;
+      width: 34px;
+      height: 34px;
+      margin-top: -17px;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 35px;
+      font-size: 16;
+      background: #eff6ff;
+      color: #2f6ffc;
+    }
+    p {
+      margin-bottom: 0;
+    }
+    > b {
+      font-size: 26px;
+      margin: 8px 0 3px;
+      display: inline-block;
+      font-weight: 400;
+    }
+    &:nth-child(2) .ico {
+      background: #faf5ff;
+      color: #ab3dfa;
+    }
+    &:nth-child(3) .ico {
+      background: #f0fdf4;
+      color: #0aa945;
+    }
+    &:nth-child(4) .ico {
+      background: #fff7ed;
+      color: #f5520b;
+    }
+    &:nth-child(5) .ico {
+      background: #fef2f2;
+      color: #e70a15;
+    }
+  }
+}
+::v-deep .box-style1 {
+  margin: 10px 5px 0;
+  .el-card__body {
+    height: calc(100vh - 254px);
+  }
+}
+.node-box {
+  .info {
+    border: solid 1px #e6ebf5;
+    background: #f6faff;
+    border-radius: 4px;
+    padding: 10px 14px;
+    position: relative;
+    font-size: 12px;
+    color: #666666;
+    margin-bottom: 8px;
+    p {
+      margin-bottom: 0;
+    }
+    .el-tag {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      margin-top: -14px;
+    }
+    .tit {
+      font-size: 13px;
+      color: #212121;
+      margin-bottom: 5px;
+    }
+  }
+  .el-steps {
+    height: calc(100vh - 326px);
+    overflow: auto;
+    padding-right: 10px;
+  }
+}
+</style>