Merge branch 'feat/model' of https://github.com/betterdancing/tiny-engine into feat/model

Author: betterdancing

packages/builtinComponent/src/components/BaseForm.vue

@@ -10,7 +10,7 @@
                 {{ item.label }}
               </div>
             </template>
-            <div v-if="item?.isModel && item.defaultValue !== null">
+            <div v-if="item.isModel && item.defaultValue !== null">
               <tiny-form label-width="100" label-position="left" :model="modelData[item.prop]">
                 <tiny-row>
                   <tiny-col
@@ -49,7 +49,7 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, defineEmits, defineExpose, computed, watch, reactive } from 'vue'
+import { ref, defineProps, defineExpose, computed, watch, reactive } from 'vue'
 import {
   Form as TinyForm,
   FormItem as TinyFormItem,
@@ -91,9 +91,7 @@ const props = defineProps({
   }
 })
 
-const modelData = ref({})
-
-const emit = defineEmits(['update:modelValue'])
+const modelData = ref()
 
 const formRef = ref(null)
 
@@ -205,19 +203,19 @@ watch(
   (value) => {
     if (value) {
       modelData.value = props.modelValue
-    } else {
-      initFormData()
     }
   },
   { deep: true, immediate: true }
 )
 
 watch(
-  () => modelData.value,
-  (value) => {
-    emit('update:modelValue', value)
+  () => props.serviceModel,
+  () => {
+    if (!modelData.value) {
+      initFormData()
+    }
   },
-  { deep: true }
+  { immediate: true }
 )
 
 const exposedData = {

packages/builtinComponent/src/components/BasePage.vue

@@ -157,7 +157,7 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, defineEmits, defineExpose, computed, reactive, watch, useAttrs, onMounted } from 'vue'
+import { ref, computed, reactive, watch, useAttrs, onMounted } from 'vue'
 import {
   Form as TinyForm,
   FormItem as TinyFormItem,
@@ -220,19 +220,19 @@ const props = defineProps({
     type: Object
   }
 })
-
 const emit = defineEmits(['update:searchFormData', 'update:tableData', 'update:editFormData'])
 
 const formRef = ref(null)
 
 const colNumber = computed(() => 12 / props.layout)
+
 const insideColNumber = computed(() => (props.layout === 1 ? 6 : 12))
 
 const pageModel = computed(() => props.serviceModel)
 
-const formData = ref({})
+const formData = ref()
 
-const addFormData = ref({})
+const addFormData = ref()
 
 const boxVisibility = ref(false)
 
@@ -431,7 +431,7 @@ const initEditFormData = () => {
       ]
     })
   )
-  emit('update:editFormData', formData.value)
+  emit('update:editFormData', addFormData.value)
 }
 
 const resetSearchForm = () => {
@@ -478,8 +478,6 @@ watch(
   (value) => {
     if (value) {
       formData.value = props.searchFormData
-    } else {
-      initSearchFormData()
     }
   },
   { deep: true, immediate: true }
@@ -490,13 +488,24 @@ watch(
   (value) => {
     if (value) {
       addFormData.value = props.editFormData
-    } else {
-      initEditFormData()
     }
   },
   { deep: true, immediate: true }
 )
 
+watch(
+  () => props.serviceModel,
+  () => {
+    if (!formData.value) {
+      initSearchFormData()
+    }
+    if (!addFormData.value) {
+      initEditFormData()
+    }
+  },
+  { immediate: true }
+)
+
 onMounted(() => {
   queryApi()
 })

packages/builtinComponent/src/components/BaseTable.vue

@@ -4,9 +4,14 @@
     <template v-else>
       <tiny-grid ref="gridRef" :data="tableData" v-bind="gridState">
         <tiny-grid-column v-if="gridState.selectedEnabled" type="selection" width="60"></tiny-grid-column>
-        <template v-for="item in gridColumns" :key="item.prop">
-          <tiny-grid-column :field="item.prop" :title="item.label" :editor="item.editor"></tiny-grid-column>
-        </template>
+        <tiny-grid-column
+          v-for="item in gridColumns"
+          :key="item.prop"
+          :field="item.prop"
+          :title="item.label"
+          :editor="item.editor"
+        ></tiny-grid-column>
+
         <tiny-grid-column v-if="gridState.rowOperationEnabled" field="operation" title="操作">
           <template #default="data">
             <tiny-button
@@ -15,7 +20,7 @@
               type="text"
               @click="operate?.handler(data.row, data.rowIndex, exposedData)"
             >
-              <div v-if="operate?.itemVisible">
+              <div v-if="operate.itemVisible">
                 <tiny-popover
                   v-if="gridState.useIconOperation && operate.icon"
                   width="auto"
@@ -43,7 +48,7 @@
   </div>
 </template>
 <script setup>
-import { defineProps, defineEmits, defineExpose, computed, ref, reactive, watch, useAttrs } from 'vue'
+import { defineProps, defineExpose, computed, ref, reactive, useAttrs } from 'vue'
 import {
   Grid as TinyGrid,
   GridColumn as TinyGridColumn,
@@ -93,8 +98,6 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const attrs = useAttrs()
 
 const gridRef = ref()
@@ -147,7 +150,8 @@ const rowOperationList = computed(() => {
   return props.rowOperations?.value.map((operate) => {
     return {
       ...operate,
-      icon: operate.icon ? tinyVueIcon?.[operate.icon]() : ''
+      icon: operate.icon ? tinyVueIcon?.[operate.icon]() : '',
+      itemVisible: 'itemVisible' in operate ? operate.itemVisible : true
     }
   })
 })
@@ -237,14 +241,6 @@ const deleteApi = (evidence) => {
     })
 }
 
-watch(
-  () => tableData.value,
-  (value) => {
-    emit('update:modelValue', value)
-  },
-  { deep: true }
-)
-
 const exposedData = {
   tableData: () => tableData.value,
   gridRef,