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

<template>
  <div class="ele-body">
    <el-card class="card_box" :body-style="{display:'flex',flexDirection: 'column',alignItems: 'flex-start'}"
             shadow="never">
      <!--    动态表单配置-->
      <div class="content-box">
        <div v-for="category in Object.keys(templateList)" :key="category" class="category_box">
          <div class="category_box_title">{{ getDictV('collaborative_type', category) }}</div>
          <div class="category_box_content">
            <div v-for="v in templateList[category]" :key="v.id" class="category_content"
                 :title="v.name"
                 @click="handleStartProcess(v)">
              <svg-icon
                style="width: 1.5em;height: 1.5em;"
                :icon-class="v.icon"
                className="svg-icon-set"
              ></svg-icon>
              <span>
              {{ v.name.length>3?v.name[0]+v.name[1]+v.name[2]+'...':v.name }}
            </span>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-box el-form-box">
        <el-tabs type="border-card">
          <el-tab-pane label="个人记录">

            <ele-pro-table
              ref="table"
              :toolkit="[]"
              height="calc(100vh - 450px)"
              :columns="columns"
              :datasource="datasource"
              cache-key="datasource-1"
              :init-load="false"
            >
              <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: 3 }">
                        <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="styleResponsive ? { lg: 8, md: 12 } : { span: 10 }">
                        <el-form-item label="创建时间：" prop="createTime" label-width="90px">
                          <el-date-picker
                            v-model="params.createTime"
                            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: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" @click="getFiles(row[item.model])">下载</el-button>
                </div>

                <div v-else-if="item.type=='userSelect'">
                  {{ getUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type=='deptAndUserCascader'">
                  {{ getDeptAndUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type=='deptCascader'">
                  {{ getDeptName(row[item.model]) }}
                </div>
                <div v-else>
                  {{ row[item.model] }}
                </div>

              </template>
              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleAudit(row)"
                >详情
                </el-button
                >
              </template>
            </ele-pro-table>

          </el-tab-pane>
          <el-tab-pane label="部门记录">

            <ele-pro-table
              ref="deptTable"
              :columns="deptColumns"
              :datasource="deptDatasource"
              cache-key="deptDatasource"
              :toolkit="[]"
              height="calc(100vh - 450px)"
              :init-load="false"
            >
              <template v-slot:toolbar="{ row }">
                <div class="filter-container">
                  <el-form
                    class="ele-form-search"
                    @keyup.enter.native="deptReload"
                    @submit.native.prevent
                  >
                    <el-row :gutter="15" style="display: flex;align-items: center">
                      <el-col v-bind="{ span: 3 }">
                        <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: 10 }">
                        <el-form-item label="创建时间：" prop="createTime" label-width="90px">
                          <el-date-picker
                            v-model="params.createTime"
                            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-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" @click="getFiles(row[item.model])">下载</el-button>
                </div>
                <div v-else-if="item.type=='userSelect'">
                  {{ getUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type=='deptAndUserCascader'">
                  {{ getDeptAndUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type=='deptCascader'">
                  {{ getDeptName(row[item.model]) }}
                </div>
                <div v-else>
                  {{ row[item.model] }}
                </div>

              </template>
              <template v-slot:result="{ row }">
                <el-tag size="medium" :type="getTimelineItemType(getDictValue('流程实例的结果', row.result))">
                  {{ getDictValue('流程实例的结果', row.result) }}
                </el-tag>

              </template>
              <template v-slot:durationInMillis="{ row }">
                {{ getDateTime(row.durationInMillis) }}
              </template>
              <template v-slot:name="{ row }">
                <el-link type="primary" :underline="false" @click="handleDetail(row)">
                  {{ row.name }}
                </el-link
                >
              </template>
              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleAudit(row)"
                >详情
                </el-button
                >
              </template>
            </ele-pro-table>
          </el-tab-pane>
          <el-tab-pane label="通知我的记录">

            <ele-pro-table
              ref="noticeTable"
              :columns="deptColumns"
              :datasource="noticeDatasource"
              cache-key="noticeDatasource"
              height="calc(100vh - 450px)"
              :toolkit="[]"
              :init-load="false"
            >
              <template v-slot:toolbar="{ row }">
                <div class="filter-container">
                  <el-form
                    class="ele-form-search"
                    @keyup.enter.native="noticeReload"
                    @submit.native.prevent
                  >
                    <el-row :gutter="15" style="display: flex;align-items: center">
                      <el-col v-bind="{ span: 3 }">
                        <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: 10 }">
                        <el-form-item label="创建时间：" prop="createTime" label-width="90px">
                          <el-date-picker
                            v-model="params.createTime"
                            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-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" @click="getFiles(row[item.model])">下载</el-button>
                </div>
                <div v-else-if="item.type=='userSelect'">
                  {{ getUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type=='deptAndUserCascader'">
                  {{ getDeptAndUserName(row[item.model]) }}
                </div>
                <div v-else-if="item.type=='deptCascader'">
                  {{ getDeptName(row[item.model]) }}
                </div>
                <div v-else>
                  {{ row[item.model] }}
                </div>

              </template>
              <template v-slot:result="{ row }">
                <el-tag size="medium" :type="getTimelineItemType(getDictValue('流程实例的结果', row.result))">
                  {{ getDictValue('流程实例的结果', row.result) }}
                </el-tag>

              </template>
              <template v-slot:durationInMillis="{ row }">
                {{ getDateTime(row.durationInMillis) }}
              </template>
              <template v-slot:name="{ row }">
                <el-link type="primary" :underline="false" @click="handleDetail(row)">
                  {{ row.name }}
                </el-link
                >
              </template>

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

    <detail ref="detailRef"></detail>
    <formDetail v-if="formDetailDialogFlag" ref="formDetailDialogRef" :form-detail-dialog-flag.sync="formDetailDialogFlag"></formDetail>
  </div>
</template>
<script>

import {
  getBpmCustomFormList,
  getProcessInstanceDeptPage,
  getProcessInstanceNoticePage,
  getProcessInstancePage
} from "@/api/bpm/task";
import {getDate} from "@/utils/dateUtils";
import dictMixins from "@/mixins/dictMixins";
import detail from "@/views/bpm/processInstance/detail.vue";
import formDetail from './detail.vue'
import {getByCode} from "@/api/system/dictionary-data";
import {getFile} from "@/api/system/file";
import {getUserPage} from '@/api/tickets';
import {listOrganizations} from "@/api/system/organization";
// 默认表单数据
const defaultParams = {
  status: '',
  name: '',
  formId: ''
};
export default {
  name: "index",
  components: {
    detail,
    formDetail
  },
  mixins: [dictMixins],
  data() {
    return {
      configFormDialogFlag: false,
      processSubmitDialogFlag: false,
      formDetailDialogFlag: false,
      templateList: {},
      dictList: {},
      defaultTemplateList: [],
      userList: [],
      deptList: [],
      params: {...defaultParams},
      statusList: [],
      formColumnList: [],
    }
  },
  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: 'formName',
          label: '分类',
          align: 'center',
          slot: 'formName',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'name',
          label: '名称',
          align: 'center',
          slot: 'name',
          showOverflowTooltip: true,
          minWidth: 100
        },
        ...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: 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: 'formName',
          label: '分类',
          align: 'center',
          slot: 'formName',
          showOverflowTooltip: true,
          minWidth: 150
        },
        {
          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 ''
        let find = this.userList.find(item => item.id == id[id.length - 1]) || {}
        return find.name
      }
    },
    getDeptName() {
      return (id = []) => {

        if (!id.length) return ''
        let find = this.deptList.find(item => item.id == id[id.length - 1]) || {}
        console.log(find.name,'===========');
        return find.name
      }
    },

  },
  watch: {
    'params.formId': {
      handler(val) {
        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()
      console.log(this.deptList);
    },
    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.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 data = await getProcessInstancePage({
        pageNo: page,
        pageSize: limit,
        ...this.params,
        processType: '1',
      });
      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
      console.log(this.formColumnList);
      this.$refs.table.reload({page: 1, where});
      this.$refs.table.reRenderTable()
    },

    /*  重置 */
    reset() {
      this.params = {...defaultParams};
      this.params.formId = this.defaultTemplateList[0]?.id
      this.reload();
    },
    /* 表格数据源 */
    async deptDatasource({page, limit, where, order}) {
      let data = await getProcessInstanceDeptPage({
        pageNo: page,
        pageSize: limit,
        ...this.params,
        processType: '1',
      });
      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.params.formId = this.defaultTemplateList[0]?.id
      this.deptReload();
    },
    /* 表格数据源 */
    async noticeDatasource({page, limit, where, order}) {
      let data = await getProcessInstanceNoticePage({
        pageNo: page,
        pageSize: limit,
        ...this.params,
        processType: '1',
      });
      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.params.formId = this.defaultTemplateList[0]?.id
      this.noticeReload();
    },
    /**  */
    handleAudit(row) {
      this.$refs.detailRef.open(row.id);
    },
    /**  */
    handleDetail(row) {
      this.formDetailDialogFlag = true
      this.$nextTick(()=>{
        this.$refs.formDetailDialogRef.open(row);
      })

    },
    getTimelineItemType(result) {
      if (result === '通过') {
        return 'success';
      }
      if (result === '不通过') {
        return 'danger';
      }
      if (result === '取消') {
        return 'info';
      }
      if (result === '处理中') {
        return 'warning';
      }

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

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

  .category_box {
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 1px;
    flex: 1 0 25%;
    margin-top: 5px;
    overflow: auto;
    .category_box_title {
      font-size: 14px;
      font-weight: bold;
      color: #fff8f8;
      height: 39px;
      display: flex;
      padding: 5px 20px;
      align-items: center;
      background: #1890ffd6;
      border-bottom: 1px solid #e1e1e1;
    }

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

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

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

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

      }
    }

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

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

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

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

</style>