Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

备课-手机端响应式优化

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

241
ruoyi-ui/src/views/benyi/thememonthplanapproval/index.vue
View File

@ -1,83 +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="themes">
<el-select v-model="queryParams.themes" size="small">
<el-option
v-for="item in themeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</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="themes">
<el-select v-model="queryParams.themes" size="small">
<el-option
v-for="item in themeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</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">
@ -93,6 +102,7 @@
</div>
<el-table
border
v-loading="loading"
:data="monthplanList"
@selection-change="handleSelectionChange"
@ -104,6 +114,7 @@
:selectable="isShow"
/>
<el-table-column
fixed
label="计划名称"
align="center"
prop="name"
@ -130,7 +141,7 @@
prop="xnxq"
:formatter="xnxqFormat"
/>
<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>
@ -156,8 +167,10 @@
/>
<el-table-column
label="操作"
fixed="right"
width="60"
align="center"
class-name="small-padding fixed-width"
class-name="small-padding fixed-width edit-btns"
>
<template slot-scope="scope">
<el-button
@ -190,13 +203,18 @@
/>
<!-- 添加或修改主题整合月计划对话框 -->
<el-dialog :title="title" :visible.sync="open" class="big-dialog" append-to-body>
<el-dialog
:title="title"
:visible.sync="open"
class="big-dialog"
append-to-body
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="计划月份" prop="month">
<el-date-picker
clearable
size="small"
style="width: 200px"
class="my-date-picker"
v-model="form.month"
type="month"
value-format="yyyy-MM"
@ -255,7 +273,7 @@
import {
listMonthplan,
getMonthplan,
updateMonthplan
updateMonthplan,
} from "@/api/benyi/thememonthplan";
import Editor from "@/components/Editor";
import { listClass } from "@/api/system/class";
@ -264,7 +282,7 @@ import { listTheme } from "@/api/benyi/theme";
export default {
name: "Monthplan",
components: {
Editor
Editor,
},
data() {
return {
@ -311,26 +329,26 @@ export default {
spr: undefined,
sptime: undefined,
spyj: undefined,
status: "1"
status: "1",
},
// 表单参数
form: {},
// 表单校验
rules: {
status: [
{ required: true, message: "审批意见不能为空", trigger: "blur" }
]
}
{ required: true, message: "审批意见不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getClassList();
this.getThemeList();
this.getList();
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;
});
},
@ -367,7 +385,7 @@ export default {
},
//主题
getThemeList() {
listTheme(null).then(response => {
listTheme(null).then((response) => {
//console.log(response.rows);
this.themeOptions = response.rows;
});
@ -377,7 +395,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;
@ -391,14 +409,14 @@ export default {
},
//班级列表
getClassList() {
listClass(null).then(response => {
listClass(null).then((response) => {
this.classOptions = response.rows;
});
},
/** 查询主题整合月计划列表 */
getList() {
this.loading = true;
listMonthplan(this.queryParams).then(response => {
listMonthplan(this.queryParams).then((response) => {
this.monthplanList = response.rows;
this.total = response.total;
this.loading = false;
@ -428,7 +446,7 @@ export default {
spr: undefined,
sptime: undefined,
spyj: undefined,
status: "2"
status: "2",
};
this.resetForm("form");
},
@ -444,7 +462,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;
},
@ -452,7 +470,7 @@ export default {
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getMonthplan(id).then(response => {
getMonthplan(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "审批主题整合月计划";
@ -460,11 +478,11 @@ export default {
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != undefined) {
updateMonthplan(this.form).then(response => {
updateMonthplan(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("审批成功");
this.open = false;
@ -479,9 +497,26 @@ export default {
handleView(row) {
const id = row.id;
this.$router.push({
path: "/benyi_course/thememonthplanprint/table/" + id
path: "/benyi_course/thememonthplanprint/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>