update: 设备功能调试, 精简模式新增字段必填验证

src/views/device/Instance/Detail/Function/components/Simple.vue

@@ -14,16 +14,21 @@
             >
                 <a-row :gutter="30">
                     <a-col :span="15">
+                        <a-form :ref="`${func.id}Ref`" :model="func">
                             <a-table
                                 :columns="columns"
                                 :data-source="func.table"
                                 :pagination="false"
                                 rowKey="id"
                             >
-                            <template #bodyCell="{ column, text, record }">
-                                <template v-if="column.dataIndex === 'type'">
+                                <template #bodyCell="{ column, record, index }">
+                                    <template
+                                        v-if="column.dataIndex === 'type'"
+                                    >
                                         <span>{{ record.type }}</span>
-                                    <a-tooltip v-if="record.type === 'object'">
+                                        <a-tooltip
+                                            v-if="record.type === 'object'"
+                                        >
                                             <template slot="title">
                                                 请按照json格式输入
                                             </template>
@@ -37,10 +42,22 @@
                                             />
                                         </a-tooltip>
                                     </template>
-                                <template v-if="column.dataIndex === 'value'">
+                                    <template
+                                        v-if="column.dataIndex === 'value'"
+                                    >
+                                        <a-form-item
+                                            :name="['table', index, 'value']"
+                                            :rules="{
+                                                required: true,
+                                                message: '',
+                                            }"
+                                            has-feedback
+                                        >
                                             <ValueItem
                                                 :ref="`valueItemRef${record.id}`"
-                                        v-model:modelValue="record.value"
+                                                v-model:modelValue="
+                                                    record.value
+                                                "
                                                 :itemType="record.type"
                                                 :options="
                                                     record.type === 'enum'
@@ -65,9 +82,11 @@
                                                         : undefined
                                                 "
                                             />
+                                        </a-form-item>
                                     </template>
                                 </template>
                             </a-table>
+                        </a-form>
                         <div class="editor-btn">
                             <a-space>
                                 <a-button
@@ -180,6 +199,9 @@ const newFunctions = computed(() => {
  * 执行
  */
 const handleExecute = async (func: any) => {
+    proxy?.$refs[`${func.id}Ref`][0]
+        .validate()
+        .then(async () => {
             const obj = {};
             func.table.forEach((item: any) => {
                 if (item.type === 'object') {
@@ -197,19 +219,26 @@ const handleExecute = async (func: any) => {
             message.success('操作成功');
             func.executeResult = result instanceof Array ? result[0] : result;
             proxy?.$forceUpdate();
+        })
+        .catch((err: any) => {
+            console.log('err: ', err);
+        });
 };
 /**
  * 清空
  */
 const handleClear = (func: any) => {
-    func.table.forEach((item: any) => {
-        item.value = undefined;
-        proxy.$refs[`valueItemRef${item.id}`][0].myValue = undefined;
-    });
+    proxy?.$refs[`${func.id}Ref`][0].resetFields();
 };
 </script>
 
 <style lang="less" scoped>
+:deep(.ant-table-cell .ant-form-item) {
+    margin-bottom: 0;
+}
+:deep(.ant-form-item-with-help .ant-form-item-explain) {
+    min-height: 0;
+}
 .wrapper {
     .tips {
         margin-bottom: 10px;