6 changed files with 108 additions and 749 deletions
@ -1,665 +0,0 @@
|
||||
<template> |
||||
<div class="maboxhi" id="bodys"> |
||||
<el-table |
||||
:data="tableData" |
||||
style="width: 100%" |
||||
:show-summary="shownm" |
||||
:summary-method="getSummaries" |
||||
v-loading="loading" |
||||
@selection-change="handleSelectionChange" |
||||
border |
||||
height="100%" |
||||
:row-class-name="tableRowClassName" |
||||
ref="selecttable" |
||||
> |
||||
<el-table-column |
||||
:type="column.type == 0 ? 'selection' : ''" |
||||
:min-width="column.width" |
||||
v-for="(column, index) in newcolumnList" |
||||
:key="column.prop" |
||||
:prop="column.prop" |
||||
:label="column.label" |
||||
:fixed="column.fixed" |
||||
:sortable="column.sortable" |
||||
:selectable="isselectfun" |
||||
v-show="column.head" |
||||
> |
||||
<el-table-column |
||||
:type="column.type == 12 ? 'index' : ''" |
||||
:min-width="column.width" |
||||
:prop="column.prop" |
||||
:label="column.label" |
||||
v-if="column.type != 0" |
||||
flexible |
||||
show-overflow-tooltip |
||||
> |
||||
<template #header> |
||||
<!-- <el-text class="mx-1">{{ column.label }}</el-text> --> |
||||
<el-input |
||||
v-if="column.type == 2" |
||||
v-model="column.values" |
||||
clearable |
||||
:placeholder="`请输入${column.label}`" |
||||
@change="inputchange($event, column)" |
||||
@blur="inputchange($event, column)" |
||||
@clear="inputclear($event, column)" |
||||
/> |
||||
<el-select |
||||
v-if="column.type == 3" |
||||
v-model="column.values" |
||||
class="m-2 selectbr" |
||||
clearable |
||||
:placeholder="`请选择${column.label}`" |
||||
@change="selectchange($event, column)" |
||||
@clear="selectclear($event, column)" |
||||
> |
||||
<el-option |
||||
v-for="item in column.checkarr" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
<el-date-picker |
||||
v-model="column.values" |
||||
v-if="column.type == 4" |
||||
type="date" |
||||
clearable |
||||
style="width: auto" |
||||
:placeholder="`请选择${column.label}`" |
||||
@change="timechange($event, column)" |
||||
@clear="timeclear($event, column)" |
||||
/> |
||||
<el-date-picker |
||||
v-model="column.values" |
||||
v-if="column.type == 5" |
||||
type="datetime" |
||||
clearable |
||||
style="width: auto" |
||||
:placeholder="`请选择${column.label}`" |
||||
format="YYYY/MM/DD HH:mm:ss" |
||||
@change="timechange($event, column)" |
||||
@clear="timeclear($event, column)" |
||||
/> |
||||
</template> |
||||
|
||||
<template #default="scope"> |
||||
<el-text |
||||
class="mx-2 tabculconte" |
||||
v-if="Number(column.type) < 6 && Number(column.type) > 0" |
||||
>{{ scope.row[column.prop] }}</el-text |
||||
> |
||||
<el-switch |
||||
@change="makeCargo(scope.row, column)" |
||||
v-if="column.type == 11" |
||||
v-model="scope.row[column.prop]" |
||||
/> |
||||
<el-text |
||||
style="" |
||||
class="mx-2 tabculconte colors" |
||||
v-if="column.type == 9" |
||||
@click="godowns(scope.row[column.downprop])" |
||||
>{{ scope.row[column.prop] }}</el-text |
||||
> |
||||
<el-input |
||||
@blur="handleNumberRange(column, scope.row)" |
||||
v-if="column.type == 10" |
||||
v-model="scope.row[column.prop]" |
||||
type="number" |
||||
:min="0" |
||||
:max="scope.row.residueNumber" |
||||
></el-input> |
||||
<div class="slotbuts" v-if="column.type == 6"> |
||||
<slot v-if="column.type == 6" :scope="scope"> </slot> |
||||
</div> |
||||
<el-image |
||||
preview-teleported |
||||
v-if="column.type == 7" |
||||
style="width: 60px; height: 60px; margin-left: 10px" |
||||
:initial-index="index" |
||||
:z-index="100" |
||||
v-for="(item, index) in scope.row[column.prop].split(',')" |
||||
:src="item" |
||||
:preview-src-list="scope.row[column.prop].split(',')" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<template #header> |
||||
<div style="display: inline-block"> |
||||
<div class="tilbox"> |
||||
<el-text class="mx-1 tabtitles" @click.stop @dblclick.stop="copyalls(column)">{{ |
||||
column.label |
||||
}}</el-text> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { computed, ref, watchEffect, getCurrentInstance, onMounted, defineExpose } from 'vue'; |
||||
import type { PropType } from 'vue'; |
||||
const { proxy } = getCurrentInstance() as any; |
||||
const selecttable = ref(null); |
||||
/** |
||||
* 对应通知事件 |
||||
* inputTxt:输入框输入的确认事件 |
||||
* timeCheck:时间选择器选择事件 |
||||
* selectCheck:下拉框选中事件 |
||||
* selection:勾选框事件 |
||||
*/ |
||||
onMounted(() => { |
||||
function getWinHight() { |
||||
var windowHight = 0; |
||||
if (document.body.clientHeight && document.documentElement.clientHeight) { |
||||
windowHight = |
||||
document.body.clientHeight < document.documentElement.clientHeight |
||||
? document.body.clientHeight |
||||
: document.documentElement.clientHeight; |
||||
} else { |
||||
// windowHight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
||||
} |
||||
// return windowHight; |
||||
return document.documentElement.clientHeight; |
||||
} |
||||
|
||||
var bodyContent = document.querySelectorAll('.maboxhi'); |
||||
const _height = getWinHight(); |
||||
console.log('bodyContent :>> ', bodyContent); |
||||
// 设置列表的高度 |
||||
bodyContent.forEach(val => { |
||||
val.style.height = _height - val.getBoundingClientRect().top - 65 + 'px'; |
||||
}); |
||||
}); |
||||
interface TableColumnType { |
||||
/** 表格列的key */ |
||||
prop: string; |
||||
/** 表格列的名字 */ |
||||
label: string; |
||||
/** |
||||
* 对应列表头的类型 |
||||
* 0:直接显示为单选，prop，label，全部传空 |
||||
* 1:普通表格，正常显示 |
||||
* 2:带输入框表格 |
||||
* 3:带下拉框表格 |
||||
* 4:带日期选择器列 |
||||
* 5:带日期时间选择器 |
||||
* 6:操作栏，prop，label，全部传空 |
||||
* 7:图片 |
||||
* 8:带背景的文字 |
||||
* 9:下载附件 |
||||
* 10.输入框的表格内容 |
||||
* 11.开关类型 |
||||
*/ |
||||
type: number | string; |
||||
/** 用于接受表头的值 */ |
||||
values: number | string; |
||||
/** 表头宽度 number string undefined */ |
||||
width: number | string | undefined; |
||||
/** 下拉框可选项 */ |
||||
checkarr?: { |
||||
value: string | number; |
||||
label: string | number; |
||||
}[]; |
||||
/** 是否固定表头 |
||||
* true false |
||||
* left right |
||||
*/ |
||||
fixed: boolean | string; |
||||
/** 是否统计 |
||||
* true false 或者直接不写该参数 |
||||
*/ |
||||
isshowSummary?: boolean; |
||||
/** 是否排序 |
||||
* true false 或者直接不写该参数 |
||||
*/ |
||||
sortable?: boolean; |
||||
/** 是否显示列 |
||||
* true false 或者直接不写该参数 |
||||
*/ |
||||
head?: boolean; |
||||
/** 是否文字超出隐藏 |
||||
* 默认超出隐藏 |
||||
* true是不隐藏 |
||||
* false 隐藏 |
||||
*/ |
||||
isextrahide?: boolean; |
||||
/** 下载文件的url的key |
||||
*/ |
||||
downprop?: string; |
||||
/** 输入框内容需要小于的对应字段 |
||||
*/ |
||||
lessThanNum?: string; |
||||
} |
||||
interface TableDataType { |
||||
[key: string]: any; |
||||
} |
||||
let props = defineProps({ |
||||
columnList: { |
||||
type: Array as PropType<TableColumnType[]>, |
||||
required: true, |
||||
}, |
||||
tableData: { |
||||
type: Array as PropType<TableDataType[]>, |
||||
required: true, |
||||
}, |
||||
loading: { |
||||
type: Boolean as PropType<boolean>, |
||||
required: true, |
||||
}, |
||||
//回显勾选的数据列表 |
||||
checkselect: { |
||||
type: Array as PropType<TableDataType[]>, |
||||
required: false, |
||||
}, |
||||
//是否可选择的函数 |
||||
isselectfun: { |
||||
type: Function as PropType<(row: TableDataType) => boolean>, |
||||
required: false, |
||||
default: null, |
||||
}, |
||||
}); |
||||
let selectarr = ref([]); |
||||
const tableRowClassName = ({ row, rowIndex }: { row: TableDataType; rowIndex: number }) => { |
||||
let sfcheck = false; |
||||
selectarr.value.map(item => { |
||||
if (item == row) { |
||||
sfcheck = true; |
||||
} |
||||
}); |
||||
if (sfcheck) { |
||||
return 'table-SelectedRow-bgcolor'; |
||||
} |
||||
return ''; |
||||
}; |
||||
let emit = defineEmits(['inputTxt', 'timeCheck', 'selectCheck', 'selection', 'makeCargo']); |
||||
let newcolumnList = ref<TableColumnType[]>([]); |
||||
watchEffect(() => { |
||||
newcolumnList.value = []; |
||||
props.columnList.map(item => { |
||||
if (!item.head) { |
||||
newcolumnList.value.push(item); |
||||
} |
||||
}); |
||||
}); |
||||
onMounted(() => { |
||||
if (props.checkselect) { |
||||
props.checkselect.map(item => { |
||||
if (props.isselectfun) { |
||||
if (props.isselectfun(item)) { |
||||
selecttable.value.toggleRowSelection(item, true); |
||||
} |
||||
} else { |
||||
selecttable.value.toggleRowSelection(item, true); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
function godowns(url) { |
||||
let a = document.createElement('a'); //创建一个a标签用来跳转 |
||||
a.href = url; //myurl 是后端返回的下载地址 |
||||
// a.target = '_blank'; |
||||
a.download = 'xixi.zip'; //设置下载文件的文件名和文件格式 |
||||
document.body.appendChild(a); //将标签DOM，放置页面 |
||||
a.click(); |
||||
window.URL.revokeObjectURL(url); //释放 url 对象内存 |
||||
document.body.removeChild(a); |
||||
} |
||||
let shownm = ref(false); |
||||
|
||||
function copyalls(column: TableColumnType) { |
||||
const _isReturn = column.type == 1 || column.type == 2 || column.type == 3; |
||||
if (!_isReturn) return; |
||||
let text = ''; |
||||
props.tableData.map((item, index) => { |
||||
if (index < props.tableData.length - 1) { |
||||
if (item[column.prop]) { |
||||
text += `${item[column.prop]}\n`; |
||||
} |
||||
} else { |
||||
if (item[column.prop]) { |
||||
text += `${item[column.prop]}`; |
||||
} else { |
||||
} |
||||
} |
||||
}); |
||||
copyContent(text); |
||||
} |
||||
function handleNumberRange(column: TableColumnType, row: TableDataType) { |
||||
row[column.prop] = row[column.prop].replace(/[^\.\d]/g, ''); //替换掉与数字无关的字符（中英文与符号都会被替换掉，只留下数字，此时值类型为字符串） |
||||
if (row[column.prop]) { |
||||
//如果替换后还有值 |
||||
row[column.prop] = parseInt(row[column.prop]); //把字符型转成整数型 |
||||
} |
||||
|
||||
// if (column.lessThanNum) { |
||||
// if (row[column.prop] > row[column.lessThanNum]) { |
||||
// row[column.prop] = row[column.lessThanNum]; |
||||
// proxy.$message({ |
||||
// type: 'error', |
||||
// message: '数量不能大于可用数量', |
||||
// }); |
||||
// } |
||||
// } |
||||
// 上架数量判断 |
||||
if (row.residueNumber) { |
||||
if (row.enterNum > row.residueNumber) { |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '数量不能大于可上架总数,已调整为最大数量！', |
||||
}); |
||||
row.enterNum = row.residueNumber; |
||||
} |
||||
} |
||||
// 下架数量判断 |
||||
if (row.num) { |
||||
if (row.enterNum > row.num) { |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '数量不能大于可下架总数,已调整为最大数量！', |
||||
}); |
||||
row.enterNum = row.num; |
||||
} |
||||
} |
||||
|
||||
console.log(row, 'row'); |
||||
} |
||||
function handleEdit(index: number, row: TableDataType) { |
||||
console.log(index, row); |
||||
} |
||||
function makeCargo(value, column: TableColumnType) { |
||||
emit('makeCargo', value, column); |
||||
} |
||||
function inputchange(value, column: TableColumnType) { |
||||
if (typeof value == 'string') { |
||||
console.log(value, column); |
||||
emit('inputTxt', value, column); |
||||
} |
||||
} |
||||
function selectchange(value, column: TableColumnType) { |
||||
console.log(value, column); |
||||
emit('selectCheck', value, column); |
||||
} |
||||
function timechange(value, column: TableColumnType) { |
||||
console.log(value, column); |
||||
emit('timeCheck', value, column); |
||||
} |
||||
const handleSelectionChange = (param: TableDataType[]) => { |
||||
// console.log(param) |
||||
selectarr.value = param; |
||||
emit('selection', param); |
||||
}; |
||||
function inputclear(value, column: TableColumnType) { |
||||
console.log('', column); |
||||
emit('inputTxt', '', column); |
||||
} |
||||
function selectclear(value, column: TableColumnType) { |
||||
console.log('', column); |
||||
emit('selectCheck', '', column); |
||||
} |
||||
function timeclear(value, column: TableColumnType) { |
||||
console.log('', column); |
||||
emit('timeCheck', '', column); |
||||
} |
||||
function handleDelete(index: number, row: TableDataType) { |
||||
console.log(index, row); |
||||
} |
||||
const getSummaries = (param: any) => { |
||||
const { columns, data } = param; |
||||
let newarr = []; |
||||
let tji = 0; |
||||
console.log(columns, data); |
||||
columns.map((item, index) => { |
||||
if (index == 0) { |
||||
newarr[index] = '总计'; |
||||
return; |
||||
} |
||||
tji = 0; |
||||
if (props.columnList[index]?.isshowSummary) { |
||||
data.map(ite => { |
||||
tji += Number(ite[props.columnList[index]?.prop] || 0); |
||||
}); |
||||
newarr[index] = tji; |
||||
// shownm.value=true |
||||
} else { |
||||
newarr[index] = null; |
||||
} |
||||
}); |
||||
// console.log(columns) |
||||
console.log(newarr); |
||||
return newarr; |
||||
}; |
||||
watchEffect(() => { |
||||
props.columnList.map(item => { |
||||
if (item.isshowSummary) { |
||||
shownm.value = true; |
||||
} |
||||
}); |
||||
}); |
||||
// 复制文本内容 |
||||
function copyContent(content: string) { |
||||
// 复制结果 |
||||
let copyResult = true; |
||||
// 设置想要复制的文本内容 |
||||
const text = content || '让我们一起快乐的敲代码吧~'; |
||||
// 判断是否支持clipboard方式 |
||||
if (!!window.navigator.clipboard) { |
||||
// 利用clipboard将文本写入剪贴板（这是一个异步promise） |
||||
window.navigator.clipboard |
||||
.writeText(text) |
||||
.then(res => { |
||||
proxy.$message({ |
||||
type: 'success', |
||||
message: '复制成功', |
||||
}); |
||||
// 返回复制操作的最终结果 |
||||
return copyResult; |
||||
}) |
||||
.catch(err => { |
||||
copyResult = false; |
||||
console.log('复制失败', err); |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '复制失败', |
||||
}); |
||||
// 返回复制操作的最终结果 |
||||
return copyResult; |
||||
}); |
||||
} else { |
||||
// 不支持clipboard方式 则采用document.execCommand()方式 |
||||
// 创建一个input元素 |
||||
let inputDom = document.createElement('textarea'); |
||||
// 设置为只读 防止移动端手机上弹出软键盘 |
||||
inputDom.setAttribute('readonly', 'readonly'); |
||||
// 给input元素赋值 |
||||
inputDom.value = text; |
||||
// 将创建的input添加到body |
||||
document.body.appendChild(inputDom); |
||||
// 选中input元素的内容 |
||||
inputDom.select(); |
||||
// 执行浏览器复制命令 |
||||
// 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容） |
||||
// Input要在正常的编辑状态下原生复制方法才会生效 |
||||
const result = document.execCommand('copy'); |
||||
// 判断是否复制成功 |
||||
if (result) { |
||||
proxy.$message({ |
||||
type: 'success', |
||||
message: '复制成功', |
||||
}); |
||||
} else { |
||||
console.log('复制失败'); |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '复制失败', |
||||
}); |
||||
copyResult = false; |
||||
} |
||||
// 复制操作后再将构造的标签 移除 |
||||
document.body.removeChild(inputDom); |
||||
// 返回复制操作的最终结果 |
||||
return copyResult; |
||||
} |
||||
} |
||||
|
||||
defineExpose({}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
// :root{ |
||||
// --el-checkbox-checked-bg-color:'#D3832A'; |
||||
// --el-checkbox-checked-input-border-color:'#D3832A'; |
||||
// } |
||||
|
||||
.el-table { |
||||
//悬停 |
||||
--el-table-row-hover-bg-color: #d3832a; |
||||
} |
||||
|
||||
// .el-table .warning-row { |
||||
// --el-table-tr-bg-color: var(--el-color-warning-light-9); |
||||
// } |
||||
// .el-table .success-row { |
||||
// --el-table-tr-bg-color: var(--el-color-success-light-9); |
||||
// } |
||||
.maboxhi { |
||||
width: 100%; |
||||
// min-height: 950px; |
||||
// height: 841px; |
||||
// flex:1; |
||||
// min-height: 100%; |
||||
} |
||||
.on { |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
font-size: 12px !important; |
||||
} |
||||
.selectbr { |
||||
border: none !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.tabtitles { |
||||
color: #092c4d !important; |
||||
font-size: 12px !important; |
||||
margin-right: 5px !important; |
||||
} |
||||
.el-table .ascending .sort-caret.ascending { |
||||
border-bottom-color: #d3832a !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.el-table .descending .sort-caret.descending { |
||||
border-top-color: #d3832a !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.tabculconte { |
||||
color: #333333 !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.slotbuts { |
||||
height: 25px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 12px !important; |
||||
} |
||||
.slotbuts .el-text { |
||||
color: #d3832a !important; |
||||
margin-right: 10px !important; |
||||
cursor: pointer; |
||||
font-size: 12px !important; |
||||
&:nth-last-child(1) { |
||||
margin-right: 0px !important; |
||||
} |
||||
} |
||||
.el-popper.is-pure.is-light.el-dropdown__popper .el-text { |
||||
color: #d3832a !important; |
||||
margin-right: 10px !important; |
||||
cursor: pointer; |
||||
font-size: 12px !important; |
||||
&:nth-last-child(1) { |
||||
margin-right: 0px !important; |
||||
} |
||||
} |
||||
.el-table .el-input__inner { |
||||
height: 23px !important; |
||||
} |
||||
// .el-checkbox__input.is-checked .el-checkbox__inner{ |
||||
// background-color: #D3832A !important; |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
// .is .el-checkbox__input.is-checked .el-checkbox__inner{ |
||||
// background-color: #D3832A !important; |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
// .is-checked .el-checkbox__inner:hover{ |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
// .el-checkbox__input.is-indeterminate .el-checkbox__inner{ |
||||
// background-color: #D3832A !important; |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
.el-table .el-table__cell { |
||||
padding: 0px !important; |
||||
} |
||||
.el-checkbox__input.is-checked .el-checkbox__inner, |
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
||||
border-color: #d3832a !important; |
||||
background-color: #d3832a !important; |
||||
} |
||||
.el-checkbox__input.is-focus .el-checkbox__inner { |
||||
border-color: #d3832a !important; |
||||
} |
||||
//修改选中后文本的颜色 |
||||
.el-checkbox__input.is-checked + .el-checkbox__label { |
||||
color: #d3832a !important; |
||||
} |
||||
.el-checkbox__inner:hover { |
||||
border-color: #d3832a !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.table-SelectedRow-bgcolor { |
||||
> td { |
||||
background-color: #f7e8d7 !important; |
||||
} |
||||
} |
||||
.colors { |
||||
color: #409eff !important; |
||||
cursor: pointer !important; |
||||
} |
||||
.el-table .cell { |
||||
line-height: 22px !important; |
||||
} |
||||
.el-table .el-input__inner { |
||||
font-size: 12px !important; |
||||
} |
||||
.el-table__body tr.hover-row.current-row > td, |
||||
.el-table__body tr.hover-row.el-table__row--striped.current-row > td, |
||||
.el-table__body tr.hover-row.el-table__row--striped > td, |
||||
.el-table__body tr.hover-row > td { |
||||
background-color: #d3d8e1 !important; |
||||
} |
||||
.el-date-editor.el-input, |
||||
.el-date-editor.el-input__wrapper { |
||||
// height: 23px !important; |
||||
} |
||||
.copys { |
||||
display: inline-block; |
||||
margin-left: 5px; |
||||
padding-top: 5px; |
||||
margin-right: 5px; |
||||
} |
||||
.tilbox { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.el-table .el-popper { |
||||
max-width: 20% !important; |
||||
} |
||||
.el-input { |
||||
// width: 200px !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue