@jzt-packages/components 1.0.0

package/src/JztSelectFilter/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="select-filter">
+    <div v-for="item in data" :key="item.key" class="select-filter-item">
+      <div class="select-filter-item-title">
+        <span>{{ item.title }} ：</span>
+      </div>
+      <span v-if="!item.options.length" class="select-filter-notData">暂无数据 ~</span>
+      <el-scrollbar>
+        <ul class="select-filter-list">
+          <li
+            v-for="option in item.options"
+            :key="option.value"
+            :class="{
+              active:
+                option.value === selected[item.key] ||
+                (Array.isArray(selected[item.key]) && selected[item.key].includes(option.value))
+            }"
+            @click="select(item, option)"
+          >
+            <slot :row="option">
+              <el-icon v-if="option.icon">
+                <component :is="option.icon" />
+              </el-icon>
+              <span>{{ option.label }}</span>
+            </slot>
+          </li>
+        </ul>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="selectFilter">
+import { ref, watch } from 'vue'
+
+interface OptionsProps {
+  value: string | number
+  label: string
+  icon?: string
+}
+
+interface SelectDataProps {
+  title: string // 列表标题
+  key: string // 当前筛选项 key 值
+  multiple?: boolean // 是否为多选
+  options: OptionsProps[] // 筛选数据
+}
+
+interface SelectFilterProps {
+  data?: SelectDataProps[] // 选择的列表数据
+  defaultValues?: { [key: string]: any } // 默认值
+}
+
+const props = withDefaults(defineProps<SelectFilterProps>(), {
+  data: () => [],
+  defaultValues: () => ({})
+})
+
+// 重新接收默认值
+const selected = ref<{ [key: string]: any }>({})
+watch(
+  () => props.defaultValues,
+  () => {
+    props.data.forEach(item => {
+      if (item.multiple) selected.value[item.key] = props.defaultValues[item.key] ?? ['']
+      else selected.value[item.key] = props.defaultValues[item.key] ?? ''
+    })
+  },
+  { deep: true, immediate: true }
+)
+
+// emit
+const emit = defineEmits<{
+  change: [value: any]
+}>()
+
+/**
+ * @description 选择筛选项
+ * @param {Object} item 选中的哪项列表
+ * @param {Object} option 选中的值
+ * @return void
+ * */
+const select = (item: SelectDataProps, option: OptionsProps) => {
+  if (!item.multiple) {
+    // * 单选
+    if (selected.value[item.key] !== option.value) selected.value[item.key] = option.value
+  } else {
+    // * 多选
+    // 如果选中的是第一个值，则直接设置
+    if (item.options[0].value === option.value) selected.value[item.key] = [option.value]
+    // 如果选择的值已经选中了，则删除选中的值
+    if (selected.value[item.key].includes(option.value)) {
+      let currentIndex = selected.value[item.key].findIndex((s: any) => s === option.value)
+      selected.value[item.key].splice(currentIndex, 1)
+      // 当全部删光时，把第第一个值选中
+      if (selected.value[item.key].length == 0) selected.value[item.key] = [item.options[0].value]
+    } else {
+      // 未选中点击值的时候，追加选中值
+      selected.value[item.key].push(option.value)
+      // 单选中全部并且点击到了未选中的值，把第一个值删除掉
+      if (selected.value[item.key].includes(item.options[0].value)) selected.value[item.key].splice(0, 1)
+    }
+  }
+  emit('change', selected.value)
+}
+</script>
+
+<style scoped lang="scss">
+@use './index';
+</style>

package/src/JztSelectTable/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <el-form>
+    <el-popover
+      ref="popoverRef"
+      :visible="popoverVisible"
+      :width="width"
+      :teleported="false"
+      placement="bottom-start"
+      :popper-style="{ maxWidth: 'none', minWidth: minWidth }"
+      popper-class="jzt-selected-popover"
+      @show="onShowPopover"
+      @hide="onHidePopover"
+    >
+      <template #reference>
+        <slot name="reference">
+          <el-input
+            readonly
+            :disabled="disabled"
+            :placeholder="placeholder"
+            :value="selectedNames"
+            @click="onOpen"
+            class="sle"
+            v-click-outside="onClickOutside"
+            v-bind="inputProps"
+          >
+            <!-- <template #append>
+              <el-button :icon="Search" />
+            </template> -->
+          </el-input>
+        </slot>
+      </template>
+      <div class="popover-content flex flex-col">
+        <slot>
+          <JztQueryTable
+            ref="proTableRef"
+            :customForm="true"
+            :tool-button="queryTableProps?.toolButton ?? false"
+            :grid-params="queryTableProps?.gridParams ?? undefined"
+            :table-config="tableConfigOptions"
+            :request-api="requestApi"
+            :request-auto="false"
+            v-model:init-param="initParams"
+            :tabActiveName="tabActiveName"
+            :tabs-list="tabsList"
+            :btn-buffix="true"
+            :show-query-btn="false"
+            :show-reset-btn="false"
+            :pagination="queryTableProps?.pagination ?? false"
+            @tab-change="tabChange"
+            :height="queryTableProps?.tableHeight ?? 220"
+          >
+            <template #rightBtn>
+              <div class="ml15">
+                <el-button v-if="isShowQueryBtn" :plain="isShowQueryBtn" type="primary" @click="onSearch">
+                  查询
+                </el-button>
+                <el-button v-if="isShowAddBtn" type="primary" @click="onAddHandle">
+                  {{ addBtnText }}
+                </el-button>
+              </div>
+            </template>
+          </JztQueryTable>
+        </slot>
+      </div>
+    </el-popover>
+  </el-form>
+</template>
+<script setup lang="tsx" name="selectProductPopover">
+import { Search } from '@element-plus/icons-vue'
+import { ElMessage, ClickOutside as vClickOutside } from 'element-plus'
+import { computed, ref, unref } from 'vue'
+import JztQueryTable from '../JztQueryTable/index.vue'
+import type { ProTableInstance } from '../JztQueryTable/interface'
+
+interface Props {
+  placeholder?: string
+  // selectedList?: string[]; // 选中数据
+  requestApi: (params: any) => Promise<any> // 请求接口
+  tableConfigOptions: any // 表格配置
+  initParam?: any // 初始化参数
+  rowKey?: string // 表格行唯一标识,
+  rowName?: string // 表格行展示key
+  tabsList?: Array<{ label: string; value: string | number }> // tab 列表
+  tabActiveName?: string
+  closeMode?: 'close' | false | 'clear' // close仅关闭，clear关闭并清空 false不自动关闭(自己调方法关闭)
+  addBtnText?: string
+  width?: string // 宽度(固定)
+  minWidth?: string // 最小宽度
+  isShowAddBtn?: boolean // 是否显示添加按钮
+  disabled?: boolean // 是否禁用
+  inputProps?: Object // input属性
+  isAutoOpen?: boolean // 是否自动打开弹窗
+  // gridParams?: {
+  //   gridId: string
+  //   url: string
+  // }
+  isShowQueryBtn?: boolean // 是否显示查询按钮
+  // 传给查询表格的属性
+  queryTableProps: {
+    pagination?: boolean
+    toolButton?: ('refresh' | 'setting' | 'search' | 'fullScreen')[] | boolean
+    gridParams?: {
+      gridId: string
+      url: string
+    }
+    tableHeight?: number
+  }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '请从下拉表格中选择数据',
+  // selectedList: () => [],
+  rowKey: 'productCode', // 表格行唯一标识
+  rowName: 'productCodeName',
+  tabsList: () => [],
+  closeMode: 'clear',
+  addBtnText: '新增',
+  width: '100%',
+  minWidth: '800px', // 最小宽度
+  isShowAddBtn: true,
+  isAutoOpen: true,
+  // toolButton: false,
+  isShowQueryBtn: true,
+  queryTableProps: () => ({
+    pagination: true,
+    toolButton: false
+  })
+})
+interface Emits {
+  // (e: "onShow"): void;
+  // (e: "onHide"): void;
+  (e: 'addProduct', ids: Array<string> | any): void
+  (e: 'tabChange', tab: string | number): void
+  (e: 'update:initParam', initParam: any): void
+  (e: 'onHide', ids: Array<string> | any): void
+  (e: 'onOpen'): void
+  (e: 'onHidePopover'): void
+}
+const emits = defineEmits<Emits>()
+
+const popoverVisible = ref(false)
+
+const initParams = computed({
+  get() {
+    return props.initParam
+  },
+  set(val: string) {
+    const params = {
+      ...props.initParam,
+      ...(props.tabActiveName ? { [props.tabActiveName]: val[props.tabActiveName] } : {})
+    }
+    emits('update:initParam', params)
+  }
+})
+
+const popoverRef = ref()
+const proTableRef = ref<ProTableInstance>()
+
+const selectedIds = computed(() => {
+  return proTableRef.value?.selectedList.map(item => {
+    return item[props.rowKey]
+  }) as string[]
+})
+
+const selectedNames = computed(() => {
+  return proTableRef.value?.selectedList.map(item => {
+    return item[props.rowName]
+  }) as string[]
+})
+
+const selectedList = computed(() => {
+  return proTableRef.value?.selectedList || []
+})
+
+const tabChange = (tabActive: string | number) => {
+  emits('tabChange', tabActive)
+  // proTableRef.value?.clearSelection();
+}
+const hide = () => {
+  emits('onHide', {
+    selectedIds: selectedIds.value,
+    selectedNames: selectedNames.value,
+    selectedList: selectedList.value
+  })
+  proTableRef.value?.reset()
+}
+// 打开弹窗
+const onAutoOpen = () => {
+  popoverVisible.value = true
+}
+const onOpen = () => {
+  if (!props.isAutoOpen) {
+    emits('onOpen')
+  } else {
+    onAutoOpen()
+  }
+}
+// 手动关闭 popover
+const closePopover = () => {
+  popoverVisible.value = false
+  hide()
+}
+// 关闭并清空
+const closeClear = () => {
+  popoverVisible.value = false
+  // popoverRef.value.hide();
+  proTableRef.value?.changeTableData(() => [])
+  proTableRef.value?.clearSelection()
+  hide()
+}
+
+// 显示时触发
+const onShowPopover = () => {
+  onSearch()
+}
+
+// 关闭时触发
+const onHidePopover = () => {
+  emits('onHidePopover')
+  // closePopover();
+}
+//  查询
+const onSearch = () => {
+  proTableRef.value?.search()
+  // proTableRef.value?.searchAndClear();
+}
+// 新增
+const onAddHandle = () => {
+  const selectedList = proTableRef.value?.selectedList
+  if (!selectedList || !selectedList.length) {
+    ElMessage.warning('请选择数据')
+    return
+  }
+  emits('addProduct', {
+    selectedIds: selectedIds.value,
+    selectedNames: selectedNames.value,
+    selectedList
+  })
+  if (props.closeMode) {
+    props.closeMode === 'clear' ? closeClear() : closePopover()
+  }
+}
+/**点击空白处隐藏 */
+const onClickOutside = (e: any) => {
+  if (popoverVisible.value && !unref(popoverRef).popperRef.contentRef.contains(e.target)) {
+    closePopover()
+  }
+}
+defineExpose({ closePopover, closeClear, onAutoOpen })
+</script>
+<style lang="scss" scoped>
+:deep(.el-input__inner) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/JztTable/index.scss

@@ -0,0 +1,72 @@
+.fullscreen-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99;
+}
+
+.is-fullHeight.jzt-table-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .table-content-box {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// 表格 header 样式
+.table-header {
+  .header-button-lf,
+  .header-button-ri {
+    display: flex;
+    flex-wrap: wrap;
+    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;
+    :deep(.el-button) {
+      margin-left: 4px !important;
+    }
+    // .tool_btn {
+    //   width: 30px;
+    //   height: 30px;
+    //   // margin: 4px 5px 0 0;
+    // }
+  }
+  :deep(.tool_btn.el-button) {
+    width: var(--el-component-size);
+    // height: 32px;
+    // margin: 4px 5px 0 0;
+  }
+}
+
+.el-table {
+  margin-top: 8px;
+  .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;
+//   }
+// }