卡片bug优化

src/api/systemData/dataInterface.js

@@ -41,6 +41,15 @@ export const dataapiDetail = (id) => {
     }
   })
 }
+
+// api数据请求
+export const dataapiUrl = (url) => {
+  return request({
+    url: '/bi-api' + url,
+    method: 'get',
+  })
+}
+
 // 添加接口
 export function createDataInterface(data) {
   return request({

src/components/CardTemplate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex-card" v-if="cardInfo.value == 1" :style="cardBoxStyle">
-    <div v-for="(data, dataIndex) in cardList" :key="dataIndex" class="box-card">
+    <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 class="titleLeft" :style="titleStyle">
@@ -9,10 +9,10 @@
             </span>
             <el-tooltip v-if="cardInfo.title.model != ''" effect="dark" placement="right-start">
               <div slot="content">
-                {{ getModelName(cardInfo.title.model, data, 'title') }}
+                {{ getModelName(cardInfo.title, dataInfo, 'title') }}
               </div>
               <span>
-                {{ getModelName(cardInfo.title.model, data, 'title') }}
+                {{ getModelName(cardInfo.title, dataInfo, 'title') }}
               </span>
             </el-tooltip>
           </div>
@@ -22,10 +22,10 @@
             </span>
             <el-tooltip v-if="cardInfo.subTitle.model != ''" effect="dark" placement="right-start">
               <div slot="content">
-                {{ getModelName(cardInfo.subTitle.model, data, 'subTitle') }}
+                {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
               </div>
               <span>
-                {{ getModelName(cardInfo.subTitle.model, data, 'subTitle') }}
+                {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
               </span>
             </el-tooltip>
           </div>
@@ -38,10 +38,10 @@
                 <div class="right">
                   <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
                     <div slot="content">
-                      {{ getModelName(item.model, data, 'info') }}
+                      {{ getModelName(item, dataInfo, 'info') }}
                     </div>
                     <span>
-                      {{ getModelName(item.model, data, 'info') }}
+                      {{ getModelName(item, dataInfo, 'info') }}
                     </span>
                   </el-tooltip>
                 </div>
@@ -49,38 +49,43 @@
             </el-col>
           </el-row>
           <div class="footer" v-if="btnList.length > 0">
-            <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, data)"
-                  >{{ item.label }}
-                </el-button>
-              </template>
-              <template v-if="item.value == 'remove'">
-                <el-button
-                  size="mini"
-                  type="text"
-                  :key="i"
-                  class="JNPF-table-delBtn"
-                  :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(data.flowState) > -1"
-                  @click="columnBtnsHandel(item.value, data, item)"
-                  >{{ item.label }}
-                </el-button>
+            <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, data)"
+                    >{{ item.label }}
+                  </el-button>
+                </template>
+                <template v-if="item.value == 'remove'">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    :key="i"
+                    class="JNPF-table-delBtn"
+                    :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(dataInfo.flowState) > -1"
+                    @click="columnBtnsHandel(item.value, dataInfo, item)"
+                    >{{ item.label }}
+                  </el-button>
+                </template>
+                <template v-if="item.value == 'detail'">
+                  <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, dataInfo)">
+                    {{ item.label }}
+                  </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>
+                </template>
               </template>
-              <template v-if="item.value == 'detail'">
-                <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, data)">
-                  {{ item.label }}
-                </el-button>
-              </template>
-              <template v-if="item.value == 'rowJournal'">
-                <el-button size="mini" type="text" :key="i" @click="columnBtnsHandel(item.value, data)">{{ item.label }}</el-button>
-              </template>
-            </template>
+            </div>
+            <div class="check">
+              <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
+            </div>
           </div>
         </div>
       </el-card>
     </div>
   </div>
-  <div class="flex-card" v-else :style="cardBoxStyle">
+  <div class="flex-card" v-else-if="cardInfo.value == 2" :style="cardBoxStyle">
     <div v-for="(data, dataIndex) in cardList" :key="dataIndex" class="box-card">
       <el-card>
         <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(data)" alt="" />
@@ -150,6 +155,7 @@
 </template>
 
 <script>
+import { dataapiDetail, dataapiUrl } from '@/api/systemData/dataInterface'
 export default {
   props: {
     cardInfo: {
@@ -167,7 +173,7 @@ export default {
     cardData: {
       type: Array,
       default: () => {
-        return {}
+        return []
       }
     },
     columnList: {
@@ -201,30 +207,10 @@ export default {
     cardBoxStyle() {
       let style = {
         '--gridTemplateColumns': this.cardInfo.rowNum,
-        '--gridTemplateRows': this.cardInfo.rowNum,
         gap: `${this.cardInfo.gap}px`
       }
       return { ...style }
     },
-    cardList() {
-      if (this.modelList.length > 0) {
-        return 10
-      } else {
-        if (this.cardData.length > 0) {
-          return this.cardData.map((item) => {
-            
-            // let data = {}
-            this.columnList.forEach((column) => {
-              console.log(column);
-              
-              // if (column.propId == this.cardInfo.subTitle.model) {
-              //   data.subTitle = item[column.field]
-              // }
-            })
-          })
-        }
-      }
-    },
     infoStyle() {
       let style = {
         fontSize: this.cardInfo.info.size + 'px',
@@ -248,13 +234,41 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      cardList: []
+    }
   },
-  created() {
-    console.log(this.columnList)
-    console.log(this.cardData);
-    
-    this.columnList.forEach((item) => {
+  async created() {
+    // console.log(this.columnList)
+    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
+          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
+              }
+              if (this.cardInfo.subTitle.model == item.propId) {
+                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
+                  }
+                })
+              }
+            })
+          }
+          // if(res.)
+        })
+      }
       if (this.cardInfo.title.model == item.propId) {
         this.cardInfo.title.field = item.field
       }
@@ -270,8 +284,27 @@ export default {
         })
       }
     })
+
+    setTimeout(() => {
+      if (this.modelList.length > 0) {
+        this.cardList = 10
+      } else {
+        if (this.cardData.length > 0) {
+          this.cardList = this.cardData.map((item) => {
+            return {
+              ...item,
+              checked: false
+            }
+          })
+        }
+      }
+    }, 1000)
   },
   methods: {
+    checkChange() {
+      let records = this.cardList.filter((item) => item.checked == true)
+      this.$parent.handleSelectionChange({ records: records })
+    },
     imgVal(val) {
       if (this.modelList.length > 0) {
         return 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
@@ -288,7 +321,7 @@ export default {
     },
     getModelName(model, item, type) {
       if (this.modelList.length > 0) {
-        let name = this.modelList.find((m) => m.__vModel__ == model)
+        let name = this.modelList.find((m) => m.__vModel__ == model.model)
         if (name != undefined) {
           return `$${name.__config__.label}$`
         } else {
@@ -296,17 +329,50 @@ export default {
         }
       } else {
         if (type == 'title') {
-          if (this.cardInfo.title.model == model) {
-            return item[this.cardInfo.title.field]
+          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
+                }
+              })?.[model.apiProps.label]
+              if (result != undefined) {
+                return result
+              } else {
+                return item[this.cardInfo.title.field]
+              }
+            } else {
+              return item[this.cardInfo.title.field]
+            }
           }
         } else if (type == 'subTitle') {
-          if (this.cardInfo.subTitle.model == model) {
+          if (model.apiData) {
+            let result = model.apiData.find((val) => {
+              if (val[model.apiProps.value] == item[this.cardInfo.subTitle.field]) {
+                return val
+              }
+            })?.[model.apiProps.label]
+            if (result != undefined) {
+              return result
+            } else {
+              return item[this.cardInfo.subTitle.field]
+            }
+          } else {
             return item[this.cardInfo.subTitle.field]
           }
         } else if (type == 'info') {
-          let field = this.cardInfo.info.data.find((val) => val.model == model)?.field
+          let field = this.cardInfo.info.data.find((val) => val.model == model.model)?.field
           if (field != undefined) {
-            return item[field]
+            let result = model.apiData.find((val) => {
+              if (val[model.apiProps.value] == item[field]) {
+                return val
+              }
+            })?.[model.apiProps.label]
+            if (result != undefined) {
+              return result
+            } else {
+              return item[field]
+            }
           } else {
             return ''
           }
@@ -323,7 +389,8 @@ export default {
 .flex-card {
   display: grid;
   grid-template-columns: repeat(var(--gridTemplateColumns), 1fr);
-  grid-template-rows: repeat(var(--gridTemplateRows), 1fr);
+  padding: 10px 0;
+  // grid-template-rows: repeat(var(--gridTemplateRows), 1fr);
   // justify-content: space-between;
 }
 @media screen and (max-width: 1400px) {
@@ -380,9 +447,17 @@ export default {
   }
 }
 .footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding-top: 10px;
-
   border-top: 1px solid #ccc;
+  .btns {
+    width: 90%;
+  }
+  .check {
+    flex: 1;
+  }
 }
 
 :deep(.el-card__header) {

src/components/ColumnDesign/index.vue

@@ -746,11 +746,11 @@ export default {
           value: 5,
           name: '左侧表格+详情'
         },
-        // {
-        //   url: require('@/assets/images/generator/columnType4.png'),
-        //   value: 6,
-        //   name: '卡片表格'
-        // }
+        {
+          url: require('@/assets/images/generator/card4.png'),
+          value: 6,
+          name: '卡片表格'
+        }
         // { url: require('@/assets/images/generator/columnType3.png'), value: 4, name: '快捷录入+普通表格' },
       ],
       dataInterfaceSelector: [],

src/utils/define.js

@@ -3,8 +3,8 @@
 // JAVA Cloud对应网关地址
 // const APIURl = 'http://192.168.0.103:8181'
 
-const url = 'https://windata.platomix.net' // 测试环境
-// const url = 'https://bi.platomix.net' // BI环境
+// const url = 'https://windata.platomix.net' // 测试环境
+const url = 'https://bi.platomix.net' // BI环境
 // const url = 'https://miniapp.zhangmushiye.com/' // 樟木环境
 // const url = 'http://hr.cscec8st.com.cn:50021/' // 中建环境
 

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

@@ -359,7 +359,14 @@
             <el-button size="mini" type="text" :icon="item.icon" @click="customBtnsBatchHandel(item)">{{ item.label }}</el-button>
           </div>
         </div>
-        <CardTemplate v-if="list.length > 0" :columnList="columnData.columnList" :cardInfo="columnData.cardTypeStyle" :btnList="columnData.columnBtnsList" :data="cardData" :config="config"></CardTemplate>
+        <CardTemplate
+          v-if="list.length > 0 && loading"
+          :columnList="columnData.columnList"
+          :cardInfo="columnData.cardTypeStyle"
+          :btnList="columnData.columnBtnsList"
+          :cardData="cardData"
+          :config="config"
+        ></CardTemplate>
         <div class="pager">
           <vxe-pager
             v-if="columnData.hasPage"
@@ -724,7 +731,7 @@ export default {
       itemRow: null,
       loading: true,
       cardData: [],
-      cardColumn:[]
+      cardColumn: []
     }
   },
   filters: {
@@ -1920,7 +1927,12 @@ export default {
           }
         }
 
-        this.hasBatchBtn = this.columnData.btnsList.some((o) => o.value == 'batchRemove') || this.customBtns.filter((o) => o.buttonLocation === 1).length > 0
+        if (this.columnData.type != 5) {
+          this.hasBatchBtn = this.columnData.btnsList.some((o) => o.value == 'batchRemove') || this.customBtns.filter((o) => o.buttonLocation === 1).length > 0
+        } else {
+          this.hasBatchBtn = this.btnsList.some((o) => o.value == 'batchRemove') || this.customBtns.filter((o) => o.buttonLocation === 1).length > 0
+        }
+
         this.$nextTick(() => {
           this.refreshTable = true
         })
@@ -2229,6 +2241,7 @@ export default {
               }
             }
           }
+
           return data
         }
         for (const item of this.columnList.filter((l) => l !== undefined)) {
@@ -2290,7 +2303,7 @@ export default {
             processData = processRes.data.data
           })
         }
-        if (this.config.webType == 3 && this.columnData.type != 5) {
+        if (this.config.webType == 3) {
           if (!columnList.find((i) => i.title === '发起时间')) {
             columnList.push({ title: '发起时间', fixed: 'right', align: 'center', slots: { default: 'startTime' } })
             columnList.push({ title: '当前节点', fixed: 'right', align: 'center', slots: { default: 'thisStep' } })
@@ -2300,10 +2313,12 @@ export default {
             columnList = columnList.filter((i) => i.title !== '操作')
           }
         }
-        // console.log(width)
+
         if (!columnList.find((i) => i.title === '操作')) {
           if (this.columnData.type != 5) {
             columnList.push({ title: '操作', visible: this.btnArr.length > 0, fixed: 'right', align: 'left', 'min-width': width, width: width, slots: { default: 'operate' } })
+          } else {
+            columnList.push({ title: '操作', visible: false, fixed: 'right', align: 'left', 'min-width': width, width: width, slots: { default: 'operate' } })
           }
           columnList.unshift({ title: '序号', width: 50, field: 'seq', align: 'center' })
           if (this.hasBatchBtn) {
@@ -2527,6 +2542,7 @@ export default {
     },
     // 重新渲染表格
     async refreshTableLayout(foreignTableId = [], isRefresh = false) {
+
       // eslint-disable-next-line no-unused-vars
       await this.initData((foreignTableId = []), (isRefresh = false))