perf(views): 编写"组织管理"页面查询功能

src/views/organization-manage/OrganizationManage.vue

@@ -1,18 +1,27 @@
 <script setup lang="ts">
-import { computed, reactive, ref, useTemplateRef } from 'vue';
+import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue';
 import dayjs from 'dayjs';
 
+import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
+import { useRequest } from '@/hooks/request';
+import { t } from '@/i18n';
+import { getOrganizationAllList } from '@/api';
 
 import EstablishOrganization from '../create-customer/EstablishOrganization.vue';
 
 import type { FormInstance } from 'ant-design-vue';
-import type { CreateCustomer, FormRules, RegisterGatewayForm } from '@/types';
+import type { CreateCustomer, FormRules, OrganizationListItem, RegisterGatewayForm } from '@/types';
 
 const organizationOpen = ref<boolean>(false);
 const establishOrganizationRef = useTemplateRef('establishOrganization');
 const organizationRefs = ref<FormInstance>();
-
+const organizationList = ref<OrganizationListItem[]>([]);
+const orgName = ref<string>('');
+const organizationId = ref<number>();
+const organizationTitle = ref<boolean>(true);
+const { handleRequest } = useRequest();
+const modalComponentRef = useTemplateRef('modalComponent');
 const useForm = reactive<CreateCustomer>({
   orgName: '',
   logo: '',
@@ -24,37 +33,36 @@ const useForm = reactive<CreateCustomer>({
   stationsNumber: 0,
   dataValidityPeriod: '',
 });
-const organizationList = ref([
-  {
-    deviceName: '客户B',
-    deviceName1: '方案商A',
-    deviceName2: '-',
-    deviceName3: '2024-12-31 23:12:00',
-  },
-]);
+
 const organizationColumns = [
   {
     title: '组织名称',
-    dataIndex: 'deviceName',
-    key: 'deviceName',
+    dataIndex: 'orgName',
+    key: 'orgName',
     ellipsis: true,
   },
   {
     title: '上级组织',
-    dataIndex: 'deviceName1',
-    key: 'deviceName1',
+    dataIndex: 'parentOrgName',
+    key: 'parentOrgName',
     ellipsis: true,
   },
   {
     title: '组织描述',
-    dataIndex: 'deviceName2',
-    key: 'deviceName2',
+    dataIndex: 'remark',
+    key: 'remark',
+    ellipsis: true,
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'startTenancy',
+    key: 'startTenancy',
     ellipsis: true,
   },
   {
-    title: '创建时间',
-    dataIndex: 'deviceName3',
-    key: 'deviceName3',
+    title: '到期日期',
+    dataIndex: 'endTenancy',
+    key: 'endTenancy',
     ellipsis: true,
   },
   {
@@ -98,17 +106,28 @@ const rules = computed<FormRules<RegisterGatewayForm>>(() => {
 });
 const addOrganization = () => {
   organizationOpen.value = true;
+  organizationTitle.value = true;
+};
+const addQuery = () => {
+  getOrganizationAll();
+};
+const addReset = () => {
+  orgName.value = '';
+  getOrganizationAll();
 };
-const addQuery = () => {};
-const addReset = () => {};
 const organizationEditor = (id: number) => {
+  organizationOpen.value = true;
+  organizationTitle.value = false;
   console.log(id);
 };
 const organizationDelete = (id: number) => {
+  organizationId.value = id;
+  modalComponentRef.value?.showView();
   console.log(id);
 };
 const clickOrganizationChange = (id: number) => {
   console.log(id);
+  getOrganizationAll();
 };
 const cancelOrganization = () => {
   organizationOpen.value = false;
@@ -118,11 +137,29 @@ const saveOrganization = async () => {
     await Promise.all([organizationRefs.value?.validate() || Promise.resolve()]);
     await establishOrganizationRef.value?.finish?.();
     organizationOpen.value = false;
+    getOrganizationAll();
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (err) {
     /* empty */
   }
 };
+const getOrganizationAll = () => {
+  handleRequest(async () => {
+    organizationList.value = await getOrganizationAllList(orgName.value);
+  });
+};
+
+const confirm = () => {
+  handleRequest(async () => {
+    if (organizationId.value) {
+      modalComponentRef.value?.hideView();
+    }
+  });
+};
+
+onMounted(() => {
+  getOrganizationAll();
+});
 </script>
 
 <template>
@@ -145,27 +182,29 @@ const saveOrganization = async () => {
         <AFlex justify="space-between" class="div-bottom">
           <AFlex align="center">
             <div class="organization-content-text">搜索</div>
-            <AInput class="input-width" placeholder="请输入报警内容、设备" />
+            <AInput v-model:value="orgName" class="input-width" placeholder="请输入组织名称" />
           </AFlex>
           <div>
             <AButton type="primary" @click="addQuery"> 查询 </AButton>
             <AButton class="button-left" type="primary" ghost @click="addReset"> 重置 </AButton>
           </div>
         </AFlex>
-        <ATable :columns="organizationColumns" :data-source="organizationList" :pagination="false">
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'action'">
-              <SvgIcon @click="organizationEditor(record.id)" class="icon-style" name="edit-o" />
-              <SvgIcon @click="organizationDelete(record.id)" class="icon-style" name="delete" />
+        <div class="organization-table">
+          <ATable :columns="organizationColumns" :data-source="organizationList" :pagination="false">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <SvgIcon @click="organizationEditor(record.id)" class="icon-style" name="edit-o" />
+                <SvgIcon @click="organizationDelete(record.id)" class="icon-style" name="delete" />
+              </template>
             </template>
-          </template>
-        </ATable>
+          </ATable>
+        </div>
       </div>
     </AFlex>
     <AModal
       class="organization-modal"
       v-model:open="organizationOpen"
-      title="添加"
+      :title="organizationTitle ? '添加' : '编辑'"
       width="920px"
       :mask-closable="false"
       :footer="null"
@@ -186,10 +225,24 @@ const saveOrganization = async () => {
         <AButton type="primary" class="dev-left" @click="saveOrganization">保存</AButton>
       </AFlex>
     </AModal>
+
+    <ConfirmModal
+      ref="modalComponent"
+      :title="t('common.deleteConfirmation')"
+      :description-text="t('common.confirmDeletion')"
+      :icon="{ name: 'delete' }"
+      :icon-bg-color="'#F56C6C'"
+      @confirm="confirm"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+.organization-table {
+  height: calc(100vh - 194px);
+  overflow: auto;
+}
+
 .footer {
   margin-top: 24px;
 }
@@ -231,7 +284,6 @@ const saveOrganization = async () => {
   width: 100%;
   height: calc(100vh - 80px);
   padding: 24px;
-  margin-bottom: 16px;
   background: #fff;
   border-radius: 16px;
 }