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:formName="{ row }">
                    <el-link
                      type="primary"
                      :underline="false"
                      @click="handleDetail(row)"
                    >
                      {{ row.formName }}
                    </el-link>
                  </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> -->
                      <fileMain
                        v-if="row[item.model]?.length"
                        type="view"
                        v-model="row[item.model]"
                      ></fileMain>
                    </div>

                    <div v-else-if="item.type == 'userSelect'">
                      <el-link
                        type="primary"
                        :underline="false"
                        @click="handleDetail(row)"
                      >
                        {{ getUserName(row[item.model]) }}
                      </el-link>
                    </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" v-if="$hasPermission('wt:collaborative:department')">
                <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> -->
                      <fileMain
                        v-if="row[item.model]?.length"
                        type="view"
                        v-model="row[item.model]"
                      ></fileMain>
                    </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> -->
                      <fileMain
                        v-if="row[item.model]?.length"
                        type="view"
                        v-model="row[item.model]"
                      ></fileMain>
                    </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="all" v-if="$hasPermission('wt:collaborative:all')">
                <ele-pro-table
                  ref="allTable"
                  :columns="deptColumns"
                  :datasource="allDatasource"
                  cache-key="allDatasource"
                  :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="allReload"
                        @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"
                            >
                              <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="allReload"
                        >
                          查询
                        </el-button>
                        <el-button @click="allReset">重置</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> -->
                      <fileMain
                        v-if="row[item.model]?.length"
                        type="view"
                        v-model="row[item.model]"
                      ></fileMain>
                    </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>
                </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,
    getProcessInstanceAllPage
  } 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.filter(item => item.name && item.name != '自定义区域').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.filter(item => item.name && item.name != '自定义区域').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.allReload();
          this.reload();
          this.deptReload();
          this.noticeReload();
        }
      },
      'params.dictType': {
        handler(val) {
          this.params.formId = this.templateList[val][0].id;
          this.allReload();
          this.reload();
          this.deptReload();
          this.noticeReload();
        }
      }
    },
    async created() {
      await this.getDictList('collaborative_type');
      await this.getTemplateList();
      await this.getUserList();
      await this.getDeptList();
      console.log(this.$hasPermission('wt:collaborative:all'))
    },
    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) || {};
          console.log('makingJson~~~', makingJson);
        this.formColumnList = makingJson.list;
        console.log(this.formColumnList);
      },
      handleStartProcess(i) {
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.processSubmitDialogRef.init(i);
        });
      },
      /* 表格数据源 */
      async allDatasource({ page, limit, where, order }) {
        let [createTimeBegin, createTimeEnd] = this.createTime1 || [];
        let data = await getProcessInstanceAllPage({
          pageNo: page,
          pageSize: limit,
          ...this.params,
          processType: '1',
          createTimeBegin,
          createTimeEnd
        });
        // data = data.list.map((item) => {
        //   return {
        //     ...item,
        //     ...item.valueJson
        //   };
        // });
        return {
          count: data.count,
          list: data.list.map((item) => {
            return {
              ...item,
              ...item.valueJson
            };
          })
        };
      },
      /* 刷新表格 */
      allReload(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.allTable.reload({ page: 1, where });
      },
      /*  重置 */
      allReset() {
        this.params = { ...defaultParams };
        this.createTime1 = [];
        this.params.formId = this.defaultTemplateList[0]?.id;
        this.params.dictType = this.dictList['collaborative_type'][0].value;
        this.allReload();
      },
      /* 表格数据源 */
      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 == 'all') {
          this.allReset();
        } else 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;
  }

  .ele-split-panel {
    width: 100%;
  }

  .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>