html
复制代码
<template>
<div class="d-tag-list-wrapper padding-top_10">
<div class="radio-button-list-wrapper">
<template v-for="table in DTagList585248.tableList">
<span
class="radio-btn"
:class="DTagList585248.checked === table.id ? 'active-btn' : ''"
@click="DTagList585248.checked = table.id"
>
{{ table.buttonLabel }}
</span>
</template>
</div>
<div class="table-list-wrapper">
<el-button
size="default"
class="custom-button custom-button-margin"
@clikc="DTagList585248_AddRow"
>
添加
</el-button>
<el-table
border
:data="DTagList585248_currentTagTableData()"
header-row-class-name="headerClass"
:header-cell-style="headerCellStyle"
:row-style="stripeRow"
:cell-style="{ padding: '3px' }"
>
<el-table-column
v-for="(item, index) in DTagList585248.tableList[-1].tableHead"
:key="index"
:prop="item.columnName"
:label="item.title"
:width="
countColWidth(item, index, DTagList585248.tableList[-1].tableHead)
"
>
</el-table-column>
<el-table-column
label="操作"
width="60"
v-if="
DTagList585248.tableList[-1].tableHead &&
DTagList585248.tableList[-1].tableHead.length
"
align="center"
class-name="custom-column"
>
<template slot-scope="scope">
<el-button
class="custom-button"
:type="!scope.row.key ? '' : 'danger'"
:disabled="!scope.row.key"
size="default"
@click="DTagList585248_DeleteRow(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
<template slot="empty">
<el-empty description="空空如也"></el-empty>
</template>
</el-table>
<el-pagination
:page-sizes="DTagList585248.tableList[-1].pageSizes"
class="custom-pagination"
layout="total, sizes,prev, pager, next,jumper"
:page-size="DTagList585248.tableList[-1].pagination.pageSize"
:current-page="DTagList585248.tableList[-1].pagination.currentPage"
:total="DTagList585248.tableList[-1].pagination.total"
@size-change="DTagList585248_SizeChange"
@current-change="DTagList585248_CurrentChange"
>
</el-pagination>
</div>
</div>
</template>
<script>
import global from "@/assets/js/global"
import {
defineComponent,
toRefs,
onMounted,
reactive,
getCurrentInstance
} from 'vue';
import {
useRouter,
useRoute
} from "vue-router";
import axios from "axios";
import {
ElMessage
} from "element-plus";
export default defineComponent({
components: {},
props: {},
setup() {
const instance = getCurrentInstance()
const router = useRouter();
const route = useRoute();
const ctxData = reactive({
dForm: {
serverIp: 'localhost',
serverPort: '8080',
interfaceName: 'interface',
tableName: null,
tableID: null,
formName: null,
formId: null,
},
DTagList585248: {
"buttonAlign": "left",
"tableHeight": 495,
"checked": "132485",
"tableList": [{
"id": "132485",
"buttonLabel": "表格1",
"closeable": true,
"methodName": "",
"documentName": "",
"exportObjectFlag": false,
"tableId": 7,
"tableName": "WMS_AutoRcvDocLine",
"tableHead": null,
"tableData": null,
"axiosGetTableHeadUrl": "",
"axiosGetTableDataUrl": "",
"pagination": {
"currentPage": 85,
"pageSize": 10,
"total": 0
},
"newRows": [{
"key": "402807",
"ID": null,
"AutoRcvDoc": null,
"AutoShelfIn": null,
"AutoShelfInDocNo": null,
"DeliveryDocNo": null,
"DeliveryDate": null,
"SupplierCode": null,
"SupplierName": null,
"StoreType": null,
"Status": null,
"Item": null,
"ItemCode": null,
"ItemName": null,
"UOM": null,
"UOMName": null,
"iQty": null,
"DisableDate": null,
"cMemo": null,
"CreateBy": null,
"CreateTime": null,
"ChangeBy": null,
"ChangeTime": null
}, {
"key": "807841",
"ID": null,
"AutoRcvDoc": null,
"AutoShelfIn": null,
"AutoShelfInDocNo": null,
"DeliveryDocNo": null,
"DeliveryDate": null,
"SupplierCode": null,
"SupplierName": null,
"StoreType": null,
"Status": null,
"Item": null,
"ItemCode": null,
"ItemName": null,
"UOM": null,
"UOMName": null,
"iQty": null,
"DisableDate": null,
"cMemo": null,
"CreateBy": null,
"CreateTime": null,
"ChangeBy": null,
"ChangeTime": null
}, {
"key": "151688",
"ID": null,
"AutoRcvDoc": null,
"AutoShelfIn": null,
"AutoShelfInDocNo": null,
"DeliveryDocNo": null,
"DeliveryDate": null,
"SupplierCode": null,
"SupplierName": null,
"StoreType": null,
"Status": null,
"Item": null,
"ItemCode": null,
"ItemName": null,
"UOM": null,
"UOMName": null,
"iQty": null,
"DisableDate": null,
"cMemo": null,
"CreateBy": null,
"CreateTime": null,
"ChangeBy": null,
"ChangeTime": null
}, {
"key": "543892",
"ID": null,
"AutoRcvDoc": null,
"AutoShelfIn": null,
"AutoShelfInDocNo": null,
"DeliveryDocNo": null,
"DeliveryDate": null,
"SupplierCode": null,
"SupplierName": null,
"StoreType": null,
"Status": null,
"Item": null,
"ItemCode": null,
"ItemName": null,
"UOM": null,
"UOMName": null,
"iQty": null,
"DisableDate": null,
"cMemo": null,
"CreateBy": null,
"CreateTime": null,
"ChangeBy": null,
"ChangeTime": null
}, {
"key": "309463",
"ID": null,
"AutoRcvDoc": null,
"AutoShelfIn": null,
"AutoShelfInDocNo": null,
"DeliveryDocNo": null,
"DeliveryDate": null,
"SupplierCode": null,
"SupplierName": null,
"StoreType": null,
"Status": null,
"Item": null,
"ItemCode": null,
"ItemName": null,
"UOM": null,
"UOMName": null,
"iQty": null,
"DisableDate": null,
"cMemo": null,
"CreateBy": null,
"CreateTime": null,
"ChangeBy": null,
"ChangeTime": null
}, {
"key": "249125",
"ID": null,
"AutoRcvDoc": null,
"AutoShelfIn": null,
"AutoShelfInDocNo": null,
"DeliveryDocNo": null,
"DeliveryDate": null,
"SupplierCode": null,
"SupplierName": null,
"StoreType": null,
"Status": null,
"Item": null,
"ItemCode": null,
"ItemName": null,
"UOM": null,
"UOMName": null,
"iQty": null,
"DisableDate": null,
"cMemo": null,
"CreateBy": null,
"CreateTime": null,
"ChangeBy": null,
"ChangeTime": null
}],
"pageSizes": [10, 20, 30]
}]
},
dRules: {
},
})
const ctxFunction = reactive({
DTagList585248_InitTagListData() {
DTagList585248.tagList.forEach(tag => {
if (tag.id === ctxData.DTagList585248.checked) {
DTagList585248_GetTableHead(tag.id)
DTagList585248_GetTableData(tag.id)
} else {
proxy.$nextTick(() => { //避免首次加载时，同时请求多个列表的数据
DTagList585248_GetTableHead(tag.id)
DTagList585248_GetTableData(tag.id)
})
}
})
},
DTagList585248_GetTableHead(checked = null) {
let target = ctxData.DTagList585248.tableList.find(dt => dt.id === checked || ctxData.DTagList585248.checked)
if (!!target && target.tableId && target.axiosGetTableHeadUrl) {
//let url = ctxData.dForm.serverIp+':'+ctxData.dForm.serverPort+target.axiosGetTableHeadUrl
let url = target.axiosGetTableHeadUrl
axios({
url: url,
method: 'get',
params: {
tableID: target.tableId
}
}).then(res => {
//todo 结合实际的响应来赋值。将 res.data.tableHead 换成你自己的相应层级数据
//target.tableHead=res.data.tableHead
//todo 测试用
target.tableHead = res.data.data.data
})
}
},
DTagList585248_GetTableData(checked = null) {
let target = ctxData.DTagList585248.tableList.find(tb => tb.id === checked || ctxData.DTagList585248.checked)
if (!!target && target.tableName && target.axiosGetTableDataUrl) {
//let url = ctxData.dForm.serverIp+':'+ctxData.dForm.serverPort+target.axiosGetTableDataUrl
let url = target.axiosGetTableDataUrl
axios({
url: url,
method: 'get',
params: {
tableName: target.tableName,
pageSize: target.pagination.pageSize,
currentPage: target.pagination.currentPage
}
}).then(res => {
//todo 结合实际的响应来赋值。将 res.data.tableData 换成你自己的相应层级数据
//target.tableData=res.data.tableData
//todo 测试用
target.tableData = res.data.data.page.list
target.pagination.total = res.data.data.page.total
})
}
},
DTagList585248_sizeChange(pageSize) {
ctxData.DTagList585248.tableList.find(tb => tb.id === ctxData.DTagList585248.checked).pagination.pageSize = pageSize
ctxData.DTagList585248_GetTableData()
},
DTagList585248_currentChange(currentPage) {
ctxData.DTagList585248.tableList.find(tb => tb.id === ctxData.DTagList585248.checked).pagination.currentPage = currentPage
ctxData.DTagList585248_GetTableData()
},
DTagList585248_AddRow() {
let targetTable = ctxData.DTagList585248.tableList.find(item => item.id === ctxData.DTagList585248.checked)
if (!targetTable.newRows) {
targetTable['newRows'] = []
}
let newRow = {
key: generateId()
}
targetTable.tableHead.forEach(item => {
//newRow[item.FieldName]=null
newRow[item.columnName] = null
})
targetTable.newRows.push(newRow)
let newRowsLength = targetTable.newRows.length
let total = targetTable.pagination.total + 1
let pageSize = targetTable.pagination.pageSize
let lastPageSize = total - Math.floor(total / pageSize) * pageSize
targetTable.pagination.currentPage = Math.ceil(total / pageSize)
targetTable.pagination.total = total
if (lastPageSize !== 0 && lastPageSize <= newRowsLength) { //超出 页数，再加一页
let arr = []
for (let i = newRowsLength - lastPageSize; i < newRowsLength; i++) {
arr.push(targetTable.newRows[i])
}
targetTable.tableData = arr
} else if (!!targetTable.tableID) {
axios({
url: targetTable.axiosGetTableDataUrl,
method: 'get',
params: {
tableName: targetTable.tableName,
pageSize: targetTable.pagination.pageSize,
currentPage: targetTable.pagination.currentPage
}
}).then(res => {
targetTable.tableData = [...res.data.data.page.list, ...targetTable.newRows]
})
}
},
DTagList585248_DeleteRow(row) {
let targetTable = ctxData.DTagList585248.tableList.find(item => item.id === ctxData.DTagList585248.checked)
if (row.ID) {
} else if (row.key) {
for (let i = 0; i < targetTable.newRows.length; i++) {
if (row.key === targetTable.newRows[i].key) {
if (targetTable.tableData.length === 1) {
targetTable.pagination.currentPage--
}
targetTable.newRows.splice(i, 1)
targetTable.pagination.total--
ctxData.DTagList585248_CurrentChange(targetTable.pagination.currentPage)
break
}
}
}
},
DTagList585248_currentTagTableData() {
let target = ctxData.DTagList585248.tableList.find(tb => tb.id === ctxData.DTagList585248.checked)
return target.tableData
},
onFormCreated733562() {
},
onFormMounted799444() {
},
onFormDataChange525583() {
},
headerCellStyle(data) {
return global.headerCellStyle(data)
},
stripeRow(data) {
return global.stripeRow(data)
},
countColWidth(item, index, tableHead) {
return global.countColWidth(item, index, tableHead)
},
const globalFunctionArr = {
}
})
ctxFunction.onFormCreated733562()
onMounted(() => {
ctxFunction.onFormMounted799444();
ctxFunction.DTagList585248_InitTagListData()
})
return {
...toRef(ctxData),
...toRef(ctxFunction),
}
}
})
</script>
html
复制代码
<template>
<el-form
:model="dialogFormData"
:rules="dialogFormRules"
ref="dialogFormRef"
:validate-on-rule-change="false"
style="text-align: center"
>
<el-table
:data="dialogFormData.tableData"
height="460"
border
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
:row-class-name="tableRowClassName"
@current-change="handleRowChange"
@cell-click="handleCellClick"
:row-key="(row) => row.id"
v-bind="dialogForm.option"
class="base"
ref="tableRef"
>
<el-table-column
type="selection"
:reserve-selection="true"
width="55"
align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
type="index"
label="序号"
width="55"
align="center"
:show-overflow-tooltip="true"
>
<template #default="scope">
<span>{{
(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
}}</span>
</template>
</el-table-column>
<template v-for="(rowItem, index) in dialogForm.rule" :key="index">
<template v-if="rowItem.type === 'row'">
<template v-for="(colItem, idx) in rowItem.children" :key="idx">
<template v-if="colItem.type === 'col'">
<template v-for="(item, idx2) in colItem.children" :key="idx2">
<el-table-column
:label="item.label"
:prop="item.prop"
align="center"
:show-overflow-tooltip="true"
v-bind="item.props"
v-if="item.show !== false"
>
<template #default="scope" v-if="item.type">
<el-form-item
:prop="`tableData.${scope.$index}.${item.prop}`"
:rules="dialogFormRules[`${item.prop}`]"
>
<template v-if="item.prop && item.type === 'input'">
<el-tooltip
:content="scope.row[`${item.prop}`]"
placement="top"
:disabled="isShowTooltip"
>
<el-input
@mouseover.native="inputOnMouseOver($event)"
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
@click="$emit('child-event', item.event)"
:readonly="readonlyList[`${item.prop}`] !== 2"
:class="
disabledList[`${item.prop}`] === 2
? 'inputRight'
: 'inputWrong'
"
/>
</el-tooltip>
</template>
<template v-if="item.prop && item.type === 'inputNumber'">
<el-input-number
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
/>
</template>
<template v-if="item.prop && item.type === 'colorPicker'">
<el-color-picker
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
/>
</template>
<template v-if="item.prop && item.type === 'radio'">
<el-radio-group
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
>
<el-radio
v-for="option in item.options"
:key="option.value"
:value="option.value"
:label="option.label"
>
{{ option.label }}
</el-radio>
</el-radio-group>
</template>
<template v-if="item.prop && item.type === 'checkbox'">
<template
v-if="item.options && item.options.length > 1"
>
<el-checkbox-group
v-model="formModel[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
>
<el-checkbox
v-for="option in item.options"
:key="option.value"
v-bind="option"
>
{{ option.label }}
</el-checkbox>
</el-checkbox-group>
</template>
<template v-else>
<el-checkbox
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
/>
</template>
</template>
<template v-if="item.prop && item.type === 'select'">
<el-select
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
:class="
disabledList[`${item.prop}`] === 2
? 'inputRight'
: 'inputWrong'
"
@click="$emit('btn-event', scope)"
>
<el-option
v-for="option in item.options"
:key="option.value"
:label="option.label"
:value="option.value"
>
</el-option>
</el-select>
</template>
<template v-if="item.prop && item.type === 'switch'">
<el-switch
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
/>
</template>
<template v-if="item.prop && item.type === 'cascader'">
<el-cascader
v-model="scope.row[`${item.prop}`]"
:options="item.options"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:disabled="disabledList[`${item.prop}`] !== 2"
/>
</template>
<template v-if="item.prop && item.type === 'datePicker'">
<el-date-picker
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:class="
disabledList[`${item.prop}`] === 2
? 'inputRight'
: 'inputWrong'
"
/>
</template>
<template v-if="item.prop && item.type === 'timePicker'">
<el-time-picker
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
:readonly="readonlyList[`${item.prop}`] !== 2"
:class="
disabledList[`${item.prop}`] === 2
? 'inputRight'
: 'inputWrong'
"
/>
</template>
<template v-if="item.prop && item.type === 'upload'">
<el-upload
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
ref="upload"
>
<template #trigger>
<el-button type="primary" size="small">{{
item.data
}}</el-button>
</template>
</el-upload>
</template>
<template v-if="item.prop && item.type === 'image'">
<el-image v-bind="item.props" />
</template>
<template v-if="item.prop && item.type === 'rate'">
<el-rate
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
/>
</template>
<template v-if="item.prop && item.type === 'slider'">
<el-slider
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
/>
</template>
<template v-if="item.prop && item.type === 'tree'">
<el-tree
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
/>
</template>
<template v-if="item.prop && item.type === 'transfer'">
<el-transfer
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
/>
</template>
<template v-if="item.prop && item.type === 'timeline'">
<el-timeline
v-model="scope.row[`${item.prop}`]"
v-bind="item.props"
>
<el-timeline-item
v-for="(option, index) in item.options"
:key="index"
v-bind="option"
>
{{ option.content }}
</el-timeline-item>
</el-timeline>
</template>
<template v-if="item.type === 'alert'">
<el-alert v-bind="item.props" />
</template>
<template v-if="item.type === 'button'">
<el-button v-bind="item.props">
{{ item.props.data }}
</el-button>
</template>
<template v-if="item.type === 'text'">
<el-text v-bind="item.props">
{{ item.props.data }}
</el-text>
</template>
<template v-if="item.type === 'divider'">
<el-divider v-bind="item.props">
{{ item.props.data }}
</el-divider>
</template>
<template v-if="item.type === 'link'">
<el-link v-bind="item.props">
{{ item.props.data }}
</el-link>
</template>
<template v-if="item.type === 'tag'">
<el-tag v-bind="item.props">
{{ item.props.data }}
</el-tag>
</template>
<template v-if="item.type === 'row'">
<el-row v-bind="item.props" :gutter="20">
<template
v-for="(colItem, idx3) in item.children"
:key="idx3"
>
<el-col
v-if="colItem.type === 'col'"
:span="
colItem.props.span ? colItem.props.span : 6
"
:xs="colItem.props.xs ? colItem.props.xs : 24"
:sm="colItem.props.sm ? colItem.props.sm : 6"
v-bind="colItem.props"
>
<template
v-if="colItem.children[0].type === 'button'"
>
<el-button
v-bind="colItem.children[0].props"
@click="$emit('btn-event', scope)"
>
{{ colItem.children[0].props.data }}
</el-button>
</template>
<template
v-if="colItem.children[0].type === 'tag'"
>
<el-tag
v-bind="colItem.children[0].props"
@click="$emit('btn-event', scope)"
>
{{ colItem.children[0].props.data }}
</el-tag>
</template>
<template
v-if="colItem.children[0].type === 'link'"
>
<el-link
v-bind="colItem.children[0].props"
@click="$emit('btn-event', scope)"
>
{{ colItem.children[0].props.data }}
</el-link>
</template>
</el-col>
</template>
</el-row>
</template>
</el-form-item>
</template>
</el-table-column>
</template>
</template>
</template>
</template>
</template>
</el-table>
</el-form>
<div style="margin: 8px 0px 0px 4px">
<el-pagination
:current-page="queryParams.pageNum"
:page-size="queryParams.pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[5, 10, 20, 30, 50]"
prev-text="上一页"
next-text="下一页"
background
/>
</div>
</template>
<script setup>
import { ref, computed, getCurrentInstance, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/js/api/base/request";
const { proxy } = getCurrentInstance();
let props = defineProps({
lineList: Array,
dialogForm: Object,
dialogFormRules: Object,
disabledList: {
type: Object,
default: {},
},
readonlyList: {
type: Object,
default: {},
},
queryParams: {
type: Object,
default: {
total: 0,
pageNum: 1,
pageSize: 10,
requestData: [],
},
},
});
let emit = defineEmits(["child-event", "btn-event", "pagination"]);
// 表格数据
const requestData = ref(props.queryParams.requestData); //后端请求来的数据(有id)
const addRowsData = ref([]); //新增的数据
const editRowsData = ref([]); //修改的数据(有id)
const delRowsData = ref([]); //删除的数据(有id)
const tableData = computed(() => {
requestData.value.forEach((requestItem) => {
// 查找是否数据是已删除的
let delItem = delRowsData.value.find((delItem) => {
delItem.id === requestItem.id;
});
if (delItem !== undefined) {
requestItem.alterFlag = "Del";
}
// 查找是否数据是已修改的
let editItem = editRowsData.value.find((editItem) => {
editItem.id === requestItem.id;
});
if (editItem !== undefined) {
requestItem = editItem;
}
});
});
// 实现分页
let total = computed(
() =>
props.queryParams.total +
addRowsData.value.length -
delRowsData.value.length
);
const handleCurrentChange = (newPage) => {
props.queryParams.pageNum = newPage;
};
const handleSizeChange = (newSize) => {
props.queryParams.pageSize = newSize;
};
/**多选框选中数据 */
const multipleSelection = ref([]);
const handleSelectionChange = (selection) => {
multipleSelection.value = selection;
};
/**获取表格当行的序号 */
const tableRowClassName = ({ row, rowIndex }) => {
row.row_index =
(props.queryParams.pageNum - 1) * props.queryParams.pageSize + rowIndex + 1;
};
/**动态修改表格当前行 */
const handleRowChange = (row) => {
if (row && row.id && row.alterFlag === undefined) {
row.alterFlag = "Edit";
}
console.log("动态修改表格当前行row:", row);
};
/**点击单元格聚焦输入框*/
let currentRow = ref(null);
let currentColumn = ref(null);
function handleCellClick(row, column, cell, event) {
currentRow.value = row;
currentColumn.value = column.property;
}
function handleInputBlur() {
currentRow.value = null;
currentColumn.value = null;
}
/**单行增行操作 */
const handleRowAdd = () => {
addRowsData.value.push({
alterFlag: "Add",
});
turnToEnd();
};
/**单行删行操作(可多选) */
const handleRowDel = () => {
if (multipleSelection.value.length > 0) {
ElMessageBox.confirm("此操作将删除所选行数据,您确定要删除吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
ElMessage.warning("记得点击保存或提交");
multipleSelection.value.map((item) => {
item.alterFlag = "Del";
return item;
});
props.lineList.filter((item) => item.alterFlag !== "Del");
console.log("单行删行后的数组:", props.lineList);
// 清除之前的选中状态
multipleSelection.value = [];
proxy.$refs["tableRef"].clearSelection();
})
.catch(() => {
ElMessage.info("已取消删除");
});
}
};
/**跳转到最后一页*/
const turnToEnd = () => {
//总记录数除以每页记录数得到页码
props.queryParams.pageNum = Math.ceil(total / props.queryParams.pageSize);
//(后端总记录数减去要删除的记录数除以每页记录数得到页码)
let pageNum = Math.ceil(
(props.queryParams.total - delRowsData.value.length) /
props.queryParams.pageSize
);
//如果这最后一页的页码大于数据库的页码,则不用请求后端,
if (props.queryParams.pageNum > pageNum) {
dialogFormData.value.tableData = props.lineList
.filter((item) => item.alterFlag !== "Del")
.slice(
(props.queryParams.pageNum - 1) * props.queryParams.pageSize,
props.queryParams.pageNum * props.queryParams.pageSize
);
} else {
}
emit("pagination");
};
/**输入框的内容超出长度后，鼠标悬浮在输入框上，出现tooltip提示*/
let isShowTooltip = ref(false);
const inputOnMouseOver = (e) => {
const target = e.target;
// 判断是否开启tooltip功能
if (target.offsetWidth < target.scrollWidth) {
isShowTooltip.value = false;
} else {
isShowTooltip.value = true;
}
};
const dialogFormRef = ref(null);
const dialogFormData = ref({
tableData: [],
});
props.lineList = computed(() => {
[...new Set(addRowsData.value.concat(delRowsData.value))];
});
defineExpose({
turnToEnd,
handleRowAdd,
handleRowDel,
dialogFormRef,
});
</script>