南宁网宿科技
115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<template>
|
|
<div class="page">
|
|
<a-row :gutter="20">
|
|
<a-col
|
|
v-for="(item, index) in data"
|
|
:key="index"
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 5, lg: 8, md: 12, sm: 12, xs: 24 }
|
|
: { span: 6 }
|
|
"
|
|
>
|
|
<a-card :bordered="false" hoverable style="margin-top: 16px" @click="openEdit(item)">
|
|
<template #cover>
|
|
<img :src="item.url" alt="" :width="120" :height="180" />
|
|
</template>
|
|
<a-card-meta :title="item.name">
|
|
<template #description>
|
|
<div
|
|
class="project-list-desc"
|
|
v-if="item.comments"
|
|
:title="item.comments"
|
|
>
|
|
{{ item.comments }}
|
|
</div>
|
|
</template>
|
|
</a-card-meta>
|
|
<div class="ele-cell">
|
|
<div class="ele-cell-content ele-text-secondary">
|
|
<!-- <a-tooltip :title="item.createNickname" placement="top">-->
|
|
<!-- <a-avatar :src="item.avatar" size="small" />-->
|
|
<!-- </a-tooltip>-->
|
|
{{ timeAgo(item.createTime) }}
|
|
</div>
|
|
<a-button type="primary" @click="openEdit(item)">
|
|
加入菜品
|
|
</a-button>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
<!-- 编辑弹窗 -->
|
|
<PhotoEdit v-model:visible="showEdit" :data="current" @done="query" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { FileRecord, FileRecordParam } from '@/api/system/file/model';
|
|
import PhotoEdit from './components/photo-edit.vue';
|
|
import { timeAgo } from 'ele-admin-pro';
|
|
|
|
const props = defineProps<{
|
|
// 搜索关键字
|
|
searchText: string;
|
|
// 搜索条件
|
|
where?: FileRecordParam | null;
|
|
// 修改回显的数据
|
|
data?: FileRecord | null;
|
|
}>();
|
|
|
|
// 当前编辑数据
|
|
const current = ref<FileRecord | null>(null);
|
|
// 是否显示编辑弹窗
|
|
const showEdit = ref(false);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done'): void;
|
|
}>();
|
|
|
|
/* 打开编辑弹窗 */
|
|
const openEdit = (row?: FileRecord) => {
|
|
current.value = row ?? null;
|
|
showEdit.value = true;
|
|
};
|
|
|
|
// 是否开启响应式布局
|
|
const themeStore = useThemeStore();
|
|
const { styleResponsive } = storeToRefs(themeStore);
|
|
|
|
const query = () => {
|
|
emit('done');
|
|
};
|
|
|
|
watch(
|
|
() => props.data,
|
|
(visible) => {
|
|
if (visible) {
|
|
console.log(props.data);
|
|
} else {
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'PhotoImage'
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.project-list-desc {
|
|
height: 44px;
|
|
line-height: 22px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
</style>
|