379 lines
8.8 KiB
Vue
379 lines
8.8 KiB
Vue
<template>
|
|
<div class="dimension">
|
|
<van-search v-model="value" placeholder="请输入知识目录相关文件..."/>
|
|
<div style="height: 20px;font-size: 13px;color: #1b6ec9;padding: 0px 12px;">
|
|
<span style="float: left;" @click="back()">返回</span>
|
|
<span style="float: right;display: inline-block;" @click="clear()">清空</span>
|
|
<span style="float: right;display: inline-block;margin-right: 15px;" @click="getValue()">确定</span>
|
|
</div>
|
|
<div class="content">
|
|
<div class="top" v-show="type=='list'">
|
|
<span v-for="(item,index) in tablist" :key="index" >
|
|
<span class="tabname" :style="(index<(tablist.length-1)?'color: #378DEC;':'color: #333;')" @click="(index<(tablist.length-1)?backtop(item.id,item.name):'')">{{item.name}}</span>
|
|
<span v-show="(index<(tablist.length-1))">{{tabicon}} </span>
|
|
</span>
|
|
</div>
|
|
<div class="item" v-if="listSize> 0">
|
|
<van-checkbox-group v-model="result">
|
|
<van-cell-group>
|
|
<span v-for="(item, index) in list">
|
|
<van-cell
|
|
v-if="item.open!=undefined"
|
|
is-link
|
|
clickable
|
|
:key="index"
|
|
@click="onCell($event,item,index,'checkboxes')"
|
|
>
|
|
<i class="awsui-iconfont" :class="item.iconCls">{{item.iconCls.indexOf('treeDimension')>-1?'':''}}</i>
|
|
{{item.name}}
|
|
<van-checkbox :disabled="item.disabled!=undefined" class="checkbox" label-disabled v-show="!item.nocheck" :id="item.id" shape="square" :publishPerm="item.publishPerm" :name="item.id" ref="checkboxes"
|
|
icon-size="16px" >
|
|
</van-checkbox>
|
|
</van-cell>
|
|
<van-cell
|
|
v-else
|
|
clickable
|
|
:key="index"
|
|
@click="onCell($event,item,index,'checkboxes')"
|
|
>
|
|
<i class="awsui-iconfont" :class="item.iconCls">{{item.iconCls.indexOf('treeDimension')>-1?'':''}}</i>
|
|
{{item.name}}
|
|
<van-checkbox :disabled="item.disabled!=undefined" class="checkbox rightchk" label-disabled v-show="!item.nocheck" :id="item.id" shape="square" :publishPerm="item.publishPerm" :name="item.id" ref="checkboxes"
|
|
icon-size="16px" >
|
|
</van-checkbox>
|
|
</van-cell>
|
|
</span>
|
|
|
|
</van-cell-group>
|
|
</van-checkbox-group>
|
|
</div>
|
|
<div v-else>
|
|
<div class="con">
|
|
<div class="img">
|
|
<img src="../assets/no_content.png" alt="" style="width: 125px;">
|
|
</div>
|
|
<div class="text">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import awsuiAxios from "../awsuiAxios";
|
|
export default {
|
|
name: 'know-dimension',
|
|
data() {
|
|
return {
|
|
initcheckFlag:false,
|
|
value: '',
|
|
knowDir: '知识目录',
|
|
tabicon:">",
|
|
list: [
|
|
],
|
|
tablist: [{
|
|
name:"知识目录",
|
|
id:"-1"
|
|
}
|
|
],
|
|
listSize:0,
|
|
id: '',
|
|
type:"list",
|
|
result: [],
|
|
currentParentId:"",
|
|
currentParentName:"知识目录",
|
|
}
|
|
},
|
|
props:{
|
|
publishDimensionData:{
|
|
type:Object,
|
|
default(){
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
checkclick(item,state){
|
|
if(state=='checked'){
|
|
if(item.iconCls.indexOf('noPerm')>-1){
|
|
for(let itm of this.list){
|
|
if(itm.id!=item.id){
|
|
itm.disabled = true;
|
|
}else{
|
|
itm.disabled = undefined;
|
|
}
|
|
}
|
|
}else{
|
|
for(let itm of this.list){
|
|
if(itm.iconCls.indexOf('noPerm')>-1){
|
|
itm.disabled = true;
|
|
}else{
|
|
itm.disabled = undefined;
|
|
}
|
|
}
|
|
}
|
|
}else{
|
|
for(let itm of this.list){
|
|
itm.disabled = undefined;
|
|
}
|
|
}
|
|
|
|
},
|
|
onCell(event, item, index, checkbox) {
|
|
let cId = document.getElementById(item.id)
|
|
if (cId) {
|
|
this.currentParentId = item.id;
|
|
this.currentParentName = item.name;
|
|
if (event.target.className.indexOf("van-cell__")>-1) {
|
|
if(item.open!=undefined){
|
|
this.getDimensionTree();
|
|
}
|
|
} else {
|
|
if(item.disabled==undefined){
|
|
this.toggle(index, checkbox,item);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
toggle(index, checkbox,item) {
|
|
this.$refs[checkbox][index].toggle()
|
|
let dimenId =item.id;
|
|
if(!this.$refs[checkbox][index].checked){
|
|
if(!this.publishDimensionData.hasOwnProperty(dimenId)){
|
|
this.publishDimensionData[dimenId]=item
|
|
}
|
|
this.checkclick(item,'checked');
|
|
}else{
|
|
if(this.publishDimensionData.hasOwnProperty(dimenId)){
|
|
delete this.publishDimensionData[dimenId];
|
|
}
|
|
if(Object.keys(this.publishDimensionData).length==0){
|
|
this.checkclick(item,'nochecked');
|
|
}
|
|
} ;
|
|
this.id = this.$refs[checkbox][index].$attrs.id
|
|
|
|
},
|
|
getValue(){
|
|
this.$emit('dimensionBack',this.publishDimensionData,"ok");
|
|
},
|
|
clear(){
|
|
if(this.$refs.checkboxes){
|
|
this.$refs.checkboxes.forEach(el => {
|
|
el.toggle(false);
|
|
});
|
|
this.publishDimensionData = {};
|
|
this.result = [];
|
|
}
|
|
for(let itm of this.list){
|
|
itm.disabled = undefined;
|
|
}
|
|
// this.$emit('dimensionBack');
|
|
},
|
|
back(){
|
|
this.$emit('dimensionBack',this.publishDimensionData,"back");
|
|
},
|
|
getDimensionTree(id,type){
|
|
let parentId= this.currentParentId;
|
|
if(type=='back'){
|
|
parentId=id=="-1"?"":id;
|
|
}
|
|
let that = this;
|
|
// 获取知识列表数据
|
|
awsuiAxios.post({
|
|
url: "jd",
|
|
data: {
|
|
cmd: "com.actionsoft.apps.kms_knwl_center_me_publish_dimension_tree_json",
|
|
parentId:parentId
|
|
|
|
},
|
|
}).then(function (r) {
|
|
let keys = Object.keys(that.publishDimensionData);
|
|
if(keys==0){
|
|
that.clear();
|
|
}
|
|
let dimensionJA = r;
|
|
that.list = dimensionJA;
|
|
that.listSize = that.list.length;
|
|
let parentid = that.currentParentId;
|
|
if(parentid==''){
|
|
that.tablist =[{
|
|
name:"知识目录",
|
|
id:"-1"
|
|
}
|
|
]
|
|
}else{
|
|
let tmpd = that.tablist;
|
|
let indx = 0;
|
|
let has = false;
|
|
for(let n=0;n<tmpd.length;n++){
|
|
if( tmpd[n]['id']==parentid){
|
|
indx =n;
|
|
has = true;
|
|
break;
|
|
}
|
|
}
|
|
if(has){
|
|
that.tablist=that.tablist.slice(0,indx+1);
|
|
}else{
|
|
that.tablist.push({
|
|
name:that.currentParentName,
|
|
id:parentid
|
|
})
|
|
}
|
|
}
|
|
|
|
});
|
|
},
|
|
search(){
|
|
let that = this;
|
|
awsuiAxios.post({
|
|
url: "jd",
|
|
data: {
|
|
cmd: "com.actionsoft.apps.kms_mobile_center_dimension_search",
|
|
key:this.value
|
|
|
|
},
|
|
}).then(function (r){
|
|
if (r.result == "error") {
|
|
alert(r.msg);
|
|
} else{
|
|
if(Object.keys(that.publishDimensionData).length==0){
|
|
that.clear();
|
|
}
|
|
that.list = r.data.dimensionJA;
|
|
}
|
|
});
|
|
},
|
|
backtop(id,name){
|
|
this.currentParentId = id;
|
|
this.currentParentName = name;
|
|
this.getDimensionTree(id,'back');
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initcheckFlag = true;
|
|
this.$nextTick(() => {
|
|
var that = this
|
|
if (that.$route.params.id !== undefined) {
|
|
this.id = that.$route.params.id
|
|
}
|
|
this.result = Object.keys(that.publishDimensionData);
|
|
// that.list.forEach(el => {
|
|
// if (el.id === this.id) {
|
|
// this.result = [el.name]
|
|
// }
|
|
// })
|
|
})
|
|
},
|
|
watch:{
|
|
value(v) {
|
|
if(v!=''){
|
|
this.type='search';
|
|
this.search();
|
|
}else{
|
|
this.type='list';
|
|
this.getDimensionTree("-1","back");
|
|
}
|
|
|
|
}
|
|
},
|
|
created(){
|
|
this.getDimensionTree("-1","");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dimension {
|
|
height: 100%;
|
|
}
|
|
|
|
.dimension .content {
|
|
border-top: 0.33px solid #e9e9e9;
|
|
height: calc(100% - 105px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dimension .content .item {
|
|
padding: 0 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.dimension .content .item .checkbox {
|
|
width: 16px;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 20px;
|
|
}
|
|
|
|
|
|
.dimension .content .divide {
|
|
background: #e9e9e9;
|
|
width: 100%;
|
|
height: 12px;
|
|
}
|
|
|
|
.dimension .content .van-cell {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #efefef;
|
|
}
|
|
|
|
.dimension .content .van-cell:last-child {
|
|
/*border-bottom: 0;*/
|
|
}
|
|
|
|
.dimension .content .van-cell .awsui-iconfont {
|
|
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.dimension .content .van-cell .default {
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
.top {
|
|
padding: 9px 12px 7px;
|
|
line-height: 18px;
|
|
border-bottom: 0.33px solid #e9e9e9;
|
|
font-size: 12px;
|
|
}
|
|
.top .tabname{
|
|
font-size: 14px;
|
|
}
|
|
.con {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.con .img {
|
|
width: 125px;
|
|
height: 125px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.con .text {
|
|
color: #999;
|
|
line-height: 20px;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
}
|
|
.treeDimension-noPerm,.treeHotspot-noPerm{
|
|
color: #CCCCCC;
|
|
}
|
|
.treeDimension,.treeHotspot{
|
|
color: #FABD01;
|
|
}
|
|
.treeHotspot {
|
|
color:#f3b731 !important;
|
|
}
|
|
.rightchk{
|
|
right: 40px !important;
|
|
}
|
|
</style>
|