vue3 advanced (3) - use of el-tabs tab component & setting sessionStorage.setItem(), getting sessionStorage.getItem()& router.push() jump page
5. vue tab page
src\app\science\views\comquart\variousUnits\comInplement.vue
<!--
* @Author: zhaohaiyu [email protected]
* @Date: 2023-05-18 19:56:45
* @LastEditors: zhaohaiyu [email protected]
* @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 module homepage
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>