优化卡片展示

src/components/CardTemplate/index.vue

@@ -4,46 +4,49 @@
     <div v-if="cardInfo.value == 1" class="flex-card" :style="cardBoxStyle">
       <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
         <el-card :style="cardStyle">
-          <div slot="header" :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}" class="clearfix">
+          <div slot="header"
+               :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}"
+               class="clearfix">
             <div class="titleLeft" :style="titleStyle">
               <span v-if="cardInfo.title.text != ''">
-                {{ cardInfo.title.text + ':' }}
+                {{ cardInfo.title.text + ":" }}
               </span>
               <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
                 <div slot="content">
-                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                  {{ getModelName(cardInfo.title, dataInfo, "title") }}
                 </div>
                 <span>
-                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                  {{ getModelName(cardInfo.title, dataInfo, "title") }}
                 </span>
               </el-tooltip>
             </div>
             <div class="titleRight" :style="subTitleStyle">
               <span v-if="cardInfo.subTitle.text != ''">
-                {{ cardInfo.subTitle.text + ':' }}
+                {{ cardInfo.subTitle.text + ":" }}
               </span>
               <el-tooltip v-if="cardInfo.subTitle.model != ''" effect="dark" placement="right-start">
                 <div slot="content">
-                  {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
+                  {{ getModelName(cardInfo.subTitle, dataInfo, "subTitle") }}
                 </div>
                 <span>
-                  {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
+                  {{ getModelName(cardInfo.subTitle, dataInfo, "subTitle") }}
                 </span>
               </el-tooltip>
             </div>
           </div>
-          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px"
+               :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
               <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                 <div class="flex-row" :style="infoStyle">
-                  <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
+                  <div class="left" v-if="item.text != ''">{{ item.text + ":" }}</div>
                   <div class="right">
                     <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                       <div slot="content">
-                        {{ getModelName(item, dataInfo, 'info') }}
+                        {{ getModelName(item, dataInfo, "info") }}
                       </div>
                       <span>
-                        {{ getModelName(item, dataInfo, 'info') }}
+                        {{ getModelName(item, dataInfo, "info") }}
                       </span>
                     </el-tooltip>
                   </div>
@@ -54,8 +57,10 @@
               <div class="btns">
                 <template v-for="(item, i) in btnList">
                   <template v-if="item.value == 'edit'">
-                    <el-button size="mini" type="text" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
-                      >{{ item.label }}
+                    <el-button size="mini" type="text" :key="i"
+                               :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1"
+                               @click="columnBtnsHandel(item.value, dataInfo)"
+                    >{{ item.label }}
                     </el-button>
                   </template>
                   <template v-if="item.value == 'remove'">
@@ -66,7 +71,7 @@
                       class="JNPF-table-delBtn"
                       :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
                       @click="columnBtnsHandel(item.value, dataInfo, item)"
-                      >{{ item.label }}
+                    >{{ item.label }}
                     </el-button>
                   </template>
                   <template v-if="item.value == 'detail'">
@@ -75,7 +80,9 @@
                     </el-button>
                   </template>
                   <template v-if="item.value == 'rowJournal'">
-                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">{{ item.label }}</el-button>
+                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
+                      {{ item.label }}
+                    </el-button>
                   </template>
                 </template>
               </div>
@@ -94,31 +101,35 @@
           <div :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}">
             <div :style="titleStyle">
               <span v-if="cardInfo.title.text != ''">
-                {{ cardInfo.title.text + ':' }}
+                {{ cardInfo.title.text + ":" }}
               </span>
               <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
                 <div slot="content">
-                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                  {{ getModelName(cardInfo.title, dataInfo, "title") }}
                 </div>
                 <span>
-                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                  {{ getModelName(cardInfo.title, dataInfo, "title") }}
                 </span>
               </el-tooltip>
             </div>
           </div>
-          <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px', width: '94%', marginLeft: '3%' }" :src="imgVal(dataInfo)" alt="" />
-          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+          <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px', width: '94%', marginLeft: '3%' }"
+                    :src="imgVal(dataInfo)" alt="">
+            <div slot="error" class="image-slot">暂无图片</div>
+          </el-image>
+          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px"
+               :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
               <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                 <div class="flex-row" :style="infoStyle">
-                  <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
+                  <div class="left" v-if="item.text != ''">{{ item.text + ":" }}</div>
                   <div class="right">
                     <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                       <div slot="content">
-                        {{ getModelName(item, dataInfo, 'info') }}
+                        {{ getModelName(item, dataInfo, "info") }}
                       </div>
                       <div>
-                        {{ getModelName(item, dataInfo, 'info') }}
+                        {{ getModelName(item, dataInfo, "info") }}
                       </div>
                     </el-tooltip>
                   </div>
@@ -129,8 +140,10 @@
               <div class="btns">
                 <template v-for="(item, i) in btnList">
                   <template v-if="item.value == 'edit'">
-                    <el-button size="mini" type="text" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
-                      >{{ item.label }}
+                    <el-button size="mini" type="text" :key="i"
+                               :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1"
+                               @click="columnBtnsHandel(item.value, dataInfo)"
+                    >{{ item.label }}
                     </el-button>
                   </template>
                   <template v-if="item.value == 'remove'">
@@ -141,7 +154,7 @@
                       class="JNPF-table-delBtn"
                       :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
                       @click="columnBtnsHandel(item.value, dataInfo, item)"
-                      >{{ item.label }}
+                    >{{ item.label }}
                     </el-button>
                   </template>
                   <template v-if="item.value == 'detail'">
@@ -150,7 +163,9 @@
                     </el-button>
                   </template>
                   <template v-if="item.value == 'rowJournal'">
-                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">{{ item.label }}</el-button>
+                    <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
+                      {{ item.label }}
+                    </el-button>
                   </template>
                 </template>
               </div>
@@ -168,21 +183,26 @@
         <el-card :style="cardStyle">
           <div class="flex">
             <div class="flex-left">
-              <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="" />
+              <div style="width: 100%; height: 180px">
+                <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="">
+                  <div slot="error" class="image-slot">暂无图片</div>
+                </el-image>
+              </div>
             </div>
             <div class="flex-right">
-              <div class="item-left" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
-                <div v-if="cardInfo.info.data.length > 0" :style="infoStyle">
+              <div class="item-left"
+                   :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+                <div v-if="cardInfo.info.data.length > 0" :style="infoStyle" style="width:100%">
                   <div class="item-row" v-for="(item, index) in cardInfo.info.data" :key="index">
-                    <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
+                    <div class="left" v-if="item.text != ''">{{ item.text + ":" }}</div>
                     <div class="right">
-                      <!-- {{ getModelName(item, dataInfo, 'info') }} -->
+<!--                      {{ getModelName(item, dataInfo, "info") }}-->
                       <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                         <div slot="content">
-                          {{ getModelName(item, dataInfo, 'info') }}
+                          {{ getModelName(item, dataInfo, "info") }}
                         </div>
                         <span>
-                          {{ getModelName(item, dataInfo, 'info') }}
+                        {{ getModelName(item, dataInfo, "info") }}
                         </span>
                       </el-tooltip>
                     </div>
@@ -193,13 +213,17 @@
                 <div class="item-footer" v-if="btnList.length > 0">
                   <div class="item-btns" v-for="(item, i) in btnList" :key="i">
                     <div v-if="item.value == 'edit'">
-                      <el-button size="mini" type="primary" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
-                        >{{ item.label }}
+                      <el-button size="mini" type="primary"
+                                 :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1"
+                                 @click="columnBtnsHandel(item.value, dataInfo)"
+                      >{{ item.label }}
                       </el-button>
                     </div>
                     <div v-if="item.value == 'remove'">
-                      <el-button size="mini" type="danger" :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo, item)"
-                        >{{ item.label }}
+                      <el-button size="mini" type="danger"
+                                 :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
+                                 @click="columnBtnsHandel(item.value, dataInfo, item)"
+                      >{{ item.label }}
                       </el-button>
                     </div>
                     <div v-if="item.value == 'detail'">
@@ -208,7 +232,9 @@
                       </el-button>
                     </div>
                     <div v-if="item.value == 'rowJournal'">
-                      <el-button size="mini" type="success" @click="columnBtnsHandel(item.value, dataInfo)">{{ item.label }}</el-button>
+                      <el-button size="mini" type="success" @click="columnBtnsHandel(item.value, dataInfo)">
+                        {{ item.label }}
+                      </el-button>
                     </div>
                   </div>
                   <div class="check">
@@ -225,17 +251,19 @@
     <div v-else-if="cardInfo.value == 4" class="flex-card" :style="cardBoxStyle">
       <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
         <el-card :style="cardStyle2(cardInfo.subTitle, dataInfo)">
-          <div slot="header" :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}" class="clearfix">
+          <div slot="header"
+               :style="cardInfo.title.class != '' && cardInfo.title.class ? JSON.parse(cardInfo.title.class) : {}"
+               class="clearfix">
             <div class="titleLeft" :style="titleStyle">
               <span v-if="cardInfo.title.text != ''">
-                {{ cardInfo.title.text + ':' }}
+                {{ cardInfo.title.text + ":" }}
               </span>
               <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
                 <div slot="content">
-                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                  {{ getModelName(cardInfo.title, dataInfo, "title") }}
                 </div>
                 <span>
-                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                  {{ getModelName(cardInfo.title, dataInfo, "title") }}
                 </span>
               </el-tooltip>
             </div>
@@ -253,18 +281,19 @@
               </el-tooltip> -->
             </div>
           </div>
-          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
+          <div v-if="cardInfo.info.data.length > 0" style="padding: 15px"
+               :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
               <el-col v-for="(item, index) in cardInfo.info.data" :key="index" :span="cardInfo.info.col">
                 <div class="flex-row" :style="infoStyle">
-                  <div class="left" v-if="item.text != ''">{{ item.text + ':' }}</div>
+                  <div class="left" v-if="item.text != ''">{{ item.text + ":" }}</div>
                   <div class="right">
                     <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                       <div slot="content">
-                        {{ getModelName(item, dataInfo, 'info') }}
+                        {{ getModelName(item, dataInfo, "info") }}
                       </div>
                       <span>
-                        {{ getModelName(item, dataInfo, 'info') }}
+                        {{ getModelName(item, dataInfo, "info") }}
                       </span>
                     </el-tooltip>
                   </div>
@@ -275,8 +304,10 @@
               <div class="btns">
                 <template v-for="(item, i) in btnList">
                   <template v-if="item.value == 'edit'">
-                    <el-button size="mini" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1" @click="columnBtnsHandel(item.value, dataInfo)"
-                      >{{ item.label }}
+                    <el-button size="mini" :key="i"
+                               :disabled="config.webType == 3 && [1, 2, 5].indexOf(data.flowState) > -1"
+                               @click="columnBtnsHandel(item.value, dataInfo)"
+                    >{{ item.label }}
                     </el-button>
                   </template>
                   <template v-if="item.value == 'remove'">
@@ -286,7 +317,7 @@
                       class="JNPF-table-delBtn"
                       :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
                       @click="columnBtnsHandel(item.value, dataInfo, item)"
-                      >{{ item.label }}
+                    >{{ item.label }}
                     </el-button>
                   </template>
                   <template v-if="item.value == 'detail'">
@@ -316,44 +347,45 @@
 </template>
 
 <script>
-import { dataapiDetail, dataapiUrl } from '@/api/systemData/dataInterface'
-import { comUrl } from '@/utils/define'
+import { dataapiDetail, dataapiUrl } from "@/api/systemData/dataInterface";
+import { comUrl } from "@/utils/define";
+
 export default {
   props: {
     cardInfo: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       }
     },
     modelList: {
       type: Array,
       default: () => {
-        return []
+        return [];
       }
     },
     cardData: {
       type: Array,
       default: () => {
-        return []
+        return [];
       }
     },
     columnList: {
       type: Array,
       default: () => {
-        return []
+        return [];
       }
     },
     btnList: {
       type: Array,
       default: () => {
-        return []
+        return [];
       }
     },
     config: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       }
     }
   },
@@ -363,106 +395,106 @@ export default {
         border: `1px solid ${this.cardInfo.borderColor}`,
         boxShadow: `0 2px ${this.cardInfo.shadowPx}px 0 ${this.cardInfo.shadowColor} !important`,
         backgroundColor: `${this.cardInfo.bgColor} !important`
-      }
+      };
 
-      return { ...style }
+      return { ...style };
     },
     cardBoxStyle() {
       let style = {
-        '--gridTemplateColumns': this.cardInfo.rowNum,
+        "--gridTemplateColumns": this.cardInfo.rowNum,
         gap: `${this.cardInfo.gap}px`
-      }
-      return { ...style }
+      };
+      return { ...style };
     },
     infoStyle() {
       let style = {
-        fontSize: this.cardInfo.info.size + 'px',
+        fontSize: this.cardInfo.info.size + "px",
         color: this.cardInfo.info.color
-      }
-      return { ...style }
+      };
+      return { ...style };
     },
     titleStyle() {
       let style = {
-        fontSize: this.cardInfo.title.size + 'px',
+        fontSize: this.cardInfo.title.size + "px",
         color: this.cardInfo.title.color
-      }
-      return { ...style }
+      };
+      return { ...style };
     },
     subTitleStyle() {
       let style = {
-        fontSize: this.cardInfo.subTitle.size + 'px',
+        fontSize: this.cardInfo.subTitle.size + "px",
         color: this.cardInfo.subTitle.color
-      }
-      return { ...style }
+      };
+      return { ...style };
     }
   },
   data() {
     return {
       cardList: []
-    }
+    };
   },
   async created() {
-    console.log(this.cardInfo.termInfo)
+    console.log(this.cardInfo.termInfo);
 
     await this.columnList.forEach(async (item) => {
       if (item.propsUrl && item.propsUrl.length) {
         await dataapiDetail(item.params.propsUrl).then(async (res) => {
-          let { data, code } = res.data
+          let { data, code } = res.data;
           if (code == 200) {
             await dataapiUrl(data.apiUrl).then((result) => {
               // console.log(result)
               if (this.cardInfo.title.model == item.propId) {
-                this.cardInfo.title.apiData = result.data.data
-                this.cardInfo.title.apiProps = item.params.apiProps
+                this.cardInfo.title.apiData = result.data.data;
+                this.cardInfo.title.apiProps = item.params.apiProps;
               }
               if (this.cardInfo.subTitle.model == item.propId) {
-                this.cardInfo.title.apiData = result.data.data
-                this.cardInfo.title.apiProps = item.params.apiProps
+                this.cardInfo.title.apiData = result.data.data;
+                this.cardInfo.title.apiProps = item.params.apiProps;
               }
               if (this.cardInfo.info.data.length > 0) {
                 this.cardInfo.info.data.map((val) => {
                   if (val.model == item.propId) {
-                    val.apiData = result.data.data
-                    val.apiProps = item.params.apiProps
-                    return val
+                    val.apiData = result.data.data;
+                    val.apiProps = item.params.apiProps;
+                    return val;
                   }
-                })
+                });
               }
-            })
+            });
           }
           // if(res.)
-        })
+        });
       }
       if (this.cardInfo.title.model == item.propId) {
-        this.cardInfo.title.field = item.field
+        this.cardInfo.title.field = item.field;
       }
       if (this.cardInfo.subTitle.model == item.propId) {
-        this.cardInfo.subTitle.field = item.field
+        this.cardInfo.subTitle.field = item.field;
       }
       if (this.cardInfo.info.data.length > 0) {
         this.cardInfo.info.data.map((val) => {
           if (val.model == item.propId) {
-            val.field = item.field
-            return val
+            val.field = item.field;
+            return val;
           }
-        })
+        });
       }
-    })
+    });
 
     setTimeout(() => {
       if (this.modelList.length > 0) {
-        this.cardList = 10
+        this.cardList = 10;
       } else {
         if (this.cardData.length > 0) {
           this.cardList = this.cardData.map((item) => {
             return {
               ...item,
               checked: false
-            }
-          })
+            };
+          });
         }
       }
-    }, 1000)
+    }, 1000);
   },
   methods: {
     cardStyle2(model, item) {
@@ -470,110 +502,110 @@ export default {
         border: `1px solid ${this.cardInfo.borderColor}`,
         boxShadow: `0 2px ${this.cardInfo.shadowPx}px 0 ${this.cardInfo.shadowColor} !important`,
         background: `linear-gradient(to bottom, ${this.cardInfo.bgColor} 0%, #ffffff 80%)`
-      }
+      };
       if (this.cardInfo.termInfo.length > 0) {
         this.cardInfo.termInfo.forEach((val) => {
-          if (val.string == '==' && val.val == item[this.cardInfo.subTitle.field]) {
-            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
+          if (val.string == "==" && val.val == item[this.cardInfo.subTitle.field]) {
+            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `;
           }
-          if (val.string == '>' && item[this.cardInfo.subTitle.field] > val.val) {
-            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
+          if (val.string == ">" && item[this.cardInfo.subTitle.field] > val.val) {
+            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `;
           }
-          if (val.string == '<' && item[this.cardInfo.subTitle.field] < val.val) {
-            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `
+          if (val.string == "<" && item[this.cardInfo.subTitle.field] < val.val) {
+            style.background = `linear-gradient(to bottom, ${val.style} 0%, #ffffff 80%)  `;
           }
-        })
+        });
       }
-      return { ...style }
+      return { ...style };
     },
     checkChange() {
-      let records = this.cardList.filter((item) => item.checked == true)
-      this.$parent.handleSelectionChange({ records: records })
+      let records = this.cardList.filter((item) => item.checked == true);
+      this.$parent.handleSelectionChange({ records: records });
     },
     imgVal(data) {
       if (this.modelList.length > 0) {
-        return 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
+        return "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
       } else {
-        if (this.cardInfo.imgModel && this.cardInfo.imgModel != '') {
-          let imgFiledId = this.columnList.find((val) => val.propId == this.cardInfo.imgModel)?.field
-          if (imgFiledId && data[imgFiledId] != '' && data[imgFiledId] != null && data[imgFiledId] != undefined) {
-            let url = data[imgFiledId].split(',')[0]
-            return comUrl + '/api/file/getFileInputStreamById/' + url
+        if (this.cardInfo.imgModel && this.cardInfo.imgModel != "") {
+          let imgFiledId = this.columnList.find((val) => val.propId == this.cardInfo.imgModel)?.field;
+          if (imgFiledId && data[imgFiledId] != "" && data[imgFiledId] != null && data[imgFiledId] != undefined) {
+            let url = data[imgFiledId].split(",")[0];
+            return comUrl + "/api/file/getFileInputStreamById/" + url;
           }
         }
       }
     },
     columnBtnsHandel(value, data) {
-      this.$parent.columnBtnsHandel(value, data)
+      this.$parent.columnBtnsHandel(value, data);
     },
     getModelName(model, item, type) {
       if (this.modelList.length > 0) {
-        let name = this.modelList.find((m) => m.__vModel__ == model.model)
+        let name = this.modelList.find((m) => m.__vModel__ == model.model);
         if (name != undefined) {
-          return `$${name.__config__.label}$`
+          return `$${name.__config__.label}$`;
         } else {
-          return ''
+          return "";
         }
       } else {
-        if (type == 'title') {
+        if (type == "title") {
           if (this.cardInfo.title.model == model.model) {
             if (model.apiData) {
               let result = model.apiData.find((val) => {
                 if (val[model.apiProps.value] == item[this.cardInfo.title.field]) {
-                  return val
+                  return val;
                 }
-              })?.[model.apiProps.label]
+              })?.[model.apiProps.label];
               if (result != undefined) {
-                return result
+                return result;
               } else {
-                return item[this.cardInfo.title.field]
+                return item[this.cardInfo.title.field];
               }
             } else {
-              return item[this.cardInfo.title.field]
+              return item[this.cardInfo.title.field];
             }
           }
-        } else if (type == 'subTitle') {
+        } else if (type == "subTitle") {
           if (model.apiData) {
             let result = model.apiData.find((val) => {
               if (val[model.apiProps.value] == item[this.cardInfo.subTitle.field]) {
-                return val
+                return val;
               }
-            })?.[model.apiProps.label]
+            })?.[model.apiProps.label];
             if (result != undefined) {
-              return result
+              return result;
             } else {
-              return item[this.cardInfo.subTitle.field]
+              return item[this.cardInfo.subTitle.field];
             }
           } else {
-            return item[this.cardInfo.subTitle.field]
+            return item[this.cardInfo.subTitle.field];
           }
-        } else if (type == 'info') {
-          let field = this.cardInfo.info.data.find((val) => val.model == model.model)?.field
+        } else if (type == "info") {
+          let field = this.cardInfo.info.data.find((val) => val.model == model.model)?.field;
           if (field != undefined) {
             if (model.apiData) {
               let result = model.apiData.find((val) => {
                 if (val[model.apiProps.value] == item[field]) {
-                  return val
+                  return val;
                 }
-              })?.[model.apiProps.label]
+              })?.[model.apiProps.label];
               if (result != undefined) {
-                return result
+                return result;
               } else {
-                return item[field]
+                return item[field];
               }
             } else {
-              return item[field]
+              return item[field];
             }
           } else {
-            return ''
+            return "";
           }
         } else {
-          return ''
+          return "";
         }
       }
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -584,16 +616,19 @@ export default {
   // grid-template-rows: repeat(var(--gridTemplateRows), 1fr);
   // justify-content: space-between;
 }
+
 @media screen and (max-width: 1400px) {
   .flex-card {
     grid-template-columns: 1fr 1fr 1fr;
   }
 }
+
 @media screen and (max-width: 1200px) {
   .flex-card {
     grid-template-columns: 1fr 1fr;
   }
 }
+
 .box-card {
   cursor: pointer;
   box-sizing: border-box;
@@ -604,7 +639,7 @@ export default {
 
 .img {
   width: 100%;
-  height: 150px;
+  min-height: 150px;
 }
 
 .clearfix {
@@ -612,12 +647,14 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 10px;
+
   .titleLeft {
     width: 50%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   .titleRight {
     flex: 1;
     text-align: right;
@@ -626,6 +663,7 @@ export default {
     white-space: nowrap;
   }
 }
+
 .flex-row {
   width: 100%;
   display: flex;
@@ -634,6 +672,7 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-bottom: 10px;
+
   .right {
     max-width: 200px;
     margin-left: 6px;
@@ -642,6 +681,7 @@ export default {
     white-space: nowrap;
   }
 }
+
 .footer {
   display: flex;
   justify-content: space-between;
@@ -651,6 +691,7 @@ export default {
   .btns {
     width: 90%;
   }
+
   .check {
     flex: 1;
     text-align: right;
@@ -660,6 +701,7 @@ export default {
 :deep(.el-card__header) {
   padding: 0 !important;
 }
+
 :deep(.el-card__body) {
   padding: 0 !important;
 }
@@ -671,21 +713,27 @@ export default {
 .flex-right {
   flex: 1;
   display: flex;
+
   .item-left {
     width: 70%;
     overflow: hidden;
+
     .item-row {
-      // width: 100%;
+      width: 100%;
       display: flex;
       flex-wrap: nowrap;
       // overflow: hidden;
       // text-overflow: ellipsis;
       // white-space: nowrap;
       .left {
-        width: 30%;
+        width: 40%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
+
       .right {
-        max-width: 100px;
+        max-width: 50px;
         margin-left: 6px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -693,8 +741,10 @@ export default {
       }
     }
   }
+
   .item-right {
     flex: 1;
+
     .item-footer {
       height: 100%;
       display: flex;
@@ -706,6 +756,7 @@ export default {
         margin-top: 10px;
         text-align: right;
       }
+
       .check {
         position: absolute;
         right: 10px;
@@ -714,4 +765,15 @@ export default {
     }
   }
 }
+
+:deep(.image-slot) {
+  background-color: #f5f7fa;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #c0c4cc;
+  vertical-align: middle;
+}
 </style>

src/components/ColumnDesign/index.vue

@@ -773,7 +773,7 @@ export default {
       showFalg: 'Btns',
       typeList: [
         {
-          url: require('@/assets/images/generator/card4.png'),
+          url: require('@/assets/images/generator/card1.png'),
           value: 1,
           name: '普通表格'
         },

src/views/basic/dynamicModel/list/index.vue

@@ -357,7 +357,7 @@
         </vxe-grid>
       </div>
 
-      <div v-loading="loading" v-else-if="columnData.type == 6" class="box-content" style="margin-left: 0; position: relative; padding-bottom: 60px">
+      <div v-loading="loading" v-else-if="columnData.type == 6" class="box-content" style="margin-left: 0;  padding-bottom: 60px">
         <div style="padding: 15px 10px; display: flex; algin-items: center">
           <div v-for="(item, i) in columnData.btnsList" :key="i" style="margin-left: 10px; height: 20px; display: flex; align-items: center">
             <el-button size="mini" v-if="item.value !== 'journal'" :type="i === 0 ? 'primary' : 'text'" :icon="item.icon" @click="headBtnsHandel(item.value, item.importStatus)" :key="i">
@@ -390,7 +390,7 @@
           :cardData="cardData"
           :config="config"
         ></CardTemplate>
-        <div class="pager" style="position: absolute; bottom: 10px;right:20px; width: 100%">
+        <div class="pager" style="position: absolute; bottom: 10px;right:20px; z-index: 99; width: 100%">
           <vxe-pager
             v-if="columnData.hasPage"
             background