| | |
| | | <template> |
| | | <el-dialog v-model="dialogVisible" :fullscreen="full" :before-close="resetForm" :title="titles" width="50%" draggable> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form :model="form" label-width="120px" :disabled="disabled"> |
| | | <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" ref="ruleFormRef" :rules="rules" label-width="120px" :disabled="disabled"> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="序号" size="default"> |
| | | <el-form-item label="序号" size="default" prop="indexNum"> |
| | | <el-input v-model="form.indexNum" placeholder="请填写序号" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2" size="default"> |
| | | <el-col :span="11" :offset="2" size="default" prop="checkContent"> |
| | | <el-form-item label="检查内容"> |
| | | <el-input v-model="form.checkContent" placeholder="请填写检查内容" /> |
| | | </el-form-item> |
| | |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="检查指标" size="default"> |
| | | <el-form-item label="检查指标" size="default" prop="checkTarget"> |
| | | <el-input v-model="form.checkTarget" 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="unit"> |
| | | <el-input v-model="form.unit" placeholder="请填写单位" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="巡检部位" size="default"> |
| | | <el-form-item label="巡检部位" size="default" prop="checkPart"> |
| | | <el-input v-model="form.checkPart" 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="rate"> |
| | | <el-input v-model="form.rate" placeholder="请填写频次" /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <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)" size="default">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, ref, reactive } from 'vue'; |
| | | import type { FormInstance, FormRules } from 'element-plus'; |
| | | import { Search, FullScreen } from '@element-plus/icons-vue'; |
| | | import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; |
| | | export default defineComponent({ |
| | | components: { DailogSearchUser }, |
| | | setup(props, { emit }) { |
| | | const ruleFormRef = ref<FormInstance>(); |
| | | const form = ref({ |
| | | indexNum: '', |
| | | checkContent: '', |
| | | checkTarget: '', |
| | | unit: '', |
| | | checkPart: "", |
| | | checkPart: '', |
| | | rate: '', |
| | | }); |
| | | // 开启弹窗 |
| | |
| | | if (title == '查看') { |
| | | disabled.value = true; |
| | | form.value = data; |
| | | } else if(title=='修改'){ |
| | | } else if (title == '修改') { |
| | | disabled.value = false; |
| | | form.value = data; |
| | | } |
| | |
| | | const openUser = () => { |
| | | Show.value.openDailog(); |
| | | }; |
| | | const rules = reactive<FormRules>({ |
| | | indexNum: [{ required: true, message: '序号不能为空', trigger: 'blur' }], |
| | | checkContent: [{ required: true, message: '检查内容不能为空', trigger: 'blur' }], |
| | | checkTarget: [{ required: true, message: '检查指标不能为空', trigger: 'blur' }], |
| | | unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }], |
| | | checkPart: [{ required: true, message: '巡检部位不能为空', trigger: 'blur' }], |
| | | rate: [{ required: true, message: '频次不能为空', trigger: 'blur' }], |
| | | }); |
| | | // 提交 |
| | | const submitForm = () => { |
| | | dialogVisible.value = false; |
| | | emit('onStand', form.value); |
| | | form.value = { |
| | | indexNum: '', |
| | | checkContent: '', |
| | | checkTarget: '', |
| | | unit: '', |
| | | checkPart: "", |
| | | rate: '', |
| | | }; |
| | | const submitForm = async (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | emit('onStand', form.value); |
| | | dialogVisible.value = false; |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | disabled.value = false; |
| | | }; |
| | | // 取消 |
| | | const resetForm = () => { |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return; |
| | | formEl.clearValidate(); |
| | | dialogVisible.value = false; |
| | | form.value = { |
| | | indexNum: '', |
| | | checkContent: '', |
| | | checkTarget: '', |
| | | unit: '', |
| | | checkPart: "", |
| | | rate: '', |
| | | }; |
| | | disabled.value = false; |
| | | form.value = {}; |
| | | }; |
| | | //全屏 |
| | | const full = ref(false); |
| | |
| | | } |
| | | }; |
| | | return { |
| | | rules, |
| | | ruleFormRef, |
| | | form, |
| | | titles, |
| | | disabled, |