275 lines
9.1 KiB
Vue
275 lines
9.1 KiB
Vue
<template>
|
|
<div class="default-main">
|
|
<!-- 案例库 -->
|
|
<TableHeader ref="TableHeaderRef">
|
|
<template #select>
|
|
<el-form-item label="名称">
|
|
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
|
|
</el-form-item>
|
|
|
|
|
|
</template>
|
|
|
|
<template #operation>
|
|
<el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
|
|
<el-button icon="el-icon-View" type="primary" @click="checkOutTheCriteria">查看常见治理措施</el-button>
|
|
|
|
<!-- <el-upload :show-file-list="false" action="" :auto-upload="false" class="ml10" :on-change="choose"
|
|
v-if="information">
|
|
<el-button icon="el-icon-Top" type="primary">上传常见治理措施</el-button>
|
|
</el-upload>
|
|
<el-button icon="el-icon-Download" type="primary" class="ml10" @click="downloadTheReport">
|
|
下载常见治理措施
|
|
</el-button> -->
|
|
</template>
|
|
</TableHeader>
|
|
<Table ref="tableRef"></Table>
|
|
<!-- 弹框 -->
|
|
<PopupEdit ref="popupEditRef" @onSubmit="tableStore.index()" />
|
|
<!-- 简介详情 -->
|
|
<el-dialog v-model="dialogVisible" title="事件简介" width="60%">
|
|
<div class="editor" v-html="summary"></div>
|
|
</el-dialog>
|
|
<!-- 抽屉 -->
|
|
<drawer ref="drawerRef" />
|
|
<!-- 文件 -->
|
|
<annex ref="annexRef" />
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, provide } from 'vue'
|
|
import TableStore from '@/utils/tableStore'
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
import Table from '@/components/table/index.vue'
|
|
import PopupEdit from './components/form.vue'
|
|
import { libcaseBeleteyById } from '@/api/supervision-boot/database/index'
|
|
import drawer from './components/drawer.vue'
|
|
import annex from './components/annex.vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { uploadFile, getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
|
|
import { addStandardCase, queryStandardCase } from '@/api/supervision-boot/database/index'
|
|
import { useAdminInfo } from '@/stores/adminInfo'
|
|
import katex from "katex";
|
|
import "katex/dist/katex.css";
|
|
const adminInfo = useAdminInfo()
|
|
defineOptions({
|
|
name: 'database/case'
|
|
})
|
|
|
|
const popupEditRef = ref()
|
|
const drawerRef = ref()
|
|
const TableHeaderRef = ref()
|
|
const annexRef = ref()
|
|
const dialogVisible = ref(false)
|
|
const summary = ref('')
|
|
const information = adminInfo.roleCode.includes('information_info')
|
|
const tableStore = new TableStore({
|
|
url: '/supervision-boot/libcase/pageQuery',
|
|
method: 'POST',
|
|
column: [
|
|
{ title: '电能质量事件名称', field: 'name' },
|
|
{
|
|
title: '发生地点',
|
|
field: 'location'
|
|
},
|
|
// {
|
|
// title: '发生事件',
|
|
// field: 'type'
|
|
// },
|
|
// {
|
|
// title: '事件经过',
|
|
// field: 'process'
|
|
// },
|
|
// {
|
|
// title: '处理措施',
|
|
// field: 'measures'
|
|
// },
|
|
// {
|
|
// title: '治理效果',
|
|
// field: 'effect'
|
|
// },
|
|
{
|
|
title: '事件简介',
|
|
width: '140',
|
|
render: 'buttons',
|
|
buttons: [
|
|
{
|
|
name: 'view',
|
|
title: '查看',
|
|
type: 'primary',
|
|
icon: 'el-icon-Plus',
|
|
render: 'basicButton',
|
|
click: row => {
|
|
dialogVisible.value = true
|
|
summary.value = row.summary
|
|
setTimeout(() => {
|
|
|
|
const spans = document.querySelectorAll('span[data-value]');
|
|
// 遍历每个 span 标签
|
|
spans.forEach(function (span) {
|
|
|
|
let val = katex.renderToString(span.getAttribute('data-value'), {
|
|
throwOnError: false,
|
|
})
|
|
var newDiv = span;
|
|
newDiv.innerHTML = val;
|
|
|
|
span.parentNode.replaceChild(newDiv, span);
|
|
});
|
|
|
|
}, 100)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: '200',
|
|
render: 'buttons',
|
|
buttons: [
|
|
{
|
|
name: 'view',
|
|
title: '详情',
|
|
type: 'primary',
|
|
icon: 'el-icon-Plus',
|
|
render: 'basicButton',
|
|
click: row => {
|
|
annexRef.value.open(row)
|
|
}
|
|
},
|
|
{
|
|
name: 'view',
|
|
title: '下载附件',
|
|
type: 'primary',
|
|
icon: 'el-icon-Plus',
|
|
render: 'basicButton',
|
|
click: row => {
|
|
annexRef.value.open(row)
|
|
}
|
|
},
|
|
{
|
|
name: 'edit',
|
|
title: '修改',
|
|
type: 'primary',
|
|
disabled: row => {
|
|
return !information
|
|
},
|
|
icon: 'el-icon-Plus',
|
|
render: 'basicButton',
|
|
click: row => {
|
|
popupEditRef.value.open('修改案例', row)
|
|
}
|
|
},
|
|
{
|
|
name: 'delete',
|
|
title: '删除',
|
|
type: 'danger',
|
|
icon: 'el-icon-Delete',
|
|
render: 'confirmButton',
|
|
disabled: row => {
|
|
return !information
|
|
},
|
|
popconfirm: {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
confirmButtonType: 'danger',
|
|
title: '确定删除吗？'
|
|
},
|
|
click: row => {
|
|
libcaseBeleteyById({ id: row.id }).then(res => {
|
|
ElMessage.success('删除成功')
|
|
tableStore.index()
|
|
})
|
|
}
|
|
}
|
|
]
|
|
}
|
|
],
|
|
loadCallback: () => { }
|
|
})
|
|
tableStore.table.params.searchValue = ''
|
|
// 弹框
|
|
const addUser = () => {
|
|
popupEditRef.value.open('新增案例')
|
|
}
|
|
|
|
provide('tableStore', tableStore)
|
|
onMounted(() => {
|
|
tableStore.index()
|
|
// console.log('🚀 ~ libcaseBeleteyById ~ tableStore:', tableStore)
|
|
})
|
|
const checkOutTheCriteria = () => {
|
|
queryStandardCase().then(res => {
|
|
drawerRef.value.open(res.data)
|
|
})
|
|
}
|
|
|
|
// 上传
|
|
const choose = (e: any) => {
|
|
ElMessage.info('上传中,请稍等...')
|
|
uploadFile(e.raw, '/supervision/').then((row: any) => {
|
|
addStandardCase({ caseUrl: row.data.name }).then(res => {
|
|
ElMessage.success('上传成功！')
|
|
})
|
|
})
|
|
//
|
|
}
|
|
const downloadTheReport = () => {
|
|
queryStandardCase().then(res => {
|
|
let urls = res.data
|
|
let name = urls.match(/\/([^/]+)\.(\w+)$/)[1]
|
|
ElMessage.info('下载中,请稍等...')
|
|
downloadFile({ filePath: urls }).then((res: any) => {
|
|
let blob = new Blob([res], {
|
|
type: urls.includes('.pdf')
|
|
? 'application/pdf'
|
|
: urls.includes('.docx')
|
|
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
|
: urls.includes('.xls')
|
|
? 'application/vnd.ms-excel'
|
|
: urls.includes('.xlsx')
|
|
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
: urls.includes('.png')
|
|
? 'image/png'
|
|
: urls.includes('.jpeg')
|
|
? 'image/jpeg'
|
|
: urls.includes('.jpg')
|
|
? 'image/jpg'
|
|
: ''
|
|
})
|
|
const url = window.URL.createObjectURL(blob)
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.download = name
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
link.remove()
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.editor {
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
background-color: #f2f2f2;
|
|
font-weight: bold;
|
|
}
|
|
|
|
td {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|