PC端面经后台管理项目(2) 抽屉，富文本编辑器 回显 校验

PC端面经后台管理项目(2) 抽屉，富文本编辑器 回显 校验

这是pc面经管理的下半部分，其中有一个地方卡了很久，在利用this.$refs.form.resetFields()方法重置表单时，总是显示无效，其实是一个顺序的问题，当我在抽屉的表单生成后在调用这个方法就不报错了。
目前该项目已经完成，同时也已经上传至远程开源仓库：https://gitee.com/Scurryniubi/manage_mj_project
SSH码：[email protected]:Scurryniubi/manage_mj_project.git

面经管理 - 基本渲染

面经管理（准备代码）

artcile/index.vue

表格基本 属性解读

• data 数据源
• prop 设置数据源中对象中的键名，即可填入数据
• label 列名
• width 列宽

  
  
  
  
   


data () {
  return {
    tableData: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }]
  }
},

发送请求获取数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GHHeNrQ-1679890107335)(images/image-20220707170311356.png)]

新建 api/article.js

import request from '@/utils/request'

export const getArticleList = data => {
  return request.get('/admin/interview/query', {
    params: data
  })
}

article/index.vue created中发送初始化获取数据的请求

data () {
  return {
    current: 1,
    pageSize: 10,
    total: 0,
    list: []
  }
},
created () {
  this.initData()
},
methods: {
  async initData () {
    const { data } = await getArticleList({
      current: this.current,
      pageSize: this.pageSize
    })
    this.list = data.rows
    this.total = data.total
    console.log(data)
  }
}

动态渲染表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2GN7Jdv-1679890107338)(images/image-20220619055559556.png)]

操作按钮部分

  
  
   
   
   
  
  
  
    
  



del (id) {
  console.log(id)
}

分页渲染

handleCurrentChange (val) {
  // 处理当前页变化
  this.current = val
  this.initData()
}

面经管理 - 添加功能

打开抽屉 - 注册点击事件

添加 预览 修改，都要打开抽屉，可以复用

  添加面经



  


openDrawer (type, id) {
  console.log(type, id)
}

打开抽屉 - 显示抽屉

  我来啦!


data () {
  return {
    current: 1,
    pageSize: 10,
    total: 0,
    list: [],
    isShowDrawer: false
  }
},


openDrawer (type, id) {
  console.log(type, id)
  this.isShowDrawer = true
},
handleClose () {
  this.isShowDrawer = false
}

计算属性控制标题

记录 drawerType， 提供计算属性

data () {
  return {
    current: 1,
    pageSize: 10,
    total: 0,
    list: [],
    isShowDrawer: false,
    drawerType: ''
  }
},
methods: {  
    openDrawer (type, id) {
      // console.log(type, id)
      this.drawerType = type
      this.isShowDrawer = true
    },
},
    
computed: {
  drawerTitle () {
    let title = '大标题'
    if (this.drawerType === 'add') title = '添加面经'
    if (this.drawerType === 'preview') title = '面经预览'
    if (this.drawerType === 'edit') title = '修改面经'
    return title
  }
},

结构中渲染

  我来啦!

表单结构

  
    
  
  
    富文本编辑器
  
  
    确认
    取消
  



form: {
  stem: '',
  content: ''
}

富文本编辑器

https://www.npmjs.com/package/vue-quill-editor

装包

npm install vue-quill-editor

导入, 局部注册

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  }
}

使用， v-model 绑定数据

  
    
  
  
    
  
  
    确认
    取消
  

添加非空校验 ☆

这边是一个难点，在于处理富文本编辑器的内容部分校验，对于这种复杂的标签，普通的校验方法似乎不管用，应使用validateField对其表单字段进行单独处理。

  
    
  
  
    
  
  
    确认
    取消
  


rules: {
  stem: [{ required: true, message: '请输入面经标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入面经标题', trigger: 'blur' }]
}

富文本编辑器，校验单独处理

封装接口 api 添加完成

api/article.js

export const createArticle = data => {
  return request.post('/admin/interview/create', data)
}

发送请求添加，关闭弹框重新渲染 （关闭弹框要重置表单）

handleClose () {
  this.$refs.form.resetFields()
  this.isShowDrawer = false
},
async submit () {
  try {
    await this.$refs.form.validate()
    await createArticle(this.form)
    Message.success('添加成功')
    this.current = 1
    this.initData()
    this.handleClose()
  } catch (e) {
    console.log(e)
  }
}

面经管理 - 删除功能

api/article.js

export const removeArticle = id => {
  return request.delete('/admin/interview/remove', {
    data: {
      id
    }
  })
}

页面中，注册点击事件调用

async del (id) {
  await removeArticle(id)
  this.$message.success('删除成功')
  this.initData()
},

面经管理 - 修改功能

修改回显

修改比添加多一层回显，显示弹框时，需要发送请求获取数据

api/article.js

export const getArticleDetail = id => {
  return request.get('/admin/interview/show', {
    params: {
      id
    }
  })
}

回显展示

async openDrawer (type, id) {
  // console.log(type, id)
  this.drawerType = type
  this.isShowDrawer = true

  if (type !== 'add') {
    const res = await getArticleDetail(id)
    this.form = {
      ...res.data
    }
  }
},

修改提交

api/article.js准备api

export const updateArticle = data => {
  return request.put('/admin/interview/update', data)
}

判断，修改提交

async submit () {
  try {
    // 校验表单
    await this.$refs.form.validate()
    // 如何区分, 当前是 编辑 还是 添加
    if (this.drawerType === 'add') {
      // 发送请求
      await createArticle(this.form)
      // 添加提示 $message.success
      this.$message.success('添加成功')
    }
    if (this.drawerType === 'edit') {
      // 发送的是编辑的请求
      const { id, stem, content } = this.form
      await updateArticle({ id, stem, content })
      this.$message.success('修改成功')
    }
    // 无论是修改还是添加, 都会回到第一页, 重置页码
    this.current = 1
    // 重新渲染
    this.initData()
    // 关闭弹框
    this.handleClose()
  } catch (e) {
    console.log(e)
  }
}

面经管理 - 预览功能

预览不需要展示表单，直接 v-html 渲染即可

  
{{ form.stem }}
  



  ...

处理关闭逻辑

handleClose () {
  // 注意点: 由于公用的抽屉, 当预览时, 是没有表单的! 不能重置表单
  // 但是form的值还在, 会影响添加 => 需要手动重置一下
  // 关闭时将表单内容重置

  // 无论是哪种情况, 一律将form手动数据清零
  this.form = { stem: '', content: '' }

  if (this.drawerType !== 'preview') {
    // add edit 调用 resetFields 在此处的作用: 重置校验状态
    this.$refs.form.resetFields()
  }

  this.isShowDrawer = false // 关闭弹框
},