You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
9.9 KiB
353 lines
9.9 KiB
<template>
|
|
<el-form style="height:calc(100% - 45px)" :model="props" :rules="props.tableFormRules" ref="tableForm_Ref">
|
|
<el-table
|
|
style="height:100%"
|
|
row-key="id"
|
|
:data="props.tableData"
|
|
:border="true"
|
|
@sort-change="sortChange"
|
|
@selection-change="tableSelectionHandle"
|
|
:row-class-name="props.tableRowClassName"
|
|
:cell-class-name="props.tableCellClassName"
|
|
>
|
|
<!-- 多选框 -->
|
|
<el-table-column
|
|
v-if="props.multipleTable"
|
|
type="selection"
|
|
:fixed="'left'"
|
|
width="55"
|
|
:selectable="selectableDisabled"
|
|
/>
|
|
<!-- 序号 -->
|
|
<el-table-column v-if="props.showTableIndex" :fixed="'left'" type="index" width="50" />
|
|
<!-- 左侧操作列 -->
|
|
<el-table-column
|
|
v-if="props.leftOperation && props.leftOperation.length > 0"
|
|
:fixed="'left'"
|
|
:width="props.leftOperationColumnWidth"
|
|
label="操作"
|
|
:align="'center'">
|
|
<template #default="scope">
|
|
<el-button
|
|
v-for="(btn,index) in props.leftOperation"
|
|
:key="index"
|
|
:type="btn.type"
|
|
:link="btn.link"
|
|
@click="leftOperationHadel(btn,scope)"
|
|
>{{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"
|
|
:header-align="item.headerAlign || props.columnHeaderAlign">
|
|
<template #default="scope">
|
|
<!-- `tableData[${scope.$index}][${item.prop}]` -->
|
|
<el-form-item
|
|
:prop="'tableData.'+ scope.$index + '.' + item.prop"
|
|
:rules="props.tableFormRules[item.prop]"
|
|
>
|
|
<!-- 时间格式 -->
|
|
<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"
|
|
/>
|
|
</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>
|
|
</el-form-item>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 右侧操作列 -->
|
|
<el-table-column
|
|
v-if="props.rightOperation && props.rightOperation.length > 0"
|
|
v-auth-any="getShowRightOpera()"
|
|
:fixed="'right'"
|
|
:width="props.rightOperationColumnWidth"
|
|
:align="'center'"
|
|
label="操作">
|
|
<template #default="scope">
|
|
<el-button
|
|
v-for="(btn,index) in props.rightOperation"
|
|
v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide"
|
|
:key="index"
|
|
:type="btn.type"
|
|
:link="btn.link"
|
|
@click="rightOperationHadel(btn,scope)"
|
|
v-auth="btn.auth"
|
|
>{{btn.label}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineOptions({ name: 'elTable' })
|
|
import { reactive, ref, onMounted,defineExpose } from 'vue'
|
|
import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
|
|
import { formatTimeStrToStr } from "@/utils/formatTime";
|
|
|
|
const state = reactive({})
|
|
|
|
const props = defineProps({
|
|
// 多选
|
|
multipleTable:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 序号
|
|
showTableIndex:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 左侧操作列
|
|
leftOperation:{
|
|
type: Object,
|
|
default: null
|
|
},
|
|
// 左侧操作列宽度
|
|
leftOperationColumnWidth:{
|
|
type: Number,
|
|
default: 120
|
|
},
|
|
// 右侧操作列
|
|
rightOperation:{
|
|
type: Object,
|
|
default: null
|
|
},
|
|
// 右侧操作列宽度
|
|
rightOperationColumnWidth:{
|
|
type: Number,
|
|
default: 150
|
|
},
|
|
// table数据
|
|
tableData: {
|
|
type: Object,
|
|
default: []
|
|
},
|
|
// table表头
|
|
tableColumns: {
|
|
type: Object,
|
|
default: []
|
|
},
|
|
// 表头宽度
|
|
columnWidth:{
|
|
type: Number,
|
|
default: null
|
|
},
|
|
// 表头对齐
|
|
columnHeaderAlign:{
|
|
type: String,
|
|
default: 'center'
|
|
},
|
|
// 表内容对齐
|
|
columnAlign:{
|
|
type: String,
|
|
default: 'center'
|
|
},
|
|
// table输入表单的rules
|
|
tableFormRules: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
// 可编辑单元格判断禁用
|
|
getEditItemDisabled:{
|
|
type: [Function,Boolean],
|
|
default: false
|
|
},
|
|
// table的复选框是否禁用判断
|
|
selectableDisabled:{
|
|
type: [Function,Boolean],
|
|
default: true
|
|
},
|
|
// 行class
|
|
tableRowClassName:{
|
|
type: Function,
|
|
default: null
|
|
},
|
|
// 单元格class
|
|
tableCellClassName:{
|
|
type: Function,
|
|
default: null
|
|
},
|
|
})
|
|
|
|
const emits = defineEmits([
|
|
'sortChange',
|
|
'leftOperationHadel',
|
|
'rightOperationHadel',
|
|
'tableSelectionHandle',
|
|
'editItemFocusHandle',
|
|
'editItemChangeHandle',
|
|
'editItemClearHandle',
|
|
])
|
|
|
|
// 多选
|
|
function tableSelectionHandle (val){
|
|
emits('tableSelectionHandle',val)
|
|
}
|
|
|
|
// 格式化时间
|
|
function formatTableDate(time) {
|
|
let _time = '-'
|
|
if (time) { _time = formatTimeStrToStr(time) }
|
|
return _time
|
|
}
|
|
|
|
// 格式化TagFilter
|
|
function formatTableTagFilter(type,row,item){
|
|
let _op = item.options.filter(op=>op.value == row[item.prop])
|
|
if(!_op || _op.length <=0 || !_op[0][type]){
|
|
if(type=='type'){return 'info'}
|
|
else{return '--'}
|
|
}else{
|
|
return _op[0][type]
|
|
}
|
|
}
|
|
|
|
|
|
//排序
|
|
function sortChange(data) {
|
|
emits('sortChange',data)
|
|
}
|
|
|
|
// 左侧操作列
|
|
function leftOperationHadel(btn,scope) {
|
|
emits('leftOperationHadel',btn,scope)
|
|
}
|
|
|
|
// 判断是否显示右侧操作权限
|
|
function getShowRightOpera(){
|
|
let _arr = []
|
|
props.rightOperation.forEach(item=>{_arr.push(item.auth)})
|
|
return _arr
|
|
}
|
|
|
|
// 判断可编辑元素是否禁用
|
|
function getEditItemDisabled(item,row,scope){
|
|
if(typeof props.getEditItemDisabled == 'boolean'){
|
|
return props.getEditItemDisabled
|
|
}else{
|
|
return props.getEditItemDisabled(item,row,scope.$index)
|
|
}
|
|
}
|
|
|
|
// table的复选框是否禁用判断
|
|
function selectableDisabled(row,index){
|
|
if(typeof props.selectableDisabled == 'function'){
|
|
return props.selectableDisabled(row,index)
|
|
}else{
|
|
return props.selectableDisabled
|
|
}
|
|
}
|
|
|
|
// 可编辑元素Focus事件
|
|
function editItemFocusHandle(item,scope,event) {
|
|
emits('editItemFocusHandle',item,scope,event)
|
|
}
|
|
|
|
// 可编辑元素change事件
|
|
function editItemChangeHandle(item,scope,data) {
|
|
emits('editItemChangeHandle',item,scope,data)
|
|
}
|
|
|
|
// 可编辑元素clear事件
|
|
function editItemClearHandle(item,scope) {
|
|
emits('editItemClearHandle',item,scope)
|
|
}
|
|
|
|
// 右侧操作列
|
|
function rightOperationHadel(btn,scope) {
|
|
emits('rightOperationHadel',btn,scope)
|
|
}
|
|
|
|
const tableForm_Ref = ref(null)
|
|
defineExpose({
|
|
tableForm_Ref,
|
|
});
|
|
onMounted(() => {})
|
|
|
|
</script>
|
|
|
|
<style scope lang="scss">
|
|
.current-select-tableRow{
|
|
background:#e1f3d8 !important;
|
|
td{
|
|
background:#e1f3d8 !important;
|
|
}
|
|
}
|
|
.normal-tableRow{
|
|
td{
|
|
background:#fff;
|
|
}
|
|
}
|
|
</style>
|
|
|