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"
    >
      <ele-split-layout
        width="252px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <!--    动态表单配置-->
          <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>
        <!-- 表格 -->
        <template v-slot:content>
          <div class="tab-box el-form-box">
            <el-tabs
              type="border-card"
              @tab-click="tabClick"
              v-model="activeName"
            >
              <el-tab-pane label="个人记录" name="user">
                <ele-pro-table
                  ref="table"
                  height="calc(100vh - 380px)"
                  :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>
                      {{ formatValue(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="部门记录" name="dept">
                <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>
                      {{ formatValue(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="通知我的记录" name="notice">
                <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>
                      {{ formatValue(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>
        </template>
      </ele-split-layout>
    </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"
      :view="true"
      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: [],
      // 个人 / 部门 / 通知我的
      activeName: 'user'
    };
  },
  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: {
    formatValue(value) {
      if (value === null || value === undefined) {
        return ''; // 空值处理
      }
      if (typeof value === 'object' && value !== null) {
        if ('id' in value && 'code' in value && 'name' in value) {
          return value.code;
        } else {
          return JSON.stringify(value, null, 2);
        }
      }
      return value;
    },
    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);
    },
    tabClick() {
      if (this.activeName == 'user') {
        this.reset();
      } else if (this.activeName == 'dept') {
        this.deptReset();
      } else if (this.activeName == 'notice') {
        this.noticeReset();
      }
    }
  }
};
</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;
    width: 100%;

    .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: 33%;
        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: calc(100vw - 552px);
  //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>