备课-手机端响应式优化

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,79 +1,101 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-form-item label="学期计划" prop="tpid">
<el-select v-model="queryParams.tpid" size="small">
<el-option
v-for="item in themePlanOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="主题内容" prop="themeconent">
<el-select v-model="queryParams.themeconent" 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>
<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="tpid">
<el-select v-model="queryParams.tpid" size="small">
<el-option
v-for="item in themePlanOptions"
: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="themeconent">
<el-select v-model="queryParams.themeconent" 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="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>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['benyi:themetermplan:add']"
v-show="isShow"
>新增</el-button>
</el-col> -->
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['benyi:themetermplan:edit']"
v-show="isShow"
>填充</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['benyi:themetermplan:remove']"
v-show="isShow"
>删除</el-button>
</el-col>
</el-row>
<div class="mb8 btn-list">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['benyi:themetermplan:edit']"
v-show="isShow"
>填充</el-button
>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['benyi:themetermplan:remove']"
v-show="isShow"
>删除</el-button
>
</div>
<el-table
border
v-loading="loading"
:data="termplanitemList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="编号" align="center" prop="id" /> -->
<el-table-column label="学期计划" align="center" prop="tpid" :formatter="themePlanFormat" />
<el-table-column
fixed
label="主题内容"
align="center"
prop="themeconent"
:formatter="themeFormat"
/>
<el-table-column
label="学期计划"
align="center"
prop="tpid"
:formatter="themePlanFormat"
/>
<el-table-column label="月份" align="center" prop="month" />
<el-table-column label="主题内容" align="center" prop="themeconent" :formatter="themeFormat" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
fixed="right"
align="center"
width="60"
class-name="small-padding fixed-width edit-btns"
>
<template slot-scope="scope">
<el-button
size="mini"
@ -82,7 +104,8 @@
@click="handleUpdate(scope.row)"
v-hasPermi="['benyi:themetermplan:edit']"
v-show="isShow"
>填充</el-button>
>填充</el-button
>
<el-button
size="mini"
type="text"
@ -90,13 +113,14 @@
@click="handleDelete(scope.row)"
v-hasPermi="['benyi:themetermplan:remove']"
v-show="isShow"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@ -104,7 +128,12 @@
/>
<!-- 添加或修改主题整合学期计划明细对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" 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="tpid">
<el-select v-model="form.tpid" size="small" :disabled="true">
@ -118,20 +147,35 @@
</el-form-item>
<el-form-item label="月份" prop="month">
<el-date-picker
class="my-date-picker"
v-model="form.month"
type="month"
placeholder="请选择月"
value-format="yyyy-MM"
:disabled="true"
></el-date-picker>
</el-form-item>
<el-form-item label="选择主题" prop="themeconent">
<el-checkbox-group v-model="themeList" :max="max" @change="getThemeconentValue">
<el-checkbox v-for="(item,i) in themeOptions" :label="item.id" :key="i">{{item.name}}</el-checkbox>
<el-checkbox-group
v-model="themeList"
:max="max"
@change="getThemeconentValue"
>
<el-checkbox
v-for="(item, i) in themeOptions"
:label="item.id"
:key="i"
>{{ item.name }}</el-checkbox
>
</el-checkbox-group>
<el-input v-model="form.themeconent" v-if="false" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入备注"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -192,13 +236,13 @@ export default {
tpid: undefined,
themeconent: undefined,
createuserid: undefined,
updateuserid: undefined
updateuserid: undefined,
},
queryParams_class: {
bjbh: undefined
bjbh: undefined,
},
queryParams_classtype: {
classid: undefined
classid: undefined,
},
// 表单参数
form: {},
@ -217,8 +261,6 @@ export default {
this.getThemePlan(themeplanid);
this.getThemePlanList();
this.getClassType();
},
methods: {
// 主题--字典状态字典翻译
@ -251,7 +293,7 @@ export default {
});
this.form.themeconent = text;
},
// 字典翻译
themePlanFormat(row, column) {
// return this.selectDictLabel(this.classOptions, row.classid);
@ -322,7 +364,7 @@ export default {
createuserid: undefined,
month: undefined,
updateuserid: undefined,
updateTime: undefined
updateTime: undefined,
};
this.resetForm("form");
this.themeList = [];
@ -419,3 +461,20 @@ export default {
},
};
</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>

View File

@ -1,98 +1,171 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-form-item label="班级编码" prop="classid">
<el-select v-model="queryParams.classid" placeholder="请选择班级">
<el-option
v-for="dict in classOptions"
:key="dict.bjbh"
:label="dict.bjmc"
:value="dict.bjbh"
></el-option>
</el-select>
</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="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="classid">
<el-select v-model="queryParams.classid" placeholder="请选择班级">
<el-option
v-for="dict in classOptions"
:key="dict.bjbh"
:label="dict.bjmc"
:value="dict.bjbh"
></el-option>
</el-select>
</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="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>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['benyi:themetermplan:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['benyi:themetermplan:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['benyi:themetermplan:remove']"
>删除</el-button>
</el-col>
</el-row>
<div class="mb8 btn-list">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['benyi:themetermplan:add']"
>新增</el-button
>
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['benyi:themetermplan:edit']"
>修改</el-button
>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['benyi:themetermplan:remove']"
>删除</el-button
>
</div>
<el-table v-loading="loading" :data="termplanList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" :selectable="isShow" />
<el-table-column label="班级名称" align="center" prop="classid" :formatter="classFormat" />
<el-table-column label="计划名称" align="center" prop="name" :show-overflow-tooltip="true">
<el-table
border
v-loading="loading"
:data="termplanList"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
:selectable="isShow"
/>
<el-table-column
fixed
label="计划名称"
align="center"
prop="name"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<router-link :to="'/benyi_course/themetermplan/data/' + scope.row.id" class="link-type">
<router-link
:to="'/benyi_course/themetermplan/data/' + scope.row.id"
class="link-type"
>
<span>{{ scope.row.name }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column label="开始月份" align="center" prop="startmonth" width="180">
<el-table-column
label="班级名称"
align="center"
prop="classid"
:formatter="classFormat"
/>
<el-table-column
label="开始月份"
align="center"
prop="startmonth"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.startmonth, '{y}-{m}') }}</span>
<span>{{ parseTime(scope.row.startmonth, "{y}-{m}") }}</span>
</template>
</el-table-column>
<el-table-column label="结束月份" align="center" prop="endmonth" width="180">
<el-table-column
label="结束月份"
align="center"
prop="endmonth"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.endmonth, '{y}-{m}') }}</span>
<span>{{ parseTime(scope.row.endmonth, "{y}-{m}") }}</span>
</template>
</el-table-column>
<el-table-column label="学年学期" align="center" prop="xnxq" :formatter="xnxqFormat" />
<el-table-column
label="学年学期"
align="center"
prop="xnxq"
:formatter="xnxqFormat"
/>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="状态"
align="center"
prop="status"
:formatter="statusFormat"
/>
<el-table-column
label="操作"
fixed="right"
align="center"
width="60"
class-name="small-padding fixed-width edit-btns"
>
<template slot-scope="scope">
<el-button
size="mini"
@ -101,7 +174,8 @@
@click="handleUpdate(scope.row)"
v-hasPermi="['benyi:themetermplan:edit']"
v-show="isShow(scope.row)"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
@ -109,7 +183,8 @@
@click="handleDelete(scope.row)"
v-hasPermi="['benyi:themetermplan:remove']"
v-show="isShow(scope.row)"
>删除</el-button>
>删除</el-button
>
<el-button
size="mini"
type="text"
@ -117,20 +192,22 @@
@click="handleCheck(scope.row)"
v-hasPermi="['benyi:themetermplan:edit']"
v-show="isShow(scope.row)"
>提交</el-button>
>提交</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleView(scope.row)"
v-hasPermi="['benyi:themetermplan:query']"
>预览</el-button>
>预览</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@ -138,10 +215,11 @@
/>
<!-- 添加或修改主题整合学期计划对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" 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="startmonth">
<el-form-item label="选择月份" prop="startmonth">
<el-date-picker
class="my-date-picker"
v-model="form.startmonth"
type="monthrange"
range-separator=""
@ -161,7 +239,11 @@
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入备注"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -421,9 +503,26 @@ export default {
handleView(row) {
const id = row.id;
this.$router.push({
path: "/benyi_course/themetermplanprint/table/"+id,
path: "/benyi_course/themetermplanprint/table/" + id,
});
},
},
};
</script>
</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>

View File

@ -132,7 +132,7 @@ export default {
//获取教学学期计划
getThemeTermPlan(themetermplanid) {
getTermplan(themetermplanid).then((response) => {
console.log(response.data);
// console.log(response.data);
this.title = response.data.name;
this.tbr = response.createusername;
this.classname = response.classname;
@ -144,7 +144,7 @@ export default {
//获取学期月份详细计划
getThemeTermItemPlan() {
listTermplanitem(this.queryParams).then((response) => {
console.log(response.rows);
// console.log(response.rows);
this.bodyData.termplanitemList = response.rows;
});
},