| | |
| | | <template> |
| | | <el-dialog v-model="dialogVisible" :fullscreen="full" :before-close="resetForm" :title="titles" width="50%" draggable> |
| | | <el-dialog v-model="dialogVisible" :fullscreen="full" @close="resetForm(ruleFormRef)" :title="titles" width="50%" draggable> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form :model="form" :disabled="disabled" label-width="120px"> |
| | | <el-form :model="form" ref="ruleFormRef" :rules="rules" :disabled="disabled" label-width="120px"> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="设施异常项" size="default"> |
| | | <el-form-item label="设施异常项" size="default" prop="exceptionInfo"> |
| | | <el-input v-model="form.exceptionInfo" placeholder="请填写设施异常项" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="维修状态" size="default"> |
| | | <el-form-item label="维修状态" size="default" prop="repairStatus"> |
| | | <el-select v-model="form.repairStatus" placeholder="请选择" style="width: 100%"> |
| | | <el-option label="维修中" value="1" /> |
| | | <el-option label="已修好" value="2" /> |
| | |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="维修情况" size="default"> |
| | | <el-form-item label="维修情况" size="default" prop="repairMemo"> |
| | | <el-input v-model="form.repairMemo" placeholder="请填写维修情况" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="维修负责人" size="default"> |
| | | <el-form-item label="维修负责人" size="default" prop="repairPersonName"> |
| | | <el-input v-model="form.repairPersonName" placeholder="请选择"> |
| | | <template #append> <el-button :icon="Search" @click="openUser" /> </template |
| | | ></el-input> |
| | |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="维修负责人单位" size="default"> |
| | | <el-tree-select v-model="form.repairPersonDepartmentId" :data="data" check-strictly="true" class="w100" :props="propse" placeholder="请选择" /> |
| | | <el-form-item label="维修负责人单位" size="default" prop="repairPersonDepartmentId"> |
| | | <el-tree-select |
| | | v-model="form.repairPersonDepartmentId" |
| | | :data="data" |
| | | check-strictly="true" |
| | | class="w100" |
| | | :props="propse" |
| | | placeholder="请选择" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="维修开始日期" size="default"> |
| | | <el-date-picker v-model="form.repairStartDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" /> |
| | | <el-form-item label="维修开始日期" size="default" prop="repairStartDate"> |
| | | <el-date-picker |
| | | v-model="form.repairStartDate" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="datetime" |
| | | placeholder="选择日期时间" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="维修结束日期" size="default"> |
| | | <el-date-picker v-model="form.repairEndDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%" /> |
| | | <el-form-item label="维修结束日期" size="default" prop="repairEndDate"> |
| | | <el-date-picker |
| | | v-model="form.repairEndDate" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="datetime" |
| | | placeholder="选择日期时间" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <!-- <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button> --> |
| | | <el-button @click="resetForm" size="default">关闭</el-button> |
| | | <el-button type="primary" @click="submitForm" size="default">确定</el-button> |
| | | <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> |
| | | <el-button type="primary" @click="submitForm(ruleFormRef)" :disabled="disabled" size="default">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, ref, reactive } from 'vue'; |
| | | import { ElMessage, ElMessageBox} from 'element-plus'; |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | import type { FormInstance, FormRules } from 'element-plus'; |
| | | import { Search, FullScreen } from '@element-plus/icons-vue'; |
| | | import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | export default defineComponent({ |
| | | components: { DailogSearchUser }, |
| | | setup(props, { emit }) { |
| | | const ruleFormRef = ref<FormInstance>(); |
| | | const form = ref({ |
| | | exceptionInfo: '', |
| | | repairStatus: '', |
| | | repairMemo: '', |
| | | repairPersonId: '', |
| | | repairPersonName:'', |
| | | repairPersonDepartmentId: "", |
| | | repairPersonName: '', |
| | | repairPersonDepartmentId: '', |
| | | repairStartDate: '', |
| | | repairEndDate: '', |
| | | }); |
| | |
| | | const disabled = ref(false); |
| | | const dialogVisible = ref(false); |
| | | const openDailog = (title: string, data: any) => { |
| | | department() |
| | | department(); |
| | | dialogVisible.value = true; |
| | | titles.value = `${title}设备维修`; |
| | | if (title == '查看') { |
| | | disabled.value = true; |
| | | form.value = data; |
| | | } else if(title == '修改') { |
| | | } else if (title == '修改') { |
| | | disabled.value = false; |
| | | form.value = data; |
| | | } |
| | |
| | | form.value.repairPersonId = val.uid; |
| | | form.value.repairPersonName = val.realName; |
| | | }; |
| | | const rules = reactive<FormRules>({ |
| | | exceptionInfo: [{ required: true, message: '设施异常项不能为空', trigger: 'blur' }], |
| | | repairStatus: [{ required: true, message: '维修状态不能为空', trigger: 'blur' }], |
| | | repairMemo: [{ required: true, message: '维修情况不能为空', trigger: 'blur' }], |
| | | // repairPersonName: [{ required: true, message: '维修负责人不能为空', trigger: 'blur' }], |
| | | repairPersonDepartmentId: [{ required: true, message: '维修负责人单位不能为空', trigger: 'blur' }], |
| | | repairStartDate: [{ required: true, message: '维修开始日期不能为空', trigger: 'blur' }], |
| | | repairEndDate: [{ required: true, message: '维修结束日期不能为空', trigger: 'blur' }], |
| | | }); |
| | | // 提交 |
| | | const submitForm = () => { |
| | | dialogVisible.value = false; |
| | | emit('onRepair', form.value); |
| | | form.value = { |
| | | exceptionInfo: '', |
| | | repairStatus: '', |
| | | repairMemo: '', |
| | | repairPersonId: '', |
| | | repairPersonName:'', |
| | | repairPersonDepartmentId: "", |
| | | repairStartDate: '', |
| | | repairEndDate: '', |
| | | }; |
| | | const submitForm = async (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | emit('onRepair', form.value); |
| | | dialogVisible.value = false; |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | disabled.value = false; |
| | | }; |
| | | // 取消 |
| | | const resetForm = () => { |
| | | dialogVisible.value = false; |
| | | form.value = { |
| | | exceptionInfo: '', |
| | | repairStatus: '', |
| | | repairMemo: '', |
| | | repairPersonId: '', |
| | | repairPersonName:"", |
| | | repairPersonDepartmentId: "", |
| | | repairStartDate: '', |
| | | repairEndDate: '', |
| | | }; |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return; |
| | | formEl.clearValidate(); |
| | | disabled.value = false; |
| | | dialogVisible.value = false; |
| | | form.value = {}; |
| | | }; |
| | | //全屏 |
| | | const full = ref(false); |
| | |
| | | full.value = false; |
| | | } |
| | | }; |
| | | //部门树 |
| | | //部门树 |
| | | const department = () => { |
| | | goalManagementApi() |
| | | .getTreedepartment() |
| | |
| | | }; |
| | | const data = ref(); |
| | | return { |
| | | rules, |
| | | ruleFormRef, |
| | | department, |
| | | propse, |
| | | data, |