|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<el-table |
|
|
|
ref="tableRef" |
|
|
|
ref="table_Ref" |
|
|
|
row-key="id" |
|
|
|
:data="props.tableData" |
|
|
|
:border="true" |
|
|
@ -33,91 +33,93 @@ |
|
|
|
:type="btn.type" |
|
|
|
:link="btn.link" |
|
|
|
@click="leftOperationHadel(btn,scope)" |
|
|
|
:disabled="typeof btn.disabled == 'function' ? btn.disabled(scope.row,scope) : btn.disabled" |
|
|
|
v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide" |
|
|
|
>{{btn.label}}</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<!-- 数据列 --> |
|
|
|
<el-table-column |
|
|
|
v-for="(item, index) in props.tableColumns" |
|
|
|
:key="index" |
|
|
|
:label="item.title" |
|
|
|
:prop="item.prop" |
|
|
|
:sortable="item.sortable || 'custom'" |
|
|
|
:fixed="item.fixed" |
|
|
|
:width="item.width || props.columnWidth" |
|
|
|
:align="item.align || props.columnAlign" |
|
|
|
:show-overflow-tooltip="item.tooltip" |
|
|
|
:header-align="item.headerAlign || props.columnHeaderAlign"> |
|
|
|
<template #default="scope"> |
|
|
|
<!-- 时间格式 --> |
|
|
|
<span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span> |
|
|
|
<!-- 标签格式 --> |
|
|
|
<el-tag |
|
|
|
v-else-if="item.type == 'tagFilter'" |
|
|
|
:type="formatTableTagFilter('type',scope.row,item)" |
|
|
|
> |
|
|
|
{{ formatTableTagFilter('label',scope.row,item) }} |
|
|
|
</el-tag> |
|
|
|
<!-- 字典 --> |
|
|
|
<span v-else-if="item.type == 'filter'">{{ formatTableTagFilter('label',scope.row,item) }}</span> |
|
|
|
<!-- 【可编辑】文本 --> |
|
|
|
<el-input |
|
|
|
v-else-if="item.type == 'input'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
:placeholder="item.label" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
:clearable="!item.noClear" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
@clear="editItemClearHandle(item,scope)" |
|
|
|
/> |
|
|
|
<!-- 【可编辑】字典选择 --> |
|
|
|
<el-select |
|
|
|
v-else-if="item.type == 'filterSelect'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
:filterable="!item.noSearch" |
|
|
|
placeholder="请选择" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
:clearable="!item.noClear" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
@clear="editItemClearHandle(item,scope)"> |
|
|
|
<el-option |
|
|
|
v-for="(op,op_index) in item.options" |
|
|
|
:key="op_index" |
|
|
|
:label="op.label" |
|
|
|
:value="op.value" |
|
|
|
<template v-for="(item, index) in innerTableColums" :key="index"> |
|
|
|
<!-- 数据列 --> |
|
|
|
<el-table-column |
|
|
|
v-if="!item.setNoShow" |
|
|
|
:label="item.title" |
|
|
|
:prop="item.prop" |
|
|
|
:sortable="item.sortable || 'custom'" |
|
|
|
:fixed="item.fixed" |
|
|
|
:width="item.width || props.columnWidth" |
|
|
|
:align="item.align || props.columnAlign" |
|
|
|
:show-overflow-tooltip="item.tooltip" |
|
|
|
:header-align="item.headerAlign || props.columnHeaderAlign"> |
|
|
|
<template #default="scope"> |
|
|
|
<!-- 时间格式 --> |
|
|
|
<span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span> |
|
|
|
<!-- 标签格式 --> |
|
|
|
<el-tag |
|
|
|
v-else-if="item.type == 'tagFilter'" |
|
|
|
:type="formatTableTagFilter('type',scope.row,item)" |
|
|
|
> |
|
|
|
{{ formatTableTagFilter('label',scope.row,item) }} |
|
|
|
</el-tag> |
|
|
|
<!-- 字典 --> |
|
|
|
<span v-else-if="item.type == 'filter'">{{ formatTableTagFilter('label',scope.row,item) }}</span> |
|
|
|
<!-- 【可编辑】文本 --> |
|
|
|
<el-input |
|
|
|
v-else-if="item.type == 'input'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
:placeholder="item.label" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
:clearable="!item.noClear" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
@clear="editItemClearHandle(item,scope)" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
<!-- 【可编辑】时间 --> |
|
|
|
<el-date-picker |
|
|
|
v-else-if="item.type == 'datetimeInput'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
style="width:100%" |
|
|
|
:type="item.inputType || 'datetime'" |
|
|
|
:format="item.format || 'YYYY-MM-DD HH:mm:ss'" |
|
|
|
:value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'" |
|
|
|
:clearable="!item.noClear" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
@clear="editItemClearHandle(item,scope)" |
|
|
|
/> |
|
|
|
<!-- 【可编辑】数字 --> |
|
|
|
<el-input-number |
|
|
|
v-else-if="item.type == 'numberInput'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
:min="item.min" |
|
|
|
:max="item.max" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
/> |
|
|
|
<!-- 正常直接显示 --> |
|
|
|
<span v-else> {{ scope.row[item.prop] }} </span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<!-- 【可编辑】字典选择 --> |
|
|
|
<el-select |
|
|
|
v-else-if="item.type == 'filterSelect'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
:filterable="!item.noSearch" |
|
|
|
placeholder="请选择" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
:clearable="!item.noClear" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
@clear="editItemClearHandle(item,scope)"> |
|
|
|
<el-option |
|
|
|
v-for="(op,op_index) in item.options" |
|
|
|
:key="op_index" |
|
|
|
:label="op.label" |
|
|
|
:value="op.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
<!-- 【可编辑】时间 --> |
|
|
|
<el-date-picker |
|
|
|
v-else-if="item.type == 'datetimeInput'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
style="width:100%" |
|
|
|
:type="item.inputType || 'datetime'" |
|
|
|
:format="item.format || 'YYYY-MM-DD HH:mm:ss'" |
|
|
|
:value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'" |
|
|
|
:clearable="!item.noClear" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
@clear="editItemClearHandle(item,scope)" |
|
|
|
/> |
|
|
|
<!-- 【可编辑】数字 --> |
|
|
|
<el-input-number |
|
|
|
v-else-if="item.type == 'numberInput'" |
|
|
|
v-model="scope.row[item.prop]" |
|
|
|
:min="item.min" |
|
|
|
:max="item.max" |
|
|
|
:disabled="getEditItemDisabled(item,scope.row,scope)" |
|
|
|
@focus="(event)=>{editItemFocusHandle(item,scope,event)}" |
|
|
|
@change="editItemChangeHandle(item,scope,arguments)" |
|
|
|
/> |
|
|
|
<!-- 正常直接显示 --> |
|
|
|
<span v-else> {{ scope.row[item.prop] }} </span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
|
|
|
|
<!-- 右侧操作列 --> |
|
|
|
<el-table-column |
|
|
@ -144,13 +146,18 @@ |
|
|
|
|
|
|
|
<script setup> |
|
|
|
defineOptions({ name: 'elTable' }) |
|
|
|
import { h,reactive, ref, onMounted } from 'vue' |
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
import { h,reactive, ref, onMounted,defineExpose,nextTick } from 'vue' |
|
|
|
import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus' |
|
|
|
import { formatTimeStrToStr } from "@/utils/formatTime"; |
|
|
|
|
|
|
|
const state = reactive({}) |
|
|
|
import { getLocalTableColumnsName } from '@/utils/common/index' |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
// 特殊的column缓存名称 |
|
|
|
specialLocalColumnName:{ |
|
|
|
type: String, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 多选 |
|
|
|
multipleTable:{ |
|
|
|
type: Boolean, |
|
|
@ -228,6 +235,9 @@ |
|
|
|
}, |
|
|
|
}) |
|
|
|
|
|
|
|
const innerTableColums = ref([]) |
|
|
|
innerTableColums.value = props.tableColumns |
|
|
|
|
|
|
|
const emits = defineEmits([ |
|
|
|
'sortChange', |
|
|
|
'leftOperationHadel', |
|
|
@ -238,6 +248,20 @@ |
|
|
|
'editItemClearHandle', |
|
|
|
]) |
|
|
|
|
|
|
|
const table_Ref = ref(null) |
|
|
|
let _localColumName = props.specialLocalColumnName || useRoute().name |
|
|
|
const localTableColumnsName = getLocalTableColumnsName(_localColumName) |
|
|
|
|
|
|
|
window.addEventListener('setItemEvent', (data) => { |
|
|
|
// console.log("监听到触发了localStorage.setItem事件",data) |
|
|
|
nextTick(() => { |
|
|
|
if(data.key == localTableColumnsName){ |
|
|
|
innerTableColums.value = JSON.parse(data.newValue) |
|
|
|
if(table_Ref.value)table_Ref.value.doLayout() |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
// 多选 |
|
|
|
function tableSelectionHandle (val){ |
|
|
|
emits('tableSelectionHandle',val) |
|
|
@ -317,6 +341,10 @@ |
|
|
|
emits('rightOperationHadel',btn,scope) |
|
|
|
} |
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
table_Ref, |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => {}) |
|
|
|
|
|
|
|
</script> |
|
|
@ -333,5 +361,8 @@ |
|
|
|
background:#fff; |
|
|
|
} |
|
|
|
} |
|
|
|
.table-danger-row{ |
|
|
|
background:#ffe8e8 !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|