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) { ...@@ -76,13 +76,12 @@ export function queryCoursePage(data) {
* 获取课程下拉列表 * 获取课程下拉列表
* @param {JSON对象} data * @param {JSON对象} data
*/ */
export function queryCourseDropdownList(data) export function queryCourseDropdownList(data) {
{ return request({
return request({ url: '/Course/GetCourseList',
url: '/Course/GetCourseList', method: 'post',
method: 'post', data
data })
})
} }
/** /**
...@@ -184,11 +183,22 @@ export function saveTeachPlanInfo(data) { ...@@ -184,11 +183,22 @@ export function saveTeachPlanInfo(data) {
* 删除课程教案 * 删除课程教案
* @param {JSON参数} data * @param {JSON参数} data
*/ */
export function removeTeachPlanInfo(data) export function removeTeachPlanInfo(data) {
{ return request({
return request({ url: "/Course/RemoveTeachPlan",
url: "/Course/RemoveTeachPlan", method: 'post',
method: 'post', data
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> <template>
<q-card style="width: 360px;"> <div style="max-width:300px">
<q-input ref="selectTree" standout="bg-primary text-white" v-model="showMsg" :label="tipText" <q-select filled v-model="resultObj" :options="selectList" clearable @clear="clearData()" :label="tipText"
@click.native="isShowSelect = !isShowSelect"> :multiple="multiple" emit-value map-options>
<template v-slot:append> <template v-slot:option="scope">
<q-btn round dense flat icon="search" /> <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> </template>
</q-input> </q-select>
<q-card style="width:100%;position:absolute;z-index:100;background:#fff;border:1px solid rgba(0, 0, 0, 0.12);"> </div>
<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> </template>
<script> <script>
export default { export default {
...@@ -66,31 +61,23 @@ ...@@ -66,31 +61,23 @@
}, },
data() { data() {
return { return {
//是否显示树状选择器 //下拉框列表
isShowSelect: false, selectList: [{
selectList: [], value: "",
defaultProps: { label: ""
children: 'children', }],
label: 'label' //节点选择列表
}, chooseTreeNodeArray: [],
showMsg: "", //下拉框选择列表
chooseArray: [], resultObj: [],
resultObj: "",
} }
}, },
watch: { watch: {
isShowSelect(val) { //Tree节点选中或取消选中
//隐藏select自带的下拉框 chooseTreeNodeArray(val) {
this.$refs.selectTree.blur(); if (!this.multiple && this.chooseTreeNodeArray && this.chooseTreeNodeArray.length > 1) {
if (val) { var lastItem = this.chooseTreeNodeArray[this.chooseTreeNodeArray.length - 1];
// 下拉面板展开-选中节点-展开节点 this.chooseTreeNodeArray = [lastItem];
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() this.setTreeCheckNode()
}, },
...@@ -100,9 +87,9 @@ ...@@ -100,9 +87,9 @@
this.defaultArray.forEach(item => { this.defaultArray.forEach(item => {
if (item != '') { if (item != '') {
if (this.multiple) { if (this.multiple) {
this.chooseArray.push(item) this.chooseTreeNodeArray.push(item)
} else { } else {
this.chooseArray = [item]; this.chooseTreeNodeArray = [item];
} }
} }
}) })
...@@ -110,62 +97,50 @@ ...@@ -110,62 +97,50 @@
this.setTreeCheckNode(); this.setTreeCheckNode();
}, },
immediate: true immediate: true
},
resultObj(val) {
this.$emit('getChild', this.resultObj);
} }
}, },
mounted() {}, mounted() {},
methods: { methods: {
//全选 //清空数据
checkAll() { clearData() {
var tempArray = []; this.selectList = [{
var nodes = this.findTreeNode(this.treeData); value: "",
if (nodes && nodes.length > 0) { label: ""
nodes.forEach(item => { }];
tempArray.push(item.value) this.chooseTreeNodeArray = [];
}); this.resultObj = [];
}
this.chooseArray = tempArray;
},
//清空选中
clearMsg() {
this.chooseArray = [];
},
//返回选中的值
getCheckValue() {
this.isShowSelect = false;
this.$emit('getChild', this.resultObj);
}, },
//设置下拉框选择 //设置下拉框选择
setTreeCheckNode() { setTreeCheckNode() {
var that = this; var that = this;
this.selectList = []; this.selectList = [];
if (this.multiple) { this.resultObj = [];
this.resultObj = [];
} else {
this.resultObj = "";
}
this.showMsg = "";
var tempStr = "";
var nodes = this.findTreeNode(this.treeData); var nodes = this.findTreeNode(this.treeData);
if (this.chooseArray && this.chooseArray.length > 0 && nodes && nodes.length > 0) { if (this.chooseTreeNodeArray && this.chooseTreeNodeArray.length > 0 && nodes && nodes.length > 0) {
this.chooseArray.forEach(id => { this.chooseTreeNodeArray.forEach(id => {
nodes.forEach((item, index) => { nodes.forEach((item, index) => {
if (item.value == id) { if (item.value == id) {
this.selectList.push({ this.selectList.push({
value: item.value, value: item.value,
label: item.label label: item.label
}); });
tempStr += "," + item.label;
if (this.multiple) { if (this.multiple) {
this.resultObj.push(item.value); this.resultObj.push(item.value);
} else { } 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 @@ ...@@ -46,15 +46,16 @@
</template> </template>
<template v-slot:body-cell-optioned="props"> <template v-slot:body-cell-optioned="props">
<q-td :props="props"> <q-td :props="props">
<!--to=""+0+""-->
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="教案" <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="编辑" <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
@click="EditCourse(props.row)" /> @click="EditCourse(props.row)" />
</q-td> </q-td>
</template> </template>
</q-table> </q-table>
<course-form v-if="isShowCourseForm" :save-obj="courseObjOption" @close="closeMenuSaveForm" <course-form v-if="isShowCourseForm" :save-obj="courseObjOption" @close="closeMenuSaveForm"
@success="refreshPage"> @success="refreshPage">
</course-form> </course-form>
</div> </div>
...@@ -171,8 +172,8 @@ ...@@ -171,8 +172,8 @@
this.getcourselist(); this.getcourselist();
}, },
methods: { methods: {
gotoTeach(obj) { gotoSub(obj, routeStr) {
var tempStr = '/course/teachplan?CourseId=' + obj.CourseId; var tempStr = '/course/' + routeStr + '?CourseId=' + obj.CourseId;
this.$router.push({ this.$router.push({
path: tempStr path: tempStr
}); });
......
src/router/routes.js
View file @ 2d7d0c82
...@@ -72,6 +72,11 @@ const routes = [{ ...@@ -72,6 +72,11 @@ const routes = [{
component: () => component: () =>
import("pages/course/teachplan.vue") import("pages/course/teachplan.vue")
}, },
{
path: "/course/chapter", //章节管理
component: () =>
import("pages/course/chapter.vue")
},
{ {
path: "/test", //API测试 path: "/test", //API测试
component: () => 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