zhl-methods 2.0.0 → 2.0.2

package/components/antv/TableView/TableAutoView.vue

@@ -0,0 +1,105 @@
+<template>
+  <TableView
+    :loading="state.loading"
+    :dataSource="state.dataSource"
+    :pagination="paginationConfig"
+    height="calc(100vh - 371px)"
+  >
+    <template v-for="(_, slot) in Slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </TableView>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, reactive, useSlots } from "vue";
+const Slots = useSlots();
+import TableView from "./index.vue";
+const props = defineProps({
+  //Promise 请求方法
+  api: { type: Function, default: () => false },
+  //请求参数
+  apiParams: { type: Object, default: () => ({}) },
+  //是否开启分页
+  isPage: { type: Boolean, default: () => true },
+  //是否进入页面自动请求
+  autoRequest: { type: Boolean, default: () => true },
+  //设置自定义参数
+  checkParams: { type: Function },
+  //设置自定义返回值
+  checkReturnValue: { type: Function },
+});
+
+const state = reactive({
+  loading: false,
+  pagination: {
+    current: 1,
+    pageSize: 15,
+    total: 0,
+  },
+  dataSource: [],
+});
+const paginationConfig = computed(() => {
+  if (props.isPage) {
+    return {
+      ...state.pagination,
+      onChange: (page: number, limit: number) => pageChange(page, limit),
+    };
+  }
+  return false;
+});
+const pageChange = (page: number, limit: number) => {
+  state.pagination.current = page;
+  state.pagination.pageSize = limit;
+  getData();
+};
+const getData = async () => {
+  let params = { ...props.apiParams };
+
+  if (props.isPage) {
+    params = { ...props.apiParams, ...state.pagination };
+  }
+  if (props.checkParams) {
+    params = props.checkParams(params);
+  }
+  try {
+    state.loading = true;
+    let res = await props.api(params);
+    state.loading = false;
+    if (res.code == 200) {
+      let resData = res.data;
+      console.log(resData);
+      if (props.checkReturnValue) {
+        resData = props.checkReturnValue(res.data);
+      }
+      if (props.isPage) {
+        state.dataSource = resData.data;
+        state.pagination.total = resData.total;
+      } else {
+        state.dataSource = resData;
+      }
+    }
+  } catch (error) {
+    state.loading = false;
+    console.log(error);
+  }
+};
+const refresh = () => {
+  pageChange(1, 15);
+};
+const clearData = () => {
+  state.dataSource = [];
+  state.pagination.current = 1;
+  state.pagination.pageSize = 15;
+  state.pagination.total = 0;
+};
+onMounted(() => {
+  if (props.autoRequest && props.api) {
+    getData();
+  }
+});
+defineExpose({
+  refresh,
+  clearData,
+  dataSource: computed(() => state.dataSource),
+});
+</script>

package/components/antv/TableView/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <a-table
+    :scroll="{
+      scrollToFirstRowOnChange: true,
+      y: tableHeight,
+    }"
+    :pagination="
+      props.pagination
+        ? {
+            ...pagination,
+            showTotal: (total: number) => `共 ${total} 条`,
+            pageSizeOptions: ['15', '30', '50', '100', '300', '500'],
+          }
+        : false
+    "
+  >
+    <template v-for="(_, slot) in Slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </a-table>
+</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+const Slots = useSlots();
+const props = defineProps({
+  //表格高度 只能为px vh calc()
+  height: {
+    type: String,
+  },
+  pagination: {
+    type: [Object, Boolean],
+    default: () => false,
+  },
+});
+// 如果传高度了，就用传的高度
+// 如果没传高度，考虑带分页和不带分页两种情况
+const tableHeight = computed(() => {
+  if (props.height) {
+    return props.height;
+  } else {
+    if (props.pagination) {
+      return "calc(100vh - 141px)";
+    } else {
+      return "calc(100vh - 77px)";
+    }
+  }
+});
+</script>

package/components/antv/UploadImage/index.vue

@@ -0,0 +1,160 @@
+<!--
+  图片上传  单个  多个
+  @author zhl
+  @date 2026/03/11
+-->
+<template>
+  <a-upload
+    :disabled="props.disabled"
+    list-type="picture-card"
+    :file-list="showUploadList"
+    :action="requestUrl"
+    :accept="props.fileType"
+    :headers="props.headers"
+    :data="props.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 emits = defineEmits([
+  "update:modelValue",
+  "onSuccess",
+  "getImgUrl",
+  "beforeUpload",
+]);
+/**
+ * 传递参数
+ * @params modelValue 绑定值  单个 或 多个
+ * @params disabled 是否禁用
+ * @params requestUrl 请求地址
+ * @params headers 头部参数
+ * @params data 更多参数
+ * @params fileType 选择图片类型  默认所有格式图片
+ */
+const props = defineProps({
+  modelValue: {},
+  disabled: {
+    type: Boolean,
+  },
+  imgLimit: {
+    type: Number,
+    default: () => 1,
+  },
+  data: {
+    type: Object,
+  },
+  fileType: {
+    type: String,
+    default: () => "image/*",
+  },
+  headers: { type: Object },
+  requestUrl: {
+    type: String,
+  },
+});
+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/components/index.css

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

package/components/vxe/ModalView/index.vue

@@ -0,0 +1,75 @@
+<!--
+  弹窗
+  @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"]);
+/**
+ * @params title 弹窗显示标题
+ * @params width 弹窗宽度 字符串   100px 100 100% 50vw calc(50vw - 50px)
+ * @params height 弹窗宽度 字符串   100px 100 100% 50vh calc(50vh - 50px)
+ * @params maskClosable 是否允许点击遮罩层关闭窗口
+ * @params escClosable 是否允许按 Esc 键关闭窗口
+ * @params 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/package.json

@@ -1,9 +1,8 @@
 {
   "name": "zhl-methods",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "license": "ISC",
   "dependencies": {
-    "dayjs": "^1.11.15",
-    "vue": "^3.5.12"
+    "dayjs": "^1.11.15"
   }
 }