feat(contractReview): 新增合同评审模块页面及API接口

src/api/bpm/task.js

@@ -0,0 +1,361 @@
+import request from '@/utils/request';
+import store from '@/store';
+import Vue from 'vue';
+
+export async function getTodoTaskPage(query) {
+  const res = await request({
+    url: '/bpm/task/todo-page',
+    method: 'post',
+    data: query
+  });
+  if (res.data.code == 0) {
+    store.dispatch('user/setMenuBadge', {
+      path: '/todo',
+      value: res.data.data.count || 0,
+      color: 'danger'
+    });
+    // console.log('-----getTodoTaskPage---user--------');
+    // console.log(store.state.user);
+    // if (store.state.user.menus?.length) {
+    //   for (const p of store.state.user.menus) {
+    //     console.log('getTodoTaskPage----------------------');
+    //     console.log(p);
+    //     if (p.path === '/todo') {
+    //       console.log('进来了2~~~');
+
+    //       break;
+    //     }
+    //   }
+    // } else {
+    //   const unwatch = Vue.prototype.$watch(
+    //     '$store.state.user.menus',
+    //     () => {
+    //       console.log('-----getTodoTaskPage---user--------');
+    //       console.log(store.state.user);
+    //       if (store.state.user.menus?.length) {
+    //         for (const p of store.state.user.menus) {
+    //           console.log('getTodoTaskPage----------------------');
+    //           console.log(p);
+    //           if (p.path === '/todo') {
+    //             console.log('进来了2~~~');
+    //             store.dispatch('user/setMenuBadge', {
+    //               path: '/todo',
+    //               value: res.data.data.count || 0,
+    //               color: 'danger'
+    //             });
+    //             break;
+    //           }
+    //         }
+    //         unwatch();
+    //       }
+    //     },
+    //     {
+    //       immediate: true
+    //     }
+    //   );
+    // }
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function getDoneTaskPage(query) {
+  const res = await request({
+    url: '/bpm/task/done-page',
+    method: 'post',
+    data: query
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export function completeTask(data) {
+  return request({
+    url: '/bpm/task/complete',
+    method: 'PUT',
+    data: data
+  });
+}
+
+export async function approveTask(data) {
+  const res = await request({
+    url: '/bpm/task/approve',
+    method: 'PUT',
+    data: data
+  });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export function rejectTask(data) {
+  return request({
+    url: '/bpm/task/reject',
+    method: 'PUT',
+    data: data
+  });
+}
+export function cancelTask(data) {
+  return request({
+    url: '/bpm/process-instance/cancel',
+    method: 'post',
+    data: data
+  });
+}
+
+export function backTask(data) {
+  return request({
+    url: '/bpm/task/back',
+    method: 'PUT',
+    data: data
+  });
+}
+
+export function updateTaskAssignee(data) {
+  return request({
+    url: '/bpm/task/update-assignee',
+    method: 'PUT',
+    data: data
+  });
+}
+
+export async function getTaskListByProcessInstanceId(processInstanceId) {
+  const res = await request({
+    url:
+      '/bpm/task/list-by-process-instance-id?processInstanceId=' +
+      processInstanceId,
+    method: 'get'
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export function getReturnList(taskId) {
+  return request({
+    url: '/bpm/task/return-list?taskId=' + taskId,
+    method: 'get'
+  });
+}
+
+export function returnTask(data) {
+  return request({
+    url: '/bpm/task/return',
+    method: 'PUT',
+    data: data
+  });
+}
+
+export function delegateTask(data) {
+  return request({
+    url: '/bpm/task/delegate',
+    method: 'PUT',
+    data: data
+  });
+}
+
+export function approveTaskWithVariables(data) {
+  return request({
+    url: '/bpm/task/approveTaskWithVariables',
+    method: 'PUT',
+    data: data
+  });
+}
+
+export function approveTaskWithVariablesOther(data) {
+  return request({
+    url: '/bpm/inwarehouse/assign',
+    method: 'post',
+    data: data
+  });
+}
+
+export function outApproveNotPass(data) {
+  return request({
+    url: '/bpm/outApprove/notPass',
+    method: 'PUT',
+    data: data
+  });
+}
+
+export function outinApproveNotPass(data) {
+  return request({
+    url: '/bpm/outinApprove/notPass',
+    method: 'PUT',
+    data: data
+  });
+}
+
+// 我的消息分页
+export async function notifyMessagePageAPI(data) {
+  const res = await request({
+    url: `/sys/notifymessage/page`,
+    method: 'post',
+    data: data
+  });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 更新已读-指定消息ID
+ */
+export async function updateNotifyMessageReadByIdAPI(data) {
+  const res = await request({
+    url: `/sys/notifymessage/updateNotifyMessageRead`,
+    method: 'post',
+    data: data
+  });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//工作流自定义表单集合
+export async function getBpmCustomFormPage(query) {
+  const res = await request({
+    url: '/flowable/bpmcustomform/page',
+    method: 'get',
+    params: query
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+//工作流自定义权限过滤表单集合
+export async function getBpmCustomFormList(query) {
+  const res = await request({
+    url: '/flowable/bpmcustomform/list',
+    method: 'get',
+    params: query
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+//工作流自定义表单保存
+export async function bpmCustomFormSave(data) {
+  const res = await request({
+    url: '/flowable/bpmcustomform/save',
+    method: 'post',
+    data
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+//工作流自定义表单修改
+export async function bpmCustomFormUpdate(data) {
+  const res = await request({
+    url: '/flowable/bpmcustomform/update',
+    method: 'put',
+    data
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+//工作流自定义表单修改
+export async function bpmCustomFormDelete(data) {
+  const res = await request({
+    url: '/flowable/bpmcustomform/delete',
+    method: 'delete',
+    data
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function getProcessInstancePage(query) {
+  const res = await request({
+    url: '/bpm/process-instance/my-page',
+    method: 'post',
+    data: query
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+export async function getProcessInstanceDeptPage(query) {
+  const res = await request({
+    url: '/bpm/process-instance/my-dept-page',
+    method: 'post',
+    data: query
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+export async function getProcessInstanceNoticePage(query) {
+  const res = await request({
+    url: '/bpm/process-instance/my-notice-page',
+    method: 'post',
+    data: query
+  });
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 我的抄送分页
+export async function ccPage(data) {
+  console.log(data);
+
+  const res = await request({
+    url: `/bpm/task/cc-page`,
+    method: 'post',
+    data
+  });
+
+  const res1 = await request({
+    url: `/bpm/task/cc-page`,
+    method: 'post',
+    data: {
+      pageNum: 1,
+      size: -1
+    }
+  });
+
+  if (res1.data.code == 0) {
+    const num = res1.data.data.list.filter(
+      (item) => item.processResult == 1
+    ).length;
+
+    store.dispatch('user/setMenuBadge', {
+      path: '/carbonCopy',
+      value: num || 0,
+      color: 'danger'
+    });
+  }
+
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/contractManage/contractReview/index.vue

@@ -0,0 +1,718 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+        <div>
+            <seekPage :seekList="seekList" :formLength="3" @search="search"></seekPage>
+        </div>
+        <ele-pro-table
+            ref="table"
+            height="calc(100vh - 325px)"
+            full-height="calc(100vh - 116px)"
+            :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-button>新建</el-button>
+                <!--     <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"
+                        >
+                            <DictSelection
+                            dictName="流程实例的结果"
+                            clearable
+                            v-model="params.result"
+                            >
+                            </DictSelection>
+                        </el-form-item>
+                        </el-col>
+                        <el-col v-bind="{ span: 10 }">
+                        <el-form-item
+                            label="创建时间："
+                            prop="createTime1"
+                            label-width="90px"
+                        >
+                            <el-date-picker
+                            v-model="createTime1"
+                            style="width: 100%"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            :default-time="['00:00:00', '23:59:59']"
+                            />
+                        </el-form-item>
+                        </el-col>
+                    </el-row>
+                    </el-form> -->
+                </div>
+            </template>
+            <!-- <template v-slot:toolkit="{ row }">
+                <div class="filter-container">
+                    <div class="ele-form-actions">
+                    <el-button
+                        type="primary"
+                        icon="el-icon-search"
+                        class="ele-btn-icon"
+                        @click="reload"
+                    >
+                        查询
+                    </el-button>
+                    <el-button @click="reset">重置</el-button>
+                    </div>
+                </div>
+            </template> -->
+            <template v-slot:result="{ row }">
+            <el-tag
+                size="medium"
+                :type="
+                getTimelineItemType(
+                    getDictValue('流程实例的结果', row.result)
+                )
+                "
+            >
+                {{ getDictValue('流程实例的结果', row.result) }}
+            </el-tag>
+            </template>
+            <template v-slot:dictType="{ row }">
+            {{ getDictV('collaborative_type', row.dictType) }}
+            </template>
+            <template v-slot:durationInMillis="{ row }">
+            {{ getDateTime(row.durationInMillis) }}
+            </template>
+            <template v-slot:name="{ row }">
+            <el-link
+                type="primary"
+                :underline="false"
+                @click="handleDetail(row)"
+            >
+                {{ row.name }}
+            </el-link>
+            </template>
+            <template
+                v-if="formColumnList.length"
+                v-for="(item, index) in formColumnList"
+                v-slot:[item.model]="{ row }"
+            >
+            <div v-if="item.type == 'imgupload'">
+                <el-image
+                v-if="row[item.model].length"
+                style="width: 100px; height: 100px"
+                :src="row[item.model][0].url"
+                :preview-src-list="row[item.model].map((i) => i.url)"
+                >
+                </el-image>
+            </div>
+            <div v-else-if="item.type == 'fileupload'">
+                <el-button
+                type="text"
+                v-if="row[item.model]?.length"
+                @click="getFiles(row[item.model])"
+                >下载
+                </el-button>
+            </div>
+
+            <div v-else-if="item.type == 'userSelect'">
+                {{ getUserName(row[item.model]) }}
+            </div>
+            <div v-else-if="item.type == 'deptAndUserCascader'">
+                {{ getDeptAndUserName(row[item.model]) }}
+            </div>
+            <div v-else-if="item.type == 'deptCascader'">
+                {{ getDeptName(row[item.model]) }}
+            </div>
+            <div v-else>
+                {{ row[item.model] }}
+            </div>
+            </template>
+            <!-- 操作列 -->
+            <!-- <template v-slot:action="{ row }">
+            <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleAudit(row)"
+                >详情
+            </el-button>
+            </template> -->
+        </ele-pro-table>
+    </el-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/system/organization';
+  import { listOrganizations } from '@/api/system/organization';
+  import tabMixins from '@/mixins/tableColumnsMixin';
+
+  // 默认表单数据
+  const defaultParams = {
+    dictType: '5',
+    status: '',
+    name: '',
+    formId: ''
+  };
+  export default {
+    name: 'index',
+    // components: {
+    //   detail,
+    //   formDetail
+    // },
+    mixins: [dictMixins, tabMixins],
+    data() {
+      return {
+        cacheKeyUrl: 'eom-contract-review-index',
+        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;
+      },
+      // 表格列配置
+      seekList() {
+        return [
+            // {
+            //     label: '分类：',
+            //     value: 'dictType',
+            //     type: 'select',
+            //     placeholder: '请选择分类',
+            // },
+            {
+                label: '单据：',
+                value: 'formId',
+                type: 'select',
+                placeholder: '请选择单据',
+                planList: this.templateList
+            },
+            {
+                label: '结果：',
+                value: 'status',
+                type: 'DictSelection',
+                placeholder: '请选择结果',
+                dictName: '流程实例的结果'
+            },
+            {
+                label: '创建时间：',
+                value: 'createTime',
+                type: 'date',
+                // dateType: 'datetimerange',
+                placeholder: '',
+                width: 280,
+                valueAr: ['createTimeBegin', 'createTimeEnd']
+            },
+        ];
+        },
+      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'
+        //   }
+        ];
+      },
+      getUserName() {
+        return (id) => {
+          if (!id) return '';
+          let find = this.userList.find((item) => item.id == id) || {};
+          return find.name;
+        };
+      },
+      getDeptAndUserName() {
+        return (id = []) => {
+          if (!id.length) return '';
+          id = Array.isArray(id) ? id : [id];
+          let find =
+            this.userList.find((item) => item.id == id[id.length - 1]) || {};
+          return find.name;
+        };
+      },
+      getDeptName() {
+        return (id = []) => {
+          if (!id.length) return '';
+          id = Array.isArray(id) ? id : [id];
+          let find =
+            this.deptList.find((item) => item.id == id[id.length - 1]) || {};
+          return find.name;
+        };
+      }
+    },
+    watch: {
+    //   'params.formId': {
+    //     handler(val) {
+    //       this.reload();
+    //       this.deptReload();
+    //       this.reload();
+    //       this.noticeReload();
+    //     }
+    //   },
+    //   'params.dictType': {
+    //     handler(val) {
+    //       this.params.formId = this.templateList[val][0].id;
+    //       this.reload();
+    //       this.deptReload();
+    //       this.reload();
+    //       this.noticeReload();
+    //     }
+    //   }
+    },
+    async created() {
+      await this.getDictList('collaborative_type');
+      await this.getTemplateList();
+      await this.getUserList();
+      await this.getDeptList();
+    },
+    methods: {
+      getDictV(code, val) {
+        if (!this.dictList[code]) return '';
+        return this.dictList[code].find((item) => item.value == val)?.label;
+      },
+      async getDictList(code) {
+        let { data: res } = await getByCode(code);
+        this.dictList[code] = res.map((item) => {
+          let values = Object.keys(item);
+          return {
+            value: values[0],
+            label: item[values[0]]
+          };
+        });
+      },
+      //获取人员数据
+      async getUserList() {
+        let params = { pageNum: 1, size: -1 };
+        let { list } = await getUserPage(params);
+        this.userList = list;
+      },
+      //获取部门数据
+      async getDeptList() {
+        this.deptList = await listOrganizations();
+      },
+      getFiles(row = []) {
+        row.forEach((item) => {
+          getFile({ objectName: item.storePath }, item.name);
+        });
+      },
+      async getTemplateList() {
+        this.defaultTemplateList = await getBpmCustomFormList({ status: 1 });
+        const list  = _.groupBy(this.defaultTemplateList, 'dictType')
+        this.templateList = list['5']?.map((item) => ({
+                    label: item.name,
+                    value: item.id
+                })) || [];
+        // console.log('templateList~~~', this.templateList);
+        // 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,
+          ...where,
+        //   ...this.params,
+          processType: '1',
+        //   createTimeBegin,
+        //   createTimeEnd
+        });
+        data = data.list.map((item) => {
+          return {
+            ...item,
+            ...item.valueJson
+          };
+        });
+        return data;
+      },
+      search(e) {
+        this.reload(e);
+      },
+      /* 刷新表格 */
+      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;
+      },
+      /**  */
+      handleAudit(row) {
+        this.$refs.detailRef.open(row.id);
+      },
+      /**  */
+      handleDetail(row) {
+        this.formDetailDialogFlag = true;
+        this.$nextTick(() => {
+          this.$refs.formDetailDialogRef.open(row);
+        });
+      },
+      getTimelineItemType(result) {
+        if (result === '通过') {
+          return 'success';
+        }
+        if (result === '不通过') {
+          return 'danger';
+        }
+        if (result === '取消') {
+          return 'info';
+        }
+        if (result === '处理中') {
+          return 'warning';
+        }
+
+        return '';
+      },
+      getDateTime(ms) {
+        return getDate(ms);
+      },
+    }
+  };
+</script>
+<style scoped lang="scss">
+  .ele-body {
+    padding: 15px;
+  }
+
+  .content-box {
+    width: 100%;
+    //max-width: 273px;
+    //min-width: 90px;
+    // margin-right: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    //justify-content: space-between;
+
+    .category_box {
+      border-left: 1px solid #e1e1e1;
+      border-bottom: 1px solid #e1e1e1;
+      border-radius: 1px;
+      // flex: 1 0 25%;
+      margin-top: 5px;
+      overflow: auto;
+      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 - 300px);
+    //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>