fix: dialog和table的组件优化

src/components/common/FTDialog/index.vue

@@ -14,9 +14,9 @@ const props = defineProps({
     type: String,
     default: '50%',
   },
-  okLoading: {
+  okHandle: {
     type: Boolean,
-    default: false,
+    default: () => {},
   },
 })
 const emits = defineEmits(['update:visible', 'ok', 'cancel'])
@@ -25,9 +25,6 @@ const cancel = () => {
   show.value = false
   emits('cancel')
 }
-const ok = () => {
-  emits('ok')
-}
 
 const show = ref(false)
 
@@ -66,7 +63,7 @@ watch(
         <ft-button :click-handle="cancel">
           取消
         </ft-button>
-        <ft-button type="primary" :loading="okLoading" :click-handle="ok">
+        <ft-button type="primary" :click-handle="okHandle">
           确认
         </ft-button>
       </div>

src/components/common/FTTable/index.vue

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<TableProp>(), {
   columns: () => [],
   mustInit: true,
   hasHeader: true,
+  getDataFn: () => Promise.resolve([]),
 })
 const emits = defineEmits([])
 enum ColumnType {
@@ -79,49 +80,47 @@ defineExpose({
 </script>
 
 <template>
-  <el-main>
-    <div v-if="hasHeader" class="header">
-      <div v-for="btn in btnList" :key="btn.serverUrl">
-        <el-button :icon="btn.icon" :type="btn.type" @click="methodParent(btn.serverUrl)">
-          {{ btn.name }}
-        </el-button>
-      </div>
-      <div class="search">
-        <el-input>
-          <template #suffix>
-            <el-icon class="el-input__icon">
-              <search />
-            </el-icon>
-          </template>
-        </el-input>
-      </div>
+  <div v-if="hasHeader" class="header">
+    <div v-for="btn in btnList" :key="btn.serverUrl">
+      <el-button :icon="btn.icon" :type="btn.type" @click="methodParent(btn.serverUrl)">
+        {{ btn.name }}
+      </el-button>
     </div>
-    <el-table
-      v-loading="state.loading"
-      :="$attrs"
-      :data="state.tableData"
-      style="width: 100%"
-      height="calc(100% - 100px)"
-      :highlight-current-row="true"
-      class="container-table"
-      header-row-class-name="header-row-class"
-    >
-      <template v-for="(column, index) in columns" :key="column.key">
-        <el-table-column
-          show-overflow-tooltip
-          :prop="column.key"
-          :label="column.title"
-          :width="column.width"
-          :type="column.type"
-          :fixed="column.fixed"
-        >
-          <template v-if="column.render" #default="scope">
-            <Expand :column="column" :row="scope.row" :render="column.render" :index="index" />
-          </template>
-        </el-table-column>
-      </template>
-    </el-table>
-  </el-main>
+    <div class="search">
+      <el-input>
+        <template #suffix>
+          <el-icon class="el-input__icon">
+            <search />
+          </el-icon>
+        </template>
+      </el-input>
+    </div>
+  </div>
+  <el-table
+    v-loading="state.loading"
+    :="$attrs"
+    :data="state.tableData"
+    style="width: 100%"
+    height="100%"
+    :highlight-current-row="true"
+    class="container-table"
+    header-row-class-name="header-row-class"
+  >
+    <template v-for="(column, index) in columns" :key="column.key">
+      <el-table-column
+        show-overflow-tooltip
+        :prop="column.key"
+        :label="column.title"
+        :width="column.width"
+        :type="column.type"
+        :fixed="column.fixed"
+      >
+        <template v-if="column.render" #default="scope">
+          <Expand :column="column" :row="scope.row" :render="column.render" :index="index" />
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
 </template>
 
 <style lang="scss" scoped>
@@ -129,17 +128,17 @@ defineExpose({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 100px;
+  height: 40px;
   .search {
     width: 200px;
   }
 }
 :deep(.header-row-class) {
   th {
-    background: #f7f8fa;
-    font-weight: 900;
+    background-color: rgba(0,0,0,0.02 ) !important;
+    //font-weight: 500;
     //border-bottom: none;
-    color: #000;
+    color: rgba(0, 0, 0, 0.85)
   }
 }
 </style>

src/components/home/SelectCraft/index.vue

@@ -51,8 +51,8 @@ const getOres = async () => {
 </script>
 
 <template>
-  <FtDialog visible title="选择工艺" width="40%" @ok="okHandle" @cancel="cancel">
-    <el-form ref="formRef" label-width="120" :model="form" :rules="rules">
+  <FtDialog visible title="选择工艺" width="40%" :ok-handle="okHandle" @cancel="cancel">
+    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
       <el-form-item label="加热区">
         <el-tag v-for="item in homeStore.heatAreaList.filter(item => item.selected)" :key="item.value" class="mask-tag">
           {{ item.label }}

src/components/home/StartExperiment/index.vue

@@ -36,8 +36,8 @@ const cancel = () => {
 </script>
 
 <template>
-  <FtDialog visible title="开始新实验" width="40%" @ok="okHandle" @cancel="cancel">
-    <el-form ref="formRef" label-width="120" :model="form" :rules="rules">
+  <FtDialog visible title="开始新实验" width="30%" :ok-handle="okHandle" @cancel="cancel">
+    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
       <el-form-item label="实验名称" prop="name">
         <el-input v-model="form.name" placeholder="" />
       </el-form-item>