@jzt-packages/components 1.0.0

package/src/JztProductInfo/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <jzt-dialog
+    v-model="dialogVisible"
+    :title="title"
+    width="80%"
+    :showFooter="false"
+    @close="closeDialog"
+    dialogClass="noTopBody"
+  >
+    <div v-if="dialogVisible" v-loading="loading" class="product-container">
+      <el-tabs v-model="tabActive" class="table-tabs" @tab-change="handleTabChange">
+        <el-tab-pane
+          v-for="tab in tabsList.filter(item => item.isShow)"
+          :label="tab.label"
+          :name="tab.name"
+        ></el-tab-pane>
+      </el-tabs>
+      <div class="container">
+        <div v-if="tabActive === 'records'" class="container-item">
+          <records
+            :productInfo="productInfo"
+            :srcList="productPictureList"
+            v-model:openFold="openFold"
+            :medicalType="medicalType"
+          />
+        </div>
+        <div v-else-if="tabActive === 'qxUnique'" class="container-item">
+          <qxUnique :productInfo="productInfo" />
+        </div>
+        <div v-else-if="tabActive === 'instruction'" class="container-item">
+          <previewFile ref="previewFileRef" />
+        </div>
+      </div>
+    </div>
+  </jzt-dialog>
+</template>
+
+<script setup lang="ts" name="JztProductInfo">
+import JztDialog from '../JztDialog/index.vue'
+import previewFile from '../JztFilePreview/previewFile.vue'
+import qxUnique from './components/qxUnique.vue'
+import records from './components/records.vue'
+import { useEvents, useParams } from './hooks/useParams'
+
+export interface ProductInfo {
+  title?: string
+}
+const props = withDefaults(defineProps<ProductInfo>(), {
+  title: '查看产品信息'
+})
+const {
+  loading,
+  dialogVisible,
+  tabActive,
+  tabsList,
+  previewFileRef,
+  productInfo,
+  productPictureList,
+  openFold,
+  medicalType
+} = useParams()
+const { getDetailByCode, closeDialog, handleTabChange } = useEvents()
+const openDialog = (paramsValue: string | object, type?: string) => {
+  let params = {}
+  if (typeof paramsValue === 'string') {
+    params = { productCode: paramsValue }
+  } else {
+    params = paramsValue
+  }
+  getDetailByCode(params, type)
+}
+defineExpose({
+  openDialog
+})
+</script>
+<style lang="scss" scoped>
+:deep(.dialog-content) {
+  height: calc(75vh - 60px);
+}
+.product-container {
+  height: calc(100% - 20px);
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  :deep(.el-tabs__content) {
+    display: none;
+  }
+  .table-tabs {
+    // height: 55px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background-color: #fff;
+  }
+  .container {
+    flex: 1;
+    overflow: hidden;
+    .container-item {
+      height: 100%;
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/src/JztProductInfo/interface/index.ts

@@ -0,0 +1,15 @@
+import { VNode, ComponentPublicInstance, Ref } from 'vue'
+import { ProductInfo } from '../index.vue'
+
+export type ProductInfoRefInstance = keyof ComponentPublicInstance | keyof ProductInfo
+export type ProductInfoRef = {
+  openDialog: (param: string | object) => any
+}
+
+// export interface FileItemProps {
+//   arrayIndex: number
+//   id: string
+//   url: string
+//   name: string
+//   fileType: string
+// }

package/src/JztQueryDetailTable/index.scss

@@ -0,0 +1,100 @@
+.el-popover {
+  min-width: 200px;
+  max-width: 300px;
+}
+.fullscreen-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99;
+}
+
+/* queryTable */
+.table-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 8px 0 0 0;
+  background-color: aquamarine;
+
+  // 表格 header 样式
+  .table-header {
+    .header-button-lf,
+    .header-button-ri {
+      display: flex;
+      flex-wrap: wrap;
+      // gap: 15px 12px;
+      gap: 5px 2px;
+      margin-bottom: 2px;
+      .el-button:not(.el-input .el-button) {
+        margin-left: 0;
+      }
+    }
+    .header-button-lf {
+      float: left;
+    }
+    .header-button-ri {
+      float: right;
+    }
+
+    .el-button {
+      margin: 5px !important;
+    }
+    // .tool_btn {
+    //   width: 30px;
+    //   height: 30px;
+    // }
+  }
+
+  .table-top-box {
+    padding: 0 10px;
+
+    .el-tabs {
+      margin-left: 6px;
+      margin-bottom: 5px;
+    }
+  }
+
+  .table-content-box {
+    flex: 1;
+    overflow: hidden;
+    padding: 6px 10px 10px 10px;
+    .table-left-box,
+    .table-right-box {
+      box-shadow: var(--el-box-shadow-light);
+      height: calc(100%);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .table-right-box {
+      margin-left: 10px;
+    }
+  }
+
+  .el-tabs .el-tabs__header.is-top {
+    margin-bottom: 2px !important;
+  }
+}
+
+.el-table {
+  .el-scrollbar {
+    min-height: 150px;
+  }
+}
+
+.el-dialog {
+  .table-search {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+  .spd-card {
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 10px;
+  }
+}

package/src/JztQueryDetailTable/index.vue

@@ -0,0 +1,400 @@
+<template>
+  <!-- 查询表单 -->
+  <JztSearchForm
+    ref="searchFormRef"
+    v-show="isShowSearch"
+    :search="_search"
+    :reset="_reset"
+    :allow-collapsed="allowCollapsed"
+    :collapsed="collapsed"
+    :query-items="searchColumns"
+    :search-param="searchParam"
+    :search-col="searchCol"
+  />
+
+  <!-- 表格主体 -->
+  <div :class="['spd-card table-main', isFullscreen ? 'fullscreen-page' : '']">
+    <div class="table-top-box">
+      <!-- 表格头部 操作按钮 -->
+      <div class="table-header">
+        <JztButtonList :buttonList="topList" @onClick="handleButtonClick">
+        </JztButtonList>
+        <slot name="tableHeader" />
+      </div>
+      <!-- 表格上方el-tabs -->
+      <el-tabs
+        v-if="tabsList && tabsList.length"
+        v-model="initParam[tabActiveName as keyof string]"
+        class="table-tabs"
+        @tab-change="handleTabChange"
+      >
+        <el-tab-pane
+          v-for="tab in tabsList"
+          :label="tab[tabsProps?.label || 'label']"
+          :name="tab[tabsProps?.value || 'value']"
+        ></el-tab-pane>
+      </el-tabs>
+      <slot name="tableTops" />
+    </div>
+    <!--表格区域  -->
+    <div class="flx-left-top table-content-box">
+      <div
+        class="table-left-box"
+        :style="{
+          width: tableStyle.leftWidth,
+        }"
+      >
+        <JztTable
+          ref="jztTableRef"
+          :tableData="processTableData"
+          :tableConfig="rightTableConfig"
+          v-model:pageable="pageable"
+          v-bind="$attrs"
+          @drag-sort="sortTable"
+          @refresh="_search"
+          :isFullHeight="true"
+          @selection-change="selectionChange"
+          @radioChange="radioChange"
+        />
+      </div>
+      <div
+        :style="{
+          width: tableStyle.rightWidth,
+        }"
+        class="table-right-box"
+      >
+        <slot name="table-right"> </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { ElTableColumn, ElTable, ElMessageBox, ElMessage } from "element-plus";
+import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
+import { useTable } from "../JztQueryTable/hooks/useQueryTable";
+import { useSelection } from "../JztQueryTable/hooks/useSelection";
+import { BreakPoint } from "../JztGrid/interface";
+import { isEmpty, removeEmpty } from "@jzt-spd/utils";
+import { GUIDNoneValue } from "@jzt-spd/utils/consts";
+import { cloneDeep } from "lodash-es";
+import {
+  ColumnProps,
+  TypeProps,
+  QueryItemsProps,
+  TopButtonProps,
+  DetailTableConfigProps,
+  ColumnConfigProps,
+  tabsListProps,
+} from "../JztQueryDetailTable/interface/index";
+
+import JztButtonList from "../JztButtonList/index.vue";
+
+import { generateUUID, handleProp } from "../utils";
+import JztSearchForm from "../JztSearchForm/index.vue";
+import Sortable from "sortablejs";
+import JztTable from "../JztTable/index.vue";
+
+export interface ProTableProps {
+  tabActiveName?: string | number; // tabs绑定值
+  tabsList?: tabsListProps[]; //tablist list数据
+  tabsProps?: tabsListProps; //  tablist 配置项
+  tableConfig: DetailTableConfigProps; // 列配置项  ==> 必传
+  columnConfig?: ColumnConfigProps; // 列多选，显示序号，单选等配置项 非必传
+  data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+  // initData?: boolean // 是否默认初始化数据
+  requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
+  requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
+  requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
+  dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+  tableLoaded?: (data: any) => void; // 表格加载完成的回调函数 ==> 非必传
+  title?: string; // 表格标题 ==> 非必传
+  pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
+  initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
+  border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
+  toolButton?: ("refresh" | "setting" | "search" | "fullScreen")[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+  searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 3, lg: 4, xl: 5,xxl:6 }
+  searchFilter?: (data: any) => Record<string, any>; // 查询时处理数据的函数 可对查询前的数据进行编辑后再查询 ==> 非必传
+  allowCollapsed?: boolean; // 查询表单是否折叠
+  collapsed?: boolean; // 查询表单默认是否折叠
+  isDetail?: boolean; //
+  tableStyle?: Record<string, string>;
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  tabsProps: () => {
+    return {
+      label: "label",
+      value: "value",
+    };
+  },
+  columns: () => [],
+  requestAuto: true,
+  pagination: true,
+  initParam: {},
+  border: true,
+  toolButton: true,
+  rowKey: "id",
+  searchCol: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }),
+  allowCollapsed: true,
+  collapsed: true,
+  isDetail: false,
+  tableStyle: () => ({ leftWidth: "60%", rightWidth: "60%" }),
+});
+// 表格全屏
+const isFullscreen = ref(false);
+const searchFormRef = ref();
+// table 实例
+const tableRef = ref<InstanceType<typeof ElTable>>();
+
+// 生成组件唯一id
+const uuid = ref("id-" + generateUUID());
+const loading = ref<boolean>(false); //小丽掉了 我加上了
+// 是否显示搜索模块
+const isShowSearch = ref(true);
+
+const formatterForm = (form) => {
+  let searchForm = cloneDeep(form);
+  searchColumns.value.forEach((item) => {
+    // isSetEmptyData：空值默认值&& 未选择或输入数据 -> 设置默认值进行查询
+    if (
+      item?.search &&
+      item.search?.isSetEmptyData &&
+      isEmpty(searchForm[item.prop])
+    ) {
+      searchForm[item.prop] = item.search.emptyNullValue || GUIDNoneValue;
+    }
+    // 如果是数组 切设置了切割字段 -> 切割数组到开始与结束字段 并删除原字段
+    if (item.search && item.search?.startField && item.search?.endField) {
+      const { startField, endField } = item.search;
+      const timeList = searchForm[item.prop] || [];
+      searchForm[startField] = timeList[0] ?? "";
+      searchForm[endField] = timeList[1] ?? "";
+      delete searchForm[item.prop];
+    }
+  });
+  const endFrom = removeEmpty(searchForm);
+  return endFrom;
+};
+
+// 效验查询条件必填
+const validateSearchForm = async () => {
+  if (props.requestAuto || !searchFormRef.value) {
+    // 需要初始化数据
+    return true;
+  } else {
+    const validate = await searchFormRef.value.validateForm();
+    return validate;
+  }
+};
+const handleTabChange = (val: string | number) => {
+  emit("tabChange", val);
+};
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected } =
+  useSelection(props.rowKey);
+
+// 表格操作 Hooks
+const {
+  tableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+} = useTable(
+  validateSearchForm,
+  props.requestApi,
+  props.initParam,
+  props.pagination,
+  props.dataCallback,
+  props.requestError,
+  props.searchFilter,
+  props.tableLoaded,
+  loading,
+  formatterForm
+);
+
+const radio = ref("");
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection();
+
+// 初始化表格数据 && 拖拽排序
+onMounted(() => {
+  props.requestAuto && getTableList();
+  props.data && (pageable.value.total = props.data.length);
+});
+
+// 处理表格数据
+const processTableData = computed(() => {
+  if (!props.data) return tableData.value;
+  if (!props.pagination) return props.data;
+  return props.data.slice(
+    (pageable.value.pageIndex - 1) * pageable.value.pageSize,
+    pageable.value.pageSize * pageable.value.pageIndex
+  );
+});
+
+// 监听页面 initParam 改化，重新获取表格数据
+watch(() => props.initParam, getTableList, { deep: true });
+
+// 接收 queryItems 并设置为响应式
+const queryItems = computed(() => props.tableConfig.queryItems || []);
+
+// 接收 topList 并设置为响应式 TopButtonProps
+const topList = computed(() => props.tableConfig.topList || []);
+// 接收 tableConfig 并设置为响应式（左侧表格）
+const rightTableConfig = computed(() => {
+  return {
+    topList: props.tableConfig.leftTopList,
+    columns: props.tableConfig.columns,
+  };
+});
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>());
+const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
+  if (!enumValue) return;
+
+  // 如果当前 enumMap 存在相同的值 return
+  if (
+    enumMap.value.has(prop!) &&
+    (typeof enumValue === "function" || enumMap.value.get(prop!) === enumValue)
+  )
+    return;
+
+  // 当前 enum 为静态数据，则直接存储到 enumMap
+  if (typeof enumValue !== "function")
+    return enumMap.value.set(prop!, unref(enumValue!));
+
+  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+  enumMap.value.set(prop!, []);
+
+  // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+  const res = await enumValue();
+  let list = res?.result || [];
+  enumMap.value.set(prop!, list);
+  // console.log(enumMap.value);
+};
+// 扁平化 columns 的方法 处理字典数据 、 过滤表格部分渲染数据
+const flatColumnsFunc = (
+  columns: ColumnProps[],
+  flatArr: ColumnProps[] = []
+) => {
+  columns.forEach(async (col) => {
+    if (col.prop && !col.type) {
+      if (col._children?.length)
+        flatArr.push(...flatColumnsFunc(col._children));
+      flatArr.push(col);
+
+      // column 添加默认 isShow && isSetting && isFilterEnum 属性值
+      col.isShow = col.isShow ?? true;
+      col.isSetting = col.isSetting ?? true;
+      col.isFilterEnum = col.isFilterEnum ?? true;
+
+      // 设置 enumMap
+      await setEnumMap(col);
+    }
+  });
+  return flatArr.filter((item) => !item._children?.length);
+};
+flatColumnsFunc(props.tableConfig.columns);
+
+// 过滤需要搜索的配置项 && 排序
+const searchColumns = computed(() => {
+  return queryItems.value
+    ?.filter((item) => item.search?.el || item.search?.render)
+    .sort((a, b) => a.search!.order! - b.search!.order!);
+});
+
+// 设置 搜索表单默认排序 && 搜索表单项的默认值
+searchColumns.value?.forEach((column, index) => {
+
+  
+  column.search!.order = column.search?.order ?? index + 2;
+  const key = column.search?.key ?? handleProp(column.prop!);
+  const defaultValue1 = props.initParam[column.prop] || "";
+  const defaultValue = column.search?.defaultValue || defaultValue1;
+  if (defaultValue !== undefined && defaultValue !== null) {
+    searchParam.value[key] = defaultValue;
+    searchInitParam.value[key] = defaultValue;
+  }
+});
+
+// 定义 emit 事件
+const emit = defineEmits<{
+  search: [any];
+  reset: [];
+  dragSort: [{ newIndex?: number; oldIndex?: number }];
+  radioChange: [string, any];
+  tabChange: [any];
+}>();
+// 单选change
+const radioChange = (rowKey, row) => {
+  emit("radioChange", rowKey, row);
+};
+const _search = () => {
+  search();
+  // 处理格式化数据
+  const searchForm = formatterForm({
+    ...searchParam.value,
+    ...props.initParam,
+  });
+   emit("search", searchForm);
+};
+
+const _reset = () => {
+  reset();
+  emit("reset");
+};
+
+const sortTable = ({
+  newIndex,
+  oldIndex,
+}: {
+  newIndex?: number;
+  oldIndex?: number;
+}) => {
+  emit("dragSort", { newIndex, oldIndex });
+};
+// 按钮点击
+const handleButtonClick = (fun) => {
+  const searchForm = formatterForm({
+    ...searchParam.value,
+    ...props.initParam,
+  });
+  fun &&
+    fun({
+      radio: radio.value,
+      isSelected: isSelected.value,
+      selectedList: selectedList.value,
+      selectedListIds: selectedListIds.value,
+      searchParam: searchParam.value,
+      searchForm, // 经过格式化的数据 ,未删除searchParam， 兼容上面被使用的情况
+    });
+};
+// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  element: tableRef,
+  tableData: processTableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  isSelected,
+  selectedList,
+  selectedListIds,
+
+  // 下面为 function
+  getTableList,
+  search,
+  reset,
+  clearSelection,
+  enumMap,
+});
+</script>
+<style lang="scss" scoped>
+@use "./index";
+</style>

package/src/JztQueryDetailTable/interface/index.ts

@@ -0,0 +1,10 @@
+import {
+  TableConfigProps,
+  TopButtonProps,
+} from "../../JztQueryTable/interface/index";
+
+export * from "../../JztQueryTable/interface/index";
+
+export interface DetailTableConfigProps extends TableConfigProps {
+  leftTopList?: TopButtonProps[];
+}