vue3+elementPlus:el-drawer新增修改弹窗复用

在el-drawer的属性里设置:title属性,和重置函数

javascript 复制代码
//html
 <!-- 弹窗  -->
  <el-drawer
    v-model="drawer"
    :title="title"
    :size="505"
    :direction="direction"
    :before-close="handleClose"
  >
    <el-form
      label-position="top"
      :inline="true"
      ref="ruleFormRef"
      size="default"
      :model="form.queryParams"
      class="RuleForm"
      :rules="rules"
      :label-position="labelPosition"
      status-icon
    >
      <el-form-item label="型号" prop="bearingModel">
        <el-input
          v-model="form.queryParams.bearingModel"
          placeholder="请添加型号"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="供应商名称" prop="factoryName">
        <el-select
          v-model="form.queryParams.factoryName"
          placeholder="请选择供应商名称"
          clearable
        >
          <el-option
            v-for="item in Code.bearingData"
            :key="item.id"
            :label="item.factoryName"
            :value="item.factoryName"
            @click="changeSelect(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="接触角" prop="contactAngle">
        <el-input-number
          v-model="form.queryParams.contactAngle"
          :step="1"
          :min="0"
          placeholder="请添加接触角"
          controls-position="right"
        />
      </el-form-item>
      
   ......
   
    </el-form>
    <el-form-item>
      <el-button
        v-if="title == '新增轴承信息'"
        type="primary"
        @click="onRuleSubmit">创建</el-button>
      <el-button v-else type="primary" @click="onRuleSave">保存</el-button>
      <el-button type="primary" plain @click="onRuleReset(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-drawer>


//data
 const title = ref("")//弹窗标题

//js
//新增按钮
const onForm = () => {
  reset() // 重置表单
  drawer.value = true
  title.value = "新增轴承信息"  // 标题为"新增"
}
//新增 保存按钮
const onRuleSubmit = () => {
  const objAdd = {
    bearingModel: form.queryParams.bearingModel,
    factoryID: selectData.value.id,
    factoryName: selectData.value.factoryName,
    contactAngle: Math.floor(form.queryParams.contactAngle),
  };
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      BearingAdd(objAdd).then((res) => {
        if (res.status === 200) {
          ElNotification({
            title: '提示',
            message: '新增成功',
            type: 'success',
          })
          getBearingList()
          ruleFormRef.value.resetFields()
          drawer.value = false
        }
      })
    } else {
      ElNotification({
        title: '提示',
        message: '提交字段内容错误!!!',
        type: 'warning',
      })
      return false
    }
  })
}
//详情 编辑按钮
const onRuleForm = (row) => {
  drawer.value = true;
  title.value = "编辑轴承信息" // 标题为"编辑"
  BearingDetail({
    id: row.id,
  }).then((res) => {
    if (res.status === 200) {
      drawer.value = true;
      form.queryParams = res.data.data;
    }
  });
};
//编辑 保存按钮
const onRuleSave = (val) => {
  const objSave = {
    id: form.queryParams.id,
    bearingModel: form.queryParams.bearingModel,
    factoryID: selectData.value.id,
    factoryName: selectData.value.factoryName,
    contactAngle: Math.floor(form.queryParams.contactAngle),
  };
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      BearingEdit(objSave).then((res) => {
        if (res.status === 200) {
          ElNotification({
            title: "提示",
            message: "修改成功",
            type: "success",
          });
          drawer.value = false;
          getBearingList();
        }
      });
    } else {
      ElNotification({
        title: "提示",
        message: "提交字段内容错误!!!",
        type: "warning",
      });
      return false;
    }
  });
};


//表单重置 
const reset = () => {
  form.queryParams = {
    bearingModel: undefined,
    factoryID: undefined,
    factoryName: undefined,
    contactAngle: undefined,
  };
}

上一篇文章,

uniapp踩坑之项目:使用过滤器将时间格式化为特定格式_uniapp过滤器-CSDN博客文章浏览阅读446次。uniapp踩坑之项目:使用过滤器将时间格式化为特定格式,利用filters过滤器对数据直接进行格式化,注意:与method、onLoad、data同层级_uniapp过滤器https://blog.csdn.net/weixin_43928112/article/details/134807024

相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果2 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长2 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app