感じてどきどき
Tlias实例开发-员工管理·下
要求
修改员工
点击“编辑”按钮，查询回显，显示员工原有的信息
修改完成后点击提交，完成信息修改删除员工
修改员工
修改员工复用了“添加员工”的对话框，然后需要使用查询回显操作，即修改前先返回原数据然后在原数据基础上修改
查询回显时由于工作经历中的日期范围为日期数组，但是服务端返回的数据没有该属性，需要手动添加
if(NewEmpData.value.exprList && NewEmpData.value.exprList.length>0) {NewEmpData.value.exprList.forEach((expr)=>{expr.DateRange = [expr.begin,expr.end];})
}
完整代码如下：
// src/views/emp/index.vue
<script>const ConfirmSummit = ()=>{if(DialogUser.value ==='Add') {AddEmpData();}else {EditEmpData();}}const EditHandler = async (id) => {if(EmpFormRef.value) {EmpFormRef.value.resetFields();}const result = await SelectEmpDataById(id);NewEmpData.value = result.data;if(NewEmpData.value.exprList && NewEmpData.value.exprList.length>0) {NewEmpData.value.exprList.forEach((expr)=>{expr.DateRange = [expr.begin,expr.end];})}DialogUser.value = 'Edit';DialogTitle.value = '编辑员工';DialogFormVisible.value = true;}const EditEmpData = async () =>{if(!EmpFormRef.value) return;EmpFormRef.value.validate(async (valid)=>{if(valid) {const result = await UpdateEmpData(NewEmpData.value);if(result.code) {DialogFormVisible.value = false;EditSuccessMessage();await GetEmpData();} else {EditErrorMessage(result.message);}} else {ErrorCheckMessage();}})}const EditSuccessMessage = ()=> {ElMessage({message: '编辑员工信息成功!',type: 'success',})}const EditErrorMessage = (message)=> {ElMessage.error("编辑员工信息失败: "+message)}
</script>
<template><div class="TableContainer"><el-table :data="EmpData" border style="width: 100%"><el-table-column label="操作" align="center"><template #default="scope"><el-button size="small" type="warning" @click="EditHandler(scope.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button></template></el-table-column></el-table></div>
</template>
实际效果如下：
修改前查询回显
修改信息（修改了KSM的工资让她经营乐队，修改了电话号被她私生饭，添加了工作经历在LiveHouse遇见了Mygo）并提交修改
删除员工
删除分为单个删除和批量删除，均为危险操作，需要调用确认框确认
// src/api/emp.js
//删除员工数据
export const DeleteEmpDataById = (EmpIdList) =>request.delete(`/empdelete?ids=${EmpIdList}`,EmpIdList);
单个删除
<script>const DeleteHandler = (id) => {ElMessageBox.confirm('选中的员工会被永久删除，是否继续?','请谨慎确认',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(async ()=>{const result = await DeleteEmpDataById([id]);if (result.code) {DeleteSuccessMessage(); //提示信息DialogFormVisible.value = false; //关闭对话框await GetEmpData(); //查询} else {DeleteErrorMessage(result.message);}}).catch(()=>{DeleteCancelMessage();})}
</script>
<template><div class="TableContainer"><el-table :data="EmpData" border style="width: 100%"><el-table-column label="操作" align="center"><template #default="scope"><el-button size="small" type="danger" @click="DeleteHandler(scope.row.id)"><el-icon><Delete /></el-icon> 删除</el-button></template></el-table-column></el-table></div>
</template>
效果如下：
批量删除
批量删除需要使用el-table-column>中设置type="selection" 实现复选框效果，然后在<el-table>中设置@selection-change="handleSelectionChange"设置复选框发生变化的触发事件
<script>const SelectionChangeHandler = (val) =>{console.log(val);}
</script>
<template><div class="TableContainer"><el-table :data="EmpData" border style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="120" align="center"/><el-table> </div>
</template>
完整代码如下：
<script>const SelectionChangeHandler = (SelectionList) =>{DeleteIdList.value = [];SelectionList.forEach((item) => {DeleteIdList.value.push(item.id);})}const DeleteEmpDataListHandler = () =>{ElMessageBox.confirm('选中的员工会被永久删除，是否继续?','请谨慎确认',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(async ()=>{const result = await DeleteEmpDataById(DeleteIdList.value);if (result.code) {DeleteSuccessMessage(); //提示信息DialogFormVisible.value = false; //关闭对话框DeleteIdList.value = []await GetEmpData(); //查询} else {DeleteErrorMessage(result.message);}}).catch(()=>{DeleteCancelMessage();})}
</script>
效果如下：
效果如下:
