31 changed files with 1394 additions and 590 deletions
@ -0,0 +1,435 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
|||
<el-form-item label="作者" prop="author"> |
|||
<el-input |
|||
v-model="queryParams.author" |
|||
placeholder="请输入作者" |
|||
clearable |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="关键词" prop="keyword"> |
|||
<el-input |
|||
v-model="queryParams.keyword" |
|||
placeholder="请输入关键词" |
|||
clearable |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="机构" prop="agency"> |
|||
<el-input |
|||
v-model="queryParams.agency" |
|||
placeholder="请输入机构" |
|||
clearable |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="文献名" prop="title"> |
|||
<el-input |
|||
v-model="queryParams.title" |
|||
placeholder="请输入文献名" |
|||
clearable |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-row :gutter="10" class="mb8"> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="primary" |
|||
plain |
|||
icon="el-icon-plus" |
|||
size="mini" |
|||
@click="handleAdd" |
|||
v-hasPermi="['system:relationship:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="success" |
|||
plain |
|||
icon="el-icon-edit" |
|||
size="mini" |
|||
:disabled="single" |
|||
@click="handleUpdate" |
|||
v-hasPermi="['system:relationship:edit']" |
|||
>修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="el-icon-delete" |
|||
size="mini" |
|||
:disabled="multiple" |
|||
@click="handleDelete" |
|||
v-hasPermi="['system:relationship:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="warning" |
|||
plain |
|||
icon="el-icon-download" |
|||
size="mini" |
|||
@click="handleExport" |
|||
v-hasPermi="['system:relationship:export']" |
|||
>导出</el-button> |
|||
</el-col> |
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|||
</el-row> |
|||
|
|||
<el-table v-loading="loading" :data="relationshipList" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="关键词" align="center" prop="keyword" /> |
|||
<el-table-column label="作者" align="center" prop="author" /> |
|||
<el-table-column label="机构" align="center" prop="agency" /> |
|||
<el-table-column label="文献名" align="center" prop="title" /> |
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-edit" |
|||
@click="handleUpdate(scope.row)" |
|||
v-hasPermi="['system:relationship:edit']" |
|||
>修改</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
icon="el-icon-delete" |
|||
@click="handleDelete(scope.row)" |
|||
v-hasPermi="['system:relationship:remove']" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<pagination |
|||
v-show="total>0" |
|||
:total="total" |
|||
:page.sync="queryParams.pageNum" |
|||
:limit.sync="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
|
|||
<!-- 添加或修改知识点关系对话框 --> |
|||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
<el-form-item label="起始节点" prop="author"> |
|||
<el-cascader :options="cascadeOptions1" v-model="form.start" style="width: 200px" |
|||
:show-all-levels="false" class="cascader-ellipsis" |
|||
:props="cascaderProps"></el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="终点节点" prop="keyword"> |
|||
<el-cascader :options="cascadeOptions1" v-model="form.end" style="width: 200px" |
|||
:show-all-levels="false" class="cascader-ellipsis" |
|||
:props="cascaderProps"></el-cascader> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="机构" prop="agency">--> |
|||
<!-- <el-input v-model="form.agency" placeholder="请输入机构" />--> |
|||
<!-- </el-form-item>--> |
|||
<!-- <el-form-item label="文献名" prop="title">--> |
|||
<!-- <el-input v-model="form.title" placeholder="请输入文献名" />--> |
|||
|
|||
<!-- </el-form-item>--> |
|||
<el-form-item label="上传文献" prop="articleId"> |
|||
<!-- <el-input v-model="form.articleName" placeholder="请输入文献名称" />--> |
|||
<el-upload v-model="diaForm.list" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
:on-preview="handlePreview" |
|||
:before-upload="beforeAvatarUpload" |
|||
:on-remove="handleRemoveFile" |
|||
:headers="reqHeaders" |
|||
:on-success="onUploadSuccess" |
|||
action="http://localhost:10031/common/upload" |
|||
:file-list="resultFileList" |
|||
class="upload-files" > |
|||
<div class="upfile-btn"> |
|||
<d2-icon name="document-upload" class="document-upload"/> |
|||
<div><el-button type="primary" size="small">上传</el-button></div> |
|||
</div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="cancel">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listRelationship, getRelationship, delRelationship, addRelationship, updateRelationship } from "@/api/system/relationship1"; |
|||
import {getThreeGroup} from "../../../api/system/relationship1"; |
|||
|
|||
export default { |
|||
name: "Relationship", |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 知识点关系表格数据 |
|||
relationshipList: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
author: null, |
|||
keyword: null, |
|||
agency: null, |
|||
relationshipId: null, |
|||
url: null, |
|||
title: null |
|||
}, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
}, |
|||
cascadeOptions1:[], |
|||
cascaderProps: { |
|||
value: 'id', // 告诉组件：用 `id` 字段作为 value |
|||
label: 'pointName', // 告诉组件：用 `docTitle` 字段作为 label |
|||
children: 'children', // 告诉组件：子节点字段名是 `children`（可省略，默认就是 children） |
|||
disabled: 'disabled', |
|||
emitPath: false// 可选：如果有禁用逻辑，可以加 |
|||
}, |
|||
resultFileList:[], |
|||
diaForm: { |
|||
desc: '', |
|||
list: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.getThreeGroup() |
|||
}, |
|||
methods: { |
|||
// 上传成功，返回 |
|||
onUploadSuccess(response, file, fileList) { |
|||
if (response && response.code === 200) { |
|||
if (response) { |
|||
this.prodectName = response.url |
|||
console.log(this.prodectName); |
|||
this.resultFileList.push({ |
|||
url: response.url, |
|||
name: response.fileName, |
|||
uid: file.uid |
|||
}); |
|||
this.dealPDF(); |
|||
setTimeout(() => { |
|||
this.dealPDF(); |
|||
}, 1); |
|||
|
|||
} |
|||
} else if (response && response.msg) { |
|||
console.log('upload failed', response.msg); |
|||
} |
|||
}, |
|||
// 上传的服务器的地址 |
|||
dealPDF() { |
|||
var liElements = document.querySelectorAll('ul.el-upload-list.el-upload-list--picture li.el-upload-list__item'); |
|||
liElements.forEach(function (liElement) { |
|||
var aElement = liElement.querySelector('a.el-upload-list__item-name'); |
|||
if (aElement && aElement.textContent.includes('.pdf')) { |
|||
var imgElement = liElement.querySelector('img.el-upload-list__item-thumbnail'); |
|||
if (imgElement) { |
|||
imgElement.src = ''; // 替换为你想要的新图片的URL |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
reqHeaders() { |
|||
return { |
|||
Authorization: "Bearer " + getToken() |
|||
}; |
|||
}, |
|||
handleRemoveFile(file, fileList) { |
|||
if (!file) { |
|||
return; |
|||
} |
|||
const index = this.resultFileList.findIndex(item => item.uid === file.uid); |
|||
this.resultFileList.splice(index, 1); |
|||
}, |
|||
// 限制不超过30M |
|||
beforeAvatarUpload(file) { |
|||
const isLt5M = file.size / 1024 / 1024 < 30; |
|||
if (!isLt5M) { |
|||
this.$message.error('XXXX'); |
|||
} |
|||
return isLt5M; |
|||
}, |
|||
handlePreview(file) { |
|||
console.log(file); |
|||
}, |
|||
// 限制上传个数不超过5个 |
|||
handleExceed(files, fileList) { |
|||
if (fileList && fileList.length == 1) { |
|||
this.$message.warning('只能上传一个文件'); |
|||
} |
|||
}, |
|||
getThreeGroup(){ |
|||
getThreeGroup().then(res=>{ |
|||
this.cascadeOptions1 = [ |
|||
{ |
|||
id: res.zzMap.id, |
|||
pointName: res.zzMap.name, |
|||
children: res.zzMap.children, |
|||
expanded: true |
|||
}, |
|||
{ |
|||
id: res.jgMap.id, |
|||
pointName: res.jgMap.name, |
|||
children: res.jgMap.children, |
|||
|
|||
}, |
|||
{ |
|||
id: res.gjcMap.id, |
|||
pointName: res.gjcMap.name, |
|||
children: res.gjcMap.children, |
|||
|
|||
}, |
|||
] |
|||
|
|||
}) |
|||
|
|||
}, |
|||
/** 查询知识点关系列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listRelationship(this.queryParams).then(response => { |
|||
this.relationshipList = response.rows; |
|||
this.total = response.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 取消按钮 |
|||
cancel() { |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.form = { |
|||
id: null, |
|||
author: null, |
|||
keyword: null, |
|||
agency: null, |
|||
relationshipId: null, |
|||
url: null, |
|||
title: null |
|||
}; |
|||
this.resetForm("form"); |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.queryParams.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.handleQuery(); |
|||
}, |
|||
// 多选框选中数据 |
|||
handleSelectionChange(selection) { |
|||
this.ids = selection.map(item => item.id) |
|||
this.single = selection.length!==1 |
|||
this.multiple = !selection.length |
|||
}, |
|||
/** 新增按钮操作 */ |
|||
handleAdd() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.title = "添加知识点关系"; |
|||
}, |
|||
/** 修改按钮操作 */ |
|||
handleUpdate(row) { |
|||
this.reset(); |
|||
const id = row.id || this.ids |
|||
getRelationship(id).then(response => { |
|||
this.form = response.data; |
|||
this.open = true; |
|||
this.title = "修改知识点关系"; |
|||
}); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm() { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
if (this.form.id != null) { |
|||
updateRelationship(this.form).then(response => { |
|||
this.$modal.msgSuccess("修改成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
if(this.resultFileList.length>0){ |
|||
this.form.title=this.resultFileList[0].name.replace('.pdf', ''); |
|||
} |
|||
addRelationship(this.form).then(response => { |
|||
this.$modal.msgSuccess("新增成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
handleDelete(row) { |
|||
const ids = row.id || this.ids; |
|||
this.$modal.confirm('是否确认删除知识点关系编号为"' + ids + '"的数据项？').then(function() { |
|||
return delRelationship(ids); |
|||
}).then(() => { |
|||
this.getList(); |
|||
this.$modal.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}, |
|||
/** 导出按钮操作 */ |
|||
handleExport() { |
|||
this.download('system/relationship/export', { |
|||
...this.queryParams |
|||
}, `relationship_${new Date().getTime()}.xlsx`) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 作用于选中后的输入框文本 */ |
|||
.cascader-ellipsis :deep(.el-input__inner) { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
width: 300px; |
|||
} |
|||
.el-cascader-menu__list{ |
|||
width: 300px !important; |
|||
overflow: hidden !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue