新增卡片模板 图文卡片(上下布局+左右布局)

src/components/CardTemplate/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div class="flex-card" v-if="cardInfo.value == 1" :style="cardBoxStyle">
+    <!-- 普通卡片布局 -->
+    <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">
@@ -82,26 +83,34 @@
                 <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
               </div>
             </div>
+            <div v-else>
+              <el-button size="mini" type="text">操作1 </el-button>
+              <el-button size="mini" type="text">操作2 </el-button>
+              <el-button size="mini" type="text">操作3 </el-button>
+            </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.model, data, 'title') }}
-              </div>
-              <span>
-                {{ getModelName(cardInfo.title.model, data, 'title') }}
+    <!-- 图文卡片布局(上下) -->
+    <div v-else-if="cardInfo.value == 2" class="flex-card" :style="cardBoxStyle">
+      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
+        <el-card :style="cardStyle">
+          <el-image class="img" :style="{ height: cardInfo.imgHeight + 'px' }" :src="imgVal(dataInfo)" alt="" />
+          <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 + ':' }}
               </span>
-            </el-tooltip>
+              <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>
           <div v-if="cardInfo.info.data.length > 0" :style="cardInfo.info.class != '' && cardInfo.info.class ? JSON.parse(cardInfo.info.class) : {}">
             <el-row :gutter="10">
@@ -111,10 +120,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>
@@ -122,32 +131,118 @@
               </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>
+              <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>
+                  </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>
+              </div>
+              <div class="check">
+                <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
+              </div>
+            </div>
+            <div v-else>
+              <el-button size="mini" type="text">操作1 </el-button>
+              <el-button size="mini" type="text">操作2 </el-button>
+              <el-button size="mini" type="text">操作3 </el-button>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <!-- 图文卡片布局(左右) -->
+    <div v-else-if="cardInfo.value == 3" class="flex-card" :style="cardBoxStyle">
+      <div v-for="(dataInfo, dataIndex) in cardList" :key="dataIndex" class="box-card">
+        <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>
+            <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">
+                  <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>
+              </div>
+              <div class="item-right">
+                <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>
+                    </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>
+                    </div>
+                    <div v-if="item.value == 'detail'">
+                      <el-button size="mini" type="warning" @click="columnBtnsHandel(item.value, dataInfo)">
+                        {{ item.label }}
+                      </el-button>
+                    </div>
+                    <div v-if="item.value == 'rowJournal'">
+                      <el-button size="mini" type="success" @click="columnBtnsHandel(item.value, dataInfo)">{{ item.label }}</el-button>
+                    </div>
+                  </div>
+                  <div class="check">
+                    <el-checkbox v-model="dataInfo.checked" @change="checkChange"></el-checkbox>
+                  </div>
+                </div>
+                <div class="item-footer" v-else>
+                  <div class="item-btns">
+                    <el-button size="mini" type="primary">编辑 </el-button>
+                  </div>
+                  <div class="item-btns">
+                    <el-button size="mini" type="danger">删除 </el-button>
+                  </div>
+                  <div class="item-btns">
+                    <el-button size="mini" type="warning">详情 </el-button>
+                  </div>
+                  <div class="check">
+                    <el-checkbox disabled></el-checkbox>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </el-card>
@@ -158,6 +253,7 @@
 
 <script>
 import { dataapiDetail, dataapiUrl } from '@/api/systemData/dataInterface'
+import { comUrl } from '@/utils/define'
 export default {
   props: {
     cardInfo: {
@@ -241,6 +337,7 @@ export default {
     }
   },
   async created() {
+
     // console.log(this.columnList)
     await this.columnList.forEach(async (item) => {
       if (item.propsUrl && item.propsUrl.length) {
@@ -307,13 +404,15 @@ export default {
       let records = this.cardList.filter((item) => item.checked == true)
       this.$parent.handleSelectionChange({ records: records })
     },
-    imgVal(val) {
+    imgVal(data) {
       if (this.modelList.length > 0) {
         return 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
       } else {
         if (this.cardInfo.imgModel && this.cardInfo.imgModel != '') {
-          if (val[this.cardInfo.imgModel] != '' && val[this.cardInfo.imgModel] != undefined && val[this.cardInfo.imgModel] != null) {
-            return val[this.cardInfo.imgModel].split(',')[0]
+          let imgFiledId = this.columnList.find((val) => val.propId == this.cardInfo.imgModel)?.field
+          if (imgFiledId && data[imgFiledId] != '' && data[imgFiledId].length) {
+            let url = data[imgFiledId].split(',')[0]
+            return comUrl + '/api/file/getFileInputStreamById/' + url
           }
         }
       }
@@ -457,12 +556,13 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding-top: 10px;
-  border-top: 1px solid #ccc;
+  // border-top: 1px solid #ebeef5;
   .btns {
     width: 90%;
   }
   .check {
     flex: 1;
+    text-align: right;
   }
 }
 
@@ -472,4 +572,36 @@ export default {
 :deep(.el-card__body) {
   padding: 0 !important;
 }
+
+.flex-left {
+  width: 40%;
+}
+
+.flex-right {
+  flex: 1;
+  display: flex;
+  .item-left {
+    width: 70%;
+  }
+  .item-right {
+    flex: 1;
+    .item-footer {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 0 10px;
+      position: relative;
+
+      .item-btns {
+        margin-top: 10px;
+        text-align: right;
+      }
+      .check {
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+      }
+    }
+  }
+}
 </style>

src/components/ColumnDesign/index.vue

@@ -277,15 +277,15 @@
                       <el-form-item label="卡片类型">
                         <el-button type="primary" size="mini" plain @click="cardShow = true">选择卡片模板</el-button>
                         <div style="margin-top: 10px" v-if="columnData.cardTypeStyle.value != '' && cardImgUrl != ''">
-                          <el-image style="width: 150px; height: 100px; background: #ebeef5" :src="cardImgUrl" alt="" />
+                          <el-image style="width: 150px; height: 100px; background: #ebeef5" :src="cardImgUrl" :preview-src-list="[cardImgUrl]" alt="" />
                         </div>
                       </el-form-item>
-                      <el-form-item v-show="columnData.cardTypeStyle.value == 2" label="图片绑定字段">
-                        <el-select v-model="columnData.cardTypeStyle.imgModel" placeholder="请选择图片绑定字段">
+                      <el-form-item v-show="columnData.cardTypeStyle.value == 2 || columnData.cardTypeStyle.value == 3" label="图片绑定字段">
+                        <el-select v-model="columnData.cardTypeStyle.imgModel" clearable filterable placeholder="请选择图片绑定字段">
                           <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
                         </el-select>
                       </el-form-item>
-                      <el-form-item v-show="columnData.cardTypeStyle.value == 2" label="图片高度">
+                      <el-form-item v-show="columnData.cardTypeStyle.value == 2 || columnData.cardTypeStyle.value == 3" label="图片高度">
                         <el-input-number v-model="columnData.cardTypeStyle.imgHeight" :min="100" :max="1000"></el-input-number>
                       </el-form-item>
                       <el-form-item label="一行展示数">
@@ -294,7 +294,7 @@
                       <el-form-item label="卡片间隔">
                         <el-input-number v-model="columnData.cardTypeStyle.gap" :min="1" :max="10"></el-input-number>
                       </el-form-item>
-                      <el-form-item v-show="columnData.cardTypeStyle.value == 1" label="卡片表头样式">
+                      <el-form-item label="卡片表头样式" v-show="columnData.cardTypeStyle.value !== 3">
                         <el-button type="text" @click="editClass('title')" icon="el-icon-edit">编辑样式</el-button>
                       </el-form-item>
                       <el-form-item label="背景色">
@@ -311,36 +311,41 @@
                       </el-form-item>
                     </el-tab-pane>
                     <el-tab-pane label="数据设置" name="2">
-                      <el-divider>卡片主标题设置</el-divider>
-                      <el-form-item label="绑定值">
-                        <el-select v-model="columnData.cardTypeStyle.title.model" placeholder="请选择绑定字段">
-                          <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
-                        </el-select>
-                      </el-form-item>
-                      <el-form-item label="前缀">
-                        <el-input v-model="columnData.cardTypeStyle.title.text" placeholder="请输入value前缀"></el-input>
-                      </el-form-item>
-                      <el-form-item label="文字颜色">
-                        <el-color-picker v-model="columnData.cardTypeStyle.title.color"></el-color-picker>
-                      </el-form-item>
-                      <el-form-item label="文字大小">
-                        <el-input-number v-model="columnData.cardTypeStyle.title.size" :min="0" :max="99"></el-input-number>
-                      </el-form-item>
-                      <el-divider>卡片副标题设置</el-divider>
-                      <el-form-item label="绑定值">
-                        <el-select v-model="columnData.cardTypeStyle.subTitle.model" placeholder="请选择绑定字段">
-                          <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
-                        </el-select>
-                      </el-form-item>
-                      <el-form-item label="前缀">
-                        <el-input v-model="columnData.cardTypeStyle.subTitle.text" placeholder="请输入value前缀"></el-input>
-                      </el-form-item>
-                      <el-form-item label="文字颜色">
-                        <el-color-picker v-model="columnData.cardTypeStyle.subTitle.color"></el-color-picker>
-                      </el-form-item>
-                      <el-form-item label="文字大小">
-                        <el-input-number v-model="columnData.cardTypeStyle.subTitle.size" :min="0" :max="99"></el-input-number>
-                      </el-form-item>
+                      <div v-show="columnData.cardTypeStyle.value !== 3">
+                        <el-divider>卡片主标题设置</el-divider>
+                        <el-form-item label="绑定值">
+                          <el-select v-model="columnData.cardTypeStyle.title.model" clearable filterable placeholder="请选择绑定字段">
+                            <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
+                          </el-select>
+                        </el-form-item>
+                        <el-form-item label="前缀">
+                          <el-input v-model="columnData.cardTypeStyle.title.text" placeholder="请输入value前缀"></el-input>
+                        </el-form-item>
+                        <el-form-item label="文字颜色">
+                          <el-color-picker v-model="columnData.cardTypeStyle.title.color"></el-color-picker>
+                        </el-form-item>
+                        <el-form-item label="文字大小">
+                          <el-input-number v-model="columnData.cardTypeStyle.title.size" :min="0" :max="99"></el-input-number>
+                        </el-form-item>
+                        <div v-show="columnData.cardTypeStyle.value != 2">
+                          <el-divider>卡片副标题设置</el-divider>
+                          <el-form-item label="绑定值">
+                            <el-select v-model="columnData.cardTypeStyle.subTitle.model" clearable filterable placeholder="请选择绑定字段">
+                              <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
+                            </el-select>
+                          </el-form-item>
+                          <el-form-item label="前缀">
+                            <el-input v-model="columnData.cardTypeStyle.subTitle.text" placeholder="请输入value前缀"></el-input>
+                          </el-form-item>
+                          <el-form-item label="文字颜色">
+                            <el-color-picker v-model="columnData.cardTypeStyle.subTitle.color"></el-color-picker>
+                          </el-form-item>
+                          <el-form-item label="文字大小">
+                            <el-input-number v-model="columnData.cardTypeStyle.subTitle.size" :min="0" :max="99"></el-input-number>
+                          </el-form-item>
+                        </div>
+                      </div>
+
                       <el-divider>卡片详情 <el-button type="text" icon="el-icon-plus" @click="addCardInfo">添加</el-button> </el-divider>
                       <el-form-item label="卡片内容样式">
                         <el-button type="text" @click="editClass('content')" icon="el-icon-edit">编辑样式</el-button>
@@ -357,7 +362,7 @@
                       <div v-for="(item, index) in columnData.cardTypeStyle.info.data" :key="index">
                         <div>详情{{ index + 1 }} <el-button type="text" style="color: #f56c6c" size="small" icon="el-icon-delete" @click="deleteInfo(index)"></el-button></div>
                         <el-form-item label="绑定值">
-                          <el-select v-model="item.model" placeholder="请选择绑定字段">
+                          <el-select v-model="item.model" clearable filterable placeholder="请选择绑定字段">
                             <el-option :label="item.__config__.label" :value="item.__vModel__" v-for="(item, i) in list" :key="i"></el-option>
                           </el-select>
                         </el-form-item>
@@ -366,7 +371,7 @@
                         </el-form-item>
                       </div>
                     </el-tab-pane>
-                    <el-tab-pane label="条件设置" name="3"> 条件设置 </el-tab-pane>
+                    <!-- <el-tab-pane label="条件设置" name="3" > 条件设置 </el-tab-pane> -->
                   </el-tabs>
 
                   <el-form-item label="">
@@ -598,21 +603,21 @@ const defaultColumnData = {
     gap: 10,
     bgColor: '#fff', // 背景颜色
     shadowColor: 'rgba(0,0,0,1)', // 阴影颜色
-    borderColor: '#e6ebf5',
+    borderColor: '#ebeef5',
     shadowPx: 10,
     title: {
       text: '标题',
       model: '',
       color: '#000',
       size: 14,
-      class: '{"padding":"10px"}',
+      class: '{"padding":"10px"}'
     },
     subTitle: {
       text: '副标题',
       model: '',
       color: '#000',
       size: 14,
-      class: '{"padding":"10px"}',
+      class: '{"padding":"10px"}'
     },
     info: {
       color: '#000',
@@ -806,15 +811,20 @@ export default {
       cardShow: false,
       cardList: [
         {
-          url: require('@/assets/images/generator/card4.png'),
+          url: require('@/assets/images/generator/cardInfo.jpg'),
           value: 1,
           name: '普通卡片'
         },
-        // {
-        //   url: require('@/assets/images/generator/columnType3.png'),
-        //   value: 2,
-        //   name: '图文卡片'
-        // },
+        {
+          url: require('@/assets/images/generator/cardInfo1.jpg'),
+          value: 2,
+          name: '图文卡片'
+        },
+        {
+          url: require('@/assets/images/generator/cardInfo2.jpg'),
+          value: 3,
+          name: '图文卡片(左右布局)'
+        }
         // {
         //   url: require('@/assets/images/generator/columnType3.png'),
         //   value: 3,
@@ -834,7 +844,8 @@ export default {
       },
       styleShow: false,
       classJson: {},
-      classType: ''
+      classType: '',
+      previewImgShow: false
     }
   },
   filters: {

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

@@ -213,7 +213,7 @@
           <!--            <p v-else-if=" scope.row.completion == 100">已完成</p>-->
           <!--            <el-progress :percentage="scope.row.completion" v-else></el-progress>-->
           <!--          </template>-->
-          <template v-if="columnData.type != 5 && columnData.type != 6" #operate="scope">
+          <template  #operate="scope">
             <template v-for="(item, i) in columnData.columnBtnsList">
               <template v-if="item.value == 'edit'">
                 <el-button size="mini" type="text" :key="i" :disabled="config.webType == 3 && [1, 2, 5].indexOf(scope.row.flowState) > -1" @click="columnBtnsHandel(item.value, scope.row)"