From b5069cc8ebdb8bc51f1b45f0c49a7e385490a32a Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期一, 04 七月 2022 11:17:28 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt --- src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue | 246 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 246 insertions(+), 0 deletions(-) diff --git a/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue b/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue new file mode 100644 index 0000000..5d7eae9 --- /dev/null +++ b/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue @@ -0,0 +1,246 @@ +<template> + <div class="home-container"> + <div v-for="(item,index) in approveSteps" class="stepItem"> + <div class="stepNum">{{index+1}}</div> + <div class="stepCard"> + <el-card class="box-card" shadow="hover"> + <template #header> + <div class="card-header"> + <div>步骤<span>{{index+1}}</span></div> + <div> + <el-button type="primary" size="default" @click="addFlow(index)">新增</el-button> + <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button> + </div> + </div> + </template> + <div class="text item">审批部门:<span>{{item.department}}</span></div> + <div class="text item">审批人员:<span>{{item.manager}}</span></div> + <div class="text item">其他参数:<span>{{item.others}}</span></div> + </el-card> + </div> + </div> + <el-row> + <el-button type="primary" @click="confirmEdit" size="default">确认</el-button> + <el-button @click="cancelEdit" size="default">取消</el-button> + </el-row> + <el-drawer v-model="showAdd" direction="rtl"> + <template #title> + <h4>新增审批流</h4> + </template> + <template #default> + <el-form :model="addProgress" label-width="120px"> + <el-form-item label="审批部门"> + <el-select v-model="addProgress.department" placeholder="请选择审批部门"> + <el-option label="动土" value="动土" /> + <el-option label="动火" value="动火" /> + </el-select> + </el-form-item> + <el-form-item label="审批人员"> + <el-select v-model="addProgress.manager" placeholder="请选择审批人员"> + <el-option label="人员1" value="人员1" /> + <el-option label="人员2" value="人员2" /> + </el-select> + </el-form-item> + <el-form-item label="其他参数"> + <el-input v-model="addProgress.others" /> + </el-form-item> + </el-form> + </template> + <template #footer> + <div style="flex: auto"> + <el-button type="primary" @click="confirmClick(ruleFormRef)" size="default">确认</el-button> + <el-button @click="cancelClick" size="default">取消</el-button> + </div> + </template> + </el-drawer> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center> + <span>您确定要删除该审批流吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> + import { toRefs, reactive, defineComponent, ref } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + import {useUserInfo} from "/@/stores/userInfo"; + import { Session } from '/@/utils/storage'; + import { ElMessage } from 'element-plus' + let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined], + }; + + interface stateType { + homeOne: Array <type> + } + interface type { + + } + export default defineComponent({ + name: 'approveProcessSetting', + setup() { + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const approveSteps = [ + { + department: '动土', + manager: '', + others: '' + }, + { + department: '动土', + manager: '', + others: '' + }, + { + department: '动土', + manager: '', + others: '' + } + ]; + const showAdd = ref(false) + const deleteDialog = ref(false) + const chosenIndex = ref('') + const addProgress = ref({ + department: '', + manager: '', + others: '' + }) + const confirmClick = () => { + approveSteps.splice(chosenIndex.value+1,0,addProgress.value) + addProgress.value = { + department: '', + manager: '', + others: '' + } + showAdd.value = false + } + const addFlow = (index) => { + showAdd.value = true + chosenIndex.value = index + } + const deleteFlow = (index) => { + if(approveSteps.length>1){ + deleteDialog.value = true + chosenIndex.value = index + }else{ + ElMessage({ + message: '抱歉最后一条无法删除', + type: 'warning', + }) + } + } + const conFirmDelete = () => { + const i = chosenIndex.value + approveSteps.splice( i,1) + deleteDialog.value = false + } + const cancelEdit = () => { + + } + const confirmEdit = () =>{ + + } + const state = reactive<stateType>({}); + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId',value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + return { + renderMenu, + showAdd, + approveSteps, + addProgress, + chosenIndex, + deleteDialog, + conFirmDelete, + deleteFlow, + addFlow, + confirmClick, + cancelEdit, + confirmEdit, + ...toRefs(state), + }; + }, + }); +</script> + +<style scoped lang="scss"> + $homeNavLengh: 8; + .home-container { + overflow: hidden; + padding: 80px; + .stepItem{ + display: flex; + align-items: flex-start; + margin-bottom: 30px; + padding-bottom: 30px; + border-left: 2px solid #ccc; + &:last-of-type{ + margin-bottom: 0; + border-left: none; + } + .stepNum { + width: 30px; + height: 30px; + border-radius: 15px; + box-sizing: border-box; + color: #333; + border: 2px solid #999; + line-height: 26px; + text-align: center; + margin-right: 40px; + margin-left: -16px; + margin-top: -30px; + } + .stepCard { + margin-top: -30px; + + .box-card { + width: 480px; + + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + + span{ + font-weight: bold; + margin-left: 10px; + } + } + + .text { + font-size: 14px; + } + + .item { + margin-bottom: 18px; + } + } + } + &:hover .card-header{ + color: #0098F5; + } + &:hover .stepNum{ + border: 2px solid #0098F5; + color: #0098F5; + } + } + + .el-form{ + padding: 40px 20px; + } + } +</style> -- Gitblit v1.9.2