zhl-methods 1.1.17 → 2.0.1

package/VERSION.md

@@ -1,7 +1,11 @@
 # zhl-methods
 
-npm publish 发布命令
-版本更新日志
+### npm 命令
+
+npm login 登录
+npm publish 发布
+
+# 版本更新日志
 
 ### 1.1.17
 

package/antdv/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/antdv/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/antdv/components/index.css

@@ -0,0 +1,5 @@
+.ant-modal-body {
+  max-height: 80vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}

package/antdv/components/modalView/index.vue

@@ -0,0 +1,74 @@
+<!--
+  弹窗
+  @author zhl
+  @date 2026/03/11
+-->
+<template>
+  <vxe-modal
+    :title="props.title"
+    v-model="state.showModal"
+    :loading="state.loading"
+    maskClosable
+    escClosable
+    :height="props.height"
+    :width="props.width"
+    :showFooter="props.showFooter"
+    show-cancel-button
+    show-confirm-button
+    destroy-on-close
+    :confirm-closable="false"
+    @confirm="emits('confirm')"
+    @cancel="emits('close')"
+    @close="emits('close')"
+  >
+    <slot></slot>
+  </vxe-modal>
+</template>
+<script setup lang="ts">
+import { VxeModal } from "vxe-pc-ui";
+import { reactive } from "vue";
+const emits = defineEmits(["confirm", "close"]);
+/**
+ * title 弹窗显示标题
+ * width 弹窗宽度 字符串   100px 100 100% 50vw calc(50vw - 50px)
+ * height 弹窗宽度 字符串   100px 100 100% 50vh calc(50vh - 50px)
+ * maskClosable 是否允许点击遮罩层关闭窗口
+ * escClosable 是否允许按 Esc 键关闭窗口
+ * showFooter 是否显示底部按钮 自定义footer会直接覆盖默认footer
+ */
+const props = defineProps({
+  title: { type: String },
+  width: { type: String },
+  height: { type: String },
+  maskClosable: {
+    type: Boolean,
+    default: () => true,
+  },
+  escClosable: {
+    type: Boolean,
+    default: () => true,
+  },
+  showFooter: {
+    type: Boolean,
+    default: () => true,
+  },
+});
+const state = reactive({
+  loading: false,
+  showModal: false,
+});
+const open = () => {
+  state.showModal = true;
+};
+const close = () => {
+  state.showModal = false;
+};
+const setLoading = (loading: boolean) => {
+  state.loading = loading;
+};
+defineExpose({
+  open,
+  close,
+  setLoading,
+});
+</script>

package/antdv/components/tableView/components/ActionList.vue

@@ -0,0 +1,102 @@
+<template>
+  <vxe-column field="66" title="66" width="225">
+    <div style="display: flex; align-items: center">
+      <div :style="{ width: actionList.length > 4 ? '153px' : '100%' }">
+        <div style="display: flex; margin-bottom: 10px">
+          <vxe-button
+            style="width: 74px"
+            size="mini"
+            mode="text"
+            :status="actionList[0].status"
+            v-if="actionList[0]"
+            @click="
+              actionList[0].callback ? actionList[0].callback() : () => {}
+            "
+          >
+            {{ actionList[0].title }}
+          </vxe-button>
+          <vxe-button
+            style="width: 74px"
+            size="mini"
+            mode="text"
+            :status="actionList[1].status"
+            v-if="actionList[1]"
+            @click="
+              actionList[1].callback ? actionList[1].callback() : () => {}
+            "
+          >
+            {{ actionList[1].title }}
+          </vxe-button>
+        </div>
+        <div style="display: flex">
+          <vxe-button
+            style="width: 74px"
+            size="mini"
+            mode="text"
+            :status="actionList[2].status"
+            v-if="actionList[2]"
+            @click="
+              actionList[2].callback ? actionList[2].callback() : () => {}
+            "
+          >
+            {{ actionList[2].title }}
+          </vxe-button>
+          <vxe-button
+            style="width: 74px"
+            size="mini"
+            mode="text"
+            v-if="actionList[3]"
+            :status="actionList[3].status"
+            @click="
+              actionList[3].callback ? actionList[3].callback() : () => {}
+            "
+          >
+            {{ actionList[3].title }}
+          </vxe-button>
+        </div>
+      </div>
+      <vxe-button
+        mode="text"
+        v-if="menuList.length"
+        :options="
+          menuList.map((item) => ({
+            ...item,
+            content: item.title,
+          }))
+        "
+      />
+    </div>
+  </vxe-column>
+</template>
+<script lang="ts" setup>
+import { reactive, computed } from "vue";
+// import { authMethod } from "@/directives/auth/authMethod.ts";
+
+const props = defineProps<{
+  listData: {
+    callback: Function;
+    title: string;
+    auth?: string;
+    vIf?: Boolean;
+    status?: "primary" | "success" | "warning" | "error";
+  }[];
+}>();
+const actionList = computed(() => {
+  return props.listData.filter((item) => {
+    let type: Boolean | undefined = true;
+    if (item.vIf != undefined) type = item.vIf;
+    // if (item.auth) type = type && authMethod(item.auth);
+    if (type) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+});
+const menuList = computed(() => {
+  if (actionList.value.length > 4) {
+    return actionList.value.slice(4, actionList.value.length);
+  }
+  return [];
+});
+</script>

package/antdv/components/tableView/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <a-table :dataSource="dataSource" :columns="columns" />
+</template>
+<script setup>
+const dataSource = [
+  {
+    key: "1",
+    name: "胡彦斌",
+    age: 32,
+    address: "西湖区湖底公园1号",
+  },
+  {
+    key: "2",
+    name: "胡彦祖",
+    age: 42,
+    address: "西湖区湖底公园1号",
+  },
+];
+const columns = [
+  {
+    title: "姓名",
+    dataIndex: "name",
+    key: "name",
+  },
+  {
+    title: "年龄",
+    dataIndex: "age",
+    key: "age",
+  },
+  {
+    title: "住址",
+    dataIndex: "address",
+    key: "address",
+  },
+];
+</script>

package/antdv/components/uploadImage/index.vue

@@ -0,0 +1,165 @@
+<!--
+  图片上传  单个  多个
+  @author zhl
+  @date 2026/01/28
+-->
+<template>
+  <a-upload
+    :disabled="props.disabled"
+    list-type="picture-card"
+    :file-list="showUploadList"
+    :action="URL + '/admin.upload/upload'"
+    :accept="props.fileType"
+    :headers="headers"
+    :data="{
+      scene: props.scene,
+      ...data,
+    }"
+    :before-upload="beforeUpload"
+    :on-success="onSuccess"
+    :on-error="onError"
+    @remove="removeImg"
+    @preview="handlePreview"
+  >
+    <template v-if="!disabled">
+      <template v-if="showUploadList.length < imgLimit">
+        <LoadingOutlined v-if="state.loading" />
+        <plus-outlined v-else />
+      </template>
+    </template>
+  </a-upload>
+  <a-modal
+    :open="state.showModal"
+    title="预览"
+    :footer="null"
+    @cancel="state.showModal = false"
+  >
+    <img alt="example" style="width: 100%" :src="state.showImgUrl" />
+  </a-modal>
+</template>
+<script setup lang="ts">
+import { message } from "ant-design-vue";
+import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
+import { reactive, computed } from "vue";
+import { URL } from "@/utils/request";
+const headers = {
+  Authorization: localStorage.getItem("TOKEN"),
+  brand: "1",
+};
+const emits = defineEmits([
+  "update:modelValue",
+  "onSuccess",
+  "getImgUrl",
+  "beforeUpload",
+]);
+/**
+ * 传递参数
+ * @params scene 场景值 必穿  shop store 等
+ * @params data 更多参数 对象格式
+ * @params fileType 选择图片类型  默认所有格式图片
+ * @author zhl
+ * @date 2023/12/06
+ */
+const props = defineProps({
+  modelValue: {},
+  disabled: {
+    type: Boolean,
+  },
+  imgLimit: {
+    type: Number,
+    default: () => 1,
+  },
+  scene: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+  },
+  fileType: {
+    type: String,
+    default: () => "image/*",
+  },
+});
+const state = reactive({
+  loading: false,
+  showImgUrl: "",
+  showModal: false,
+});
+const handlePreview = async (file) => {
+  state.showImgUrl = file.url;
+  state.showModal = true;
+};
+/**
+ * 是否显示上传列表
+ * 单图片  多图片显示
+ * @author zhl
+ * @date 2023/12/08
+ */
+const showUploadList = computed(() => {
+  if (typeof props.modelValue === "string") {
+    if (props.modelValue) {
+      return [{ url: props.modelValue }];
+    } else {
+      return [];
+    }
+  } else {
+    return props.modelValue.map((item) => {
+      return { url: item };
+    });
+  }
+});
+/**
+ * 上传前
+ * @author zhl
+ * @date 2023/12/06
+ */
+const beforeUpload = (file) => {
+  state.loading = true;
+  emits("beforeUpload", file);
+  return true;
+};
+/**
+ * 上传成功
+ * @author zhl
+ * @date 2023/12/06
+ */
+const onSuccess = (res) => {
+  state.loading = false;
+  if (res.code == 200) {
+    if (props.imgLimit > 1) {
+      // let data = JSON.parse(JSON.stringify(props.modelValue))
+      // data.push(res.data.url)
+      // emits('update:modelValue', data)
+      props.modelValue.push(res.data.url);
+    } else {
+      emits("update:modelValue", res.data.url);
+      emits("getImgUrl", res.data.url);
+    }
+  } else {
+    message.error(res.msg);
+  }
+};
+/**
+ * 上传失败
+ * @author zhl
+ * @date 2023/12/06
+ */
+const onError = () => {
+  state.loading = false;
+  message.error("上传失败");
+};
+const removeImg = (file) => {
+  if (props.imgLimit > 1) {
+    showUploadList.value.forEach((item, index) => {
+      if (item.url == file.url) {
+        showUploadList.value.splice(index, 1);
+        props.modelValue.splice(index, 1);
+      }
+    });
+  } else {
+    emits("update:modelValue", "");
+  }
+};
+</script>
+<style lang="scss"></style>

package/antdv/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/antdv/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "jinglijing_wholesale_pc",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vxe-ui/plugin-export-xlsx": "4.5.1",
+    "ant-design-vue": "4.x",
+    "consola": "^3.4.2",
+    "exceljs": "4.4.0",
+    "vite-plugin-lazy-import": "^1.0.7",
+    "vite-plugin-style-import": "^2.0.0",
+    "vue": "^3.5.24",
+    "vxe-pc-ui": "4.12.16",
+    "vxe-table": "4.17.46",
+    "xe-utils": "3.9.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^3.1.4"
+  }
+}

package/antdv/src/App.vue

@@ -0,0 +1,12 @@
+<template>
+  <button @click="clickOpen">弹窗</button>
+  <ModalView ref="ModalViewRef">555</ModalView>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import ModalView from "../components/modalView/index.vue";
+const ModalViewRef = ref();
+const clickOpen = () => {
+  ModalViewRef.value.open();
+};
+</script>

package/antdv/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import "../components/index.css";
+// import VxeUIBase, { VxeUI } from "vxe-pc-ui";
+import "vxe-pc-ui/es/style.css";
+// import VxeUITable from "vxe-table";
+import "vxe-table/es/style.css";
+// import VxeUIPluginExportXLSX from "@vxe-ui/plugin-export-xlsx";
+// import ExcelJS from "exceljs";
+// VxeUI.use(VxeUIPluginExportXLSX, { ExcelJS });
+createApp(App).mount("#app");
+// createApp(App).use(VxeUIBase).use(VxeUITable).mount("#app");

package/antdv/src/qwe.vue

@@ -0,0 +1,7 @@
+<template>
+  <vxe-column field="name" title="Name">
+    <template #default="{ row }">
+      {{ row }}
+    </template>
+  </vxe-column>
+</template>

package/antdv/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "baseUrl": "./",
+    "paths": { "@/*": ["src/*"] },
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
+}

package/antdv/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/antdv/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/antdv/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import path from "path";
+import vue from "@vitejs/plugin-vue";
+import { createStyleImportPlugin } from "vite-plugin-style-import";
+export default defineConfig({
+  base: "./",
+  plugins: [
+    vue(),
+    createStyleImportPlugin({
+      libs: [
+        {
+          libraryName: "vxe-table",
+          esModule: true,
+          resolveStyle: (name) => {
+            // 自动转换样式导入路径
+            return `vxe-table/es/${name}/style.css`;
+          },
+        },
+      ],
+    }),
+  ],
+  server: { port: 5000 },
+  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
+});