@jzt-packages/components 1.0.0

package/src/JztQueryTable/interface/index.ts

@@ -0,0 +1,185 @@
+import { VNode, ComponentPublicInstance, Ref } from 'vue'
+
+import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
+import { ProTableProps } from '../index.vue'
+import QueryTable from '../index.vue'
+
+import { SearchProps, QueryItemsProps } from '../../JztSearchForm/interface/index'
+
+export type { SearchProps, QueryItemsProps } from '../../JztSearchForm/interface/index'
+
+export interface EnumProps {
+  label?: string // 选项框显示的文字
+  value?: string | number | boolean | any[] // 选项框值
+  // strValue?: string // 选项框值
+  // boolValue?: boolean // 选项框值
+  // strBoolValue?: string // 选项框值
+  disabled?: boolean // 是否禁用此选项
+  tagType?: string // 当 tag 为 true 时，此选择会指定 tag 显示类型
+  children?: EnumProps[] // 为树形选择时，可以通过 children 属性指定子选项
+  [key: string]: any
+}
+
+export type TypeProps = 'index' | 'selection' | 'radio' | 'expand' | 'sort'
+
+export type FieldNamesProps = {
+  label: string
+  value: string
+  children?: string
+}
+
+export type RenderScope<T> = {
+  row: T
+  $index: number
+  column: TableColumnCtx<T>
+  [key: string]: any
+}
+
+export type HeaderRenderScope<T> = {
+  $index: number
+  column: TableColumnCtx<T>
+  [key: string]: any
+}
+
+export interface ColumnProps<T = Record<string, any>>
+  extends Partial<Omit<TableColumnCtx<T>, 'type' | 'children' | 'renderCell' | 'renderHeader' | 'formatter'>> {
+  type?: TypeProps // 列类型
+  tag?: boolean | Ref<boolean> // 是否是标签展示
+  isShow?: boolean | Ref<boolean> // 是否显示在表格当中
+  hidden?: boolean | Ref<boolean> // 不允许设置（仅用于列配置的接口）
+  isSetShow?: boolean | Ref<boolean> // 不允许设置（仅用于列配置的接口）
+  // isHide?: boolean | Ref<boolean> // 是否隐藏在表格当中
+  isSetting?: boolean | Ref<boolean> // 是否在 ColSetting 中可配置
+  search?: SearchProps | undefined // 搜索项配置
+  enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>) // 枚举字典
+  isFilterEnum?: boolean | Ref<boolean> // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+  fieldNames?: FieldNamesProps // 指定 label && value && children 的 key 值
+  headerRender?: (scope: HeaderRenderScope<T>) => VNode // 自定义表头内容渲染（tsx语法）
+  render?: (scope: RenderScope<T>) => VNode | string // 自定义单元格内容渲染（tsx语法）
+  _children?: ColumnProps<T>[] // 多级表头
+  btnLList?: TopButtonProps[] // 操作列
+  formatter?: (scope: RenderScope<T>) => VNode | string | number // 单元格格式化数据
+  isUnderline?: boolean | Ref<boolean> // 是否需要下划线link样式
+  fun?: (scope: any) => any /** 点击函数 */
+  decimal?: number | 'numDecimal'| 'countDecimal' // 保留几位小数  numDecimal是金额配置，countDecimal是数量配置 读取配置
+  isPerMille?: boolean | Ref<boolean> // 是否使用千分号分割
+  selectable?: (row: any, index: number) => boolean /** 仅多选、单选时有效，某行是否可选择 */
+  /** 禁用函数 */
+  // disabledFn?: Function // 多选  单选 时可使用禁用
+}
+
+export type ProTableInstance = Omit<
+  InstanceType<typeof QueryTable>,
+  keyof ComponentPublicInstance | keyof ProTableProps
+>
+
+export interface TopButtonProps {
+  id?: string
+  /** 按钮文字 */
+  text?: string
+  /** 按钮类型 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' (deprecated) */
+  type?: '' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+  /** 权限字符*/
+  hasPerm?: string
+  /** 是否loading，默认 `false` */
+  loading?: boolean
+  icon?: string
+  /** 是否为朴素按钮，默认 `false` */
+  plain?: boolean
+  /** 是否显示文字按钮背景颜色，默认 `false` */
+  bg?: boolean
+  /** 是否为链接按钮，默认 `false` */
+  link?: boolean
+  /** 是否为圆角按钮，默认 `false` */
+  round?: boolean
+  /** 是否为圆形按钮，默认 `false` */
+  circle?: boolean
+  /** 点击函数 */
+  fun?: Function
+  /** 隐藏函数 */
+  hideFun?: Function
+  render?: any
+  /** 禁用 */
+  disabled?: boolean
+  /** 禁用函数 */
+  disabledFn?: Function
+  // [key?: string]: any;
+  // 表格操作--插槽
+  slotName?: string
+  //  二次提示内容
+  secondConfirm?: string
+  // 按钮显示红点或者数字
+  badgeProps?: {
+    show?: boolean // 是否展示Badge
+    isDot?: boolean // 是否显示小圆点
+    value?: string | number // 如果显示数字，则设置此属性
+  }
+}
+export interface ColumnConfigProps {
+  layout: string | ['selection', 'radio', 'index', 'expand', 'sort'] // (selection, radio, index, expand, sort) 逗号分隔 组件布局
+  selectionProps?: ColumnProps
+  radioProps?: ColumnProps
+  indexProps?: ColumnProps
+  expandProps?: ColumnProps
+  sortProps?: ColumnProps
+}
+export interface TableConfigProps<Q = any, C = Record<string, any>> {
+  queryItems?: QueryItemsProps<Q>[]
+  columns: ColumnProps<C>[]
+  topList?: TopButtonProps[]
+}
+export interface TabsProps{
+  label: string
+  value: string | number
+  isFold?:boolean // 是否超过99 显示99+  
+}
+
+export interface tabsListProps {
+  label: string
+  value: string | number
+
+  tabCount?: number | string
+  gridId?: string
+  leftRender?: () => VNode | string
+  rightRender?: () => VNode | string
+}
+
+// 分页
+export interface PageableProps {
+  pageIndex: number
+  pageSize: number
+  total?: number
+}
+
+export namespace Table {
+  export interface Pageable {
+    pageIndex: number
+    pageSize: number
+    total: number
+  }
+  export interface StateProps {
+    tableData: any[]
+    pageable: Pageable
+    searchParam: {
+      [key: string]: any
+    }
+    searchInitParam: {
+      [key: string]: any
+    }
+    totalParam: {
+      [key: string]: any
+    }
+    icon?: {
+      [key: string]: any
+    }
+    requestAuto: boolean
+    // initParams?: {
+    //   [key: string]: any
+    // }
+  }
+}
+export interface GridParams {
+  gridId: string
+  url: string
+}
+

package/src/JztRegionSelect/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="regionSelect-range">
+    <el-select
+      v-model="searchParam[field1]"
+      filterable
+      clearable
+      placeholder="省"
+      style="flex: 1; margin-right: 5px"
+      @change="changeProvince"
+    >
+      <el-option v-for="item in provinceList" :key="item" :label="item" :value="item" />
+    </el-select>
+    <el-select
+      v-model="searchParam[field2]"
+      filterable
+      clearable
+      placeholder="市"
+      style="flex: 1; margin-right: 5px"
+      @change="changeCity"
+    >
+      <el-option v-for="item in cityList" :key="item" :label="item" :value="item" />
+    </el-select>
+    <el-select v-model="searchParam[field3]" filterable clearable placeholder="区" style="flex: 1">
+      <el-option v-for="item in areaList" :key="item" :label="item" :value="item" />
+    </el-select>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps, onMounted, ref, watch, watchEffect } from 'vue'
+import { getProvince, getCity, getArea } from '@jzt-spd/utils/commonApi'
+const props = defineProps({
+  queryItem: {
+    type: Object,
+    default: () => {}
+  },
+  searchParam: {
+    type: Object,
+    default: () => {}
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+const field1 = ref(props.queryItem?.fields[0] || 'province')
+const field2 = ref(props.queryItem?.fields[1] || 'city')
+const field3 = ref(props.queryItem?.fields[2] || 'area')
+
+const provinceList = ref([])
+const cityList = ref([])
+const areaList = ref([])
+
+watch(
+  () => props.searchParam?.[field1.value],
+  value => {
+    // 数据编辑的时候，自动查询省市区
+    if (!value) return
+    changeProvince(value, true)
+  },
+  { deep: true }
+)
+watch(
+  () => props.searchParam?.[field2.value],
+  value => {
+    // 数据编辑的时候，自动查询省市区
+    if (!value) return
+    changeCity(value, true)
+  },
+  { deep: true }
+)
+// 获取省数据
+const getProvinceFn = async () => {
+  try {
+    const res = await getProvince()
+    if (!res.result) {
+      provinceList.value = []
+    }
+    provinceList.value = JSON.parse(res.result)
+  } catch (error) {
+    provinceList.value = []
+  }
+}
+// 省数据变动时，清空市与区数据，并重新查询市数据
+const changeProvince = async (val, noClear: boolean = false) => {
+  if (!noClear) {
+    props.searchParam[field2.value] = ''
+    props.searchParam[field3.value] = ''
+    cityList.value = []
+    areaList.value = []
+  }
+  if (!val) return
+  try {
+    const res = await getCity({
+      ProvinceName: val
+    })
+    if (!res.result) {
+      cityList.value = []
+    }
+    cityList.value = JSON.parse(res.result)
+  } catch (error) {
+    cityList.value = []
+  }
+}
+// 市数据变动时,清空区数据，并重新查询区数据
+const changeCity = async (val, noClear: boolean = false) => {
+  if (!noClear) {
+    props.searchParam[field3.value] = ''
+    areaList.value = []
+  }
+  if (!val) return
+  try {
+    const res = await getArea({
+      CityName: val
+    })
+    if (!res.result) {
+      areaList.value = []
+    }
+    areaList.value = JSON.parse(res.result)
+  } catch (error) {
+    areaList.value = []
+  }
+}
+onMounted(() => {
+  getProvinceFn()
+})
+</script>
+<style lang="scss" scoped>
+.regionSelect-range {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0;
+}
+</style>