【前端】实习随笔1 - 老师二维码2.0 - 类型配置

一切都是最好的安排。

 需求描述

老师管理中添加【类型配置】页面 包括：

1. 类型展示的列表字段：类型名称/创建时间/编辑（导入现有类型数据）

2. 编辑只可删除。 点击删除时，校验该类型关联老师二维码个数n,

    n>0,toast提示：该类型已关联老师二维码，无法删除；  n=0,弹窗提示：确认删除此类型

3. 支持新建类型，点击【新建类型】按钮，出现弹窗（类型名称：限制15字符，字符类型不做限制）

   点击确认，和已有类型排重校验， 若名称重复，toast提示：该类型名称已存在，请修改；

   新建成功，返回类型列表页，toast提示：建立成功

4. 新建的类型，创建时间即为创建时间，并按时间倒序排入列表中

5. 新建成功后，新建的类型实时同步到1.1二维码管理编辑页、1.3修改页面和1.4商品编辑页调取 的类型下拉单里面，

实现思路

1. HTML部分

<template>
  <div>
    <el-button
      type="primary"
      @click="dialogFormVisible = true"
      style="float:right;margin-bottom:20px;margin-right:100px"
    >新建类型</el-button>
    <el-dialog title="新建类型" :visible.sync="dialogFormVisible" width="400px" center>
      <el-form>
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-input
            v-model="typeName"
            autocomplete="off"
            maxlength="15"
            placeholder="点击输入"
            clearable
            style="width:200px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addType">确 定</el-button>
      </div>
    </el-dialog>

    <div class="layout-list">
      <el-table :data="typeData" border style="width:600px">
        <el-table-column label="类型名称" align="center" width="200px" prop="name"></el-table-column>
        <el-table-column label="创建时间" align="center" width="200px" prop="createTime">
          <template slot-scope="scope">{{scope.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="normal" type="text" @click="deleteType(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog">
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
          <span>确认删除此类型？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureDelete">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

2. JS思路

（1）获取列表数据

在created中添加getData,使得每次页面刷新都获取数据

async getData() {
      const result = await this.$ajax.get('/admin/teacher/getAllTeacherType')
      this.typeData = result.data.data
      //处理时间格式
      this.typeData = this.typeData.map(item => {
        const time = item['createTime']
        item['createTime'] = this.format(new Date(time), 'yyyy-MM-dd hh:mm:ss')
        return item
      })
      console.log(result)
    },

（2）删除某类型

首先调用接口判断关联二维码个数是否为0，如果不为零toast提示，如果为零，弹出对话框再次确认删除

async deleteType(row) {
      // 删除类型 *校验关联二维码个数n
      console.log('删除')
      this.currentTypeId = row.id
      let res = await this.$ajax.get(`${this.api.linkUrl}?id=${row.id}`)
      if (res.data && res.data.retcode == 10000) {
        console.log(res.data.data)
        if (res.data.data > 0) {
          this.$message({
            message: '该类型已关联老师二维码，无法删除',
            type: 'error',
          })
        } else {
          this.centerDialogVisible = true
        }
      } else {
        this.$message({
          message: '网络错误，请稍后再试',
          type: 'error',
        })
      }
      this.getData()
    },
async sureDelete() {
      console.log('sureDelete')
      if (!this.currentTypeId) return
      let res = await this.$ajax.get(
        `${this.api.deleteUrl}?id=${this.currentTypeId}`
      )
      if (res.data.retcode === 10000) {
        this.$message({
          message: '删除成功',
          type: 'success',
        })
        this.getData() // 刷新页面数据
      } else {
        this.$message({
          message: '删除失败',
          type: 'error',
        })
      }
      this.centerDialogVisible = false
    },
warning(message, type = 'warning') {
      this.$message({
        message,
        type,
      })
    },

（3）新建类型

addType() {
      // 新建类型 *校验类型是否已经存在
      console.log('新建类型')
      console.log(this.typeName)
      this.$ajax
        .post(`${this.api.addUrl}?name=${this.typeName}`)
        .then(res => {
          if (res.data && res.data.retcode === 10000) {
            this.warning('建立成功', 'success')
            console.log(this.typeName)
          } else if (res.data && res.data.retcode === 20001) {
            this.warning(res.data.retdesc,'error')
            console.log(this.typeName)
          } else {
            this.warning('建立失败', 'error')
          }
          this.getData() // 刷新页面
        })
        .catch(() => {
          this.warning('建立失败', 'error')
        })
      this.dialogFormVisible = false
      this.typeName = ''
    },