增加了分享相机的表单验证

src/views/cameras/overview/components/ShareCameraDetail.vue

@@ -2,6 +2,7 @@
   <div>
     <div style="margin-top: 28px">
       <el-form
+        ref="ruleFormRef"
         class="ip-form"
         :inline="true"
         :model="shareData"
@@ -95,11 +96,11 @@
   import { BasicColumn, BasicTable, TableActionIcons } from '@/components/Table';
   import { CameraShareItem, CameraShowItem } from '../type';
   import deleteIcon from '@/assets/images/table/table-delete.png';
-  import { rules, authorityTypeSelect, timeTypeSelect, getColumns } from '../constant';
+  import { authorityTypeSelect, timeTypeSelect, getColumns } from '../constant';
   import useCameraShare from '../stores/useCameraShare';
   import { getVerify } from '@/api/camera/camera-share';
   import dayjs from 'dayjs';
-  import { ElMessage } from 'element-plus';
+  import { ElMessage, FormInstance, FormRules } from 'element-plus';
 
   const useShare = useCameraShare();
   const { cameraShareList, queryCameraId, conditionSearch, handleDel, handleAdd, handleEdit } =
@@ -107,6 +108,14 @@
 
   const props = defineProps<{ formData?: CameraShowItem | null }>();
 
+  const rules = reactive<FormRules>({
+    tenantCode: [{ required: true, message: '请输入企业账号', trigger: 'blur' }],
+    permission: [{ required: true, message: '', trigger: 'change' }],
+    tenantName: [{ required: true, message: '请验证企业账号', trigger: 'change' }],
+    time: [{ required: true, message: '', trigger: 'change' }],
+    shareList: [{ required: true, message: '', trigger: 'blur' }],
+  });
+
   // onMounted(() => {});
   onMounted(() => {
     //获取数据
@@ -115,6 +124,8 @@
     conditionSearch();
   });
 
+  const ruleFormRef = ref<FormInstance>();
+
   const shareData = ref<CameraShareItem>({
     tenantCode: undefined,
     toTenantId: undefined,
@@ -195,31 +206,39 @@
   };
 
   const handleConfirm = () => {
-    if (shareData.value.time === 'Indefinite') {
-      shareData.value.endTime = dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss');
-    } else {
-      shareData.value.endTime = dayjs()
-        .add(shareData.value.days!, 'day')
-        .format('YYYY-MM-DD HH:mm:ss');
-    }
+    if (!ruleFormRef.value) return;
+    // ruleFormRef.value.validate((valid) => {
+    //   if (!valid) {
+    //     return;
+    //   };
 
-    console.log('endd', shareData.value.endTime);
+    ruleFormRef.value.validate((valid) => {
+      if (!valid) {
+        return;
+      }
+      if (shareData.value.time === 'Indefinite') {
+        shareData.value.endTime = dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss');
+      } else {
+        shareData.value.endTime = dayjs()
+          .add(shareData.value.days!, 'day')
+          .format('YYYY-MM-DD HH:mm:ss');
+      }
 
-    //接口
-    console.log('shareData', shareData.value);
-    const currentDate = new Date();
-    console.log('currentDate', currentDate);
-    const addShareItem = {
-      cameraId: props.formData?.id,
-      toTenantId: shareData.value.toTenantId,
-      permission: shareData.value.permission,
-      endTime: shareData.value.endTime,
-      isAdd: false,
-      remark: shareData.value.remark,
-    };
-    queryCameraId.value = props.formData?.id;
-    handleAdd(addShareItem); //数据未调整
-    resetData();
+      //接口
+      const currentDate = new Date();
+      console.log('currentDate', currentDate);
+      const addShareItem = {
+        cameraId: props.formData?.id,
+        toTenantId: shareData.value.toTenantId,
+        permission: shareData.value.permission,
+        endTime: shareData.value.endTime,
+        isAdd: false,
+        remark: shareData.value.remark,
+      };
+      queryCameraId.value = props.formData?.id;
+      handleAdd(addShareItem); //数据未调整
+      resetData();
+    });
   };
 </script>