update:报告图片排版

src/components/common/report/reportEdit/img.vue

@@ -7,11 +7,13 @@
       @edit="diaShow = true"
       @del="removeFun"
     />
-    <div v-if="mode === 'edit'" class="pic">
-      <div class="title-item">{{ titleKey || '请输入图片key' }}</div>
-      <el-icon :size="100"><Picture /></el-icon>
-      <div class="title-item">{{ paramsData.title }}</div>
-    </div>
+    <template v-if="mode === 'edit'">
+      <div v-for="(item, index) in Array(paramsData.colNum)" :key="index" class="pic">
+        <div class="title-item">{{ titleKey || '请输入图片key' }}</div>
+        <el-icon :size="100"><Picture /></el-icon>
+        <div class="title-item">{{ paramsData.title }}</div>
+      </div>
+    </template>
     <div
       v-else
       ref="PasteContentRef"
@@ -46,18 +48,26 @@
     </div>
     <Dialog v-model="diaShow" diaTitle="图片设置" :width="400" @close="closeFun">
       <div class="content">
-        <div class="option-item">
-          <div class="label">图片key</div>
-          <el-input v-model="titleKey" placeholder="请输入" clearable />
-        </div>
-        <div class="option-item">
-          <div class="label">默认名称</div>
-          <el-input v-model="paramsData.title" placeholder="请输入" clearable />
-        </div>
-        <div class="option-item">
-          <div class="label">输入提示</div>
-          <el-input v-model="paramsData.placeholder" placeholder="请输入" clearable />
-        </div>
+        <el-form label-width="auto">
+          <el-form-item label="图片key">
+            <el-input v-model="titleKey" placeholder="请输入" clearable />
+          </el-form-item>
+          <el-form-item label="默认名称">
+            <el-input v-model="paramsData.title" placeholder="请输入" clearable />
+          </el-form-item>
+          <el-form-item label="输入提示">
+            <el-input v-model="paramsData.placeholder" placeholder="请输入" clearable />
+          </el-form-item>
+          <el-form-item label="展示列数">
+            <el-input-number
+              v-model="paramsData.colNum"
+              :min="1"
+              :max="4"
+              :step="1"
+              step-strictly
+            />
+          </el-form-item>
+        </el-form>
       </div>
       <template #footer>
         <div>
@@ -100,6 +110,9 @@ const isFocus = ref(false);
 const PasteContentRef = ref();
 const contenteditable = ref(false);
 const paramsData = ref(cloneDeep(props.params));
+if (!paramsData.value.colNum) {
+  paramsData.value.colNum = 1;
+}
 
 watch(
   () => titleKey.value,
@@ -295,16 +308,4 @@ const closeFun = () => {
     }
   }
 }
-
-.content {
-  .option-item {
-    display: flex;
-    align-items: center;
-    width: 300px;
-    margin-bottom: 10px;
-    .label {
-      width: 80px;
-    }
-  }
-}
 </style>

src/components/common/report/reportEdit/index.vue

@@ -97,6 +97,7 @@
                     v-model:keyValue="unit.key"
                     v-model:value="unit.value"
                     v-model:head="unit.head"
+                    v-model:params="unit.params"
                     :mode="modeType"
                     :disabled="preview"
                     @del="delFun(paragraphIndex, sectionIndex, unitIndex)"
@@ -354,7 +355,7 @@ const getFormatDataFun = () => {
         value: section.value,
         params: section.params,
       });
-      section.children.forEach((unit: any) => {
+      section.children.forEach((unit: any, unitIndex: number) => {
         if (unit.type === 'form') {
           unit.children.forEach((item: any) => {
             build.push({
@@ -368,9 +369,20 @@ const getFormatDataFun = () => {
           const unitData: any = {
             type: unit.type,
             key: unit.key,
-            value: unit.value,
-            params: unit.params,
+            value: unit.value || [],
+            params: unit.params || {},
           };
+          if (unit.type === 'img') {
+            unitData.value.forEach((u: any, uIndex: number) => {
+              let picName = '';
+              if (u.title) {
+                picName = `${u.title.replace(/\s/g, '')}_${unitIndex + 1}_${uIndex + 1}.png`;
+              } else {
+                picName = `图片_${new Date().getTime()}_${unitIndex + 1}_${uIndex + 1}.png`;
+              }
+              u.picName = picName;
+            });
+          }
           if (unit.type === 'table') {
             unitData.head = unit.head.map((i: any) => i.title);
           }

src/components/common/report/reportEdit/table.vue

@@ -30,10 +30,17 @@
     </div>
     <Dialog v-model="diaShow" diaTitle="表格设置" :width="500" @close="closeFun">
       <div class="content">
-        <div class="option-item">
-          <div class="label">表格key</div>
-          <el-input v-model="titleKey" placeholder="请输入" clearable />
-        </div>
+        <el-form label-width="auto">
+          <el-form-item label="表格key">
+            <el-input v-model="titleKey" placeholder="请输入" clearable />
+          </el-form-item>
+          <el-form-item label="表格类型">
+            <el-select v-model="paramsData.tableType">
+              <el-option label="指标" value="performance" />
+              <el-option label="普通" value="" />
+            </el-select>
+          </el-form-item>
+        </el-form>
         <div class="table">
           <el-table :data="headData">
             <el-table-column prop="title" label="表头名称">
@@ -71,11 +78,18 @@ import Dialog from '@/components/common/dialog/index.vue';
 import Toper from './toper.vue';
 import { cloneDeep } from 'lodash-es';
 
-const emit = defineEmits(['update:keyValue', 'update:value', 'update:head', 'del']);
+const emit = defineEmits([
+  'update:keyValue',
+  'update:value',
+  'update:params',
+  'update:head',
+  'del',
+]);
 
 interface Props {
   keyValue: any;
   value: any;
+  params: any;
   mode: string;
   head?: any;
   disabled?: boolean;
@@ -84,6 +98,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   keyValue: '',
   value: [],
+  params: {},
   mode: '',
   head: [],
   disabled: false,
@@ -93,6 +108,7 @@ const diaShow = ref(false);
 const titleKey = ref(props.keyValue);
 const tableData = ref<any>([]);
 const headData = ref<any>(cloneDeep(props.head));
+const paramsData = ref(cloneDeep(props.params));
 
 watch(
   () => titleKey.value,
@@ -102,6 +118,16 @@ watch(
   { deep: true }
 );
 
+watch(
+  () => paramsData.value,
+  (val: any) => {
+    emit('update:params', val);
+  },
+  {
+    deep: true,
+  }
+);
+
 watch(
   () => props.head,
   (val: any) => {
@@ -182,15 +208,4 @@ const closeFun = () => {
   justify-content: center;
   cursor: pointer;
 }
-.content {
-  .option-item {
-    display: flex;
-    align-items: center;
-    width: 300px;
-    margin-bottom: 10px;
-    .label {
-      width: 80px;
-    }
-  }
-}
 </style>