syntec3-0-ui-components-test 1.0.0

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

@@ -0,0 +1,472 @@
+<template>
+  <el-drawer
+    v-model="viewRecordDrawer"
+    :z-index="1000"
+    size="80%"
+    :with-header="false"
+    :before-close="closeViewRecordDrawer"
+    data-test-id="EL-DRAWER-yW3j6a"
+  >
+    <div style="display: flex; align-items: center" data-test-id="DIV-vOcYvj">
+      <span class="mdi mdi-post-outline" data-test-id="SPAN-QcjZ2G" />
+      <span style="color: #165389; font-weight: bold; margin: 0 0.5rem" data-test-id="SPAN-JLNrR8">{{
+        t('viewOperationRecordTxt')
+      }}</span>
+      <el-tooltip
+        :content="t('viewOperationRecordTips')"
+        placement="right"
+        :enterable="false"
+        data-test-id="EL-TOOLTIP-r2lUDt"
+      >
+        <span class="mdi mdi-help-circle-outline" style="color: #909399; font-size: 1rem" data-test-id="SPAN-DFDBGw" />
+      </el-tooltip>
+    </div>
+    <div class="view-operation-record" data-test-id="DIV-Ig4Lp5">
+      <!-- 筛选区域 -->
+      <div class="filter-card" data-test-id="DIV-BY1ENL">
+        <el-form :model="queryForm" label-width="auto" class="query-form" size="default" data-test-id="EL-FORM-DQPNj7">
+          <el-row :gutter="20" data-test-id="EL-ROW-XqFgSB">
+            <el-col :span="8" data-test-id="EL-COL-44Qf7a">
+              <el-form-item :label="t('operator')" data-test-id="EL-FORM-ITEM-jhywJa">
+                <el-select
+                  v-model="queryForm.operators"
+                  clearable
+                  multiple
+                  collapse-tags
+                  :collapse-tags-tooltip="true"
+                  filterable
+                  :placeholder="t('PleaseSelect')"
+                  data-test-id="EL-SELECT-2iKRMnl"
+                >
+                  <el-option
+                    v-for="(item, index) in operatorList"
+                    :key="index"
+                    :label="item.name + ' ( ' + item.empNumber + ' )'"
+                    :value="item.id"
+                    :data-test-id="`EL-OPTION-rIctaO-${index}`"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="8" data-test-id="EL-COL-JWN3c6">
+              <el-form-item :label="t('operationTimeRange')" data-test-id="EL-FORM-ITEM-qGA6FG">
+                <el-date-picker
+                  v-model="queryForm.timeRange"
+                  type="datetimerange"
+                  range-separator="~"
+                  :start-placeholder="t('PleaseSelect')"
+                  :end-placeholder="t('PleaseSelect')"
+                  clearable
+                  data-test-id="EL-DATE-PICKER-sXaAjJ"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" data-test-id="EL-COL-7wsX67">
+              <div style="text-align: center" data-test-id="DIV-ePTtCw">
+                <el-button type="primary" data-test-id="EL-BUTTON-iepjfm" @click="handleQuery">{{
+                  t('query')
+                }}</el-button>
+                <el-button data-test-id="EL-BUTTON-misE7D" @click="handleReset">{{ t('reset') }}</el-button>
+                <el-button link type="primary" data-test-id="EL-BUTTON-a3sO22ZO" @click="handleExport">
+                  <v-icon style="margin-right: 0.5rem" class="mdi mdi-file-export" data-test-id="V-ICON-Mbdhkt" />
+                  {{ $t('export') }}
+                </el-button>
+              </div>
+            </el-col>
+            <el-col :span="8" data-test-id="EL-COL-1mxuMy">
+              <el-form-item :label="t('operationType')" data-test-id="EL-FORM-ITEM-HAaHnq">
+                <el-select
+                  v-model="queryForm.types"
+                  :placeholder="t('PleaseSelect')"
+                  clearable
+                  multiple
+                  collapse-tags
+                  :collapse-tags-tooltip="true"
+                  data-test-id="EL-SELECT-mg4gIc"
+                >
+                  <el-option
+                    v-for="(item, index) in operationTypes"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    :data-test-id="`EL-OPTION-SDFctaO-${index}`"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+
+      <!-- 列表区域 -->
+      <div class="table-container" data-test-id="DIV-wGYn7a">
+        <div class="table-wrapper" data-test-id="DIV-tableWrapper">
+          <el-table
+            :data="tableData"
+            border
+            :loading="tableLoading"
+            header-row-class-name="tableHeader"
+            header-cell-class-name="tableHeaderCell"
+            :scrollbar-always-on="true"
+            style="width: 100%"
+            size="default"
+            data-test-id="EL-TABLE-6CNtjP"
+          >
+            <el-table-column type="index" label="#" width="60" align="center" data-test-id="EL-TABLE-COLUMN-O8UyCw">
+              <template #default="scope">
+                <span data-test-id="SPAN-HEnHjc">{{ calcIndex(scope.$index) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-for="(item, index) in headers"
+              :key="index"
+              :label="item.text"
+              :prop="item.value"
+              :width="item.width"
+              align="center"
+              show-overflow-tooltip
+              :data-test-id="`EL-TABLE-COLUMN-uzDbCR-${index}`"
+            >
+              <template #default="{ row, column }">
+                <span v-if="column.property === 'operateDate'" data-test-id="SPAN-Gd107Y">
+                  {{ row.operateDate ? dayjs(row['operateDate']).format('YYYY-MM-DD HH:mm:ss') : '-' }}
+                </span>
+                <span v-if="column.property === 'operateType'" data-test-id="SPAN-DiW6W9">
+                  <el-text v-if="row.operateType === 1" data-test-id="EL-TEXT-6b8Abr">{{ t('newView') }}</el-text>
+                  <el-text v-if="row.operateType === 2" data-test-id="EL-TEXT-XzqTuW">{{ t('editView') }}</el-text>
+                  <!-- <el-text v-if="row.operateType===3">{{t('copyView')}}</el-text> -->
+                  <el-text v-if="row.operateType === 4" data-test-id="EL-TEXT-NrIXXs">{{ t('deleteView') }}</el-text>
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination-wrapper" data-test-id="DIV-paginationWrapper">
+          <Pagination
+            style="background-color: transparent; padding-bottom: 0.625rem; padding-top: 1.25rem"
+            :total="page.total"
+            :current-page="page.currentPage"
+            :page-type="2"
+            :page-size="page.pageSize"
+            :current-count="tableData.length"
+            :permission-code="pageData.permissionCode"
+            :has-selected="false"
+            data-test-id="PAGINATION-vcMBuD"
+            @changePage="changePage"
+            @fMounted="handleFMounted"
+          >
+          </Pagination>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { objectToExcelTitle, objectToExcelBodyWithoutMap } from '@/scriptFiles/common/objectDataProcessing';
+import Pagination from '@/components/Pagination.vue';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism';
+import { useI18n } from 'vue-i18n';
+import dayjs from 'dayjs';
+import EXCEL from '@/utils/excel.js';
+const props = defineProps({
+  pageData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const viewRecordDrawer = ref(false);
+const { t } = useI18n();
+// 分页
+const page = ref({
+  total: 0,
+  currentPage: 1,
+  pageSize: 20,
+});
+// 表标题
+const headers = computed(() => [
+  { text: t('operator'), value: 'operateUserName', width: 150 }, //操作人员
+  { text: t('operationTime'), value: 'operateDate', width: 220 }, //操作时间区间
+  { text: t('operationType'), value: 'operateType', width: 150 }, //操作类型
+  { text: t('operationDetails'), value: 'detail', width: '' }, //操作详情
+]);
+
+// 操作类型配置
+const operationTypes = computed(() => [
+  { label: t('newView'), value: 1 },
+  { label: t('editView'), value: 2 },
+  // { label: t('copyView'), value: 3 },
+  { label: t('deleteView'), value: 4 },
+]);
+const operatorList = ref([]); //操作人员列表
+//获取操作人员
+async function getEmployeeList() {
+  return apiFunction
+    .getViewEmployeeList({
+      permissionCode: props.pageData.permissionCode,
+    })
+    .then(async (res) => {
+      if (res.data.code === 0) {
+        operatorList.value = res.data.content;
+      } else {
+        ElMessage.error(t(res.data.message));
+      }
+    });
+}
+// 查询表单
+const queryForm = ref({
+  operators: '',
+  timeRange: [],
+  types: [],
+});
+
+const tableData = ref([]);
+const tableLoading = ref(false);
+
+// 拆分operateDetail
+function getOperateDetail(fieldString, type) {
+  const fields = fieldString.split(',').map((field) => field.replace(/'/g, '').replace(/"/g, '').trim());
+  while (fields.length < 4) fields.push('');
+  const [first, second, third, fourth] = fields;
+  const typeMap = {
+    1: () => t('addViewSuccessful', { name: first }),
+    4: () => t('deleteViewSuccessful', { name: first }),
+    2: () => {
+      const operations = [];
+      if (second) operations.push(t('adjustViewName', { name: first, newName: second }));
+      if (third) operations.push(t('adjustDataFiltering', { name: first }));
+      if (fourth) operations.push(t('adjustViewPermission', { name: first }));
+      return operations.length > 0 ? `${t('viewEditSuccessful')}, ${operations.join(', ')}` : t('viewEditSuccessful');
+    },
+  };
+  return typeMap[type] ? typeMap[type]() : '';
+}
+// 获取数据
+const getViewLogList = async () => {
+  await apiFunction
+    .getViewOpLogList({
+      permissionCode: props.pageData.permissionCode,
+      operateUser: queryForm.value.operators || [],
+      operateStartDate: queryForm.value.timeRange?.length
+        ? dayjs(queryForm.value.timeRange[0]).format('YYYY-MM-DD HH:mm')
+        : '',
+      operateEndDate: queryForm.value.timeRange?.length
+        ? dayjs(queryForm.value.timeRange[1]).format('YYYY-MM-DD HH:mm')
+        : '',
+      operateType: queryForm.value.types.length ? queryForm.value.types : [],
+      startIndex: (page.value.currentPage - 1) * page.value.pageSize,
+      count: page.value.pageSize,
+    })
+    .then((res) => {
+      if (res.data.code === 0) {
+        tableLoading.value = false;
+        tableData.value = res.data.content.data.map((item) => {
+          return {
+            ...item,
+            detail: getOperateDetail(item.operateDetail, item.operateType),
+          };
+        });
+        page.value.total = res.data.content.totalCount;
+      } else {
+        ElMessage.error(t(res.data.message));
+        tableLoading.value = false;
+      }
+    })
+    .catch()
+    .finally(() => {
+      tableLoading.value = false;
+    });
+};
+// 查询数据
+const handleQuery = () => {
+  page.value.currentPage = 1; // 重置到第一页
+  tableLoading.value = true;
+  getViewLogList();
+};
+
+// 重置
+const handleReset = () => {
+  queryForm.value = {
+    operators: [],
+    timeRange: [],
+    types: [],
+  };
+  page.value = {
+    currentPage: 1,
+    pageSize: 20,
+  };
+  getViewLogList();
+};
+// 分页方法
+const changePage = async (val) => {
+  page.value.currentPage = val.page;
+  page.value.pageSize = val.size;
+  getViewLogList();
+};
+
+const handleFMounted = (arg, pageParam) => {
+  page.value.currentPage = pageParam.page;
+  page.value.pageSize = pageParam.size;
+};
+const calcIndex = (index) => {
+  return Number(index) + 1 + (page.value.currentPage - 1) * page.value.pageSize;
+};
+// 获取全部视图记录数据
+const getLogList = ref([]);
+const getAllLogData = async (v) => {
+  try {
+    const {
+      data: { code, content },
+    } = await apiFunction.getViewOpLogList({
+      permissionCode: props.pageData.permissionCode,
+      operateUser: queryForm.value.operators || [],
+      operateStartDate: queryForm.value.timeRange?.length
+        ? dayjs(queryForm.value.timeRange[0]).format('YYYY-MM-DD HH:mm')
+        : '',
+      operateEndDate: queryForm.value.timeRange?.length
+        ? dayjs(queryForm.value.timeRange[1]).format('YYYY-MM-DD HH:mm')
+        : '',
+      operateType: queryForm.value.types ? queryForm.value.types : [],
+      startIndex: v,
+      count: 200,
+    });
+    if (code === 0) {
+      getLogList.value = getLogList.value.concat(content.data);
+      if (content.totalCount > getLogList.value.length) {
+        await getAllLogData((v += 200));
+      }
+    }
+  } catch (error) {
+    ElMessage.error(t(error.message));
+  }
+};
+// 日期转换
+function dateConvert(time) {
+  return time ? dayjs(time).format('YY-MM-DD HH:mm:ss') : '--';
+}
+function getOptypeName(val) {
+  switch (val) {
+    case 1:
+      return 'newView';
+    case 2:
+      return 'editView';
+    case 3:
+      return 'copyView';
+    case 4:
+      return 'deleteView';
+  }
+}
+// 导出
+const handleExport = async () => {
+  const title = objectToExcelTitle(headers.value);
+  getLogList.value = [];
+  await getAllLogData(0);
+  const tempList = [];
+  getLogList.value.forEach((element) => {
+    const tempObject = {
+      operateUserName: element.operateUserName,
+      operateDate: dateConvert(element.operateDate),
+      operateType: t(getOptypeName(element.operateType)),
+      detail: getOperateDetail(element.operateDetail, element.operateType),
+    };
+    tempList.push(tempObject);
+  });
+  const bodyWithoutMap = objectToExcelBodyWithoutMap(tempList, headers.value, '', '');
+  const body = [];
+  bodyWithoutMap.map((item, index) => {
+    const temp = { ...item };
+    const arr = Object.values(temp);
+    body[index] = arr;
+    return body;
+  });
+  const wscols = Array.from({ length: headers.value.length }, () => ({ wch: 19 }));
+  EXCEL.exportFromArray({
+    title,
+    body,
+    name: t('viewOperationRecord'),
+    suffix: 'xlsx',
+    sheetName: t('viewOperationRecord'),
+    wscols: wscols,
+  });
+};
+// 打开视图列表抽屉
+function open() {
+  viewRecordDrawer.value = true;
+  getEmployeeList();
+  handleQuery();
+}
+
+// 关闭视图列表抽屉
+function closeViewRecordDrawer() {
+  viewRecordDrawer.value = false;
+  tableData.value = [];
+  queryForm.value = {
+    operators: [],
+    timeRange: [],
+    types: [],
+  };
+  page.value.total = 0;
+}
+defineExpose({
+  open,
+});
+</script>
+
+<style scoped>
+.view-operation-record {
+  padding: 16px 0;
+  height: calc(100% - 26px);
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-card {
+  background-color: #fff;
+  flex-shrink: 0;
+  /* 防止筛选区域被压缩 */
+}
+
+.query-form {
+  margin-bottom: 0;
+}
+
+.button-group {
+  margin-top: 10px;
+}
+
+/* 新增的表格容器样式 */
+.table-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  margin-top: 16px;
+  min-height: 0;
+  /* 重要：防止flex item溢出 */
+}
+
+.table-wrapper {
+  flex: 1;
+  min-height: 0;
+  /* 重要：防止flex item溢出 */
+}
+
+/* 确保表格填满容器 */
+.table-wrapper :deep(.el-table) {
+  height: 100% !important;
+}
+
+.pagination-wrapper {
+  flex-shrink: 0;
+  /* 分页区域不被压缩 */
+  background-color: #fff;
+  border-top: 1px solid #ebeef5;
+  /* 可选：添加分割线 */
+}
+</style>