机构管理

src/api/subOrgPage.ts

@@ -1,6 +1,6 @@
 import { httpApp } from "@/plugins/axiosApp";
 
-/** 顶级机构分页查询 */
+/** 机构分页查询 */
 export function getSubOrgList(params: {
   code?: string;
   name?: string;
@@ -11,3 +11,51 @@ export function getSubOrgList(params: {
 }) {
   return httpApp.post("/api/ess/org/page", params);
 }
+
+/** 更新机构 */
+export function updateSubOrg(params: {
+  code?: string;
+  enable?: boolean;
+  id?: number;
+  name?: string;
+  rootOrgId?: string;
+}) {
+  // params.rootId = params.rootOrgId;
+  return httpApp.post("/api/ess/org/save", params);
+}
+
+/** 禁用、启用机构 */
+export function toggleSubOrg(enable: boolean, ids: number[]) {
+  return httpApp.post(
+    `/api/ess/org/${enable ? "enable" : "disable"}`,
+    new URLSearchParams([["ids", ids.join(",")]])
+  );
+}
+
+/** 删除机构 */
+export function delOrg(ids: number[]) {
+  return httpApp.post(
+    `/api/ess/org/delete`,
+    new URLSearchParams([["ids", ids.join(",")]])
+    // { ids: ids.join(",") },
+    // { headers: { "content-type": "application/x-www-form-urlencoded" } }
+  );
+}
+
+/** 导入机构 */
+export function importOrg(rootOrgId: string, file: File) {
+  const f = new FormData();
+  f.append("rootOrgId", rootOrgId);
+  f.append("file", file);
+  return httpApp.post(`/api/ess/org/import`, f);
+}
+
+/** 导出机构 */
+export function exportOrg(params: {
+  rootOrgId: string;
+  code: string;
+  name: string;
+  enable: string;
+}) {
+  return httpApp.post(`/api/ess/org/export`, params);
+}

src/components/StateSelect.vue

@@ -2,6 +2,7 @@
   <a-select
     placeholder="状态"
     allowClear
+    :disabled="props.disabled"
     :value="props.value"
     @change="handleChange"
     style="width: 80px"
@@ -12,11 +13,20 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({ value: null });
+const props = withDefaults(
+  defineProps<{
+    value?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    value: undefined,
+    disabled: false,
+  }
+);
 const emit = defineEmits(["update:value"]);
 
 function handleChange(v: string) {
-  console.log(v);
+  // console.log(v);
   emit("update:value", v);
 }
 </script>

src/features/subOrg/SubOrg.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
-      <RootOrgSelect style="display: none" v-model:value="rootOrgId" />
+      <RootOrgSelect v-if="store.isSuperAdmin" v-model:value="rootOrgId" />
       <a-input
         v-model:value="code"
         style="width: 178px"
@@ -22,15 +22,21 @@
       <a-button @click="search">查询</a-button>
 
       <div class="tw-mt-4">
-        <a-button>新增</a-button>
+        <a-button @click="newOrg">新增</a-button>
+        <a-button @click="importModalVisible = true">批量导入</a-button>
+        <a-button @click="handleExport">批量导出</a-button>
+        <a-button @click="handleToggleOrg(true, selectIds)">批量启用</a-button>
+        <a-button @click="handleToggleOrg(false, selectIds)">批量禁用</a-button>
+        <a-button @click="handleDelOrg(selectIds)">批量删除</a-button>
       </div>
     </div>
 
     <div class="tw-bg-white tw-p-5 tw-rounded-xl">
       <a-table
-        row-key="code"
+        row-key="id"
         :columns="columns"
         :data-source="data"
+        :row-selection="rowSelection"
         :pagination="{
           pageSize: pageSize,
           current: pageNo,
@@ -47,23 +53,89 @@
         </template>
         <template #action="{ record }">
           <span>
-            <a-button>编辑</a-button>
+            <a-button @click="showModal(record)">编辑</a-button>
+            <a-button @click="handleToggleOrg(!record.enable, [record.id])">{{
+              record.enable ? "禁用" : "启用"
+            }}</a-button>
+            <a-button @click="handleDelOrg([record.id])">删除</a-button>
           </span>
         </template>
       </a-table>
     </div>
+
+    <a-modal
+      v-model:visible="visible"
+      title="机构信息页"
+      @ok="handleOk"
+      ok-text="确定"
+      cancel-text="取消"
+    >
+      <a-form>
+        <a-form-item label="顶级机构">
+          <RootOrgSelect
+            v-show="store.isSuperAdmin"
+            :disabled="!!orgObj.id"
+            v-model:value="orgObj.rootOrgId"
+          />
+        </a-form-item>
+        <a-form-item label="机构名称">
+          <a-input v-model:value="orgObj.name"></a-input>
+        </a-form-item>
+        <a-form-item label="机构编码">
+          <a-input
+            :disabled="!!orgObj.id"
+            v-model:value="orgObj.code"
+          ></a-input>
+        </a-form-item>
+        <a-form-item label="状态">
+          <a-radio-group v-model:value="orgObj.enable">
+            <a-radio :value="true">启用</a-radio>
+            <a-radio :value="false">禁用</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <a-modal
+      v-model:visible="importModalVisible"
+      title="批量机构导入"
+      @ok="handleImport"
+      ok-text="确定"
+      cancel-text="取消"
+    >
+      <a-form>
+        <a-form-item label="顶级机构">
+          <RootOrgSelect
+            v-show="store.isSuperAdmin"
+            :disabled="!!orgObj.id"
+            v-model:value="orgObj.rootOrgId"
+          />
+        </a-form-item>
+        <a-form-item label="文件地址">
+          <input id="file-input" :multiple="false" type="file" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getSubOrgList } from "@/api/subOrgPage";
+import {
+  delOrg,
+  exportOrg,
+  getSubOrgList,
+  importOrg,
+  toggleSubOrg,
+  updateSubOrg,
+} from "@/api/subOrgPage";
 import { useMainStore } from "@/store";
-import { watch, onMounted } from "vue";
+import { message, Modal } from "ant-design-vue";
+import { watch, onMounted, ref, reactive, toRaw } from "vue-demi";
 
 const store = useMainStore();
 store.currentLocation = "基础管理 / 机构管理";
 
-let rootOrgId = $ref(null);
+let rootOrgId = $ref("");
 let code = $ref("");
 let name = $ref("");
 let enable = $ref(undefined as undefined | string);
@@ -84,7 +156,7 @@ async function fetchData() {
     code,
     name,
     enable,
-    rootOrgId: store.userInfo.rootOrgId,
+    rootOrgId,
     pageSize,
     pageNo,
   });
@@ -140,6 +212,86 @@ const columns = [
 ];
 
 onMounted(async () => {
+  rootOrgId = store.userInfo.rootOrgId;
+  await search();
+});
+
+const visible = ref<boolean>(false);
+
+const showModal = (record: any) => {
+  Object.assign(orgObj, record);
+  visible.value = true;
+};
+
+const handleOk = async (e: MouseEvent) => {
+  await updateSubOrg(toRaw(orgObj));
+  visible.value = false;
   await search();
+};
+
+const orgObj = reactive({
+  id: undefined,
+  code: "",
+  name: "",
+  enable: true,
+  rootOrgId: store.userInfo.rootOrgId,
 });
+
+const newOrg = async () => {
+  Object.assign(orgObj, {
+    id: undefined,
+    code: "",
+    name: "",
+    enable: true,
+    rootOrgId,
+  });
+  showModal(orgObj);
+};
+
+async function handleToggleOrg(enable: boolean, ids: number[]) {
+  await toggleSubOrg(enable, ids);
+  await search();
+}
+
+async function handleDelOrg(ids: number[]) {
+  Modal.confirm({
+    title: "提示",
+    content: "确认删除？",
+    cancelText: "取消",
+    okText: "确定",
+    onOk: async () => {
+      await delOrg(ids);
+      await search();
+    },
+  });
+}
+
+/** <handleImport> */
+let importModalVisible = ref<boolean>(false);
+async function handleImport() {
+  const files = (document.querySelector("#file-input") as HTMLInputElement)
+    .files;
+  const fileToImport = files && files[0];
+  if (!fileToImport) {
+    message.warn({ content: "请选择文件" });
+    return;
+  }
+
+  await importOrg(rootOrgId, fileToImport);
+  message.success({ content: "导入成功" });
+}
+/** </handleImport> */
+
+async function handleExport() {
+  await exportOrg({ rootOrgId, name, code, enable });
+  message.success({ content: "导出成功" });
+}
+
+let selectIds = $ref<number[]>([]);
+const rowSelection = {
+  onChange: (selectedRowKeys: (string | number)[]) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`);
+    selectIds = selectedRowKeys as number[];
+  },
+};
 </script>

src/plugins/axiosApp.ts

@@ -118,9 +118,9 @@ _axiosApp.interceptors.response.use(
 
     if (status != 200) {
       const data = error.response.data;
-      if (data && data.message) {
+      if (data && (data.message || data.desc)) {
         if (showErrorMessage) {
-          message.error({ content: data.message, duration: 10 });
+          message.error({ content: data.message || data.desc, duration: 10 });
         }
       } else {
         if (showErrorMessage) {

src/store/index.ts

@@ -21,7 +21,11 @@ export const useMainStore = defineStore("main", {
       currentLocation: "",
     };
   },
-  getters: {},
+  getters: {
+    isSuperAdmin(): boolean {
+      return this.userInfo.roleList.some((r) => r.roleCode === "SUPER_ADMIN");
+    },
+  },
   actions: {
     setUserInfo(res: any) {
       this.userInfo = res;