herenshan112
/
hxgksystemapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成卡片视图

qin_v11_master
超级管理员 1 year ago
parent
30dd479169
commit
0a4377d618
3 changed files with 216 additions and 104 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 142
      src/components/DesignForm/app/cardPage.vue
  2. 10
      src/components/DesignForm/app/index.vue
  3. 168
      src/components/DesignForm/tableListPage/index.vue

142
src/components/DesignForm/app/cardPage.vue
View File

@ -5,6 +5,9 @@
--> -->
<script lang='ts' setup> <script lang='ts' setup>
import type { ComponentSize } from 'element-plus' import type { ComponentSize } from 'element-plus'
import { gainFormPageListCont } from '@/api/DesignForm/requestapi'
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
const props = defineProps({ const props = defineProps({
searchSend:{ searchSend:{
type:Object, type:Object,
@ -18,6 +21,12 @@ const props = defineProps({
return {} return {}
} }
}, },
columnsFilter:{
type:Object,
default(){
return {}
}
},
drawerWith:{ drawerWith:{
type:Number, type:Number,
default:0 default:0
@ -77,14 +86,23 @@ const cardInfoBox = computed(() => {
}) })
onMounted(()=>{ onMounted(()=>{
lineRanks.value = Math.round(24/props.viewSetup.form.ranks) lineRanks.value = Math.round(24/props.viewSetup.form.ranks)
nextTick(()=>{
getCardList(props.searchSend)
})
}) })
// const url = ref() // const url = ref()
// const srcList = ref([]) // const srcList = ref([])
const handleSizeChange = (val: number) => { const handleSizeChange = (val: number) => {
console.log(`${val} items per page`) // 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) => { const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`) // console.log(`current page: ${val}`)
props.searchSend.page = val
getCardList(props.searchSend)
} }
const url = const url =
@ -101,56 +119,114 @@ const srcList = (url:string) =>{
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.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 ""
}
/**
@ 作者: 秦东
@ 时间: 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(val[props.viewSetup.form.titleWork]){
return val[props.viewSetup.form.titleWork]
}
}else if(cla=="content"){
if(val[props.viewSetup.form.describe]){
return val[props.viewSetup.form.describe]
}
}
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> </script>
<template> <template>
<div> <div>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="lineRanks" class="cardBox"> <el-col v-for="item in cardDataList" :key="item.id" :span="lineRanks" class="cardBox">
<el-card > <el-card @click="lookPageInfo(item)">
<div class="cardContBox"> <div class="cardContBox">
<el-image <el-image
:style="imgStyle" :style="imgStyle"
:src="url" :src="imgSrcPath(item)"
:zoom-rate="1.2" :zoom-rate="1.2"
:max-scale="7" :max-scale="7"
:min-scale="0.2" :min-scale="0.2"
:preview-src-list="srcList(url)" :preview-src-list="imgSrcAry(item)"
:initial-index="4" :initial-index="4"
fit="cover" fit="cover"
/> />
<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' "> <div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' ">
<div class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div> <div class="title">{{ cardInfo(item,"title") }}</div>
<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> <div class="content">{{ cardInfo(item,"content") }}</div>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="lineRanks" class="cardBox">
<el-card >
<div class="cardContBox">
<el-image
:style="imgStyle"
:src="url"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="srcList(url)"
:initial-index="4"
fit="cover"
/>
<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' ">
<div class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</div>
</el-card>
</el-col>
</el-row> </el-row>
@ -158,17 +234,17 @@ const srcList = (url:string) =>{
<el-pagination <el-pagination
v-model:current-page="props.searchSend.page" v-model:current-page="props.searchSend.page"
v-model:page-size="props.searchSend.pagesize" v-model:page-size="props.searchSend.pagesize"
:page-sizes="[100, 200, 300, 400]" :page-sizes="[3, 9, 12, 30, 50, 100]"
:size="size" :size="size"
:background="true" :background="true"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="400" :total="totalNum"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
class="page" class="page"
/> />
</div> </div>
<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
</div> </div>
</template> </template>

10
src/components/DesignForm/app/index.vue
View File

@ -302,6 +302,7 @@ watch(()=>props.formId,(val:any)=>{
const timeAxisRef = ref(null) const timeAxisRef = ref(null)
const calendarPageRef = ref(null) const calendarPageRef = ref(null)
const cardPageRef = ref(null)
const searchSend = reactive({ const searchSend = reactive({
formId:props.formId, formId:props.formId,
page:state.currentPage, page:state.currentPage,
@ -346,6 +347,11 @@ const getPageData = () => {
break; break;
case 5: case 5:
break; break;
case 6:
nextTick(()=>{
cardPageRef.value.getCardList(sendData)
})
break;
default: default:
state.loading = true; state.loading = true;
gainFormPageListCont(sendData) gainFormPageListCont(sendData)
@ -1123,7 +1129,7 @@ const tabsView = (val:any,types:number) => {
</div> </div>
</el-col> </el-col>
<el-col v-if="viewType==2" :span="24"> <el-col v-if="viewType==2" :span="24">
<CalendarPage ref="calendarPageRef" :search-send="searchSend" :body-hight="265" :drawer-with="drawerWith" /> <CalendarPage ref="calendarPageRef" :search-send="searchSend" :body-hight="265" :drawer-with="drawerWith" :view-setup="viewPage.card" />
</el-col> </el-col>
<el-col v-if="viewType==3" :span="24"> <el-col v-if="viewType==3" :span="24">
<TimeAxisPage ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" :search-send="searchSend" :drawer-with="drawerWith" /> <TimeAxisPage ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" :search-send="searchSend" :drawer-with="drawerWith" />
@ -1135,7 +1141,7 @@ const tabsView = (val:any,types:number) => {
<MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.map" /> <MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.map" />
</el-col> </el-col>
<el-col v-if="viewType==6" :span="24"> <el-col v-if="viewType==6" :span="24">
<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.card" /> <CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.card" :columns-filter="columnsFilter" />
</el-col> </el-col>
<el-col :span="24" style="display:none"> <el-col :span="24" style="display:none">
<el-button-group> <el-button-group>

168
src/components/DesignForm/tableListPage/index.vue
View File

@ -292,6 +292,7 @@ watch(()=>props.lookPageIsShow,(val:boolean)=>{
const timeAxisRef = ref(null) const timeAxisRef = ref(null)
const calendarPageRef = ref(null) const calendarPageRef = ref(null)
const cardPageRef = ref(null)
const searchSend = reactive({ const searchSend = reactive({
formId:props.formId, formId:props.formId,
page:state.currentPage, page:state.currentPage,
@ -317,82 +318,111 @@ const getPageData = () => {
//searchData:"id:1" //searchData:"id:1"
} }
console.log("获取列表详细信息",sendData) console.log("获取列表详细信息",sendData)
gainFormPageListCont(sendData)
.then((data)=>{ switch(viewType.value){
case 2:
//console.log("获取列表详细信息----------------->",data) nextTick(()=>{
//liwenxuan 关联表单数据获取 start // console.log("获取列表详细信息-------555---------->",calendarPageRef.value)
calendarPageRef.value.calendarSearchData(sendData)
let dataList = data })
//console.log(dataList) // calendarPageRef.value.calendarSearchData()
asfDetails = props.data.columns.filter((item: any) => { break;
return item.fieldClass=="associatedForms" case 3:
nextTick(()=>{
// console.log("获取列表详细信息-------222---------->",timeAxisRef.value)
timeAxisRef.value.searchTimeList(sendData,1)
}) })
break;
if(asfDetails.length>0&&data.data.list!=null){ case 4:
//console.log(data.data.list) break;
//拼装参数,asf值对象数组 case 5:
asfQueryParams = [] break;
for(let j = 0;j< asfDetails.length;j++){ case 6:
let asfQueryParamsItem :any = {} nextTick(()=>{
//console.log(asfDetails[j]) cardPageRef.value.getCardList(sendData)
asfQueryParamsItem.formId = asfDetails[j].control.formid })
asfQueryParamsItem.field = asfDetails[j].field break;
default:
gainFormPageListCont(sendData)
.then((data)=>{
let asfToSelectIds = [] //console.log("获取列表详细信息----------------->",data)
for(let i = 0;i<data.data.list.length;i++){ //liwenxuan 关联表单数据获取 start
let asfMasterAndAsfId:any = {}
asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field] let dataList = data
asfMasterAndAsfId.asfMasterId = data.data.list[i].id //console.log(dataList)
asfDetails = props.data.columns.filter((item: any) => {
asfToSelectIds.push(asfMasterAndAsfId) return item.fieldClass=="associatedForms"
} })
asfQueryParamsItem.asfToSelectIds = asfToSelectIds
asfQueryParams.push(asfQueryParamsItem)
} if(asfDetails.length>0&&data.data.list!=null){
let queryCount = 0 //console.log(data.data.list)
for(let i = 0;i<asfQueryParams[0].asfToSelectIds.length;i++){ //拼装参数,asf值对象数组
if(asfQueryParams[0].asfToSelectIds[i].asfId!=""){ asfQueryParams = []
queryCount++ for(let j = 0;j< asfDetails.length;j++){
} let asfQueryParamsItem :any = {}
} //console.log(asfDetails[j])
//console.log(asfQueryParams) asfQueryParamsItem.formId = asfDetails[j].control.formid
if(queryCount>0){ asfQueryParamsItem.field = asfDetails[j].field
getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
//console.log(data) let asfToSelectIds = []
for(let i = 0;i<dataList.data.list.length; i++){ for(let i = 0;i<data.data.list.length;i++){
//console.log(dataList.data.list[i]) let asfMasterAndAsfId:any = {}
for(let j = 0;j<data.length;j++){ asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field]
//console.log(data[j]) asfMasterAndAsfId.asfMasterId = data.data.list[i].id
for(let n = 0;n<data[j].list.length;n++){
if(dataList.data.list[i].id==data[j].list[n].asfMasterId){ asfToSelectIds.push(asfMasterAndAsfId)
dataList.data.list[i][data[j].field] = data[j].list[n].label }
asfQueryParamsItem.asfToSelectIds = asfToSelectIds
asfQueryParams.push(asfQueryParamsItem)
}
let queryCount = 0
for(let i = 0;i<asfQueryParams[0].asfToSelectIds.length;i++){
if(asfQueryParams[0].asfToSelectIds[i].asfId!=""){
queryCount++
}
}
//console.log(asfQueryParams)
if(queryCount>0){
getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
//console.log(data)
for(let i = 0;i<dataList.data.list.length; i++){
//console.log(dataList.data.list[i])
for(let j = 0;j<data.length;j++){
//console.log(data[j])
for(let n = 0;n<data[j].list.length;n++){
if(dataList.data.list[i].id==data[j].list[n].asfMasterId){
dataList.data.list[i][data[j].field] = data[j].list[n].label
}
//console.log(data[j].list[n])
}
} }
//console.log(data[j].list[n])
} }
tableDataList.value = dataList.data.list
});
} }else{
tableDataList.value = data.data.list
} }
tableDataList.value = dataList.data.list
}); }else{
}else{ tableDataList.value = data.data.list
tableDataList.value = data.data.list
} }
//liwenxuan 关联表单数据获取 end
}else{ state.total = data.data.total
tableDataList.value = data.data.list state.loading = false;
})
} .finally(()=>{
//liwenxuan 关联表单数据获取 end state.loading = false;
state.total = data.data.total })
state.loading = false;
}) }
.finally(()=>{
state.loading = false;
})
} }
@ -1099,7 +1129,7 @@ const tabsView = (val:any,types:number) => {
<MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" /> <MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" />
</el-col> </el-col>
<el-col v-if="viewType==6" :span="24"> <el-col v-if="viewType==6" :span="24">
<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" /> <CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" :columns-filter="columnsFilter" />
</el-col> </el-col>
<el-col :span="24" style="display:none"> <el-col :span="24" style="display:none">

Write Preview
Loading…
Cancel
Save