syntec3-0-ui-components-test 1.0.0

package/src/components/Pagination.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-pagination
+    v-model:current-page="pageInfo.page"
+    v-model:page-size="pageInfo.size"
+    class="pagination-table"
+    :page-sizes="[5, 10, 20, 50, 100, 200]"
+    :disabled="!total"
+    background
+    layout="slot, sizes, prev, pager, next, jumper"
+    :total="total"
+    :pager-count="pagerCount"
+    :data-test-id="`${dataTestId}-EL-PAGINATION-fvu9sB`"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  >
+    <div class="slot_style" :data-test-id="`${dataTestId}-DIV-yISBZh`">
+      <span :data-test-id="`${dataTestId}-SPAN-lX8Y8q`">{{ $t('currentCount', { currentSize: currentCount }) }}，</span>
+      <span v-if="hasSelected" :data-test-id="`${dataTestId}-SPAN-BlXSV7`">
+        {{ $t('selectedRecordsNum', { selectedNum: selectedNum }) }}，
+      </span>
+      <span :data-test-id="`${dataTestId}-SPAN-qnY4fg`">{{ $t('allRecordsNum', { total: total }) }}</span>
+    </div>
+  </el-pagination>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 0,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 20,
+  },
+  selectedNum: {
+    type: Number,
+    default: 0,
+  },
+  hasSelected: {
+    type: Boolean,
+    default: false,
+  },
+  currentCount: {
+    type: Number,
+    default: 0,
+  },
+  pagerCount: {
+    type: Number,
+    default: 7,
+  },
+  dataTestId: {
+    // data-test-id
+    type: String,
+    default: '',
+  },
+  pageType: {
+    type: Number,
+    default: 1,
+  },
+  permissionCode: {
+    type: String,
+    default: '',
+  },
+});
+const emits = defineEmits(['changePage']);
+const pageInfo = ref({
+  page: props.currentPage,
+  size: props.pageSize,
+});
+
+function changePage() {
+  emits('changePage', pageInfo.value);
+}
+
+function handleSizeChange(val) {
+  pageInfo.value.size = val;
+  changePage(pageInfo);
+  if (props.permissionCode) {
+    // 更新分页显示条数
+    apiFunction.updatePageSetting({
+      permissionCode: props.permissionCode,
+      pageNumber: val,
+      pageType: props.pageType,
+    });
+  }
+}
+
+function handleCurrentChange(val) {
+  pageInfo.value.page = val;
+  changePage(pageInfo);
+}
+watch(
+  () => props.currentPage,
+  (val) => {
+    pageInfo.value.page = val;
+  },
+);
+onMounted(() => {
+  if (props.permissionCode) {
+    // 查询分页显示条数
+    apiFunction
+      .queryPageSetting({
+        permissionCode: props.permissionCode,
+        pageType: props.pageType,
+      })
+      .then((res) => {
+        if (res.data.code === 0) {
+          pageInfo.value.size = parseInt(res.data.content.pageNumber, 10);
+          changePage(pageInfo);
+        }
+      });
+  }
+});
+</script>
+
+<style scoped>
+.pagination-table {
+  display: flex;
+  justify-content: end;
+  width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.slot_style {
+  width: 15rem;
+  position: absolute;
+  left: 0;
+}
+</style>

package/src/components/columnConfigNext.vue

@@ -0,0 +1,273 @@
+<template>
+  <el-dropdown
+    size="default"
+    type="primary"
+    :hide-on-click="false"
+    trigger="click"
+    style="margin-left: 15px"
+    :disabled="disabled"
+    data-test-id="EL-DROPDOWN-eo8M84"
+  >
+    <el-button type="primary" color="#125088" :disabled="disabled" data-test-id="EL-BUTTON-WQugCA">
+      {{ t('columnConfiguration') }}
+      <el-icon class="el-icon--right" data-test-id="EL-ICON-9BpySy">
+        <arrow-down data-test-id="ARROW-DOWN-iXQ8EA" />
+      </el-icon>
+    </el-button>
+    <template #dropdown>
+      <!-- filter 禁止拖拽 -->
+      <div style="display: flex" data-test-id="DIV-ksWjQV">
+        <div data-test-id="DIV-0Bp9xN">
+          <el-space v-if="parentLabel" direction="vertical" data-test-id="EL-SPACE-SwiJNQ">
+            <el-text tag="b" data-test-id="EL-TEXT-PtuT6g">{{ parentLabel }}</el-text>
+          </el-space>
+          <!-- 父表头 -->
+          <el-dropdown-menu style="max-height: 400px" data-test-id="EL-DROPDOWN-MENU-P9MKSO">
+            <VueDraggable
+              ref="el"
+              v-model="parentDraggableItems"
+              :handle="handle"
+              filter=".disabled-color"
+              data-test-id="VUEDRAGGABLE-XbqWos"
+              @end="parentSaveData"
+              @move="(evt) => onDragMove(evt, parentDraggableItems)"
+            >
+              <el-dropdown-item
+                v-for="item in parentDraggableItems"
+                :key="item.value"
+                :command="item"
+                data-test-id="EL-DROPDOWN-ITEM-qhw6G6"
+              >
+                <v-icon
+                  :class="['mdi mdi-drag dragindicator', dynamicClasses(item)]"
+                  style="margin-right: 10px"
+                  data-test-id="V-ICON-4nKZUW"
+                />
+                <el-checkbox
+                  v-if="isParentCheckbox"
+                  v-model="item.isShown"
+                  :label="item.customizeFields ? item.text : $t(item.text)"
+                  size="large"
+                  :disabled="item.disabled"
+                  data-test-id="EL-CHECKBOX-7VXhXa"
+                  @change="parentSaveData(item)"
+                />
+                <span v-else :class="dynamicClasses(item)" style="margin-right: 10px" data-test-id="SPAN-VpmSwI">{{
+                  item.customizeFields ? item.text : $t(item.text)
+                }}</span>
+                <v-icon
+                  v-if="!item.freeze"
+                  class="mdi mdi-lock-open-variant"
+                  style="margin-left: 10px"
+                  data-test-id="V-ICON-gfsrPv"
+                  @click="isFrozen(item, parentDraggableItems, 'parentSaveData')"
+                />
+                <v-icon
+                  v-if="item.freeze"
+                  class="mdi mdi-lock"
+                  style="margin-left: 10px"
+                  data-test-id="V-ICON-bfzpiZ"
+                  @click="isFrozen(item, parentDraggableItems, 'parentSaveData')"
+                />
+              </el-dropdown-item>
+            </VueDraggable>
+          </el-dropdown-menu>
+        </div>
+        <div v-if="isChild" data-test-id="DIV-FUfjAE">
+          <el-space v-if="childLabel" direction="vertical" data-test-id="EL-SPACE-tJl63c">
+            <el-text tag="b" data-test-id="EL-TEXT-BqEDSr">{{ childLabel }}</el-text>
+          </el-space>
+          <!-- 子表头 -->
+          <el-dropdown-menu style="max-height: 400px" data-test-id="EL-DROPDOWN-MENU-PAz7a2">
+            <VueDraggable
+              ref="el"
+              v-model="childDraggableItems"
+              :handle="handle"
+              filter=".disabled-color"
+              data-test-id="VUEDRAGGABLE-QgDzSV"
+              @end="childSaveData"
+              @move="(evt) => onDragMove(evt, childDraggableItems)"
+            >
+              <el-dropdown-item
+                v-for="item in childDraggableItems"
+                :key="item.value"
+                :command="item"
+                data-test-id="EL-DROPDOWN-ITEM-LBKFI2"
+              >
+                <v-icon
+                  :class="['mdi mdi-drag dragindicator', dynamicClasses(item)]"
+                  style="margin-right: 10px"
+                  data-test-id="V-ICON-8xH3OY"
+                />
+                <el-checkbox
+                  v-if="isChildCheckbox"
+                  v-model="item.isShown"
+                  :label="item.customizeFields ? item.text : $t(item.text)"
+                  size="large"
+                  :disabled="item.disabled"
+                  data-test-id="EL-CHECKBOX-EMAn7J"
+                  @change="childSaveData(item)"
+                />
+                <span v-else :class="dynamicClasses(item)" style="margin-right: 10px" data-test-id="SPAN-DCpyQn">{{
+                  item.customizeFields ? item.text : $t(item.text)
+                }}</span>
+                <v-icon
+                  v-if="!item.freeze"
+                  class="mdi mdi-lock-open-variant"
+                  style="margin-left: 10px"
+                  data-test-id="V-ICON-BJQDvq"
+                  @click="isFrozen(item, childDraggableItems, 'childSaveData')"
+                />
+                <v-icon
+                  v-if="item.freeze"
+                  class="mdi mdi-lock"
+                  style="margin-left: 10px"
+                  data-test-id="V-ICON-fcAGHD"
+                  @click="isFrozen(item, childDraggableItems, 'childSaveData')"
+                />
+              </el-dropdown-item>
+            </VueDraggable>
+          </el-dropdown-menu>
+        </div>
+      </div>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { VueDraggable } from 'vue-draggable-plus';
+import { useI18n } from 'vue-i18n';
+import { ElMessage } from 'element-plus';
+const { t } = useI18n();
+const props = defineProps({
+  disabled: Boolean, // 是否禁用列配置按钮
+  parentItems: Array, // 父表头数据
+  isParentCheckbox: Boolean, // 父表头是否显示复选框
+  parentLabel: String, // 父表头名称
+  childLabel: String, // 子表头名称
+  childItems: Array, // 子表头数据
+  isChildCheckbox: Boolean, // 子表头是否显示复选框
+  isChild: Boolean, // 是否子表头列配置
+});
+const emit = defineEmits(['parentSaveData', 'childSaveData']);
+const parentDraggableItems = ref([]);
+const childDraggableItems = ref([]);
+const handle = ref('.dragindicator');
+watch(
+  () => props,
+  () => {
+    parentDraggableItems.value = props.parentItems;
+    childDraggableItems.value = props.childItems;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+function parentSaveData(val) {
+  const count = parentDraggableItems.value.filter((item) => item.isShown === true).length;
+  if (count < 6 && !val.isShown) {
+    val.isShown = true;
+    ElMessage.error(t('theMinimumColumns6'));
+    return;
+  }
+  emit('parentSaveData', parentDraggableItems.value);
+}
+function childSaveData(val) {
+  const count = childDraggableItems.value.filter((item) => item.isShown === true).length;
+  if (count < 6 && !val.isShown) {
+    val.isShown = true;
+    ElMessage.error(t('theMinimumColumns6'));
+    return;
+  }
+  emit('childSaveData', childDraggableItems.value);
+}
+function isFrozen(item, data, event) {
+  const frozenCount = data.filter((item) => item.freeze === true).length;
+
+  if (item.freeze) {
+    // 取消冻结逻辑
+    item.freeze = false;
+    item.isFixed = false;
+    // 将取消冻结的栏位移动到未冻结栏位的第一位
+    const currentIndex = data.indexOf(item);
+    if (currentIndex !== -1) {
+      const [removed] = data.splice(currentIndex, 1);
+      const firstNonFrozenIndex = data.findIndex((i) => !i.freeze);
+      if (firstNonFrozenIndex !== -1) {
+        data.splice(firstNonFrozenIndex, 0, removed);
+      } else {
+        data.push(removed); // 如果没有未冻结栏位，则放到最后
+      }
+    }
+  } else {
+    // 冻结逻辑
+    if (frozenCount >= 4) {
+      ElMessage.error(t('upTo4ColumnsFrozen'));
+      return;
+    }
+    item.freeze = true;
+    item.isFixed = true;
+
+    // 将冻结的栏位移动到最后一个冻结栏位之后
+    const currentIndex = data.indexOf(item);
+    if (currentIndex !== -1) {
+      const [removed] = data.splice(currentIndex, 1);
+      const lastFrozenIndex = data.findLastIndex((i) => i.freeze);
+      if (lastFrozenIndex !== -1) {
+        data.splice(lastFrozenIndex + 1, 0, removed);
+      } else {
+        data.unshift(removed); // 如果没有冻结栏位，则放到最前面
+      }
+    }
+  }
+  // 触发保存事件
+  emit(event, data);
+}
+function dynamicClasses(item) {
+  return item.freeze ? 'disabled-color' : '';
+}
+// 禁止未冻结列拖动到冻结列的上方或中间
+function onDragMove(evt, val) {
+  // 获取拖拽项的索引
+  const draggedIndex = Array.from(evt.from.children).indexOf(evt.dragged);
+  const draggedItem = val[draggedIndex];
+
+  // 获取目标项的索引
+  let relatedIndex = Array.from(evt.to.children).indexOf(evt.related);
+  // willInsertAfter 为 true 时，目标索引要+1
+  if (evt.willInsertAfter && relatedIndex !== -1) {
+    relatedIndex += 1;
+  }
+  // 如果 related 为空，说明拖到最后
+  if (evt.related == null) {
+    relatedIndex = val.length;
+  }
+
+  const frozenCount = val.filter((item) => item.freeze).length;
+
+  // 未冻结列不能拖到冻结区（前frozenCount个）内部或前面
+  if (!draggedItem.freeze && relatedIndex < frozenCount) {
+    return false;
+  }
+  // 冻结列只能在冻结区内移动
+  if (draggedItem.freeze && relatedIndex >= frozenCount) {
+    return false;
+  }
+  return true;
+}
+</script>
+
+<style lang="scss" scoped>
+.disabled-color {
+  color: #ccc !important;
+  cursor: not-allowed !important;
+}
+:deep(.el-space--vertical) {
+  padding: 5px 0 0 16px;
+  position: relative;
+  top: 5px;
+  z-index: 9999;
+}
+</style>