zhuangxiuAdmin/src/views/Order/orderList/components/Draft.vue

<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElImage } from 'element-plus'

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})
//
// const ishidden = computed(() => props.currentRow?.type === 1)
// const renderTag = (enable?: boolean) => {
//   return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
// }

const menu = [
  {
    field: 'draft[0].id',
    label: 'ID'
  },
  {
    field: 'draft[0].status_chs',
    label: '审核状态'
  },
  {
    field: 'draft[0].mark',
    label: '备注',
	span: 24
  },
  {
    field: 'draft[0].deign_draft_images',
    label: '封面',
  	span: 24,
	slots: {
	  default: (data) => {
	     if(data.draft.length> 0) {
			return (
				<>
					<ElImage src={data.draft[0].deign_draft_images} preview-src-list={[data.draft[0].deign_draft_images]} style="width: 100px;height: 100px"/>
				</>
			)
		}else {
			return <></>
		} 
	  }
	}
  },
  {
    field: 'draft[0].deign_draft_images_chs',
    label: '详情图',
  	span: 24,
  	slots: {
  	  default: (data) => {
		 
  	     if(data.draft.length> 0) {
  			return (
  				<>
				{data.draft[0].deign_draft_images_chs.map((item )=> {
					return (<><ElImage src={item} preview-src-list={[data.draft[0].deign_draft_images]} style="width: 100px;height: 100px"/></>)
				})}
  				</>
  			)
  		}else {
  			return <></>
  		} 
  	  }
  	}
  },
]

const detailSchema = ref<DescriptionsSchema[]>(menu)
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>