| | |
| | | :border="border" |
| | | :data="tableData" |
| | | :header-cell-style="{ background: '#F0F1F5', color: '#333333' }" |
| | | height="calc(100vh - 18.5em)" |
| | | :height="height" |
| | | :highlight-current-row="highlightCurrentRow" |
| | | :row-class-name="rowClassName" |
| | | :row-style="rowStyle" |
| | | :row-key="rowKey" |
| | | style="width: 100%" |
| | | :style="tableStyle" |
| | | tooltip-effect="dark" |
| | | @row-click="rowClick" |
| | | @current-change="currentChange" |
| | | :expand-row-keys="expandRowKeys" |
| | | :show-summary="isShowSummary" |
| | | :summary-method="summaryMethod" |
| | | @row-click="rowClick" |
| | | @current-change="currentChange" |
| | | @selection-change="handleSelectionChange" |
| | | @expand-change="expandChange" |
| | | class="lims-table" |
| | | > |
| | | <el-table-column |
| | |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | |
| | | <el-table-column |
| | | v-for="(item, index) in column" |
| | | v-for="(item, index) in visibleColumns" |
| | | :key="index" |
| | | :column-key="item.columnKey" |
| | | :filter-method="item.filterHandler" |
| | |
| | | :fixed="item.fixed" |
| | | :label="item.label" |
| | | :prop="item.prop" |
| | | show-overflow-tooltip |
| | | :show-overflow-tooltip="item.dataType !== 'action' && item.dataType !== 'slot'" |
| | | :align="item.align" |
| | | :sortable="!!item.sortable" |
| | | :type="item.type" |
| | | :width="item.width" |
| | | :minWidth="item.minWidth" |
| | | > |
| | | <template #header="scope"> |
| | | <div class="pim-table-header-cell"> |
| | | <div class="pim-table-header-title"> |
| | | {{ item.label }} |
| | | </div> |
| | | <div v-if="item.headerSlot" class="pim-table-header-extra"> |
| | | <slot :name="item.headerSlot" :column="scope.column" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template |
| | | v-if="item.hasOwnProperty('colunmTemplate')" |
| | | #[item.colunmTemplate]="scope" |
| | |
| | | </div> |
| | | |
| | | <!-- 按钮 --> |
| | | <div v-else-if="item.dataType == 'action'"> |
| | | <div v-else-if="item.dataType == 'action'" @click.stop> |
| | | <template v-for="(o, key) in item.operation" :key="key"> |
| | | <el-button |
| | | v-show="o.type != 'upload'" |
| | | size="small" |
| | | v-if="o.showHide ? o.showHide(scope.row) : true" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | | :plain="o.plain" |
| | |
| | | : o.color, |
| | | }" |
| | | link |
| | | @click="o.clickFun(scope.row)" |
| | | @click.stop="o.clickFun(scope.row)" |
| | | :key="key" |
| | | > |
| | | {{ o.name }} |
| | |
| | | (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id) |
| | | " |
| | | ref="uploadRef" |
| | | size="small" |
| | | :multiple="o.multiple ? o.multiple : false" |
| | | :limit="1" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | |
| | | :show-file-list="false" |
| | | > |
| | | <el-button |
| | | :size="o.size ? o.size : 'small'" |
| | | link |
| | | type="primary" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | v-if="isShowPagination" |
| | | :total="page.total" |
| | | :layout="page.layout" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | |
| | | |
| | | <script setup> |
| | | import pagination from "./Pagination.vue"; |
| | | import { ref, inject, getCurrentInstance } from "vue"; |
| | | import { ref, inject, getCurrentInstance, computed, unref } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | |
| | | // 获取全局的 uploadHeader |
| | |
| | | const uploadHeader = proxy.uploadHeader; |
| | | const javaApi = proxy.javaApi; |
| | | |
| | | const emit = defineEmits(["pagination"]); |
| | | const emit = defineEmits(["pagination", "expand-change", "selection-change", "row-click"]); |
| | | |
| | | // Filters |
| | | const typeFn = (val, row) => { |
| | |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | handleSelectionChange: { |
| | | type: Function, |
| | | default: () => {}, |
| | | height: { |
| | | type: [Number, String], |
| | | default: "calc(100vh - 22em)", |
| | | }, |
| | | expandRowKeys: { |
| | | type: Array, |
| | | default: () => [], |
| | | }, |
| | | summaryMethod: { |
| | | type: Function, |
| | |
| | | isSelection: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | isShowPagination: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | isShowSummary: { |
| | | type: Boolean, |
| | |
| | | }, |
| | | rowKey: { |
| | | type: String, |
| | | default: undefined, |
| | | default: 'id', |
| | | }, |
| | | page: { |
| | | type: Object, |
| | |
| | | type: Number, |
| | | default: 0, |
| | | }, |
| | | tableStyle: { |
| | | type: [String, Object], |
| | | default: () => ({ width: "100%" }), |
| | | }, |
| | | }); |
| | | |
| | | const resolveColumnVisible = (visible) => { |
| | | if (visible === undefined) return true; |
| | | if (typeof visible === "function") { |
| | | try { |
| | | return !!visible(); |
| | | } catch (error) { |
| | | console.warn("PIMTable column visible function error:", error); |
| | | return true; |
| | | } |
| | | } |
| | | return !!unref(visible); |
| | | }; |
| | | |
| | | const visibleColumns = computed(() => { |
| | | return (props.column || []).filter((item) => resolveColumnVisible(item?.visible)); |
| | | }); |
| | | |
| | | // Data |
| | |
| | | const paginationSearch = ({ page, limit }) => { |
| | | emit("pagination", { page: page, limit: limit }); |
| | | }; |
| | | |
| | | const rowClick = (row) => { |
| | | emit("row-click", row); |
| | | }; |
| | | |
| | | const expandChange = (row, expandedRows) => { |
| | | emit("expand-change", row, expandedRows); |
| | | }; |
| | | |
| | | const handleSelectionChange = (newSelection) => { |
| | | emit("selection-change", newSelection); |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | padding-right: 0 !important; |
| | | padding-left: 0 !important; |
| | | } |
| | | |
| | | .pim-table-header-extra :deep(.el-input), |
| | | .pim-table-header-extra :deep(.el-select) { |
| | | width: 100%; |
| | | } |
| | | </style> |