目录
1.查询
1.1.绘制页面
绘制页面的条件及按钮：
绘制列表和分页：
实例代码：
<template>
<div class="element-container">
<div class="top">
<div class="tophead">查询条件</div>
<transition name="fade">
<div class="topCont" v-show="showContent" :style="{ height: contentHeight }">
<el-row>
<el-col :span="6">
<div>
名称：<el-input v-model="name" placeholder="请输入名称" style="width: 214px" />
</div>
</el-col>
<el-col :span="18">
<el-button type="primary" @click="btn_query">查询</el-button>
<el-button type="success" @click="modal_add_label">新增</el-button>
<el-button v-if="visiblebtn" type="danger" @click="modal_btn_delete">删除</el-button>
<el-button v-else type="warning" @click="modal_btn_recovery">恢复</el-button>
</el-col>
</el-row>
</div>
</transition>
<el-popover :visible="visible" placement="bottom-end" :width="140">
<div class="popper">
<div @click="deleteStart(1)"
><el-icon style="margin-right: 5px"><Finished /></el-icon> 未删除</div
>
<div @click="deleteStart(0)"
><el-icon style="margin-right: 5px"><Delete /></el-icon> 已删除</div
>
</div>
<template #reference>
<div class="EditPen" @click="visible = !visible">
<el-icon><EditPen /></el-icon>
</div>
</template>
</el-popover>
</div>
<div class="content">
<!-- <div class="tophead">数据列表</div> -->
<div class="content_tab">
<el-table
ref="multipleTableRef"
:data="contractMessageList.rows"
@selection-change="handleSelectionChange"
stripe
style="width: 100%; margin-bottom: 20px"
>
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="180" />
<el-table-column prop="name" label="国别" />
<el-table-column prop="username" label="维护人" />
<el-table-column prop="createTime" label="维护时间" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" size="small" @click.prevent="updateRow(scope.row)"
>修改</el-button
>
<el-button type="success" size="small" @click.prevent="updateUpDown(scope.row, 2)"
>上移</el-button
>
<el-button type="warning" size="small" @click.prevent="updateUpDown(scope.row, 1)"
>下移</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="contractMessageList.currenPage"
v-model:page-size="state.limit"
:page-sizes="[10, 20, 30, 40, 50]"
background
layout="total, sizes, prev, pager, next, jumper"
:total="contractMessageList.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</template>1.2.引入样式和脚本
在<script setup>中引入或编写css样式和js脚本，
import { ArrowLeft, ArrowRight, Delete, Edit, Share } from '@element-plus/icons-vue';
import Descrition from '@/components/Descrition/index.vue';
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';1.3.定义全局对象、字段、数组
在 ref();里面定义
定义对象实例：
const form = reactive({
amount: '',
contractType: '',
id: '',
jParticipants: '',
message: '',
name: '',
participants: '',
remark: '',
signingData: '',
});定义数组实例：
const updateData = ref([]);定义字符串实例：
const contentHeight = ref('');1.4.编写查询列表调用接口方法
// 列表
async function fetchContractMessageList() {
await store.dispatch('basicdata/baseCountryList', state);
}1.5.编写带查询条件调用列表方法
//查询
const btn_query = async () => {
state.name = name.value;
await fetchContractMessageList();
};
1.6.编写分页方法
// 选择条
const handleSelectionChange = (val) => {
//只先选中id
// const vals = val.map((item) => item.id);
multipleSelection.value = val;
};
const handleSizeChange = async (val) => {
// 每页显示多少条
state.limit = val;
await fetchContractMessageList();
};
const handleCurrentChange = async (val) => {
// 页数切换
state.offset = (val - 1) * 10;
await fetchContractMessageList();
};1.7.初始化调用
直接在</script>中调用查询列表方法
// 初始化调用
fetchContractMessageList();2.新增/编辑
新增和编辑使用的同一方法，有id则调用修改接口，没有id则调用新增接口
2.1.新增按钮
<el-button type="success" @click="modal_add_label">新增</el-button>按钮点击调用新增方法，弹出新增面板
2.2.新增/修改弹窗方法
使用弹窗插件，判断id是否为空，为空则调用新增方法、不为空调用修改方法
// 新增编辑弹窗
const modal_add_label = () => {
ElMessageBox.prompt('请输入国别', '新增国别', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^.+$/,
inputValue: updateData.value.name,
inputErrorMessage: '请输入内容',
})
.then(async ({ value }) => {
if (updateData.value.length > 0) {
let name = { name: value, id: updateData.value.id };
await btn_update(name);
} else {
let name = { name: value };
await btn_add(name);
}
await fetchContractMessageList();
updateData.value = [];
})
.catch(() => {
updateData.value = [];
});
};2.3.新增/修改接口
// 新增
async function btn_add(state) {
await store.dispatch('basicdata/baseCountrySave', state);
}
// 修改
async function btn_update(state) {
await store.dispatch('basicdata/baseCountryUpdate', state);
}
3.删除
3.1.删除按钮
<el-button v-if="visiblebtn" type="danger" @click="modal_btn_delete">删除</el-button>按钮点击调用删除弹窗方法
3.2.修改弹窗方法
获取到勾选的删除项，传入到后端
//删除弹窗
const modal_btn_delete = () => {
ElMessageBox.confirm('是否确认删除', '删除国别', {
confirmButtonText: '确认',
cancelButtonText: '取消',
})
.then(async () => {
if (multipleSelection.value.length > 0) {
var formData = new FormData();
formData.append('postdata', JSON.stringify(multipleSelection.value));
await btn_delete(formData);
await fetchContractMessageList();
} else {
ElMessage.error('请选择删除项');
}
})
.catch(() => {});
};3.3.删除接口
// 删除
async function btn_delete(state) {
await store.dispatch('basicdata/baseCountryDelete', state);
}4.恢复
4.1.恢复按钮
<el-button v-else type="warning" @click="modal_btn_recovery">恢复</el-button>按钮点击调用恢复弹窗方法
4.2.恢复弹窗方法
// 恢复弹窗
const modal_btn_recovery = () => {
ElMessageBox.confirm('是否确认恢复', '恢复国别', {
confirmButtonText: '确认',
cancelButtonText: '取消',
})
.then(async () => {
if (multipleSelection.value.length > 0) {
var formData = new FormData();
formData.append('postdata', JSON.stringify(multipleSelection.value));
await btn_recovery(formData);
await fetchContractMessageList();
} else {
ElMessage.error('请选择恢复项');
}
})
.catch(() => {});
};4.3.恢复接口
// 恢复
async function btn_recovery(state) {
await store.dispatch('basicdata/baseCountryRecover', state);
}5.上移/下移
5.1.按钮
上移、下移的按钮在列表的每一列中
<el-button type="success" size="small" @click.prevent="updateUpDown(scope.row, 2)"
>上移</el-button
>
<el-button type="warning" size="small" @click.prevent="updateUpDown(scope.row, 1)"
>下移</el-button
>5.2.点击触发方法
//移动
const updateUpDown = async (e, index) => {
let data = { id: e.id, type: index };
var formData = new FormData();
formData.append('postdata', JSON.stringify(data));
await btn_updateUpdown(formData);
await fetchContractMessageList();
};5.3.调用接口方法
//移动
async function btn_updateUpdown(state) {
await store.dispatch('basicdata/baseCountryUpdateAdd', state);
}
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
