cloud-web-corejs 1.0.54-dev.781 → 1.0.54-dev.783

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

@@ -1,625 +1,625 @@
-<template>
-  <div id="containt">
-    <div class="filter-btns">
-      <el-select
-        class="f-btn"
-        v-model="formData.dateRange"
-        @change="handleSelectChange"
-        clearable
-        style="width: 128px !important"
-      >
-        <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="$t1('全部状态')"
-        clearable
-        @clear="formData.stat = null"
-        @change="handleSelectChange"
-        style="width: 128px !important"
-      >
-        <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-select>
-      <el-select
-        class="f-btn"
-        v-model="formData.objTypeCode"
-        :placeholder="$t1('流程类型')"
-        clearable
-        @change="handleSelectChange"
-        style="width: 128px !important"
-      >
-        <el-option
-          v-for="(item, index) in objTypeList"
-          :key="index"
-          :label="item.objTypeName"
-          :value="item.objTypeCode"
-        ></el-option>
-      </el-select>
-      <el-input
-        v-model="formData.name"
-        :placeholder="$t1('流程主题')"
-        style="width: 128px !important"
-      ></el-input>
-      <span class="button-sty">
-        <el-date-picker
-          v-model="formData.startStartTime"
-          type="date"
-          :placeholder="$t1('启动时间（开始）')"
-          size="small"
-          clearable
-          value-format="yyyy-MM-dd"
-          :picker-options="$baseStartPickerOptions(formData.endStartTime)"
-          style="width: 128px !important"
-        ></el-date-picker>
-        <span>-</span>
-        <el-date-picker
-          v-model="formData.endStartTime"
-          type="date"
-          :placeholder="$t1('启动时间（结束）')"
-          size="small"
-          clearable
-          value-format="yyyy-MM-dd"
-          :picker-options="$baseEndPickerOptions(formData.startStartTime)"
-          style="width: 128px !important"
-        ></el-date-picker>
-      </span>
-      <span class="button-sty">
-        <el-date-picker
-          v-model="formData.startEndTime"
-          type="date"
-          :placeholder="$t1('结束时间（开始）')"
-          size="small"
-          clearable
-          value-format="yyyy-MM-dd"
-          :picker-options="$baseStartPickerOptions(formData.endEndTime)"
-          style="width: 128px !important"
-        ></el-date-picker>
-        <span>-</span>
-        <el-date-picker
-          v-model="formData.endEndTime"
-          type="date"
-          :placeholder="$t1('结束时间（结束）')"
-          size="small"
-          clearable
-          value-format="yyyy-MM-dd"
-          :picker-options="$baseEndPickerOptions(formData.startEndTime)"
-          style="width: 128px !important"
-        ></el-date-picker>
-      </span>
-      <el-button
-        type="primary"
-        plain
-        class="button-sty"
-        @click="resetEvent"
-        icon="el-icon-brush"
-      >
-        {{ $t1("重置") }}
-      </el-button>
-      <el-button
-        type="warning"
-        size="small"
-        class="button-sty"
-        icon="el-icon-search"
-        @click="handleSelectChange"
-        >{{ $t1("搜索") }}
-      </el-button>
-    </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">
-              <template #form>
-                <div class="clearfix screen-btns">
-                  <div class="fl">
-                    <base-table-export
-                      :option="{
-                        title: $t1('流程处理耗用时间查询'),
-                        targetRef: 'table-m1',
-                      }"
-                      :parent-target="_self"
-                    />
-                  </div>
-                  <div class="fr">
-                    <!-- <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
-                                plain>{{ $t1('重置') }}
-                    </vxe-button>
-                    <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">
-                      {{ $t1('搜索') }}
-                    </vxe-button> -->
-                  </div>
-                </div>
-              </template>
-            </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>
-    <wfContentDialog
-      v-if="showWfDialog"
-      :visible.sync="showWfDialog"
-      :option.sync="wfContentOption"
-    ></wfContentDialog>
-  </div>
-</template>
-
-<script>
-import scriptHttpMixin from "@base/components/xform/mixins/scriptHttp";
-import wfContentDialog from "@base/views/user/wf/wf_manage/wfContentDialog";
-export default {
-  name: "wf_report:index",
-  mixins: [scriptHttpMixin],
-  components: {
-    wfContentDialog,
-  },
-  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,
-      },
-      objTypeList: [],
-
-      showWfDialog: false,
-      wfContentOption: {},
-    };
-  },
-  mounted() {
-    this.initObjTypeList();
-    this.initTableList();
-    this.loadWfSummaryCount();
-  },
-  methods: {
-    openWfDialog(row) {
-      this.wfContentOption = {
-        objId: row.obj_id,
-        url: row.url,
-        objTypeCode: row.obj_type_code,
-        formCode: row.formCode,
-      };
-      this.showWfDialog = true;
-    },
-    searchEvent() {
-      this.$refs["table-m1"].commitProxy("reload");
-    },
-    resetEvent() {
-      this.formData = {};
-      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: this.$t1("流程类型"),
-            width: 150,
-            fixed: "left",
-          },
-          { field: "name", title: this.$t1("流程主题"), 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: this.$t1("当前节点"), width: 180 },
-          {
-            field: "candidate_names",
-            title: this.$t1("当前处理人"),
-            width: 180,
-            slots: {
-              default: ({ row }) => {
-                return [
-                  <div class="txt-mid">
-                    <i class="iconfont icon-dangqianchuliren"></i>
-                    <sapn>{row.candidate_names}</sapn>
-                  </div>,
-                ];
-              },
-            },
-          },
-          { field: "start_time", title: this.$t1("启动时间"), width: 150 },
-          { field: "end_time", title: this.$t1("结束时间"), width: 150 },
-          {
-            field: "duration",
-            title: this.$t1("总耗时"),
-            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: this.$t1("当前节点耗时"),
-            width: 180,
-            slots: {
-              default: ({ row }) => {
-                return [
-                  <div class="txt-mid">
-                    <i class="iconfont icon-shijian"></i>
-                    <sapn> {row.task_duration}</sapn>
-                  </div>,
-                ];
-              },
-            },
-          },
-          { field: "approver_num", title: this.$t1("审批总人数"), width: 180 },
-          { field: "node_num", title: this.$t1("审批节点数量"), width: 180 },
-          {
-            width: 90,
-            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={this.$t1("查看详情")}
-                      placement="top"
-                      popper-class="tooltip-skin"
-                    >
-                      <i class="iconfont icon-dianji" />
-                    </el-tooltip>
-                  </a>,
-                  <a
-                    href="javascript:void(0);"
-                    class="a-link"
-                    onclick={() => {
-                      this.openWfDialog(row);
-                    }}
-                  >
-                    <el-tooltip
-                      enterable={false}
-                      effect="dark"
-                      content={this.$t1("查看单据")}
-                      placement="top"
-                      popper-class="tooltip-skin"
-                    >
-                      <i class="el-icon-edit" />
-                    </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.dateRange === "") {
-        this.formData.dateRange = null;
-      }
-      if (this.formData.stat === "") {
-        this.formData.stat = null;
-      }
-      this.loadWfSummaryCount();
-      this.searchEvent();
-      this.clearWfSummaryNode();
-    },
-    initObjTypeList() {
-      this.$http({
-        url: `/${this.serviceName}/wf_info/listGroupPage`,
-        method: "post",
-        data: {
-          type: 99,
-        },
-        success: (res) => {
-          this.objTypeList = res?.objx?.records || [];
-        },
-      });
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-#containt {
-  background: none;
-  padding: 10px 0 0;
-  box-shadow: none;
-  display:flex;flex-direction: column;
-  > .el-row{flex:1;
-    > .el-col{height:100%;}
-  }
-}
-.filter-btns {
-  .f-btn {
-    margin-right: 25px;
-  }
-}
-.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;height:calc(100% - 10px);display:flex;flex-direction:column;
-  .el-card__body {
-    flex:1;
-  }
-}
-.node-box {
-  height:100%;overflow:auto;display:flex;flex-direction: column;
-  .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 !important;
-    }
-    .tit {
-      font-size: 13px;
-      color: #212121;
-      margin-bottom: 5px;
-      margin-top:0;
-    }
-  }
-  .el-steps {
-    overflow: auto;
-    padding-right: 10px;
-    flex:1;
-  }
-}
-</style>
+<template>
+  <div id="containt">
+    <div class="filter-btns">
+      <el-select
+        class="f-btn"
+        v-model="formData.dateRange"
+        @change="handleSelectChange"
+        clearable
+        style="width: 128px !important"
+      >
+        <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="$t1('全部状态')"
+        clearable
+        @clear="formData.stat = null"
+        @change="handleSelectChange"
+        style="width: 128px !important"
+      >
+        <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-select>
+      <el-select
+        class="f-btn"
+        v-model="formData.objTypeCode"
+        :placeholder="$t1('流程类型')"
+        clearable
+        @change="handleSelectChange"
+        style="width: 128px !important"
+      >
+        <el-option
+          v-for="(item, index) in objTypeList"
+          :key="index"
+          :label="item.objTypeName"
+          :value="item.objTypeCode"
+        ></el-option>
+      </el-select>
+      <el-input
+        v-model="formData.name"
+        :placeholder="$t1('流程主题')"
+        style="width: 128px !important"
+      ></el-input>
+      <span class="button-sty">
+        <el-date-picker
+          v-model="formData.startStartTime"
+          type="date"
+          :placeholder="$t1('启动时间（开始）')"
+          size="small"
+          clearable
+          value-format="yyyy-MM-dd"
+          :picker-options="$baseStartPickerOptions(formData.endStartTime)"
+          style="width: 128px !important"
+        ></el-date-picker>
+        <span>-</span>
+        <el-date-picker
+          v-model="formData.endStartTime"
+          type="date"
+          :placeholder="$t1('启动时间（结束）')"
+          size="small"
+          clearable
+          value-format="yyyy-MM-dd"
+          :picker-options="$baseEndPickerOptions(formData.startStartTime)"
+          style="width: 128px !important"
+        ></el-date-picker>
+      </span>
+      <span class="button-sty">
+        <el-date-picker
+          v-model="formData.startEndTime"
+          type="date"
+          :placeholder="$t1('结束时间（开始）')"
+          size="small"
+          clearable
+          value-format="yyyy-MM-dd"
+          :picker-options="$baseStartPickerOptions(formData.endEndTime)"
+          style="width: 128px !important"
+        ></el-date-picker>
+        <span>-</span>
+        <el-date-picker
+          v-model="formData.endEndTime"
+          type="date"
+          :placeholder="$t1('结束时间（结束）')"
+          size="small"
+          clearable
+          value-format="yyyy-MM-dd"
+          :picker-options="$baseEndPickerOptions(formData.startEndTime)"
+          style="width: 128px !important"
+        ></el-date-picker>
+      </span>
+      <el-button
+        type="primary"
+        plain
+        class="button-sty"
+        @click="resetEvent"
+        icon="el-icon-brush"
+      >
+        {{ $t1("重置") }}
+      </el-button>
+      <el-button
+        type="warning"
+        size="small"
+        class="button-sty"
+        icon="el-icon-search"
+        @click="handleSelectChange"
+        >{{ $t1("搜索") }}
+      </el-button>
+    </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">
+              <template #form>
+                <div class="clearfix screen-btns">
+                  <div class="fl">
+                    <base-table-export
+                      :option="{
+                        title: $t1('流程处理耗用时间查询'),
+                        targetRef: 'table-m1',
+                      }"
+                      :parent-target="_self"
+                    />
+                  </div>
+                  <div class="fr">
+                    <!-- <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
+                                plain>{{ $t1('重置') }}
+                    </vxe-button>
+                    <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">
+                      {{ $t1('搜索') }}
+                    </vxe-button> -->
+                  </div>
+                </div>
+              </template>
+            </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>
+    <wfContentDialog
+      v-if="showWfDialog"
+      :visible.sync="showWfDialog"
+      :option.sync="wfContentOption"
+    ></wfContentDialog>
+  </div>
+</template>
+
+<script>
+import scriptHttpMixin from "@base/components/xform/mixins/scriptHttp";
+import wfContentDialog from "@base/views/user/wf/wf_manage/wfContentDialog";
+export default {
+  name: "wf_report:index",
+  mixins: [scriptHttpMixin],
+  components: {
+    wfContentDialog,
+  },
+  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,
+      },
+      objTypeList: [],
+
+      showWfDialog: false,
+      wfContentOption: {},
+    };
+  },
+  mounted() {
+    this.initObjTypeList();
+    this.initTableList();
+    this.loadWfSummaryCount();
+  },
+  methods: {
+    openWfDialog(row) {
+      this.wfContentOption = {
+        objId: row.obj_id,
+        url: row.url,
+        objTypeCode: row.obj_type_code,
+        formCode: row.formCode,
+      };
+      this.showWfDialog = true;
+    },
+    searchEvent() {
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    resetEvent() {
+      this.formData = {};
+      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: this.$t1("流程类型"),
+            width: 150,
+            fixed: "left",
+          },
+          { field: "name", title: this.$t1("流程主题"), 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: this.$t1("当前节点"), width: 180 },
+          {
+            field: "candidate_names",
+            title: this.$t1("当前处理人"),
+            width: 180,
+            slots: {
+              default: ({ row }) => {
+                return [
+                  <div class="txt-mid">
+                    <i class="iconfont icon-dangqianchuliren"></i>
+                    <sapn>{row.candidate_names}</sapn>
+                  </div>,
+                ];
+              },
+            },
+          },
+          { field: "start_time", title: this.$t1("启动时间"), width: 150 },
+          { field: "end_time", title: this.$t1("结束时间"), width: 150 },
+          {
+            field: "duration",
+            title: this.$t1("总耗时"),
+            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: this.$t1("当前节点耗时"),
+            width: 180,
+            slots: {
+              default: ({ row }) => {
+                return [
+                  <div class="txt-mid">
+                    <i class="iconfont icon-shijian"></i>
+                    <sapn> {row.task_duration}</sapn>
+                  </div>,
+                ];
+              },
+            },
+          },
+          { field: "approver_num", title: this.$t1("审批总人数"), width: 180 },
+          { field: "node_num", title: this.$t1("审批节点数量"), width: 180 },
+          {
+            width: 90,
+            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={this.$t1("查看详情")}
+                      placement="top"
+                      popper-class="tooltip-skin"
+                    >
+                      <i class="iconfont icon-dianji" />
+                    </el-tooltip>
+                  </a>,
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    onclick={() => {
+                      this.openWfDialog(row);
+                    }}
+                  >
+                    <el-tooltip
+                      enterable={false}
+                      effect="dark"
+                      content={this.$t1("查看单据")}
+                      placement="top"
+                      popper-class="tooltip-skin"
+                    >
+                      <i class="el-icon-edit" />
+                    </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.dateRange === "") {
+        this.formData.dateRange = null;
+      }
+      if (this.formData.stat === "") {
+        this.formData.stat = null;
+      }
+      this.loadWfSummaryCount();
+      this.searchEvent();
+      this.clearWfSummaryNode();
+    },
+    initObjTypeList() {
+      this.$http({
+        url: `/${this.serviceName}/wf_info/listGroupPage`,
+        method: "post",
+        data: {
+          type: 99,
+        },
+        success: (res) => {
+          this.objTypeList = res?.objx?.records || [];
+        },
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+#containt {
+  background: none;
+  padding: 10px 0 0;
+  box-shadow: none;
+  display:flex;flex-direction: column;
+  > .el-row{flex:1;
+    > .el-col{height:100%;}
+  }
+}
+.filter-btns {
+  .f-btn {
+    margin-right: 25px;
+  }
+}
+.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;height:calc(100% - 10px);display:flex;flex-direction:column;
+  .el-card__body {
+    flex:1;min-height:0;
+  }
+}
+.node-box {
+  height:100%;overflow:auto;display:flex;flex-direction: column;
+  .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 !important;
+    }
+    .tit {
+      font-size: 13px;
+      color: #212121;
+      margin-bottom: 5px;
+      margin-top:0;
+    }
+  }
+  .el-steps {
+    overflow: auto;
+    padding-right: 10px;
+    flex:1;
+  }
+}
+</style>