kd-aiot-frontend-wt/src/views/bpm/collaborative/index.vue

<template>
  <div class="ele-body">
    <el-card
      class="card_box"
      :body-style="{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start'
      }"
      shadow="never"
    >
      <!--    动态表单配置-->
      <div class="content-box">
        <div
          v-for="category in Object.keys(templateList)"
          :key="category"
          class="category_box"
        >
          <div class="category_box_title">{{
            getDictV('collaborative_type', category)
          }}</div>
          <div class="category_box_content">
            <div
              v-for="v in templateList[category]"
              :key="v.id"
              class="category_content"
              :title="v.name"
              @click="handleStartProcess(v)"
            >
              <svg-icon
                style="width: 1.5em; height: 1.5em"
                :icon-class="v.icon"
                className="svg-icon-set"
              ></svg-icon>
              <span>
                {{
                  v.name.length > 3
                    ? v.name[0] + v.name[1] + v.name[2] + '...'
                    : v.name
                }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-box el-form-box">
        <el-tabs type="border-card">
          <el-tab-pane label="个人记录">
            <ele-pro-table
              ref="table"
              height="calc(100vh - 450px)"
              :columns="columns"
              :datasource="datasource"
              :init-load="false"
              @columns-change="handleColumnChange"
              :cache-key="cacheKeyUrl"
              :page-size="20"
            >
              <template v-slot:toolbar="{ row }">
                <div class="filter-container">
                  <el-form
                    class="ele-form-search"
                    @keyup.enter.native="reload"
                    @submit.native.prevent
                  >
                    <el-row
                      :gutter="15"
                      style="display: flex; align-items: center"
                    >
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item label="分类：" label-width="60px">
                          <el-select v-model="params.dictType">
                            <el-option
                              v-for="(item, index) in dictList[
                                'collaborative_type'
                              ]"
                              :key="index"
                              :value="item.value"
                              :label="item.label"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item label="单据：" label-width="60px">
                          <el-select v-model="params.formId">
                            <el-option
                              v-for="(item, index) in templateList[
                                params.dictType
                              ]"
                              :key="index"
                              :value="item.id"
                              :label="item.name"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item
                          label="结果："
                          prop="result"
                          label-width="60px"
                        >
                          <!-- <el-select
                            v-model="params.status"
                            placeholder="请选择状态"
                            clearable
                          >
                            <el-option
                              v-for="dict in statusList"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                          </el-select> -->
                          <DictSelection
                            dictName="流程实例的结果"
                            clearable
                            v-model="params.result"
                          >
                          </DictSelection>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 10 }">
                        <el-form-item
                          label="创建时间："
                          prop="createTime1"
                          label-width="90px"
                        >
                          <el-date-picker
                            v-model="createTime1"
                            style="width: 100%"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </template>
              <template v-slot:toolkit="{ row }">
                <div class="filter-container">
                  <div class="ele-form-actions">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      class="ele-btn-icon"
                      @click="reload"
                    >
                      查询
                    </el-button>
                    <el-button @click="reset">重置</el-button>
                  </div>
                </div>
              </template>
              <template v-slot:result="{ row }">
                <el-tag
                  size="medium"
                  :type="
                    getTimelineItemType(
                      getDictValue('流程实例的结果', row.result)
                    )
                  "
                >
                  {{ getDictValue('流程实例的结果', row.result) }}
                </el-tag>
              </template>
              <template v-slot:dictType="{ row }">
                {{ getDictV('collaborative_type', row.dictType) }}
              </template>
              <template v-slot:durationInMillis="{ row }">
                {{ getDateTime(row.durationInMillis) }}
              </template>
              <template v-slot:name="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleDetail(row)"
                >
                  {{ row.name }}
                </el-link>
              </template>
              <template
                v-if="formColumnList.length"
                v-for="(item, index) in formColumnList"
                v-slot:[item.model]="{ row }"
              >
                <div v-if="item.type == 'imgupload'">
                  <el-image
                    v-if="row[item.model].length"
                    style="width: 100px; height: 100px"
                    :src="row[item.model][0].url"
                    :preview-src-list="row[item.model].map((i) => i.url)"
                  >
                  </el-image>
                </div>
                <div v-else-if="item.type == 'fileupload'">
                  <el-button
                    type="text"
                    v-if="row[item.model]?.length"
                    @click="getFiles(row[item.model])"
                    >下载
                  </el-button>
                </div>

                <div v-else-if="item.type == 'userSelect'">
                  {{ getUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type == 'deptAndUserCascader'">
                  {{ getDeptAndUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type == 'deptCascader'">
                  {{ getDeptName(row[item.model]) }}
                </div>
                <div v-else>
                  {{ row[item.model] }}
                </div>
              </template>
              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleAudit(row)"
                  >详情
                </el-button>
              </template>
            </ele-pro-table>
          </el-tab-pane>
          <el-tab-pane label="部门记录">
            <ele-pro-table
              ref="deptTable"
              :columns="deptColumns"
              :datasource="deptDatasource"
              cache-key="deptDatasource"
              :toolkit="[]"
              height="calc(100vh - 450px)"
              :init-load="false"
            >
              <template v-slot:toolbar="{ row }">
                <div class="filter-container">
                  <el-form
                    class="ele-form-search"
                    @keyup.enter.native="deptReload"
                    @submit.native.prevent
                  >
                    <el-row
                      :gutter="15"
                      style="display: flex; align-items: center"
                    >
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item label="分类：" label-width="60px">
                          <el-select v-model="params.dictType">
                            <el-option
                              v-for="(item, index) in dictList[
                                'collaborative_type'
                              ]"
                              :key="index"
                              :value="item.value"
                              :label="item.label"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item label="单据：" label-width="60px">
                          <el-select v-model="params.formId">
                            <el-option
                              v-for="(item, index) in defaultTemplateList"
                              :key="index"
                              :value="item.id"
                              :label="item.name"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item
                          label="结果："
                          prop="result"
                          label-width="60px"
                        >
                          <!-- <el-select
                            v-model="params.status"
                            placeholder="请选择状态"
                            clearable
                          >
                            <el-option
                              v-for="dict in statusList"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                          </el-select> -->
                          <DictSelection
                            dictName="流程实例的结果"
                            clearable
                            v-model="params.result"
                          >
                          </DictSelection>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item
                          label="发起人："
                          prop="startUserName"
                          label-width="70px"
                        >
                          <el-input v-model="params.startUserName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 6 }">
                        <el-form-item
                          label="创建时间："
                          prop="createTime1"
                          label-width="90px"
                        >
                          <el-date-picker
                            v-model="createTime1"
                            style="width: 100%"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </template>
              <template v-slot:toolkit="{ row }">
                <div class="filter-container">
                  <div class="ele-form-actions">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      class="ele-btn-icon"
                      @click="deptReload"
                    >
                      查询
                    </el-button>
                    <el-button @click="deptReset">重置</el-button>
                  </div>
                </div>
              </template>
              <template v-slot:dictType="{ row }">
                {{ getDictV('collaborative_type', row.dictType) }}
              </template>
              <template
                v-if="formColumnList.length"
                v-for="(item, index) in formColumnList"
                v-slot:[item.model]="{ row }"
              >
                <div v-if="item.type == 'imgupload'">
                  <el-image
                    v-if="row[item.model].length"
                    style="width: 100px; height: 100px"
                    :src="row[item.model][0].url"
                    :preview-src-list="row[item.model].map((i) => i.url)"
                  >
                  </el-image>
                </div>
                <div v-else-if="item.type == 'fileupload'">
                  <el-button
                    type="text"
                    v-if="row[item.model]?.length"
                    @click="getFiles(row[item.model])"
                    >下载
                  </el-button>
                </div>
                <div v-else-if="item.type == 'userSelect'">
                  {{ getUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type == 'deptAndUserCascader'">
                  {{ getDeptAndUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type == 'deptCascader'">
                  {{ getDeptName(row[item.model]) }}
                </div>
                <div v-else>
                  {{ row[item.model] }}
                </div>
              </template>
              <template v-slot:result="{ row }">
                <el-tag
                  size="medium"
                  :type="
                    getTimelineItemType(
                      getDictValue('流程实例的结果', row.result)
                    )
                  "
                >
                  {{ getDictValue('流程实例的结果', row.result) }}
                </el-tag>
              </template>
              <template v-slot:durationInMillis="{ row }">
                {{ getDateTime(row.durationInMillis) }}
              </template>
              <template v-slot:name="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleDetail(row)"
                >
                  {{ row.name }}
                </el-link>
              </template>
              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleAudit(row)"
                  >详情
                </el-button>
              </template>
            </ele-pro-table>
          </el-tab-pane>
          <el-tab-pane label="通知我的记录">
            <ele-pro-table
              ref="noticeTable"
              :columns="deptColumns"
              :datasource="noticeDatasource"
              cache-key="noticeDatasource"
              height="calc(100vh - 450px)"
              :toolkit="[]"
              :init-load="false"
            >
              <template v-slot:toolbar="{ row }">
                <div class="filter-container">
                  <el-form
                    class="ele-form-search"
                    @keyup.enter.native="noticeReload"
                    @submit.native.prevent
                  >
                    <el-row
                      :gutter="15"
                      style="display: flex; align-items: center"
                    >
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item label="单据：" label-width="60px">
                          <el-select v-model="params.dictType">
                            <el-option
                              v-for="(item, index) in dictList[
                                'collaborative_type'
                              ]"
                              :key="index"
                              :value="item.value"
                              :label="item.label"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item label="分类：" label-width="60px">
                          <el-select v-model="params.formId">
                            <el-option
                              v-for="(item, index) in defaultTemplateList"
                              :key="index"
                              :value="item.id"
                              :label="item.name"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item
                          label="结果："
                          prop="result"
                          label-width="60px"
                        >
                          <!-- <el-select
                            v-model="params.status"
                            placeholder="请选择状态"
                            clearable
                          >
                            <el-option
                              v-for="dict in statusList"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                          </el-select> -->
                          <DictSelection
                            dictName="流程实例的结果"
                            clearable
                            v-model="params.result"
                          >
                          </DictSelection>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 4 }">
                        <el-form-item
                          label="发起人："
                          prop="startUserName"
                          label-width="70px"
                        >
                          <el-input v-model="params.startUserName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col v-bind="{ span: 6 }">
                        <el-form-item
                          label="创建时间："
                          prop="createTime1"
                          label-width="90px"
                        >
                          <el-date-picker
                            v-model="createTime1"
                            style="width: 100%"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </template>
              <template v-slot:toolkit="{ row }">
                <div class="filter-container">
                  <div class="ele-form-actions">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      class="ele-btn-icon"
                      @click="noticeReload"
                    >
                      查询
                    </el-button>
                    <el-button @click="noticeReset">重置</el-button>
                  </div>
                </div>
              </template>
              <template v-slot:dictType="{ row }">
                {{ getDictV('collaborative_type', row.dictType) }}
              </template>
              <template
                v-if="formColumnList.length"
                v-for="(item, index) in formColumnList"
                v-slot:[item.model]="{ row }"
              >
                <div v-if="item.type == 'imgupload'">
                  <el-image
                    v-if="row[item.model].length"
                    style="width: 100px; height: 100px"
                    :src="row[item.model][0].url"
                    :preview-src-list="row[item.model].map((i) => i.url)"
                  >
                  </el-image>
                </div>
                <div v-else-if="item.type == 'fileupload'">
                  <el-button
                    type="text"
                    v-if="row[item.model]?.length"
                    @click="getFiles(row[item.model])"
                    >下载
                  </el-button>
                </div>
                <div v-else-if="item.type == 'userSelect'">
                  {{ getUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type == 'deptAndUserCascader'">
                  {{ getDeptAndUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type == 'deptCascader'">
                  {{ getDeptName(row[item.model]) }}
                </div>
                <div v-else>
                  {{ row[item.model] }}
                </div>
              </template>
              <template v-slot:result="{ row }">
                <el-tag
                  size="medium"
                  :type="
                    getTimelineItemType(
                      getDictValue('流程实例的结果', row.result)
                    )
                  "
                >
                  {{ getDictValue('流程实例的结果', row.result) }}
                </el-tag>
              </template>
              <template v-slot:durationInMillis="{ row }">
                {{ getDateTime(row.durationInMillis) }}
              </template>
              <template v-slot:name="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleDetail(row)"
                >
                  {{ row.name }}
                </el-link>
              </template>

              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleAudit(row)"
                  >详情
                </el-button>
              </template>
            </ele-pro-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <process-submit-dialog
      :process-submit-dialog-flag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>

    <detail ref="detailRef"></detail>
    <formDetail
      v-if="formDetailDialogFlag"
      ref="formDetailDialogRef"
      :form-detail-dialog-flag.sync="formDetailDialogFlag"
    ></formDetail>
  </div>
</template>
<script>
  import {
    getBpmCustomFormList,
    getProcessInstanceDeptPage,
    getProcessInstanceNoticePage,
    getProcessInstancePage
  } from '@/api/bpm/task';
  import { getDate } from '@/utils/dateUtils';
  import dictMixins from '@/mixins/dictMixins';
  import detail from '@/views/bpm/processInstance/detail.vue';
  import formDetail from './detail.vue';
  import { getByCode } from '@/api/system/dictionary-data';
  import { getFile } from '@/api/system/file';
  import { getUserPage } from '@/api/tickets';
  import { listOrganizations } from '@/api/system/organization';
  import tabMixins from '@/mixins/tableColumnsMixin';

  // 默认表单数据
  const defaultParams = {
    dictType: '',
    status: '',
    name: '',
    formId: ''
  };
  export default {
    name: 'index',
    components: {
      detail,
      formDetail
    },
    mixins: [dictMixins, tabMixins],
    data() {
      return {
        cacheKeyUrl: 'wt-eaf1548b-collaborative',
        configFormDialogFlag: false,
        processSubmitDialogFlag: false,
        formDetailDialogFlag: false,
        templateList: {},
        dictList: {},
        defaultTemplateList: [],
        userList: [],
        deptList: [],
        params: { ...defaultParams },
        statusList: [],
        formColumnList: [],
        createTime1: []
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      columns() {
        let list = this.formColumnList.map((item) => {
          return {
            prop: item.model,
            label: item.name,
            align: 'center',
            slot: item.model,
            showOverflowTooltip: true,
            minWidth: 120
          };
        });
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'dictType',
            label: '分类',
            align: 'center',
            slot: 'dictType',
            showOverflowTooltip: true,
            minWidth: 70
          },
          {
            prop: 'formName',
            label: '单据',
            align: 'center',
            slot: 'formName',
            showOverflowTooltip: true,
            minWidth: 70
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 80
          },
          ...list,
          {
            prop: 'result',
            slot: 'result',
            label: '结果',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 80
          },
          {
            prop: 'endTime',
            label: '审批时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },

          // {
          //   prop: 'durationInMillis',
          //   slot: 'durationInMillis',
          //   label: '耗时',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 130
          // },
          {
            columnKey: 'action',
            label: '操作',
            width: 100,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ];
      },
      deptColumns() {
        let list = this.formColumnList.map((item) => {
          return {
            prop: item.model,
            label: item.name,
            align: 'center',
            slot: item.model,
            showOverflowTooltip: true,
            minWidth: 120
          };
        });
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'dictType',
            label: '分类',
            align: 'center',
            slot: 'dictType',
            showOverflowTooltip: true,
            minWidth: 70
          },
          {
            prop: 'formName',
            label: '单据',
            align: 'center',
            slot: 'formName',
            showOverflowTooltip: true,
            minWidth: 70
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'startUserName',
            label: '发起人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          ...list,
          {
            prop: 'result',
            slot: 'result',
            label: '结果',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'endTime',
            label: '审批时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          }

          // {
          //   prop: 'durationInMillis',
          //   slot: 'durationInMillis',
          //   label: '耗时',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 130
          // },
          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 230,
          //   align: 'center',
          //   resizable: false,
          //   slot: 'action',
          //   showOverflowTooltip: true,
          //   fixed: 'right'
          // }
        ];
      },
      getUserName() {
        return (id) => {
          if (!id) return '';
          let find = this.userList.find((item) => item.id == id) || {};
          return find.name;
        };
      },
      getDeptAndUserName() {
        return (id = []) => {
          if (!id.length) return '';
          id = Array.isArray(id) ? id : [id];
          let find =
            this.userList.find((item) => item.id == id[id.length - 1]) || {};
          return find.name;
        };
      },
      getDeptName() {
        return (id = []) => {
          if (!id.length) return '';
          id = Array.isArray(id) ? id : [id];
          let find =
            this.deptList.find((item) => item.id == id[id.length - 1]) || {};
          return find.name;
        };
      }
    },
    watch: {
      'params.formId': {
        handler(val) {
          this.reload();
          this.deptReload();
          this.reload();
          this.noticeReload();
        }
      },
      'params.dictType': {
        handler(val) {
          this.params.formId = this.templateList[val][0].id;
          this.reload();
          this.deptReload();
          this.reload();
          this.noticeReload();
        }
      }
    },
    async created() {
      await this.getDictList('collaborative_type');
      await this.getTemplateList();
      await this.getUserList();
      await this.getDeptList();
    },
    methods: {
      getDictV(code, val) {
        if (!this.dictList[code]) return '';
        return this.dictList[code].find((item) => item.value == val)?.label;
      },
      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList[code] = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: values[0],
            label: item[values[0]]
          };
        });
      },
      //获取人员数据
      async getUserList() {
        let params = { pageNum: 1, size: -1 };
        let { list } = await getUserPage(params);
        this.userList = list;
      },
      //获取部门数据
      async getDeptList() {
        this.deptList = await listOrganizations();
      },
      getFiles(row = []) {
        row.forEach((item) => {
          getFile({ objectName: item.storePath }, item.name);
        });
      },
      async getTemplateList() {
        this.defaultTemplateList = await getBpmCustomFormList({ status: 1 });
        this.templateList = _.groupBy(this.defaultTemplateList, 'dictType');
        this.params.dictType = this.dictList['collaborative_type'][0].value;
        this.params.formId = this.defaultTemplateList[0]?.id;
        let makingJson =
          JSON.parse(this.defaultTemplateList[0].formJson.makingJson) || {};
        this.formColumnList = makingJson.list;
        console.log(this.formColumnList);
      },
      handleStartProcess(i) {
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.processSubmitDialogRef.init(i);
        });
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        let [createTimeBegin, createTimeEnd] = this.createTime1 || [];

        let data = await getProcessInstancePage({
          pageNo: page,
          pageSize: limit,
          ...this.params,
          processType: '1',
          createTimeBegin,
          createTimeEnd
        });
        data = data.list.map((item) => {
          return {
            ...item,
            ...item.valueJson
          };
        });
        return data;
      },
      /* 刷新表格 */
      reload(where) {
        let find =
          this.defaultTemplateList.find(
            (item) => item.id == this.params.formId
          ) || {};
        let makingJson = JSON.parse(find.formJson.makingJson) || {};
        this.formColumnList = makingJson.list;
        this.$refs.table.reload({ page: 1, where });
        this.$refs.table.reRenderTable();
      },

      /*  重置 */
      reset() {
        this.params = { ...defaultParams };
        this.createTime1 = [];
        this.params.dictType = this.dictList['collaborative_type'][0].value;
        this.params.formId = this.templateList[this.params.dictType][0]?.id;

        this.reload();
      },
      /* 表格数据源 */
      async deptDatasource({ page, limit, where, order }) {
        let [createTimeBegin, createTimeEnd] = this.createTime1 || [];
        let data = await getProcessInstanceDeptPage({
          pageNo: page,
          pageSize: limit,
          ...this.params,
          processType: '1',
          createTimeBegin,
          createTimeEnd
        });
        data = data.list.map((item) => {
          return {
            ...item,
            ...item.valueJson
          };
        });
        return data;
      },
      /* 刷新表格 */
      deptReload(where) {
        let find =
          this.defaultTemplateList.find(
            (item) => item.id == this.params.formId
          ) || {};
        let makingJson = JSON.parse(find.formJson.makingJson) || {};
        this.formColumnList = makingJson.list;

        this.$refs.deptTable.reload({ page: 1, where });
      },
      /*  重置 */
      deptReset() {
        this.params = { ...defaultParams };
        this.createTime1 = [];
        this.params.formId = this.defaultTemplateList[0]?.id;
        this.params.dictType = this.dictList['collaborative_type'][0].value;
        this.deptReload();
      },
      /* 表格数据源 */
      async noticeDatasource({ page, limit, where, order }) {
        let [createTimeBegin, createTimeEnd] = this.createTime1 || [];

        let data = await getProcessInstanceNoticePage({
          pageNo: page,
          pageSize: limit,
          ...this.params,
          processType: '1',
          createTimeBegin,
          createTimeEnd
        });
        data = data.list.map((item) => {
          return {
            ...item,
            ...item.valueJson
          };
        });
        return data;
      },
      /* 刷新表格 */
      noticeReload(where) {
        let find =
          this.defaultTemplateList.find(
            (item) => item.id == this.params.formId
          ) || {};
        let makingJson = JSON.parse(find.formJson.makingJson) || {};
        this.formColumnList = makingJson.list;
        this.$refs.noticeTable.reload({ page: 1, where });
      },
      /*  重置 */
      noticeReset() {
        this.params = { ...defaultParams };
        this.createTime1 = [];

        this.params.formId = this.defaultTemplateList[0]?.id;
        this.params.dictType = this.dictList['collaborative_type'][0].value;
        this.noticeReload();
      },
      /**  */
      handleAudit(row) {
        this.$refs.detailRef.open(row.id);
      },
      /**  */
      handleDetail(row) {
        this.formDetailDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.formDetailDialogRef.open(row);
        });
      },
      getTimelineItemType(result) {
        if (result === '通过') {
          return 'success';
        }
        if (result === '不通过') {
          return 'danger';
        }
        if (result === '取消') {
          return 'info';
        }
        if (result === '处理中') {
          return 'warning';
        }

        return '';
      },
      getDateTime(ms) {
        return getDate(ms);
      }
    }
  };
</script>
<style scoped lang="scss">
  .ele-body {
    padding: 15px;
  }

  .content-box {
    width: 100%;
    //max-width: 273px;
    //min-width: 90px;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    //justify-content: space-between;

    .category_box {
      border-left: 1px solid #e1e1e1;
      border-bottom: 1px solid #e1e1e1;
      border-radius: 1px;
      flex: 1 0 25%;
      margin-top: 5px;
      overflow: auto;

      .category_box_title {
        font-size: 14px;
        font-weight: bold;
        color: #fff8f8;
        height: 39px;
        display: flex;
        padding: 5px 20px;
        align-items: center;
        background: #1890ffd6;
        border-bottom: 1px solid #e1e1e1;
      }

      .category_box_content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 60px;
        overflow: auto;

        .category_content {
          min-width: 60px;
          min-height: 60px;
          //flex: 1 1 0;
          display: flex;
          flex-direction: column;
          border-right: 1px solid #e1e1e1;
          border-bottom: 1px solid #e1e1e1;
          align-items: center;
          justify-content: center;
          //  font-weight: bold;

          &:nth-child(n) {
            span:nth-child(1) {
              transform: scale(2);
            }

            span:nth-child(2) {
              padding-top: 5px;
            }
          }
        }

        .category_content:hover {
          cursor: pointer;
          background-color: rgba(135, 181, 243, 0.29);
        }
      }
    }

    .category_box:last-child {
      border-right: 1px solid #e1e1e1;
    }
  }

  .tab-box {
    width: 100%;
    //max-width: 1100px;
    //min-width: 600px;
    margin-top: 6px;
    height: 98%;

    .el-tabs--border-card {
      height: 100%;
    }
  }

  ::v-deep .card_box {
    .el-card__body {
      padding: 10px;
      height: 86vh;
    }
  }

  ::v-deep .ele-table-tool {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
  }
</style>