Skip to content

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

新增案例列表

上级 16c45193
隐藏空白字符变更
内嵌 并排
正在显示 包含 253 行增加 和 4 行删除
src/pages/v2/cases/index.vue
浏览文件 @ 559e0dd9
......@@ -19,8 +19,9 @@
style="width: 30%"
>
</el-input>
<el-button size="mini" icon="el-icon-search" @click="list({ name: searchCaseName, page: 1, limit: limit })" circle></el-button>
<el-button type="primary" size="mini" icon="el-icon-refresh" @click="refresh" circle></el-button>
<el-button size="mini" icon="el-icon-search" @click="list({ name: searchCaseName, page: 1, limit: limit })">搜 索</el-button>
<el-button type="primary" size="mini" icon="el-icon-refresh" @click="refresh">刷 新</el-button>
<el-button type="primary" size="mini" icon="el-icon-plus" @click="drawer = true">创建案例</el-button>
</div>
</el-card>
</div>
......@@ -204,12 +205,101 @@
</el-card>
</el-dialog>
</div>
<div>
<el-drawer
title="创建案例"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
ref="drawer"
size="50%">
<div class="demo-drawer__content">
<el-form :model="addForm" size="mini">
<el-form-item label="案例名称" :label-width="formLabelWidth">
<el-input v-model="addForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="案例等级" :label-width="formLabelWidth">
<el-select v-model="addForm.level" placeholder="请选择案例等级">
<el-option label="低风险" value="1"></el-option>
<el-option label="中风险" value="2"></el-option>
<el-option label="高风险" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="案例分类" :label-width="formLabelWidth">
<el-cascader
v-model="addForm.category_id"
:options="options"
:show-all-levels="false"
filterable
:before-filter="searchCategory"
:props="{value: 'id', label: 'name', emitPath: false}"
placeholder="试试搜索：分类">
</el-cascader>
</el-form-item>
<el-form-item label="产品说明书（pdf附件）" :label-width="formLabelWidth">
<el-upload
class="upload-pdf"
action="/api/opera/v1/file/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:limit="1"
:on-exceed="handleExceed">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
</el-upload>
</el-form-item>
<el-form-item label="图片" :label-width="formLabelWidth">
<el-upload
action="/api/opera/v1/file/upload"
list-type="picture-card"
:limit="1"
:multiple="false"
:data="{ type: 'image' }"
:on-preview="createPictureCardPreview">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="visible" append-to-body>
<img width="100%" :src="addForm.url" alt="">
<el-input :v-model="addForm.url" :value="addForm.url"></el-input>
</el-dialog>
</el-form-item>
<el-form-item>
<el-divider content-position="left">产品概况配置</el-divider>
</el-form-item>
<div v-for="(item, index) in addForm.production_detail" :key="index">
<div style="margin-left: 5%">
<i class="el-icon-circle-plus-outline" @click="addNames('production_detail', index)">添加</i>
<i class="el-icon-remove-outline" @click="removeNames('production_detail', index)">删除</i>
</div>
<el-form-item style="margin-left: 5%; margin-top: 2%" label-width="formLabelWidth" label="二级标题">
<el-input v-model="item.name" placeholder="请输入内容" style="width: 50%"></el-input>
</el-form-item>
<div v-for="(keywrod, index1) in item.keywords" :key="index1" style="margin-top: 2%">
<el-form-item style="margin-left: -1%" label="关键词" :label-width="formLabelWidth">
<el-input v-model="keywrod.name" placeholder="请输入关键词" style="width: 50%"></el-input>
<el-input v-model="keywrod.score" placeholder="请输入得分" style="width: 20%"></el-input>
<i class="el-icon-circle-plus-outline" @click="addKeyword('production_detail', index1)"></i>
<i class="el-icon-remove-outline" @click="removeKeyword('production_detail', index1)"></i>
</el-form-item>
</div>
</div>
<el-form-item>
<div class="demo-drawer__footer" style="margin-left: 60%">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
</div>
</el-form-item>
</el-form>
</div>
</el-drawer>
</div>
</div>
</template>
<script>
import * as casesApi from '@/api/cases2'
import pdf from 'vue-pdf'
import * as categoryApi from '@/api/categories'
export default {
name: 'index',
components: {
......@@ -217,6 +307,7 @@ export default {
},
mounted() {
this.list({ page: this.currentPage, limit: this.limit })
this.categoryList()
},
data() {
return {
......@@ -240,7 +331,65 @@ export default {
fundDetail: [],
fundDialogFormVisible: false,
investDetail: [],
investDialogFormVisible: false
investDialogFormVisible: false,
drawer: false,
direction: 'rtl',
addForm: {
name: '',
level: '',
category_id: 0,
accessory: '',
url: '',
production_detail: [
{
name: '',
keywords: [
{
name: '',
score: ''
}
]
}
],
fund_detail: [
{
name: '',
keywords: [
{
name: '',
score: ''
}
]
}
],
invest_detail: [
{
name: '',
keywords: [
{
name: '',
score: ''
}
]
}
]
},
pdfFileList: [],
formLabelWidth: '100px',
loading: false,
options: [],
visible: false,
production_detail: [
{
name: '',
keyword: [
{
name: '',
score: ''
}
]
}
]
}
},
methods: {
......@@ -269,7 +418,6 @@ export default {
getLevel(level) {
var detail = ''
for (var index in this.levelArr) {
console.log(this.levelArr[index])
if (this.levelArr[index].level === level) {
detail = this.levelArr[index].content
break
......@@ -335,6 +483,107 @@ export default {
}
})
})
},
cancelForm() {
this.loading = false
this.drawer = false
clearTimeout(this.timer)
},
handleClose(done) {
if (this.loading) {
return
}
this.$confirm('确定要提交表单吗？')
.then(_ => {
this.loading = true
console.log(this.addForm)
this.timer = setTimeout(() => {
done()
// 动画关闭需要一定的时间
setTimeout(() => {
this.loading = false
}, 400)
}, 2000)
})
.catch(_ => {})
},
searchCategory(keyword) {
categoryApi.categories({ name: keyword, page: 1, limit: 10 }).then(res => {
if (res.code === 0) {
this.options = res.data.data
this.deleteEmptyGroup(this.options)
console.log(this.options)
return true
}
return false
})
return false
},
categoryList(name = '') {
categoryApi.categories({ name: name, page: 1, limit: 10 }).then(res => {
if (res.code === 0) {
if (res.data.data) {
this.options = []
this.deleteEmptyGroup(res.data.data)
this.options = res.data.data
}
return true
}
return false
})
},
// 处理没有children的分组
deleteEmptyGroup(treeData) {
return new Promise(resolve => {
function traversal(data) {
data.map(item => {
for (var info in item) {
if (!info) continue
item.level = 1
if (item.children) {
if (item.children.length > 0) {
traversal(item.children)
}
if (item.children.length === 0) {
delete item.children
}
}
}
})
}
traversal(treeData)
resolve(treeData)
})
},
handlePreview(file) {
if (!this.mainForm.url) {
this.mainForm.url = file.url
}
this.visible = true
},
handleRemove(file, fileList) {
console.log(file, fileList)
},
uploadSuccess(response, file, fileList) {
if (response.code === 0) {
var data = response.data
var imageInfo = data[0]
this.addForm.accessory = imageInfo.accessory
this.visible = false
} else {
console.log('文件上传失败')
this.$message.error('文件上传失败')
}
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
},
createPictureCardPreview(file) {
if (!this.addForm.url) {
this.addForm.url = file.url
}
this.visible = true
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论