dev #8
|
|
@ -7,4 +7,4 @@ VITE_PUBLIC_PATH = /
|
||||||
# 开发环境路由历史模式(Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数")
|
# 开发环境路由历史模式(Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数")
|
||||||
VITE_ROUTER_HISTORY = "hash"
|
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, // 字段允许修改
|
edit: true, // 字段允许修改
|
||||||
setting: {
|
setting: {
|
||||||
datasource: [
|
datasource: [
|
||||||
{ Value: "true", Text: "√" },
|
{ value: "true", text: "√" },
|
||||||
{ Value: "false", Text: "X" }
|
{ value: "false", text: "X" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -110,5 +110,7 @@ const tableData: TableConfig = {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div><ahTable ref="table" :tableConfig="tableData" /></div>
|
<div>
|
||||||
|
<ahTable ref="table" :tableConfig="tableData" />
|
||||||
|
</div>
|
||||||
</template>
|
</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