<script lang="ts" setup>
|
import { computed, onMounted, reactive, toRefs } from 'vue';
|
|
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
|
import { $t } from '#/locales';
|
|
import DataLogList from './DataLogList.vue';
|
|
interface State {
|
isAdvanced: boolean;
|
activeKey: number;
|
tooltipKey: number;
|
}
|
|
const props = defineProps({
|
showLog: { type: Boolean, default: false },
|
modelId: { type: String, default: '' },
|
formDataId: { type: [String, Number], default: '' },
|
});
|
|
const state = reactive<State>({
|
isAdvanced: true,
|
activeKey: 1,
|
tooltipKey: Date.now(),
|
});
|
const { isAdvanced, activeKey, tooltipKey } = toRefs(state);
|
|
const getBindValue = computed(() => ({ ...props }));
|
|
function toggleAdvanced() {
|
state.isAdvanced = !state.isAdvanced;
|
state.tooltipKey = Date.now();
|
}
|
|
onMounted(() => {
|
state.activeKey = 1;
|
});
|
</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="tooltipKey">
|
<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" :class="{ 'average-tabs-single': showLog }">
|
<a-tab-pane :key="1" tab="修改记录" v-if="showLog" />
|
</a-tabs>
|
<div class="form-extra-panel-main">
|
<DataLogList v-bind="getBindValue" v-if="activeKey == 1" />
|
</div>
|
</div>
|
</template>
|
