|
|
|
@ -13,10 +13,10 @@ |
|
|
|
> --> |
|
|
|
<div class="mainTable" :style="{ height: `${sidebarHeight}px` }"> |
|
|
|
<n-spin :show="loadingShow"> |
|
|
|
<vxe-grid ref="tableRef" class="tableGrid" align="center" auto-resize :height="sidebarHeight - 4" |
|
|
|
<vxe-grid ref="tableRef" class="tableGrid" align="center" auto-resize keep-source :height="sidebarHeight - 4" |
|
|
|
header-row-class-name="headerRowClass" header-cell-class-name="headerCellClass" row-class-name="tableRowClass" |
|
|
|
cell-class-name="tableCellClass" :sort-config="{ multiple: true, trigger: 'cell' }" stripe border="outer" |
|
|
|
:column-config="{ resizable: true, useKey: true }" :row-config="{ useKey: true }" :columns="tableColumn" |
|
|
|
cell-class-name="tableCellClass" :sort-config="{ multiple: true, trigger: 'cell' }" :stripe="true" :border="false" |
|
|
|
:column-config="{ resizable: true, useKey: true }" :row-config="{ useKey: true }" :span-method="mergeRowMethod" :columns="tableColumn" |
|
|
|
:data="tableData" @cell-dblclick="cellDBLClickEvent"> |
|
|
|
<template #deviceuuid_default="{ row }"> |
|
|
|
<div class="title"> |
|
|
|
@ -83,7 +83,10 @@ const menuKey = ref(0); |
|
|
|
const tableColumn = ref([]); |
|
|
|
const tableData = ref<TableVo[]>([]); |
|
|
|
const tableRef = ref<VxeGridInstance<TableVo>>(); |
|
|
|
const fields = ref(['deviceuuid']) //需要合并的列数据字段 |
|
|
|
const cellRow = ref({}) |
|
|
|
const cellColumn = ref() |
|
|
|
const cellField = ref(); |
|
|
|
// const fields = ref(['deviceuuid']) //需要合并的列数据字段 |
|
|
|
// const waringArrow = ref([]) |
|
|
|
|
|
|
|
interface FormDataVO { |
|
|
|
@ -187,6 +190,7 @@ mitt.on('treeData', (res: any) => { |
|
|
|
const params = res; |
|
|
|
editConfig(params).then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
mitt.emit('treeClose', true); |
|
|
|
} |
|
|
|
}); |
|
|
|
// tableColumn.value=res |
|
|
|
@ -252,7 +256,7 @@ function tableHeader() { |
|
|
|
field: 'id', |
|
|
|
type: 'html', |
|
|
|
formatter: formatRole, |
|
|
|
visible:false |
|
|
|
visible: false |
|
|
|
}, |
|
|
|
]; |
|
|
|
console.log(tableCessText) |
|
|
|
@ -315,14 +319,17 @@ function tableDatas() { |
|
|
|
|
|
|
|
const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }) => { |
|
|
|
//双击单元格 |
|
|
|
console.log(row, column); |
|
|
|
const cellFiled = row[column.field]; |
|
|
|
console.log("cellData--", row, column); |
|
|
|
const cellField = row[column.field]; |
|
|
|
const data = row.data; |
|
|
|
if (cellFiled.canBeControl === '1') { |
|
|
|
cellRow.value = row |
|
|
|
cellColumn.value = column |
|
|
|
cellField.value = cellField |
|
|
|
if (cellField.canBeControl === '1') { |
|
|
|
modalTitle.value = column.title; |
|
|
|
formData.value.url = data.url; |
|
|
|
formData.value.deviceName = cellFiled.deviceName; |
|
|
|
formData.value.value = cellFiled.val; |
|
|
|
formData.value.deviceName = cellField.deviceName; |
|
|
|
formData.value.value = cellField.val; |
|
|
|
editModal.value = true; |
|
|
|
} |
|
|
|
console.log(row[column.field]); |
|
|
|
@ -332,33 +339,35 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => { |
|
|
|
//表单参数为object时处理 |
|
|
|
// const iconFont=cellValue.changeProp===-1?'<i class="iconfont icon-decline" />':(cellValue.changeProp===1?'<i class="iconfont icon-rise" />':'<i/>') |
|
|
|
// const cellData = `<span class="cellClass ${cellValue.alertProp===1?'warning':''}">${cellValue.val}</span>${iconFont}`; |
|
|
|
const cellData = `<span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : ''}">${cellValue.val}</span><i class="iconfont ${cellValue.changeProp === -1 ? 'icon-decline' : (cellValue.changeProp === 1 ? 'icon-rise' : '')}" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`; |
|
|
|
const cellData = `<span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : (cellValue.canBeControl === '1' ? 'cellEdit' : '')}">${cellValue.val}</span><i class="iconfont ${cellValue.changeProp === -1 ? 'icon-decline' : (cellValue.changeProp === 1 ? 'icon-rise' : '')}" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`; |
|
|
|
return cellData; |
|
|
|
}; |
|
|
|
|
|
|
|
// 通用行合并函数（将相同多列数据合并为一行） |
|
|
|
// const mergeRowMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => { |
|
|
|
// const cellValue = row[column.field] |
|
|
|
// if (cellValue && fields.value.includes(column.field)) { |
|
|
|
// const prevRow = visibleData[_rowIndex - 1] |
|
|
|
// let nextRow = visibleData[_rowIndex + 1] |
|
|
|
// if (prevRow && prevRow[column.field] === cellValue) { |
|
|
|
// return { rowspan: 0, colspan: 0 } |
|
|
|
// } else { |
|
|
|
// let countRowspan = 1 |
|
|
|
// while (nextRow && nextRow[column.field] === cellValue) { |
|
|
|
// nextRow = visibleData[++countRowspan + _rowIndex] |
|
|
|
// } |
|
|
|
// if (countRowspan > 1) { |
|
|
|
// return { rowspan: countRowspan, colspan: 1 } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
const mergeRowMethod: VxeTablePropTypes.SpanMethod<TableVo> = ({ row, _rowIndex, column, visibleData }) => { |
|
|
|
const fields = ['title'] |
|
|
|
const cellValue = row[column.field] |
|
|
|
if (cellValue && fields.includes(column.field)) { |
|
|
|
const prevRow = visibleData[_rowIndex - 1] |
|
|
|
let nextRow = visibleData[_rowIndex + 1] |
|
|
|
if (prevRow && prevRow[column.field] === cellValue) { |
|
|
|
return { rowspan: 0, colspan: 0 } |
|
|
|
} else { |
|
|
|
let countRowspan = 1 |
|
|
|
while (nextRow && nextRow[column.field] === cellValue) { |
|
|
|
nextRow = visibleData[++countRowspan + _rowIndex] |
|
|
|
} |
|
|
|
if (countRowspan > 1) { |
|
|
|
return { rowspan: countRowspan, colspan: 1 } |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const submitEvent: VxeFormEvents.Submit = () => { |
|
|
|
//修改数据之后通过websocket传给后端 |
|
|
|
formLoading.value = true; |
|
|
|
const $table = tableRef.value; |
|
|
|
const submitData = { |
|
|
|
code: 'W01', |
|
|
|
data: { |
|
|
|
@ -371,6 +380,14 @@ const submitEvent: VxeFormEvents.Submit = () => { |
|
|
|
socket.send(submitData); |
|
|
|
formLoading.value = false; |
|
|
|
editModal.value = false; |
|
|
|
|
|
|
|
if ($table) { |
|
|
|
const row = cellRow.value |
|
|
|
const field = cellColumn.value.field; |
|
|
|
row[field].val = formData.value.value |
|
|
|
$table.reloadRow(row, null, field) |
|
|
|
} |
|
|
|
|
|
|
|
// VXETable.modal.message({ content: '保存成功', status: 'success' }); |
|
|
|
}; |
|
|
|
|
|
|
|
|
fuguobin
1 year ago