JP3-4-MyClub后台前端（三）

Java道经 - 项目 - MyClub - 后台前端（三）

S03. RMS资源管理

E01. RMS房间模块

武技：在 router/index.js 文件中开发全部相关页面路由配置

import Room from '../views/rms/room/Room.vue';
import RoomInsert from '../views/rms/room/RoomInsert.vue';
import RoomUpdate from '../views/rms/room/RoomUpdate.vue';const router = createRouter({history: createWebHashHistory(),routes: [{path: '/', name: 'Login', component: Login},{path: '/Main', name: 'Main', component: Main,redirect: '/Dashboard',children: [{path: '/Room', name: 'Room', component: Room},{path: '/RoomInsert', name: 'RoomInsert', component: RoomInsert},{path: '/RoomUpdate', name: 'RoomUpdate', component: RoomUpdate},]}]
});

1. 房间列表

心法：房间列表页面

武技：开发房间列表页面 views/rms/room/Room.vue

<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, ref, reactive} from "vue";
import {myPage} from "../../../request";
import {deleteApi, deleteBatchApi, excelApi, pageApi} from "../../../api/axios";
import {ElMessage} from "element-plus";// 路径导航
const navItems = [{icon: 'List', label: '资源管理'},{icon: 'OfficeBuilding', label: '房间列表'},
];
// 数据头
const headItems = [{type: 'ipt', span: 5, placeholder: '搜索房间名', callback: pageByTitle},
];
// 表格列
const columns = [{label: '房间名称', prop: 'title'},{label: '房间容量', prop: 'capacity', type: 'tag', suffix: ' 人'},{label: '房间地址', prop: 'address', type: 'card'},{label: '房间描述', prop: 'info', type: 'card'},
];/* ==================== 分页查询 ==================== */// 表格数据 + 分页数据 + 房间名称
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, total: 0, callback: page});
let roomTitle = ref();async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {// 分页参数let config = {api: pageApi,args: {module: 'room'},params: {pageNum, pageSize},records, pageInfo};// 若房间名不为空，则附加为分页条件if (roomTitle.value) config['params']['title'] = roomTitle.value;// 发送分页请求await myPage(config);
}/* ==================== 搜索房间名 ==================== */function pageByTitle(val) {// 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求if (val || roomTitle.value) {roomTitle.value = val;page();}
}/* ==================== 删除成功回调 ==================== */function deleteSuccess() {ElMessage.success('删除成功');page();
}/* ==================== 报表打印 ==================== */function downloadExcel() {excelApi('/room/excel', '房间报表');
}/* ==================== 加载函数 ==================== */onMounted(() => page());</script><template><my-nav :items="navItems"/><my-head :items="headItems"/><my-table module="room"insert-page="/RoomInsert"update-page="/RoomUpdate":records="records":columns="columns":delete-api="deleteApi":delete-batch-api="deleteBatchApi":delete-callback="deleteSuccess":excel-api="downloadExcel":pageInfo="pageInfo"/>
</template><style scoped lang="scss"></style>

2. 添加房间

心法：添加房间页面

武技：开发添加房间页面 views/rms/room/RoomInsert.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import {reactive, ref} from "vue";
import {insertApi} from "../../../api/axios.js";
import {RULE} from "../../../const";
import {ElMessage} from "element-plus";
import router from "../../../router";// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/Room'},{icon: 'OfficeBuilding', label: '房间列表', url: '/Room'},{icon: 'Plus', label: '添加新房间'},
]
// 表单项 + 表单值 + 表单规则
let items = ref([{label: '房间名称', prop: 'title', required: true, span: 12},{span: 12, hidden: true},{label: '房间容量', prop: 'capacity', type: 'number', required: true, span: 12},{label: '房间地址', prop: 'address', type: 'textarea', required: true, rows: 4},{label: '房间描述', prop: 'info', type: 'textarea'},
]);
let params = reactive({capacity: 0});
let rules = {title: RULE.TITLE, address: RULE.ADDRESS, info: RULE.INFO};/* ==================== 添加成功后 ==================== */function insertSuccess() {ElMessage.success('添加记录成功！');setTimeout(() => router.push('/Room'), 1000);
}
</script><template><my-nav :items="navItems"/><el-card class="room-insert-card" header="添加新房间"><my-form type="insert":items="items":params="params":rules="rules":api="insertApi":args="{module: 'room'}":callback="insertSuccess"/></el-card>
</template><style scoped lang="scss">
.room-insert-card {width: 60%; // 宽度margin: 65px auto 0; // 外边距
}
</style>

3. 修改房间

心法：修改房间页面

武技：开发修改房间页面 views/rms/room/RoomUpdate.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import {reactive, ref} from "vue";
import {updateApi} from "../../../api/axios.js";
import {RULE} from "../../../const";
import {ElMessage} from "element-plus";
import router from "../../../router";// 房间记录
let room = JSON.parse(sessionStorage.getItem('row'));
// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/Room'},{icon: 'OfficeBuilding', label: '房间列表', url: '/Room'},{icon: 'Edit', label: '修改房间'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([{label: '房间名称', prop: 'title', required: true, span: 12},{span: 12, hidden: true},{label: '房间容量', prop: 'capacity', type: 'number', required: true, span: 12},{label: '房间地址', prop: 'address', type: 'textarea', required: true, rows: 4},{label: '房间描述', prop: 'info', type: 'textarea'},
]);
let params = reactive(room);
let rules = {title: RULE.TITLE, address: RULE.ADDRESS, info: RULE.INFO};/* ==================== 修改成功后 ==================== */function updateSuccess() {ElMessage.success('修改记录成功！');setTimeout(() => router.push('/Room'), 1000);
}
</script><template><my-nav :items="navItems"/><el-card class="room-update-card" header="修改房间信息"><my-form type="update":items="items":params="params":rules="rules":api="updateApi":args="{module: 'room'}":callback="updateSuccess"/></el-card>
</template><style scoped lang="scss">
.room-update-card {width: 60%; // 宽度margin: 65px auto 0; // 外边距
}
</style>

E02. RMS学校模块

武技：在 router/index.js 文件中开发全部相关页面路由配置

import School from '../views/rms/school/School.vue';
import SchoolInsert from '../views/rms/school/SchoolInsert.vue';
import SchoolUpdate from '../views/rms/school/SchoolUpdate.vue';const router = createRouter({history: createWebHashHistory(),routes: [{path: '/', name: 'Login', component: Login},{path: '/Main', name: 'Main', component: Main,redirect: '/Dashboard',children: [{path: '/School', name: 'School', component: School},{path: '/SchoolInsert', name: 'SchoolInsert', component: SchoolInsert},{path: '/SchoolUpdate', name: 'SchoolUpdate', component: SchoolUpdate},]}]
});

1. 学校列表

心法：学校列表页面

武技：开发学校列表页面 views/rms/school/School.vue

<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, ref, reactive} from "vue";
import {myPage} from "../../../request";
import {deleteApi, deleteBatchApi, excelApi, pageApi} from "../../../api/axios";
import {ElMessage} from "element-plus";// 路径导航
const navItems = [{icon: 'List', label: '资源管理'},{icon: 'School', label: '学校列表'},
];
// 数据头
const headItems = [{type: 'ipt', span: 5, placeholder: '学校名称', callback: pageByTitle},
];
// 表格列
const columns = [{label: '学校名称', prop: 'title'},{label: '学院名称', prop: 'college'},{label: '专业名称', prop: 'major'},{label: '班级名称', prop: 'clazz'},{label: '学校地址', prop: 'address', type: 'card'},{label: '学校描述', prop: 'info', type: 'card'},
];/* ==================== 分页查询 ==================== */// 表格数据 + 分页数据 + 学校名称
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, total: 0, callback: page});
let schoolTitle = ref();async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {// 分页参数let config = {api: pageApi,args: {module: 'school'},params: {pageNum, pageSize},records, pageInfo}// 若学校名不为空，则附加为分页条件if (schoolTitle.value) config['params']['title'] = schoolTitle.value;// 发送分页请求await myPage(config);
}/* ==================== 搜索学校名 ==================== */function pageByTitle(val) {// 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求if (val || schoolTitle.value) {schoolTitle.value = val;page();}
}/* ==================== 删除成功回调 ==================== */function deleteSuccess(){ElMessage.success('删除成功');page();
}/* ==================== 报表打印 ==================== */function downloadExcel(){excelApi('/school/excel', '学校报表');
}/* ==================== 加载函数 ==================== */onMounted(() => page());
</script><template><my-nav :items="navItems"/><my-head :items="headItems"/><my-table module="school"insert-page="/SchoolInsert"update-page="/SchoolUpdate":records="records":columns="columns":delete-api="deleteApi":delete-batch-api="deleteBatchApi":delete-callback="deleteSuccess":excel-api="downloadExcel":pageInfo="pageInfo"/>
</template><style scoped lang="scss"></style>

2. 添加学校

心法：添加学校页面

武技：开发添加学校页面 views/rms/school/SchoolInsert.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import {reactive, ref} from "vue";
import {insertApi} from "../../../api/axios.js";
import {RULE} from "../../../const";
import {ElMessage} from "element-plus";
import router from "../../../router";// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/School'},{icon: 'School', label: '学校列表', url: '/School'},{icon: 'Plus', label: '添加新学校'},
]
// 表单项 + 表单值 + 表单规则
let items = ref([{label: '学校名称', prop: 'title', required: true, span: 12},{label: '学院名称', prop: 'college', required: true, span: 12},{label: '专业名称', prop: 'major', required: true, span: 12},{label: '班级名称', prop: 'clazz', required: true, span: 12},{label: '学校地址', prop: 'address', type: 'textarea'},{label: '学校描述', prop: 'info', type: 'textarea'},
]);
let params = reactive({});
let rules = {title: RULE.TITLE, address: RULE.ADDRESS, info: RULE.INFO};/* ==================== 添加成功后 ==================== */function insertSuccess() {ElMessage.success('添加记录成功！');setTimeout(() => router.push('/School'), 1000);
}
</script><template><my-nav :items="navItems"/><el-card class="school-insert-card" header="添加新学校"><my-form type="insert":items="items":params="params":rules="rules":api="insertApi":args="{module: 'school'}":callback="insertSuccess"/></el-card>
</template><style scoped lang="scss">
.school-insert-card {width: 60%; // 宽度margin: 65px auto 0; // 外边距
}
</style>

3. 修改学校

心法：修改学校页面

武技：开发修改学校页面 views/rms/school/SchoolUpdate.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import {reactive, ref} from "vue";
import {updateApi} from "../../../api/axios.js";
import {RULE} from "../../../const";
import {ElMessage} from "element-plus";
import router from "../../../router";// 学校记录
let school = JSON.parse(sessionStorage.getItem('row'));
// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/School'},{icon: 'School', label: '学校列表', url: '/School'},{icon: 'Edit', label: '修改学校'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([{label: '学校名称', prop: 'title', required: true, span: 12},{label: '学院名称', prop: 'college', required: true, span: 12},{label: '专业名称', prop: 'major', required: true, span: 12},{label: '班级名称', prop: 'clazz', required: true, span: 12},{label: '学校地址', prop: 'address', type: 'textarea'},{label: '学校描述', prop: 'info', type: 'textarea'},
]);
let params = reactive(school);
let rules = {title: RULE.TITLE, address: RULE.ADDRESS, info: RULE.INFO};/* ==================== 修改成功后 ==================== */function updateSuccess() {ElMessage.success('修改记录成功！');setTimeout(() => router.push('/School'), 1000);
}
</script><template><my-nav :items="navItems"/><el-card class="school-update-card" header="修改学校信息"><my-form type="update":items="items":params="params":rules="rules":api="updateApi":args="{module: 'school'}":callback="updateSuccess"/></el-card>
</template><style scoped lang="scss">
.school-update-card {width: 60%; // 宽度margin: 65px auto 0; // 外边距
}
</style>

E03. RMS资产模块

武技：在 router/index.js 文件中开发全部相关页面路由配置

import Assets from '../views/rms/assets/Assets.vue';  
import AssetsInsert from '../views/rms/assets/AssetsInsert.vue';  
import AssetsUpdate from '../views/rms/assets/AssetsUpdate.vue';const router = createRouter({history: createWebHashHistory(),routes: [{path: '/', name: 'Login', component: Login},{path: '/Main', name: 'Main', component: Main,redirect: '/Dashboard',children: [{path: '/Assets', name: 'Assets', component: Assets},{path: '/AssetsInsert', name: 'AssetsInsert', component: AssetsInsert},{path: '/AssetsUpdate', name: 'AssetsUpdate', component: AssetsUpdate},]}]
});

1. 资产列表

心法：资产列表页面

武技：开发资产列表页面 views/rms/assets/Assets.vue

<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, ref, reactive} from "vue";
import {myPage} from "../../../request";
import {deleteApi, deleteBatchApi, excelApi, pageApi} from "../../../api/axios";
import {ElMessage} from "element-plus";
import {PROJECT_INFO} from "../../../const/index.js";// 路径导航
const navItems = [{icon: 'List', label: '资源管理'},{icon: 'Coin', label: '资产列表'},
];
// 数据头
const headItems = [{type: 'ipt', span: 5, placeholder: '资产名称', callback: pageByTitle},
];
// 表格列
const columns = [{label: '资产图片', prop: 'picture', type: 'img', minio: minio},{label: '资产名称', prop: 'title'},{label: '资产单价', prop: 'price', width: 100},{label: '单价单位', prop: 'priceUnit', width: 100},{label: '剩余库存', prop: 'stock', width: 100},{label: '总计库存', prop: 'total', width: 100},{label: '库存单位', prop: 'stockUnit', width: 100},{label: '资产描述', prop: 'info', type: 'card'},
];/* ==================== 资产图片 ==================== */function minio(src) {return PROJECT_INFO.minioHost + '/assets/' + src;
}/* ==================== 分页查询 ==================== */// 表格数据 + 分页数据 + 资产名称
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, total: 0, callback: page});
let assetsTitle = ref();async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {let config = {api: pageApi,args: {module: 'assets'},params: {pageNum, pageSize},records, pageInfo}// 若资产名不为空，则附加为分页条件if (assetsTitle.value) config['params']['title'] = assetsTitle.value;// 发送分页请求await myPage(config);
}/* ==================== 搜索资产名 ==================== */function pageByTitle(val) {// 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求if (val || assetsTitle.value) {assetsTitle.value = val;page();}
}/* ==================== 删除成功回调 ==================== */function deleteSuccess(){ElMessage.success('删除成功');page();
}/* ==================== 报表打印 ==================== */function downloadExcel(){excelApi('/assets/excel', '资产报表');
}/* ==================== 加载函数 ==================== */onMounted(() => page());
</script><template><my-nav :items="navItems"/><my-head :items="headItems"/><my-table module="assets"insert-page="/AssetsInsert"update-page="/AssetsUpdate":records="records":columns="columns":delete-api="deleteApi":delete-batch-api="deleteBatchApi":delete-callback="deleteSuccess":excel-api="downloadExcel":pageInfo="pageInfo"/>
</template><style scoped lang="scss"></style>

2. 添加资产

心法：添加资产页面

武技：开发添加资产页面 views/rms/assets/AssetsInsert.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import {reactive, ref} from "vue";
import {insertApi} from "../../../api/axios.js";
import {RULE} from "../../../const";
import {ElMessage} from "element-plus";
import router from "../../../router";// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/Assets'},{icon: 'Coin', label: '资产列表', url: '/Assets'},{icon: 'Plus', label: '添加新资产'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([{label: '资产名称', prop: 'title', required: true},{label: '资产单价', prop: 'price', required: true, span: 12, type: 'number'},{label: '单价单位', prop: 'priceUnit', required: true, span: 12 },{label: '总计库存', prop: 'total', required: true, span: 12, type: 'number'},{label: '库存单位', prop: 'stockUnit', required: true, span: 12},{label: '资产描述', prop: 'info', type: 'textarea'},
]);
let params = reactive({});
let rules = {title: RULE.TITLE, info: RULE.INFO};/* ==================== 添加成功后 ==================== */function insertSuccess() {ElMessage.success('添加记录成功！');setTimeout(() => router.push('/Assets'), 1000);
}
</script><template><my-nav :items="navItems"/><el-card class="assets-insert-card" header="添加新资产"><my-form type="insert":items="items":params="params":rules="rules":api="insertApi":args="{module: 'assets'}":callback="insertSuccess"/></el-card>
</template><style scoped lang="scss">
.assets-insert-card {width: 60%; // 宽度margin: 65px auto 0; // 外边距
}
</style>

3. 修改资产

心法：修改资产页面

武技：开发修改资产页面 views/rms/assets/AssetsUpdate.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import MyUpload from "../../../components/MyUpload.vue";
import {reactive, ref} from "vue";
import {updateApi} from "../../../api/axios.js";
import {RULE} from "../../../const";
import router from "../../../router";
import {ElMessage} from "element-plus";
import {UPLOAD_ASSETS_URL} from "../../../api/assets.js";// 资产记录
let assets = JSON.parse(sessionStorage.getItem('row'));
// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/Assets'},{icon: 'Coin', label: '资产列表', url: '/Assets'},{icon: 'Edit', label: '修改资产'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([{label: '资产名称', prop: 'title', required: true},{label: '资产单价', prop: 'price', required: true, span: 12, type: 'number'},{label: '单价单位', prop: 'priceUnit', required: true, span: 12},{label: '总计库存', prop: 'total', required: true, span: 12, type: 'number'},{label: '库存单位', prop: 'stockUnit', required: true, span: 12},{label: '资产描述', prop: 'info', type: 'textarea'},
]);
let params = reactive(assets);
let rules = {title: RULE.TITLE, info: RULE.INFO};/* ==================== 修改成功后 ==================== */function updateSuccess() {ElMessage.success('修改记录成功！');setTimeout(() => router.push('/Assets'), 1000);
}
</script><template><my-nav :items="navItems"/><el-row :gutter="30" class="assets-update-row"><el-col :span="16"><el-card class="assets-update-card" header="修改基本信息"><my-form type="update":items="items":params="params":rules="rules":api="updateApi":args="{module: 'assets'}":callback="updateSuccess"/></el-card></el-col><el-col :span="8"><el-card header="上传资产图片"><my-upload :url="UPLOAD_ASSETS_URL + '/' + assets['id']"name="pictureFile":callback="updateSuccess":autoUpload="true"/></el-card></el-col></el-row>
</template><style scoped lang="scss">
.assets-update-row {margin: 65px auto 0; // 外边距
}
</style>

E04. RMS资产申请模块

武技：在 router/index.js 文件中开发全部相关页面路由配置

import AssetsBorrow from '../views/rms/assetsBorrow/AssetsBorrow.vue';
import AssetsBorrowInsert from '../views/rms/assetsBorrow/AssetsBorrowInsert.vue';
import AssetsBorrowUpdate from '../views/rms/assetsBorrow/AssetsBorrowUpdate.vue';const router = createRouter({history: createWebHashHistory(),routes: [{path: '/', name: 'Login', component: Login},{path: '/Main', name: 'Main', component: Main,redirect: '/Dashboard',children: [{path: '/AssetsBorrow', name: 'AssetsBorrow', component: AssetsBorrow},{path: '/AssetsBorrowInsert', name: 'AssetsBorrowInsert', component: AssetsBorrowInsert},{path: '/AssetsBorrowUpdate', name: 'AssetsBorrowUpdate', component: AssetsBorrowUpdate},]}]
});

1. 资产申请列表

心法：资产申请列表页面

武技：开发资产申请列表页面 views/rms/assetsBorrow/AssetsBorrow.vue

<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, ref, reactive} from "vue";
import {getResponseData, myPage} from "../../../request";
import {deleteApi, deleteBatchApi, excelApi, listApi, pageApi} from "../../../api/axios";
import {datetimeFormat, isNotNull} from "../../../util/index.js";
import {ElMessage} from "element-plus";
import {PROJECT_INFO} from "../../../const/index.js";
import {returnAssetsApi} from "../../../api/assets.js";// 员工下拉菜单选项
let empOptions = ref([]);
// 资产下拉菜单选项
let assetsOptions = ref([]);
// 路径导航
const navItems = [{icon: 'List', label: '资源管理'},{icon: 'Coin', label: '资产申请列表'},
];
// 数据头
const headItems = [{type: 'opt', span: 5, placeholder: '资产名称', options: assetsOptions.value, callback: pageByAssetsId},{type: 'opt', span: 5, placeholder: '员工名称', options: empOptions.value, callback: pageByEmpId},
];
// 表格列
const columns = [{label: '状态', prop: 'returnTime', format: e => isNotNull(e) ? '已归还' : '', width: 65},{label: '资产图片', prop: 'assets.picture', type: 'img', minio: minio},{label: '资产名称', prop: 'assets.title'},{label: '申请人', prop: 'emp.realname'},{label: '申请数量', prop: 'count', width: 100},{label: '资产单位', prop: 'assets.stockUnit', width: 100},{label: '申请时间', prop: 'created', format: datetimeFormat},{label: '预计归还时间', prop: 'expectedReturnTime', format: datetimeFormat},{label: '实际归还时间', prop: 'returnTime', format: datetimeFormat},{label: '资产申请描述', prop: 'info', type: 'card'},
];
// 按钮列
const buttons = [{label: '归还资产', callback: returnAssets},
]/* ==================== 归还资产 ==================== */function returnAssets(row) {returnAssetsApi(row['id']).then(res => {let data = getResponseData(res);if (data) {ElMessage.success('归还成功');page();}})
}/* ==================== 资产图片 ==================== */function minio(src) {return PROJECT_INFO.minioHost + '/assets/' + src;
}/* ==================== 分页查询 ==================== */// 表格数据 + 分页数据 + 资产ID + 员工ID
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, total: 0, callback: page});
let fkAssetsId = ref();
let fkEmpId = ref();async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {let config = {api: pageApi,args: {module: 'assetsBorrow'},params: {pageNum, pageSize},records, pageInfo}// 若资产ID不为空，则附加为分页条件if (fkAssetsId.value) config['params']['fkAssetsId'] = fkAssetsId.value;// 若员工ID不为空，则附加为分页条件if (fkEmpId.value) config['params']['fkEmpId'] = fkEmpId.value;// 发送分页请求await myPage(config);
}/* ==================== 搜索资产ID ==================== */function pageByAssetsId(val) {// 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求if (val || fkAssetsId.value) {fkAssetsId.value = val;page();}
}/* ==================== 搜索员工ID ==================== */function pageByEmpId(val) {// 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求if (val || fkEmpId.value) {fkEmpId.value = val;page();}
}/* ==================== 删除成功回调 ==================== */function deleteSuccess() {ElMessage.success('删除成功');page();
}/* ==================== 报表打印 ==================== */function downloadExcel() {excelApi('/assetsBorrow/excel', '资产申请报表');
}/* ==================== 加载函数 ==================== */onMounted(async () => {await page();// 查询全部员工并添加到下拉菜单选项中Object.values(getResponseData(await listApi({module: 'emp'}))).forEach(emp => {empOptions.value.push({label: emp['realname'], value: emp['id']});});// 查询全部资产并添加到下拉菜单选项中Object.values(getResponseData(await listApi({module: 'assets'}))).forEach(assets => {assetsOptions.value.push({label: assets['title'], value: assets['id']});});
});
</script><template><my-nav :items="navItems"/><my-head v-if="empOptions.length > 0 && assetsOptions.length > 0" :items="headItems"/><my-table module="assetsBorrow"insert-page="/AssetsBorrowInsert"update-page="/AssetsBorrowUpdate":records="records":columns="columns":buttons="buttons":delete-api="deleteApi":delete-batch-api="deleteBatchApi":delete-callback="deleteSuccess":excel-api="downloadExcel":pageInfo="pageInfo"/>
</template><style scoped lang="scss"></style>

2. 添加申请资产

心法：添加资产申请页面

武技：开发添加资产申请页面 views/rms/assetsBorrow/AssetsBorrowInsert.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import {onMounted, reactive, ref} from "vue";
import {insertApi, listApi} from "../../../api/axios.js";
import {getResponseData} from "../../../request/index.js";
import {RULE} from "../../../const";
import {ElMessage} from "element-plus";
import router from "../../../router";// 员工下拉菜单选项
let empOptions = ref([]);
// 资产下拉菜单选项
let assetsOptions = ref([]);
// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/Assets'},{icon: 'Coin', label: '资产申请列表', url: '/AssetsBorrow'},{icon: 'Plus', label: '添加资产申请记录'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([{label: '资产名称', prop: 'fkAssetsId', required: true, type: 'select', options: assetsOptions},{label: '员工名称', prop: 'fkEmpId', required: true, type: 'select', options: empOptions},{label: '申请数量', prop: 'count', required: true, type: 'number'},{label: '申请时间', prop: 'borrowTime', required: true, type: 'datetime', placeholder: '请选择申请时间'},{label: '预计归还时间', prop: 'expectedReturnTime', required: true, type: 'datetime', placeholder: '请选择预计归还时间'},{label: '资产描述', prop: 'info', type: 'textarea'},
]);
let params = reactive({});
let rules = {info: RULE.INFO};/* ==================== 添加成功后 ==================== */function insertSuccess() {ElMessage.success('添加记录成功！');setTimeout(() => router.push('/AssetsBorrow'), 1000);
}/* ==================== 加载函数 ==================== */onMounted(async () => {// 查询全部员工并添加到下拉菜单选项中Object.values(getResponseData(await listApi({module: 'emp'}))).forEach(emp => {empOptions.value.push({label: emp['realname'], value: emp['id']});});// 查询全部资产并添加到下拉菜单选项中Object.values(getResponseData(await listApi({module: 'assets'}))).forEach(assets => {assetsOptions.value.push({label: assets['title'], value: assets['id']});});
});
</script><template><my-nav :items="navItems"/><el-card class="assets-borrow-insert-card" header="添加资产申请记录"><my-form type="insert":items="items":params="params":rules="rules":api="insertApi":args="{module: 'assetsBorrow'}":callback="insertSuccess"/></el-card>
</template><style scoped lang="scss">
.assets-borrow-insert-card {width: 60%; // 宽度margin: 65px auto 0; // 外边距
}
</style>

3. 修改申请资产

心法：修改资产申请页面

武技：开发修改资产申请页面 views/rms/assetsBorrow/AssetsBorrowUpdate.vue

<script setup>
import MyForm from "../../../components/MyForm.vue";
import MyNav from "../../../components/MyNav.vue";
import {onBeforeMount, onMounted, ref, shallowReactive, shallowRef} from "vue";
import {listApi, updateApi} from "../../../api/axios.js";
import {getResponseData} from "../../../request/index.js";
import {RULE} from "../../../const";
import {ElMessage} from "element-plus";
import router from "../../../router";
import {isNotNull} from "../../../util/index.js";// 员工下拉菜单选项
let empOptions = ref([]);
// 资产下拉菜单选项
let assetsOptions = ref([]);
// 资产申请记录
let assetsBorrow = JSON.parse(sessionStorage.getItem('row'));
// 路径导航
const navItems = [{icon: 'List', label: '资源管理', url: '/Assets'},{icon: 'Coin', label: '资产申请列表', url: '/AssetsBorrow'},{icon: 'Edit', label: '修改资产申请信息'},
];
// 表单项 + 表单值 + 表单规则
let items = shallowRef([{label: '资产名称', prop: 'fkAssetsId', type: 'select', options: assetsOptions.value, required: true},{label: '员工名称', prop: 'fkEmpId', type: 'select', options: empOptions.value, required: true},{label: '申请数量', prop: 'count', type: 'number', required: true},{label: '申请时间', prop: 'borrowTime', type: 'datetime', placeholder: '请选择申请时间', required: true},{label: '预计归还时间',prop: 'expectedReturnTime',type: 'datetime',placeholder: '请选择预计归还时间',required: true},{label: '资产描述', prop: 'info', type: 'textarea'},
]);
let params = shallowReactive(assetsBorrow);
let rules = {info: RULE.INFO};/* ==================== 修改成功后 ==================== */function updateSuccess() {ElMessage.success('修改记录成功！');setTimeout(() => router.push('/AssetsBorrow'), 1000);
}/* ==================== 加载函数 ==================== */onBeforeMount(() => {if (isNotNull(assetsBorrow['returnTime'])) {ElMessage.warning('已归还的记录不能修改！');router.push('/AssetsBorrow');}
})onMounted(async () => {// 查询全部员工并添加到下拉菜单选项中Object.values(getResponseData(await listApi({module: 'emp'}))).forEach(emp => {empOptions.value.push({label: emp['realname'], value: emp['id']});});// 查询全部资产并添加到下拉菜单选项中Object.values(getResponseData(await listApi({module: 'assets'}))).forEach(assets => {assetsOptions.value.push({label: assets['title'], value: assets['id']});});
});
</script><template><my-nav :items="navItems" v-if="empOptions.length > 0 && assetsOptions.length > 0"/><el-card class="assets-borrow-update-card" header="修改资产申请信息"><my-form type="update":items="items":params="params":rules="rules":api="updateApi":args="{module: 'assetsBorrow'}":callback="updateSuccess"/></el-card>
</template><style scoped lang="scss">
.assets-borrow-update-card {width: 60%; // 宽度margin: 65px auto 0; // 外边距
}
</style>

Java道经 - 项目 - MyClub - 后台前端（三）