|
|
<template> <div class="mod-config"> <div> <span @click="favoriteFunction()"> <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"></icon-svg> </span> </div> <!-- 条件查询 --> <el-form :inline="true" label-position="top"> <el-form-item :label="'设备编码:'"> <el-input v-model="searchData.objectId" style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'故障编码:'"> <el-input v-model="searchData.defectId" style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'故障原因:'"> <el-input v-model="searchData.defectReason" style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'故障描述:'"> <el-input v-model="searchData.defectDescribe" style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'类型'"> <el-select v-model="searchData.fileType" style="width: 120px"> <el-option label="全部" value=""></el-option> <el-option label="点检" value="点检"></el-option> <el-option label="保养" value="保养"></el-option> <el-option label="维修" value="维修"></el-option> </el-select> </el-form-item> <el-form-item :label="'上传日期:'"> <el-date-picker style="width: 150px" v-model="searchData.startDate" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="开始日期"> </el-date-picker> - <el-date-picker style="width: 150px" v-model="searchData.endDate" type="datetime" value-format='yyyy-MM-dd HH:mm' format='yyyy-MM-dd HH:mm' placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item :label="' '"> <el-button type="primary" @click="getDataList()">查询</el-button> <el-button type="primary" @click="addModal()">新增</el-button> <el-button type="primary" @click="deleteSome()">删除</el-button> <download-excel :fields="fields()" :data="exportData" type="xls" :name="exportName" :header="exportHeader" :footer="exportFooter" :fetch="createExportData" :before-generate="startDownload" :before-finish="finishDownload" worksheet="导出信息" class="el-button el-button--primary el-button--medium"> {{ "导出" }} </download-excel> </el-form-item> </el-form>
<!-- 展示列表 --> <el-table :height="height" :data="dataList" ref="eamObjectTable" highlight-current-row @row-click="setCurrentRow" @current-change="changeCurrentRow" @selection-change="selectionChangeHandle" border v-loading="dataListLoading" style="width: 100%;"> <el-table-column type="selection" header-align="center" align="center" :selectable="selectFlag" width="50"> </el-table-column> <el-table-column v-for="(item,index) in columnList" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作"> <template slot-scope="scope"> <a type="text" size="small" @click="updateModal(scope.row)">编辑</a> <a type="text" size="small" @click="deleteModal(scope.row)">删除</a> </template> </el-table-column> </el-table>
<!-- 分页栏 --> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20, 50, 100, 1000]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
<!-- 一级新增/编辑 --> <el-dialog title="设备知识库" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="300px"> <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;"> <el-form-item > <span slot="label" style="" @click="getBaseList(200)"><a herf="#">设备编码</a></span> <el-input v-model="modalData.objectId" style="width: 120px"></el-input> </el-form-item> <el-form-item label="设备名称:"> <el-input v-model="modalData.objectName" disabled style="width: 120px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="故障编码"> <el-select v-model="modalData.defectId" @change="defectIdChange()" placeholder="请选择" style="width: 120px"> <el-option v-for = "i in defectList" :key = "i.defectId" :label = "i.defectId" :value = "i.defectId"> </el-option> </el-select> </el-form-item> <el-form-item label="故障原因:"> <el-input v-model="modalData.defectReason" disabled style="width: 120px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="类型"> <el-select v-model="modalData.fileType" placeholder="请选择" style="width: 120px"> <el-option label="点检" value="点检"></el-option> <el-option label="保养" value="保养"></el-option> <el-option label="维修" value="维修"></el-option> </el-select> </el-form-item> <el-form-item label="故障描述:"> <el-input v-model="modalData.defectDescribe" style="width: 120px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="处置措施:"> <el-input v-model="modalData.disposalMeasures" style="width: 255px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="备注:"> <el-input v-model="modalData.remark" style="width: 255px"></el-input> </el-form-item> </el-form> <el-footer style="height:40px;margin-top: 10px;text-align:center"> <el-button type="primary" @click="saveData()">保存</el-button> <el-button type="primary" @click="modalFlag = false">关闭</el-button> </el-footer> </el-dialog>
<!-- 二级列表 --> <el-tabs v-model="activeTable" style="margin-top: 0px; width: 100%; height: 100%;" type="border-card" @tab-click="tabClick" class="customer-tab"> <!-- 文档 --> <el-tab-pane label="文档" name="file_content"> <!--文件上传--> <el-form label-position="top" style="margin-top: 5px; margin-left: 0px;"> <el-form :inline="true" label-position="top" style="margin-top: 5px"> <el-button type="primary" @click="addUploadFileModal()">上传文件</el-button> </el-form> </el-form> <el-table :data="fileContentList" :height="secondHeight" border v-loading="dataListLoading" style="width: 100%; "> <el-table-column v-for="(item,index) in columnFileContentArray" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作"> <template slot-scope="scope"> <a @click="downloadFile(scope.row)">下载</a> <a type="text" size="small" @click="deleteFile(scope.row)">删除</a> </template> </el-table-column> </el-table> </el-tab-pane> </el-tabs>
<!-- 上传文件的modal --> <comEamKnowledgeBaseUploadFile ref="comEamKnowledgeBaseUploadFile" @refreshPageTables="getDataList()" v-drag></comEamKnowledgeBaseUploadFile> <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist> </div></template>
<script> import { getKnowledgeBaseList, // 查询知识库文件列表
getDefectList, // 获取故障列表
saveKnowledgeBase, // 新增知识库文件
knowledgeBaseUpdate, // 修改知识库文件
knowledgeBaseDelete, // 删除知识库文件
knowledgeBaseDeleteSome, // 批量删除
getFileContentList, // 刷新派设备文档的列表
} from '@/api/eam/eam_object_list.js'; import { userFavoriteList, saveUserFavorite, removeUserFavorite } from '@/api/userFavorite.js' import { deleteObjectFile } from '@/api/eam/eam.js'; import { deleteResourceSpare } from '@/api/partspare/resourcespare.js' /*引入組件*/ import comEamKnowledgeBaseUploadFile from "./com_eam_knowledge_base_upload_file";/*上传文件的組件*/ import Chooselist from '@/views/modules/common/Chooselist_eam' import axios from "axios"; import Vue from "vue"; export default {
data () { return { // 是否收藏
favorite: false, // 导出 start
exportData: [], exportName: "设备知识库" + this.dayjs().format('YYYYMMDDHHmmss'), exportHeader: ["设备知识库"], exportFooter: [], exportList:[], // 导出 end
tagNo:'', activeTable: 'file_content', folder: 'eamObject', eamObjectId: '', uploadUrl: "", currentRow: {}, searchData: { objectId: '', defectId: '', defectReason: '', defectDescribe: '', fileType: '', startDate: '', endDate: '', page: 1, limit: 10 }, pageIndex: 1, pageSize: 100, totalPage: 0, height: 200, secondHeight: 200, dataList: [], fileContentList: [], columnFileContentArray: [ { columnProp: 'fileName', align: 'left', columnLabel: '文件名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false }, { columnProp: 'createdBy', align: 'left', columnLabel: '上传人', columnHidden: false, columnImage: false, columnSortable: true, sortLv: 0, status: true, fixed: false }, { columnProp: 'createDate', align: 'left', columnLabel: '上传时间', columnHidden: false, columnImage: false, columnSortable: true, sortLv: 0, status: true, fixed: false }, { columnProp: 'orderRef3', align: 'left', columnLabel: '备注', columnHidden: false, columnImage: false, columnSortable: true, sortLv: 0, status: true, fixed: false }, ], dataListLoading: false, modalFlag: false, modalDisableFlag: false, modalData: { flag: '', createBy: this.$store.state.user.name, num: '', objectId: '', objectName: '', fileType: '', defectId: '', defectReason: '', defectDescribe: '', disposalMeasures: '', fileId: '', fileName: '', remark: '', }, // 展示列集
columnList: [ { columnProp: 'num', align: 'left', columnLabel: '编号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'fileType', align: 'left', columnLabel: '类型', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'objectId', align: 'left', columnLabel: '设备编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'objectName', align: 'left', columnLabel: '设备名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'defectId', align: 'left', columnLabel: '故障编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'defectReason', align: 'left', columnLabel: '故障原因', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'defectDescribe', align: 'left', columnLabel: '故障描述', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'disposalMeasures', align: 'left', columnLabel: '处置措施', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'remark', align: 'left', columnLabel: '备注', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'createDate', align: 'left', columnLabel: '上传时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'updateDate', align: 'left', columnLabel: '操作时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, { columnProp: 'createBy', align: 'left', columnLabel: '操作员', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', }, ], defectList: [], dataListSelections: [], } }, components: { comEamKnowledgeBaseUploadFile,/*文件上传的组件*/ Chooselist, }, mounted () { this.$nextTick(() => { this.height = window.innerHeight / 2 - 30; /*第二个表格高度的动态调整*/ this.secondHeight = window.innerHeight / 2 - 190; }) }, created () { this.getDataList(); this.favoriteIsOk() }, methods: { // 多选
selectionChangeHandle(val) { this.dataListSelections = val }, selectFlag(){ return true; }, // 故障ID改变事件
defectIdChange(){ for (let i = 0; i < this.defectList.length; i++) { if (this.defectList[i].defectId = this.modalData.defectId){ this.modalData.defectReason = this.defectList[i].defectReason } } }, // 获取基础数据列表S
getBaseList (val,type) { this.tagNo = val this.$nextTick(() => { let strVal = '' if (val === 200) { strVal = this.modalData.objectId this.$refs.baseList.init(val, strVal) } }) }, /* 列表方法的回调 */ getBaseData (val) { if (this.tagNo === 200) { this.modalData.objectId = val.ObjectID this.modalData.objectName = val.ObjectDesc this.defectList = [] this.modalData.defectId = '' this.modalData.defectReason = '' this.getDefectList() } }, // 获取故障列表
getDefectList(){ getDefectList(this.modalData).then(({data}) => { if (data && data.code === 0) { this.defectList = data.rows } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }, // 获取数据列表
getDataList () { this.searchData.limit = this.pageSize this.searchData.page = this.pageIndex getKnowledgeBaseList(this.searchData).then(({data}) => { if (data && data.code === 0) { this.dataList = data.page.list; this.pageIndex = data.page.currPage; this.pageSize = data.page.pageSize; this.totalPage = data.page.totalCount; //判断是否全部存在数据
if(this.totalPage > 0){ //设置选中行
this.$refs.eamObjectTable.setCurrentRow(this.dataList[0]); this.refreshCurrentTabTable();//加载当前的页签的table
} } this.dataListLoading = false; }) }, // 每页数
sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, // 当前页
currentChangeHandle (val) { this.pageIndex = val this.getDataList() }, // 一级新增
addModal(){ this.modalData = { flag: '1', createBy: this.$store.state.user.name, num: '', objectId: '', objectName: '', fileType: '', defectId: '', defectReason: '', defectDescribe: '', disposalMeasures: '', fileId: '', fileName: '', remark: '', }; this.modalDisableFlag = false; this.modalFlag = true; }, // 一级修改
updateModal(row){ this.modalData = { flag:'2', createBy: this.$store.state.user.name, num: row.num, objectId: row.objectId, objectName: row.objectName, fileType: row.fileType, defectId: row.defectId, defectReason: row.defectReason, defectDescribe: row.defectDescribe, disposalMeasures: row.disposalMeasures, fileId: row.fileId, fileName: row.fileName, remark: row.remark }; this.modalDisableFlag = true; this.modalFlag = true; }, // 新增/修改设备知识库
saveData(){ if (this.modalData.fileType == '' || this.modalData.fileType == null) { this.$alert('请选择类型!', '错误', { confirmButtonText: '确定' }) return false } if (this.modalData.objectId == '' || this.modalData.objectId == null) { this.$alert('请选择设备编码!', '错误', { confirmButtonText: '确定' }) return false } if (this.modalData.objectName == '' || this.modalData.objectName == null) { this.$alert('请选择设备名称!', '错误', { confirmButtonText: '确定' }) return false } if (this.modalData.defectId == '' || this.modalData.defectId == null) { this.$alert('请选择故障编码!', '错误', { confirmButtonText: '确定' }) return false } if (this.modalData.defectDescribe == '' || this.modalData.defectDescribe == null) { this.$alert('请填写故障描述!', '错误', { confirmButtonText: '确定' }) return false } if (this.modalData.disposalMeasures == '' || this.modalData.disposalMeasures == null) { this.$alert('请填写处置措施!', '错误', { confirmButtonText: '确定' }) return false } if(this.modalData.flag=='1'){ saveKnowledgeBase(this.modalData).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.defectList = [] this.modalFlag = false this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }else { knowledgeBaseUpdate(this.modalData).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.modalFlag = false this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) } }, // 一级删除
deleteModal(row) { this.$confirm('确定要删除该内容?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { knowledgeBaseDelete(row).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.getFileContentData(); this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }).catch(() => { }) }, // 二级删除
deleteFile(row){ this.$confirm('确定要删除此文件?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { deleteObjectFile(row).then(({data}) => { if (data && data.code == 0) { this.getFileContentData(); this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }).catch(() => { }) }, // 批量删除
deleteSome() { if(this.dataListSelections.length == 0){ this.$alert('请勾选要删除的内容!', '错误', { confirmButtonText: '确定' }) return false } this.$confirm('确定要删除所选内容?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { knowledgeBaseDeleteSome(this.dataListSelections).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.getFileContentData(); this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }).catch(() => { }) }, // 刷新页签的table数据
refreshCurrentTabTable () { this.getFileContentData(); }, // 刷新派设备文档的列表
getFileContentData() { let currentData = { orderRef2: this.currentRow.num } getFileContentList(currentData).then(({data}) => { //区分请求成功和失败的状况
if (data && data.code == 200) { this.fileContentList = data.rows; } else { this.fileContentList = []; } }); },
// 列表表格选择替换
tabClick (tab, event) { // 刷新列表数据
this.refreshCurrentTabTable() },
// 上传文件
addUploadFileModal(){ let currentData = { site: this.$store.state.user.site, createBy: this.$store.state.user.name, num: this.currentRow.num, objectId: this.currentRow.objectId, objectName: this.currentRow.objectName, defectId: this.currentRow.defectId, defectReason: this.currentRow.defectReason, }; //打开组件 去做新增业务
this.$nextTick(() => { this.$refs.comEamKnowledgeBaseUploadFile.init(currentData); }) },
// 设置当前的行
setCurrentRow(row, column, event) { this.currentRow = JSON.parse(JSON.stringify(row)); }, // 当前值发生变化的时候修改
changeCurrentRow(row, oldRow){ // 判断是否是获取焦点的事件
if(row){ this.currentRow = JSON.parse(JSON.stringify(row)); this.eamObjectId = row.objectId; this.uploadUrl = this.$http.adornUrl(`/api/sys/file/upload?token=${this.$cookie.get('token')}&folder=` + this.folder + `&objectId=` + this.eamObjectId); //刷新当前页表
this.refreshCurrentTabTable(); } },
// 校验用户是否收藏
favoriteIsOk() { let userFavorite = { userId: this.$store.state.user.id, languageCode: this.$i18n.locale } console.log(this.$route.meta.menuId) userFavoriteList(userFavorite).then(({data}) => { for (let i = 0; i < data.list.length; i++) { // let flag=false;
if(this.$route.meta.menuId==data.list[i].menuId){ this.favorite = true // flag=true;
} } }) }, // 收藏 OR 取消收藏
favoriteFunction() { let userFavorite = { userId: this.$store.state.user.id, functionId: this.$route.meta.menuId, } if (this.favorite) { // 取消收藏
// this.$confirm(`确定取消收藏`, '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
removeUserFavorite(userFavorite).then(({data}) => { this.$message.success(data.msg) this.favorite = false }) // })
} else { // 收藏
saveUserFavorite(userFavorite).then(({data}) => { this.$message.success(data.msg) this.favorite = true }) } },
//导出excel
async createExportData() { this.searchData.limit = -1 this.searchData.page = 1 await getKnowledgeBaseList(this.searchData).then(({data}) => { this.exportList= data.page.list; }) return this.exportList; }, downloadFile(row){ axios.get('/proxyApi/pms/eamObject/downLoadObjectFile/' + row.id, { responseType: 'blob', headers: { 'Content-Type': 'application/json', 'token': Vue.cookie.get('token') } }).then(({data}) => { // 不限制文件下载类型
const blob = new Blob([data], {type: "application/octet-stream"}) // 下载文件名称
const fileName = row.fileName // a标签下载
const linkNode = document.createElement('a') linkNode.download = fileName // a标签的download属性规定下载文件的名称
linkNode.style.display = 'none' linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
document.body.appendChild(linkNode) linkNode.click() // 模拟在按钮上的一次鼠标单击
URL.revokeObjectURL(linkNode.href) // 释放URL 对象
document.body.removeChild(linkNode) // }
}) }, startDownload() {
}, finishDownload() {
}, fields() { let json = "{" this.columnList.forEach((item, index) => { if (index == this.columnList.length - 1) { json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" } else { json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + "," } }) json += "}" let s = eval("(" + json + ")") return s },
}, }</script>
<style scoped lang="scss">/deep/ .customer-tab .el-tabs__content {padding: 0px !important;}
/*修改上传图标的样式*/.el-upload-dragger .el-icon-upload { font-size: 36px; color: #c0c4cc; margin: 10px 10px; line-height: 20px;}
/*修改上传框的样式*//deep/ .customer-upload .el-upload-dragger { background-color: #fff; border: 1px dashed #d9d9d9; border-radius: 6px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: 10px; width: 240px; height: 42px; text-align: left; position: relative; overflow: hidden;}
/*修改上传文字的样式*/.customer-upload .el-upload__text{ margin-top: -32px; margin-left: 40px;
}
</style>
|