|
|
|
@ -15,19 +15,27 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="table-container"> |
|
|
|
<div class="search-bar"> |
|
|
|
<el-input type="text" placeholder="请输入精网号" v-model="searchCriteria.netNumber" |
|
|
|
style="width: 180px;" size="large" /> |
|
|
|
<el-select v-model="searchCriteria.department" placeholder="选择分店门部" size="large" |
|
|
|
style="width: 180px; margin-left: 15px;"></el-select> |
|
|
|
<el-select v-model="searchCriteria.store" placeholder="--请选择所属门店--" size="large" |
|
|
|
style="width: 180px; margin-left: 15px"></el-select> |
|
|
|
<div class="search-bar" :v-model="form"> |
|
|
|
<el-input v-model="form.jwcode" type="text" placeholder="请输入精网号" style="width: 180px;" |
|
|
|
size="large" /> |
|
|
|
<el-select v-model="form.deptId" placeholder="选择分店门部" size="large" |
|
|
|
style="width: 180px; margin-left: 15px;" clearable @change="handleDeptSelect"> |
|
|
|
<el-option v-for="item in dept" :key="item.id" :label="item.deptName" |
|
|
|
:value="item.deptId" /> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<el-select v-model="form.shopId" placeholder="--请选择所属门店--" size="large" |
|
|
|
style="width: 180px; margin-left: 15px" clearable> |
|
|
|
<el-option v-for="item in shop" :key="item.id" :label="item.shopName" |
|
|
|
:value="item.shopId" /> |
|
|
|
</el-select> |
|
|
|
<el-button class="search-btn" type="primary" size="large" @click="searchData">搜索</el-button> |
|
|
|
<div class="export"> |
|
|
|
<el-button class="export-btn" type="primary" size="large">导出数据</el-button> |
|
|
|
<el-button class="export-btn" type="primary" size="large" |
|
|
|
@click="exportData">导出数据</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-table :data="workdetail" style="width: 100%"> |
|
|
|
<el-table :data="workdetailData" style="width: 100%"> |
|
|
|
<el-table-column label="序号"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ scope.$index + (PageNo - 1) * PageSize + 1 }} |
|
|
|
@ -41,8 +49,16 @@ |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="作业详情"> |
|
|
|
<template #default="scope"> |
|
|
|
<a class="look" @click="viewDetails(scope.row)">查看</a> |
|
|
|
<template v-slot="{ $index }"> |
|
|
|
<el-popover placement="bottom" title="详情" :width="600" trigger="click" |
|
|
|
:content="`${getContent($index).formTitle}${getContent($index).contentTitle}${getContent($index).content}`"> |
|
|
|
<template #reference> |
|
|
|
<el-button link type="primary">查看</el-button> |
|
|
|
</template> |
|
|
|
<div>{{ getContent($index).formTitle }}</div> |
|
|
|
<div>{{ getContent($index).contentTitle }}</div> |
|
|
|
<div>{{ getContent($index).content }}</div> |
|
|
|
</el-popover> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="submitTime" label="提交时间"> |
|
|
|
@ -64,99 +80,124 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { ref, onMounted } from 'vue' |
|
|
|
import { ref, onMounted, watch } from 'vue' |
|
|
|
import { useRoute } from 'vue-router'; |
|
|
|
import ClassListApi from '../api/ClassListApi'; |
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
import UpdateWorkApi from '../api/UpdateWorkApi'; |
|
|
|
|
|
|
|
const back = () => { |
|
|
|
window.history.back() |
|
|
|
} |
|
|
|
//获取门店列表 |
|
|
|
const shop = ref([]); |
|
|
|
// 处理部门选择变化的事件函数 |
|
|
|
const handleDeptSelect = async (val) => { |
|
|
|
console.log(val); |
|
|
|
const res = await UpdateWorkApi.getshopinfo(val); |
|
|
|
shop.value = res.data; |
|
|
|
console.log(shop.value); |
|
|
|
form.value.shopId = ""; |
|
|
|
}; |
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
|
const id = ref(route.params.id) |
|
|
|
console.log(id.value + '============') |
|
|
|
// 初始化页码，这里假设初始页码为1 |
|
|
|
const PageNo = ref(1); |
|
|
|
// 初始化页面大小，这里假设初始页面大小为10 |
|
|
|
const PageSize = ref(20); |
|
|
|
|
|
|
|
// 用于存储获取到的作业数据 |
|
|
|
const workdetail = ref < { |
|
|
|
total: number; |
|
|
|
jwcode: number; |
|
|
|
name: string; |
|
|
|
depId:string; |
|
|
|
depName: string; |
|
|
|
shopId: string; |
|
|
|
shopName: string; |
|
|
|
form: FormItemType[]; |
|
|
|
} > ({ |
|
|
|
name: '', |
|
|
|
startDate: '', |
|
|
|
endDate: '', |
|
|
|
clubType: '', |
|
|
|
article: { |
|
|
|
id: '', |
|
|
|
title: '', |
|
|
|
}, |
|
|
|
live: { |
|
|
|
id: '', |
|
|
|
name: '' |
|
|
|
}, |
|
|
|
form: [] |
|
|
|
// 处理页面大小改变的事件函数，将新的页面大小赋值给PageSize变量 |
|
|
|
const handleSizeChange = (newPageSize) => { |
|
|
|
PageSize.value = newPageSize; |
|
|
|
ClassListApi.getWorkDetail(id.value, PageNo.value, PageSize.value); |
|
|
|
}; |
|
|
|
|
|
|
|
// 处理当前页码改变的事件函数，将新的页码赋值给PageNo变量 |
|
|
|
const handleCurrentChange = (newPageNo) => { |
|
|
|
PageNo.value = newPageNo; |
|
|
|
ClassListApi.getWorkDetail(id.value, PageNo.value, PageSize.value); |
|
|
|
}; |
|
|
|
|
|
|
|
const form = ref({ |
|
|
|
jwcode: "", |
|
|
|
deptId: "", |
|
|
|
shopId: "", |
|
|
|
}); |
|
|
|
|
|
|
|
// 定义form数组中每个元素的类型接口 |
|
|
|
interface FormItemType { |
|
|
|
id: number; |
|
|
|
type: number; |
|
|
|
description: string; |
|
|
|
content: string; // 这里先定义为string，因为从数据看是JSON字符串格式，后续需要解析 |
|
|
|
groupId: number; |
|
|
|
name: string; |
|
|
|
sort: number; |
|
|
|
status: number; |
|
|
|
createdAt: string; |
|
|
|
updatedAt: string; |
|
|
|
//导出数据 |
|
|
|
const exportData = async () => { |
|
|
|
try { |
|
|
|
const params = { |
|
|
|
...form.value, |
|
|
|
id: id.value |
|
|
|
}; |
|
|
|
UpdateWorkApi.excelexport(params); |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
ElMessage.error('导出失败'); |
|
|
|
console.error('导出失败', error); |
|
|
|
} |
|
|
|
} |
|
|
|
// 搜索方法 |
|
|
|
const searchData = async () => { |
|
|
|
try { |
|
|
|
const params = { |
|
|
|
...form.value |
|
|
|
}; |
|
|
|
const res = await UpdateWorkApi.getrecordbycondition(params); |
|
|
|
console.log('搜索结果:', res); |
|
|
|
workdetailData.value = res.data; |
|
|
|
} catch (error) { |
|
|
|
console.error('搜索失败', error); |
|
|
|
} |
|
|
|
form.value.jwcode = ""; |
|
|
|
form.value.deptId = ""; |
|
|
|
form.value.shopId = ""; |
|
|
|
} |
|
|
|
//获取门部列表 |
|
|
|
const dept = ref([]); |
|
|
|
const getDept = async () => { |
|
|
|
try { |
|
|
|
const res = await UpdateWorkApi.getdeptinfo(); |
|
|
|
dept.value = res.data; |
|
|
|
console.log(dept.value); |
|
|
|
} catch (error) { |
|
|
|
console.error('获取分部失败', error); |
|
|
|
} |
|
|
|
}; |
|
|
|
getDept(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
|
const id = ref(route.params.id) |
|
|
|
console.log(id.value + '============') |
|
|
|
|
|
|
|
const workdetailData = ref([]); |
|
|
|
onMounted(async () => { |
|
|
|
try { |
|
|
|
const response = await ClassListApi.getWorkDetail(id.value, PageNo.value, PageSize.value); |
|
|
|
workdetail.value = response.data; |
|
|
|
console.log(workdetail.value) |
|
|
|
workdetailData.value = response.data; |
|
|
|
console.log(workdetailData.value); |
|
|
|
} catch (error) { |
|
|
|
console.error('接口请求出现错误:', error); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
//搜索条件 |
|
|
|
const searchCriteria = ref({ |
|
|
|
jwcode: '', |
|
|
|
deptName: '', |
|
|
|
shopName: '' |
|
|
|
}); |
|
|
|
|
|
|
|
// 初始化页码，这里假设初始页码为1，你可以根据实际需求修改 |
|
|
|
const PageNo = ref(1); |
|
|
|
// 初始化页面大小，这里假设初始页面大小为10，同样可按需修改 |
|
|
|
const PageSize = ref(20); |
|
|
|
|
|
|
|
|
|
|
|
// 搜索方法 |
|
|
|
// const searchData = () => { |
|
|
|
// filteredData.value = data.filter(item => { |
|
|
|
// return ( |
|
|
|
// item.jwcode.includes(searchCriteria.value.netNumber) && |
|
|
|
// //item.department.includes(searchCriteria.value.department) && |
|
|
|
// item.store.includes(searchCriteria.value.store) |
|
|
|
// ); |
|
|
|
// }); |
|
|
|
// pagination.value.page = 1; |
|
|
|
// }; |
|
|
|
|
|
|
|
// 查看详情方法（这里只是一个示例，实际可能需要路由跳转等操作） |
|
|
|
const viewDetails = (item) => { |
|
|
|
console.log('查看详情', item); |
|
|
|
const getContent = (index) => { |
|
|
|
if (workdetailData.value && workdetailData.value[index] && workdetailData.value[index].Reply) { |
|
|
|
const reply = workdetailData.value[index].Reply[0]; |
|
|
|
return { |
|
|
|
formTitle: reply.formTitle, |
|
|
|
contentTitle: reply.contentTitle, |
|
|
|
content: reply.content |
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
return { |
|
|
|
formTitle: '', |
|
|
|
contentTitle: '', |
|
|
|
content: '' |
|
|
|
}; |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
zhaowenkang
11 months ago