Browse Source

【EDI前端】暂存

web
安虹睿 2 weeks ago
parent
commit
de86739eb4
  1. 201
      Web/src/components/elTable/index.vue

201
Web/src/components/elTable/index.vue

@ -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>
Loading…
Cancel
Save