459 lines
14 KiB
Vue
459 lines
14 KiB
Vue
<template>
|
|
<!-- 表格 -->
|
|
<el-card>
|
|
<div class="flex justify-center flex-wrap">
|
|
<TabelTools @showTools="showTools" :dialogObj="historyMsgActive" />
|
|
<el-table
|
|
ref="userTableRef"
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
max-height="32rem"
|
|
table-layout="auto"
|
|
scrollbar-always-on
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column
|
|
v-if="dialogOperationVisible"
|
|
fixed="left"
|
|
type="selection"
|
|
width="40"
|
|
column-key="selection"
|
|
/>
|
|
<TabelSelect
|
|
v-if="dialogOperationVisible"
|
|
ref="DelSelectRef"
|
|
:holderText="delSelectHold"
|
|
singleColor="danger"
|
|
multipleColor="warning"
|
|
allColor="danger"
|
|
singleSize="small"
|
|
multipleSize="small"
|
|
allSize="small"
|
|
:singlePlain="true"
|
|
:multiplePlain="false"
|
|
:allPlain="false"
|
|
operateType="del"
|
|
@showComfirmDialog="showComfirmDialog"
|
|
/>
|
|
<el-table-column min-width="100" column-key="sn_number">
|
|
<template #header>
|
|
<div>
|
|
<SearchKey
|
|
v-if="dialogSearchVisible"
|
|
ref="SearchCardIdKeyRef"
|
|
holderText="输入SN号以搜索相关数据"
|
|
@search="historyMsg"
|
|
/>
|
|
<div>
|
|
<el-text class="mx-1"> SN号 </el-text>
|
|
<SortSearch
|
|
v-if="dialogSortVisible"
|
|
ref="SortCardIdRef"
|
|
activeText="顺序"
|
|
inactiveText="倒序"
|
|
@search="historyMsg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #default="scope">
|
|
<div
|
|
style="color: rgb(56, 188, 248);"
|
|
class="flex justify-start items-center text-base"
|
|
>
|
|
{{ scope.row.sn_number }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="200" width="720" column-key="original_msg">
|
|
<template #header>
|
|
<SearchKey
|
|
v-if="dialogSearchVisible"
|
|
ref="SearchOriginalKeyRef"
|
|
holderText="输入关键字以搜索相关数据"
|
|
@search="historyMsg"
|
|
/>
|
|
<div>
|
|
<el-text class="mx-1"> 原始数据 </el-text>
|
|
</div>
|
|
</template>
|
|
<template #default="scope">
|
|
<div class="flex justify-between items-center text-base">
|
|
<el-button
|
|
style="font-size: 1rem; font-weight: bold; margin-right: 1rem;"
|
|
size="small"
|
|
type="primary"
|
|
plain
|
|
disabled
|
|
>
|
|
{{ scope.row.original_msg.slice(104, scope.row.original_msg.length).length / 2 }}个字节
|
|
</el-button>
|
|
<el-text
|
|
truncated
|
|
:style="
|
|
scope.row.original_msg
|
|
? 'color: rgb(56, 188, 248);'
|
|
: 'color: rgb(240 70 70);'
|
|
"
|
|
style="font-size: 1rem"
|
|
>
|
|
{{ scope.row.original_msg ? scope.row.original_msg.slice(104, scope.row.original_msg.length) : "解析错误" }}
|
|
</el-text>
|
|
<el-button
|
|
style="font-size: 1rem; font-weight: bold"
|
|
size="small"
|
|
type="primary"
|
|
plain
|
|
@click="showAll(scope.row.original_msg.slice(104, scope.row.original_msg.length))"
|
|
>
|
|
展示全部内容
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="200" width="720" column-key="msg_data">
|
|
<template #header>
|
|
<SearchKey
|
|
v-if="dialogSearchVisible"
|
|
ref="SearchDataKeyRef"
|
|
holderText="输入关键字以搜索相关数据"
|
|
@search="historyMsg"
|
|
/>
|
|
<div>
|
|
<el-text class="mx-1"> 接收内容 </el-text>
|
|
</div>
|
|
</template>
|
|
<template #default="scope">
|
|
<div class="flex justify-between items-center text-base">
|
|
<el-text
|
|
truncated
|
|
:style="
|
|
scope.row.msg_data
|
|
? 'color: rgb(56, 188, 248);'
|
|
: 'color: rgb(240 70 70);'
|
|
"
|
|
style="font-size: 1rem"
|
|
>
|
|
{{ scope.row.msg_data ? scope.row.msg_data : "解析错误" }}
|
|
</el-text>
|
|
<el-button
|
|
style="font-size: 1rem; font-weight: bold"
|
|
size="small"
|
|
type="primary"
|
|
plain
|
|
@click="showAll(scope.row.msg_data)"
|
|
>
|
|
展示全部内容
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column min-width="170" column-key="created_at">
|
|
<template #header>
|
|
<DateTimePicker
|
|
v-if="dialogSearchVisible"
|
|
ref="DateTimePickerRef"
|
|
DateTimePicker="historyMsgDateTimePicker"
|
|
@search="historyMsg"
|
|
/>
|
|
<div>
|
|
<el-text class="mx-1"> 接收时间 </el-text>
|
|
<SortSearch
|
|
v-if="dialogSortVisible"
|
|
ref="SortDateTimeRef"
|
|
activeText="顺序"
|
|
inactiveText="倒序"
|
|
@search="historyMsg"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #default="scope">
|
|
<div
|
|
style="color: rgb(56, 188, 248);"
|
|
class="flex justify-start items-center text-base"
|
|
>
|
|
{{ scope.row.created_at }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 表格 -->
|
|
<Pagination
|
|
ref="PaginationRef"
|
|
:active="historyMsgActive"
|
|
@sizeChangeBack="changePage"
|
|
@search="historyMsg"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
<DataShow ref="DataShowRef" />
|
|
<PasswordOauth
|
|
ref="PasswordOauthRef"
|
|
operateLabel="删除历史消息"
|
|
@requestOperate="requestOperate"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, watch, onMounted, nextTick } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
|
|
import TabelTools from "../operate/tabelTools.vue";
|
|
import TabelSelect from "../operate/tabelSelect.vue";
|
|
import SearchKey from "../search/searchKey.vue";
|
|
import SortSearch from "../search/sortSearch.vue";
|
|
import SelectSearch from "../search/selectSearch.vue";
|
|
import DateTimePicker from "../search/dateTimePicker.vue";
|
|
import Pagination from "../search/pagination.vue";
|
|
import PasswordOauth from "../operate/passwordOauth.vue";
|
|
import DataShow from "../operate/dataShow.vue";
|
|
|
|
import historyMsgActiveStore from "../../stores/historyMsg";
|
|
|
|
import moment from "moment";
|
|
|
|
import $http from "../../api/index";
|
|
import $url from "../../api/url";
|
|
|
|
import { encrypt } from "../../utils/aes";
|
|
import { judgment } from "../../utils/judgment.js";
|
|
import { hasNullOrEmptyPropertyWithTypeof } from "../../utils/hasNullOrEmptyPropertyWithTypeof.js";
|
|
|
|
const historyMsgActive = historyMsgActiveStore();
|
|
|
|
const delSelectHold = {
|
|
single: "删除",
|
|
multiple: "删除选中",
|
|
all: "删除所有",
|
|
label: "删除历史消息",
|
|
};
|
|
const DelSelectRef = ref(null);
|
|
const SearchCardIdKeyRef = ref(null);
|
|
const SortCardIdRef = ref(null);
|
|
const SortDateTimeRef = ref(null);
|
|
const SelectSearchRef = ref(null);
|
|
const SearchOriginalKeyRef = ref(null);
|
|
const SearchDataKeyRef = ref(null);
|
|
const DateTimePickerRef = ref(null);
|
|
const PaginationRef = ref(null);
|
|
const PasswordOauthRef = ref(null);
|
|
const DataShowRef = ref(null);
|
|
const dialogSearchVisible = ref(false);
|
|
const dialogSortVisible = ref(false);
|
|
const dialogOperationVisible = ref(false);
|
|
const userTableRef = ref();
|
|
const offsetOff = ref(true);
|
|
const pageCount = ref(0);
|
|
const searchOptions = reactive({
|
|
sn_number: "",
|
|
original_msg: "",
|
|
msg_data: "",
|
|
created_at: "",
|
|
});
|
|
const sortOptions = reactive({
|
|
sn_number: false,
|
|
created_at: false,
|
|
});
|
|
const tableData = ref([]);
|
|
let singleData = reactive({});
|
|
let delData = reactive({});
|
|
let delDataClone = reactive({});
|
|
|
|
const showAll = (msg) => {
|
|
DataShowRef.value.dialogMsg = msg;
|
|
DataShowRef.value.dialogVisible = true;
|
|
};
|
|
|
|
const showTools = (operateType) => {
|
|
switch (operateType) {
|
|
case "search":
|
|
dialogSearchVisible.value = !dialogSearchVisible.value;
|
|
historyMsgActive.dialogSearchVisible = dialogSearchVisible.value;
|
|
break;
|
|
case "sort":
|
|
dialogSortVisible.value = !dialogSortVisible.value;
|
|
historyMsgActive.dialogSortVisible = dialogSortVisible.value;
|
|
break;
|
|
case "operation":
|
|
dialogOperationVisible.value = !dialogOperationVisible.value;
|
|
historyMsgActive.dialogOperationVisible = dialogOperationVisible.value;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const historyMsg = () => {
|
|
judgment(searchOptions, "sn_number", SearchCardIdKeyRef.value, "searchMsg");
|
|
judgment(searchOptions, "original_msg", SearchOriginalKeyRef.value, "searchMsg");
|
|
judgment(searchOptions, "msg_data", SearchDataKeyRef.value, "searchMsg");
|
|
judgment(searchOptions, "created_at", DateTimePickerRef.value, "searchMsg");
|
|
judgment(sortOptions, "sn_number", SortCardIdRef.value, "searchMsg");
|
|
judgment(sortOptions, "created_at", SortDateTimeRef.value, "searchMsg");
|
|
if (hasNullOrEmptyPropertyWithTypeof(searchOptions)) {
|
|
if (PaginationRef.value.offset !== 1 && offsetOff.value) {
|
|
PaginationRef.value.handleCurrentChange(1);
|
|
offsetOff.value = false;
|
|
}
|
|
} else {
|
|
offsetOff.value = true;
|
|
}
|
|
const data = {
|
|
uid: localStorage.data,
|
|
offset: PaginationRef.value.offset,
|
|
limit: PaginationRef.value.limit,
|
|
searchOptions: searchOptions,
|
|
sortOptions: sortOptions,
|
|
};
|
|
$http.post($url.getHistoryMsg, data).then((res) => {
|
|
if (res.data.code === 200) {
|
|
tableData.value = res.data.historyMsg;
|
|
tableData.value.forEach((item) => {
|
|
item.origin_time = item.created_at;
|
|
item.created_at = moment
|
|
.utc(item.created_at)
|
|
.add(8, "hours")
|
|
.format("YYYY-MM-DD-HH:mm:ss");
|
|
});
|
|
PaginationRef.value.dataCount = res.data.count;
|
|
historyMsgActive.dataCount = PaginationRef.value.dataCount;
|
|
pageCount.value = Math.ceil(
|
|
PaginationRef.value.dataCount / PaginationRef.value.limit
|
|
);
|
|
historyMsgActive.pageCount = pageCount.value;
|
|
if (!delData[PaginationRef.value.offset]) return;
|
|
delData[PaginationRef.value.offset].forEach((element) => {
|
|
tableData.value.forEach((item) => {
|
|
if (item.created_at == element.created_at) {
|
|
nextTick(() => {
|
|
userTableRef.value.toggleRowSelection(item, true);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
tableData.value = [];
|
|
// ElMessage.error("未查找到相关数据！");
|
|
}
|
|
});
|
|
};
|
|
|
|
const changePage = (val) => {
|
|
pageCount.value = Math.ceil(PaginationRef.value.dataCount / val);
|
|
delData = {};
|
|
for (let i = 0; i < pageCount.value; i++) {
|
|
delData[i + 1] = [];
|
|
for (const key in delDataClone) {
|
|
delDataClone[key].forEach((element) => {
|
|
// 判断数据在第几页
|
|
if (Math.ceil(element.location / PaginationRef.value.limit) == i + 1) {
|
|
delData[i + 1].push(element);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSelectionChange = (val) => {
|
|
delData[PaginationRef.value.offset] = val;
|
|
tableData.value.forEach((item, index) => {
|
|
delData[PaginationRef.value.offset].forEach((element) => {
|
|
if (item.created_at == element.created_at) {
|
|
// 数据在表格中的位置
|
|
element.location =
|
|
(PaginationRef.value.offset - 1) * PaginationRef.value.limit + (index + 1);
|
|
}
|
|
});
|
|
});
|
|
delDataClone = JSON.parse(JSON.stringify(delData));
|
|
};
|
|
|
|
const showComfirmDialog = (singleMsg) => {
|
|
singleData = singleMsg.data;
|
|
PasswordOauthRef.value.operateDialogVisible = true;
|
|
};
|
|
|
|
const requestOperate = () => {
|
|
const data = {
|
|
uid: localStorage.data,
|
|
model: encrypt(DelSelectRef.value.model),
|
|
password: encrypt(PasswordOauthRef.value.ruleForm.password),
|
|
userMsg:
|
|
DelSelectRef.value.model == "single"
|
|
? singleData
|
|
: DelSelectRef.value.model == "multiple"
|
|
? delDataClone
|
|
: "",
|
|
};
|
|
$http.post($url.delHistoryMsg, data).then((res) => {
|
|
if (res.data.code === 200) {
|
|
userTableRef.value.clearSelection();
|
|
delData = {};
|
|
delDataClone = {};
|
|
ElMessage({
|
|
message: "操作成功！",
|
|
type: "success",
|
|
});
|
|
historyMsg();
|
|
} else {
|
|
ElMessage.error("操作失败！");
|
|
}
|
|
});
|
|
};
|
|
|
|
defineExpose({ historyMsg });
|
|
|
|
watch(searchOptions, (value) => {
|
|
historyMsgActive.searchOptions = value;
|
|
});
|
|
|
|
watch(sortOptions, (value) => {
|
|
historyMsgActive.sortOptions = value;
|
|
});
|
|
|
|
onMounted(() => {
|
|
pageCount.value = historyMsgActive.pageCount;
|
|
dialogSearchVisible.value = historyMsgActive.dialogSearchVisible;
|
|
dialogSortVisible.value = historyMsgActive.dialogSortVisible;
|
|
dialogOperationVisible.value = historyMsgActive.dialogOperationVisible;
|
|
|
|
if (dialogSearchVisible.value) {
|
|
searchOptions.sn_number = historyMsgActive.searchOptions.sn_number;
|
|
searchOptions.original_msg = historyMsgActive.searchOptions.original_msg;
|
|
searchOptions.msg_data = historyMsgActive.searchOptions.msg_data;
|
|
searchOptions.created_at = historyMsgActive.searchOptions.created_at;
|
|
}
|
|
|
|
if (dialogSortVisible.value) {
|
|
sortOptions.sn_number = historyMsgActive.sortOptions.sn_number;
|
|
sortOptions.created_at = historyMsgActive.sortOptions.created_at;
|
|
}
|
|
|
|
if (dialogOperationVisible.value) {
|
|
}
|
|
|
|
setTimeout(() => {
|
|
historyMsg();
|
|
}, 200);
|
|
|
|
setTimeout(() => {
|
|
if (dialogSearchVisible.value) {
|
|
SearchCardIdKeyRef.value.searchMsg = historyMsgActive.searchOptions.sn_number;
|
|
SearchOriginalKeyRef.value.searchMsg = historyMsgActive.searchOptions.original_msg;
|
|
SearchDataKeyRef.value.searchMsg = historyMsgActive.searchOptions.msg_data;
|
|
DateTimePickerRef.value.created_at = historyMsgActive.searchOptions.created_at;
|
|
}
|
|
|
|
if (dialogSortVisible.value) {
|
|
SortCardIdRef.value.searchMsg = historyMsgActive.sortOptions.sn_number;
|
|
SortDateTimeRef.value.searchMsg = historyMsgActive.sortOptions.created_at;
|
|
}
|
|
|
|
if (dialogOperationVisible.value) {
|
|
}
|
|
}, 0);
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|