src/views/targetImprove/components/Table.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="page_table">
+    <el-table
+      class="el-table--border"
+      ref="tableRef"
+      :show-header="showHeader"
+      :data="tableData"
+      stripe
+      v-loading="loading"
+      element-loading-text="拼命加载中……"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="#ffffff"
+      element-loading-custom-class="loading_icon"
+      :row-class-name="tableRowClassName"
+      @row-click="(row, column) => $emit('rowClick', row)"
+      :span-method="spanMethod"
+    >
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          :key="item?.name"
+          v-if="!item.hidden"
+          :prop="item.name"
+          :min-width="item.minWidth"
+          :width="item.width"
+          :label="item.label"
+          :fixed="item.fixed ? item.fixed : false"
+          :align="item.align"
+        >
+          <template v-if="item.customHeader" v-slot:header>
+            <slot :name="'header-' + item.name"></slot>
+          </template>
+
+          <template v-if="item.custom" v-slot:default="row">
+            <slot :name="item.name" :row="row.row" :currentIndex="(row.$index + 1)"></slot>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <div class="page_pagination" v-if="!hidePagination">
+      <el-pagination
+        :hide-on-single-page="hidesinglePage"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="[20, 50, 100]"
+        background
+        layout="prev, pager, next"
+        :total="Number(totalNum)"
+        @current-change="(val) => $emit('paginationChange', { type: 'currentPage', val })"
+        @size-change="(val) => $emit('paginationChange', { type: 'pageSize', val })"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+interface tableColumnItm  {
+  name:String,
+  label:String,
+  width?:String,
+  fixed?:String,
+  align?:String,
+  minWidth?:String,
+  custom:Boolean,
+  customHeader?:Boolean,
+  hidden:Boolean,
+}
+*/
+export default {
+  name: 'Table',
+  props: {
+    tableData: {
+      type: Array,
+      required: true
+    },
+    tableColumns: {
+      type: Array,  //类型为 tableColumnItm[]
+      required: true
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    totalNum: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    hidesinglePage: {
+      type: Boolean
+    },
+    hidePagination: {
+      type: Boolean,
+      default: false
+    },
+    spanMethod: {
+      type: Function,
+      required: false
+    },
+    tableRowClassName: {
+      type: Function,
+      required: false
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      // Vue 2 中没有 defineModel，tableRef 仅作为内部状态或普通 ref
+      // 父组件获取表格实例请使用 this.$refs.tableRef
+      tableRef: null 
+    };
+  },
+  mounted(){
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page_table {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  ::v-deep .el-table {
+    tr th.el-table__cell {
+      font-size: 14px;
+    }
+  }
+
+  .el-table {
+    flex-grow: 1;
+    ::v-deep .el-scrollbar__view {
+      height: 100%;
+    }
+  }
+
+  ::v-deep .el-table__body {
+    tbody tr.even_row td {
+      background-color: white;
+    }
+    tbody tr.odd_row td {
+      background-color: rgb(250, 250, 250);
+    }
+    tbody tr.hover-row td {
+      background-color: rgb(245, 247, 250) !important; 
+    }
+    tbody tr td:last-child:not([rowspan="1"]) {
+      border-left: solid rgba(235, 238, 245) 1px;
+    }
+  }
+}
+
+::v-deep .loading_icon {
+  .el-loading-spinner {
+    .el-loading-text {
+      color: #2e64fa;
+    }
+  }
+}
+</style>

src/views/targetImprove/components/TableRowStatus.vue

@@ -0,0 +1,71 @@
+<template>
+  <span class="table_row_status">
+    <span :class="statusNumToName(useStatus)?.themeClass"></span>
+    {{ statusNumToName(useStatus)?.title }}
+  </span>
+</template>
+
+<script>
+
+/*
+interface statusMsgItm {
+  statusFlag:Number | String,
+  title:String,
+  themeClass: 'not_included_icon' | 'no_release_icon' 
+              | 'normal_icon' | 'abnormal_icon' | 'audit_icon' 
+              | 'yes_release_icon' | 'right_icon' | 'ready_close_icon' | 'need_summary_icon'
+}
+*/
+
+export default {
+  name: 'TableRowStatus',
+  props: {
+    useStatus: {
+      type: [String, Number],
+      required: true,
+      default: null
+    },
+    statusMsg: {
+      type: Array, //类型为  statusMsgItm[]
+      required: true,
+      // 引用类型 default 必须是函数
+      default: () => [] 
+    }
+  },
+  methods: {
+    /**
+     * 根据状态值查找对应的配置项
+     * @param {String|Number} useStatus 
+     * @returns {Object}
+     */
+    statusNumToName(useStatus) {
+      if (!this.statusMsg || !this.statusMsg.length) return {};
+      const result = this.statusMsg.find(item => item.statusFlag == useStatus);
+      if (result) {
+        return result;
+      }
+      // 未找到时返回默认空对象，防止模板渲染报错
+      return {
+        title: '',
+        themeClass: ''
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.table_row_status {
+  display: inline-flex;
+  align-items: center;
+  
+  span:first-child {
+    display: inline-block;
+    margin-right: 4px;
+    // 这里可以定义图标的基础样式，例如宽高
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+}
+</style>

src/views/targetImprove/practice/practiceResults.vue

@@ -1,13 +0,0 @@
-<template>
-    <div class="practiceAnswer">
-        <div class="title">
-            <span>练习结果</span>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.practiceAnswer {
-  background-color: #ffffff;
-}
-</style>