379 lines
10 KiB
Vue
379 lines
10 KiB
Vue
<template>
|
||
<div class="table-container" ref="printMe">
|
||
<h2 class="title">{{title}}</h2>
|
||
<div class="table">
|
||
<div class="print no-print">
|
||
<el-button type="primary" plain size="mini" icon="el-icon-printer" @click="prints"></el-button>
|
||
</div>
|
||
<table>
|
||
<tr class="align-center">
|
||
<!-- <td v-for="h in headerData" :key="h.title">
|
||
<b class="table-title">{{h.title}}</b>
|
||
{{h.name}}
|
||
</td>-->
|
||
<td class="w140">
|
||
<b class="table-title">班级：</b>
|
||
{{classname}}
|
||
</td>
|
||
<td>
|
||
<b class="table-title">月份：</b>
|
||
{{month}}
|
||
</td>
|
||
<td>
|
||
<b class="table-title">周次：</b>
|
||
第{{zc}}周
|
||
</td>
|
||
<td colspan="3">
|
||
<b class="table-title">月主题：</b>
|
||
{{monththeme}}
|
||
</td>
|
||
</tr>
|
||
<tr v-for="item in weekplanitemList" :key="item.daytime">
|
||
<td v-if="item.theme" :rowspan="bodyData.weekplanitemList.length" class="align-center">
|
||
<span>{{item.theme}}</span>
|
||
</td>
|
||
<td class="align-center">{{item.daytime}} / 星期{{item.zhou}}</td>
|
||
<td colspan="4">{{item.jzzc}}</td>
|
||
</tr>
|
||
<tr class="align-center table-bg">
|
||
<td v-for="h in bodyData.title" :key="h.prop">
|
||
<b>{{h.label}}</b>
|
||
</td>
|
||
</tr>
|
||
<tr v-for="item in bodyData.weekplanitemList" :key="item.daytime">
|
||
<td v-if="item.theme" :rowspan="bodyData.weekplanitemList.length" class="align-center">
|
||
<span>{{item.theme}}</span>
|
||
</td>
|
||
<td class="align-center">{{item.daytime}} / 星期{{item.zhou}}</td>
|
||
<td>{{themeactivityFormat(item.activityid)}}</td>
|
||
<td class="align-center">{{fzxzFormat(item.fzxz)}}</td>
|
||
<td>{{item.jzzc}}</td>
|
||
<td>{{item.jzzc}}</td>
|
||
</tr>
|
||
</table>
|
||
<!-- <p
|
||
class="warning"
|
||
>注：此周计划表不需要发给家长，只需上报教学主管。制定班级一周教学与活动计划表，请使用班级管理模块中“教学与游戏活动周计划表”，以上报教学主管和作为周计划通知发给家长。</p>-->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listWeekplanitem,
|
||
getWeekplanitem,
|
||
} from "@/api/benyi/themeweekplanitem";
|
||
|
||
import { listWeekplan, getWeekplan } from "@/api/benyi/themeweekplan";
|
||
import { listActivityByThemeId } from "@/api/benyi/activity";
|
||
import { listMonthplan } from "@/api/benyi/thememonthplan";
|
||
import { listMonthplanitem } from "@/api/benyi/thememonthplanitem";
|
||
import { listThemeByIds, listThemeByActivityIds } from "@/api/benyi/theme";
|
||
|
||
export default {
|
||
name: "PlayTable",
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
title: "教学与游戏活动周计划表",
|
||
zc: "",
|
||
month: "",
|
||
classname: "",
|
||
tbr: "",
|
||
monththeme: "",
|
||
bz: "",
|
||
spyj: "",
|
||
//根据活动id获取的theme名称
|
||
themenamebyactivityids: "",
|
||
//分组性质
|
||
fzxzOptions: [],
|
||
//主题活动
|
||
themeactivityOptions: [],
|
||
weekplanitemList: [],
|
||
bodyData: {
|
||
title: [
|
||
{
|
||
label: "活动",
|
||
prop: "theme",
|
||
},
|
||
{
|
||
label: "周一",
|
||
prop: "day",
|
||
},
|
||
{
|
||
label: "周二",
|
||
prop: "name",
|
||
},
|
||
{
|
||
label: "周三",
|
||
prop: "term",
|
||
},
|
||
{
|
||
label: "周四",
|
||
prop: "help",
|
||
},
|
||
{
|
||
label: "周五",
|
||
prop: "help",
|
||
},
|
||
],
|
||
weekplanitemList: [
|
||
{
|
||
theme: "春天的颜色",
|
||
},
|
||
// {
|
||
// day: "周二",
|
||
// name: "活动",
|
||
// term: "同质",
|
||
// },
|
||
// {
|
||
// day: "周三",
|
||
// name: "活动",
|
||
// term: "同质",
|
||
// },
|
||
// {
|
||
// day: "周四",
|
||
// name: "活动",
|
||
// term: "同质",
|
||
// },
|
||
// {
|
||
// day: "周五",
|
||
// name: "活动",
|
||
// term: "同质",
|
||
// },
|
||
],
|
||
},
|
||
// 查询参数
|
||
queryParams: {
|
||
wpid: undefined,
|
||
},
|
||
// 查询参数
|
||
queryParams_MonPlan: {
|
||
xnxq: undefined,
|
||
month: undefined,
|
||
status: "2",
|
||
},
|
||
queryParams_MonPlanItem: {
|
||
mpid: undefined,
|
||
zc: undefined,
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
const themeweekplanid = this.$route.params && this.$route.params.id;
|
||
this.getThemeWeekPlan(themeweekplanid);
|
||
this.getDicts("sys_dm_fzxz").then((response) => {
|
||
this.fzxzOptions = response.data;
|
||
});
|
||
},
|
||
methods: {
|
||
//主题翻译
|
||
async themeFormat(themeids) {
|
||
var themename = "";
|
||
var ids = themeids.split(";");
|
||
var array = [];
|
||
//console.log(ids);
|
||
ids.forEach(function (value, key, arr) {
|
||
//console.log(value); // 结果依次为1，2，3
|
||
if (value != "") {
|
||
array.push(parseInt(value));
|
||
}
|
||
});
|
||
|
||
if (array.length > 0) {
|
||
await listThemeByIds(array).then((response) => {
|
||
response.rows.forEach(function (value1, key1, arr1) {
|
||
themename = themename + value1.name + ";";
|
||
});
|
||
});
|
||
//(themename);
|
||
this.monththeme = themename;
|
||
}
|
||
},
|
||
// 主题--字典状态字典翻译
|
||
themeactivityFormat(activityid) {
|
||
if (activityid != null) {
|
||
var ilength = activityid.split(";").length - 1;
|
||
var names = "";
|
||
for (var i = 1; i < ilength; i++) {
|
||
names =
|
||
names +
|
||
this.selectMoeDictLabel(
|
||
this.themeactivityOptions,
|
||
activityid.split(";")[i]
|
||
) +
|
||
"；";
|
||
}
|
||
//this.selectDictLabel(this.scopeOptions, row.xnxq);
|
||
return names;
|
||
}
|
||
return "";
|
||
},
|
||
// 分组性质类型--字典状态字典翻译
|
||
fzxzFormat(fzxz) {
|
||
return this.selectDictLabel(this.fzxzOptions, fzxz);
|
||
},
|
||
//主题活动
|
||
getThemeActivityList(themeid) {
|
||
listActivityByThemeId(themeid).then((response) => {
|
||
//console.log(response.rows);
|
||
this.themeactivityOptions = response.rows;
|
||
});
|
||
},
|
||
//获取周教学计划详情
|
||
getThemeWeekPlan(themeweekplanid) {
|
||
getWeekplan(themeweekplanid).then((response) => {
|
||
//(response);
|
||
this.queryParams.wpid = response.data.id;
|
||
this.title = response.data.name;
|
||
this.zc = response.data.zc;
|
||
this.month = response.data.month;
|
||
this.classname = response.classname;
|
||
this.tbr = response.createusername;
|
||
this.bz = response.data.remark;
|
||
this.spyj = response.data.shyj;
|
||
|
||
//查找活动id
|
||
this.queryParams_MonPlan.month = response.data.month;
|
||
this.queryParams_MonPlan.xnxq = response.data.xnxq;
|
||
listMonthplan(this.queryParams_MonPlan).then((resMonPlan) => {
|
||
//console.log(resMonPlan.rows);
|
||
//获取的月主题
|
||
var monththemeids = resMonPlan.rows[0].themes;
|
||
|
||
this.themeFormat(monththemeids);
|
||
|
||
this.queryParams_MonPlanItem.mpid = resMonPlan.rows[0].id;
|
||
this.queryParams_MonPlanItem.zc = response.data.zc;
|
||
listMonthplanitem(this.queryParams_MonPlanItem).then(
|
||
(resMonPlanItem) => {
|
||
//console.log(resMonPlanItem.rows);
|
||
var activityids = resMonPlanItem.rows[0].activityid.split(";");
|
||
var array = [];
|
||
//console.log(arr);
|
||
activityids.forEach(function (value, key, arr) {
|
||
//console.log(value); // 结果依次为1，2，3
|
||
if (value != "") {
|
||
array.push(parseInt(value));
|
||
}
|
||
});
|
||
this.getThemeActivityList(array);
|
||
}
|
||
);
|
||
});
|
||
|
||
this.getList();
|
||
});
|
||
},
|
||
/** 查询主题整合周计划明细列表 */
|
||
async getList() {
|
||
//console.log(this.queryParams.wpid);
|
||
await listWeekplanitem(this.queryParams).then((response) => {
|
||
this.bodyData.weekplanitemList = response.rows;
|
||
|
||
//获取所有的活动id
|
||
var activityIds = "";
|
||
response.rows.forEach(function (value, key, arr) {
|
||
if (value.activityid != null) {
|
||
activityIds = activityIds + value.activityid + ";";
|
||
}
|
||
});
|
||
var array = [];
|
||
activityIds.split(";").forEach(function (value, key, arr) {
|
||
if (value != "") {
|
||
array.push(parseInt(value));
|
||
}
|
||
});
|
||
//获取所有的活动id截止
|
||
this.getThemeByActivityIds(array);
|
||
});
|
||
},
|
||
//根据活动id获取theme列表
|
||
async getThemeByActivityIds(array) {
|
||
if (array.length > 0) {
|
||
var themename = "";
|
||
await listThemeByActivityIds(array).then((response) => {
|
||
response.rows.forEach(function (value, key, arr) {
|
||
themename = themename + value.name + ";";
|
||
});
|
||
});
|
||
//console.log(themename);
|
||
this.themenamebyactivityids = themename;
|
||
}
|
||
|
||
this.bodyData.weekplanitemList[0].theme =
|
||
this.themenamebyactivityids == ""
|
||
? "未设置"
|
||
: this.themenamebyactivityids;
|
||
},
|
||
prints() {
|
||
//console.log(this.$refs.printMe);
|
||
this.$print(this.$refs.printMe);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.table-container {
|
||
padding: 30px 10%;
|
||
.w140 {
|
||
width: 140px;
|
||
}
|
||
.w200 {
|
||
width: 200px;
|
||
}
|
||
.title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
padding: 15px 0;
|
||
}
|
||
.align-center {
|
||
text-align: center;
|
||
}
|
||
.table {
|
||
font-size: 14px;
|
||
.print {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-bottom: 10px;
|
||
}
|
||
p {
|
||
margin: 0;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
table td {
|
||
border: #ccc solid 1px;
|
||
line-height: 24px;
|
||
padding: 8px 5px;
|
||
}
|
||
.table-title {
|
||
font-size: 16px;
|
||
}
|
||
.table-bg {
|
||
background: #f8f8f8;
|
||
}
|
||
}
|
||
.warning {
|
||
padding-top: 20px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
}
|
||
@media print {
|
||
.table-container {
|
||
padding: 30px 0;
|
||
}
|
||
.print {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
/*去除页眉页脚*/
|
||
@page {
|
||
size: auto; /* auto is the initial value */
|
||
margin: 3mm; /* this affects the margin in the printer settings */
|
||
}
|
||
</style> |