perf(views): 初步编写"组织管理"页面

src/views/organization-manage/OrganizationManage.vue

@@ -1,3 +1,211 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import dayjs from 'dayjs';
+
+import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
+
+import EstablishOrganization from '../create-customer/EstablishOrganization.vue';
+
+import type { CreateCustomer } from '@/types';
+
+const organizationOpen = ref<boolean>(false);
+const useForm = reactive<CreateCustomer>({
+  orgName: '',
+  logo: '',
+  themeColor: '#32bac0',
+  id: undefined,
+  imageUrl: '',
+  selectedColor: '#e2550d',
+  leaseTerm: [dayjs(), dayjs()],
+  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',
+    ellipsis: true,
+  },
+  {
+    title: '上级组织',
+    dataIndex: 'deviceName1',
+    key: 'deviceName1',
+    ellipsis: true,
+  },
+  {
+    title: '组织描述',
+    dataIndex: 'deviceName2',
+    key: 'deviceName2',
+    ellipsis: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'deviceName3',
+    key: 'deviceName3',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    width: 152,
+  },
+];
+const addOrganization = () => {
+  organizationOpen.value = true;
+};
+const addQuery = () => {};
+const addReset = () => {};
+const organizationEditor = (id: number) => {
+  console.log(id);
+};
+const organizationDelete = (id: number) => {
+  console.log(id);
+};
+const clickOrganizationChange = (id: number) => {
+  console.log(id);
+};
+const cancelOrganization = () => {
+  organizationOpen.value = false;
+};
+const saveOrganization = () => {
+  organizationOpen.value = false;
+};
+</script>
+
 <template>
-  <div>组织管理</div>
+  <div>
+    <AFlex justify="space-between" class="div-bottom">
+      <div class="text-top">组织管理</div>
+      <AFlex align="center">
+        <div class="text-restriction">还可创建1个</div>
+        <AButton type="primary" class="icon-button" @click="addOrganization">
+          <AFlex align="center">
+            <SvgIcon name="plus" />
+            <span> 添加 </span>
+          </AFlex>
+        </AButton>
+      </AFlex>
+    </AFlex>
+    <AFlex>
+      <OrganizationalStructure @change="clickOrganizationChange" />
+      <div class="organization-div">
+        <AFlex justify="space-between" class="div-bottom">
+          <AFlex align="center">
+            <div class="organization-content-text">搜索</div>
+            <AInput 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" />
+            </template>
+          </template>
+        </ATable>
+      </div>
+    </AFlex>
+    <AModal
+      class="organization-modal"
+      v-model:open="organizationOpen"
+      title="添加"
+      width="920px"
+      :mask-closable="false"
+      :footer="null"
+    >
+      <EstablishOrganization
+        v-if="organizationOpen"
+        ref="gatewayParameters"
+        :form="useForm"
+        :steps="[]"
+        :step-index="2"
+        :go-to-step="() => {}"
+      />
+      <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>
+      </AFlex>
+    </AModal>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.organization-modal .ant-modal-header {
+  margin-bottom: 24px;
+}
+
+.dev-left {
+  margin-left: 16px;
+}
+
+.icon-style {
+  margin-right: 17px;
+  font-size: 24px;
+  color: var(--antd-color-primary-hover);
+  cursor: pointer;
+}
+
+.div-bottom {
+  margin-bottom: 16px;
+}
+
+.button-left {
+  margin-left: 12px;
+}
+
+.organization-content-text {
+  margin-right: 12px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: rgb(0 0 0 / 85%);
+  text-align: right;
+}
+
+.input-width {
+  width: 256px;
+}
+
+.organization-div {
+  width: 100%;
+  height: calc(100vh - 80px);
+  padding: 24px;
+  margin-bottom: 16px;
+  background: #fff;
+  border-radius: 16px;
+}
+
+.text-restriction {
+  margin-right: 16px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: rgb(0 0 0 / 65%);
+  text-align: right;
+}
+
+.text-top {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px;
+  color: rgb(0 0 0 / 85%);
+  text-align: left;
+}
+</style>