syntec3-0-ui-components-test 1.0.0

package/src/components/customTable/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <div :data-test-id="`${dataTestId}-DIV-CHFzZk`">
+    <pageContent
+      v-loading="pageLoading"
+      :is-tab="false"
+      :is-view="true"
+      :data-test-id="`${dataTestId}-PAGECONTENT-izX8Nl`"
+    >
+      <template #viewContent>
+        <!-- 顶部tabs操作栏 -->
+        <header-tabs
+          v-if="hasHeaderTabs"
+          ref="viewManagerRef"
+          :permission-data="permissionData"
+          :data-test-id="`${dataTestId}-DIV-9lfM7M`"
+          :select-options="selectOptions"
+          :default-create-time-string="defaultCreateTimeString"
+          @update:permissionData="handlePermissionDataUpdate"
+        />
+      </template>
+      <template #headerContent>
+        <!-- 操作按钮区域 -->
+        <header-operation
+          v-if="hasHeaderOperation"
+          :buttons="topButtons"
+          position="right"
+          :data-test-id="`${dataTestId}-HEADER-OPERATION-XO8TJP`"
+        />
+      </template>
+      <template #searchContent>
+        <!-- 搜索表单区域 -->
+        <customFilter
+          v-if="hasSearchContent"
+          ref="querySearchRef"
+          :can-edit-headers="tableColumns"
+          :data-test-id="`${dataTestId}-CUSTOMFILTER-7SqxcZ`"
+          :permission-code="permissionCode"
+          :has-column-config="hasColumnConfig"
+          :select-options="selectOptions"
+          @filterSearch="query"
+          @parentSaveData="parentSaveData"
+          @childSaveData="childSaveData"
+        />
+      </template>
+      <template #tableContent>
+        <table-content
+          ref="tableContentRef"
+          :loading="tableLoading"
+          :table-data="dataList"
+          :columns="tableColumns"
+          :total="total"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :table-actions-width="tableActionsWidth"
+          :show-selection="showSelection"
+          :show-index="showIndex"
+          :column-min-width="columnMinWidth"
+          :permission-code="permissionCode"
+          :page-type="pageType"
+          :show-pagination="showPagination"
+          :data-test-id="`${dataTestId}-TABLE-CONTENT-NH3XBf`"
+          :default-sort="defaultSort"
+          :show-summary="showSummary"
+          :summary-method="summaryMethod"
+          :selectable="selectable"
+          v-bind="$attrs"
+          @cellClick="$emit('cellClick', $event)"
+          @sortChange="$emit('sortChange', $event)"
+          @selectionChange="onSelectionChange"
+          @pageChange="onPageChange"
+        >
+          <template #customColumn="{ row, index }">
+            <slot name="customColumn" :row="row" :index="index" />
+          </template>
+          <template #tableActions="{ row, index }">
+            <slot name="tableActions" :row="row" :index="index" />
+          </template>
+        </table-content>
+      </template>
+    </pageContent>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// 组件导入
+import pageContent from '@/components/pageContent.vue';
+import HeaderTabs from '@/components/customTable/components/headerTabs/index.vue';
+import HeaderOperation from '@/components/customTable/components/headerOperation/index.vue';
+import TableContent from '@/components/customTable/components/tableContent/index.vue';
+import customFilter from '@/components/customFilter/customFilter.vue';
+
+const props = defineProps({
+  hasHeaderTabs: {
+    // 是否显示顶部tabs
+    type: Boolean,
+    default: true,
+  },
+  hasHeaderOperation: {
+    // 是否显示顶部操作按钮组
+    type: Boolean,
+    default: true,
+  },
+  hasSearchContent: {
+    // 是否显示搜索表单
+    type: Boolean,
+    default: true,
+  },
+  hasColumnConfig: {
+    // 是否显示列配置,由于列配置存在于customFilter中,前提必须要hasSearchContent=true
+    // 分开控制的话看是否需要调整搜索组件的比例
+    type: Boolean,
+    default: true,
+  },
+  auto: {
+    // 是否自动加载数据
+    type: Boolean,
+    default: true,
+  },
+  pageLoading: {
+    // 页面加载状态
+    type: Boolean,
+    default: false,
+  },
+  tableLoading: {
+    // table加载状态
+    type: Boolean,
+    default: false,
+  },
+  total: {
+    // table数据总数量，用于分页
+    type: Number,
+    default: 0,
+  },
+  tableColumns: {
+    // 定义的table列数据
+    type: Array,
+    default: () => [],
+  },
+  // 分页请求code码
+  permissionCode: {
+    type: String,
+    default: '',
+  },
+  // 操作列的最小宽度，设置为0则不显示
+  tableActionsWidth: {
+    type: Number,
+    default: 120,
+  },
+  // 功能开关,选择列
+  showSelection: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示序号列
+  showIndex: {
+    type: Boolean,
+    default: true,
+  },
+  // 列的最小宽度,如果固定列配置中配置了minWidth则配置列优先使用minWidth,其他未配置的则使用columnMinWidth
+  columnMinWidth: {
+    type: Number,
+    default: 200,
+  },
+  // 是否显示合计行
+  showSummary: {
+    type: Boolean,
+    default: false,
+  },
+  // 合并格式方法
+  summaryMethod: Function,
+  // 选择列禁用规则
+  selectable: Function,
+  // 视图组件数据
+  permissionData: {
+    type: Object,
+    default: () => ({}),
+  },
+  selectOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  defaultCreateTimeString: {
+    type: String,
+    default: 'createTime',
+  },
+  // 顶部按钮组--固定在右边
+  topButtons: {
+    type: Array,
+    default: () => [],
+  },
+  // 默认的排序列的 prop 和顺序。
+  defaultSort: {
+    type: Object,
+    default: () => ({}),
+  },
+  pageType: Number,
+  // 是否显示分页组件
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  dataTestId: String,
+});
+const $emit = defineEmits([
+  'update:modelValue',
+  'reload', // 表格请求数据
+  'sortChange', // 自定义排序
+  'selectionChange', // 选中行
+  'columnsSaveData', // 列配置更改
+  'columnsChildSaveData', // 子级列配置更改
+  'cellClick', // 单元格点击
+  'update:permissionData',
+]);
+// const { t } = useI18n();
+const tableContentRef = ref();
+const dataList = ref([]);
+const selectList = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(20);
+const total = computed(() => {
+  return props.total;
+});
+
+// 筛选条件
+const paginationParams = computed(() => ({
+  startIndex: (currentPage.value - 1) * pageSize.value,
+  count: pageSize.value,
+}));
+function query(e) {
+  currentPage.value = 1;
+  // 将filterSearch事件传递给父组件
+  $emit('filterSearch', e);
+}
+// table数据赋值
+function complete(data) {
+  dataList.value = data;
+  $emit('update:modelValue', data);
+}
+// 数据刷新，用于首次数据请求，刷新数据等
+function reload() {
+  $emit('reload', paginationParams.value);
+}
+
+const tableColumns = computed(() => {
+  return props.tableColumns;
+});
+const parentSaveData = async (val) => {
+  $emit('columnsSaveData', val);
+};
+// 子级数据保存
+const childSaveData = async (val) => {
+  $emit('columnsChildSaveData', val);
+};
+// 页码切换
+const onPageChange = (val) => {
+  currentPage.value = val.page;
+  pageSize.value = val.size;
+  $emit('reload', paginationParams.value);
+};
+// 选择行变化
+function onSelectionChange(e) {
+  selectList.value = e;
+  $emit('selectionChange', e);
+}
+// 处理权限数据更新
+function handlePermissionDataUpdate(data) {
+  currentPage.value = 1;
+  $emit('update:permissionData', data);
+}
+// 暴露方法给父组件
+defineExpose({
+  tableContentRef,
+  complete,
+  reload,
+  getTableData: () => dataList.value,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/scss/base/table.scss';
+
+.statusColor {
+  min-width: 100px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+}
+
+.a-text-class {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.ellipsis-single-line {
+  white-space: nowrap;
+  /* 禁止换行 */
+  overflow: hidden;
+  /* 隐藏超出内容 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+}
+</style>

package/src/components/dialog.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-dialog
+    v-model="showDialog"
+    class="global-dialog"
+    :width="`${width}rem`"
+    center
+    align-center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :modal-append-to-body="true"
+    :append-to-body="true"
+    @close="close"
+  >
+    <div
+      :class="className || 'dialog-container'"
+      :style="`max-height: calc(${dialogContainerVHHeightName}vh - 30px); overflow-y: auto`"
+    >
+      <slot></slot>
+    </div>
+    <template #header>
+      <slot name="header">{{ title }}</slot>
+    </template>
+    <div class="dialog-footer">
+      <slot name="footer"></slot>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { defineProps, watch, ref } from 'vue';
+const emit = defineEmits(['close']);
+const props = defineProps({
+  title: String,
+  value: Boolean,
+  width: {
+    type: Number,
+    default: 50,
+  },
+  className: String,
+  dialogContainerVHHeightName: {
+    type: Number,
+    default: 60,
+  },
+});
+const showDialog = ref(false);
+watch(
+  () => props.value,
+  (val) => {
+    showDialog.value = val;
+  },
+);
+function close() {
+  emit('close');
+}
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 1rem;
+}
+
+/**修改全局的滚动条*/
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #eaecf1;
+  border-radius: 3px;
+}
+/*表格*/
+.el-table__body-wrapper::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #a1a3a9;
+  border-radius: 3px;
+}
+:deep(.el-card__body) {
+  padding-bottom: 0px;
+}
+</style>

package/src/components/pageContent.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    :style="`
+			height: calc(100vh - 5.5rem - ${isTab ? '3.8rem' : '0rem'});
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+		`"
+    data-test-id="DIV-9uS3aN"
+  >
+    <div v-if="isView" data-test-id="DIV-s8FkU33s">
+      <slot name="viewContent" />
+    </div>
+    <div
+      class="box1"
+      :style="`${isTab ? 'top: -3.5rem;width:30%' : isView ? 'top: 3.5rem' : 'top: 0'}`"
+      data-test-id="DIV-s8FkUs"
+    >
+      <slot name="headerContent" />
+    </div>
+    <div :style="isTab ? { marginTop: 0 } : { marginTop: '2.5rem' }" data-test-id="DIV-b7sCPr">
+      <slot name="searchContent" />
+    </div>
+    <slot name="tableContent" style="flex: auto" />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isTab: Boolean,
+  isView: Boolean,
+});
+</script>
+
+<style scoped>
+.box1 {
+  width: calc(100% - 30rem);
+  position: absolute;
+  right: 0;
+  top: -2rem;
+  display: flex;
+  justify-content: flex-end;
+  z-index: 200;
+}
+.button-container {
+  min-width: 240px;
+}
+</style>