|
|
@@ -0,0 +1,194 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ class="security-check-table-wrapper"
|
|
|
+ :style="{ height: tableWrapperHeight }"
|
|
|
+ >
|
|
|
+ <a-table
|
|
|
+ :data-source="tableData"
|
|
|
+ :columns="columns"
|
|
|
+ :row-key="rowKey"
|
|
|
+ :row-selection="
|
|
|
+ withSelection
|
|
|
+ ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
|
|
|
+ : null
|
|
|
+ "
|
|
|
+ :rowClassName="rowClassName"
|
|
|
+ bordered
|
|
|
+ :pagination="pagination"
|
|
|
+ @change="handleTableChange"
|
|
|
+ :loading="loading"
|
|
|
+ :scroll="{ y: 650 }"
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ v-if="withOperateColumn"
|
|
|
+ slot="operation"
|
|
|
+ slot-scope="text, record"
|
|
|
+ >
|
|
|
+ <div class="column-operate">
|
|
|
+ <span
|
|
|
+ class="cell-operate-edit"
|
|
|
+ @click="editRow(record)"
|
|
|
+ >修改</span>
|
|
|
+ <span
|
|
|
+ class="cell-operate-delete"
|
|
|
+ @click="deleteRow(record)"
|
|
|
+ >删除</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'SecurityCheckTable',
|
|
|
+ props: {
|
|
|
+ height: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: '50vh'
|
|
|
+ },
|
|
|
+ tableCols: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ tableData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ rowKey: {
|
|
|
+ type: String,
|
|
|
+ default: 'key'
|
|
|
+ },
|
|
|
+ withSelection: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ loading: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ showSummary: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectedRowKeys: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ columns() {
|
|
|
+ function setClickHandler(columns) {
|
|
|
+ return columns.map(col => {
|
|
|
+ if (col.clickHandler) {
|
|
|
+ col.customCell = (row, rowIndex) => {
|
|
|
+ return {
|
|
|
+ class: 'cell-click',
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ col.clickHandler(row, rowIndex)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (col.children) {
|
|
|
+ setClickHandler(col.children)
|
|
|
+ }
|
|
|
+ return col
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return setClickHandler(this.tableCols)
|
|
|
+ },
|
|
|
+ tableWrapperHeight() {
|
|
|
+ return typeof this.height === 'number' ? this.height + 'px' : this.height
|
|
|
+ },
|
|
|
+ withOperateColumn() {
|
|
|
+ return this.columns.find(col => col.dataIndex === 'operation')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSelectChange(selectedRowKeys, selectedRows) {
|
|
|
+ // console.log(selectedRowKeys)
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
+ },
|
|
|
+ rowClassName(index) {
|
|
|
+ if (index.index % 2 == 0) {
|
|
|
+ return 'warning-row'
|
|
|
+ } else {
|
|
|
+ return 'warning-rows'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editRow(row) {
|
|
|
+ console.log('edit')
|
|
|
+ },
|
|
|
+ deleteRow(row) {
|
|
|
+ console.log('delete')
|
|
|
+ },
|
|
|
+ clickHandler(index) {
|
|
|
+ console.log(index)
|
|
|
+ },
|
|
|
+ handleTableChange(pagination, filters, sorter) {
|
|
|
+ this.$emit('handleTableChange', pagination)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.security-check-table-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ ::v-deep .ant-table {
|
|
|
+ width: 100%;
|
|
|
+ .ant-table-thead {
|
|
|
+ th {
|
|
|
+ padding: 18px 12px;
|
|
|
+ }
|
|
|
+ .ant-table-column-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ color: #101116;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ant-table-tbody {
|
|
|
+ .warning-row {
|
|
|
+ background-color: #f3f5f8;
|
|
|
+ padding: 9px 16px;
|
|
|
+ }
|
|
|
+ .warning-rows {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 9px 16px;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ color: #101116;
|
|
|
+ &.cell-click {
|
|
|
+ color: #2d67e3;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .column-operate {
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-right: 25px;
|
|
|
+ }
|
|
|
+ &.cell-operate-edit {
|
|
|
+ color: #2d67e3;
|
|
|
+ }
|
|
|
+ &.cell-operate-delete {
|
|
|
+ color: #ea4545;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
