@jzt-packages/components 1.0.0

package/src/JztLeftRightMode/types/index.ts

@@ -0,0 +1,457 @@
+import { JztFormGrid, JztQueryTable } from '@jzt-spd/components'
+
+import { type Props as BackTopProps } from '../../JztBackTop/index.vue'
+import { type TableConfigProps, type TopButtonProps } from '../../JztQueryTable/interface'
+
+export type Mode = 'list' | 'detail'
+/**
+ * 左侧布局组件实例
+ */
+export { type Expose as LeftLayoutInstance } from '../components/LeftLayout.vue'
+/**
+ * 右侧布局组件实例
+ */
+export { type Expose as RightLayoutInstance } from '../components/RightLayout.vue'
+/**
+ * 左右布局组件实例
+ */
+export { type Expose as LeftRightModeInstance } from '../index.vue'
+
+/**
+ * 左右布局组件 Props 定义
+ */
+export type Props = {
+  /**
+   * 加载中
+   */
+  loading?: boolean
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 当前tab
+   */
+  tabActive?: string
+  /**
+   * 当前模式
+   * @default list
+   */
+  mode?: Mode
+  /**
+   * 是否显示空状态
+   */
+  showEmpty?: boolean
+  /**
+   * 是否显示模式选择
+   */
+  showMode?: boolean
+  /**
+   * 是否显示头部
+   * @default true
+   */
+  showHeader?: boolean
+  /**
+   * 空状态文本
+   */
+  emptyText?: string
+  /**
+   * 折叠按钮文本
+   * @default 主单详细
+   */
+  collapseText?: string
+  /**
+   * 搜索表单属性
+   */
+  searchProps: SearchProps
+  /**
+   * 搜索数据
+   */
+  searchData?: any
+  /**
+   * 左侧布局属性
+   */
+  leftProps: LeftLayoutProps
+  /**
+   * 宽度
+   * @default 360
+   */
+  leftWidth?: number | string
+  /**
+   * 右侧布局属性
+   */
+  rightProps: RightLayoutProps
+  /**
+   * 右侧布局数据
+   */
+  rightData?: any
+}
+
+/**
+ * 左右布局组件 Emits 定义
+ */
+export interface Emits extends LeftLayoutEmits<any> {
+  /**
+   * 点击右侧卡片
+   */
+  (e: 'update:searchData', value: any): void
+  /** 更新右侧数据 */
+  (e: 'update:rightData', value: any): void
+  /** 更新加载中 */
+  (e: 'update:loading', value: boolean): void
+  /** 更新tabActive */
+  (e: 'update:tabActive', value: string): void
+  /** 左侧数据切换前 */
+  (e: 'nextPrev-before'): void
+  /** 左侧数据切换后 */
+  (e: 'nextPrev-after', { row, index }: { row: any; index: number }): void
+  /** 重置列表时触发 */
+  (e: 'rightReset'): void
+  /** 切换tab时触发 */
+  (e: 'tabChange', value: string): void
+  /** 切换模式时触发 */
+  (e: 'modeChange', value: Mode): void
+}
+
+/**
+ * 左右布局组件 SearchProps 定义
+ */
+export type SearchProps = {
+  /**
+   * 查询表单列
+   */
+  queryItems: Array<TableConfigProps['queryItems'] | any>
+  /**
+   * 搜索默认参数
+   */
+  initParams?: { [key: string]: any }
+  /**
+   * 搜索列数
+   */
+  searchCol?: number | Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number>
+  /**
+   * 是否允许折叠
+   */
+  allowCollapsed?: boolean
+  /**
+   * 查询表单默认是否折叠
+   */
+  collapsed?: boolean
+  /**
+   * 是否展示查询重构按钮
+   */
+  showQueryBtn?: boolean
+  /**
+   * 是否展示重置按钮
+   */
+  showResetBtn?: boolean
+  /**
+   * 是否自定义表单
+   */
+  customForm?: boolean
+  /**
+   * 按钮是否总是在最后（不跟随）
+   */
+  suffix?: boolean
+  /**
+   * 是否需要card样式，某下弹框不需要的话 设置false
+   */
+  isCard?: boolean
+  /**
+   * 搜索方法
+   */
+  search?: (params: any) => void
+  /**
+   * 重置方法
+   */
+  reset?: (params: any) => void
+} & Pick<TableProps, 'tabIsTop' | 'tabsList'>
+
+/**
+ * 左侧布局组件 Props 定义
+ */
+export type LeftLayoutProps = {
+  /**
+   * 加载动画实例
+   */
+  loading?: boolean
+  /**
+   * 数据请求接口
+   * @param params 查询参数（包含搜索参数、分页参数）
+   * @default 无默认值
+   */
+  requestApi?: (params: Record<string, any>) => Promise<{ result: Array<any | never>; totalCount: number } | any>
+  /**
+   * 行唯一标识字段
+   * @default id
+   */
+  rowKey?: string
+  /**
+   * 是否展示选择框
+   * @default false
+   */
+  showSelected?: boolean
+  /**
+   * 是否展示回到顶部按钮
+   * @default true
+   */
+  showBackTop?: boolean
+  /**
+   * 是否展示状态标签
+   * @default true
+   */
+  showStatus?: boolean
+  /**
+   * 回到顶部按钮配置
+   * @default {}
+   */
+  backTopProps?: BackTopProps
+  /**
+   * 卡片配置项
+   * @default { title: [], subTitle: [], content: [] }
+   */
+  cardProps?: {
+    /** 标题字段 */
+    title?: string
+    /** 内容配置数组 */
+    content: Array<{
+      /** 内容字段数组 */
+      props: string | Array<string>
+      /** 内容标签 */
+      label?: string
+      /** 宽度 */
+      width?: string
+      /** 标签颜色 */
+      labelColor?: string
+      /** 值颜色 */
+      valueColor?: (params: any) => void
+    }>
+  }
+  /**
+   * 防抖时间
+   * @default 100
+   */
+  debounceTime?: number
+  /**
+   * 状态字段名
+   */
+  statusProp?: string
+  /**
+   * 状态枚举
+   */
+  statusEnum?: StatusEnum
+  /**
+   * 操作按钮配置数组
+   */
+  headerButtonList?: Array<TopButtonProps>
+  /**
+   * 操作按钮配置数组
+   */
+  footerButtonList?: Array<TopButtonProps>
+  /**
+   * 表格列
+   */
+  columns?: Array<TableConfigProps['columns'] | any>
+}
+/**
+ * 左侧布局组件 Emits 定义
+ */
+export type LeftLayoutEmits<T> = {
+  /** 更新加载状态 */
+  (e: 'update:loading', value: boolean): void
+  /** 加载更多数据时触发 */
+  (e: 'load', value: T): void
+  /** 重置列表时触发 */
+  (e: 'reset', value: T): void
+  /** 查询列表时触发 */
+  (e: 'query', value: T): void
+  /** 卡片点击时触发 */
+  (e: 'cardClick', value: any): void
+  /** 卡片选择时触发 */
+  (e: 'cardSelected', value: any): void
+  /** 初始化时触发 */
+  (e: 'init', value: any): void
+}
+
+/**
+ * 颜色类型
+ */
+export type ColorType = 'primary' | 'danger' | 'success' | 'info' | 'warning'
+
+/**
+ * 状态枚举
+ */
+export type StatusEnum = Array<{
+  /** 状态值 */
+  value: number | string | any
+  /** 状态名称 */
+  name?: string | number | any
+  /** 状态名称 */
+  label?: string | number | any
+  /** 状态类型 */
+  type: ColorType & any
+}>
+
+/**
+ * 表格配置属性
+ */
+export type TableProps = InstanceType<typeof JztQueryTable>['$props'] & Partial<TotalData>
+
+/**
+ * 合计数据
+ */
+export type TotalData = {
+  /** 数量 */
+  count: number | string
+  /** 金额 */
+  amount: number | string
+}
+
+/**
+ * 合计配置数组（按数组顺序显示）
+ */
+export type TotalProps = Array<{
+  /** 类型：数量/金额 */
+  type: 'count' | 'amount'
+  /** 是否显示 */
+  show?: boolean
+  /** 标签文字 */
+  label?: string
+  /** 值字段名 */
+  valueKey?: string
+  /** 单位 */
+  unit?: string
+  /** 颜色 */
+  color?: string
+}>
+
+/**
+ * 右侧布局组件 Props 定义
+ */
+export type RightLayoutProps = {
+  /**
+   * 加载动画实例
+   */
+  loading?: boolean
+  /**
+   * 组件唯一标识字段
+   * @default id
+   */
+  rowKey?: string
+  /**
+   * 右侧布局数据
+   */
+  modelValue?: any
+  /**
+   * 是否同步背景颜色
+   * @default false
+   */
+  showSyncBg?: boolean
+  /**
+   * 是否展示背景颜色
+   * @default true
+   */
+  showBgColor?: boolean
+  /**
+   * 是否展示空状态
+   * @default false
+   */
+  showEmpty?: boolean
+  /**
+   * 是否展示折叠模块
+   * @default true
+   */
+  showCollapse?: boolean
+  /**
+   * 是否展示头部模块
+   * @default true
+   */
+  showHeader?: boolean
+  /**
+   * 是否展示描述模块
+   * @default true
+   */
+  showDescriptions?: boolean
+  /**
+   * 是否展示状态栏
+   * @default false
+   */
+  showStatus?: boolean
+  /**
+   * 是否展示驳回原因
+   * @default false
+   */
+  showReason?: boolean
+  /**
+   * 是否展示底部栏
+   * @default true
+   */
+  showFooter?: boolean
+  /**
+   * 是否展示校验提示
+   * @default true
+   */
+  showValidate?: boolean
+  /**
+   * 是否展示上/下一个按钮
+   * @default false
+   */
+  showPrevNext?: boolean
+  /**
+   * 是否展示滚动动画
+   * @default true
+   */
+  showScrollAnimation?: boolean
+  /**
+   * 表格配置属性
+   */
+  tableProps?: TableProps & {
+    /** 表格标题 */
+    title?: string
+    /** 合计配置数组（按数组顺序显示） */
+    totalProps?: TotalProps
+    /** 是否隐藏合计栏 */
+    isHideTotal?: boolean
+  }
+  /**
+   * 头部配置属性
+   * @default 无默认值
+   */
+  headerProps?: {
+    /** 头部背景色类型 */
+    bgType?: ColorType & any
+    /** 头部标题 */
+    titleProp?: string
+    /** 子标题 */
+    subTitleProp?: string
+    /** 状态标签值 */
+    statusProp?: string
+    /** 状态标签类型 */
+    statusEnum?: StatusEnum
+    /** 驳回原因字段名 */
+    reasonProp?: string
+    /** 详情查询接口 */
+    requestApi?: (params?: any) => Promise<{ result?: Record<string, unknown> }>
+  }
+  /** 描述配置列 */
+  descriptionsProps?: InstanceType<typeof JztFormGrid>['$props']
+  /**
+   * 滚动超限高度（展示展开按钮）
+   * @default 400
+   */
+  overHeight?: number
+  /** 操作按钮配置数组 */
+  buttonList?: Array<TopButtonProps>
+}
+
+/**
+ * 右侧布局组件 Emits 定义
+ */
+export type RightLayoutEmits = {
+  /** 详情置顶回调 */
+  (e: 'update:modelValue', value: any): void
+  /** 加载动画实例回调 */
+  (e: 'update:loading', value: boolean): void
+  /** 重置列表时触发 */
+  (e: 'rightReset'): void
+}

package/src/JztLoading/fullScreen.ts

@@ -0,0 +1,45 @@
+import { ElLoading } from 'element-plus'
+
+/* 全局请求 loading */
+let loadingInstance: ReturnType<typeof ElLoading.service>
+
+/**
+ * @description 开启 Loading
+ * */
+const startLoading = () => {
+  loadingInstance = ElLoading.service({
+    fullscreen: true,
+    lock: true,
+    text: 'Loading',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+}
+
+/**
+ * @description 结束 Loading
+ * */
+const endLoading = () => {
+  loadingInstance.close()
+}
+
+/**
+ * @description 显示全屏加载
+ * */
+let needLoadingRequestCount = 0
+export const showFullScreenLoading = () => {
+  if (needLoadingRequestCount === 0) {
+    startLoading()
+  }
+  needLoadingRequestCount++
+}
+
+/**
+ * @description 隐藏全屏加载
+ * */
+export const tryHideFullScreenLoading = () => {
+  if (needLoadingRequestCount <= 0) return
+  needLoadingRequestCount--
+  if (needLoadingRequestCount === 0) {
+    endLoading()
+  }
+}

package/src/JztLoading/index.scss

@@ -0,0 +1,67 @@
+.loading-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .loading-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 98px;
+  }
+}
+.dot {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+  transform: rotate(45deg);
+  animation: ant-rotate 1.2s infinite linear;
+}
+.dot i {
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 14px;
+  background-color: var(--el-color-primary);
+  border-radius: 100%;
+  opacity: 0.3;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  animation: ant-spin-move 1s infinite linear alternate;
+}
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  animation-delay: 0.4s;
+}
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  animation-delay: 1.2s;
+}
+
+@keyframes ant-rotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes ant-spin-move {
+  to {
+    opacity: 1;
+  }
+}

package/src/JztLoading/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="loading-box">
+    <div class="loading-wrap">
+      <span class="dot dot-spin">
+        <i></i>
+        <i></i>
+        <i></i>
+        <i></i>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Loading"></script>
+
+<style scoped lang="scss">
+@use './index';
+</style>

package/src/JztLogin/components/LoginFooter.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="login-footer">
+    Copyright © 2022 九州通医疗信息科技（武汉）有限公司｜授权类型:开发授权｜授权项目:数据采集平台
+  </div>
+</template>
+<style scoped lang="scss">
+.login-footer {
+  position: absolute;
+  bottom: 5%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  font-size: 14px;
+  color: rgba(153, 153, 153, 1);
+  text-align: center;
+}
+</style>

package/src/JztLogin/components/LoginForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
+    <el-form-item prop="phone">
+      <el-input v-model="loginForm.phone" placeholder="请输入手机号或用户名" />
+    </el-form-item>
+    <el-form-item class="login-form-password" prop="password">
+      <el-input
+        v-model="loginForm.password"
+        type="password"
+        placeholder="请输入密码"
+        show-password
+        autocomplete="new-password"
+      />
+    </el-form-item>
+    <el-form-item v-if="loginMode !== '0'" class="login-form-password" prop="code">
+      <el-input v-model="loginForm.code" placeholder="请输入验证码" maxlength="6">
+        <template #append>
+          <div v-if="loginMode === '1'" class="SmsCode" @click="getSmsCode">
+            <el-button type="primary" :loading="sendLoading" :disabled="loading" :btnDisabled="sendDisabled">
+              {{ second ? `${second}秒后重新获取` : '发送验证码' }}
+            </el-button>
+          </div>
+          <img
+            v-else-if="loginMode === '2'"
+            :src="`data:image/png;base64,${graphicCodeUrl}`"
+            class="login-graphic-img"
+            @click="getCaptchaImg"
+          />
+        </template>
+      </el-input>
+    </el-form-item>
+    <div>常用密码： JZTeya0 JZT600998@</div>
+    <el-form-item>
+      <el-checkbox v-model="savePassword" label="记住密码一个月" style="font-size: 16px; margin-top: 20px" />
+    </el-form-item>
+  </el-form>
+  <div class="login-btn">
+    <el-button size="large" :loading="loading" @click="handleLogin()">立即登录</el-button>
+  </div>
+  <div class="err-msg">{{ errMsg }}</div>
+</template>
+
+<script setup lang="ts">
+import type { ElForm } from 'element-plus'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useEvents, useParams, loginServer } from '../hooks/useLogin'
+const {
+  loginRules,
+  loginForm,
+  loginMode,
+  sendLoading,
+  second,
+  graphicCodeUrl,
+  sendDisabled,
+  savePassword,
+  loading,
+  errMsg
+} = useParams()
+const { getLoginSetting, getSmsCode, getCaptchaImg } = useEvents()
+
+export interface LoginProps {
+  // loginApi: (params: any) => Promise<any>; // 请求表格数据的 api ==> 必传
+  loginCallBack?: (params: any) => Promise<any>
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<LoginProps>(), {})
+
+const loginFormRef = ref<InstanceType<typeof ElForm>>()
+// const errMsg = ref<string>("");
+// login
+const handleLogin = () => {
+  // errMsg.value = "";
+  if (!loginFormRef.value) return
+  loginFormRef.value.validate(async valid => {
+    if (!valid) return
+    loginServer(props.loginCallBack)
+  })
+}
+
+onMounted(() => {
+  getLoginSetting()
+  // 监听 enter 事件（调用登录）
+  document.onkeydown = (e: KeyboardEvent) => {
+    if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
+      if (loading.value) return
+      handleLogin()
+    }
+  }
+})
+
+onBeforeUnmount(() => {
+  document.onkeydown = null
+})
+</script>
+
+<style scoped lang="scss">
+@use '../index';
+</style>