|
|
@@ -1,4 +1,75 @@
|
|
|
<template>
|
|
|
+ <div class="__normal-page">
|
|
|
+ <div class="__normal-content">
|
|
|
+ <CusContent
|
|
|
+ v-model:tableHead="tableHead"
|
|
|
+ @handleReset="handleReset"
|
|
|
+ @handleSearch="onSearch"
|
|
|
+ >
|
|
|
+ <template #fieldOut>
|
|
|
+ <CusForm labelWidth="100px" @handleEnter="onSearch">
|
|
|
+ <CusFormColumn
|
|
|
+ label="账号:"
|
|
|
+ v-model:param="queryForm.shipId"/>
|
|
|
+ <CusFormColumn
|
|
|
+ label="单位:"
|
|
|
+ v-model:param="queryForm.shipId"/>
|
|
|
+ <CusFormColumn
|
|
|
+ label="登陆时间:"
|
|
|
+ link="date"
|
|
|
+ type="daterange"
|
|
|
+ v-model:param="queryForm.shipId"/>
|
|
|
+ <CusFormColumn
|
|
|
+ label="状态:"
|
|
|
+ link="select"
|
|
|
+ static
|
|
|
+ v-model:param="queryForm.shipId"
|
|
|
+ labelKey="label"
|
|
|
+ valueKey="value"
|
|
|
+ :options="[
|
|
|
+ {label: '类型一', value: '1'},
|
|
|
+ {label: '类型二', value: '2'},
|
|
|
+ {label: '类型三', value: '3'},
|
|
|
+ ]"/>
|
|
|
+ <CusFormColumn
|
|
|
+ label="注销时间:"
|
|
|
+ link="date"
|
|
|
+ type="daterange"
|
|
|
+ v-model:param="queryForm.shipId"/>
|
|
|
+ <CusFormColumn
|
|
|
+ label="设备IP:"
|
|
|
+ v-model:param="queryForm.shipId"/>
|
|
|
+ <CusFormColumn
|
|
|
+ label="浏览器:"
|
|
|
+ v-model:param="queryForm.shipId"/>
|
|
|
+ <CusSearchButtons
|
|
|
+ @handleReset="handleReset"
|
|
|
+ @handleSearch="onSearch"
|
|
|
+ />
|
|
|
+ </CusForm>
|
|
|
+ </template>
|
|
|
+ <template #buttons>
|
|
|
+ <div class="__cus-button_submit __hover">
|
|
|
+ <SvgIcon name="export" size="16"/>导出
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #table>
|
|
|
+ <CusTable
|
|
|
+ v-loading="loading"
|
|
|
+ ref="ref_cusTable"
|
|
|
+ :tableData="queryResult.tableData"
|
|
|
+ :tableHead="tableHead"
|
|
|
+ :total="queryResult.total"
|
|
|
+ :page="queryPage.pageNum"
|
|
|
+ :pageSize="queryPage.pageSize"
|
|
|
+ @handlePage="handlePage"
|
|
|
+ @handleSort="handleSort"
|
|
|
+ >
|
|
|
+ </CusTable>
|
|
|
+ </template>
|
|
|
+ </CusContent>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -25,9 +96,120 @@ export default defineComponent({
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
|
|
|
- const state = reactive({})
|
|
|
+ const state = reactive({
|
|
|
+ // 加载中
|
|
|
+ loading: false,
|
|
|
+ // 查询分页参数
|
|
|
+ queryPage: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ // 查询结果
|
|
|
+ queryResult: {
|
|
|
+ total: 0,
|
|
|
+ tableData: []
|
|
|
+ },
|
|
|
+ // 查询表单参数
|
|
|
+ queryForm: <any>{},
|
|
|
+ // 查询表单参数备份
|
|
|
+ back_queryForm: {},
|
|
|
+ // 查询表格排序
|
|
|
+ querySort: {},
|
|
|
+ // 表格表头
|
|
|
+ tableHead: [
|
|
|
+ {value: "p1", label: "账号", show: true},
|
|
|
+ {value: "p1", label: "单位", show: true},
|
|
|
+ {value: "p1", label: "登陆时间", show: true},
|
|
|
+ {value: "p1", label: "状态", show: true},
|
|
|
+ {value: "p1", label: "注销时间", show: true},
|
|
|
+ {value: "p1", label: "设备IP", show: true},
|
|
|
+ {value: "p1", label: "浏览器", show: true},
|
|
|
+ {value: "p1", label: "时长", show: true},
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ const ref_cusTable = ref()
|
|
|
+ // 获取字典
|
|
|
+ const initDictionary = () => {
|
|
|
+ }
|
|
|
+ // 查询分页参数改变处理方法
|
|
|
+ const handlePage = ({page, pageSize}: any) => {
|
|
|
+ state.queryPage.pageNum = page
|
|
|
+ state.queryPage.pageSize = pageSize
|
|
|
+ handleSearch(page, pageSize)
|
|
|
+ }
|
|
|
+ // 查询排序参数改变处理方法
|
|
|
+ const handleSort = ({key, value}: any) => {
|
|
|
+ state.querySort = key ? {key: value} : {}
|
|
|
+ handleSearch()
|
|
|
+ }
|
|
|
+ // 重置查询表单方法
|
|
|
+ const handleReset = () => {
|
|
|
+ state.queryForm = {}
|
|
|
+ state.back_queryForm = state.queryForm
|
|
|
+ handleSearch()
|
|
|
+ }
|
|
|
+ // 查询方法
|
|
|
+ const handleSearch = (page = 1, pageSize = 10) => {
|
|
|
+ // 添加分页参数
|
|
|
+ const queryParams: any = {
|
|
|
+ pageNum: page,
|
|
|
+ pageSize: pageSize,
|
|
|
+ sort: {},
|
|
|
+ text: ''
|
|
|
+ }
|
|
|
+ // 添加排序参数
|
|
|
+ for (const [k, v] of Object.entries(state.querySort)) {
|
|
|
+ that.$util.isValue(v) ? (queryParams.sort[k] = v) : null;
|
|
|
+ }
|
|
|
+ // 添加表单参数
|
|
|
+ for (const [k, v] of Object.entries(state.back_queryForm)) {
|
|
|
+ that.$util.isValue(v) ? (queryParams[k] = v) : null;
|
|
|
+ }
|
|
|
+ // 添加复合查询参数
|
|
|
+ state.loading = true
|
|
|
+
|
|
|
+ // mock
|
|
|
+ const arr = []
|
|
|
+ for (let i = 0; i < 77; i++) {
|
|
|
+ arr.push({p1: '阿三顶顶顶顶顶顶顶顶顶顶顶顶顶'})
|
|
|
+ }
|
|
|
+ state.queryResult.tableData = arr
|
|
|
+ state.queryResult.total = arr.length
|
|
|
+ state.loading = false
|
|
|
+ // that.$api.patrolBoatList(that.$util.formatGetParam(queryParams)).then((res: { code: number; rows: never[]; total: number; }) => {
|
|
|
+ // if (res.code === 200) {
|
|
|
+ // state.queryResult.tableData = res.rows
|
|
|
+ // state.queryResult.total = res.total
|
|
|
+ // }
|
|
|
+ // setTimeout(() => {
|
|
|
+ // state.loading = false
|
|
|
+ // }, 1000)
|
|
|
+ // }).catch(() => {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // state.loading = false
|
|
|
+ // }, 1000)
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ // 点击查询按钮后
|
|
|
+ const onSearch = () => {
|
|
|
+ ref_cusTable.value.resetFilter()
|
|
|
+ state.back_queryForm = state.queryForm
|
|
|
+ state.queryPage.pageNum = 1
|
|
|
+ handleSearch()
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
|
|
|
+ initDictionary()
|
|
|
+ handleSearch()
|
|
|
+ })
|
|
|
return {
|
|
|
- ...toRefs(state)
|
|
|
+ ref_cusTable,
|
|
|
+ ...toRefs(state),
|
|
|
+ handleSearch,
|
|
|
+ handlePage,
|
|
|
+ handleSort,
|
|
|
+ handleReset,
|
|
|
+ onSearch,
|
|
|
}
|
|
|
},
|
|
|
})
|
CzRger