feat: 测试puretable
parent
c1b52c1ecc
commit
cec6c417ee
@ -1,8 +1,16 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-12 14:35:28
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-17 13:17:41
|
||||
* @FilePath: \General-AI-Platform-Web-Client\.husky\lintstagedrc.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
module.exports = {
|
||||
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
|
||||
"{!(package)*.json}": ["prettier --write--parser json"],
|
||||
"package.json": ["prettier --write"],
|
||||
"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
|
||||
"*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],
|
||||
"*.vue": ["eslint --fix", "prettier --write"],
|
||||
"*.{vue,css,scss,postcss,less}": ["prettier --write"],
|
||||
"*.md": ["prettier --write"]
|
||||
};
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-17 13:24:18
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-17 13:28:02
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\router\modules\alarm.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { $t } from "@/plugins/i18n";
|
||||
|
||||
export default {
|
||||
path: "/alarm",
|
||||
meta: {
|
||||
title: $t("menus.hsalarm"),
|
||||
icon: "icon-gaojingguanli-weixuanzhong",
|
||||
// showLink: false,
|
||||
rank: 5,
|
||||
roles: ["admin", "common"]
|
||||
},
|
||||
component: () => import("@/views/alarm/index.vue"),
|
||||
name: "AlarmList"
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-17 15:26:20
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-17 16:56:11
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\router\modules\demo.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { $t } from "@/plugins/i18n";
|
||||
|
||||
export default {
|
||||
path: "/demo",
|
||||
redirect: "/demo/baseTable",
|
||||
meta: {
|
||||
title: $t("menus.hstest"),
|
||||
icon: "",
|
||||
showLink: false,
|
||||
rank: 10,
|
||||
roles: ["admin", "common"]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/demo/baseTable",
|
||||
name: "DemoBaseTable",
|
||||
component: () => import("@/views/demo/baseTable.vue"),
|
||||
meta: {
|
||||
title: "基础表格"
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,193 @@
|
||||
<script setup lang="ts">
|
||||
import { getCardList } from "@/api/list";
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
defineOptions({
|
||||
name: "AlarmList"
|
||||
});
|
||||
|
||||
// TODO 根据需要提取到全局 告警等级~
|
||||
const alarmLevelStatusEnum: Record<string, any>[] = [
|
||||
{
|
||||
color: "rgba(232, 13, 13, 1)",
|
||||
value: "1",
|
||||
label: "紧急",
|
||||
isDelete: false,
|
||||
icon: "ArrowUpOutlined",
|
||||
id: "1"
|
||||
},
|
||||
{
|
||||
color: "rgba(255, 136, 0, 1)",
|
||||
value: "2",
|
||||
label: "较高",
|
||||
isDelete: false,
|
||||
id: "2"
|
||||
},
|
||||
{
|
||||
color: "rgba(68, 139, 245, 1)",
|
||||
value: "3",
|
||||
label: "一般",
|
||||
isDelete: false,
|
||||
id: "3"
|
||||
},
|
||||
{
|
||||
color: "rgba(179, 214, 0, 1)",
|
||||
value: "4",
|
||||
label: "低",
|
||||
isDelete: true,
|
||||
id: "4"
|
||||
},
|
||||
{
|
||||
color: "rgba(81, 177, 6, 1)",
|
||||
value: "5",
|
||||
label: "较低",
|
||||
isDelete: true,
|
||||
id: "5"
|
||||
},
|
||||
{
|
||||
color: "rgba(43, 183, 136, 1)",
|
||||
value: "6",
|
||||
label: "非常低",
|
||||
isDelete: true,
|
||||
id: "6"
|
||||
}
|
||||
];
|
||||
|
||||
const svg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||
`;
|
||||
|
||||
const pagination = ref({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
const deviceList = ref([]);
|
||||
|
||||
const searchValue = ref("");
|
||||
|
||||
const formData = reactive({
|
||||
deviceSort: "",
|
||||
deviceState: "",
|
||||
isEnabled: ""
|
||||
});
|
||||
|
||||
const dataLoading = ref(true);
|
||||
// const onSubmit = () => {
|
||||
// console.log("submit!");
|
||||
// };
|
||||
const onPageSizeChange = (size: number) => {
|
||||
pagination.value.pageSize = size;
|
||||
pagination.value.current = 1;
|
||||
};
|
||||
const onCurrentChange = (current: number) => {
|
||||
pagination.value.current = current;
|
||||
};
|
||||
const getCardListData = async () => {
|
||||
try {
|
||||
const { data } = await getCardList();
|
||||
deviceList.value = data.list;
|
||||
console.log(data.list);
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
total: data.list.length
|
||||
};
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
dataLoading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getCardListData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 main">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item label="告警名称">
|
||||
<el-select
|
||||
v-model="formData.deviceState"
|
||||
placeholder="告警名称"
|
||||
clearable
|
||||
>
|
||||
<el-option label="名称1" value="1" />
|
||||
<el-option label="名称2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警等级">
|
||||
<el-select
|
||||
v-model="formData.deviceState"
|
||||
placeholder="告警等级"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(v, k) in alarmLevelStatusEnum"
|
||||
:key="k"
|
||||
:label="v.label"
|
||||
:value="v.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
v-loading="dataLoading"
|
||||
:element-loading-svg="svg"
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
>
|
||||
<el-empty
|
||||
v-show="
|
||||
deviceList
|
||||
.slice(
|
||||
pagination.pageSize * (pagination.current - 1),
|
||||
pagination.pageSize * pagination.current
|
||||
)
|
||||
.filter(v =>
|
||||
v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
|
||||
).length === 0
|
||||
"
|
||||
:description="`${searchValue} 产品不存在`"
|
||||
/>
|
||||
<template v-if="pagination.total > 0">
|
||||
<el-row :gutter="16">
|
||||
<el-col
|
||||
class="mb-4 w-[100%]"
|
||||
v-for="(device, index) in deviceList
|
||||
.slice(
|
||||
pagination.pageSize * (pagination.current - 1),
|
||||
pagination.pageSize * pagination.current
|
||||
)
|
||||
.filter(v =>
|
||||
v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
|
||||
)"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
>
|
||||
<div>123</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-pagination
|
||||
v-model:currentPage="pagination.current"
|
||||
class="float-right"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:background="false"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="onPageSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,75 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-17 16:56:28
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-17 17:04:00
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\views\demo\baseTable.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { tableDataMore } from "./data";
|
||||
|
||||
defineOptions({
|
||||
name: "DemoBaseTable"
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date",
|
||||
width: "260",
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name",
|
||||
width: "260"
|
||||
},
|
||||
{
|
||||
label: "地区",
|
||||
prop: "state",
|
||||
width: "260"
|
||||
},
|
||||
{
|
||||
label: "城市",
|
||||
prop: "city",
|
||||
width: "260"
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
prop: "address",
|
||||
width: "260"
|
||||
},
|
||||
{
|
||||
label: "邮编",
|
||||
prop: "post-code",
|
||||
width: "260"
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
width: "120",
|
||||
fixed: "right",
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function handleClick(row) {
|
||||
console.log(
|
||||
"%crow===>>>: ",
|
||||
"color: MidnightBlue; background: Aquamarine; font-size: 20px;",
|
||||
row
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<pure-table :data="tableDataMore" :columns="columns">
|
||||
<template #operation="{ row }">
|
||||
<el-button link type="primary" size="small" @click="handleClick(row)">
|
||||
Detail
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small">Edit</el-button>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
@ -0,0 +1,297 @@
|
||||
import dayjs from "dayjs";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
|
||||
const date = dayjs(new Date()).format("YYYY-MM-DD");
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date,
|
||||
name: "Tom",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date,
|
||||
name: "Jack",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date,
|
||||
name: "Dick",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date,
|
||||
name: "Harry",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date,
|
||||
name: "Sam",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date,
|
||||
name: "Lucy",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date,
|
||||
name: "Mary",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date,
|
||||
name: "Mike",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
}
|
||||
];
|
||||
|
||||
const cloneData = clone(tableData, true);
|
||||
|
||||
const tableDataMore = cloneData.map(item =>
|
||||
Object.assign(item, {
|
||||
state: "California",
|
||||
city: "Los Angeles",
|
||||
"post-code": "CA 90036"
|
||||
})
|
||||
);
|
||||
|
||||
const tableDataImage = cloneData.map((item, index) =>
|
||||
Object.assign(item, {
|
||||
image: `https://pure-admin.github.io/pure-admin-table/imgs/${index + 1}.jpg`
|
||||
})
|
||||
);
|
||||
|
||||
const tableDataSortable = cloneData.map((item, index) =>
|
||||
Object.assign(item, {
|
||||
date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
|
||||
})
|
||||
);
|
||||
|
||||
const tableDataExpand = [
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114",
|
||||
family: [
|
||||
{
|
||||
name: "Jerry",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Spike",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Tyke",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114",
|
||||
family: [
|
||||
{
|
||||
name: "Jerry",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Spike",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Tyke",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114",
|
||||
family: [
|
||||
{
|
||||
name: "Jerry",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Spike",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Tyke",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114",
|
||||
family: [
|
||||
{
|
||||
name: "Jerry",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Spike",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Tyke",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: "2016-05-08",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114",
|
||||
family: [
|
||||
{
|
||||
name: "Jerry",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Spike",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Tyke",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: "2016-05-06",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114",
|
||||
family: [
|
||||
{
|
||||
name: "Jerry",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Spike",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Tyke",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: "2016-05-07",
|
||||
name: "Tom",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114",
|
||||
family: [
|
||||
{
|
||||
name: "Jerry",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Spike",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
},
|
||||
{
|
||||
name: "Tyke",
|
||||
state: "California",
|
||||
city: "San Francisco",
|
||||
address: "3650 21st St, San Francisco",
|
||||
zip: "CA 94114"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export {
|
||||
tableData,
|
||||
tableDataMore,
|
||||
tableDataImage,
|
||||
tableDataExpand,
|
||||
tableDataSortable
|
||||
};
|
||||
Loading…
Reference in New Issue