perf(views): 编写"组织管理"页面基本逻辑

src/views/organization-manage/OrganizationManage.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref, useTemplateRef } from 'vue';
 import dayjs from 'dayjs';
 
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 
 import EstablishOrganization from '../create-customer/EstablishOrganization.vue';
 
-import type { CreateCustomer } from '@/types';
+import type { FormInstance } from 'ant-design-vue';
+import type { CreateCustomer, FormRules, RegisterGatewayForm } from '@/types';
 
 const organizationOpen = ref<boolean>(false);
+const establishOrganizationRef = useTemplateRef('establishOrganization');
+const organizationRefs = ref<FormInstance>();
+
 const useForm = reactive<CreateCustomer>({
   orgName: '',
   logo: '',
@@ -60,6 +64,38 @@ const organizationColumns = [
     width: 152,
   },
 ];
+const rules = computed<FormRules<RegisterGatewayForm>>(() => {
+  return {
+    orgName: [
+      {
+        required: true,
+        message: '不能为空',
+        trigger: 'change',
+      },
+    ],
+    leaseTerm: [
+      {
+        required: true,
+        message: '不能为空',
+        trigger: 'change',
+      },
+    ],
+    stationsNumber: [
+      {
+        required: true,
+        message: '不能为空',
+        trigger: 'change',
+      },
+    ],
+    dataValidityPeriod: [
+      {
+        required: true,
+        message: '不能为空',
+        trigger: 'change',
+      },
+    ],
+  };
+});
 const addOrganization = () => {
   organizationOpen.value = true;
 };
@@ -77,8 +113,15 @@ const clickOrganizationChange = (id: number) => {
 const cancelOrganization = () => {
   organizationOpen.value = false;
 };
-const saveOrganization = () => {
-  organizationOpen.value = false;
+const saveOrganization = async () => {
+  try {
+    await Promise.all([organizationRefs.value?.validate() || Promise.resolve()]);
+    await establishOrganizationRef.value?.finish?.();
+    organizationOpen.value = false;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (err) {
+    /* empty */
+  }
 };
 </script>
 
@@ -127,14 +170,17 @@ const saveOrganization = () => {
       :mask-closable="false"
       :footer="null"
     >
-      <EstablishOrganization
-        v-if="organizationOpen"
-        ref="gatewayParameters"
-        :form="useForm"
-        :steps="[]"
-        :step-index="2"
-        :go-to-step="() => {}"
-      />
+      <AForm ref="organizationRefs" class="organization-form" :model="useForm" label-align="left" :rules="rules">
+        <EstablishOrganization
+          v-if="organizationOpen"
+          ref="establishOrganization"
+          :form="useForm"
+          :steps="[]"
+          :step-index="2"
+          :go-to-step="() => {}"
+        />
+      </AForm>
+
       <AFlex justify="flex-end" class="footer">
         <AButton type="primary" ghost @click="cancelOrganization">{{ $t('common.cancel') }}</AButton>
         <AButton type="primary" class="dev-left" @click="saveOrganization">保存</AButton>
@@ -144,8 +190,8 @@ const saveOrganization = () => {
 </template>
 
 <style lang="scss" scoped>
-.organization-modal .ant-modal-header {
-  margin-bottom: 24px;
+.footer {
+  margin-top: 24px;
 }
 
 .dev-left {