Skip to content

X
x-training-admin
提交 62d40040 authored 作者: wangyizheng's avatar wangyizheng
浏览文件
操作

完成分类的对接

上级 49f7bf91
隐藏空白字符变更
内嵌 并排
正在显示 包含 250 行增加 和 7 行删除
.gitignore
浏览文件 @ 62d40040
......@@ -2,4 +2,4 @@
node_modules
client-dist
.idea
.package-lock.json
package-lock.json
package-lock.json
浏览文件 @ 62d40040
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/categories.js
浏览文件 @ 62d40040
......@@ -12,3 +12,19 @@ export function addCategory(data) {
}
return httpRequest.post('/api/opera/v2/training/category', data, { headers })
}
// 删除分类
export function deleteCategory(id, params = {}) {
var headers = {
'Content-Type': 'application/json'
}
return httpRequest.delete(`/api/opera/v2/training/${id}/category`, { params }, { headers })
}
// 更新分类
export function updateCategory(id, data) {
var headers = {
'Content-Type': 'application/json'
}
return httpRequest.put(`/api/opera/v2/training/${id}/category`, data, { headers })
}
src/pages/v2/categories/category.vue
浏览文件 @ 62d40040
......@@ -28,11 +28,25 @@
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="背景图">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.tag }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column
label="分类标签">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.tag }}</el-tag>
<div class="demo-image__preview">
<el-image
style="width: 100px; height: 100px;"
fit="scale-down"
:src="scope.row.url"
:preview-src-list="[scope.row.url]">
</el-image>
</div>
</div>
</template>
</el-table-column>
......@@ -51,7 +65,7 @@
<el-table-column label="操作">
<template slot-scope="scope">
<el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
<el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
<!-- <el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>-->
<el-option :value="{ tag: 'edit', row: scope.row }" label="编辑"></el-option>
<el-option :value="{ tag: 'addChild', row: scope.row }" label="添加子分类"></el-option>
<el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
......@@ -83,6 +97,26 @@
<el-option label="case" value="case"></el-option>
</el-select>
</el-form-item>
<el-form-item label="背景图" prop="url">
<el-upload
action="/api/opera/v1/file/upload"
list-type="picture-card"
name="file"
:limit="1"
:multiple="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="uploadSuccess"
:on-error="uploadError"
:data="{ type: 'image' }"
:disabled="urlDisabled">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="visible">
<img width="100%" :src="mainForm.url" alt="">
<el-input :v-model="mainForm.url" :value="mainForm.url"></el-input>
</el-dialog>
</el-form-item>
<el-form-item label="排序码" label-width="80px">
<el-input v-model="mainForm.order" autocomplete="off"></el-input>
</el-form-item>
......@@ -107,6 +141,26 @@
<el-option label="case" value="case"></el-option>
</el-select>
</el-form-item>
<el-form-item label="背景图" label-width="100px" prop="url">
<el-upload
action="/api/opera/v1/file/upload"
list-type="picture-card"
name="file"
:limit="1"
:multiple="false"
:on-preview="handlePictureCardPreview1"
:on-remove="handleRemove1"
:on-success="uploadSuccess1"
:on-error="uploadError1"
:data="{ type: 'image' }"
:disabled="urlDisabled">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="visible">
<img width="100%" :src="childForm.url" alt="">
<el-input :v-model="childForm.url" :value="childForm.url"></el-input>
</el-dialog>
</el-form-item>
<el-form-item label="排序码" label-width="100px">
<el-input v-model="childForm.order" autocomplete="off"></el-input>
</el-form-item>
......@@ -117,6 +171,47 @@
</div>
</el-dialog>
</div>
<div>
<el-dialog title="编辑分类" :visible.sync="editCategoryDialogFormVisible">
<el-form size="mini" :model="updateForm">
<el-form-item label="名称" label-width="100px">
<el-input v-model="updateForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="标签" label-width="100px">
<el-select v-model="updateForm.tag" placeholder="请选标签" disabled>
<el-option label="case" value="case"></el-option>
</el-select>
</el-form-item>
<el-form-item label="背景图" label-width="100px" prop="url">
<el-upload
action="/api/opera/v1/file/upload"
list-type="picture-card"
name="file"
:limit="1"
:multiple="false"
:on-preview="handlePictureCardPreview2"
:on-remove="handleRemove2"
:on-success="uploadSuccess2"
:on-error="uploadError2"
:data="{ type: 'image' }"
:disabled="urlDisabled">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="visible">
<img width="100%" :src="updateForm.url" alt="">
<el-input :v-model="updateForm.url" :value="updateForm.url"></el-input>
</el-dialog>
</el-form-item>
<el-form-item label="排序码" label-width="100px">
<el-input v-model="updateForm.order" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="editCategoryDialogFormVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleEdit">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
......@@ -132,19 +227,32 @@ export default {
limit: 20,
totalPage: 0,
parentName: '',
urlDisabled: false,
mainCategoryDialogFormVisible: false,
mainForm: {
name: '',
tag: '',
pid: 0,
order: 0
order: 0,
url: ''
},
childCategoryDialogFormVisible: false,
childForm: {
name: '',
tag: '',
pid: 0,
order: 0
order: 0,
url: ''
},
visible: false,
editCategoryDialogFormVisible: false,
updateForm: {
id: '',
name: '',
tag: '',
pid: 0,
order: 0,
url: ''
}
}
},
......@@ -158,6 +266,87 @@ export default {
handleCurrentChange(val) {
this.list({ page: val, limit: this.currentPage })
},
handlePictureCardPreview(file) {
if (!this.mainForm.url) {
this.mainForm.url = file.url
}
this.visible = true
},
handleRemove(file, fileList) {
console.log(file, fileList)
},
uploadSuccess(response, file, fileList) {
console.log('文件上传成功')
console.log(response, file, fileList)
if (response.code === 0) {
var data = response.data
var imageInfo = data[0]
this.mainForm.url = imageInfo.url
this.visible = false
} else {
console.log('文件上传失败')
this.$message.error('文件上传失败')
}
},
uploadError(err, file, fileList) {
console.log('文件上传失败')
console.log(err)
this.$message.error('文件上传失败')
},
handlePictureCardPreview1(file) {
if (!this.childForm.url) {
this.childForm.url = file.url
}
this.visible = true
},
handleRemove1(file, fileList) {
console.log(file, fileList)
},
uploadSuccess1(response, file, fileList) {
console.log('文件上传成功')
console.log(response, file, fileList)
if (response.code === 0) {
var data = response.data
var imageInfo = data[0]
this.childForm.url = imageInfo.url
this.visible = false
} else {
console.log('文件上传失败')
this.$message.error('文件上传失败')
}
},
uploadError1(err, file, fileList) {
console.log('文件上传失败')
console.log(err)
this.$message.error('文件上传失败')
},
handlePictureCardPreview2(file) {
if (!this.updateForm.url) {
this.updateForm.url = file.url
}
this.visible = true
},
handleRemove2(file, fileList) {
console.log(file, fileList)
},
uploadSuccess2(response, file, fileList) {
console.log('文件上传成功')
console.log(response, file, fileList)
if (response.code === 0) {
var data = response.data
var imageInfo = data[0]
this.updateForm.url = imageInfo.url
this.visible = false
} else {
console.log('文件上传失败')
this.$message.error('文件上传失败')
}
},
uploadError2(err, file, fileList) {
console.log('文件上传失败')
console.log(err)
this.$message.error('文件上传失败')
},
list(params = {}) {
categoryApi.categories(params).then(res => {
if (res.code === 0) {
......@@ -170,15 +359,52 @@ export default {
}
})
},
handleEdit(index, row) {
handleEdit() {
categoryApi.updateCategory(this.updateForm.id, {
name: this.updateForm.name,
url: this.updateForm.url,
order: this.updateForm.order
}).then(res => {
if (res.code === 0) {
this.$message.success('编辑成功')
this.editCategoryDialogFormVisible = false
this.list({ page: this.currentPage, limit: this.limit })
return true
} else {
this.$message.error(res.message)
return false
}
})
},
handleDelete(index, row) {
handleDelete(id) {
this.$confirm('确认删除？', '提示').then(_ => {
categoryApi.deleteCategory(id).then(res => {
if (res.code === 0) {
this.$message.success('删除成功')
this.list({ page: this.currentPage, limit: this.limit })
return true
} else {
this.$message.error(res.message)
return false
}
}).catch(error => {
console.log(error)
this.$message.error('删除失败')
return false
})
})
},
operation(opera) {
switch (opera.tag) {
case 'detail':
break
case 'edit':
this.updateForm.id = opera.row.id
this.updateForm.name = opera.row.name
this.updateForm.tag = opera.row.tag
this.updateForm.url = opera.row.url
this.updateForm.order = opera.row.order
this.editCategoryDialogFormVisible = true
break
case 'addChild':
this.childForm.tag = opera.row.tag
......@@ -187,6 +413,7 @@ export default {
this.childCategoryDialogFormVisible = true
break
case 'delete':
this.handleDelete(opera.row.id)
break
}
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论