gy-ui-plus 1.0.0

package/dist/gy-ui-plus.es.js

@@ -0,0 +1,41 @@
+import { defineComponent as m, ref as a, resolveComponent as u, createBlock as p, openBlock as f, mergeProps as d, withCtx as _, renderSlot as k } from "vue";
+const C = {
+  name: "JButton"
+}, w = /* @__PURE__ */ m({
+  ...C,
+  props: {
+    time: {
+      type: Number,
+      default: 1e3
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const c = e, l = t, o = a(0), r = () => {
+      (/* @__PURE__ */ new Date()).getTime() - o.value > c.time && l("click"), o.value = (/* @__PURE__ */ new Date()).getTime();
+    };
+    return (n, b) => {
+      const i = u("el-button");
+      return f(), p(i, d(n.$attrs, { onClick: r }), {
+        default: _(() => [
+          k(n.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+}), s = {
+  JButton: w
+}, B = (e) => {
+  for (const t in s)
+    e.component(t, s[t]);
+}, T = (e, t) => {
+  B(e);
+}, h = {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install: T
+};
+export {
+  w as JButton,
+  h as default
+};

package/dist/gy-ui-plus.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t["gy-ui-plus"]={},t.Vue))})(this,(function(t,e){"use strict";const u={name:"JButton"},s=e.defineComponent({...u,props:{time:{type:Number,default:1e3}},emits:["click"],setup(n,{emit:o}){const f=n,m=o,l=e.ref(0),p=()=>{new Date().getTime()-l.value>f.time&&m("click"),l.value=new Date().getTime()};return(i,k)=>{const a=e.resolveComponent("el-button");return e.openBlock(),e.createBlock(a,e.mergeProps(i.$attrs,{onClick:p}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},16)}}}),c={JButton:s},r=n=>{for(const o in c)n.component(o,c[o])},d={install:(n,o)=>{r(n)}};t.JButton=s,t.default=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "gy-ui-plus",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "dist/gy-ui-plus.umd.js",
+  "module": "dist/gy-ui-plus.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/gy-ui-plus.es.js",
+      "require": "./dist/gy-ui-plus.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "packages"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "lib": "vite build",
+    "deploy": "deploy.sh",
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+    "lint:eslint": "eslint . --fix --cache",
+    "lint": "run-s lint:*",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "autofit.js": "^3.2.8",
+    "axios": "^1.13.2",
+    "element-plus": "^2.13.1",
+    "pinia": "^3.0.4",
+    "postcss-px-to-viewport": "^1.1.1",
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-dts": "^1.7.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "@prettier/plugin-oxc": "^0.0.5",
+    "@tsconfig/node24": "^24.0.3",
+    "@types/node": "^24.10.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-oxlint": "~1.29.0",
+    "eslint-plugin-vue": "~10.5.1",
+    "jiti": "^2.6.1",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.29.0",
+    "prettier": "3.6.2",
+    "sass": "^1.97.1",
+    "typescript": "~5.9.0",
+    "vite": "^7.2.4",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vue-tsc": "^3.1.5"
+  }
+}

package/packages/index.ts

@@ -0,0 +1,33 @@
+import type { Component, App } from 'vue'
+// import ElementPlus from 'element-plus'
+// import 'element-plus/dist/index.css'
+// import locale from 'element-plus/lib/locale/lang/zh-cn' // 因element-plus默认是英文，我们指定一下默认中文
+import JButton from './j-button/src/index.vue'
+
+// 存储组件列表
+const components: {
+  [propName: string]: Component
+} = {
+  JButton,
+}
+// 插件声明：声明所有插件
+// 插件注册：在 Vue 项目的入口文件中，通过 ( app.use(插件) ) 进行注册
+const installComponents: any = (app: App) => {
+  for (const key in components) {
+    app.component(key, components[key])
+  }
+}
+// vue插件
+// - install：每个插件都有一个 install 方法
+// - 参数：是通过 Vue.createApp() 创建的 app 实例
+const install: any = (app: any, router?: any) => {
+  // !router && installRouter(app);
+  installComponents(app)
+}
+
+// 按需引入
+export { JButton }
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+}

package/packages/j-button/index.ts

@@ -0,0 +1,5 @@
+import Button from './src/index.vue'
+import { withInstall } from '../withInstall'
+
+const JButton = withInstall(Button)
+export default JButton

package/packages/j-button/src/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-button v-bind="$attrs" @click="handleClick">
+    <slot />
+  </el-button>
+</template>
+<script lang="ts">
+export default {
+  name: 'JButton',
+}
+</script>
+<script setup lang="ts">
+import { ref } from 'vue'
+const props = defineProps({
+  time: {
+    type: Number,
+    default: 1000,
+  },
+})
+// 抛出事件
+const emits = defineEmits(['click'])
+const record = ref(0)
+const handleClick = () => {
+  const newTime = new Date()
+  if (newTime.getTime() - record.value > props.time) {
+    emits('click')
+  }
+  record.value = new Date().getTime()
+}
+</script>

package/packages/j-table/index.ts

@@ -0,0 +1,8 @@
+import Table from './src/index.vue'
+import { withInstall } from '../withInstall'
+
+export * from './src/tableProps'
+export * from './src/useExpose'
+
+const JButton = withInstall(Table)
+export default JButton

package/packages/j-table/src/ColumnSet.vue

@@ -0,0 +1,170 @@
+<template>
+  <el-dropdown trigger="click" popper-class="column_set">
+    <el-button v-bind="columnBind">{{ columnBind.btnTxt || "列设置" }}</el-button>
+    <template #dropdown>
+      <div class="title" v-if="columnBind.isShowTitle">{{ columnBind.title || "列设置" }}</div>
+      <el-dropdown-menu>
+        <el-dropdown-item :divided="columnBind.isShowTitle">
+          <el-tree
+            ref="treeRef"
+            class="t_table_column_setting_dropdown"
+            :data="state.columnSet"
+            node-key="prop"
+            :props="{ label: 'label', children: 'children', disabled: 'checkBoxDisabled' }"
+            show-checkbox
+            draggable
+            default-expand-all
+            check-strictly
+            :allow-drag="allowDrag"
+            :allow-drop="allowDrop"
+            :default-checked-keys="defaultCheckedKeys"
+            @check="onTreeCheck"
+            @node-drop="handleDrop"
+          >
+          </el-tree>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { watch, onMounted, reactive, computed, useAttrs, ref } from "vue"
+defineOptions({
+  name: "ColumnSet"
+})
+export interface Column {
+  label: string
+  prop: string
+  checkBoxDisabled?: boolean
+  hidden?: boolean
+}
+
+export interface ColumnSetProps {
+  columns: Column[]
+  title?: string
+  name?: string
+  columnSetBind?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<ColumnSetProps>(), {
+  columns: () => [],
+  title: "",
+  name: "",
+  columnSetBind: () => ({})
+})
+const treeRef = ref()
+const $attrs: any = useAttrs()
+const columnBind = computed(() => {
+  const columnSetBind = { btnTxt: "列设置", title: "列设置", ...props.columnSetBind }
+  return { size: "default", icon: "Setting", isShowTitle: true, ...$attrs, ...columnSetBind }
+})
+
+const emits = defineEmits(["columnSetting"])
+const state = reactive({
+  columnSet: [] as Column[]
+})
+const defaultCheckedKeys = ref<string[]>([])
+
+const getColumnSetCache = () => {
+  let value =
+    localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`) || "[]"
+  let columnOption = initColumnSet()
+  let valueArr = (JSON.parse(value) as any[]) || []
+  columnOption.forEach(item => {
+    let findEle = valueArr.find(
+      (ele: { label: any; prop: any }) => ele.label === item.label && ele.prop === item.prop
+    )
+    item.hidden = findEle ? findEle.hidden : false
+  })
+  value = JSON.stringify(valueArr.length ? valueArr : columnOption)
+  return value ? JSON.parse(value) : initColumnSet()
+}
+const initColumnSet = () => {
+  return props.columns.map((col: any) => ({
+    label: col.label,
+    prop: col.prop,
+    checkBoxDisabled: false,
+    hidden: false
+  }))
+}
+
+onMounted(() => {
+  state.columnSet = getColumnSetCache()
+  defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
+  emits("columnSetting", state.columnSet)
+})
+
+watch(
+  () => state.columnSet,
+  val => {
+    emits("columnSetting", val)
+    localStorage.setItem(
+      `t-ui-plus:TTable.columnSet-${props.name || props.title}`,
+      JSON.stringify(val)
+    )
+    defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
+  },
+  { deep: true }
+)
+
+const reSetColumnSet = () => {
+  let value: any = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`)
+  state.columnSet = JSON.parse(value)
+  defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
+  emits("columnSetting", state.columnSet)
+}
+
+const onTreeCheck = () => {
+  // 获取最新勾选的key
+  const checkedKeys = treeRef.value?.getCheckedKeys() || []
+  state.columnSet.forEach(col => {
+    col.hidden = !checkedKeys.includes(col.prop)
+  })
+  // 至少保留一个可见列
+  const visibleCols = state.columnSet.filter(col => !col.hidden)
+  if (visibleCols.length < 2) {
+    visibleCols.forEach(col => (col.checkBoxDisabled = true))
+  } else {
+    state.columnSet.forEach(col => (col.checkBoxDisabled = false))
+  }
+}
+// 限制拖拽结点
+const allowDrag = () => {
+  return true
+}
+const allowDrop = (draggingNode: any, dropNode: any, type: any) => {
+  // 只允许同级节点之间的拖拽
+  if (draggingNode.level !== dropNode.level) {
+    return false
+  }
+  // 如果是同级节点，还需要判断是否是前后节点的拖拽
+  if (type !== "prev" && type !== "next") {
+    return false
+  }
+  return true
+}
+// 拖拽排序
+const handleDrop = (draggingNode: any, dropNode: any, dropType: string, ev: Event) => {
+  // 只允许拖拽到同级（禁止拖为子级）
+  if (dropType === "inner") {
+    ev.preventDefault()
+    return
+  }
+  const draggingIndex = state.columnSet.findIndex(col => col.prop === draggingNode.data.prop)
+  const dropIndex = state.columnSet.findIndex(col => col.prop === dropNode.data.prop)
+  if (draggingIndex === -1 || dropIndex === -1) return
+  const item = state.columnSet.splice(draggingIndex, 1)[0]
+  if (dropType === "before") {
+    // 如果拖拽项在目标项后面，直接插入；如果在前面，dropIndex要减1
+    const insertIndex = draggingIndex < dropIndex ? dropIndex - 1 : dropIndex
+    state.columnSet.splice(insertIndex, 0, item)
+  } else if (dropType === "after") {
+    state.columnSet.splice(dropIndex + 1, 0, item)
+  }
+}
+
+defineExpose({
+  reSetColumnSet
+})
+</script>

package/packages/j-table/src/TTableColumn.vue

@@ -0,0 +1,140 @@
+<template>
+	<el-table-column
+		v-if="
+			typeof item.isShowCol == 'function'
+				? item.isShowCol(item)
+				: !item.isShowCol
+		"
+		:prop="item.prop"
+		:label="item.label"
+		:type="item.type"
+		:align="item.align || align"
+		:min-width="item['min-width'] || item.minWidth"
+		:width="item.width"
+		:fixed="item.fixed"
+	>
+		<template #header v-if="item.renderHeader">
+			<render-header :column="item" :render="item.renderHeader" />
+		</template>
+		<template v-for="(val, index) of item.children">
+			<t-table-column
+				v-if="val.children"
+				:key="index"
+				:item="val"
+				v-bind="$attrs"
+			>
+				<template v-for="(_index, name) in slots" v-slot:[name]="data">
+					<slot :name="name" v-bind="data"></slot>
+				</template>
+			</t-table-column>
+			<el-table-column
+				v-else
+				:key="val.prop"
+				:prop="val.prop"
+				:label="val.label"
+				:min-width="val['min-width'] || val.minWidth"
+				:width="val.width"
+				:sortable="val.sortable || val.sort || sortable"
+				:align="val.align || align"
+				:fixed="val.fixed"
+				:formatter="val.formatter"
+				v-if="
+					typeof val.isShowCol == 'function'
+						? val.isShowCol(val)
+						: !val.isShowCol
+				"
+				v-bind="{
+					'show-overflow-tooltip': true,
+					...val.bind,
+					...$attrs,
+				}"
+			>
+				<template #header v-if="val.renderHeader">
+					<render-header :column="val" :render="val.renderHeader" />
+				</template>
+				<template #default="scope">
+					<!-- render渲染 -->
+					<template v-if="val.render">
+						<render-col
+							:column="val"
+							:row="scope.row"
+							:render="val.render"
+							:index="scope.$index"
+						/>
+					</template>
+					<!-- 自定义插槽 -->
+					<template v-if="val.slotNameMerge">
+						<slot :name="val.slotNameMerge" :scope="scope"></slot>
+					</template>
+					<!-- 单个单元格编辑 -->
+					<template v-if="val.canEdit">
+						<single-edit-cell
+							:isShowRules="false"
+							:configEdit="val.configEdit"
+							v-model="scope.row[val.prop]"
+							:prop="val.prop"
+							:scope="scope"
+							@handleEvent="
+								({ type, val }) =>
+									emits(
+										'handleEvent',
+										type,
+										val,
+										scope.$index
+									)
+							"
+							v-bind="$attrs"
+						>
+							<template
+								v-for="(_index, name) in slots"
+								v-slot:[name]="data"
+							>
+								<slot :name="name" v-bind="data"></slot>
+							</template>
+						</single-edit-cell>
+					</template>
+					<div
+						v-if="
+							!val.render &&
+							!val.slotNameMerge &&
+							!val.canEdit &&
+							!val.formatter
+						"
+					>
+						{{ scope.row[val.prop] }}
+					</div>
+				</template>
+			</el-table-column>
+		</template>
+	</el-table-column>
+</template>
+
+<script setup lang="ts">
+import SingleEditCell from "./singleEditCell.vue";
+import RenderCol from "./renderCol.vue";
+import RenderHeader from "./renderHeader.vue";
+import { useSlots } from "vue";
+defineOptions({
+	name: "TTableColumn",
+});
+defineProps({
+	item: {
+		type: Object,
+		default: () => {
+			return {};
+		},
+		required: true,
+	},
+	align: {
+		type: String,
+		default: "center",
+	},
+	sortable: {
+		type: [Boolean, String],
+	},
+});
+// 抛出事件
+const emits = defineEmits(["handleEvent"]);
+// 获取所有插槽
+const slots = useSlots();
+</script>