syntec3-0-ui-components-test 1.0.0

package/src/components/Layout/modules/viewFile/viewList.vue

@@ -0,0 +1,291 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    body-class="drawer_body_class"
+    style="margin-bottom: 0"
+    :z-index="2000"
+    size="45%"
+    :with-header="false"
+    :append-to-body="false"
+    :close-on-press-escape="false"
+    :before-close="closeViewListDrawer"
+    data-test-id="EL-DRAWER-jasb7C"
+  >
+    <template #default>
+      <div class="drawer_header_class_content" data-test-id="DIV-rXpQmF">
+        <div class="drawer_title" data-test-id="DIV-zQlq1H">
+          <span class="mdi mdi-list-box-outline" data-test-id="SPAN-HFpXUh" />
+          <span class="title_text" data-test-id="SPAN-0Iut9t">
+            {{ t('viewList') }}
+          </span>
+          <el-tooltip effect="dark" :content="t('viewListTips')" placement="right" data-test-id="EL-TOOLTIP-hHb1YY">
+            <span class="mdi mdi-help-circle-outline title_text_right_icon" data-test-id="SPAN-UENqYR" />
+          </el-tooltip>
+        </div>
+        <el-button link type="primary" data-test-id="EL-BUTTON-4ZFjLQ" @click="addView">
+          <el-icon class="mdi mdi-plus" style="margin-right: 0.5rem; font-size: 18px" data-test-id="EL-ICON-0ylmiQ">
+          </el-icon>
+          {{ t('createView') }}
+        </el-button>
+      </div>
+      <div class="list-body" data-test-id="DIV-Xmx3qv">
+        <VueDraggable
+          ref="draggableRef"
+          v-model="allViews"
+          :target="target"
+          :handle="handle"
+          data-test-id="VUEDRAGGABLE-dL4IT9"
+          @end="handleDragEnd"
+        >
+          <el-table
+            :data="allViews"
+            border
+            class="commonTable sort-target"
+            header-cell-class-name="tableHeaderCell"
+            header-row-class-name="tableHeader"
+            height="100%"
+            data-test-id="EL-TABLE-jJswcP"
+          >
+            <el-table-column :width="50" align="center" data-test-id="EL-TABLE-COLUMN-gVOhBD">
+              <template #default>
+                <el-icon class="mdi mdi-drag dragindicator" style="cursor: move" data-test-id="EL-ICON-XVO0RZ" />
+              </template>
+            </el-table-column>
+            <el-table-column label="#" :width="70" align="center" data-test-id="EL-TABLE-COLUMN-EGE1qk">
+              <template #default="{ $index }">
+                {{ $index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="t('viewName')"
+              prop="name"
+              show-overflow-tooltip
+              data-test-id="EL-TABLE-COLUMN-BX8fIe"
+            >
+              <template #default="scope">
+                <el-icon
+                  class="mdi mdi-book-open-blank-variant"
+                  :style="{ color: iconType(Number(scope.row.meta)).color }"
+                  data-test-id="EL-ICON-IJLII3"
+                />
+                {{
+                  scope.row.id < 0 && (scope.row.viewName === '全部' || scope.row.viewName === 'all')
+                    ? t('all')
+                    : scope.row.viewName
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('action')" :width="150" align="center" data-test-id="EL-TABLE-COLUMN-15WeBo">
+              <template #default="scope">
+                <el-tooltip :content="t('edit')" placement="top" :enterable="false" data-test-id="EL-TOOLTIP-NGVisW">
+                  <el-button link type="primary" data-test-id="EL-BUTTON-VVS5A0" @click="editFun(scope.row)">
+                    <v-icon class="mdi mdi-pencil" style="font-size: 1.2rem" data-test-id="V-ICON-8OzEal" />
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip :content="t('copy')" placement="top" :enterable="false" data-test-id="EL-TOOLTIP-Ima4Dj">
+                  <el-button link type="primary" data-test-id="EL-BUTTON-NQswpy" @click="copyItem(scope.row)">
+                    <el-icon class="mdi mdi-content-copy" style="font-size: 1.2rem" data-test-id="EL-ICON-e2uFy4" />
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip :content="t('delete')" placement="top" :enterable="false" data-test-id="EL-TOOLTIP-WlX0wi">
+                  <el-button link type="primary" data-test-id="EL-BUTTON-v6dR6f" @click="deleteItem(scope.row)">
+                    <el-icon class="mdi mdi-trash-can" style="font-size: 1.2rem" data-test-id="EL-ICON-TRfu6F" />
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+        </VueDraggable>
+      </div>
+      <createView
+        ref="createViewRef"
+        :permission-data="props.permissionData"
+        :select-options="props.selectOptions"
+        :default-create-time-string="defaultCreateTimeString"
+        data-test-id="CREATEVIEW-cCI5u5"
+        @updataView="getViewTabList('update')"
+      />
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { VueDraggable } from 'vue-draggable-plus';
+import createView from './createView.vue';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { iconType } from './viewManageTool.js';
+const props = defineProps({
+  permissionData: Object,
+  selectOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  defaultCreateTimeString: {
+    type: String,
+    default: 'createTime',
+  },
+});
+const { t } = useI18n();
+const emit = defineEmits(['updateViewTabs']);
+const visible = ref(false); // 视图窗口
+const createViewRef = ref(null);
+const draggableRef = ref(null);
+const fieldSetting = ref([]);
+// 定义所有视图数据
+const allViews = ref([]);
+const idFromList = ref(null);
+//获取页面的视图列表
+async function getViewTabList(type) {
+  await apiFunction
+    .getViewList({
+      startIndex: 0,
+      count: 20,
+      permissionCode: props.permissionData.permissionCode,
+    })
+    .then((res) => {
+      if (res.data.code === 0) {
+        allViews.value = [...res.data.content.data];
+        if (type === 'update') {
+          emit('updateViewTabs', [...allViews.value], idFromList.value); //更新tab页面
+        }
+      } else {
+        ElMessage.error(t(res.data.message));
+      }
+    })
+    .catch(() => {
+      ElMessage.error(t('apiError'));
+    });
+}
+/**
+ * 添加视图
+ */
+function addView() {
+  createViewRef.value.open(null, 1);
+}
+/**
+ * 编辑视图
+ */
+const editFun = (row) => {
+  const viewId = typeof row === 'object' && row.id !== undefined ? row.id : row;
+  idFromList.value = viewId;
+  createViewRef.value.open(viewId, 0, props.selectOptions);
+};
+const copyItem = (row) => {
+  const viewId = typeof row === 'object' && row.id !== undefined ? row.id : row;
+  idFromList.value = viewId;
+  createViewRef.value.open(viewId, 2, props.selectOptions);
+};
+// 定义拖拽相关配置
+const target = ref('.list-body tbody');
+const handle = ref('.dragindicator');
+/**
+ * 拖拽结束事件
+ */
+const handleDragEnd = async () => {
+  try {
+    const res = await apiFunction.viewSortList({ viewJson: allViews.value });
+    if (res.data.code === 0) {
+      emit('updateViewTabs', [...allViews.value]);
+    } else {
+      ElMessage.error(t(res.data.message));
+    }
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  }
+};
+
+// 删除视图
+async function doDeleteOperation(id) {
+  await apiFunction
+    .deleteView(id)
+    .then((res) => {
+      if (res.data?.code === 0) {
+        getViewTabList('update');
+      } else {
+        ElMessage.error(t(res.data.message));
+      }
+    })
+    .catch(() => {
+      ElMessage.error(t('apiError'));
+    });
+}
+const deleteItem = (row) => {
+  let dialogTitle = t('delReminder');
+  let dialogAlertDetail = `${t('viewDeleteTip')}`;
+  ElMessageBox.confirm(dialogAlertDetail, dialogTitle, {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning',
+  })
+    .then(async () => {
+      await doDeleteOperation(row.id);
+    })
+    .catch(() => {
+      return;
+    });
+};
+/**
+ * 打开视图列表抽屉
+ */
+const open = async () => {
+  visible.value = true;
+  getViewTabList();
+};
+
+/**
+ * 打开视图列表抽屉并执行编辑或复制操作
+ */
+const openDrawer = async (data, type) => {
+  visible.value = true;
+  await getViewTabList();
+  if (type === 0) {
+    editFun(data, props.selectOptions);
+  } else if (type === 2) {
+    copyItem(data, props.selectOptions);
+  }
+};
+
+/**
+ * 关闭视图列表抽屉
+ */
+const closeViewListDrawer = () => {
+  visible.value = false;
+  fieldSetting.value = [];
+  allViews.value = [];
+};
+defineExpose({
+  open,
+  openDrawer,
+});
+</script>
+
+<style scoped lang="scss">
+::v-deep(.drawer_body_class) {
+  margin: 0;
+  padding: 5px;
+}
+.drawer_header_class_content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.drawer_title {
+  display: flex;
+  align-items: center;
+}
+.title_text_right_icon {
+  color: #909399;
+  font-size: 1rem;
+}
+.title_text {
+  color: #165389;
+  font-weight: bold;
+  margin: 0 0.5rem;
+}
+.list-body {
+  height: calc(100% - 40px);
+}
+</style>

package/src/components/Layout/modules/viewFile/viewManageTool.js

@@ -0,0 +1,271 @@
+import { ref } from 'vue';
+// 递归收集所有人员ID
+export function getAllPersonIds(opts) {
+  const ids = [];
+  opts.forEach((option) => {
+    // 如果有子项，说明是部门，递归收集子项
+    if (option.children && option.children.length > 0) {
+      ids.push(...getAllPersonIds(option.children));
+    } else if (option.value !== '-1') {
+      // 排除"所有人"自身
+      ids.push(option.value);
+    }
+  });
+  return ids;
+}
+// 收集指定部门下的所有人员ID
+export function getDeptPersonIds(deptId, opts) {
+  const ids = [];
+  const findDept = (options) => {
+    for (const opt of options) {
+      if (opt.value === deptId && opt.children) {
+        // 收集当前部门下的所有人员
+        opt.children.forEach((child) => ids.push(child.value));
+        return true;
+      }
+      if (opt.children && findDept(opt.children)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  findDept(opts);
+  return ids;
+}
+
+// 导出回显相关工具函数
+export const echoUtils = {
+  // 1. 初始化部门-人员映射表
+  initDeptMap(opts) {
+    const deptPersonMap = {};
+    const traverse = (options) => {
+      options.forEach((opt) => {
+        if (opt.children && opt.children.length > 0) {
+          // 记录部门下所有人员ID
+          deptPersonMap[opt.value] = opt.children.map((child) => child.value);
+          traverse(opt.children); // 递归处理子部门
+        }
+      });
+    };
+    traverse(opts);
+    return deptPersonMap;
+  },
+
+  // 2. 初始化独立人员ID列表（无下级的非"所有人"选项）
+  initPersonIds(opts) {
+    const personIds = [];
+    const traverse = (options) => {
+      options.forEach((opt) => {
+        if (opt.value !== '-1' && (!opt.children || opt.children.length === 0)) {
+          personIds.push(opt.value);
+        } else if (opt.children && opt.children.length > 0) {
+          traverse(opt.children);
+        }
+      });
+    };
+    traverse(opts);
+    return personIds;
+  },
+
+  // 3. 递归收集所有人员ID（用于判断全量人员）
+  getAllPersonIds(opts) {
+    const ids = [];
+    opts.forEach((option) => {
+      if (option.children && option.children.length > 0) {
+        ids.push(...this.getAllPersonIds(option.children));
+      } else if (option.value !== '-1') {
+        // 排除"所有人"
+        ids.push(option.value);
+      }
+    });
+    return ids;
+  },
+
+  getEchoValues(personIdList, options) {
+    // 1. 将后端返回的数字ID转为字符串（关键修复）
+    const stringIdList = personIdList.map((id) => String(id));
+
+    // 2. 初始化依赖数据（全量人员ID是字符串）
+    const deptPersonMap = this.initDeptMap(options);
+    const allPersons = this.getAllPersonIds(options); // 如 ["8", "1", "11", "10", "9"]
+
+    // 3. 修正：用转换后的字符串ID列表判断全量
+    if (stringIdList.length === allPersons.length && stringIdList.every((id) => allPersons.includes(id))) {
+      return ['-1']; // 此时会正确触发“所有人”回显
+    }
+
+    const echoValues = [];
+    const remainingIds = [...stringIdList]; // 用转换后的ID处理后续逻辑
+
+    // 剩余逻辑不变...
+    Object.entries(deptPersonMap).forEach(([deptId, deptPersons]) => {
+      const allIncluded = deptPersons.every((personId) => remainingIds.includes(personId));
+      if (allIncluded) {
+        echoValues.push(deptId);
+        deptPersons.forEach((id) => {
+          const index = remainingIds.indexOf(id);
+          if (index > -1) remainingIds.splice(index, 1);
+        });
+      }
+    });
+
+    echoValues.push(...remainingIds);
+    return echoValues;
+  },
+};
+// 图标类型 颜色映射
+export function iconType(type) {
+  const colorMap = {
+    0: '#125088',
+    1: '#FF0000',
+    2: '#F0D155',
+    3: '#99C0E4',
+    4: '#FF7A21',
+    5: '#323338',
+    6: '#34AA1A',
+  };
+  return { color: colorMap[type] || '#909399' };
+}
+
+// 获取图标颜色数组
+
+export function iconColors() {
+  return ref(['#125088', '#FF0000', '#F0D155', '#99C0E4', '#FF7A21', '#323338', '#34AA1A']);
+}
+
+/**
+ * 转换筛选条件列表为 popover显示的筛选过滤条件 格式
+ * @param {Array} list - 后端返回的筛选条件数组
+ * @returns {Array} 转换后的模板字符串数组
+ */
+/**
+ * 转换筛选条件列表为目标格式
+ * @param {Array} list - 后端返回的筛选条件数组（可能为null/undefined）
+ * @returns {Array} 转换后的模板字符串数组（默认返回空数组）
+ */
+// 操作符选项映射表（内置）
+const operatorOptions = [
+  { label: 'greaterThan', value: 1 },
+  { label: 'greaterThanOrEqualTo', value: 2 },
+  { label: 'lessThan', value: 3 },
+  { label: 'lessThanOrEqualTo', value: 4 },
+  { label: 'equalTo', value: 5 },
+  { label: 'notEqualTo', value: 6 },
+  { label: 'contains', value: 7 },
+  { label: 'notContains', value: 8 },
+  { label: 'yesEmpty', value: 9 },
+  { label: 'notEmpty', value: 10 },
+  { label: 'selectRange', value: 11 },
+  { label: 'dynamicFiltering', value: 12 },
+  { label: 'inRange', value: 13 },
+  { label: 'notInRange', value: 14 },
+  { label: 'isOneOf', value: 15 },
+  { label: 'notAnyOf', value: 16 },
+];
+
+/**
+ * 根据value获取operatorOptions中对应的label
+ * @param {number} value - 操作符的value（如1、12、15等）
+ * @returns {string} 对应的label，若未找到则返回空字符串
+ */
+export function getOperatorLabel(value) {
+  // 查找匹配的选项
+  const option = operatorOptions.find((item) => item.value === value);
+  // 存在则返回label，否则返回空字符串
+  return option ? option.label : '';
+}
+export function processFilterData(editableTabs) {
+  // 校验入参是否为数组
+  if (!Array.isArray(editableTabs)) {
+    console.error('processFilterData：入参必须是数组');
+    return [];
+  }
+
+  return editableTabs.map((item) => {
+    try {
+      // 1. 校验filterString是否为有效字符串
+      if (!item?.filterString || typeof item.filterString !== 'string') {
+        return { ...item, parsedFilter: null };
+      }
+
+      // 2. 解析JSON字符串
+      const parsedArray = JSON.parse(item.filterString);
+
+      // 3. 确保解析结果是数组
+      if (!Array.isArray(parsedArray)) {
+        console.warn(`processFilterData：id为${item.id || '未知'}的filterString解析结果非数组`);
+        return { ...item, parsedFilter: null };
+      }
+
+      // 4. 转换为二维数组（按逗号分割子项）
+      const twoDimensionalArray = parsedArray.map((subItem) => {
+        if (typeof subItem !== 'string') {
+          return [subItem]; // 非字符串子项包裹为单元素数组
+        }
+        // 分割并去除首尾空格
+        return subItem.split(',').map((part) => part.trim());
+      });
+
+      return { ...item, parsedFilter: twoDimensionalArray };
+    } catch (error) {
+      console.error(`processFilterData：解析id为${item.id || '未知'}的filterString失败:`, error);
+      return { ...item, parsedFilter: null };
+    }
+  });
+}
+
+// 通用工具函数：从parsedFilter中查找目标项
+export function findTargetItem(parsedFilter, field) {
+  return Array.isArray(parsedFilter) ? parsedFilter.find((item) => Array.isArray(item) && item.includes(field)) : null;
+}
+// 1. 输入类型字段处理函数（取第三项，控制禁用）
+export function handleInputField(parsedFilter, field, valueRef, disabledRef) {
+  const targetItem = findTargetItem(parsedFilter, field);
+  const thirdItem = targetItem?.[2] ?? '';
+  valueRef.value = thirdItem;
+  disabledRef.value = !!thirdItem;
+}
+
+// 2. 下拉选择类型字段处理函数（取第三项及以后，映射value）
+export function handleSelectField(parsedFilter, field, valueRef, disabledRef, mapList) {
+  const targetItem = findTargetItem(parsedFilter, field);
+  const afterThirdItems = Array.isArray(targetItem) ? targetItem.slice(2) : [];
+  const mappedValues = afterThirdItems
+    .map((text) => mapList.find((item) => item.text === text)?.value ?? null)
+    .filter((val) => val !== null);
+  valueRef.value = mappedValues;
+  disabledRef.value = mappedValues.length > 0;
+}
+
+// 3. 新增：时间范围类型处理函数（含selectRange，取最后两项并转换时间戳）
+export function handleDateRangeField(parsedFilter, field, valueRef, disabledRef) {
+  const targetItem = findTargetItem(parsedFilter, field);
+  // 校验：目标项存在且包含selectRange，且至少有5项（确保最后两项是时间）
+  const isValid = Array.isArray(targetItem) && targetItem.includes('selectRange') && targetItem.length >= 5;
+
+  if (isValid) {
+    // 取最后两项（开始时间、结束时间）
+    const [startStr, endStr] = targetItem.slice(-2);
+    // 转换为时间戳（结束时间默认补到当天23:59:59）
+    const startTimestamp = new Date(startStr).getTime();
+    const endDate = new Date(endStr);
+    endDate.setHours(23, 59, 59, 999); // 补全结束时间到当天最后一刻
+    const endTimestamp = endDate.getTime();
+
+    valueRef.value = [startTimestamp, endTimestamp];
+    disabledRef.value = true; // 有效时禁用
+  } else {
+    valueRef.value = [];
+    disabledRef.value = false; // 无效时不禁用
+  }
+}
+//处理下拉 key  value 不一致问题 统一转为 text value
+export function transformToTextValue(array, textField, valueField) {
+  // 容错处理：原始数组为空或非数组时返回空数组
+  if (!Array.isArray(array)) return [];
+
+  return array.map((item) => ({
+    text: item?.[textField] ?? '',
+    value: item?.[valueField] ?? '',
+  }));
+}