初始化

ny

昨天 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script lang="ts" setup>
import { computed, onMounted, reactive, toRefs } from 'vue';
 
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 
import CommentList from '#/components/FormExtraPanel/CommentList.vue';
import DataLogList from '#/components/FormExtraPanel/DataLogList.vue';
import { $t } from '#/locales';
 
import AuxiliaryList from './AuxiliaryList.vue';
import RecordTimeList from './RecordTimeList.vue';
 
interface State {
  isAdvanced: boolean;
  activeKey: number;
  key: number;
}
 
const props = defineProps({
  showComment: { type: Boolean, default: false },
  showRecord: { type: Boolean, default: false },
  showDataLog: { type: Boolean, default: false },
  taskId: { type: [String, Number], default: '' },
  modelId: { type: String, default: '' },
  formDataId: { type: [String, Number], default: '' },
  recordTimeList: { type: Array, default: () => [] },
  auxiliaryInfo: { type: Array, default: () => [] },
  formData: { type: Object },
});
const emit = defineEmits(['onRetry']);
const state = reactive<State>({
  isAdvanced: true,
  activeKey: 1,
  key: Date.now(),
});
const { isAdvanced, activeKey, key } = toRefs(state);
 
const getShowList = computed(() => [props.showComment, props.showRecord, props.showDataLog]);
 
function toggleAdvanced() {
  state.isAdvanced = !state.isAdvanced;
  state.key = Date.now();
}
function onRetry(e) {
  emit('onRetry', e);
}
 
onMounted(() => {
  state.activeKey = props.showRecord ? 1 : 2;
});
</script>
<template>
  <div class="form-extra-panel" :class="{ 'form-extra-panel-unfold': !isAdvanced }">
    <a-tooltip placement="left" :title="isAdvanced ? $t('component.form.fold') : $t('component.form.unfold')" :key="key">
      <div class="trigger-btn" @click="toggleAdvanced">
        <DoubleRightOutlined v-if="isAdvanced" />
        <DoubleLeftOutlined v-else />
      </div>
    </a-tooltip>
    <a-tabs
      v-model:active-key="activeKey"
      :tab-bar-gutter="10"
      size="small"
      class="average-tabs flow-average-tabs"
      :class="{ 'average-tabs-single': getShowList.filter(Boolean).length === 1 }">
      <a-tab-pane :key="1" tab="流转" v-if="showRecord" />
      <a-tab-pane :key="2" tab="评论" v-if="showComment" />
      <a-tab-pane :key="3" tab="修改记录" v-if="showDataLog" />
      <a-tab-pane :key="4" tab="辅助信息" v-if="auxiliaryInfo.length" />
    </a-tabs>
    <div class="form-extra-panel-main">
      <RecordTimeList :task-id="taskId" :list="recordTimeList" v-if="activeKey == 1" @on-retry="onRetry" />
      <CommentList :task-id="taskId" v-if="activeKey == 2" />
      <DataLogList :model-id="modelId" :form-data-id="formDataId" v-if="activeKey == 3" />
      <AuxiliaryList :list="auxiliaryInfo" :form-data="formData" v-if="activeKey == 4" />
    </div>
  </div>
</template>