备课-手机端响应式优化

This commit is contained in:
zhanglipeng
2020-11-23 17:04:07 +08:00
parent 2b20e74930
commit 0f38388fcb
21 changed files with 2257 additions and 1495 deletions

View File

@ -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>