You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
9.3 KiB
391 lines
9.3 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-17 15:35:39
|
|
@ 备注: 卡片视图
|
|
-->
|
|
<script lang='ts' setup>
|
|
import type { ComponentSize } from 'element-plus'
|
|
import { gainFormPageListCont } from '@/api/DesignForm/requestapi'
|
|
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
|
|
|
|
import LondIngImg from '@/assets/images/loading.gif'
|
|
|
|
const props = defineProps({
|
|
searchSend:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
viewSetup:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
columnsFilter:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
drawerWith:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
});
|
|
const size = ref<ComponentSize>('default')
|
|
const lineRanks = ref(1)
|
|
const imgBox = computed(() => {
|
|
let cssStyle:any = {}
|
|
if(props.viewSetup.form.imgWidth != 0){
|
|
cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
|
|
}else{
|
|
cssStyle['width'] = "50px";
|
|
}
|
|
if(props.viewSetup.form.imgHeight != 0){
|
|
cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
|
|
}else{
|
|
cssStyle['height'] = "50px";
|
|
}
|
|
|
|
return cssStyle
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-18 14:26:46
|
|
@ 功能: 图像设定Css
|
|
*/
|
|
const imgStyle = computed(() => {
|
|
let cssStyle:any = {}
|
|
cssStyle['border'] = "1px solid #ccc";
|
|
cssStyle['border-radius'] = props.viewSetup.form.imgBorderRadius + "px";
|
|
cssStyle['padding'] = props.viewSetup.form.imgPadding + "px";
|
|
if(props.viewSetup.form.imgWidth != 0){
|
|
cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
|
|
}else{
|
|
cssStyle['width'] = "50px";
|
|
}
|
|
if(props.viewSetup.form.imgHeight != 0){
|
|
cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
|
|
}else{
|
|
cssStyle['height'] = "50px";
|
|
}
|
|
// console.log("自定义样式",cssStyle)
|
|
return cssStyle
|
|
})
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-18 14:26:57
|
|
@ 功能: 内容设定css
|
|
*/
|
|
const cardInfoBox = computed(() => {
|
|
let cssStyle:any = {}
|
|
|
|
cssStyle['width'] = (Math.round(24/props.viewSetup.form.ranks) - props.viewSetup.form.imgWidth) + "px";
|
|
return cssStyle
|
|
})
|
|
const pageSize = ref(props.searchSend.pagesize)
|
|
onMounted(()=>{
|
|
if(pageSize.value <= 21){
|
|
pageSize.value = 21
|
|
}
|
|
props.searchSend.pagesize = pageSize.value
|
|
lineRanks.value = Math.round(24/props.viewSetup.form.ranks)
|
|
nextTick(()=>{
|
|
getCardList(props.searchSend)
|
|
})
|
|
})
|
|
// const url = ref()
|
|
// const srcList = ref([])
|
|
const handleSizeChange = (val: number) => {
|
|
// console.log(`${val} items per page`)\
|
|
props.searchSend.page = 1
|
|
props.searchSend.pagesize = val
|
|
// console.log(props.searchSend.pagesize)
|
|
getCardList(props.searchSend)
|
|
}
|
|
const handleCurrentChange = (val: number) => {
|
|
// console.log(`current page: ${val}`)
|
|
props.searchSend.page = val
|
|
getCardList(props.searchSend)
|
|
}
|
|
|
|
const url =
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
|
const srcList = (url:string) =>{
|
|
return [url]
|
|
return [
|
|
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
|
|
]
|
|
}
|
|
const cardDataList = ref([]) // 表格行数据
|
|
const totalNum = ref(0)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-19 09:32:11
|
|
@ 功能: 获取数据
|
|
*/
|
|
const getCardList = (val:any) => {
|
|
val.viewClass = {
|
|
class:"card"
|
|
}
|
|
gainFormPageListCont(val)
|
|
.then(({data})=>{
|
|
totalNum.value = data.total
|
|
// console.log("卡片获取数据--》",data)
|
|
cardDataList.value = data.list
|
|
})
|
|
}
|
|
// defineExpose({
|
|
// getCardList
|
|
// })
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-19 10:03:53
|
|
@ 功能: 获取图片显示
|
|
*/
|
|
const imgSrcPath = (val:any) => {
|
|
// console.log("获取图片显示", val[props.viewSetup.form.imgWork])
|
|
if(val[props.viewSetup.form.imgWork]){
|
|
return val[props.viewSetup.form.imgWork]
|
|
}
|
|
return LondIngImg
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-19 10:03:53
|
|
@ 功能: 获取图片数组显示
|
|
*/
|
|
const imgSrcAry = (val:any) => {
|
|
if(val[props.viewSetup.form.imgWork]){
|
|
if (val[props.viewSetup.form.imgWork] != ""){
|
|
return [val[props.viewSetup.form.imgWork]]
|
|
}else{
|
|
return []
|
|
}
|
|
|
|
}
|
|
return []
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-19 10:24:33
|
|
@ 功能: 获取内容
|
|
*/
|
|
const cardInfo = (val:any,cla:string) => {
|
|
if(cla=="title"){
|
|
if(props.viewSetup.form.title){
|
|
var titleAry = [];
|
|
if(props.viewSetup.form.title.length > 0){
|
|
props.viewSetup.form.title.forEach((item,index)=>{
|
|
// console.log("判断是否有标题--"+index+"-->",val[item])
|
|
let titleInfo = item.split("|#|")
|
|
if(Array.isArray(titleInfo) && titleInfo.length > 1){
|
|
titleAry.push(titleInfo[0])
|
|
}else{
|
|
if(val[item]){
|
|
titleAry.push(val[item])
|
|
}
|
|
}
|
|
})
|
|
}
|
|
if(titleAry.length>0){
|
|
return titleAry.join("")
|
|
}else{
|
|
let firstWord = ""
|
|
let powerAry = ["id","creater_time","edit_time","masters_key","states","flow_id"];
|
|
for (let key in val) {
|
|
if (val.hasOwnProperty(key)) {
|
|
if(!powerAry.includes(key)){
|
|
if(val[key] != '' && val[key] != null){
|
|
firstWord = val[key]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return firstWord
|
|
}
|
|
|
|
}
|
|
if(val[props.viewSetup.form.titleWork]){
|
|
return val[props.viewSetup.form.titleWork]
|
|
}
|
|
}else if(cla=="content"){
|
|
// console.log("判断是否有标题---->",props.columnsFilter)
|
|
|
|
if(props.viewSetup.form.describe){
|
|
var titleAry = [];
|
|
if(props.viewSetup.form.describe.length > 0){
|
|
props.viewSetup.form.describe.forEach((item,index)=>{
|
|
// console.log("判断是否有标题--"+index+"-->",val[item])
|
|
let titleInfo = item.split("|#|")
|
|
if(Array.isArray(titleInfo) && titleInfo.length > 1){
|
|
titleAry.push(titleInfo[0])
|
|
}else{
|
|
if(val[item]){
|
|
if(Array.isArray(props.columnsFilter) && props.columnsFilter.length > 0){
|
|
let mingCehgn = ""
|
|
props.columnsFilter.forEach((mItem:any) => {
|
|
if(mItem.field == item){
|
|
if(mItem.label != ""){
|
|
mingCehgn = mItem.label + "：" + val[item]
|
|
}else{
|
|
mingCehgn = val[item]
|
|
}
|
|
|
|
}
|
|
})
|
|
titleAry.push(mingCehgn)
|
|
}else{
|
|
titleAry.push(val[item])
|
|
}
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
if(titleAry.length>0){
|
|
return titleAry
|
|
return titleAry.join("")
|
|
}else{
|
|
let firstWord = ""
|
|
let powerAry = ["id","creater_time","edit_time","masters_key","states","flow_id"];
|
|
for (let key in val) {
|
|
if (val.hasOwnProperty(key)) {
|
|
if(!powerAry.includes(key)){
|
|
if(val[key] != '' && val[key] != null){
|
|
firstWord = val[key]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return firstWord
|
|
}
|
|
|
|
}
|
|
}
|
|
return ""
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-03 13:24:06
|
|
@ 功能: 查看详细内容
|
|
*/
|
|
const tablePageClass = ref(1)
|
|
const lookPageInfoIsShow = ref(false)
|
|
const pageInfoCont = ref<any>()
|
|
const lookPageInfo = (val:any) => {
|
|
tablePageClass.value = 4;
|
|
pageInfoCont.value = val
|
|
lookPageInfoIsShow.value = true;
|
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<el-row :gutter="20">
|
|
|
|
<el-col v-for="item in cardDataList" :key="item.id" :span="lineRanks" class="cardBox">
|
|
|
|
<el-card @click="lookPageInfo(item)">
|
|
<div class="cardContBox">
|
|
<el-image
|
|
:style="imgStyle"
|
|
:src="imgSrcPath(item)"
|
|
:zoom-rate="1.2"
|
|
:max-scale="7"
|
|
:min-scale="0.2"
|
|
:preview-src-list="imgSrcAry(item)"
|
|
:initial-index="4"
|
|
fit="cover"
|
|
/>
|
|
<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); min-height:'+props.viewSetup.form.imgHeight+'px; ' ">
|
|
<div class="title">{{ cardInfo(item,"title") }}</div>
|
|
<div class="content">
|
|
<div v-for="item in cardInfo(item,'content')">{{ item }}</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
<div class="pageBox">
|
|
<el-pagination
|
|
v-model:current-page="props.searchSend.page"
|
|
v-model:page-size="pageSize"
|
|
:page-sizes="[3, 9, 12, 30, 50, 100]"
|
|
:size="size"
|
|
:background="true"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalNum"
|
|
class="page"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @get-page-data="getPageData" />
|
|
</div>
|
|
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.demo-image__error .image-slot {
|
|
font-size: 30px;
|
|
}
|
|
.demo-image__error .image-slot .el-icon {
|
|
font-size: 30px;
|
|
}
|
|
.demo-image__error .el-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
.cardBox{
|
|
padding: 10px 0 5px 0;
|
|
:deep .el-card__body{
|
|
padding:10px;
|
|
}
|
|
.title{
|
|
font-size:14px;
|
|
font-weight:bold;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.content{
|
|
color: #909399;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.cardContBox{
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
padding: 0 5px;
|
|
}
|
|
.cardInfo{
|
|
padding-left: 5px;
|
|
}
|
|
|
|
}
|
|
.pageBox{
|
|
display:flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
|