vue3+TS+pinia+解构分层 实现 渲染增删改查
体检项管理页面(view):
体检项管理
数据筛选
批量删除
添加
导入
{{ scope.row.itemsId }}
启用
禁用
编辑
删除
hooks文件(业务逻辑处理):
// 引入请求方法
import physicalExaminationItemService from '../server/physicalExaminationItemService';
import { ElMessage } from 'element-plus'
import physicalExaminationItemStores from "../stores/physicalExaminationItemStores";
import phyDanFindStores from "../stores/phyDanFindStores"
//页面渲染 业务逻辑 callback用于接收传入的回调
function physicalExaminationItemList(pageNum: any, PageSize: any, callback: any) {
console.log("页面渲染 业务逻辑", pageNum, PageSize)
const store = physicalExaminationItemStores()
physicalExaminationItemService.physicalExaminationItemList(pageNum, PageSize).then((res) => {
//如果正确存储数据
console.log("hooks里页面数据:", res.data);
console.log("hooks所需数据:", res.data.data.informations);
if (res.data.code == 0) {
//存数据
console.log("hooks存好数据");
//store.setrotation(res.data.data.informations)也是异步
store.setrotation(res.data.data.informations)
//拿到数据后执行回调函数 去store里面取值
callback()
} else {
//不正确，提示
//
ElMessage({
type: "info",
message: res.data.message
})
}
// 如果不正确，给提示
}).catch(err => {
console.log(err);
})
}
//页面添加 业务逻辑
function physicalExaminationItemAdd(phyAdd: any, callback: any) {
console.log("Hooks页面添加业务逻辑", phyAdd)
physicalExaminationItemService.physicalExaminationItemAdd(phyAdd).then((res) => {
if (res.data.code == 0) {
console.log("Hooks业务逻辑添加成功", res.data.data);
// 提示
ElMessage({
type: "success",
message: "添加成功"
})
callback(res.data.code)
} else {
//不正确，提示
ElMessage({
type: "info",
message: res.data.message
})
}
}).catch(err => {
// 如果不正确，给提示
console.log(err);
})
}
//页面删除 业务逻辑
function physicalExaminationItemDelete(id: any, callback: any) {
console.log("hook删除功能接受的ID", id);
physicalExaminationItemService.physicalExaminationItemDelete(id).then((res) => {
console.log("hook删除功能返回res.data:", res.data);
if (res.data.code == 0) {
// 提示
ElMessage({
type: "success",
message: "删除成功"
})
callback(res.data.code)
} else {
//不正确，提示
ElMessage({
type: "error",
message: res.data.message
})
}
// 如果不正确，给提示
}).catch(err => {
console.log(err);
})
}
//页面修改业务逻辑
function physicalExaminationItemUpdate(Updates: any, callback: any) {
console.log("Hooks页面修改业务逻辑", Updates)
physicalExaminationItemService.physicalExaminationItemUpdate(Updates).then((res) => {
console.log("Hooks业务修改成功", res.data.data);
if (res.data.code == 200) {
// 提示
ElMessage({
type: "success",
message: "修改成功"
})
//刷新
callback(res.data.code)
} else {
//不正确，提示
ElMessage({
type: "info",
message: res.data.message
})
}
}).catch(err => {
console.log(err);
})
}
//单点查询业务逻辑
function physicalExaminationItemFindIdDanChaXun(id: string, callback: any) {
physicalExaminationItemService.physicalExaminationItemFindId(id).then(res => {
if (res.data.code == 0) {
callback(res.data.data.length)
}
console.log(res)
})
}
//修改单项查询业务逻辑
function phyDanFindId(id: string, callback: any) {
console.log("Hooks修改单项查询接受id", id);
callback()
const storesFind = phyDanFindStores()
physicalExaminationItemService.physicalExaminationItemFindId(id).then(res => {
console.log("Hooks修改单项查询成功", res.data.data);
if (res.data.code == 0) {
// 提示
ElMessage({
type: "success",
message: "单项查询成功"
})
//Store存数据
storesFind.setrotation(res.data.data)
console.log("hooks存好数据", res.data.data);
callback();
} else {
//不正确，提示
ElMessage({
type: "info",
message: res.data.message
})
}
}).catch(err => {
console.log(err);
})
}
//页面查询业务逻辑
function phyItemFindList(findListList:any,callback: any){
console.log("页面查询业务逻辑接受的findListList", findListList)
const store = physicalExaminationItemStores()
physicalExaminationItemService.physicalExaminationItemFind(findListList).then((res) => {
//如果正确存储数据
console.log("hooks里页面数据:", res.data);
console.log("hooks所需数据:", res.data.data.informations);
if (res.data.code == 0) {
// 提示
ElMessage({
type: "success",
message: "查询成功!"
})
//存数据
console.log("hooks存好数据");
store.setrotation(res.data.data.informations)
callback()
} else {
//不正确，提示
ElMessage({
type: "info",
message: res.data.message
})
}
// 如果不正确，给提示
}).catch(err => {
console.log(err);
})
}
export default {
physicalExaminationItemList,
physicalExaminationItemAdd,
physicalExaminationItemDelete,
physicalExaminationItemUpdate,
physicalExaminationItemFindIdDanChaXun,
phyDanFindId,
phyItemFindList
}stores文件(数据处理):
import { defineStore } from 'pinia'
interface IState {
physicalExaminationItemList: any;
}
const physicalExaminationItem = defineStore("phyExaItemList", {
state: (): IState => {
console.log("srores里面渲染数据");
return {
physicalExaminationItemList: []
}
},
getters: {
getrotation(): Array {
console.log("测试stores里getters", this.physicalExaminationItemList);
return [...this.physicalExaminationItemList]
}
},
actions: {
setrotation(value: Array) {
console.log("测试stores里actions", this.physicalExaminationItemList);
this.physicalExaminationItemList = value;
}
}
})
export default physicalExaminationItem
server文件(请求处理):
//体检项目管理
import Axios from "./../utils/axios";
import api from "./../api/index";
//页面添加按钮 发起Axios请求
function physicalExaminationItemAdd(phyAdd: any) {
console.log("server添加功能接受的phyAdd", phyAdd);
return Axios.post(api.physicalExaminationItemApi.physicalExaminationItemAdd,phyAdd)
}
//页面删除按钮 发起Axios请求
function physicalExaminationItemDelete(ids: any) {
console.log("server删除功能接受的ID", ids);
return Axios({
url: api.physicalExaminationItemApi.physicalExaminationItemDelete,
method: "post",
//报450的错 高概率为传参的问题 传参是params还是data，参数类型，
params: {
'ids': ids
},
});
}
//页面修改按钮 发起Axios请求
function physicalExaminationItemUpdate(Updates: any) {
console.log("server修改功能接受的Updates", Updates);
return Axios.post(api.physicalExaminationItemApi.physicalExaminationItemUpdate,Updates)
}
//页面渲染 发起Axios请求
function physicalExaminationItemList(pageNum: any, PageSize: any) {
console.log("serves里页面渲染", pageNum, PageSize);
console.log("页面渲染 发起Axios请求", pageNum, PageSize)
return Axios({
url: api.physicalExaminationItemApi.physicalExaminationItemList,
method: "post",
data: {
pageNum,
PageSize,
},
});
}
//页面查询 发起Axios请求
function physicalExaminationItemFind(phyFind: any) {
console.log("serves里页面查询phyFind", phyFind);
return Axios({
url: api.physicalExaminationItemApi.physicalExaminationItemFind,
method: "post",
data: {
phyFind
},
});
}
//体项单点查询(ID)
function physicalExaminationItemFindId(id: string) {
console.log("server单项查询功能接受的ID", id);
return Axios.get(api.physicalExaminationItemApi.physicalExaminationItemFindId,{
params:{
"id":id
}
});
}
//市查询接口
function physicalExaminationItemFindCitys(id: number) {
return Axios({
url: api.physicalExaminationItemApi.physicalExaminationItemFindCitys,
method: "get",
data: {
id
},
});
}
//机构分支查询接口
function physicalExaminationItemFindInstitutionalBranches(id: number) {
return Axios({
url: api.physicalExaminationItemApi.physicalExaminationItemFindInstitutionalBranches,
method: "get",
data: {
id
},
});
}
//机构查询接口
function physicalExaminationItemFindInstitutionals(id: number) {
return Axios({
url: api.physicalExaminationItemApi.physicalExaminationItemFindInstitutionals,
method: "get",
data: {
id
},
});
}
//省查询接口
function physicalExaminationItemFindProvences(id: number) {
return Axios({
url: api.physicalExaminationItemApi.physicalExaminationItemFindProvences,
method: "get",
data: {
id
},
});
}
export default {
physicalExaminationItemAdd,
physicalExaminationItemDelete,
physicalExaminationItemUpdate,
physicalExaminationItemList,
physicalExaminationItemFind,
physicalExaminationItemFindId,
physicalExaminationItemFindCitys,
physicalExaminationItemFindInstitutionalBranches,
physicalExaminationItemFindInstitutionals,
physicalExaminationItemFindProvences
};
utils文件(封装axios):
// -----------------------------<<插件引入>>-----------------------------
// 引入axios
import axios from 'axios';
// -----------------------------<<实例创建>>-----------------------------
// 创建axios实例
const Server = axios.create({
// baseURL: 'http://82.' //lilei
timeout: 30000,
headers: {
"Content-Type": "application/json;charset=utf-8"
}
})
// 设置post请求提交的默认数据格式
Server.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
// -----------------------------<<实例配置>>-----------------------------
// 请求拦截
Server.interceptors.request.use(config => {
// 获取admin-token值
let token = window.sessionStorage.getItem("token");
// 如果token有值，在请求头中添加admin-token
if (token) {
config.headers["token"] = token;
}
// 返回config
return config;
}, err => {
return Promise.reject(err);
})
// 响应拦截
Server.interceptors.response.use(response => {
return response
}, err => {
return Promise.reject(err);
})
// -----------------------------<<实例导出>>-----------------------------
// 实例导出
export default Server