33 changed files with 747 additions and 389 deletions
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<div class='board_record'> |
|||
|
|||
<!-- 搜索栏 --> |
|||
<div class="filter"> |
|||
<div> |
|||
<ButtonGradient @click="onRefresh" class="refresh-btn"> |
|||
<template #prefix> |
|||
<img src="./images/refresh.svg" /> |
|||
</template> |
|||
刷新 |
|||
</ButtonGradient> |
|||
<!-- <ButtonGradient> |
|||
<template #prefix> |
|||
<img src="@screen/images/insert.svg" /> |
|||
</template> |
|||
新增 |
|||
</ButtonGradient> --> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 内容 --> |
|||
<div class="body"> |
|||
<Table :data="tableData"> |
|||
<ElTableColumn label="序号" width="60" /> |
|||
<ElTableColumn label="发布设备" width="60" /> |
|||
<ElTableColumn label="屏幕尺寸" width="60" /> |
|||
<ElTableColumn label="设备方向" width="60" /> |
|||
<ElTableColumn label="设备桩号" width="60" /> |
|||
<ElTableColumn prop="eventName" label="发布内容" width="240" /> |
|||
<ElTableColumn prop="eventName" label="发布事件" width="240" /> |
|||
<ElTableColumn prop="eventName" label="发布状态" width="240" /> |
|||
<ElTableColumn prop="eventName" label="发布用户" width="240" /> |
|||
<ElTableColumn label="操作" width="210"> |
|||
<template slot-scope="scope"> |
|||
<ElButton type="text" style="color: #00D1FF;" @click="showDisposal(scope.row.eventType)">流程配置</ElButton> |
|||
<ElButton type="text" style="color: #00EBC1;" @click="showPhrases(scope.row)">常用语</ElButton> |
|||
</template> |
|||
</ElTableColumn> |
|||
</Table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="footer"> |
|||
<Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]" |
|||
:page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next" |
|||
:total="total"> |
|||
</Pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Pagination from '@screen/components/Pagination.vue'; |
|||
import Table from '@screen/components/Table.vue'; |
|||
import request from "@/utils/request"; |
|||
|
|||
export default { |
|||
name: 'boardRecord', |
|||
components: { |
|||
ButtonGradient, |
|||
Pagination, |
|||
Table |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
isShowPhrases: false, |
|||
isShowDisposal: false, |
|||
total: 20, |
|||
eventType: 1, |
|||
searchData: { |
|||
pageSize: 20, |
|||
pageNum: 1, |
|||
}, |
|||
phrasesData: [], |
|||
process: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.initData(); |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
request({ |
|||
url: `/business/dcEventType/list`, |
|||
method: "get", |
|||
params: this.searchData, |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.tableData = result.rows; |
|||
this.total = result.total; |
|||
}); |
|||
}, |
|||
onRefresh() { |
|||
this.tableData = []; |
|||
setTimeout(() => { |
|||
this.initData(); |
|||
}, 100); |
|||
}, |
|||
onSizeChange(pageSize) { |
|||
this.searchData.pageSize = pageSize; |
|||
this.getData(); |
|||
}, |
|||
showPhrases(data) { |
|||
if (data?.processConfigList.length <= 0) { |
|||
Message.warning('请先配置流程！'); |
|||
return; |
|||
} |
|||
let process = [] |
|||
data.processConfigList.forEach(it => { |
|||
process.push({ |
|||
id: it.id, |
|||
commonPhrases: it.commonPhrases, |
|||
label: it.processNode, |
|||
isActive: false, |
|||
}) |
|||
}) |
|||
this.process = process; |
|||
this.isShowPhrases = true; |
|||
this.eventType = data.eventType; |
|||
}, |
|||
showDisposal(eventType) { |
|||
this.isShowDisposal = true; |
|||
this.eventType = eventType; |
|||
}, |
|||
onClosePhrases() { |
|||
this.isShowPhrases = false |
|||
}, |
|||
onCloseDisposal() { |
|||
this.isShowDisposal = false; |
|||
}, |
|||
onUpdatePhrasesData(phrasesData) { |
|||
this.phrasesData = phrasesData; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.board_record { |
|||
padding: 21px; |
|||
|
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
z-index: 6; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.filter { |
|||
height: 60px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
>div { |
|||
display: flex; |
|||
gap: 6px; |
|||
} |
|||
} |
|||
|
|||
.body { |
|||
flex: 1; |
|||
position: relative; |
|||
overflow: hidden; |
|||
|
|||
.content { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: auto; |
|||
} |
|||
} |
|||
|
|||
.footer { |
|||
margin-top: 15px; |
|||
height: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue