inl-ui 0.0.20 → 0.0.21

package/dist/index.min.js

@@ -0,0 +1 @@
+var root=function(h,M,w,i,B,z,E,P,D,j){"use strict";function v(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var L=v(M),O=v(w),q=v(B),U=v(E),R=v(D),T="0.1.0-rc.13";const A=e=>{e==="dark"?(document.getElementsByTagName("html")[0].setAttribute("data-doc-theme","dark"),document.getElementsByTagName("body")[0].setAttribute("data-theme","dark"),document.getElementsByTagName("html")[0].style.colorScheme="dark"):(document.getElementsByTagName("html")[0].setAttribute("data-doc-theme","light"),document.getElementsByTagName("body")[0].setAttribute("data-theme","light"),document.getElementsByTagName("html")[0].style.colorScheme="light")};var V={set(e){window.localStorage.setItem("theme",e),A(e)},settingTheme(e){const n=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";e=e||window.localStorage.getItem("theme")||n,A(e)}};const W=e=>{const n=e.fontSize||14,t=e.designSize||1920,r=document.documentElement.clientWidth/t;document.documentElement.style.fontSize=`${n*Math.min(r,2)}px`},y=w.qiankunWindow.__POWERED_BY_QIANKUN__,Q=(e,n)=>{if(y){let t=function(u){for(const o of u)o.path=`/${e}${o.path}`,o.children?.length&&t(o.children)};const r=n.filter(u=>u.name!=="login"&&u.path!=="/login");return t(n),r.push({path:"/:pathMatch(.*)*",component:{render:()=>""}}),r}return n};function G(e){return L.default(e,{useDevMode:!0})}function H(e,n,t){let r;const u=(o={})=>{const{container:d}=o,f=d?d.querySelector(n):n;r=i.createApp(e),t(r,o),r.mount(f)};y?O.default({bootstrap(){console.log("\u5FAE\u5E94\u7528\uFF1Abootstrap")},mount(o){console.log("\u5FAE\u5E94\u7528\uFF1Amount",o),u(o)},unmount(o){console.log("\u5FAE\u5E94\u7528\uFF1Aunmount",o),r.unmount()},update(o){console.log("\u5FAE\u5E94\u7528\uFF1Aupdate",o)}}):u()}const K={isMicroApp:y,transformRoutes:Q,microAppPlugin:G,render:H},$={prefix:"inl",requestOmitParams:["createDt","createUser","updateDt","updateUser"]},J=()=>sessionStorage.getItem("token"),x=()=>sessionStorage.getItem("corpId"),Y=()=>{const e=sessionStorage.getItem("userinfo");if(e)return JSON.parse(e)};class X{instance;config;constructor(n){this.config=n,this.instance=q.default.create(n),this.instance.interceptors.request.use(t=>{const r=Y(),u=J(),o=x();return E.isEmpty(t.data)||(t.data=E.omit(t.data,...$.requestOmitParams)),t.headers.token=u,t.headers.userId=r?.userId,t.headers.userName=r?.userName,t.headers.corpId=o,t},t=>Promise.reject(t)),this.instance.interceptors.response.use(t=>new Promise((r,u)=>{if(t.config.responseType==="blob"&&r(t.data),t.data.code==="M0000")r(t.data);else if(t.data.code==="M4003")this.config.onTokenExpired?.(t),u(t);else{const o=t.data.message??"\u7F51\u7EDC\u5F02\u5E38\uFF0C\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458";z.message.error(o,o.length>10?10:3),u(t.data)}}),t=>Promise.reject(t))}}const I={changeTheme:V,setRem:W,microAppUtils:K,ApiInstance:X};var k=Object.freeze({__proto__:null,focusDirective:{mounted(e,{value:n}){n!==!1&&e.focus()}},autoScroll:{mounted(e,{value:n="ant-table-body",modifiers:t}){let r,u,o=!1,d=!1;const{self:f}=t,g=window.innerWidth/window.innerHeight>2?7200:2880,_=Math.ceil(g/window.innerWidth),p=()=>o=!0,b=()=>o=!1,m=f?e:e.querySelector(`.${n}`);!m||(r=setInterval(()=>{if(!document.contains(e)){r&&clearInterval(r),e.removeEventListener("mouseenter",p),e.removeEventListener("mouseleave",b);return}if(o)return;const l=m.getBoundingClientRect().height;if(!(l>=m.scrollHeight))if(!o&&m.scrollTop+l>m.scrollHeight-_){if(u)return;u=setTimeout(()=>{o||(m.scrollTop=0),setTimeout(()=>{o||(d=!1)},1e3),u=null},1e3),d=!0}else d||m.scrollTo({top:m.scrollTop+_})},100),e.addEventListener("mouseenter",p),e.addEventListener("mouseleave",b))}}});function Z(e){const n=i.ref();return P.useIntervalFn(()=>{const t=R.default();n.value=e?t.format(e):t},1e3,{immediate:!1,immediateCallback:!0}),n}function ee(e,n,t="totalCount"){const r=i.ref([]),u=i.ref(!1),o=i.ref(0),d=async()=>{u.value=!0;try{const{data:l}=await e();n?(r.value=l[n],o.value=l[t]):r.value=l}finally{u.value=!1}},f=E.debounce(d,200),g=i.ref(1),_=l=>{g.value=l,d()};i.watch(o,()=>{const l=Math.ceil(o.value/p.value);g.value>1&&g.value>l&&(g.value=l,d())});const p=i.ref(10),b=l=>{g.value=1,p.value=l,d()},m=i.reactive({current:g,pageSize:p,total:o,showSizeChanger:!0,showQuickJumper:!0,showTotal:l=>`\u5171 ${l} \u6761`,"onUpdate:current":_,"onUpdate:pageSize":b});return{isLoading:u,tableList:r,currPage:g,handlePageChange:_,pageSize:p,hanldePageSizeChange:b,total:o,refresh:f,pagination:m}}function te(e=!1){const n=i.ref(e),t=i.ref();return[n,r=>{r&&(t.value=r),n.value=!n.value},t]}function ne(e){let n=!1;const t=i.ref({});if(U.default.isEmpty(e))return t;const{onGlobalStateChange:r,offGlobalStateChange:u,setGlobalState:o}=e,d=f=>{n=!0,t.value=f,i.nextTick(()=>n=!1)};return i.watch(t,f=>{n||o(f)},{deep:!0}),i.onMounted(()=>r(d,!0)),i.onBeforeUnmount(()=>u()),t}var N=Object.freeze({__proto__:null,useNow:Z,useTableList:ee,useModalVisible:te,useQianKunState:ne});const{prefix:oe}=$;function C(e,n,t=!0){return e.install=r=>{n=t?`${oe}-${n}`:n,r.component(n,e)},e}const ae=i.defineComponent({props:{name:{type:String,default:"\u5F20\u4E09"}},setup(e){return()=>i.createVNode("div",{class:"Demo"},["\u6211\u662Fdemo, ",e.name])}});var re=C(ae,"demo");const se=j.createFromIconfontCN();var ue=C(se,"icon-font",!1),F=Object.freeze({__proto__:null,Demo:re,IconFont:ue}),ie={install(e){for(const n of Object.values(F))e.use(n);require("./iconfont.js")},version:T,utils:I,directives:k,hooks:N,components:F};return h.components=F,h.default=ie,h.directives=k,h.hooks=N,h.utils=I,h.version=T,Object.defineProperty(h,"__esModule",{value:!0}),h}({},c,s,vue,a,antDesignVue,S,core,s$1,iconsVue);

package/dist/src/pageComponent/views/systemManager/orgManager/depManager/batchImportModal.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 批量导入人员
+ */
+declare const BatchImportModal: import("vue").DefineComponent<{
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:visible" | "refresh")[], "update:visible" | "refresh", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
+    onRefresh?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+}>;
+export default BatchImportModal;

package/dist/utils/index.cjs

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var qiankun = require('vite-plugin-qiankun');
+var renderWithQiankun = require('vite-plugin-qiankun/dist/helper');
+var vue = require('vue');
+var axios = require('axios');
+var antDesignVue = require('ant-design-vue');
+var lodash = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var qiankun__default = /*#__PURE__*/_interopDefaultLegacy(qiankun);
+var renderWithQiankun__default = /*#__PURE__*/_interopDefaultLegacy(renderWithQiankun);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+
+const setTheme = theme => {
+  if (theme === "dark") {
+    document.getElementsByTagName("html")[0].setAttribute("data-doc-theme", "dark");
+    document.getElementsByTagName("body")[0].setAttribute("data-theme", "dark");
+    document.getElementsByTagName("html")[0].style.colorScheme = "dark";
+  } else {
+    document.getElementsByTagName("html")[0].setAttribute("data-doc-theme", "light");
+    document.getElementsByTagName("body")[0].setAttribute("data-theme", "light");
+    document.getElementsByTagName("html")[0].style.colorScheme = "light";
+  }
+};
+var changeTheme = {
+  set(theme) {
+    window.localStorage.setItem("theme", theme);
+    setTheme(theme);
+  },
+  settingTheme(theme) {
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    theme = theme || window.localStorage.getItem("theme") || systemTheme;
+    setTheme(theme);
+  }
+};
+
+const setRem = opt => {
+  const fontSize = opt.fontSize || 14;
+  const designSize = opt.designSize || 1920;
+  const scale = document.documentElement.clientWidth / designSize;
+  document.documentElement.style.fontSize = `${fontSize * Math.min(scale, 2)}px`;
+};
+
+const isMicroApp = renderWithQiankun.qiankunWindow.__POWERED_BY_QIANKUN__;
+const transformRoutes = (appName, routes) => {
+  if (isMicroApp) {
+    let addBase = function (rs) {
+      for (const r of rs) {
+        r.path = `/${appName}${r.path}`;
+        if (r.children?.length) {
+          addBase(r.children);
+        }
+      }
+    };
+    const newRoutes = routes.filter(item => item.name !== "login" && item.path !== "/login");
+    addBase(routes);
+    newRoutes.push({
+      path: "/:pathMatch(.*)*",
+      component: {
+        render: () => ""
+      }
+    });
+    return newRoutes;
+  }
+  return routes;
+};
+function microAppPlugin(name) {
+  return qiankun__default["default"](name, {
+    useDevMode: true
+  });
+}
+function render(AppRoot, rootEl, configApp) {
+  let app;
+  const _render = (props = {}) => {
+    const {
+      container
+    } = props;
+    const root = container ? container.querySelector(rootEl) : rootEl;
+    app = vue.createApp(AppRoot);
+    configApp(app, props);
+    app.mount(root);
+  };
+  const initQianKun = () => {
+    renderWithQiankun__default["default"]({
+      bootstrap() {
+        console.log("\u5FAE\u5E94\u7528\uFF1Abootstrap");
+      },
+      mount(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Amount", props);
+        _render(props);
+      },
+      unmount(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Aunmount", props);
+        app.unmount();
+      },
+      update(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Aupdate", props);
+      }
+    });
+  };
+  isMicroApp ? initQianKun() : _render();
+}
+const microAppUtils = {
+  isMicroApp,
+  transformRoutes,
+  microAppPlugin,
+  render
+};
+
+const config = {
+  prefix: "inl",
+  requestOmitParams: ["createDt", "createUser", "updateDt", "updateUser"]
+};
+
+const getToken = () => sessionStorage.getItem("token");
+const getCorpId = () => sessionStorage.getItem("corpId");
+const getUserinfo = () => {
+  const jsonString = sessionStorage.getItem("userinfo");
+  if (jsonString) {
+    return JSON.parse(jsonString);
+  }
+};
+class ApiInstance {
+  instance;
+  config;
+  constructor(config$1) {
+    this.config = config$1;
+    this.instance = axios__default["default"].create(config$1);
+    this.instance.interceptors.request.use(config2 => {
+      const userinfo = getUserinfo();
+      const token = getToken();
+      const corpId = getCorpId();
+      if (!lodash.isEmpty(config2.data)) {
+        config2.data = lodash.omit(config2.data, ...config.requestOmitParams);
+      }
+      config2.headers.token = token;
+      config2.headers.userId = userinfo?.userId;
+      config2.headers.userName = userinfo?.userName;
+      config2.headers.corpId = corpId;
+      return config2;
+    }, err => {
+      return Promise.reject(err);
+    });
+    this.instance.interceptors.response.use(res => {
+      return new Promise((resolve, reject) => {
+        if (res.config.responseType === "blob") {
+          resolve(res.data);
+        }
+        if (res.data.code === "M0000") {
+          resolve(res.data);
+        } else if (res.data.code === "M4003") {
+          this.config.onTokenExpired?.(res);
+          reject(res);
+        } else {
+          const alertMessage = res.data.message ?? "\u7F51\u7EDC\u5F02\u5E38\uFF0C\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458";
+          antDesignVue.message.error(alertMessage, alertMessage.length > 10 ? 10 : 3);
+          reject(res.data);
+        }
+      });
+    }, err => {
+      return Promise.reject(err);
+    });
+  }
+}
+
+const utils = {
+  changeTheme,
+  setRem,
+  microAppUtils,
+  ApiInstance
+};
+
+exports.ApiInstance = ApiInstance;
+exports.changeTheme = changeTheme;
+exports["default"] = utils;
+exports.microAppUtils = microAppUtils;
+exports.setRem = setRem;

package/dist/utils/index.d.ts

@@ -0,0 +1,72 @@
+import * as vite_plugin_qiankun_dist_helper from 'vite-plugin-qiankun/dist/helper';
+import { QiankunProps } from 'vite-plugin-qiankun/dist/helper';
+import * as vue from 'vue';
+import { Component, App } from 'vue';
+import * as vite from 'vite';
+import * as vue_router from 'vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+
+declare const _default: {
+    set(theme: string): void;
+    settingTheme(theme?: string): void;
+};
+
+/**
+ *
+ * @param opt
+ * @param opt.fontSize 基础字体大小
+ * @param opt.designSize 设计稿基数
+ */
+declare const setRem: (opt: {
+    fontSize?: number;
+    designSize?: number;
+}) => void;
+
+/**
+ * 微应用 vite 插件
+ * @param name 微应用name
+ */
+declare function microAppPlugin(name: string): vite.PluginOption;
+/**
+ * render函数
+ * @param AppRoot 根组件
+ * @param rootEl 根dom
+ * @param configApp 用于配置app
+ */
+declare function render(AppRoot: Component, rootEl: string, configApp: (app: App, props?: QiankunProps) => any): void;
+declare const microAppUtils: {
+    isMicroApp: boolean | undefined;
+    transformRoutes: (appName: string, routes: RouteRecordRaw[]) => RouteRecordRaw[];
+    microAppPlugin: typeof microAppPlugin;
+    render: typeof render;
+};
+
+interface IApiInstanceConfig extends AxiosRequestConfig {
+    onTokenExpired?: (res: AxiosResponse) => void;
+}
+declare class ApiInstance {
+    instance: AxiosInstance;
+    config: IApiInstanceConfig;
+    constructor(config: IApiInstanceConfig);
+}
+
+declare const utils: {
+    changeTheme: {
+        set(theme: string): void;
+        settingTheme(theme?: string | undefined): void;
+    };
+    setRem: (opt: {
+        fontSize?: number | undefined;
+        designSize?: number | undefined;
+    }) => void;
+    microAppUtils: {
+        isMicroApp: boolean | undefined;
+        transformRoutes: (appName: string, routes: vue_router.RouteRecordRaw[]) => vue_router.RouteRecordRaw[];
+        microAppPlugin: (name: string) => vite.PluginOption;
+        render: (AppRoot: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions>, rootEl: string, configApp: (app: vue.App<any>, props?: vite_plugin_qiankun_dist_helper.QiankunProps | undefined) => any) => void;
+    };
+    ApiInstance: typeof ApiInstance;
+};
+
+export { ApiInstance, _default as changeTheme, utils as default, microAppUtils, setRem };

package/dist/utils/index.js

@@ -0,0 +1,167 @@
+import qiankun from 'vite-plugin-qiankun';
+import renderWithQiankun, { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
+import { createApp } from 'vue';
+import axios from 'axios';
+import { message } from 'ant-design-vue';
+import { isEmpty, omit } from 'lodash';
+
+const setTheme = theme => {
+  if (theme === "dark") {
+    document.getElementsByTagName("html")[0].setAttribute("data-doc-theme", "dark");
+    document.getElementsByTagName("body")[0].setAttribute("data-theme", "dark");
+    document.getElementsByTagName("html")[0].style.colorScheme = "dark";
+  } else {
+    document.getElementsByTagName("html")[0].setAttribute("data-doc-theme", "light");
+    document.getElementsByTagName("body")[0].setAttribute("data-theme", "light");
+    document.getElementsByTagName("html")[0].style.colorScheme = "light";
+  }
+};
+var changeTheme = {
+  set(theme) {
+    window.localStorage.setItem("theme", theme);
+    setTheme(theme);
+  },
+  settingTheme(theme) {
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    theme = theme || window.localStorage.getItem("theme") || systemTheme;
+    setTheme(theme);
+  }
+};
+
+const setRem = opt => {
+  const fontSize = opt.fontSize || 14;
+  const designSize = opt.designSize || 1920;
+  const scale = document.documentElement.clientWidth / designSize;
+  document.documentElement.style.fontSize = `${fontSize * Math.min(scale, 2)}px`;
+};
+
+const isMicroApp = qiankunWindow.__POWERED_BY_QIANKUN__;
+const transformRoutes = (appName, routes) => {
+  if (isMicroApp) {
+    let addBase = function (rs) {
+      for (const r of rs) {
+        r.path = `/${appName}${r.path}`;
+        if (r.children?.length) {
+          addBase(r.children);
+        }
+      }
+    };
+    const newRoutes = routes.filter(item => item.name !== "login" && item.path !== "/login");
+    addBase(routes);
+    newRoutes.push({
+      path: "/:pathMatch(.*)*",
+      component: {
+        render: () => ""
+      }
+    });
+    return newRoutes;
+  }
+  return routes;
+};
+function microAppPlugin(name) {
+  return qiankun(name, {
+    useDevMode: true
+  });
+}
+function render(AppRoot, rootEl, configApp) {
+  let app;
+  const _render = (props = {}) => {
+    const {
+      container
+    } = props;
+    const root = container ? container.querySelector(rootEl) : rootEl;
+    app = createApp(AppRoot);
+    configApp(app, props);
+    app.mount(root);
+  };
+  const initQianKun = () => {
+    renderWithQiankun({
+      bootstrap() {
+        console.log("\u5FAE\u5E94\u7528\uFF1Abootstrap");
+      },
+      mount(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Amount", props);
+        _render(props);
+      },
+      unmount(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Aunmount", props);
+        app.unmount();
+      },
+      update(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Aupdate", props);
+      }
+    });
+  };
+  isMicroApp ? initQianKun() : _render();
+}
+const microAppUtils = {
+  isMicroApp,
+  transformRoutes,
+  microAppPlugin,
+  render
+};
+
+const config = {
+  prefix: "inl",
+  requestOmitParams: ["createDt", "createUser", "updateDt", "updateUser"]
+};
+
+const getToken = () => sessionStorage.getItem("token");
+const getCorpId = () => sessionStorage.getItem("corpId");
+const getUserinfo = () => {
+  const jsonString = sessionStorage.getItem("userinfo");
+  if (jsonString) {
+    return JSON.parse(jsonString);
+  }
+};
+class ApiInstance {
+  instance;
+  config;
+  constructor(config$1) {
+    this.config = config$1;
+    this.instance = axios.create(config$1);
+    this.instance.interceptors.request.use(config2 => {
+      const userinfo = getUserinfo();
+      const token = getToken();
+      const corpId = getCorpId();
+      if (!isEmpty(config2.data)) {
+        config2.data = omit(config2.data, ...config.requestOmitParams);
+      }
+      config2.headers.token = token;
+      config2.headers.userId = userinfo?.userId;
+      config2.headers.userName = userinfo?.userName;
+      config2.headers.corpId = corpId;
+      return config2;
+    }, err => {
+      return Promise.reject(err);
+    });
+    this.instance.interceptors.response.use(res => {
+      return new Promise((resolve, reject) => {
+        if (res.config.responseType === "blob") {
+          resolve(res.data);
+        }
+        if (res.data.code === "M0000") {
+          resolve(res.data);
+        } else if (res.data.code === "M4003") {
+          this.config.onTokenExpired?.(res);
+          reject(res);
+        } else {
+          const alertMessage = res.data.message ?? "\u7F51\u7EDC\u5F02\u5E38\uFF0C\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458";
+          message.error(alertMessage, alertMessage.length > 10 ? 10 : 3);
+          reject(res.data);
+        }
+      });
+    }, err => {
+      return Promise.reject(err);
+    });
+  }
+}
+
+const utils = {
+  changeTheme,
+  setRem,
+  microAppUtils,
+  ApiInstance
+};
+
+export { ApiInstance, changeTheme, utils as default, microAppUtils, setRem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inl-ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "工业 pc ui库",
   "main": "dist/index.js",
   "types": "./dist/types/src/index.d.ts",
@@ -51,4 +51,4 @@
     "vue-router": "4",
     "vuex": "^4.0.2"
   }
-}
+}

package/src/pageComponent/views/systemManager/orgManager/depManager/batchImportModal.tsx

@@ -0,0 +1,120 @@
+import { defineComponent, ref, watch } from "vue";
+import useVModel from "@/pageComponent/hooks/useVModel";
+import { message } from "ant-design-vue";
+import { FileExcelTwoTone, InboxOutlined } from "@ant-design/icons-vue";
+
+/**
+ * 批量导入人员
+ */
+const BatchImportModal = defineComponent({
+  emits: ["update:visible", "refresh"],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const isVisible = useVModel(props, "visible", emit);
+
+    const isLoading = ref(false);
+    const fileList = ref<any[]>([]);
+
+    const handleUpload = async () => {
+      isLoading.value = true;
+      setTimeout(() => {
+        message.success("导入成功");
+        isVisible.value = false;
+        emit("refresh");
+      }, 1000);
+    };
+
+    // 关闭后清空上传列表
+    watch(isVisible, (val) => {
+      if (!val) {
+        fileList.value = [];
+        isLoading.value = false;
+      }
+    });
+
+    return () => (
+      <div class="batchImportModal">
+        <a-modal
+          title="批量导入"
+          v-model={[isVisible.value, "visible"]}
+          v-slots={{
+            footer: () => (
+              <a-space>
+                <a-button
+                  type="primary"
+                  disabled={!fileList.value.length}
+                  loading={isLoading.value}
+                  onClick={handleUpload}
+                >
+                  上传文件
+                </a-button>
+                <a-button onClick={() => (isVisible.value = false)}>
+                  取消
+                </a-button>
+              </a-space>
+            ),
+          }}
+        >
+          <a-alert showIcon type="warning">
+            {{
+              message: () => (
+                <span
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <span style={{ color: "#915B28" }}>
+                    请先下载模版并按要求填写信息，否则可能导入失败
+                  </span>
+                  <a
+                    target="_BLANK"
+                    href="/api/common/v1/employee/export/template"
+                  >
+                    人员模版
+                  </a>
+                </span>
+              ),
+            }}
+          </a-alert>
+          <a-upload-dragger
+            style={{ margin: "16px 0" }}
+            showUploadList={false}
+            beforeUpload={() => false}
+            multiple={false}
+            onChange={({ file }) => (fileList.value = [file])}
+            accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            v-model={[fileList.value, "fileList"]}
+          >
+            {fileList.value.length ? (
+              <>
+                <p class="ant-upload-drag-icon">
+                  <FileExcelTwoTone twoToneColor="#00C090" />
+                </p>
+                <p class="ant-upload-text">{fileList.value[0].name}</p>
+                <p class="ant-upload-hint">
+                  <a-button>重新上传</a-button>
+                </p>
+              </>
+            ) : (
+              <>
+                <p class="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
+                <p class="ant-upload-hint">支持格式: xls/xlsx</p>
+              </>
+            )}
+          </a-upload-dragger>
+        </a-modal>
+      </div>
+    );
+  },
+});
+
+export default BatchImportModal;

package/src/pageComponent/views/systemManager/orgManager/depManager/employeeTable.tsx

@@ -9,11 +9,13 @@
 import { computed, defineComponent, inject, ref, watch } from "vue";
 import useTableList from "@/pageComponent/hooks/useTableList";
 import useModalVisibleControl from "@/pageComponent/hooks/manage-module/useModalVisibleControl";
+import dayjs from "dayjs";
 import api from "@/api/org/depManager";
 import { IUrlObj } from "./index";
 
 import { Modal } from "ant-design-vue";
 import UpdateEmployeeDialog from "./updateEmployeeDialog";
+import BatchImportModal from "./batchImportModal";
 
 const columns = [
   {
@@ -130,9 +132,27 @@ const EmployeeTable = defineComponent({
       refresh();
     };
 
+    // 批量导入/导出
+    const [isImportDialogShow, handleImportClick] = useModalVisibleControl();
+
+    const selectIdList = ref<string[]>([]);
+    watch(
+      () => props.depId,
+      () => (selectIdList.value = [])
+    );
+    const handleSelect = (selectedRowKeys: string[]) => {
+      selectIdList.value = selectedRowKeys;
+    };
+    const handleExport = () => {
+      const day = dayjs();
+      const aEl = document.createElement("a");
+      aEl.href = "/api/common/v1/employee/export/multi";
+      aEl.download = `批量导出成员_${day.format("YYYY_M_D_ms")}`;
+      aEl.click();
+    };
+
     return () => (
       <div class="employee-table">
-        <h2 class="部门人员详情"></h2>
         <div class="operation">
           <a-space>
             <a-button
@@ -142,6 +162,13 @@ const EmployeeTable = defineComponent({
             >
               新建
             </a-button>
+            <a-button onClick={handleImportClick}>批量导入</a-button>
+            <a-button
+              disabled={!selectIdList.value.length}
+              onClick={handleExport}
+            >
+              批量导出
+            </a-button>
           </a-space>
           <a-input
             style={{ width: "200px" }}
@@ -153,9 +180,14 @@ const EmployeeTable = defineComponent({
           />
         </div>
         <a-table
+          rowKey="id"
           loading={isLoading.value}
           columns={columns}
           dataSource={tableList.value}
+          rowSelection={{
+            selectedRowKeys: selectIdList.value,
+            onChange: handleSelect,
+          }}
           pagination={{
             pageSize: pageSize.value,
             current: currPage.value,
@@ -218,6 +250,11 @@ const EmployeeTable = defineComponent({
           v-model={[isEditDialogShow.value, "visible"]}
           onRefresh={refresh}
         />
+
+        <BatchImportModal
+          v-model={[isImportDialogShow.value, "visible"]}
+          onRefresh={refresh}
+        />
       </div>
     );
   },