一切都是最好的安排。
需求描述
老师管理中添加【类型配置】页面 包括:
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 = ''
},