| | |
| | | <template> |
| | | <div class="home-container"> |
| | | <el-scrollbar height="100%"> |
| | | <div class="homeCard"> |
| | | <div> |
| | | <div v-for="(item,index) in approveSteps" class="stepItem"> |
| | | <div class="stepNum">{{index+1}}</div> |
| | | <div class="stepCard"> |
| | |
| | | </el-card> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-row> |
| | | <el-button type="primary" @click="confirmEdit" size="default">确认</el-button> |
| | | <el-button @click="cancelEdit" size="default">取消</el-button> |
| | | <el-button type="primary" @click="confirmEdit" size="large">确认</el-button> |
| | | <el-button @click="cancelEdit" size="large">取消</el-button> |
| | | </el-row> |
| | | <el-drawer v-model="showAdd" direction="rtl"> |
| | | </div> |
| | | <el-drawer v-model="showAdd" direction="rtl" @close="colseDrawer"> |
| | | <template #title> |
| | | <h4>新增审批流</h4> |
| | | </template> |
| | | <template #default> |
| | | <el-form :model="addProgress" label-width="120px"> |
| | | <el-form-item label="审批部门"> |
| | | <el-form :model="addProgress" label-width="120px" ref="ruleFormRef" :rules="ProgressRules"> |
| | | <el-form-item label="审批部门" prop="department"> |
| | | <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-form-item label="审批人员" prop="manager"> |
| | | <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-form-item label="其他参数" prop="others"> |
| | | <el-input v-model="addProgress.others" /> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | </el-scrollbar> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | | import { Session } from '/@/utils/storage'; |
| | | import { ElMessage } from 'element-plus' |
| | | import type { FormInstance, FormRules } from 'element-plus' |
| | | let global: any = { |
| | | homeChartOne: null, |
| | | homeChartTwo: null, |
| | |
| | | manager: '', |
| | | others: '' |
| | | }) |
| | | const confirmClick = () => { |
| | | approveSteps.splice(chosenIndex.value+1,0,addProgress.value) |
| | | addProgress.value = { |
| | | department: '', |
| | | manager: '', |
| | | others: '' |
| | | } |
| | | const ruleFormRef = ref<FormInstance>() |
| | | const ProgressRules = reactive<FormRules>({ |
| | | department: [{required:true,message: '该选项不能为空',trigger: 'blur'}], |
| | | manager: [{required:true,message: '该选项不能为空',trigger: 'blur'}] |
| | | }) |
| | | const confirmClick = async (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | approveSteps.splice(chosenIndex.value+1,0,addProgress.value) |
| | | showAdd.value = false |
| | | } else { |
| | | console.log('error submit!', fields) |
| | | } |
| | | }) |
| | | |
| | | } |
| | | const cancelClick=()=>{ |
| | | showAdd.value = false |
| | | } |
| | | const addFlow = (index) => { |
| | |
| | | approveSteps.splice( i,1) |
| | | deleteDialog.value = false |
| | | } |
| | | const colseDrawer = ()=>{ |
| | | addProgress.value = { |
| | | department: '', |
| | | manager: '', |
| | | others: '' |
| | | } |
| | | } |
| | | const cancelEdit = () => { |
| | | |
| | | } |
| | |
| | | showAdd, |
| | | approveSteps, |
| | | addProgress, |
| | | ruleFormRef, |
| | | ProgressRules, |
| | | chosenIndex, |
| | | deleteDialog, |
| | | colseDrawer, |
| | | conFirmDelete, |
| | | cancelClick, |
| | | deleteFlow, |
| | | addFlow, |
| | | confirmClick, |
| | |
| | | <style scoped lang="scss"> |
| | | $homeNavLengh: 8; |
| | | .home-container { |
| | | height: 100%; |
| | | overflow: hidden; |
| | | padding: 80px; |
| | | padding: 20px; |
| | | .homeCard{ |
| | | width: 100%; |
| | | padding: 20px; |
| | | background: #fff; |
| | | border-radius: 4px; |
| | | } |
| | | .stepItem{ |
| | | display: flex; |
| | | align-items: flex-start; |
| | | margin-bottom: 30px; |
| | | margin-left: 30px; |
| | | padding-bottom: 30px; |
| | | border-left: 2px solid #ccc; |
| | | &:first-of-type{ |
| | | margin-top: 30px; |
| | | } |
| | | &:last-of-type{ |
| | | margin-bottom: 0; |
| | | border-left: none; |