|
|
|
@ -1,117 +1,52 @@ |
|
|
|
<template> |
|
|
|
<div class="tableClass"> |
|
|
|
<el-table :data="tableData" height="calc(100vh - 355px)" border @select="selectChange" @select-all="selectChange" |
|
|
|
fit :row-key="getRowKeys" ref="tableRef"> |
|
|
|
<el-table-column type="selection" width="50" :reserve-selection="true" fixed="left"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column type="index" v-if="hiddenXuhao" width="60" :reserve-selection="true" fixed="left" label="序号"> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ pageSize * (currentPage - 1) + scope.$index + 1 }}</span> |
|
|
|
<vxe-table show-overflow :data="tableData" round :height="690" :scroll-y="{ enabled: true, gt: 20 }" |
|
|
|
:checkbox-config="{ labelField: 'seq', highlight: true }" @checkbox-all="selectAllChangeEvent" |
|
|
|
@checkbox-change="selectChange" ref="tableRef"> |
|
|
|
<vxe-column type="seq" width="70" v-if="hiddenXuhao"></vxe-column> |
|
|
|
<vxe-column type="checkbox" width="70" fixed="left"></vxe-column> |
|
|
|
<vxe-column :field="headerItem.prop" :title="headerItem.label" :min-width="`${headerItem.label.length * 23 + 24}`" |
|
|
|
v-for="(headerItem, headerIndex) in tableHeader" :key="headerIndex" :fixed="!!headerItem.fixed ? 'left' : ''" |
|
|
|
:sortable="headerItem.isSort"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<template v-if="headerItem.type === 'text'"> |
|
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
|
</template> |
|
|
|
<template v-else-if="headerItem.type === 'select'"> |
|
|
|
<span>{{ (_.find(headerItem.tableDisplay, { value: `${row[headerItem.prop]}` }) || {}).label }}</span> |
|
|
|
</template> |
|
|
|
<template v-else-if="headerItem.type === 'date'"> |
|
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
|
</template> |
|
|
|
<template v-else-if="headerItem.type === 'number'"> |
|
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
|
</template> |
|
|
|
<template v-else>{{ row[headerItem.prop] }}</template> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-for="(headerItem, headerIndex) in tableHeader" :label="headerItem.label" show-overflow-tooltip |
|
|
|
:key="headerIndex" :min-width="`${headerItem.label.length * 23 + 22}px`" :fixed="!!headerItem.fixed"> |
|
|
|
<template #header="{ column, $index }"> |
|
|
|
<div> |
|
|
|
<span :style="`${column.label === '得分' ? 'color:#F56C6C' : ''}`">{{ column.label }}</span> |
|
|
|
<!-- <span v-if="headerItem.isSearch"> |
|
|
|
<el-popover :width="350" trigger="click" placement="bottom-start" :hide-after="50" |
|
|
|
:visible="headerItem.popoverVisible"> |
|
|
|
<template #reference> |
|
|
|
<span @click="openPopoverVisible(headerItem)"> |
|
|
|
<el-icon style="position: relative;top: 2px;" v-if="!searchParams[headerItem.prop]"> |
|
|
|
<Filter /> |
|
|
|
</el-icon> |
|
|
|
<el-icon style="position: relative;top: 2px;" v-else> |
|
|
|
<Checked /> |
|
|
|
</el-icon> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
<template #default> |
|
|
|
<div> |
|
|
|
<template v-if="headerItem.type === 'text'"> |
|
|
|
<el-input v-model="searchParams[headerItem.prop]" style="width: 200px;padding-right: 20px;" |
|
|
|
clearable @keyup.enter="searchValue(headerItem)" /> |
|
|
|
</template> |
|
|
|
<template v-if="headerItem.type === 'select'"> |
|
|
|
<el-select v-model="searchParams[headerItem.prop]" size="large" |
|
|
|
style="width: 200px;padding-right: 20px;" clearable @change="searchValue(headerItem)"> |
|
|
|
<el-option v-for="item in headerItem.tableDisplay" :key="item.value" :label="item.label" |
|
|
|
:value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</template> |
|
|
|
<template v-else-if="headerItem.type === 'date'"> |
|
|
|
<el-date-picker v-model="searchParams[headerItem.prop]" type="date" |
|
|
|
:disabled="['create_at', 'update_at'].indexOf(headerItem.prop) !== -1" |
|
|
|
:placeholder="`请选择${headerItem.label}`" format="YYYY-MM-DD" value-format="YYYY-MM-DD" |
|
|
|
style="width: 200px;padding-right: 20px;" clearable @change="searchValue(headerItem)" /> |
|
|
|
</template> |
|
|
|
<el-button type="primary" @click="searchValue(headerItem)"> |
|
|
|
<el-icon> |
|
|
|
<Search /> |
|
|
|
</el-icon> |
|
|
|
<span>搜索</span> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-popover> |
|
|
|
</span> --> |
|
|
|
<span v-if="headerItem.isSort"> |
|
|
|
<span @click="headerSort(headerItem)"> |
|
|
|
<el-icon style="position: relative;top: 2px;" v-if="headerItem.sort === ''"> |
|
|
|
<Sort /> |
|
|
|
</el-icon> |
|
|
|
<el-icon style="position: relative;top: 2px;" v-else-if="headerItem.sort === 1"> |
|
|
|
<SortUp /> |
|
|
|
</el-icon> |
|
|
|
<el-icon style="position: relative;top: 2px;" v-else-if="headerItem.sort === -1"> |
|
|
|
<SortDown /> |
|
|
|
</el-icon> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template #default="{ row, column, $index }"> |
|
|
|
<div :style="`${column.label === '得分' ? 'color:#F56C6C' : ''}`"> |
|
|
|
<template v-if="headerItem.type === 'text'"> |
|
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
|
</template> |
|
|
|
<template v-else-if="headerItem.type === 'select'"> |
|
|
|
<span>{{ (_.find(headerItem.tableDisplay, { value: `${row[headerItem.prop]}` }) || {}).label }}</span> |
|
|
|
</template> |
|
|
|
<template v-else-if="headerItem.type === 'date'"> |
|
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
|
</template> |
|
|
|
<template v-else-if="headerItem.type === 'number'"> |
|
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
|
</template> |
|
|
|
<template v-else>{{ row[headerItem.prop] }}</template> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="操作" width="145"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="primary" circle @click="optClick(scope.row, 'edit')"> |
|
|
|
</vxe-column> |
|
|
|
<vxe-column fixed="right" title="操作" width="145"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<el-button type="primary" circle @click="optClick(row, 'edit')"> |
|
|
|
<el-icon> |
|
|
|
<Edit /> |
|
|
|
</el-icon> |
|
|
|
</el-button> |
|
|
|
<!-- <el-button type="info" circle @click="optClick(scope.row, 'info')"> |
|
|
|
<!-- <el-button type="info" circle @click="optClick(row, 'info')"> |
|
|
|
<el-icon> |
|
|
|
<InfoFilled /> |
|
|
|
</el-icon> |
|
|
|
</el-button> --> |
|
|
|
<el-button type="danger" circle @click="optClick(scope.row, 'del')"> |
|
|
|
<el-button type="danger" circle @click="optClick(row, 'del')"> |
|
|
|
<el-icon> |
|
|
|
<Delete /> |
|
|
|
</el-icon> |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-pagination style="margin:8px 0 0 0;place-content:center;" v-model:current-page="currentPage" |
|
|
|
</vxe-column> |
|
|
|
</vxe-table> |
|
|
|
<!-- <el-pagination style="margin:8px 0 0 0;place-content:center;" v-model:current-page="currentPage" |
|
|
|
v-model:page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:page-sizes="pageSizes"></el-pagination> |
|
|
|
:page-sizes="pageSizes"></el-pagination> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -171,8 +106,19 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectChange(selection) { |
|
|
|
this.$emit("selectChange", selection) |
|
|
|
selectChange({ checked }) { |
|
|
|
let $table = this.$refs.tableRef |
|
|
|
if ($table) { |
|
|
|
let selection = $table.getCheckboxRecords() |
|
|
|
this.$emit("selectChange", selection) |
|
|
|
} |
|
|
|
}, |
|
|
|
selectAllChangeEvent({ checked }) { |
|
|
|
let $table = this.$refs.tableRef |
|
|
|
if ($table) { |
|
|
|
let selection = $table.getCheckboxRecords() |
|
|
|
this.$emit("selectChange", selection) |
|
|
|
} |
|
|
|
}, |
|
|
|
handleSizeChange(pageSize) { |
|
|
|
this.$emit("handleSizeChange", pageSize) |
|
|
|
@ -188,7 +134,10 @@ export default { |
|
|
|
return row.id; // 每条数据的唯一识别值 |
|
|
|
}, |
|
|
|
clearSelection() { |
|
|
|
this.$refs.tableRef.clearSelection() |
|
|
|
const $table = this.$refs.tableRef |
|
|
|
if ($table) { |
|
|
|
$table.clearCheckboxRow() |
|
|
|
} |
|
|
|
}, |
|
|
|
searchValue(item) { |
|
|
|
item.popoverVisible = false |
|
|
|
@ -241,6 +190,7 @@ export default { |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.tableClass { |
|
|
|
height: calc(100vh - 325px); |
|
|
|
text-align: center; |
|
|
|
text-align-last: center; |
|
|
|
} |
|
|
|
|
