parent
dd69a42a7b
commit
c846ff24b7
@ -0,0 +1,40 @@ |
||||
import { AxiosPromise } from "axios"; |
||||
import { SoapPageResult } from "@/api/soap/types"; |
||||
import request from "@/utils/request"; |
||||
|
||||
export function soapPage( |
||||
devId?: number, |
||||
data?: PageQuery |
||||
): AxiosPromise<SoapPageResult> { |
||||
return request({ |
||||
url: `/api/device-soap-log/v1/page/${devId}`, |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
export function soapStart(devId?: number) { |
||||
return request({ |
||||
url: `/api/device-soap-log/v1/start/${devId}`, |
||||
method: "PUT", |
||||
}); |
||||
} |
||||
export function soapStop(devId?: number) { |
||||
return request({ |
||||
url: `/api/device-soap-log/v1/stop/${devId}`, |
||||
method: "PUT", |
||||
}); |
||||
} |
||||
export function soapDelete(devId?: number) { |
||||
return request({ |
||||
url: `/api/device-soap-log/v1/delete/${devId}`, |
||||
method: "DELETE", |
||||
}); |
||||
} |
||||
export function soapExport(devId?: number, data?: PageQuery) { |
||||
return request({ |
||||
url: `/api/device-soap-log/v1/_export/${devId}`, |
||||
method: "GET", |
||||
params: data, |
||||
responseType: "arraybuffer", |
||||
}); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
export interface DeviceSoapLogVO { |
||||
operTime?: string; |
||||
soapDirect?: string; |
||||
soapDesc?: string; |
||||
} |
||||
export type SoapPageResult = PageResult<DeviceSoapLogVO[]>; |
||||
@ -0,0 +1,20 @@ |
||||
import { ElMessage, ElMessageBox } from "element-plus"; |
||||
|
||||
function confirm(message: string, ok: Function) { |
||||
ElMessageBox.confirm(`${message}，是否继续?`, "警告", { |
||||
confirmButtonText: "确认", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
}) |
||||
.then(() => { |
||||
ok(); |
||||
}) |
||||
.catch((err) => { |
||||
ElMessage({ |
||||
type: "info", |
||||
message: "取消操作" + err, |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
export { confirm }; |
||||
@ -0,0 +1,202 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div style="display: flex; justify-content: space-between"> |
||||
<div style="font-weight: 700; line-height: 32px; font-size: 14px"> |
||||
SOAP任务列表 |
||||
</div> |
||||
<div> |
||||
<el-dropdown split-button placement="bottom-start"> |
||||
其他操作 |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<el-dropdown-item :icon="Position" @click="executionSoapStart" |
||||
>开始</el-dropdown-item |
||||
> |
||||
<el-dropdown-item |
||||
:icon="Close" |
||||
divided |
||||
@click="executionSoapStop" |
||||
>关闭</el-dropdown-item |
||||
> |
||||
<el-dropdown-item |
||||
:icon="Delete" |
||||
divided |
||||
@click="executionSoapDelete" |
||||
>删除</el-dropdown-item |
||||
> |
||||
<el-dropdown-item :icon="Refresh" divided @click="getData" |
||||
>刷新</el-dropdown-item |
||||
> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
<el-button |
||||
type="primary" |
||||
:icon="Download" |
||||
style="margin-left: 10px" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table |
||||
:data="tableData" |
||||
stripe |
||||
highlight-current-row |
||||
v-loading="loading" |
||||
max-height="450" |
||||
> |
||||
<el-table-column |
||||
label="操作时间" |
||||
prop="operTime" |
||||
width="250" |
||||
align="center" |
||||
/> |
||||
<el-table-column |
||||
label="操作方向" |
||||
width="150" |
||||
prop="soapDirect" |
||||
align="center" |
||||
/> |
||||
<el-table-column label="操作描述" align="center" prop="soapDesc"> |
||||
<template #default="scope"> |
||||
<div style="white-space: pre-line"> |
||||
{{ scope.row.soapDesc }} |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryForm.pageNum" |
||||
v-model:limit="queryForm.pageSize" |
||||
@pagination="getData" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { DeviceSoapLogVO } from "@/api/soap/types"; |
||||
import { |
||||
soapDelete, |
||||
soapExport, |
||||
soapPage, |
||||
soapStart, |
||||
soapStop, |
||||
} from "@/api/soap"; |
||||
import { |
||||
Close, |
||||
Delete, |
||||
Download, |
||||
Position, |
||||
Refresh, |
||||
} from "@element-plus/icons-vue"; |
||||
import { confirm } from "@/utils/confirm"; |
||||
import { exportUser } from "@/api/user"; |
||||
|
||||
const route = useRoute(); |
||||
let devId: number = parseInt(<string>route.params.devId); |
||||
const total = ref<number>(0); |
||||
const tableData = ref<DeviceSoapLogVO[]>([]); |
||||
const queryForm = ref<PageQuery>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const loading = ref<boolean>(false); |
||||
const getData = () => { |
||||
loading.value = true; |
||||
soapPage(devId, queryForm.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const executionSoapStart = () => { |
||||
loading.value = true; |
||||
soapStart(devId) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "执行成功", |
||||
type: "success", |
||||
duration: 1000, |
||||
onClose: () => { |
||||
getData(); |
||||
}, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const executionSoapStop = () => { |
||||
loading.value = true; |
||||
soapStop(devId) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "执行成功", |
||||
type: "success", |
||||
duration: 1000, |
||||
onClose: () => { |
||||
getData(); |
||||
}, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const executionSoapDelete = () => { |
||||
confirm("是否确认删除", () => { |
||||
loading.value = true; |
||||
soapDelete(devId) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "执行成功", |
||||
type: "success", |
||||
duration: 1000, |
||||
onClose: () => { |
||||
getData(); |
||||
}, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
function handleExport() { |
||||
soapExport(devId, queryForm.value).then((response: any) => { |
||||
const fileData = response.data; |
||||
const fileName = decodeURI( |
||||
response.headers["content-disposition"].split(";")[1].split("=")[1] |
||||
); |
||||
const fileType = |
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"; |
||||
|
||||
const blob = new Blob([fileData], { type: fileType }); |
||||
const downloadUrl = window.URL.createObjectURL(blob); |
||||
|
||||
const downloadLink = document.createElement("a"); |
||||
downloadLink.href = downloadUrl; |
||||
downloadLink.download = fileName; |
||||
|
||||
document.body.appendChild(downloadLink); |
||||
downloadLink.click(); |
||||
|
||||
document.body.removeChild(downloadLink); |
||||
window.URL.revokeObjectURL(downloadUrl); |
||||
}); |
||||
} |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
Loading…
Reference in new issue