Skip to content

C
confucius
Commit 2d7d0c82 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 011f22db
Hide whitespace changes
Inline Side-by-side
Showing with 470 additions and 95 deletions
src/api/course/index.js
View file @ 2d7d0c82
......@@ -76,13 +76,12 @@ export function queryCoursePage(data) {
* 获取课程下拉列表
* @param {JSON对象} data
*/
export function queryCourseDropdownList(data)
{
return request({
url: '/Course/GetCourseList',
method: 'post',
data
})
export function queryCourseDropdownList(data) {
return request({
url: '/Course/GetCourseList',
method: 'post',
data
})
}
/**
......@@ -184,11 +183,22 @@ export function saveTeachPlanInfo(data) {
* 删除课程教案
* @param {JSON参数} data
*/
export function removeTeachPlanInfo(data)
{
return request({
url: "/Course/RemoveTeachPlan",
method: 'post',
data
})
export function removeTeachPlanInfo(data) {
return request({
url: "/Course/RemoveTeachPlan",
method: 'post',
data
})
}
/**
* 获取课程章节树形列表
* @param {JSON参数} data
*/
export function queryChapterTree(data) {
return request({
url: "/Course/GetChapterTree",
method: 'post',
data
})
}
src/components/common/select-tree.vue
View file @ 2d7d0c82
<template>
<q-card style="width: 360px;">
<q-input ref="selectTree" standout="bg-primary text-white" v-model="showMsg" :label="tipText"
@click.native="isShowSelect = !isShowSelect">
<template v-slot:append>
<q-btn round dense flat icon="search" />
<div style="max-width:300px">
<q-select filled v-model="resultObj" :options="selectList" clearable @clear="clearData()" :label="tipText"
:multiple="multiple" emit-value map-options>
<template v-slot:option="scope">
<q-item v-if="scope.index==0">
<q-item-section class="text-grey">
<q-tree :nodes="treeData" :node-key="nodeKey" :label-key="labelKey" :children-key="childrenKey"
tick-strategy="strict" :default-expand-all="defaultExpandAll" no-connectors
:ticked.sync="chooseTreeNodeArray">
</q-tree>
</q-item-section>
</q-item>
</template>
</q-input>
<q-card style="width:100%;position:absolute;z-index:100;background:#fff;border:1px solid rgba(0, 0, 0, 0.12);">
<q-btn-group push v-if="isShowSelect" :spread="true">
<q-btn v-if="multiple" push label="全选" @click="checkAll()" />
<q-btn push label="清空" @click="clearMsg()" />
<q-btn push label="确认" @click="getCheckValue()" />
<q-btn push label="关闭" @click="isShowSelect=false" />
</q-btn-group>
<q-tree style="height:250px;overflow-y: scroll;" v-if="isShowSelect" :nodes="treeData" :node-key="nodeKey"
:label-key="labelKey" :children-key="childrenKey" tick-strategy="strict" :default-expand-all="defaultExpandAll"
no-connectors :ticked.sync="chooseArray">
</q-tree>
</q-card>
</q-card>
</q-select>
</div>
</template>
<script>
export default {
......@@ -66,31 +61,23 @@
},
data() {
return {
//是否显示树状选择器
isShowSelect: false,
selectList: [],
defaultProps: {
children: 'children',
label: 'label'
},
showMsg: "",
chooseArray: [],
resultObj: "",
//下拉框列表
selectList: [{
value: "",
label: ""
}],
//节点选择列表
chooseTreeNodeArray: [],
//下拉框选择列表
resultObj: [],
}
},
watch: {
isShowSelect(val) {
//隐藏select自带的下拉框
this.$refs.selectTree.blur();
if (val) {
// 下拉面板展开-选中节点-展开节点
this.setTreeCheckNode();
}
},
chooseArray(val) {
if (!this.multiple && this.chooseArray && this.chooseArray.length > 1) {
var lastItem = this.chooseArray[this.chooseArray.length - 1];
this.chooseArray = [lastItem];
//Tree节点选中或取消选中
chooseTreeNodeArray(val) {
if (!this.multiple && this.chooseTreeNodeArray && this.chooseTreeNodeArray.length > 1) {
var lastItem = this.chooseTreeNodeArray[this.chooseTreeNodeArray.length - 1];
this.chooseTreeNodeArray = [lastItem];
}
this.setTreeCheckNode()
},
......@@ -100,9 +87,9 @@
this.defaultArray.forEach(item => {
if (item != '') {
if (this.multiple) {
this.chooseArray.push(item)
this.chooseTreeNodeArray.push(item)
} else {
this.chooseArray = [item];
this.chooseTreeNodeArray = [item];
}
}
})
......@@ -110,62 +97,50 @@
this.setTreeCheckNode();
},
immediate: true
},
resultObj(val) {
this.$emit('getChild', this.resultObj);
}
},
mounted() {},
methods: {
//全选
checkAll() {
var tempArray = [];
var nodes = this.findTreeNode(this.treeData);
if (nodes && nodes.length > 0) {
nodes.forEach(item => {
tempArray.push(item.value)
});
}
this.chooseArray = tempArray;
},
//清空选中
clearMsg() {
this.chooseArray = [];
},
//返回选中的值
getCheckValue() {
this.isShowSelect = false;
this.$emit('getChild', this.resultObj);
//清空数据
clearData() {
this.selectList = [{
value: "",
label: ""
}];
this.chooseTreeNodeArray = [];
this.resultObj = [];
},
//设置下拉框选择
setTreeCheckNode() {
var that = this;
this.selectList = [];
if (this.multiple) {
this.resultObj = [];
} else {
this.resultObj = "";
}
this.showMsg = "";
var tempStr = "";
this.resultObj = [];
var nodes = this.findTreeNode(this.treeData);
if (this.chooseArray && this.chooseArray.length > 0 && nodes && nodes.length > 0) {
this.chooseArray.forEach(id => {
if (this.chooseTreeNodeArray && this.chooseTreeNodeArray.length > 0 && nodes && nodes.length > 0) {
this.chooseTreeNodeArray.forEach(id => {
nodes.forEach((item, index) => {
if (item.value == id) {
this.selectList.push({
value: item.value,
label: item.label
});
tempStr += "," + item.label;
if (this.multiple) {
this.resultObj.push(item.value);
} else {
this.resultObj = item.value;
this.resultObj = [item.value];
}
}
})
})
if (tempStr && tempStr != '') {
this.showMsg = tempStr.substring(1, tempStr.length);
}
}
if (this.selectList && this.selectList.length == 0) {
this.selectList = [{
value: "",
label: ""
}];
}
},
//获取所有节点
......
src/components/common/select-tree_back.vue 0 → 100644
View file @ 2d7d0c82
<template>
<q-card style="width: 360px;">
<q-input ref="selectTree" standout="bg-primary text-white" v-model="showMsg" :label="tipText"
@click.native="isShowSelect = !isShowSelect">
<!-- <template v-slot:append>
<q-btn round dense flat icon="search" />
</template> -->
</q-input>
<q-card style="width:100%;position:absolute;z-index:100;background:#fff;border:1px solid rgba(0, 0, 0, 0.12);">
<q-btn-group push v-if="isShowSelect" :spread="true">
<q-btn v-if="multiple" push label="全选" @click="checkAll()" />
<q-btn push label="清空" @click="clearMsg()" />
<q-btn push label="确认" @click="getCheckValue()" />
<q-btn push label="关闭" @click="isShowSelect=false" />
</q-btn-group>
<q-tree style="height:250px;overflow-y: scroll;" v-if="isShowSelect" :nodes="treeData" :node-key="nodeKey"
:label-key="labelKey" :children-key="childrenKey" tick-strategy="strict" :default-expand-all="defaultExpandAll"
no-connectors :ticked.sync="chooseArray">
</q-tree>
</q-card>
</q-card>
</template>
<script>
export default {
props: {
//树形结构列表
treeData: {
type: Array,
required: true
},
//是否默认展开
defaultExpandAll: {
type: Boolean,
default: false
},
//是否多选
multiple: {
type: Boolean,
default: false
},
//默认选中值
defaultArray: {
type: Array,
required: true,
},
//节点Key
nodeKey: {
type: String,
default: 'id'
},
//节点名称
labelKey: {
type: String,
default: 'name'
},
//子节点名称
childrenKey: {
type: String,
default: 'children'
},
//下拉框提示信息
tipText: {
type: String,
default: '请选择'
}
},
data() {
return {
//是否显示树状选择器
isShowSelect: false,
selectList: [],
defaultProps: {
children: 'children',
label: 'label'
},
showMsg: "",
chooseArray: [],
resultObj: "",
}
},
watch: {
isShowSelect(val) {
//隐藏select自带的下拉框
this.$refs.selectTree.blur();
if (val) {
// 下拉面板展开-选中节点-展开节点
this.setTreeCheckNode();
}
},
chooseArray(val) {
if (!this.multiple && this.chooseArray && this.chooseArray.length > 1) {
var lastItem = this.chooseArray[this.chooseArray.length - 1];
this.chooseArray = [lastItem];
}
this.setTreeCheckNode()
},
defaultArray: {
handler(newValue) {
if (this.defaultArray && this.defaultArray.length > 0) {
this.defaultArray.forEach(item => {
if (item != '') {
if (this.multiple) {
this.chooseArray.push(item)
} else {
this.chooseArray = [item];
}
}
})
}
this.setTreeCheckNode();
},
immediate: true
}
},
mounted() {},
methods: {
//全选
checkAll() {
var tempArray = [];
var nodes = this.findTreeNode(this.treeData);
if (nodes && nodes.length > 0) {
nodes.forEach(item => {
tempArray.push(item.value)
});
}
this.chooseArray = tempArray;
},
//清空选中
clearMsg() {
this.chooseArray = [];
},
//返回选中的值
getCheckValue() {
this.isShowSelect = false;
this.$emit('getChild', this.resultObj);
},
//设置下拉框选择
setTreeCheckNode() {
var that = this;
this.selectList = [];
if (this.multiple) {
this.resultObj = [];
} else {
this.resultObj = "";
}
this.showMsg = "";
var tempStr = "";
var nodes = this.findTreeNode(this.treeData);
if (this.chooseArray && this.chooseArray.length > 0 && nodes && nodes.length > 0) {
this.chooseArray.forEach(id => {
nodes.forEach((item, index) => {
if (item.value == id) {
this.selectList.push({
value: item.value,
label: item.label
});
tempStr += "," + item.label;
if (this.multiple) {
this.resultObj.push(item.value);
} else {
this.resultObj = item.value;
}
}
})
})
if (tempStr && tempStr != '') {
this.showMsg = tempStr.substring(1, tempStr.length);
}
}
},
//获取所有节点
findTreeNode(tree) {
var temp = [];
var that = this;
//获取子节点
var getChildNodes = function (tree) {
if (tree && tree.length > 0) {
for (var i = 0; i < tree.length; i++) {
var item = tree[i];
temp.push({
label: tree[i][that.labelKey],
value: tree[i][that.nodeKey]
});
if (tree[i][that.childrenKey]) {
getChildNodes(tree[i][that.childrenKey]);
}
}
}
};
getChildNodes(tree);
return temp;
}
}
}
</script>
src/pages/course/chapter.vue 0 → 100644
View file @ 2d7d0c82
<template>
<div class="page-body">
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
</div>
<div class="page-option">
<q-btn-dropdown outline color="dark" label="添加教案">
<q-list>
<q-item clickable v-close-popup>
<q-item-section>
<q-item-label @click="EditTeachPlan(null)">编辑章节</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
<div class="page-content">
<div class="q-table-container q-table-dense">
<q-sortable-tree :nodes="data"
node-key="id"
label-key="name"
no-connectors
:default-expand-all="true"/>
<div class="q-table-middle scroll">
<table class="q-table">
<thead>
<tr class style="text-align: left;">
<th>目录</th>
<th>开发状态</th>
<th>进度</th>
</tr>
</thead>
<tbody>
<tr v-for="(item ,index) in (data)" :key="index"
v-bind:class="[(item.ChapterId != selectedRowID.ChapterId) ? 'my-label':'text-green bg-light-green-11','']">
<td data-th="Name" @click="toggle(item, index)">
<span class="q-tree-link q-tree-label" v-bind:style="setPadding(item)">
<q-icon style="cursor: pointer;" :name="iconName(item)" color="secondary"></q-icon>
{{item.ChapterName}}
</span>
</td>
<td width="20%" data-th="Account">{{item.niif_account}} </td>
<td width="10%" data-th="Actions">
<q-btn dense flat color="blue" icon="add_circle"></q-btn>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import {
queryChapterTree
} from '../../api/course/index'
export default {
meta: {
title: "教案管理"
},
components: {
},
computed: {
arrayTreeObj() {
let vm = this;
var newObj = [];
vm.recursive(vm.table, newObj, 0, vm.itemId, vm.isExpanded);
return newObj;
}
},
watch: {
selectedIDRow: function (val) {
if (this.selectedRowID != null) {
this.$set(this.selectedRowID, "id", val);
}
}
},
data() {
return {
currentUrl: "",
selectedRowID: {},
data: [],
loading: true,
msg: {
CourseId: 0,
},
CourseId: 0,
}
},
created() {
if (this.$route.query.CourseId) {
this.CourseId = this.$route.query.CourseId
this.msg.CourseId = this.CourseId;
}
},
mounted() {
this.currentUrl = this.$route.path
this.getchaperTree();
},
methods: {
recursive(obj, newObj, level, itemId, isExpend) {
let vm = this;
obj.forEach(function (o) {
if (o.ChildList && o.ChildList.length != 0) {
o.level = level;
o.leaf = false;
newObj.push(o);
if (o.ChapterId == itemId) {
o.expend = isExpend;
}
if (o.expend == true) {
vm.recursive(o.ChildList, newObj, o.level + 1, itemId, isExpend);
}
} else {
o.level = level;
o.leaf = true;
newObj.push(o);
return false;
}
});
},
iconName(item) {
if (item.expend == true) {
return "remove_circle_outline";
}
if (item.ChildList && item.ChildList.length > 0) {
return "control_point";
}
return "done";
},
toggle(item, index) {
let vm = this;
vm.itemId = item.id;
item.leaf = false;
//show sub items after click on + (more)
if (
item.leaf == false &&
item.expend == undefined &&
item.ChildList != undefined
) {
if (item.ChildList.length != 0) {
vm.recursive(item.ChildList, [], item.level + 1, item.id, true);
}
}
if (item.expend == true && item.ChildList != undefined) {
var __subindex = 0;
item.ChildList.forEach(function (o) {
o.expend = undefined;
});
vm.$set(item, "expend", undefined);
vm.$set(item, "leaf", false);
vm.itemId = null;
}
},
setPadding(item) {
return `padding-left: ${item.level * 30}px;`;
},
//获取菜单分页列表
getchaperTree() {
this.loading = true;
queryChapterTree(this.msg).then(res => {
console.log("res", res);
this.loading = false
this.data = res.Data;
}).catch(() => {
this.loading = false
})
},
}
}
</script>
<style lang="sass">
@import url('~assets/css/table.sass');
</style>
src/pages/course/course.vue
View file @ 2d7d0c82
......@@ -46,15 +46,16 @@
</template>
<template v-slot:body-cell-optioned="props">
<q-td :props="props">
<!--to=""+0+""-->
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="教案"
@click="gotoTeach(props.row)"></q-btn>
@click="gotoSub(props.row,'teachplan')"></q-btn>
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="章节"
@click="gotoSub(props.row,'chapter')"></q-btn>
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
@click="EditCourse(props.row)" />
</q-td>
</template>
</q-table>
<course-form v-if="isShowCourseForm" :save-obj="courseObjOption" @close="closeMenuSaveForm"
<course-form v-if="isShowCourseForm" :save-obj="courseObjOption" @close="closeMenuSaveForm"
@success="refreshPage">
</course-form>
</div>
......@@ -171,8 +172,8 @@
this.getcourselist();
},
methods: {
gotoTeach(obj) {
var tempStr = '/course/teachplan?CourseId=' + obj.CourseId;
gotoSub(obj, routeStr) {
var tempStr = '/course/' + routeStr + '?CourseId=' + obj.CourseId;
this.$router.push({
path: tempStr
});
......
src/router/routes.js
View file @ 2d7d0c82
......@@ -72,6 +72,11 @@ const routes = [{
component: () =>
import("pages/course/teachplan.vue")
},
{
path: "/course/chapter", //章节管理
component: () =>
import("pages/course/chapter.vue")
},
{
path: "/test", //API测试
component: () =>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment