|
@@ -8,11 +8,15 @@
|
|
|
<Icon type="ios-keypad" size="20" :class="listType==1?'list-type-active':''" @click="changeListType(1)"/>
|
|
|
</div>
|
|
|
<div class="header-right">
|
|
|
- <div class="header-right-item">
|
|
|
+ <div class="header-right-item" @click="addPoint" v-show="listType==1">
|
|
|
<Icon type="logo-buffer" size="18" />
|
|
|
<span>新增知识点</span>
|
|
|
</div>
|
|
|
- <div class="header-right-item">
|
|
|
+ <div class="header-right-item" @click="composeBlock" v-show="listType==1">
|
|
|
+ <Icon type="logo-buffer" size="18" />
|
|
|
+ <span>组成知识块</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-right-item" @click="addBlock" v-show="listType==0">
|
|
|
<Icon type="ios-browsers" size="18" />
|
|
|
<span>新增知识块</span>
|
|
|
</div>
|
|
@@ -27,36 +31,128 @@
|
|
|
<div class="list-col" v-if="isShowBlock">
|
|
|
<Collapse simple accordion @on-change="collapseChange">
|
|
|
<Panel v-for="(item,index) in knowBlockList" class="know-block-item" :key="index" :name="item.period">
|
|
|
- <span class="know-block-name">{{item.name}} | {{item.id}}</span>
|
|
|
+ <Input v-if="item.id==block_edit_id" :ref="'block'+item.id" clearable type="text" v-model="item.name"
|
|
|
+ @on-blur="editKnowBlock(item)"
|
|
|
+ @on-enter="editKnowBlock(item)"
|
|
|
+ @click.stop.native="inputFocus($event)" />
|
|
|
+ <span class="know-block-name" v-else>{{item.name}} | {{item.id}}</span>
|
|
|
+
|
|
|
<span class="know-block-builder">建立者 | {{item.builder}}</span>
|
|
|
<span class="k-block-tools">
|
|
|
- <Icon type="md-create" />
|
|
|
- <Icon type="md-trash" />
|
|
|
+ <Icon type="md-create" @click="handleEditBlock(item,$event)" title="编辑名称" />
|
|
|
+ <Icon type="md-add-circle" title="编辑知识点" @click.stop.native="editBlockPoint(item)"/>
|
|
|
+ <Icon type="md-trash" @click="handleDeleteBlock" title="删除"/>
|
|
|
</span>
|
|
|
<div slot="content" class="knowpoints">
|
|
|
<div class="knowpoint-item" v-for="(item,index) in knowPointList" @mouseover="knowMouseover" @mouseout="knowMouseout">
|
|
|
- <span>{{item.name}} </span>
|
|
|
+ <Input v-if="item.id==point_edit_id" :ref="'point'+item.blockId+item.id" clearable type="text" v-model="item.name"
|
|
|
+ @on-blur="editKnowPoint(item)"
|
|
|
+ @on-enter="editKnowPoint(item)"
|
|
|
+ @click.stop.native="inputFocus($event)" />
|
|
|
+ <span v-else>{{item.name}} </span>
|
|
|
<span class="k-tools">
|
|
|
- <Icon type="md-create" />
|
|
|
- <Icon type="md-trash" />
|
|
|
+ <Icon type="md-create" @click="handleEditPoint(item,$event)" />
|
|
|
+ <Icon type="md-trash" @click.stop.native="handleDeleteBlock" />
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Panel>
|
|
|
</Collapse>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 知识点仓库 -->
|
|
|
<div class="list-col list-knowpoints" v-else>
|
|
|
+ <div class="knowpoints-filter">
|
|
|
+
|
|
|
+ </div>
|
|
|
<div class="knowpoints">
|
|
|
- <div class="knowpoint-item" v-for="(item,index) in knowPointList" @mouseover="knowMouseover" @mouseout="knowMouseout">
|
|
|
- <span>{{item.name}} </span>
|
|
|
+ <div v-for="(item,index) in knowPointList" :class="['knowpoint-item',pointCheckedList.indexOf(item) != -1?'knowpoint-item-active':'']" :title="item.description" @mouseover="knowMouseover" @mouseout="knowMouseout" @click="pointClick(item)">
|
|
|
+ <Input v-if="item.id==point_edit_id" :ref="'point'+item.blockId+item.id" clearable type="text" v-model="item.name"
|
|
|
+ @on-blur="editKnowPoint(item)"
|
|
|
+ @on-enter="editKnowPoint(item)"
|
|
|
+ @click.stop.native="inputFocus($event)" />
|
|
|
+ <span v-else>{{item.name}} </span>
|
|
|
+ <!--<Icon type="ios-checkmark-circle" color="#00fa00" class="icon-checked"/>-->
|
|
|
<span class="k-tools">
|
|
|
- <Icon type="md-create" />
|
|
|
- <Icon type="md-trash" />
|
|
|
+ <Icon type="md-create" @click="handleEditPoint(item,$event)" />
|
|
|
+ <Icon type="md-trash" @click.stop.native="handleDeleteBlock" />
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <Modal v-model="addBlockModal"
|
|
|
+ title="新增知识块"
|
|
|
+ width="520"
|
|
|
+ ok-text="确认"
|
|
|
+ cancel-text="取消"
|
|
|
+ @on-ok="handleAddBlock"
|
|
|
+ @on-cancel="">
|
|
|
+ <p class="modal-title">请输入知识块名称</p>
|
|
|
+ <Input v-model="newBlockName" placeholder="输入名称" style="margin:5px" />
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <Modal v-model="addPointModal"
|
|
|
+ title="新增知识点"
|
|
|
+ width="520"
|
|
|
+ ok-text="确认"
|
|
|
+ cancel-text="取消"
|
|
|
+ @on-ok="handleAddPoint"
|
|
|
+ @on-cancel="">
|
|
|
+ <p class="modal-title">请输入知识点名称</p>
|
|
|
+ <Input v-model="newPointName" placeholder="输入名称" style="margin:5px" />
|
|
|
+ <p class="modal-title">请输入知识点描述</p>
|
|
|
+ <Input v-model="newPointName" placeholder="输入描述" style="margin:5px" />
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <Modal v-model="editBlockPointModal"
|
|
|
+ title="编辑知识块"
|
|
|
+ width="600"
|
|
|
+ ok-text="确认"
|
|
|
+ cancel-text="取消"
|
|
|
+ @on-ok="handleAddBlock"
|
|
|
+ @on-cancel="">
|
|
|
+ <Transfer :data="data3"
|
|
|
+ :target-keys="targetKeys3"
|
|
|
+ :list-style="listStyle"
|
|
|
+ :render-format="render3"
|
|
|
+ :operations="['撤回知识库','加入知识块']"
|
|
|
+ filter-placeholder="请输入搜索内容"
|
|
|
+ :titles="['知识点仓库', '当前知识块']"
|
|
|
+ not-found-text="列表为空"
|
|
|
+ filterable
|
|
|
+ :filter-method="filterMethod"
|
|
|
+ @on-change="handleChange3">
|
|
|
+ <div :style="{float: 'right', margin: '5px'}">
|
|
|
+ <Button size="small" @click="reloadMockData">刷新</Button>
|
|
|
+ </div>
|
|
|
+ </Transfer>
|
|
|
+ </Modal>
|
|
|
+ <!-- 组成知识块弹窗 -->
|
|
|
+ <Modal v-model="composeBlockModal"
|
|
|
+ title="组成知识块"
|
|
|
+ width="400"
|
|
|
+ ok-text="确认"
|
|
|
+ cancel-text="取消"
|
|
|
+ @on-ok="handleComposeBlock"
|
|
|
+ @on-cancel="">
|
|
|
+ <Tabs value="newBlock" class="compose-block-tab">
|
|
|
+ <TabPane label="建立新的知识块" name="newBlock">
|
|
|
+ <p class="modal-title">请输入知识块名称</p>
|
|
|
+ <Input v-model="newBlockName" placeholder="请输入" style="margin:5px" />
|
|
|
+ <p class="modal-title">当前选中知识点</p>
|
|
|
+ <div class="checked-points">
|
|
|
+ <div v-for="item in pointCheckedList" class="knowpoint-item knowpoint-item-active">{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ </TabPane>
|
|
|
+ <TabPane label="移动到现有知识块" name="moveToBlock">
|
|
|
+ <RadioGroup v-model="checkedBlock">
|
|
|
+ <Radio v-for="(item,index) in knowBlockList" :key="index" :label="item.name+item.id" :value="item.period" :name="item.period"></Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -69,17 +165,36 @@
|
|
|
return {
|
|
|
knowPointList: [],
|
|
|
knowBlockList: [],
|
|
|
- treeData: [],
|
|
|
+ pointCheckedList: [],
|
|
|
+ checkedBlock:"知识块名称0",
|
|
|
isShowBlock: true,
|
|
|
- listType: 0
|
|
|
+ listType: 0,
|
|
|
+ newBlockName:"",
|
|
|
+ newPointName:"",
|
|
|
+ block_edit_id: null, //当前知识块编辑索引
|
|
|
+ point_edit_id: null, //当前知识点编辑索引
|
|
|
+ point_click_id:null,
|
|
|
+ addBlockModal: false, //新增知识块开关
|
|
|
+ addPointModal: false, //新增知识点开关
|
|
|
+ editBlockPointModal: false, //编辑知识块开关
|
|
|
+ composeBlockModal: false, //编辑知识块开关
|
|
|
+ data3: this.getMockData(),
|
|
|
+ targetKeys3: this.getTargetKeys(),
|
|
|
+ listStyle: {
|
|
|
+ width: '220px',
|
|
|
+ height: '420px'
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
for (let i = 0; i < 11; i++) {
|
|
|
this.knowPointList.push({
|
|
|
id: i,
|
|
|
+ key: i.toString(),
|
|
|
+ label: i.toString(),
|
|
|
name: "知识点名称_" + this.changeNumFormat(i),
|
|
|
- termNum: i + 5
|
|
|
+ blockId: i + 1,
|
|
|
+ description: "知识点名称_" + this.changeNumFormat(i)
|
|
|
})
|
|
|
|
|
|
this.knowBlockList.push({
|
|
@@ -95,7 +210,7 @@
|
|
|
|
|
|
//知识点与知识块切换
|
|
|
changeListType(status) {
|
|
|
- this.listType = status;
|
|
|
+ this.listType = status;
|
|
|
this.isShowBlock = status == 0;
|
|
|
},
|
|
|
//数字格式转换
|
|
@@ -119,7 +234,8 @@
|
|
|
e.currentTarget.lastElementChild.style.visibility = 'hidden';
|
|
|
},
|
|
|
//折叠版切换回调
|
|
|
- collapseChange(arr) {
|
|
|
+ collapseChange(arr) {
|
|
|
+ this.block_edit_id = null;
|
|
|
let list = document.getElementsByClassName('k-block-tools');
|
|
|
for (let i = 0 ; i < list.length ;i++) {
|
|
|
if (arr.indexOf(i.toString()) != -1) {
|
|
@@ -128,6 +244,137 @@
|
|
|
list[i].style.visibility = "hidden";
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+
|
|
|
+ //点击编辑知识块
|
|
|
+ handleEditBlock(data, e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.block_edit_id = data.id;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['block' + data.id][0].focus();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //编辑知识块input失焦
|
|
|
+ editKnowBlock(data) {
|
|
|
+ this.block_edit_id = null;
|
|
|
+ },
|
|
|
+
|
|
|
+ //点击编辑知识点
|
|
|
+ handleEditPoint(data, e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.point_edit_id = data.id;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['point'+data.blockId+data.id][0].focus();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //编辑知识点input失焦
|
|
|
+ editKnowPoint(data) {
|
|
|
+ this.point_edit_id = null;
|
|
|
+ },
|
|
|
+
|
|
|
+ //input聚焦
|
|
|
+ inputFocus(e) {
|
|
|
+ e.cancelBubble = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ //request删除知识块
|
|
|
+ handleDeleteBlock() {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: '删除知识块',
|
|
|
+ content: '<p>确认删除该知识块?</p>',
|
|
|
+ okText:"确认",
|
|
|
+ cancelText:"取消",
|
|
|
+ onOk: () => {
|
|
|
+ this.$Message.info('Clicked ok');
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ this.$Message.info('Clicked cancel');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //点击新增知识块弹窗
|
|
|
+ addBlock() {
|
|
|
+ this.addBlockModal = true;
|
|
|
+ },
|
|
|
+ //点击新增知识块弹窗
|
|
|
+ addPoint() {
|
|
|
+ this.addPointModal = true;
|
|
|
+ },
|
|
|
+ //点击组成知识块弹窗
|
|
|
+ composeBlock() {
|
|
|
+ if (this.pointCheckedList.length < 1) {
|
|
|
+ this.$Message.info('请先勾选需要操作的知识点!');
|
|
|
+ } else {
|
|
|
+ this.composeBlockModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //点击编辑知识块弹窗
|
|
|
+ editBlockPoint(data) {
|
|
|
+ let block = data;
|
|
|
+ this.editBlockPointModal = true;
|
|
|
+ },
|
|
|
+ //request新增知识块
|
|
|
+ handleAddBlock() {
|
|
|
+ console.log(this.newBlockName);
|
|
|
+ },
|
|
|
+
|
|
|
+ //request新增知识点
|
|
|
+ handleAddPoint() {
|
|
|
+ console.log(this.newPointName);
|
|
|
+ },
|
|
|
+ //request编辑知识块
|
|
|
+ handleEditBlockPoint() {
|
|
|
+ console.log(this.targetKeys3);
|
|
|
+ },
|
|
|
+
|
|
|
+ //request编辑知识块
|
|
|
+ handleComposeBlock() {
|
|
|
+ console.log(this.pointCheckedList);
|
|
|
+ },
|
|
|
+
|
|
|
+ pointClick(data) {
|
|
|
+ //this.point_click_id = data.id;
|
|
|
+ let list = this.pointCheckedList;
|
|
|
+ if (list.indexOf(data) == -1) {
|
|
|
+ list.push(data);
|
|
|
+ } else {
|
|
|
+ list.splice(list.indexOf(data), 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getMockData() {
|
|
|
+ let mockData = [];
|
|
|
+ for (let i = 1; i <= 20; i++) {
|
|
|
+ mockData.push({
|
|
|
+ id: i,
|
|
|
+ key: i.toString(),
|
|
|
+ label: i.toString(),
|
|
|
+ name: "知识点名称_" + this.changeNumFormat(i),
|
|
|
+ termNum: i + 5,
|
|
|
+ blockId: i + 1,
|
|
|
+ description: "知识点名称_" + this.changeNumFormat(i)
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ return mockData;
|
|
|
+ },
|
|
|
+ getTargetKeys() {
|
|
|
+ let targetArr = [];
|
|
|
+ return targetArr;
|
|
|
+ },
|
|
|
+ handleChange3(newTargetKeys) {
|
|
|
+ this.targetKeys3 = newTargetKeys;
|
|
|
+ },
|
|
|
+ render3(item) {
|
|
|
+ return item.label + ' - ' + item.description;
|
|
|
+ },
|
|
|
+ reloadMockData() {
|
|
|
+ this.data3 = this.getMockData();
|
|
|
+ this.targetKeys3 = this.getTargetKeys();
|
|
|
+ },
|
|
|
+ filterMethod(data, query) {
|
|
|
+ let val = data.label + ' - ' + data.description;
|
|
|
+ return val.toUpperCase().indexOf(query.toUpperCase()) > -1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -227,11 +474,22 @@
|
|
|
padding-bottom: 50px;
|
|
|
}
|
|
|
|
|
|
+ .list-wrap .knowpoints-filter{
|
|
|
+ width:100%;
|
|
|
+ height:10px;
|
|
|
+ border-bottom:2px solid #464646;
|
|
|
+ margin-bottom:10px;
|
|
|
+ }
|
|
|
+
|
|
|
.list-col {
|
|
|
overflow-y: auto;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
+ .list-col /deep/ .ivu-input-wrapper {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
.list-knowpoints {
|
|
|
padding-top:30px;
|
|
|
}
|
|
@@ -270,6 +528,40 @@
|
|
|
margin-left:15px;
|
|
|
}
|
|
|
|
|
|
+ .compose-block-tab /deep/ .ivu-input {
|
|
|
+ width:90%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compose-block-tab /deep/ .ivu-tabs-bar {
|
|
|
+ display:flex;
|
|
|
+ flex-direction:row;
|
|
|
+ justify-content:center;
|
|
|
+ }
|
|
|
+ .compose-block-tab /deep/ .ivu-radio-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left:15px;
|
|
|
+ }
|
|
|
+ .compose-block-tab /deep/ .ivu-radio {
|
|
|
+ margin:10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compose-block-tab /deep/ .ivu-tabs-tabpane {
|
|
|
+ padding-left:10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compose-block-tab .checked-points {
|
|
|
+ display:flex;
|
|
|
+ flex-direction:row;
|
|
|
+ flex-wrap:wrap;
|
|
|
+ }
|
|
|
+ .compose-block-tab .checked-points .knowpoint-item{
|
|
|
+ padding:5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-title {
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
|
|
|
.list-col::-webkit-scrollbar { /*滚动条整体样式*/
|
|
|
width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
@@ -298,20 +590,22 @@
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
.knowpoint-item {
|
|
|
- padding:10px 20px;
|
|
|
- margin:5px;
|
|
|
- background:rgb(103,109,109);
|
|
|
- color:rgb(232,233,233);
|
|
|
- border-radius:100px;
|
|
|
- font-size:12px;
|
|
|
- cursor:pointer;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin: 5px;
|
|
|
+ background: rgb(255,255,255);
|
|
|
+ color: #464646;
|
|
|
+ border:1px solid rgb(216, 216, 216);
|
|
|
+ border-radius: 100px;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .knowpoint-item:hover{
|
|
|
- background:rgb(179,179,179);
|
|
|
- color:#fff !important;
|
|
|
+ .knowpoint-item:hover, .knowpoint-item-active {
|
|
|
+ background: rgb(45, 140, 240);
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
|
.knowpoint-item .ivu-icon {
|
|
|
- margin-left:5px;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
.k-tools {
|
|
|
visibility:hidden;
|