Vue简单新增对话框

@vue简单新增对话框

        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:butt:add']"
        >新增</el-button>
      </el-col>

<el-dialog :title="title" :visible.sync="open" width="600px">
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-row>
      <el-col :span="24">
        <el-form-item label="控件ID" prop="controlid">
          <el-input v-model="form.controlid" placeholder="请输入控件ID" />
        </el-form-item>
      </el-col>
	  <el-col :span="24">
	    <el-form-item label="控件名称" prop="controlname">
	      <el-input v-model="form.controlname" placeholder="请输入控件名称" />
	    </el-form-item>
	  </el-col>
		<el-col :span="24">
		  <el-form-item label="图标">
		    <el-popover
		      placement="bottom-start"
		      width="460"
		      trigger="click"
		      @show="$refs['iconSelect'].reset()"
		    >
		      <IconSelect ref="iconSelect" @selected="selected" />
		      <el-input slot="reference" v-model="form.menuicon" placeholder="点击选择图标" readonly>
		        <svg-icon
		          v-if="form.menuicon"
		          slot="prefix"
		          :icon-class="form.menuicon"
		          class="el-input__icon"
		          style="height: 32px;width: 16px;"
		        />
		        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
		      </el-input>
		    </el-popover>
		  </el-form-item>
		</el-col>
    </el-row>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

/** 新增按钮操作 /
handleAdd(row) {
this.reset();
if (row != undefined) {
this.form.parentId = row.funid;
}
this.open = true;
this.title = “添加按钮控件”;
},
/* 提交按钮 */
submitForm: function() {
this.$refs[“form”].validate(valid => {
if (valid) {
//这是修改的部分，也可以参考
if (this.form.funid != undefined) {
api_edit(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess(“修改成功”);
this.open = false;
this.getList();
} else {
this.msgError(response.msg);
}
});
} else {
api_add(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess(“新增成功”);
this.open = false;
this.getList();
} else {
this.msgError(response.msg);
}
});
}
}
});
},