|
|
@ -1,7 +1,7 @@
|
|
|
|
<script lang="ts" setup>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
|
|
|
import { format } from 'date-fns';
|
|
|
|
import { computed, onMounted } from "vue";
|
|
|
|
import { computed, onMounted } from "vue";
|
|
|
|
import type { PackageListItem } from "/#/workorder";
|
|
|
|
import type { PackageListItem } from "/#/workorder";
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: "ListItem" });
|
|
|
|
defineOptions({ name: "ListItem" });
|
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
const props = defineProps({
|
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showFieldList: {
|
|
|
|
showFieldList: {
|
|
|
|
type: Array,
|
|
|
|
type: Array as any,
|
|
|
|
default: () => [],
|
|
|
|
default: () => [],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
dicts: {
|
|
|
|
dicts: {
|
|
|
@ -40,29 +40,30 @@ onMounted(async () => {
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="list-item" :class="{ 'list-item-selected': selected }">
|
|
|
|
<div class="list-item" :class="{ 'list-item-selected': selected }">
|
|
|
|
<div>
|
|
|
|
<div v-for="(item, index) in showFieldList" :key="index">
|
|
|
|
<div class="list-item-header">
|
|
|
|
<div v-if="item.id === 'name'" class="list-item-header">
|
|
|
|
<div style="display: flex">
|
|
|
|
<div class="id-wrap">
|
|
|
|
<SvgIcon :name="svgName" size="28" />
|
|
|
|
<SvgIcon :name="svgName" size="28" />
|
|
|
|
<span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }">
|
|
|
|
<span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }">
|
|
|
|
{{ listItem.name }}
|
|
|
|
{{ listItem.name }}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span class="list-item-header-selected">({{ listItem.pictureCount }})</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <SvgIcon v-show="selected" size="14" name="more-ver" /> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ul class="list-item-detail">
|
|
|
|
<ul v-else class="list-item-detail">
|
|
|
|
<li v-for="(key, index) in Object.keys(listItem.search)" :key="index" v-if="listItem.search">
|
|
|
|
<li v-if="item.id === 'statshisText'">
|
|
|
|
<div v-if="getValueByLabel(key)">
|
|
|
|
审批状态:<span class="list-item-status" :class="listItem.statshisText === '通过'
|
|
|
|
{{
|
|
|
|
? 'list-item-success'
|
|
|
|
getValueByLabel(key)
|
|
|
|
: listItem.statshisText === '不通过'
|
|
|
|
}}:{{
|
|
|
|
? 'list-item-error'
|
|
|
|
listItem.search[key]
|
|
|
|
: 'list-item-watting'
|
|
|
|
}}
|
|
|
|
">{{ listItem.statshisText }}</span>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li v-else-if="item.id === 'createdate'">
|
|
|
|
|
|
|
|
提交时间:{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li v-else class="ellipsis">
|
|
|
|
|
|
|
|
<span class="label">{{ item.name }}:</span>{{ listItem[item.id] }}
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<!-- <li>筛选时间:{{ listItem.createTime }}</li>
|
|
|
|
|
|
|
|
<li>执行人:{{ listItem.createBy }}</li> -->
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="list-item-header">
|
|
|
|
<!-- <div class="list-item-header">
|
|
|
@ -92,6 +93,24 @@ onMounted(async () => {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.id-wrap {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
margin-bottom: 6px
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.list-item-header-name {
|
|
|
|
|
|
|
|
width: 226px;
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
font-family: PingFang SC, PingFang SC-Medium;
|
|
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
margin-bottom: 0 0 8px 8px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-name {
|
|
|
|
&-name {
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|