zoukankan      html  css  js  c++  java
  • element_2对话框

      <!-- 添加修改弹出层开始 -->
        <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
                })
              }
            }
          })
        },
    

      

  • 相关阅读:
    Windows打开软件老是弹出无法验证发布者
    SpringMvc接受特殊符号参数被转义
    时代更替中的方正
    你应该知道的c# 反射详解
    C#使用System.Data.SQLite操作SQLite
    C# 动态调用WebService
    C# API: 生成和读取Excel文件
    11个强大的Visual Studio调试小技巧
    .Net 垃圾回收和大对象处理
    Visual Studio原生开发的10个调试技巧(一)
  • 原文地址:https://www.cnblogs.com/javakangkang/p/14000299.html
Copyright © 2011-2022 走看看