<script lang="ts" setup name="Canset-JDfund">
import { AddJDsetAPI, EditJDsetAPI, DelJDsetAPI, GetWLFsetListtAPI } from '@/api/canset/tfset'
// #region *****************XXXX模块****************
// #endregion
const params = {pageNo: 1, //当前页数pageSize: 5 //一页几条
}
// #region *****************请求表格数据模块****************
const tablelist = ref([])
const tableCount = ref()
const gettabledata = async (obj: any) => {const res = await GetWLFsetListtAPI(obj)console.log(res)tablelist.value = res.liststableCount.value = res.count
}
gettabledata(params)
// #endregion
// #region *****************分页模块****************
const onSizeChange = async (size: number) => {params.pageSize = sizegettabledata(params)
}
// 页码变化事件
const onCurrentChange = (page: number) => {params.pageNo = pagegettabledata(params)
}
// #endregion
// #region *****************新增模块****************
const deposit = ref(0)
const addJDffund = async () => {if (!deposit.value) {ElMessage.error('请先输入接单押金')return}const res = await AddJDsetAPI(deposit.value).then(() => {gettabledata(params)ElMessage.success('新增成功！')deposit.value = 0})console.log(res)
}
// #endregion
// #region *****************点击编辑控制输入框显示与关闭模块****************
const showEdit = ref<boolean[]>([])
// 编辑处理
const Edit = (row: any, index: any) => {//vue3使用数组添加数据showEdit.value[index] = true
}
// #endregion
// #region *****************确认编辑模块****************
const sure = async (row: any, index: any) => {console.log(row)showEdit.value[index] = false// 表单预校验// await form.value.validate()// 发起修改请求await EditJDsetAPI(row).then(() => {ElMessage.success('修改成功！')showEdit.value = []})// 重新获取分类数据，渲染页面gettabledata(params)
}
// #endregion
// #region *****************删除模块****************
const Delhandle = async (row: any) => {console.log(row)await ElMessageBox.confirm('你是否需要删除吗?', '警告', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})// 确认按钮事件处理.then(() => {DelJDsetAPI(row.id).then(() => {ElMessage({message: '删除成功!',type: 'success'})gettabledata(params)})})
}
// #endregion
</script>
<template><el-card class="box-card mt-2"><template #header><h4>基础物流费用</h4></template><!-- 新增模块 --><div class="ml-5 flex"><el-input-numberplaceholder="请输入内容"style="width: 150px"v-model="deposit":step="1":min="0":max="500"/><el-button type="primary" @click="addJDffund" class="ml-2">新增押金</el-button></div><!-- 表格模块 --><div><el-table :data="tablelist" style="width: 100%"><el-table-column align="center" prop="logisticsPrice" label="基础物流运费"><template #default="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.logisticsPrice }}</span><div v-else style="margin-left: 100px; width: 100px"><el-inputv-model="row.logisticsPrice"placeholder="请输入基础物流运费"></el-input></div> </template></el-table-column><el-table-column align="center" prop="address" label="基础物流运费"><template #default="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.address }}</span><div v-else style="margin-left: 100px; width: 100px"><el-input v-model="row.address" placeholder="请输入物流地址"></el-input></div> </template></el-table-column><el-table-column align="center" label="操作"><template #default="{ row, $index }"><!-- 编辑 --><el-buttonv-if="!showEdit[$index]"type="primary"@click="Edit(row, $index)"plain>编辑</el-button><!-- 编辑确认 --><el-button v-else type="primary" @click="sure(row, $index)" plain>确认</el-button><!-- 删除 --><el-button type="primary" @click="Delhandle(row, $index)">删除</el-button></template></el-table-column></el-table></div><!-- 分页模块 --><div><el-paginationv-model:current-page="params.pageNo"v-model:page-size="params.pageSize":page-sizes="[5, 15, 30, 45, 60]"layout="jumper, total, sizes, prev, pager, next":total="tableCount"background@size-change="onSizeChange"@current-change="onCurrentChange"style="margin-top: 20px; justify-content: flex-end"/></div></el-card>
</template>
