| | |
| | | <template> |
| | | <el-dialog :title="titleName" v-model="dialogVisible" @click="resetForm" width="50%" draggable :fullscreen="full" :close-on-click-modal="false"> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form ref="ruleFormRef" :model="form" size="default" :disabled="disabled" label-width="120px"> |
| | | <div v-if="titleName=='发起审批'"> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="审批名称" prop="workName" size="default"> |
| | | <el-input v-model="form.workName" :disabled="disabledT" placeholder="请填写名称"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="审批标题" prop="title" size="default"> |
| | | <el-input v-model="form.title" :disabled="disabledT" placeholder="请填写标题"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="审批人" prop="approvePersonId" size="default"> |
| | | <el-input v-model="form.approvePersonName" :disabled="disabledT" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="openUser" /> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"></el-col> |
| | | </el-row> |
| | | </div> |
| | | <div v-if="titleName!='发起审批'"> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="审批名称" prop="workName" size="default"> |
| | | <el-input v-model="formUp.workName" :disabled="disabledT" placeholder="请填写名称"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="审批标题" prop="title" size="default"> |
| | | <el-input v-model="formUp.title" :disabled="disabledT" placeholder="请填写标题"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="审批人" prop="approvePersonId" size="default"> |
| | | <el-input v-model="formUp.approvePersonName" :disabled="disabledT" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="openUser" /> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"></el-col> |
| | | </el-row> |
| | | </div> |
| | | <div v-if="typeScope"> |
| | | <el-row> |
| | | <el-col> |
| | | <el-form-item label="审批结果" prop="authorUid"> |
| | | <el-radio-group v-model="form.approveResult"> |
| | | <el-radio :label="0">不通过</el-radio> |
| | | <el-radio :label="1">通过</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="审批意见" prop="approveMemo"> |
| | | <el-input v-model="form.approveMemo" type="textarea" placeholder="请填写审批意见"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="是否完成" prop="complete"> |
| | | <el-radio-group v-model="form.approveStatus"> |
| | | <el-radio :label="3">是</el-radio> |
| | | <el-radio :label="2">否</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <div v-if="form.approveStatus==2"> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="审批名称" prop="workName" size="default"> |
| | | <el-input v-model="form.workName" placeholder="请填写名称"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="审批标题" prop="title" size="default"> |
| | | <el-input v-model="form.title" placeholder="请填写标题"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="审批人" prop="approvePersonId" size="default"> |
| | | <el-input v-model="form.approvePersonName" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="openUser" /> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"></el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="resetForm" size="default">关闭</el-button> |
| | | <el-button size="default" type="primary" @click="submitForm">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <DailogSearchUserManger ref="userRef" @SearchUser="onUser" /> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { ref, defineComponent } from 'vue'; |
| | | import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | import { Search, FullScreen } from '@element-plus/icons-vue'; |
| | | export default defineComponent({ |
| | | components: { DailogSearchUserManger }, |
| | | setup(props, { emit }) { |
| | | const dialogVisible = ref(false); |
| | | const form = ref({ |
| | | workName: '', // 审批名称 |
| | | title: '', //审批标题 |
| | | approvePersonId: '', |
| | | approvePersonName: '', |
| | | approveStatus: 2, |
| | | approveResult: '', |
| | | relateType: 1, |
| | | relateId: '', |
| | | }); |
| | | // 提交 |
| | | const submitForm = () => { |
| | | if (titleName.value == '发起审批') { |
| | | goalManagementApi() |
| | | .getworkApproveAdd(form.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'success', |
| | | }); |
| | | emit('onType'); |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | } else if (titleName.value == '审批') { |
| | | goalManagementApi() |
| | | .getworkApproveUpdata(form.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'success', |
| | | }); |
| | | emit('onType'); |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | } |
| | | dialogVisible.value = false; |
| | | disabled.value = false; |
| | | disabledT.value = false; |
| | | form.value={} |
| | | formUp.value={} |
| | | }; |
| | | // 关闭 |
| | | const resetForm = () => { |
| | | dialogVisible.value = false; |
| | | disabled.value = false; |
| | | disabledT.value = false; |
| | | form.value={} |
| | | formUp.value={} |
| | | }; |
| | | const titleName = ref(); |
| | | const typeScope = ref(); |
| | | const disabledT = ref(false); |
| | | const disabled = ref(false); |
| | | const formUp=ref({ |
| | | workName:"", |
| | | title:"", |
| | | approvePersonName:"" |
| | | }) |
| | | // 打开弹窗 |
| | | const openDialog = (title: string, name: string, id: number,type:number) => { |
| | | dialogVisible.value = true; |
| | | titleName.value = title; |
| | | form.value.relateType=type |
| | | if (title == '发起审批') { |
| | | form.value.relateId = id; |
| | | typeScope.value = false; |
| | | } else if (title == '审批'||title == '查看审批') { |
| | | goalManagementApi() |
| | | .getworkApproveDetail(id) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | form.value = res.data.data; |
| | | form.value.approveStatus="" |
| | | formUp.value.workName=form.value.workName |
| | | formUp.value.title=form.value.title |
| | | formUp.value.approvePersonName=form.value.approvePersonName |
| | | if (form.value.approvePersonName === form.value.submitPersonName) { |
| | | disabled.value = false; |
| | | } else { |
| | | disabled.value = true; |
| | | } |
| | | } |
| | | }); |
| | | typeScope.value = true; |
| | | disabledT.value = true; |
| | | } |
| | | }; |
| | | // 打开用户选择弹窗 |
| | | const userRef = ref(); |
| | | const openUser = () => { |
| | | userRef.value.openDailog(); |
| | | }; |
| | | const onUser = (val: any) => { |
| | | form.value.approvePersonId = val[0].uid; |
| | | form.value.approvePersonName = val[0].realName; |
| | | }; |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | | if (full.value == false) { |
| | | full.value = true; |
| | | } else { |
| | | full.value = false; |
| | | } |
| | | }; |
| | | return { |
| | | formUp, |
| | | onUser, |
| | | dialogVisible, |
| | | form, |
| | | disabledT, |
| | | submitForm, |
| | | resetForm, |
| | | titleName, |
| | | typeScope, |
| | | disabled, |
| | | openDialog, |
| | | userRef, |
| | | openUser, |
| | | full, |
| | | toggleFullscreen, |
| | | Search, |
| | | FullScreen, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | <style> |
| | | .el-row { |
| | | padding-bottom: 20px; |
| | | } |
| | | </style> |