vue3进阶(三)——el-tabs标签页组件的使用& 设置sessionStorage.setItem()、获取sessionStorage.getItem()& router.push()跳转页面

vue3进阶(三)——el-tabs标签页组件的使用& 设置sessionStorage.setItem()、获取sessionStorage.getItem()& router.push()跳转页面

5、vue标签页

src\app\science\views\comquart\variousUnits\comInplement.vue

<!-- * @Author: zhaohaiyu @.com * @Date: 2023-05-18 19:56:45 * @LastEditors: zhaohaiyu @.com * @LastEditTime: 2023-05-19 09:56:13 * @FilePath: \sgtech-prj-webapp\src\app\science\views\comquart\variousUnits\comInplement.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="main-content"> <el-tabs v-model="manageZnIndex" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane v-if="handelLimit('zntab_05')" label="需求填报" name="5"> <guiFill v-if="manageZnIndex === '5'" /> </el-tab-pane> <el-tab-pane v-if="handelLimit('zntab_07')" label="需求管理" name="7"> <demand v-if="manageZnIndex === '7'" /> </el-tab-pane> <el-tab-pane v-if="handelLimit('zntab_09')" label="需求转组" name="9"> <needTurnGroup v-if="manageZnIndex === '9'" /> </el-tab-pane> <el-tab-pane v-if="handelLimit('zntab_06')" label="指南编制专家推荐" name="6" > <guideline v-if="manageZnIndex === '6'" /> </el-tab-pane> <el-tab-pane v-if="handelLimit('zntab_02')" label="指南编制专家确定" name="2" > <guiExpert v-if="manageZnIndex === '2'" /> </el-tab-pane> <el-tab-pane v-if="handelLimit('zntab_04')" label="指南信息维护" name="4"> <mainMation v-if="manageZnIndex === '4'" /> </el-tab-pane> <el-tab-pane v-if="handelLimit('zntab_03')" label="指南信息编制及发布" name="3" > <guiRelease v-if="manageZnIndex === '3'" /> </el-tab-pane> <el-tab-pane v-if="handelLimit('zntab_08')" label="指南信息查看" name="8"> <guideView v-if="manageZnIndex === '8'" /> </el-tab-pane> </el-tabs> </div> </template> <script setup> import guiFill from './guiFill.vue' import guideView from './guideView.vue' import demand from './demand.vue' import guideline from './guideline.vue' import guiExpert from './guiExpert.vue' import guiRelease from './guiRelease.vue' import mainMation from './mainMation.vue' import needTurnGroup from './needTurnGroup.vue' import { handelLimit } from '@src/utils/limits' const auths = { _5: handelLimit('zntab_05'), _7: handelLimit('zntab_07'), _9: handelLimit('zntab_09'), _6: handelLimit('zntab_06'), _2: handelLimit('zntab_02'), _4: handelLimit('zntab_04'), _3: handelLimit('zntab_03'), _8: handelLimit('zntab_08'), } const index = computed(() => { for (const key in auths) { if (auths[key]) { const result = key.split('_')[1] return result } } }) //获取sessionStorage const manageZnIndex = ref( sessionStorage.getItem('manageZnIndex') || index.value ) //设置sessionStorage const handleClick = (tab) => { sessionStorage.setItem('manageZnIndex', tab.props.name) } </script> <style lang="scss" scoped> @import url('../../style/main.scss'); </style> 

6、vue模块主页

src\app\science\views\comquart\variousUnits\needTurnGroup.vue

<template> <div> <el-form ref="formRef" label-width="120px" :model="formInline"> <el-row> <el-col :span="6"> <el-form-item label="需求名称：" prop="needName"> <el-input v-model="formInline.needName" maxlength="100" placeholder="请输入" @input="(e) => (formInline.needName = replaceCommonText(e))" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="需求类型：" prop="needType"> <dictSelect v-model="formInline.needType" :dictid="'prjReqType'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="指南批次：" prop="guidBatch"> <el-select v-model="formInline.guidBatch" :clearable="true" placeholder="请选择" @change="handleDelChange" > <el-option v-for="item in option" :key="item.value" :label="item.batchName" :value="item.id" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="组别" prop="group"> <el-row> <el-col :span="8"> <el-select v-model="formInline.guidVersion" :clearable="true" placeholder="请选择" @change="changeGuidVersion" > <el-option v-for="item in guidGroupList" :key="item.guidVersion" :label="item.guidVersion" :value="item.guidVersion" /> </el-select> </el-col> <el-col :span="16"> <el-select v-model="formInline.newGroupId" :clearable="true" :disabled="!formInline.guidVersion" placeholder="请选择" > <el-option v-for="item in guidIdList" :key="item.id" :label="item.groupName" :value="item.id" /> </el-select> </el-col> </el-row> </el-form-item> </el-col> <el-col :span="24"> <el-form-item class="search_btn"> <el-button v-throttle="3000" type="primary" @click="onSubmit"> 查询 </el-button> <el-button v-throttle="3000" plain type="primary" @click="resetForm(formRef)" > 重置 </el-button> </el-form-item> </el-col> </el-row> </el-form> <el-divider border-style="dashed" /> <el-row class="action-btn"> <el-button v-if="handelLimit('tp_btn_2228')" type="primary" @click="batchUp" > 提交 </el-button> <el-button v-if="handelLimit('tp_btn_2229')" type="primary" @click="handleClick('add')" > 添加 </el-button> <el-button v-if="handelLimit('tp_btn_2217')" type="primary" @click="examine" > 审核 </el-button> </el-row> <el-table ref="multipleTableRef" v-loading="loading" border class="table-style" :data="result" stripe @selection-change="handleSelectionChange" @sort-change="handleSortChange" > <el-table-column type="selection" /> <el-table-column label="需求编号" prop="needCode" /> <el-table-column label="需求名称" prop="needName" /> <el-table-column label="指南批次" prop="guidBatchName" /> <el-table-column label="需求类型" prop="needType" /> <el-table-column label="修改前组别" prop="oldGroupName" width="150" /> <el-table-column label="修改前技术领域" prop="oldTechFieldName" width="150" /> <el-table-column label="修改后组别" prop="newGroupName" /> <el-table-column label="修改后技术领域" prop="newTechFieldName" width="150" /> <el-table-column label="操作人" prop="createUser" /> <el-table-column label="流程状态" prop="processStateName"> <template #default="scope"> <span :style="{ color: scope.row.processId ? '#00a797' : '', cursor: scope.row.processId ? 'pointer' : 'default', }" @click="auditEvent(scope.row)" > { 
  { scope.row.processStateName }} </span> </template> </el-table-column> <el-table-column label="操作" prop="data"> <template #default="scope"> <el-button link type="primary" @click="handleClick('edit', scope.row)" > 编辑 </el-button> <el-button link type="primary" @click="handleClick('view', scope.row)" > 详情 </el-button> <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button> </template> </el-table-column> </el-table> <div class="jump-pagination"> <el-pagination background :current-page="pageInfo.pageNumber" layout="total, sizes, prev, pager, next, jumper" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40, 50, 100]" :total="pageInfo.total" @current-change="hanleCurrentChange" @size-change="handleSizeChange" /> <el-button link type="primary" @click="jumpClick">跳转</el-button> </div> <examineDialog v-model:auditId="auditId" v-model:is-show="dialogVisible" @examine-save="examineCallBack" /> <auditPopup v-model:dialogVisible="processDialogVisible" v-model:processId="processId" /> </div> </template> <script setup> import { ref } from 'vue' import { useInitalize } from './hooks/initalize.js' import examineDialog from '@src/components/examineDialog' import { handelLimit } from '@src/utils/limits' import { getVersion, getVersionByExpert, batchGroupUpdateStatus, deleDemandConvertById, } from '@/api/variousUnits/index.js' import { queryAllGuidBathInfo, demandConvertQuery, // exportDemand, } from '@/api/variousUnits/index.js' // import { batchExamine } from '@/api/variousUnits/index.js' import dictSelect from '@src/components/dictSelect' import auditPopup from '@src/components/auditPopup' // import { downLoadxls } from '@src/utils/util' import { replaceCommonText } from '@src/utils/validate' const router = useRouter() const formRef = ref() const formInline = ref({ needName: '', needType: '', guidVersion: '', newGroupId: '', guidBatch: '', } // 集合写法 const { result, pageInfo, onload, loading } = useInitalize( demandConvertQuery, formInline.value ) const guidGroupList = ref([]) const guidIdList = ref([]) // const tableData = ref([]) const dialogVisible = ref(false) const option = ref([]) //组别 onMounted(() => { getVersionByExpert({ expCode: '4' }).then((res) => { guidGroupList.value = res.data }) }) const changeGuidVersion = () => { formInline.value.guidGroup = '' const param = { expCode: '4', guidVersion: formInline.value.guidVersion } getVersion(param).then((res) => { guidIdList.value = res.data }) } // 逻辑 const handleClick = (type, row) => { const query = { type, id: row ? row.id : null, } router.push({ path: '/comquart/variousUnits/needTurnGroupDetails', query }) } //指南批次下拉框选择 const guidList = async () => { await queryAllGuidBathInfo({}).then((res) => { option.value = res.data }) } guidList() //查询 const onSubmit = () => { onload() } //重置 const resetForm = () => { formInline.value.guidGroup = '' formInline.value.guidVersion = '' formRef.value.resetFields() pageInfo.value.pageNumber = 1 onload() } //表格排序 // const custom = ref(true) const columns = ref('') const columnsFn = ref('') const handleSortChange = (column) => { columns.value = column.order === 'ascending' ? 'ascs' : 'descs' columnsFn.value = column.prop onload() } onload() //审核按钮 const multipleSelection = ref([]) const handleSelectionChange = (val) => { multipleSelection.value = val } const auditId = ref([]) const examine = () => { const examineProcessArr = [] const examineArr = ref([]) multipleSelection.value.forEach((item) => { examineProcessArr.push(item.processState) }) const isExamine = examineProcessArr.every((i) => { return i === '3' }) if (examineProcessArr.length === 0) { ElMessage.error(`请勾选需求`) } else if (isExamine) { multipleSelection.value.forEach((item) => { examineArr.value.push(item.processId) }) auditId.value = examineArr.value dialogVisible.value = true } else { ElMessage.error(`请只选择流程状态为'审批中'的项目`) } } const examineCallBack = () => { onload() examineArr.value = [] } //分页跳转查询 const hanleCurrentChange = (val) => { pageInfo.value.pageNumber = val onload() } const handleSizeChange = (val) => { pageInfo.value.pageSize = val onload() } const jumpClick = () => { onload() } //流程状态弹窗 const processDialogVisible = ref(false) const processId = ref('') const auditEvent = (row) => { if (row.processId) { processDialogVisible.value = true processId.value = row.processId } } //提交 const batchUp = () => { const ids = [] const bizNames = [] const states = [] multipleSelection.value.forEach((item) => { ids.push(item.id) bizNames.push(item.needName) states.push(item.processState) }) if (ids.length == 0) return ElMessage.error('请选择至少一条需求') const isState = states.some((item) => item !== '1' && item !== '2') if (isState) ElMessage.error('请只选择流程状态为待提交的需求') const loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) batchGroupUpdateStatus({ ids, bizNames }) .then((res) => { if (res.code === '00000') { onload() ElMessage.success('提交成功') } else { ElMessage.error(res.message) } }) .finally(() => { loading.close() }) } // 删除 const handleDelete = (id) => { ElMessageBox.confirm('确认要删除这条需求吗？', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', }) .then(() => { const loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) deleDemandConvertById({ id }).then((res) => { if (res.code === '00000') { loading.close() onload() ElMessage({ type: 'success', message: '删除成功', }) } else { ElMessage.error(res.message) } }) }) .catch(() => {}) } </script> <style lang="scss" scoped> @import url('../../style/main.scss'); .ym-select { width: 100%; } :deep() { .ym-form-item__content { display: flex; justify-content: flex-end; } } </style> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10761.html