Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/views/demo/form-design/components/VFormItem/index.vue

@@ -38,7 +38,7 @@
           图斑组件
         </Divider>
         <a-button
-          v-if="['Button'].includes(schema.component)"
+          v-else-if="['Button'].includes(schema.component)"
           :type="schema.componentProps.type"
           :shape="schema.componentProps.shape"
           :size="schema.componentProps.size"
@@ -78,6 +78,24 @@
             :defaultValue="schema.defaultValue">
           </a-select>
         </div>
+        <a-transfer
+          v-else-if="['Transfer'].includes(schema.component)"
+          :dataSource="schema.componentProps.dataSource"
+          :targetKeys="schema.componentProps.targetKeys"
+          :selectedKeys="schema.componentProps.selectedKeys"
+          :schema="schema"
+          :render="(item) => `${item.title} ${item.description}`"
+          :titles="schema.componentProps.titles"
+          :disabled="schema.componentProps.disabled"
+          :oneWay="schema.componentProps.oneWay"
+          :pagination="schema.componentProps.pagination"
+          :showSearch="schema.componentProps.showSearch"
+          :showSelectAll="schema.componentProps.showSelectAll"
+          @change="transferChange"
+          @search="transferSearch"
+          @selectChange="transferSelectChange"
+          @click="handleClick(schema)"
+        />
         <component
           v-else
           class="v-form-item-wrapper"
@@ -258,6 +276,17 @@
         setFormModel(props.schema.field!, value);
         emit('change', value);
       };
+
+      // 穿梭框-左右穿梭
+      const transferChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
+        props.schema.componentProps.targetKeys = nextTargetKeys;
+      };
+      // 穿梭框-查找
+      const transferSearch = (dir: string, value: string) => {};
+      // 穿梭框-选中
+      const transferSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
+        props.schema.componentProps.selectedKeys = sourceSelectedKeys.concat(targetSelectedKeys);
+      };
       return {
         ...toRefs(state),
         componentItem,
@@ -269,6 +298,9 @@
         colPropsComputed,
         selectUseOptions,
         showSelectDictionaryList,
+        transferChange,
+        transferSearch,
+        transferSelectChange,
       };
     },
   });

src/views/demo/form-design/core/formItemConfig.ts

@@ -365,8 +365,7 @@ export const commonComponents: IVFormComponent[] = [
     field: '',
     colProps: { span: 24 },
     componentProps: {
-      render: (item) => item.title,
-      titles: ['Source', 'Target'],
+      titles: ['', ''],
       dataSource: [
         {
           key: 'key-1',
@@ -387,6 +386,8 @@ export const commonComponents: IVFormComponent[] = [
           disabled: false,
         },
       ],
+      targetKeys: [],
+      selectedKeys: [],
     },
   },
 ];

src/views/demo/onlineform/formCall/InfoCallModal/index.vue

@@ -11,23 +11,21 @@
             'word-break': 'break-all'
           }">
           <template v-for="(item, index) in tab.children" :key="index">
-            <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
-              <a-image
-                v-if="item.infoShowValue"
-                width="100px"
-                height="100px"
-                :src="`${item.componentProps.server}/${item.infoShowValue}`"
-              ></a-image>
-              <div v-else style="opacity: 0.3; user-select: none;">{{"(暂无)"}}</div>
-            </a-descriptions-item>
-            <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
-              <img v-if="item.infoShowValue" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
-              <div v-else style="opacity: 0.3; user-select: none;">{{"(暂无)"}}</div>
-            </a-descriptions-item>
-            <a-descriptions-item v-else :label="item.label">
-              <div v-if="item.infoShowValue">{{ item.infoShowValue}}</div>
-              <div v-else style="opacity: 0.3; user-select: none;">{{"(暂无)"}}</div>
-            </a-descriptions-item>
+            <template v-if="item.infoShowValue">
+              <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
+                <a-image
+                  width="100px"
+                  height="100px"
+                  :src="`${item.componentProps.server}/${item.infoShowValue}`"
+                ></a-image>
+              </a-descriptions-item>
+              <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
+                <img style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
+              </a-descriptions-item>
+              <a-descriptions-item v-else :label="item.label">
+                <div>{{ item.infoShowValue}}</div>
+              </a-descriptions-item>
+            </template>
           </template>
         </a-descriptions>
       </a-tab-pane>
@@ -43,17 +41,19 @@
         'word-break': 'break-all'
       }">
       <template v-for="(item, index) in showList" :key="index">
-        <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
-          <a-image
-            width="100px"
-            height="100px"
-            :src="`${item.componentProps.server}/${item.infoShowValue}`"
-          ></a-image>
-        </a-descriptions-item>
-        <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
-          <img v-if="item.infoShowValue" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
-        </a-descriptions-item>
-        <a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item>
+        <template v-if="item.infoShowValue">
+          <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
+            <a-image
+              width="100px"
+              height="100px"
+              :src="`${item.componentProps.server}/${item.infoShowValue}`"
+            ></a-image>
+          </a-descriptions-item>
+          <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
+            <img style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
+          </a-descriptions-item>
+          <a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item>
+        </template>
       </template>
     </a-descriptions>
     <a-table v-if="subTableData" :columns="columns" :data-source="props.data.infoUseSubTableData" :pagination="false"></a-table>
@@ -113,7 +113,7 @@ onMounted(() => {
               ...childItem,
               infoShowValue: getOptionLabel(childItem)
             })
-          }else{
+          }else if(childItem.component !== 'InputGuid'){
             showList.value[tabIndex].children.push({
               ...childItem,
               infoShowValue: props.data.infoUseMainTableData[childItem.field]
@@ -155,7 +155,7 @@ onMounted(() => {
             key: child.field,
           })
         })
-      }else{
+      }else if(item.component !== 'InputGuid'){
         showList.value.push({
           ...item,
           infoShowValue: props.data.infoUseMainTableData[item.field]

src/views/demo/onlineform/formCall/index.vue

@@ -28,6 +28,11 @@
               }}</a-button>
             </div>
           </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="['树形选择', '级联选择', '复选框-组'].includes(column.title)">
+              {{ dataModification(column, record) }}
+            </template>
+          </template>
         </BasicTable>
 
         <!-- <ShowFormModal
@@ -68,19 +73,19 @@
     </div>
 
     <CallModal @success="submitsuccess" @register="registerModal" />
-    <a-modal 
-      width="80%" 
-      v-model:open="infoCallModalOpen" 
-      title="详情" 
-      :footer="null" 
-      :maskClosable="true" 
+    <a-modal
+      width="80%"
+      v-model:open="infoCallModalOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
       :destroyOnClose="true"
-      @cancel="closeModal">
+      @cancel="closeModal"
+    >
       <div class="content">
-        <InfoCallModal :data="infoCallModalData"/>
+        <InfoCallModal :data="infoCallModalData" />
       </div>
     </a-modal>
-    
 
     <a-modal
       width="100%"
@@ -120,14 +125,14 @@
   import { useModal } from '@/components/Modal';
   import { useMessage } from '@/hooks/web/useMessage';
   import CallModal from './CallModal.vue';
-  import InfoCallModal from './InfoCallModal/index.vue'
+  import InfoCallModal from './InfoCallModal/index.vue';
   import MapFormModal from './MapForm.vue';
   import CreateFlow from './CreateFlow.vue';
   // import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
   import ShowFormModal from './ShowFormModal/index.vue';
   import { v4 as uuidv4 } from 'uuid';
   import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts';
-  import { useFormCallStore } from '@/store/modules/formCall.ts'
+  import { useFormCallStore } from '@/store/modules/formCall.ts';
   const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
   const mapFormShow = ref<boolean>(false);
   const mapFormData = ref<Object>({});
@@ -143,8 +148,8 @@
   const mapSetData = ref({
     width: 100,
   });
-  const infoCallModalOpen = ref(false)
-  const infoCallModalData = ref({})
+  const infoCallModalOpen = ref(false);
+  const infoCallModalData = ref({});
   const selectedSubTableDataId = ref('');
   const formData = ref([]);
   const mapgemoList = ref([]);
@@ -591,8 +596,8 @@
           }
         } else {
           // openModal(true, toProps);
-          infoCallModalOpen.value = true
-          infoCallModalData.value = toProps
+          infoCallModalOpen.value = true;
+          infoCallModalData.value = toProps;
         }
         break;
       case 'Import':
@@ -745,13 +750,13 @@
       console.log('columnObj', columnObj);
       if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {
         // 为使用字典字段的下拉组件的options赋值
-        formObj.formInfo.tabList.forEach(childTab => {
-          childTab.schemas.forEach(async item => {
-            if(item.component === 'Select' && item.dataType === '2'){
-              item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode)
+        formObj.formInfo.tabList.forEach((childTab) => {
+          childTab.schemas.forEach(async (item) => {
+            if (item.component === 'Select' && item.dataType === '2') {
+              item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode);
             }
-          })
-        })
+          });
+        });
         // 将card嵌套起来
         formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
         const arr: any = [];
@@ -810,24 +815,31 @@
       }
       if (columnObj.table.querys) {
         columnObj.table.querys.forEach((item) => {
-          if (item.options) {
-            searchFormSchema.push({
-              field: item.key,
-              component: item.type || 'Input',
-              label: item.label,
-              colProps: { span: 6 },
-              componentProps: {
-                options: item.options,
-              },
-            });
-          } else {
-            searchFormSchema.push({
-              field: item.key,
-              component: item.type || 'Input',
-              label: item.label,
-              colProps: { span: 6 },
-            });
-          }
+          // if (item.options) {
+          //   searchFormSchema.push({
+          //     field: item.key,
+          //     component: item.type || 'Input',
+          //     label: item.label,
+          //     colProps: { span: 6 },
+          //     componentProps: {
+          //       options: item.options,
+          //     },
+          //   });
+          // } else {
+          //   searchFormSchema.push({
+          //     field: item.key,
+          //     component: item.type || 'Input',
+          //     label: item.label,
+          //     colProps: { span: 6 },
+          //   });
+          // }
+          searchFormSchema.push({
+            field: item.key,
+            component: item.type,
+            label: item.label,
+            colProps: ['Transfer'].includes(item.type) ? { span: 12 } : { span: 6 },
+            componentProps: item.componentProps || { options: item.options },
+          });
         });
       }
       callColumns.forEach((item) => {
@@ -990,7 +1002,92 @@
     mapFormShow.value = false;
   };
   const closeModal = () => {
-    infoCallModalOpen.value = false
+    infoCallModalOpen.value = false;
+  };
+
+  // 表单列表数据修饰
+  const dataModification = (column, record) => {
+    let res: any = '';
+    if (column.title == '树形选择') {
+      searchFormSchema?.forEach((item: any) => {
+        if (item.component && item.component == 'TreeSelect') {
+          res = getTreeSelectLabel(res, item.componentProps.treeData, record[column.dataIndex]);
+        }
+      });
+    } else if (column.title == '级联选择') {
+      searchFormSchema?.forEach((item: any) => {
+        if (item.component && item.component == 'Cascader') {
+          // 转成数组
+          let CascaderData = JSON.parse(record[column.dataIndex]?.replace(/\r\n/g, '') || '[]');
+          // 返回的结果
+          let CascaderRes = {
+            label: '',
+            children: item.componentProps.options,
+          };
+          CascaderData?.forEach((value, value_index) => {
+            if (value_index == 0) {
+              CascaderRes = getCascaderLabel(value, CascaderRes);
+              res = CascaderRes.label;
+            } else {
+              CascaderRes = getCascaderLabel(value, CascaderRes);
+              res = res + ' / ' + CascaderRes.label;
+            }
+          });
+        }
+      });
+    } else if (column.title == '复选框-组') {
+      searchFormSchema?.forEach((item: any) => {
+        if (item.component && item.component == 'CheckboxGroup') {
+          item.componentProps.options?.forEach((op) => {
+            // 转成数组
+            let CheckboxGroupData = JSON.parse(
+              record[column.dataIndex]?.replace(/\r\n/g, '') || '[]',
+            );
+            CheckboxGroupData?.forEach((CheckboxGroupData_item, index) => {
+              if (op.value == CheckboxGroupData_item) {
+                if (index == 0) {
+                  res = op.label;
+                } else {
+                  res = res + ' | ' + op.label;
+                }
+              }
+            });
+          });
+        }
+      });
+    } else {
+      // console.log(1012);
+      // console.log(column);
+      // console.log(record);
+      // console.log(searchFormSchema);
+      res = record[column.dataIndex];
+    }
+    return res;
+  };
+
+  // 树形选择-表单列表数据修饰
+  function getTreeSelectLabel(res, treeData, value) {
+    treeData?.forEach((element) => {
+      if (element.value == value) {
+        res = element.label;
+      }
+      if (element.children) {
+        res = getTreeSelectLabel(res, element.children, value);
+      }
+    });
+    return res;
+  }
+
+  // 级联选择-表单列表数据修饰
+  function getCascaderLabel(value, CascaderRes) {
+    let res: any = {};
+    CascaderRes.children.forEach((ch) => {
+      if (ch.value == value) {
+        res.label = ch.label;
+        res.children = ch.children;
+      }
+    });
+    return res;
   }
 </script>
 <style lang="less">
@@ -1033,7 +1130,9 @@
     background: #fff;
     z-index: 999;
   }
-  .content{
-  padding: 30px;
-}
+  .content {
+    padding: 30px;
+    height: 750px;
+    overflow: auto;
+  }
 </style>

src/views/demo/onlineform/formModule/modalDesign.vue

@@ -281,16 +281,28 @@
           !['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
       )
       .map((t) => {
-        if (t.componentProps.options) {
-          return {
-            key: t.field,
-            label: t.label,
-            type: t.component,
-            options: t.componentProps.options,
-          };
-        } else {
-          return { key: t.field, label: t.label, type: t.component };
-        }
+        // if (t.componentProps.options) {
+        //   return {
+        //     key: t.field,
+        //     label: t.label,
+        //     type: t.component,
+        //     options: t.componentProps.options,
+        //     componentProps: t.componentProps,
+        //   };
+        // } else {
+        //   return {
+        //     key: t.field,
+        //     label: t.label,
+        //     type: t.component,
+        //     componentProps: t.componentProps,
+        //   };
+        // }
+        return {
+          key: t.field,
+          label: t.label,
+          type: t.component,
+          componentProps: t.componentProps,
+        };
       });
 
     // 常用按钮-树