修改表格操作列
This commit is contained in:
guanj
@@ -1,274 +1,274 @@
|
||||
<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>
|
||||
<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: '操作',fixed: 'right',
|
||||
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>
|
||||
|
||||
@@ -49,7 +49,7 @@ const tableStore = new TableStore({
|
||||
field: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
title: '操作',fixed: 'right',
|
||||
width: '280',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
|
||||
Reference in New Issue
Block a user