备课-手机端响应式优化
This commit is contained in:
@ -1,82 +1,92 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="计划名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入计划名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="学年学期" prop="xnxq">
|
||||
<el-select
|
||||
v-model="queryParams.xnxq"
|
||||
placeholder="请选择学年学期"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in xnxqOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属月份" prop="month">
|
||||
<el-date-picker
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 200px"
|
||||
v-model="queryParams.month"
|
||||
type="month"
|
||||
value-format="yyyy-MM"
|
||||
placeholder="选择所属月份"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属周次" prop="zc">
|
||||
<el-input-number
|
||||
v-model="queryParams.zc"
|
||||
placeholder="周次"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form :model="queryParams" ref="queryForm" label-width="70px">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :ms="12" :md="5">
|
||||
<el-form-item label="计划名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入计划名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :ms="12" :md="5">
|
||||
<el-form-item label="学年学期" prop="xnxq">
|
||||
<el-select
|
||||
v-model="queryParams.xnxq"
|
||||
placeholder="请选择学年学期"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in xnxqOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :ms="12" :md="5">
|
||||
<el-form-item label="所属月份" prop="month">
|
||||
<el-date-picker
|
||||
clearable
|
||||
size="small"
|
||||
class="my-date-picker"
|
||||
v-model="queryParams.month"
|
||||
type="month"
|
||||
value-format="yyyy-MM"
|
||||
placeholder="选择所属月份"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :ms="12" :md="5">
|
||||
<el-form-item label="所属周次" prop="zc">
|
||||
<el-input-number
|
||||
class="my-date-picker"
|
||||
v-model="queryParams.zc"
|
||||
placeholder="周次"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :ms="12" :md="5">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :ms="12" :md="4">
|
||||
<el-form-item class="no-margin">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div class="mb8 btn-list">
|
||||
@ -92,6 +102,7 @@
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
border
|
||||
v-loading="loading"
|
||||
:data="weekplanList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@ -104,6 +115,7 @@
|
||||
/>
|
||||
<!-- <el-table-column label="编号" align="center" prop="id" /> -->
|
||||
<el-table-column
|
||||
fixed
|
||||
label="计划名称"
|
||||
align="center"
|
||||
prop="name"
|
||||
@ -124,7 +136,7 @@
|
||||
prop="classid"
|
||||
:formatter="classFormat"
|
||||
/>
|
||||
<el-table-column label="所属月份" align="center" prop="month" width="180">
|
||||
<el-table-column label="所属月份" align="center" prop="month">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.month, "{y}-{m}") }}</span>
|
||||
</template>
|
||||
@ -146,7 +158,9 @@
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
fixed="right"
|
||||
width="60"
|
||||
class-name="small-padding fixed-width edit-btns"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@ -179,7 +193,12 @@
|
||||
/>
|
||||
|
||||
<!-- 添加或修改主题整合周计划(根据月计划明细)对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" class="v-dialog" append-to-body>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
class="v-dialog"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="学年学期" prop="xnxq">
|
||||
<el-select
|
||||
@ -199,7 +218,7 @@
|
||||
<el-date-picker
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 200px"
|
||||
class="my-date-picker"
|
||||
v-model="form.month"
|
||||
type="month"
|
||||
value-format="yyyy-MM"
|
||||
@ -209,6 +228,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="所属周次" prop="zc">
|
||||
<el-input-number
|
||||
class="my-date-picker"
|
||||
v-model="form.zc"
|
||||
placeholder="周次"
|
||||
:disabled="disable"
|
||||
@ -248,7 +268,7 @@
|
||||
import {
|
||||
listWeekplan,
|
||||
getWeekplan,
|
||||
updateWeekplan
|
||||
updateWeekplan,
|
||||
} from "@/api/benyi/themeweekplan";
|
||||
import { listClass } from "@/api/system/class";
|
||||
|
||||
@ -293,25 +313,25 @@ export default {
|
||||
sptime: undefined,
|
||||
shyj: undefined,
|
||||
createuserid: undefined,
|
||||
xnxq: undefined
|
||||
xnxq: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
status: [
|
||||
{ required: true, message: "审批意见不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
{ required: true, message: "审批意见不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getClassList();
|
||||
this.getDicts("sys_xnxq").then(response => {
|
||||
this.getDicts("sys_xnxq").then((response) => {
|
||||
this.xnxqOptions = response.data;
|
||||
});
|
||||
this.getDicts("sys_dm_planweekstatus").then(response => {
|
||||
this.getDicts("sys_dm_planweekstatus").then((response) => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
},
|
||||
@ -325,7 +345,7 @@ export default {
|
||||
},
|
||||
//班级列表
|
||||
getClassList() {
|
||||
listClass(null).then(response => {
|
||||
listClass(null).then((response) => {
|
||||
this.classOptions = response.rows;
|
||||
});
|
||||
},
|
||||
@ -342,7 +362,7 @@ export default {
|
||||
// return this.selectDictLabel(this.classOptions, row.classid);
|
||||
var actions = [];
|
||||
var datas = this.classOptions;
|
||||
Object.keys(datas).map(key => {
|
||||
Object.keys(datas).map((key) => {
|
||||
if (datas[key].bjbh == "" + row.classid) {
|
||||
actions.push(datas[key].bjmc);
|
||||
return false;
|
||||
@ -353,7 +373,7 @@ export default {
|
||||
/** 查询主题整合周计划(根据月计划明细)列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listWeekplan(this.queryParams).then(response => {
|
||||
listWeekplan(this.queryParams).then((response) => {
|
||||
this.weekplanList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
@ -380,7 +400,7 @@ export default {
|
||||
shyj: undefined,
|
||||
createuserid: undefined,
|
||||
createTime: undefined,
|
||||
xnxq: undefined
|
||||
xnxq: undefined,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
@ -396,7 +416,7 @@ export default {
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id);
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length != 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
@ -404,7 +424,7 @@ export default {
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids;
|
||||
getWeekplan(id).then(response => {
|
||||
getWeekplan(id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "审批主题整合周计划";
|
||||
@ -412,11 +432,11 @@ export default {
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id != undefined) {
|
||||
updateWeekplan(this.form).then(response => {
|
||||
updateWeekplan(this.form).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("审批成功");
|
||||
this.open = false;
|
||||
@ -431,9 +451,26 @@ export default {
|
||||
handleView(row) {
|
||||
const id = row.id;
|
||||
this.$router.push({
|
||||
path: "/benyi_course/themeweekplanprint/table/" + id
|
||||
path: "/benyi_course/themeweekplanprint/table/" + id,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.my-date-picker {
|
||||
width: 100%;
|
||||
}
|
||||
.edit-btns {
|
||||
.el-button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.no-margin ::v-deep.el-form-item__content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user