第十九课 编写新增功能

一、编写新增按钮

 <p>
    <el-form-item size="mini">
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增</el-button
      >
    </el-form-item>
</p>

二、编写新增弹窗el-dialog

 <!--添加图书信息-->
    <el-dialog
      title="添加图书信息"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form
        :model="form"
        ref="addForm"
        label-position="right"
        :rules="rules"
      >
        <el-form-item
          label="书号"
          :label-width="formLableWidth"
          prop="bookISBN"
        >
          <el-input
            v-model="form.bookISBN"
            auto-complete="off"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="书名"
          :label-width="formLableWidth"
          prop="bookName"
        >
          <el-input
           type="textarea"
            v-model="form.bookName"
            auto-complete="off"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLableWidth">
          <el-input
            v-model="form.author"
            auto-complete="off"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="出版社" :label-width="formLableWidth">
          <el-input
            v-model="form.press"
            auto-complete="off"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="出版日期"
          :label-width="formLableWidth"
          prop="publicationdate"
        >
          <el-date-picker
            v-model="form.publicationdate"
            type="date"
            size="mini"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLableWidth">
          <el-input v-model="form.price" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLableWidth">
          <el-input v-model.number="form.quantity" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="图书类型" :label-width="formLableWidth">
          <el-select v-model="form.bookType" placeholder="请选择图书类型">
            <el-option
              v-for="item in bookTypeOptions"
              :key="item.type"
              :value="item.type"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="addData('addForm')" size="mini"
          >确 定</el-button
        >
      </div>
    </el-dialog>

三、编写弹窗el-dialog中需要的data数据

 form: {
        bookISBN: "",
        bookName: "",
        author: "",
        press: "",
        price: "",
        publicationdate: "",
        bookType: "",
        quantity: "500",
      },
      dialogFormVisible: false,
      formLableWidth: "100px",

四、编写弹窗el-dialog中需要的prop检验规则

rules: {
          bookISBN: [
            {
              required: true,
              message: "请输入书号",
              trigger: "blur",
            }
          ],
          bookName: [
            {
              required: true,
              message: "请输入书名",
              trigger: "blur",
            }
          ],
          publicationdate: [
            {
              required: true,
              message: "请选择日期",
              trigger: ["blur", "change"],
            }
          ],
        },

五、编写弹窗el-dialog提交时校验判断

addData(formName){
        this.$refs[formName].validate((valid)=>{
            if(valid){
                alert(1)
            }else{
                alert(2)
            }
        })
    },

六、编写后台的新增接口 /addbookinfo

server-api/mocks/新增addbookinfo.js

/**
 * 信息新增接口
 *
 * @url addbookinfo
 *
 */
 
 module.exports = function (req) {
    return {
      code: 200,
      flag:true,
      message:"添加成功",
    }
 };

六、编写接口封装函数，src/api/bookinfo.js中增加一个新增方法

add(bookform){
    return myaxios({
        url:'/addbookinfo',
        method:'POST',
        data:bookform
   })
}

七、编写新增按钮提交逻辑，addData函数

 addData(formName){
        this.$refs[formName].validate((valid)=>{
            if(valid){
               bookinfoApi.add(this.form).then(response=>{
                   const resp = response.data
                   if(resp.flag){
                       this.fetchData()
                       this.dialogFormVisible = false
                   }else{
                      this.$message({
                         message:resp.message
                       })
                   }
               })
            }
        })
    }

八、解决日期提交后的乱码问题

value-format="yyyy-MM-dd HH:mm:ss"

 <el-form-item
          label="出版日期"
          :label-width="formLableWidth"
          prop="publicationdate"
        >
          <el-date-picker
            v-model="form.publicationdate"
             value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
            size="mini"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

九、提交后清空表单数据

在data初始化时中先变为form:{}
 form: {
        // bookISBN: "",
        // bookName: "",
        // author: "",
        // press: "",
        // price: "",
        // publicationdate: "",
        // bookType: "",
        // quantity: "500",
      },
然后在表单提交的时候重新赋值form = {} 
   if(resp.flag){
       this.fetchData()
       this.dialogFormVisible = false;
       this.form = {}
   }
   
   
当然还有另一种方法，但是这种方法需要把每一个表单都配置一个prop
 if(resp.flag){
       this.fetchData()
       this.dialogFormVisible = false;
       this.$nextTick(()=>{
           this.$refs['addFoRm'].resetFields();
        })
   }

this.$nextTick的意思是等表单加载后进行重置