fix/model-driven-bugs

Author: betterdancing

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

@@ -6,7 +6,7 @@
     :visible-arrow="false"
     :popper-class="['option-popper', 'fixed-left']"
     :offset="isSecond ? 652 : 0"
-    width="640"
+    width="600"
   >
     <div class="model-function-wrap">
       <div class="model-title">
@@ -54,7 +54,7 @@
     </div>
   </tiny-popover>
   <div class="model-api-wrap" v-if="modelValue.length">
-    <div class="model-api-item" v-for="(item, index) in apiList" :key="item.nameEn">
+    <div class="model-api-item" v-for="(item, index) in modelValue" :key="item.nameEn">
       <tiny-checkbox v-model="item.checked" @change="setModelApis">{{ item.name }}</tiny-checkbox>
       <tiny-icon-edit @click="openPopover(item, index)"></tiny-icon-edit>
     </div>

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

@@ -1,9 +1,9 @@
 <template>
   <tiny-grid :data="data" :tree-config="{ children: 'children', indent: 6 }">
     <tiny-grid-column field="prop" title="字段" width="100" tree-node></tiny-grid-column>
-    <tiny-grid-column field="type" title="类型" width="60"></tiny-grid-column>
+    <tiny-grid-column field="type" title="类型" width="40"></tiny-grid-column>
     <tiny-grid-column field="description" show-overflow title="描述" width="80"></tiny-grid-column>
-    <tiny-grid-column field="required" title="是否必填" width="66">
+    <tiny-grid-column field="required" title="是否必填" width="60">
       <template #default="data">
         <span>{{ data.row?.required ? '是' : '否' }}</span>
       </template>

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

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

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

@@ -19,7 +19,7 @@
         </div>
         <div class="model-wrap">
           <div class="model-groups">
-            <model-select @model-select="getModel" :isShow="isShow"></model-select>
+            <model-select @model-select="getModel" :data="modelDetail" :isShow="isShow"></model-select>
           </div>
           <div class="model-parameters">
             <tiny-grid :data="selectedModel?.parameters || []" min-height="296" max-height="560">
@@ -31,11 +31,15 @@
         </div>
         <template #reference>
           <tiny-button @click="openPopover">
-            <span v-if="modelDetail?.name">
-              {{ modelDetail?.name }}
-            </span>
-            <span v-else>选择模型</span>
+            <span>绑定模型数据</span>
           </tiny-button>
+          <div v-if="modelDetail?.name" class="bind-model-info">
+            <span class="bind-info-title"
+              >已绑定:
+              <span class="bind-info-name">{{ modelDetail?.name }} | {{ modelDetail?.nameEn }}</span>
+            </span>
+            <svg-icon name="delete"></svg-icon>
+          </div>
         </template>
       </tiny-popover>
     </div>
@@ -397,6 +401,21 @@ 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;

packages/plugins/model-manager/src/Main.vue

@@ -33,7 +33,7 @@
             >
               <div class="item-label">
                 <div class="item-name">
-                  <svg-icon name="plugin-icon-data" class="plugin-icon-data"> </svg-icon>
+                  <svg-icon name="plugin-icon-modelmanager" class="plugin-icon-modelmanager"> </svg-icon>
                   {{ model.nameCn }}
                 </div>
                 <div class="item-handler">
@@ -47,9 +47,6 @@
                   </svg-button>
                 </div>
               </div>
-              <!-- <div class="model-actions">
-                <svg-icon name="delete" @click.stop="handleDeleteModel(model)"></svg-icon>
-              </div> -->
             </div>
           </template>
           <search-empty :isShow="!models.length" />
@@ -220,18 +217,18 @@ onMounted(async () => {
     font-size: var(--te-base-font-size-base);
 
     .model-item {
-      box-shadow: var(--te-datasource-tabs-border-color) 0, -1px;
+      box-shadow: var(--te-model-manage-input-border-color) 0, -1px;
       height: 24px;
       line-height: 24px;
       align-items: center;
       display: grid;
       padding: 0 12px;
       position: relative;
-      color: var(--te-datasource-list-main-text-color);
+      color: var(--te-model-manage-text-color);
       cursor: pointer;
       &:hover,
       &.active {
-        background: var(--te-datasource-list-text-color-hover);
+        background: var(--te-model-manage-tree-node-bg-color-hover);
         .item-handler {
           display: inline-block;
         }
@@ -242,13 +239,13 @@ onMounted(async () => {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        color: var(--te-datasource-list-item-text-color);
+        color: var(--te-model-manage-draggable-text-color);
         .item-name {
           display: flex;
           align-items: center;
         }
-        .plugin-icon-data {
-          color: var(--te-datasource-list-item-icon-color);
+        .plugin-icon-modelmanager {
+          color: var(--te-model-manage-draggable-icon-color);
           margin-right: 8px;
         }
       }

packages/plugins/model-manager/src/components/ModelSetting.vue

@@ -210,5 +210,18 @@ export default {
 <style lang="less" scoped>
 .modelmanager-plugin-setting {
   width: fit-content;
+
+  :deep(.tiny-collapse .tiny-collapse-item) {
+    .tiny-collapse-item__header {
+      padding: 0;
+    }
+
+    .tiny-collapse-item__wrap .tiny-collapse-item__content {
+      padding: 0;
+      .section {
+        padding: 0;
+      }
+    }
+  }
 }
 </style>