style: ui界面搜索,表格开发
This commit is contained in:
xiangbo
parent
e113af5378
commit
26d075953e
|
|
@ -7,4 +7,4 @@ VITE_PUBLIC_PATH = /
|
|||
# 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
|
||||
VITE_ROUTER_HISTORY = "hash"
|
||||
|
||||
VITE_API_BASEURL = "http://localhost:5199/api"
|
||||
VITE_API_BASEURL = "http://192.168.2.33:5199/api"
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@ const tableData: TableConfig = {
|
|||
edit: true, // 字段允许修改
|
||||
setting: {
|
||||
datasource: [
|
||||
{ Value: "true", Text: "√" },
|
||||
{ Value: "false", Text: "X" }
|
||||
{ value: "true", text: "√" },
|
||||
{ value: "false", text: "X" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -110,5 +110,7 @@ const tableData: TableConfig = {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div><ahTable ref="table" :tableConfig="tableData" /></div>
|
||||
<div>
|
||||
<ahTable ref="table" :tableConfig="tableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts" name="Testxb">
|
||||
import { ref } from "vue";
|
||||
// defineOptions({
|
||||
// name: "Testxb"
|
||||
// });
|
||||
let name = ref("nihao");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>测试菜单</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 搜索区域 -->
|
||||
<el-form :model="query" inline label-width="80px" class="search-form">
|
||||
<el-form-item label="学校">
|
||||
<el-select
|
||||
v-model="query.school"
|
||||
placeholder="请选择学校"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option
|
||||
v-for="s in schoolOptions"
|
||||
:key="s.value"
|
||||
:label="s.label"
|
||||
:value="s.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="年级">
|
||||
<el-select
|
||||
v-model="query.grade"
|
||||
placeholder="请选择年级"
|
||||
clearable
|
||||
style="width: 140px"
|
||||
>
|
||||
<el-option
|
||||
v-for="g in gradeOptions"
|
||||
:key="g.value"
|
||||
:label="g.label"
|
||||
:value="g.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="赴校人员">
|
||||
<el-input
|
||||
v-model="query.people"
|
||||
placeholder="请输入人员"
|
||||
clearable
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select
|
||||
v-model="query.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
style="width: 140px"
|
||||
>
|
||||
<el-option label="已完结" :value="1" />
|
||||
<el-option label="跟进中" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="赴校时间">
|
||||
<el-date-picker
|
||||
v-model="query.times"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
unlink-panels
|
||||
style="width: 300px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table :data="pagedData" border style="width: 100%">
|
||||
<el-table-column prop="school" label="学校" min-width="140" />
|
||||
<el-table-column prop="grade" label="年级" min-width="100" />
|
||||
<el-table-column prop="people" label="赴校人员" min-width="120" />
|
||||
<el-table-column prop="times" label="赴校时间" min-width="140" />
|
||||
<el-table-column
|
||||
prop="feedbackTotals"
|
||||
label="反馈问题数量"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="solveTotals"
|
||||
label="解决问题数量"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column label="状态" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'success' : 'warning'">
|
||||
{{ row.status === 1 ? "已完结" : "跟进中" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lastTime" label="最后跟进时间" min-width="160" />
|
||||
<el-table-column label="操作" fixed="right" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="danger" plain @click="onDelete(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" plain @click="onDetail(row)"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button size="small" type="success" plain @click="onFollow(row)"
|
||||
>跟进</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pager">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="filteredList.length"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 赴校信息管理菜单 -->
|
||||
<script setup lang="ts" name="Toschoolinfomanage">
|
||||
import { ref, reactive, computed } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
interface TableItem {
|
||||
id: number;
|
||||
school: string;
|
||||
grade: string;
|
||||
people: string;
|
||||
times: string; // YYYY-MM-DD
|
||||
feedbackTotals: number;
|
||||
solveTotals: number;
|
||||
status: 1 | 2; // 1: 已完结, 2: 跟进中
|
||||
lastTime: string; // YYYY-MM-DD
|
||||
}
|
||||
|
||||
const schoolOptions = [
|
||||
{ label: "第一中学", value: "第一中学" },
|
||||
{ label: "第二中学", value: "第二中学" },
|
||||
{ label: "实验中学", value: "实验中学" },
|
||||
{ label: "外国语学校", value: "外国语学校" }
|
||||
];
|
||||
|
||||
const gradeOptions = [
|
||||
{ label: "高一", value: "高一" },
|
||||
{ label: "高二", value: "高二" },
|
||||
{ label: "高三", value: "高三" },
|
||||
{ label: "初三", value: "初三" }
|
||||
];
|
||||
|
||||
const query = reactive({
|
||||
school: "" as string | undefined,
|
||||
grade: "" as string | undefined,
|
||||
people: "",
|
||||
status: undefined as 1 | 2 | undefined,
|
||||
times: [] as string[]
|
||||
});
|
||||
|
||||
// 点击查询后生效的条件，避免输入框每次输入都触发筛选
|
||||
const appliedQuery = ref({ ...query });
|
||||
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
function rand(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function randomDate(start: string, end: string) {
|
||||
const startTs = dayjs(start).valueOf();
|
||||
const endTs = dayjs(end).valueOf();
|
||||
const v = rand(startTs, endTs);
|
||||
return dayjs(v).format("YYYY-MM-DD");
|
||||
}
|
||||
|
||||
function createMockList(len = 87): TableItem[] {
|
||||
const peoplePool = ["张三", "李四", "王五", "赵六", "陈七", "刘八", "黄九"];
|
||||
const list: TableItem[] = [];
|
||||
for (let i = 1; i <= len; i++) {
|
||||
const school = schoolOptions[rand(0, schoolOptions.length - 1)].value;
|
||||
const grade = gradeOptions[rand(0, gradeOptions.length - 1)].value;
|
||||
const times = randomDate("2024-01-01", "2025-12-31");
|
||||
const lastTime = dayjs(times).add(rand(0, 120), "day").format("YYYY-MM-DD");
|
||||
const feedbackTotals = rand(0, 20);
|
||||
const solveTotals = rand(0, feedbackTotals);
|
||||
const status = rand(1, 2) as 1 | 2;
|
||||
list.push({
|
||||
id: i,
|
||||
school,
|
||||
grade,
|
||||
people: peoplePool[rand(0, peoplePool.length - 1)],
|
||||
times,
|
||||
feedbackTotals,
|
||||
solveTotals,
|
||||
status,
|
||||
lastTime
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
const allData = ref<TableItem[]>(createMockList());
|
||||
|
||||
const filteredList = computed(() => {
|
||||
const q = appliedQuery.value;
|
||||
return allData.value.filter(item => {
|
||||
const matchSchool = q.school ? item.school === q.school : true;
|
||||
const matchGrade = q.grade ? item.grade === q.grade : true;
|
||||
const matchPeople = q.people ? item.people.includes(q.people.trim()) : true;
|
||||
const matchStatus = q.status ? item.status === q.status : true;
|
||||
let matchTimes = true;
|
||||
if (Array.isArray(q.times) && q.times.length === 2) {
|
||||
const [start, end] = q.times;
|
||||
const d = dayjs(item.times);
|
||||
matchTimes =
|
||||
d.isAfter(dayjs(start).subtract(1, "day")) &&
|
||||
d.isBefore(dayjs(end).add(1, "day"));
|
||||
}
|
||||
return (
|
||||
matchSchool && matchGrade && matchPeople && matchStatus && matchTimes
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const pagedData = computed(() => {
|
||||
const start = (page.value - 1) * pageSize.value;
|
||||
return filteredList.value.slice(start, start + pageSize.value);
|
||||
});
|
||||
|
||||
function handleSearch() {
|
||||
appliedQuery.value = { ...query } as any;
|
||||
page.value = 1;
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
query.school = "";
|
||||
query.grade = "";
|
||||
query.people = "";
|
||||
query.status = undefined;
|
||||
query.times = [];
|
||||
appliedQuery.value = { ...query } as any;
|
||||
page.value = 1;
|
||||
}
|
||||
|
||||
function handlePageChange(p: number) {
|
||||
page.value = p;
|
||||
}
|
||||
|
||||
function handleSizeChange(s: number) {
|
||||
pageSize.value = s;
|
||||
page.value = 1;
|
||||
}
|
||||
|
||||
function onDelete(row: TableItem) {
|
||||
console.log(`删除：${row.school} - ${row.people}`);
|
||||
ElMessage.success(`已删除：${row.school} - ${row.people}`);
|
||||
}
|
||||
|
||||
function onDetail(row: TableItem) {
|
||||
console.log(`详情：${row.school} - ${row.people}`);
|
||||
ElMessage.info(`详情：${row.school} - ${row.people}`);
|
||||
}
|
||||
|
||||
function onFollow(row: TableItem) {
|
||||
console.log(`跟进：${row.school} - ${row.people}`);
|
||||
ElMessage.success(`跟进：${row.school} - ${row.people}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue