fix/model-driven-bugs

Author: betterdancing

packages/common/js/import-map.json

@@ -9,7 +9,7 @@
     "@vueuse/shared": "${VITE_CDN_DOMAIN}/@vueuse/shared${versionDelimiter}9.6.0${fileDelimiter}/index.mjs",
     "axios": "${VITE_CDN_DOMAIN}/axios${versionDelimiter}1.0.0${fileDelimiter}/dist/esm/axios.js",
     "@opentiny/tiny-engine-i18n-host": "${VITE_CDN_DOMAIN}/@opentiny/tiny-engine-i18n-host${versionDelimiter}^2${fileDelimiter}/dist/lowcode-design-i18n-host.es.js",
-    "@opentiny/tiny-engine-builtin-component": "${VITE_CDN_DOMAIN}/@opentiny/tiny-engine-builtin-component${versionDelimiter}^2.9.0${fileDelimiter}/dist/index.mjs",
+    "@opentiny/tiny-engine-builtin-component": "${VITE_CDN_DOMAIN}/@opentiny/tiny-engine-builtin-component${versionDelimiter}^2.10.0-alpha.2${fileDelimiter}/dist/index.mjs",
     "vue-demi": "${VITE_CDN_DOMAIN}/vue-demi${versionDelimiter}0.13.11${fileDelimiter}/lib/index.mjs",
     "pinia": "${VITE_CDN_DOMAIN}/pinia${versionDelimiter}2.0.22${fileDelimiter}/dist/pinia.esm-browser.js",
     "@opentiny/vue": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-pc.mjs",

packages/configurator/src/model-api-configurator/ModelApiConfigurator.vue

@@ -59,6 +59,7 @@
       <tiny-icon-edit @click="openPopover(item, index)"></tiny-icon-edit>
     </div>
   </div>
+  <div v-else class="model-api-empty">当前还未选择模型</div>
 </template>
 <script setup>
 import { ref, reactive, computed, defineProps, defineEmits, watch, onMounted } from 'vue'
@@ -84,10 +85,6 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
-  buttonText: {
-    type: String,
-    default: '选择模型方法'
-  },
   // 协议类型
   renderType: {
     type: String,
@@ -316,4 +313,8 @@ onMounted(() => {
     }
   }
 }
+
+.model-api-empty {
+  color: var(--te-common-text-secondary);
+}
 </style>

packages/configurator/src/model-common/ModelSelect.vue

@@ -32,7 +32,7 @@
   </div>
 </template>
 <script>
-import { ref, reactive, computed, watch } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { Search, Grid, GridColumn, Pager } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 import { getModelList } from '../model-common/http'
@@ -51,9 +51,6 @@ export default {
       type: Number,
       default: 10
     },
-    data: {
-      type: Object
-    },
     isShow: {
       type: Boolean,
       default: false
@@ -75,25 +72,15 @@ export default {
     // 搜索
     const searchWords = ref('')
 
-    const selectedModel = computed(() => props.data)
-
     const selectModel = async (data) => {
       currentSelectedModel.value = await handleSelectedModelParameters(data.row)
       emit('modelSelect', currentSelectedModel.value)
     }
 
     const getModels = () => {
-      if (selectedModel.value) {
-        searchWords.value = selectedModel.value.name
-      }
       getModelList(pagerState.currentPage, { nameCn: searchWords.value }).then(async (res) => {
         modelList.value = res.records
         pagerState.total = res.total
-        if (selectedModel.value) {
-          const radioRow = res.records.find((item) => item.id === selectedModel.value.id)
-          modelListRef.value.setRadioRow(radioRow)
-          await selectModel({ row: radioRow })
-        }
       })
     }
 

packages/configurator/src/model-configurator/ModelConfigurator.vue

@@ -19,9 +19,15 @@
         </div>
         <div class="model-wrap">
           <div class="model-groups">
-            <model-select @model-select="getModel" :data="modelDetail" :isShow="isShow"></model-select>
+            <model-select @model-select="getModel" :isShow="isShow"></model-select>
           </div>
           <div class="model-parameters">
+            <div v-if="selectedModel?.name" class="bind-model-info">
+              <span class="bind-info-title"
+                >当前选中的模型:
+                <span class="bind-info-name">{{ selectedModel?.name }} | {{ selectedModel?.nameEn }}</span>
+              </span>
+            </div>
             <tiny-grid :data="selectedModel?.parameters || []" min-height="296" max-height="560">
               <tiny-grid-column field="prop" title="字段名" show-overflow> </tiny-grid-column>
               <tiny-grid-column field="label" title="标签名" show-overflow></tiny-grid-column>
@@ -38,7 +44,7 @@
               >已绑定:
               <span class="bind-info-name">{{ modelDetail?.name }} | {{ modelDetail?.nameEn }}</span>
             </span>
-            <svg-icon name="delete"></svg-icon>
+            <svg-icon name="delete" @click="unbindModel"></svg-icon>
           </div>
         </template>
       </tiny-popover>
@@ -186,6 +192,7 @@ import { iconUpWard, iconDownWard, iconClose, iconEdit } from '@opentiny/vue-ico
 import { defineEmits, defineProps, ref, reactive, nextTick, computed, watch, onMounted } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
 import { ButtonGroup } from '@opentiny/tiny-engine-common'
+import { useCanvas, useModal } from '@opentiny/tiny-engine-meta-register'
 import MetaListItem from './MetaListItem.vue'
 import ModelSelect from '../model-common/ModelSelect.vue'
 import MetaChildItem from '../operator-group-configurator/MetaChildItem.vue'
@@ -222,7 +229,7 @@ const isShow = ref(false)
 const searchUnused = ref('')
 const searchValue = ref('')
 
-const selectedModel = ref()
+const selectedModel = ref(null)
 const originModelData = ref()
 
 const getModel = (data) => {
@@ -283,10 +290,12 @@ const state = reactive({
 })
 
 const openPopover = () => {
+  selectedModel.value = modelDetail.value
   isShow.value = true
 }
 
 const closePopover = () => {
+  selectedModel.value = null
   isShow.value = false
 }
 
@@ -304,6 +313,26 @@ const setModel = async () => {
   closePopover()
 }
 
+// 解除模型绑定
+const unbindModel = () => {
+  useModal().confirm({
+    title: '提示',
+    message: '移除绑定将清除所有绑定的模型信息，是否继续？',
+    exec: () => {
+      const currentSchema = useCanvas().getCurrentSchema()
+      const { clearSelect } = useCanvas().canvasApi.value
+      delete currentSchema.props.serviceModel
+      delete currentSchema.props.modelApis
+      useCanvas().operateNode({
+        type: 'updateAttributes',
+        id: currentSchema.id,
+        value: { props: currentSchema.props }
+      })
+      clearSelect()
+    }
+  })
+}
+
 const editItem = (data) => {
   state.currentIndex = data.index
 }
@@ -401,21 +430,6 @@ onMounted(() => {
   }
   .model-name-warp {
     border: 1px solid var(--ti-lowcode-component-input-border-color);
-
-    .bind-model-info {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 8px;
-      line-height: 28px;
-
-      .bind-info-title {
-        color: var(--te-common-text-secondary);
-        .bind-info-name {
-          font-weight: 600;
-        }
-      }
-    }
   }
   .meta-model-title {
     color: #808080;
@@ -496,6 +510,21 @@ onMounted(() => {
     }
   }
 }
+
+.bind-model-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  line-height: 28px;
+
+  .bind-info-title {
+    color: var(--te-common-text-secondary);
+    .bind-info-name {
+      font-weight: 600;
+    }
+  }
+}
 .model-title {
   display: flex;
   justify-content: space-between;
@@ -531,6 +560,10 @@ onMounted(() => {
   .model-parameters {
     width: 280px;
     padding: 12px;
+
+    .tiny-grid {
+      margin-top: 8px;
+    }
   }
 }
 </style>