From e6ce09ca661049fd9a4034e4db5a7584cae5c1ec Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期二, 20 九月 2022 10:41:37 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt --- src/views/system/appVersion/index.vue | 673 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 673 insertions(+), 0 deletions(-) diff --git a/src/views/system/appVersion/index.vue b/src/views/system/appVersion/index.vue new file mode 100644 index 0000000..af65464 --- /dev/null +++ b/src/views/system/appVersion/index.vue @@ -0,0 +1,673 @@ +<template> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="8"> + <div class="grid-content topInfo"> + <el-input v-model="searchWord" placeholder="版本名称"></el-input> + <el-button type="primary" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新增</el-button> + <!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> +<!-- <el-button type="danger" :icon="Delete" size="default" plain @click="deleteBatchBtn">删除</el-button>--> + </el-col> + <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" /> + </el-row> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange"> +<!-- <el-table-column type="selection" width="100" />--> + <el-table-column type="index" label="排序" width="80" align="center"/> + <el-table-column property="fileType" label="文件类型" align="center" :show-overflow-tooltip="true"/> + <el-table-column property="fileName" label="文件名称" align="center" :show-overflow-tooltip="true"/> + <el-table-column property="link" label="文件链接" align="center"/> + <el-table-column property="version" label="版本号" align="center"> + <template #default="scope"> + <el-tag>{{ scope.row.version }}</el-tag> + </template> + </el-table-column> + <el-table-column property="info" label="备注" align="center"/> + <el-table-column property="createTime" label="创建时间" align="center"/> + <el-table-column property="updateTime" label="更新时间" align="center"/> + <el-table-column fixed="right" label="操作" align="center" width="250"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecordBtn(scope.$index, scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pageBtn"> + <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> + </div> + </div> + </div> + </div> + <el-dialog v-model="dialogDetails" title="APP版本信息"> + <el-form :model="details" label-width="120px"> + <el-form-item label="文件类型"> + <el-input v-model="details.fileType" readonly /> + </el-form-item> + <el-form-item label="文件名称"> + <el-input v-model="details.fileName" readonly /> + </el-form-item> + <el-form-item label="文件链接"> + <el-input v-model="details.link" type="textarea" readonly /> + </el-form-item> + <el-form-item label="版本号"> + <el-input v-model="details.version" type="textarea" readonly /> + </el-form-item> + <el-form-item label="备注"> + <el-input v-model="details.info" type="textarea" readonly /> + </el-form-item> + <el-form-item label="创建时间"> + <el-input v-model="details.createTime" readonly /> + </el-form-item> + <el-form-item label="更新时间"> + <el-input v-model="details.updateTime" readonly /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="dialogAddRecord" title="APP版本信息编辑" @close="closeAdd" @open="openAdd"> + <el-form :model="addRecord" label-width="150px" ref="addRef" :rules="addRules"> + <el-form-item label="文件类型" prop="fileType"> + <el-input v-model="addRecord.fileType"> </el-input> + </el-form-item> + <el-form-item label="文件名称" prop="fileName"> + <el-input v-model="addRecord.fileName"> </el-input> + </el-form-item> + <el-form-item label="上传文件" prop="link"> + <el-upload accept=".apk" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='fileLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl"> + <el-button type="primary" plain>选择文件</el-button> + <template #tip> + <div class="el-upload__tip">上传新版APP</div> + </template> + </el-upload> + </el-form-item> + <el-form-item label="版本号" prop="version"> + <el-input v-model="addRecord.version"> </el-input> + </el-form-item> + <el-form-item label="备注"> + <el-input v-model="addRecord.info" type="textarea"> </el-input> + </el-form-item> + <el-form-item> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> +<!-- <el-dialog v-model="deleteSetDialog" title="提示" width="30%" center>--> +<!-- <span>您确定要删除这些记录吗?</span>--> +<!-- <template #footer>--> +<!-- <span class="dialog-footer">--> +<!-- <el-button @click="deleteSetDialog = false" size="default">取消</el-button>--> +<!-- <el-button type="primary" @click="conFirmDeleteBatch" size="default">确认</el-button>--> +<!-- </span>--> +<!-- </template>--> +<!-- </el-dialog>--> + </div> +</template> + +<script lang="ts"> +import { toRefs, reactive, ref, onMounted } from 'vue'; +import { storeToRefs } from 'pinia'; +import { initBackEndControlRoutes } from '/@/router/backEnd'; +import { useUserInfo } from '/@/stores/userInfo'; +import { Session } from '/@/utils/storage'; +import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'; +import { ElMessage, ElTable } from 'element-plus' +import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus' +import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage'; + +// 定义接口来定义对象的类型 +interface stateType { + tableData: Array<any>; + departmentList: Array<any>; + casProps: {}; + multipleSelection: Array<any>; + deleteArr: Array<any>; + dialogDetails: boolean; + dialogAddRecord: boolean; + deleteDialog: boolean; + deleteSetDialog: boolean; + pageIndex: number; + pageSize: number; + chosenIndex: null | number; + deleteId: null | number; + searchWord: string; + totalSize: number; + addRecord: { + groupName: string; + department: number | null; + depId: number | null; + groupMembers: Array<any>; + groupInfo: string; + }; + details: { + groupName: string; + department: number | null; + groupMembers: Array<any>; + groupInfo: string; + }; + fileLimit: number +} + +export default { + name: 'appVersion', + components: {}, + setup() { + const userInfo = useUserInfo(); + const { userInfos } = storeToRefs(userInfo); + + const state = reactive<stateType>({ + pageIndex: 1, + pageSize: 10, + totalSize: 0, + chosenIndex: null, + searchWord: '', + tableData: [ + { + fileType: '国泰APP', + fileName: '4', + link: 'http', + version: '4.0', + info: '最新', + createTime: '2022-09-10', + updateTime: '2022-09-19' + }, + { + fileType: '国泰APP', + fileName: '3', + link: 'http', + version: '3.0', + info: '', + createTime: '2022-09-10', + updateTime: '2022-09-19' + }, + { + fileType: '国泰APP', + fileName: '2', + link: 'http', + version: '2.0', + info: '', + createTime: '2022-09-10', + updateTime: '2022-09-19' + }, + { + fileType: '国泰APP', + fileName: '1', + link: 'http', + version: '1.0', + info: '', + createTime: '2022-09-10', + updateTime: '2022-09-19' + } + ], + fileLimit: 1, + departmentList: [], + department: '', + workTypeList: [ + { + label: "动火作业", + value: 1 + }, + { + label: "受限空间作业", + value: 2 + }, + { + label: "吊装作业", + value: 3 + }, + { + label: "动土作业", + value: 4 + }, + { + label: "断路作业", + value: 5 + }, + { + label: "高处作业", + value: 6 + }, + { + label: "临时用电作业", + value: 7 + }, + { + label: "盲板抽堵作业", + value: 8 + } + ], + casProps: { + expandTrigger: 'hover', + emitPath: false, + value: 'depId', + label: 'depName' + }, + multipleSelection: [], + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + deleteSetDialog: false, + addRecord: { + groupName: '', + department: null, + groupMembers: [], + depId: null, + groupInfo: '' + }, + details: { + groupName: '', + department: null, + groupMembers: [], + depId: null, + groupInfo: '' + }, + deleteId: null, + deleteArr: [] + }); + interface User { + groupName: string; + department: number | null; + depId: number; + groupMembers: Array<any>; + groupInfo: string; + } + // const multipleTableRef = ref<InstanceType<typeof ElTable>>(); + // const toggleSelection = (rows?: User[]) => { + // if (rows) { + // rows.forEach((row) => { + // // TODO: improvement typing when refactor table + // // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // // @ts-expect-error + // multipleTableRef.value!.toggleRowSelection(row, undefined); + // }); + // } else { + // multipleTableRef.value!.clearSelection(); + // } + // }; + + // 多选 + // const handleSelectionChange = (val: User[]) => { + // state.multipleSelection = JSON.parse(JSON.stringify(val)); + // state.deleteArr = state.multipleSelection.map((item) => { + // item = item.id; + // return item; + // }); + // }; + + const addRef = ref<FormInstance>(); + const addRules = reactive<FormRules>({ + groupName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + department: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + groupMembers: [{ required: true, message: '该内容不能为空', trigger: 'blur' }] + }); + + // 页面载入时执行方法 + onMounted(() => { + // getListByPage(); + // getAllDepartment(); + }); + + // 分页获取物资标准列表 + const getListByPage = async () => { + const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } }; + let res = await teamManageApi().getRecordPage(data); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item) => { + if (!item.groupMembers || item.groupMembers == null) { + item.groupMembers = []; + } else { + item.groupMembers = Array.from(item.groupMembers, ({ username }) => username); + } + return item; + }); + state.totalSize = res.data.total; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 获取部门列表 + const getAllDepartment = async () => { + let res = await teamManageApi().getAllDepartment(); + if (res.data.code === '200') { + state.departmentList = res.data.data; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // const handleChange = async (value) => { + // state.addRecord.depId = value; + // console.log(state.addRecord.department, 'de'); + // let res = await teamManageApi().getAllMember(value); + // if (res.data.code === '200') { + // state.workerList = res.data.data; + // } else { + // ElMessage({ + // type: 'warning', + // message: res.data.msg + // }); + // } + // }; + + // 关键词查询记录 + const searchRecord = async () => { + if (state.searchWord == '') { + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + } else { + getListByPage(); + } + }; + + const clearSearch = async () => { + state.searchWord = ''; + getListByPage(); + }; + + // 添加班组管理方法 + const addRecord = async (data: any) => { + let res = await teamManageApi().addRecord(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '添加成功!' + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 修改工作时段方法 + const editRecordBtn = async (index, row) => { + state.addRecord = JSON.parse(JSON.stringify(row)); + state.addRecord.department = ''; + state.addRecord.groupMembers = []; + state.dialogAddRecord = true; + state.chosenIndex = index; + }; + + const editRecord = async (data: any) => { + let res = await teamManageApi().updateRecord(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '修改成功!' + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 新增修改记录 + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate(async (valid, fields) => { + if (valid) { + const data = { + groupName: state.addRecord.groupName, + groupInfo: state.addRecord.groupInfo, + depId: state.addRecord.depId, + groupMemberIds: state.addRecord.groupMembers + }; + if (state.chosenIndex == null) { + await addRecord(data); + } else { + data.groupId = JSON.stringify(state.addRecord.groupId); + await editRecord(data); + } + state.dialogAddRecord = false; + } else { + console.log('error submit!', fields); + } + }); + }; + + // 删除工作时间组方法 + const deleteRecord = async (data: any) => { + let res = await teamManageApi().deleteRecord(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '删除成功!' + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + const deleteRecordBtn = (row) => { + console.log(row, 'row'); + state.deleteId = row.groupId; + state.deleteDialog = true; + }; + + const conFirmDelete = () => { + deleteRecord({ groupId: state.deleteId }); + state.deleteDialog = false; + }; + + // 批量删除 + // const deleteBatchBtn = async () => { + // ElMessage({ + // type: 'warning', + // message: '抱歉,本页面暂不支持批量删除' + // }); + // if (state.deleteArr.length > 0) { + // state.deleteSetDialog = true + // } else { + // ElMessage({ + // type: 'warning', + // message: '请先选择要删除的记录' + // }); + // } + // }; + + // const conFirmDeleteBatch = async () => { + // let res = await teamManageApi().deletBatchRecord({ids: state.deleteArr}); + // if (res.data.code === '200') { + // state.deleteSetDialog = false + // ElMessage({ + // type: 'success', + // message: res.data.msg + // }); + // getListByPage() + // } else { + // ElMessage({ + // type: 'warning', + // message: res.data.msg + // }); + // state.deleteSetDialog = false + // } + // } + + const handleSizeChange = (val: number) => { + state.pageSize = val; + getListByPage(); + }; + const handleCurrentChange = (val: number) => { + state.pageIndex = val; + getListByPage(); + }; + + // 查看记录 + const viewRecord = (row) => { + state.details = JSON.parse(JSON.stringify(row)); + state.dialogDetails = true; + }; + + // 刷新 + const reLoadData = async () => { + getListByPage(); + }; + + const closeAdd = () => { + state.addRecord = {}; + state.chosenIndex = null; + }; + const openAdd = () => { + if (state.chosenIndex == null) { + state.addRecord.info = ''; + } + }; + const indexClear = () => { + state.deleteId = null; + }; + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value); + userInfos.value.projectId = value; + await initBackEndControlRoutes(); + }; + return { + addRef, + addRules, + View, + Edit, + Delete, + Refresh, + Plus, + searchRecord, + clearSearch, + viewRecord, + deleteRecordBtn, + conFirmDelete, + getListByPage, + reLoadData, + deleteRecord, + handleSizeChange, + handleCurrentChange, + confirmAddRecord, + closeAdd, + openAdd, + indexClear, + editRecordBtn, + ...toRefs(state) + }; + } +}; +</script> + +<style scoped lang="scss"> +$homeNavLengh: 8; +.home-container { + height: calc(100vh - 144px); + box-sizing: border-box; + overflow: hidden; + .homeCard { + width: 100%; + padding: 20px; + box-sizing: border-box; + background: #fff; + border-radius: 4px; + + .main-card { + width: 100%; + height: 100%; + .cardTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn { + margin: 0; + } + } + .pageBtn { + height: 60px; + display: flex; + align-items: center; + justify-content: right; + + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } + } + &:last-of-type { + height: calc(100% - 100px); + } + } + .el-row { + display: flex; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content { + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + & > div { + white-space: nowrap; + margin-right: 20px; + } + } + } +} +.el-input { + width: 100% !important; +} +.el-date-editor::v-deep { + width: 100%; +} +.el-select { + width: 100% !important; +} +.el-tabs{ + width: 100%; +} +</style> -- Gitblit v1.9.2