卡片模式优化批量操作删除

src/components/CardTemplate/index.vue

@@ -1,55 +1,127 @@
 <template>
-  <div class="flex-card" v-if="cardInfo.value == 1" :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 class="titleLeft" :style="titleStyle">
+  <div>
+    <div class="flex-card" v-if="cardInfo.value == 1" :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 class="titleLeft" :style="titleStyle">
+              <span v-if="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') }}
+                </div>
+                <span>
+                  {{ getModelName(cardInfo.title, dataInfo, 'title') }}
+                </span>
+              </el-tooltip>
+            </div>
+            <div class="titleRight" :style="subTitleStyle">
+              <span v-if="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') }}
+                </div>
+                <span>
+                  {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
+                </span>
+              </el-tooltip>
+            </div>
+          </div>
+          <div v-if="cardInfo.info.data.length > 0" :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="right">
+                    <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
+                      <div slot="content">
+                        {{ getModelName(item, dataInfo, 'info') }}
+                      </div>
+                      <span>
+                        {{ getModelName(item, dataInfo, 'info') }}
+                      </span>
+                    </el-tooltip>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <div class="footer" v-if="btnList.length > 0">
+              <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>
+              </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 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="" />
+          <div class="title" :style="titleStyle">
             <span v-if="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') }}
-              </div>
-              <span>
-                {{ getModelName(cardInfo.title, dataInfo, 'title') }}
-              </span>
-            </el-tooltip>
-          </div>
-          <div class="titleRight" :style="subTitleStyle">
-            <span v-if="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.title.model, data, 'title') }}
               </div>
               <span>
-                {{ getModelName(cardInfo.subTitle, dataInfo, 'subTitle') }}
+                {{ getModelName(cardInfo.title.model, data, 'title') }}
               </span>
             </el-tooltip>
           </div>
-        </div>
-        <div v-if="cardInfo.info.data.length > 0" :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="right">
-                  <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
-                    <div slot="content">
-                      {{ getModelName(item, dataInfo, 'info') }}
-                    </div>
-                    <span>
-                      {{ getModelName(item, dataInfo, 'info') }}
-                    </span>
-                  </el-tooltip>
+          <div v-if="cardInfo.info.data.length > 0" :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="right">
+                    <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
+                      <div slot="content">
+                        {{ getModelName(item.model, data, 'info') }}
+                      </div>
+                      <span>
+                        {{ getModelName(item.model, data, 'info') }}
+                      </span>
+                    </el-tooltip>
+                  </div>
                 </div>
-              </div>
-            </el-col>
-          </el-row>
-          <div class="footer" v-if="btnList.length > 0">
-            <div class="btns">
+              </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)"
@@ -62,94 +134,24 @@
                     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)"
+                    :disabled="config.webType == 3 && [1, 2, 3, 5].indexOf(data.flowState) > -1"
+                    @click="columnBtnsHandel(item.value, data, 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)">
+                  <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, dataInfo)">{{ item.label }}</el-button>
+                  <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-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="" />
-        <div class="title" :style="titleStyle">
-          <span v-if="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.model, data, 'title') }}
-            </div>
-            <span>
-              {{ getModelName(cardInfo.title.model, data, 'title') }}
-            </span>
-          </el-tooltip>
-        </div>
-        <div v-if="cardInfo.info.data.length > 0" :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="right">
-                  <el-tooltip v-if="item.model != ''" effect="dark" placement="right-start">
-                    <div slot="content">
-                      {{ getModelName(item.model, data, 'info') }}
-                    </div>
-                    <span>
-                      {{ getModelName(item.model, data, 'info') }}
-                    </span>
-                  </el-tooltip>
-                </div>
-              </div>
-            </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>
-              </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>
-      </el-card>
+        </el-card>
+      </div>
     </div>
   </div>
 </template>
@@ -363,13 +365,17 @@ export default {
         } else if (type == 'info') {
           let field = this.cardInfo.info.data.find((val) => val.model == model.model)?.field
           if (field != undefined) {
-            let result = model.apiData.find((val) => {
-              if (val[model.apiProps.value] == item[field]) {
-                return val
+            if (model.apiData) {
+              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]
               }
-            })?.[model.apiProps.label]
-            if (result != undefined) {
-              return result
             } else {
               return item[field]
             }

src/components/ColumnDesign/index.vue

@@ -605,20 +605,20 @@ const defaultColumnData = {
       model: '',
       color: '#000',
       size: 14,
-      class: ''
+      class: '{"padding":"10px"}',
     },
     subTitle: {
       text: '副标题',
       model: '',
       color: '#000',
       size: 14,
-      class: ''
+      class: '{"padding":"10px"}',
     },
     info: {
       color: '#000',
       size: 14,
       col: 12,
-      class: '',
+      class: '{"padding":"10px"}',
       data: [
         {
           model: '',
@@ -756,7 +756,6 @@ export default {
       dataInterfaceSelector: [],
       showDatasetFilter: false,
       setSeachFlag: false,
-
       showHelpTip1: false,
       visualLink: {
         isDiglog: false,
@@ -807,20 +806,20 @@ export default {
       cardShow: false,
       cardList: [
         {
-          url: require('@/assets/images/generator/columnType3.png'),
+          url: require('@/assets/images/generator/card4.png'),
           value: 1,
           name: '普通卡片'
         },
-        {
-          url: require('@/assets/images/generator/columnType3.png'),
-          value: 2,
-          name: '图文卡片'
-        },
-        {
-          url: require('@/assets/images/generator/columnType3.png'),
-          value: 3,
-          name: '新闻卡片'
-        }
+        // {
+        //   url: require('@/assets/images/generator/columnType3.png'),
+        //   value: 2,
+        //   name: '图文卡片'
+        // },
+        // {
+        //   url: require('@/assets/images/generator/columnType3.png'),
+        //   value: 3,
+        //   name: '新闻卡片'
+        // }
       ],
       cardImgUrl: '',
       previewShow: false,

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

@@ -266,7 +266,15 @@
           <template v-slot:toolbar_buttons>
             <div class="JNPF-common-head" v-if="columnData.type != 5">
               <div v-for="(item, i) in columnData.btnsList" :key="i">
-                <el-button style="margin-right: 5px" size="mini" v-if="item.value !== 'journal'" :type="i === 0 ? 'primary' : 'text'" :icon="item.icon" @click="headBtnsHandel(item.value, item.importStatus)" :key="i">
+                <el-button
+                  style="margin-right: 5px"
+                  size="mini"
+                  v-if="item.value !== 'journal'"
+                  :type="i === 0 ? 'primary' : 'text'"
+                  :icon="item.icon"
+                  @click="headBtnsHandel(item.value, item.importStatus)"
+                  :key="i"
+                >
                   {{ item.label }}
                 </el-button>
                 <el-dropdown v-else @command="handleCommand">
@@ -360,7 +368,7 @@
           </div>
         </div>
         <CardTemplate
-          v-if="list.length > 0 && loading"
+          v-if="cardData.length > 0 && loading == false"
           :columnList="columnData.columnList"
           :cardInfo="columnData.cardTypeStyle"
           :btnList="columnData.columnBtnsList"
@@ -1729,12 +1737,19 @@ export default {
         type: 'warning'
       })
         .then(() => {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+            background: 'rgba(255, 255, 255, 0.7)'
+          })
           batchDelete(this.modelId, this.multipleSelection, dataJson, JSON.stringify(this.columnDict)).then((res) => {
             this.$message({
               type: 'success',
               message: res.data.msg,
               duration: 1500,
               onClose: () => {
+                loading.close()
                 this.refreshTableLayout()
               }
             })
@@ -2347,7 +2362,6 @@ export default {
         if (this.columnData.type == 6) {
           this.cardData = res.data.data.pageData.records
         }
-
         this.loading = false
         // console.log(this.columnList)
       })
@@ -2542,8 +2556,14 @@ export default {
     },
     // 重新渲染表格
     async refreshTableLayout(foreignTableId = [], isRefresh = false) {
-
       // eslint-disable-next-line no-unused-vars
+      if ((this.columnData.type = 6)) {
+        this.cardData = []
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      }
       await this.initData((foreignTableId = []), (isRefresh = false))
 
       // getBrowserData(this.config.dbLinkId, this.parmes).then((res) => {