138 lines
4.2 KiB
Vue
138 lines
4.2 KiB
Vue
<template>
|
|
<div class="detail-popup">
|
|
<popup ref="popupRef" :async="true" :width="width" @close="handleClose" :showFootBtn="false">
|
|
|
|
<el-descriptions :column="column" :title="detailConfig?.title || '详情'" border>
|
|
<el-descriptions-item :label="item.label" label-align="left" align="left"
|
|
v-for="(item, index) in detailConfig?.config.filter(item => !item.column)" :key="index"
|
|
label-class-name="my-label">
|
|
|
|
{{ formData[item.value] ??
|
|
(item.value.includes('.') ?
|
|
(formData[item.value.split('.')[0]])[item.value.split('.')[1]] :
|
|
'')
|
|
}}
|
|
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions :column="2" border
|
|
v-for="(item, index) in detailConfig?.config.filter(item => item.column == 1)" :key="index"
|
|
v-show="formData[item.value]">
|
|
<el-descriptions-item :label="item.label" label-align="left" align="left"
|
|
v-if="Array.isArray(formData[item.value])" label-class-name="my-label">
|
|
<el-link :href="items.uri" type="primary" target="_blank" v-for="items in formData[item.value]"
|
|
class="mr-5">
|
|
{{ items.name }}
|
|
</el-link>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item :label="item.label" label-align="left" align="left" label-class-name="my-label"
|
|
v-else>
|
|
{{ formData[item.value] }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<div v-if="detailConfig?.table && tableLists.length">
|
|
<el-card class="mt-5" v-if="!Array.isArray(detailConfig?.table)">
|
|
<template #header>
|
|
{{ detailConfig.table.title }}列表
|
|
</template>
|
|
<el-table :data="tableLists">
|
|
<el-table-column :label="item.label" :prop="item.value" show-overflow-tooltip
|
|
v-for="(item, index) in detailConfig.table.tableConfig" :key="index" />
|
|
</el-table>
|
|
</el-card>
|
|
<el-card class="mt-5" v-else>
|
|
<!-- <template #header>
|
|
{{ detailConfig.table.title }}列表
|
|
</template>
|
|
<el-table :data="tableLists">
|
|
<el-table-column :label="item.label" :prop="item.value" show-overflow-tooltip
|
|
v-for="(item, index) in detailConfig.table.tableConfig" :key="index" />
|
|
</el-table> -->
|
|
</el-card>
|
|
</div>
|
|
|
|
|
|
|
|
</popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="customdetail">
|
|
|
|
import Popup from '@/components/popup/index.vue'
|
|
import { defineProps, ref, defineExpose } from "vue"
|
|
import { cloneDeep } from 'lodash-es'
|
|
const props = defineProps({
|
|
detailConfig: {
|
|
type: Object,
|
|
require: true
|
|
},
|
|
column: {
|
|
type: Number,
|
|
default: 3
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '80vw'
|
|
|
|
}
|
|
|
|
})
|
|
const emit = defineEmits(['success', 'close'])
|
|
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
|
const tableLists = ref('')
|
|
|
|
// 表单数据
|
|
const formData = ref({})
|
|
|
|
|
|
|
|
// 获取详情
|
|
const setFormData = async (data: Record<any, any>) => {
|
|
formData.value = data
|
|
if (props.detailConfig?.table) {
|
|
let query = cloneDeep(props.detailConfig.table.query)
|
|
if (typeof (props.detailConfig.table.query) === 'object') {
|
|
for (let key in query) {
|
|
query[key] ||= data.id
|
|
}
|
|
} else {
|
|
query = { [query]: data.id }
|
|
}
|
|
|
|
|
|
tableLists.value = (formData.value)[String(props.detailConfig.table.fetchFun)] ?? (await props.detailConfig.table.fetchFun({ ...query })).lists
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//打开弹窗
|
|
const open = () => {
|
|
popupRef.value?.open()
|
|
}
|
|
|
|
// 关闭回调
|
|
const handleClose = () => {
|
|
emit('close')
|
|
console.log("gianni1")
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
open,
|
|
setFormData,
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.my-label) {
|
|
width: 198px !important;
|
|
}
|
|
</style>
|