Merge branch 'main' into hc_zhufu

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

@@ -0,0 +1,16 @@
+<template>
+  <Comp 
+    :style="props.data.component === 'Select'? 'width:120px': ''"
+    :options="props.data.componentProps.options" 
+    :placeholder="props.data.placeholder" 
+    v-model:value="props.record[props.data.dataIndex]"/>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref  } from "vue"
+import { componentMap } from '@/components/Form/src/componentMap';
+const props = defineProps(['data','record'])
+const Comp = componentMap.get(props.data.component)
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -6,6 +6,21 @@
     </div>
     <div class="form-content">
       <BasicForm ref="myDataBaseFormRef" @register="registerForm" v-if="formModalVisible" />
+      <a-table class="sub-table" :columns="subTableColumns" :data-source="subTableList" :pagination="false">
+        <template #headerCell="{ column, record }">
+          <template v-if="column.key === 'setting'">
+            <PlusOutlined class="icon-button" @click="insertListItem()"/>
+          </template>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'setting'">
+            <DeleteOutlined class="icon-button" @click="delListItem(column,record)"/>
+          </template>
+          <template v-else>
+            <FormItem :data="column" :record="record"/>
+          </template>
+        </template>
+      </a-table>
     </div>
     <div class="footer-button" v-if="!isDetail">
       <a-button style="margin-right: 20px;" @click="closeModal">取消</a-button>
@@ -14,20 +29,23 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
-import { defineEmits, defineProps, ref, onMounted, unref, reactive, toRaw  } from "vue"
+import { defineEmits, defineProps, ref, onMounted, unref, reactive, toRaw, h  } from "vue"
-import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import { ArrowLeftOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import { BasicForm, useForm } from '@/components/Form';
 import { FormSchema } from '@/components/Table';
 import { create, saveDraft } from '@/api/sys/WFProcess';
 import { saveFormsData } from '@/api/formrender/index';
 import { useMessage } from '@/hooks/web/useMessage';
 import { useUserStore } from '@/store/modules/user';
-
+import  FormItem from './FormItem/index.vue'
+import { v4 as uuidv4 } from 'uuid';
 const { createMessage } = useMessage();
 const myDataBaseFormRef = ref()
-const props = defineProps(['open','showFormModalData','mapgemoList'])
+const props = defineProps(['open','showFormModalData','mapgemoList','formData'])
 const emits = defineEmits(['closeShowFormModal'])
+const subTableList = ref(toRaw(props.formData))
+const subTableId = ref(null)
 const isUpdate = ref(false)
 const isDetail = ref(false)
 const flowCode = ref('')
@@ -42,6 +60,13 @@ const formData = reactive({
   userId: userInfo.id,
   title: '',
 });
+const subTableColumns = ref([
+  {
+    dataIndex: 'setting',
+    key: 'setting',
+  },
+])
+const subTableData = ref([])
 
 const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
   labelWidth: 100,
@@ -76,6 +101,24 @@ onMounted(() => {
       }
     }
     formColumns.push(item);
+    console.log(formColumns,'formColumns')
+    if(item.type === 'subTable'){
+      subTableId.value = item.field
+      let tableData = []
+      item.columns.forEach((itemColumn) => {
+        itemColumn.children.forEach(itemColumnChild => {
+          tableData.push(itemColumnChild)
+          subTableColumns.value.push({
+            key: itemColumnChild.field,
+            title: itemColumnChild.label,
+            dataIndex: itemColumnChild.field,
+            ...itemColumnChild,
+          })
+        })
+      })
+      subTableData.value = tableData
+      console.log(tableData,'tableData')
+    }
   });
 
   if (!unref(isUpdate) && !unref(isDetail)) {
@@ -128,6 +171,16 @@ async function ModalSureClick() {
     let mapGeomList = toRaw(props.mapgemoList).map(item => {
       return item.value
     })
+    let saveSubTableList = []
+    subTableList.value.forEach(item => {
+      let emptyObj = {}
+      for(const key in item){
+        if(key === 'key') continue;
+        emptyObj[key] = item[key]
+      }
+      saveSubTableList.push(emptyObj)
+    })
+    query[subTableId.value] = JSON.stringify(saveSubTableList)
     query.MapGeom = mapGeomList.join(";")
     let params: any = {
       schemeId: primaryQuery.value.id,
@@ -184,9 +237,26 @@ async function handleCreateFlow(processId) {
     return createMessage.error('保存草稿失败');
   }
 }
+const insertListItem = () => {
+  let keyList = subTableData.value.map(item => {
+    return item.field
+  })
+  let emptyItem = {key:uuidv4()}
+  keyList.forEach(item => {
+    emptyItem[item] = ""
+  })
+  subTableList.value.push(emptyItem)
+}
+const delListItem = (column,record) => {
+  console.log(column,record)
+  subTableList.value = subTableList.value.filter(item => item.key != record.key)
+}
 </script>
 
 <style lang="scss" scoped>
+.icon-button{
+  cursor:pointer;
+}
 .show-form-modal{
   position: absolute;
   top: 0;
@@ -214,7 +284,7 @@ async function handleCreateFlow(processId) {
     height: calc(100% - 97px);
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    // justify-content: space-between;
     overflow: auto;
     margin-bottom: 15px;
   }
@@ -224,3 +294,24 @@ async function handleCreateFlow(processId) {
   }
 }
 </style>
+<style lang="scss">
+.show-form-modal{
+  .form-content{
+    .sub-table{
+      .ant-table-tbody{
+        .ant-table-cell{
+          .anticon-delete{
+            opacity: 0;
+          }
+        }
+        .ant-table-cell-row-hover{
+          .anticon-delete{
+            opacity: 1;
+            color: red;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -27,7 +27,7 @@
           </template>
         </BasicTable>
         <ShowFormModal v-if="openShowFormModal" :showFormModalData="showFormModalData" :mapgemoList="mapgemoList" 
-          @closeShowFormModal="closeShowFormModal" @success="submitsuccess"/>
+          :formData="formData" @closeShowFormModal="closeShowFormModal" @success="submitsuccess"/>
       </div>
       <div v-if="haveMap" class="form-call-showMap" :style="`width:${mapSetData.width}%;height:calc(100vh - 78px) `">
         <MapboxMap 
@@ -73,6 +73,7 @@
   import CreateFlow from './CreateFlow.vue';
   // import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
   import ShowFormModal from './ShowFormModal/index.vue';
+  import { v4 as uuidv4 } from 'uuid';
 
 const MapboxMap = defineAsyncComponent(() =>
   import('@/components/MapboxMaps/MapComponent.vue')
@@ -89,6 +90,7 @@ const MapboxMap = defineAsyncComponent(() =>
   const mapSetData = ref({
     width:100
   })
+  const formData = ref([])
   const mapgemoList = ref([])
   const MapboxComponent = ref()
   const openShowFormModal = ref(false)
@@ -377,6 +379,7 @@ const MapboxMap = defineAsyncComponent(() =>
           }
         });
         if (flowCode.value == '') {
+          formData.value = []
           let toProps = {
             isDetail: false,
             isUpdate: false,
@@ -577,9 +580,11 @@ const MapboxMap = defineAsyncComponent(() =>
   const closeShowFormModal = () => {
     openShowFormModal.value = false
     MapboxComponent.value.handlerCancleDraw()
+    formData.value = []
   }
   const handRowClick = (record) => {
-    if(!haveMap.value) return
+    // todo 设置需要请求时请求
+    // if(!haveMap.value) return
     let keyValue = null
     Object.keys(record).forEach(key => {
       if(key.indexOf('guid') !== -1){
@@ -592,9 +597,19 @@ const MapboxMap = defineAsyncComponent(() =>
       keyValue,
     }
     getFormData(params).then(res => {
+      console.log(res,'res')
+      let subTableData = res.f_children.map(item => {
+        return {
+          ...item,
+          key: uuidv4(),
+        }
+      })
+      formData.value = [...subTableData]
+      return 
+      //todo 数据结构变化，稍后修改
       mapgemoList.value = []
       res.forEach(item => {
-        if(item.columnName === "mapgeom"){
+        if(item.columnName === "mapgeom" && item.value){
           mapgemoList.value.push(item)
         }
       })