<!-- 添加修改弹出层开始 --> <el-dialog :title="title" :visible.sync="open" width="500px" center append-to-body > <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="字典名称" prop="dictName"> <el-input v-model="form.dictName" placeholder="请输入字典名称" clearable size="small" /> </el-form-item> <el-form-item label="字典类型" prop="dictType"> <el-input v-model="form.dictType" placeholder="请输入字典类型" clearable size="small" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue" :value="dict.dictValue" >{{ dict.dictLabel }}</el-radio> </el-radio-group> </el-form-item> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" type="textarea" placeholder="请输入字典备注" clearable size="small" /> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="handleSubmit">确 定</el-button> <el-button @click="cancel">取 消</el-button> </span> </el-dialog> <!-- 添加修改弹出层结束 --> data() { return { // 是否启用遮罩层 loading: false, // 弹出层标题 title: '', // 是否显示弹出层 open: false, // 表单数据 form: {}, // 表单校验 rules: { dictName: [ { required: true, message: '字典名称不能为空', trigger: 'blur' } ], dictType: [ { required: true, message: '字典类型不能为空', trigger: 'blur' } ] } --------------------------------------------------- // 表单取消 cancel() { this.open = false }, // 重置表单 reset() { this.form = { dictId: undefined, dictName: undefined, dictType: undefined, status: '0', remark: undefined } this.resetForm('form')//可能不生效用 this.$refs['queryForm'].resetFields(); }, // 打开添加的弹出层 handleAdd() { this.open = true this.reset() }, // 打开修改的弹出层 handleUpdate(row) { const dictId = row.dictId || this.ids //获得id做查询 this.open = true this.reset() // 根据dictId查询一个字典信息 getDictTypeById(dictId).then(res => { this.form = res.data }) }, // 保存 handleSubmit() { this.$refs['form'].validate((valid) => { if (valid) { //先验证表单通过再执行操作 // 做添加 this.loading = true if (this.form.dictId === undefined) { addDictType(this.form).then(res => { this.msgSuccess('保存成功') this.loading = false this.getDictTypeList()// 列表重新查询 this.open = false// 关闭弹出层 }).catch(() => { this.loading = false }) } else { // 做修改 updateDictType(this.form).then(res => { this.msgSuccess('修改成功') this.loading = false this.getDictTypeList()// 列表重新查询 this.open = false// 关闭弹出层 }).catch(() => { this.loading = false }) } } }) },