@@ -202,9 +257,11 @@
import {host} from '../../common/js/validate'
import {uSize} from '../../common/js/validate'
import bus from '../../../libs/bus';
+ import draggable from 'vuedraggable'
export default {
name: "system",
+ components:{draggable},
data(){
return {
basic:{
@@ -323,6 +380,13 @@
type:[],
password:'',
},
+ linkTemp:{
+ name:'',url:''
+ },
+ link:[],
+ linkRules:[
+
+ ],
resetRules:{
type:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
password:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
@@ -341,14 +405,14 @@
value:'sysconfig',
},
],
- activeTab:'basic'
+ activeTab:'link'
}
},
methods:{
selectTab:function(tab){
this.querySetInfo(tab.name)
},
- querySetInfo:function(type){
+ querySetInfo:function(type){ // 切换tab
if(!type){
console.error('type is required')
return
@@ -356,6 +420,15 @@
if(type == 'reset'){
return ;
}
+ if(type == 'link'){
+ // this.$get('link').then(response=>{
+ // console.log(response)
+ // });
+ // console.log(response);
+ this.link=[{id:1,name:'000',url:'222',isEdit:false},
+ {id:2,name:'111',url:'https://www.baidu.com/s?wd=element&rsv_spt=1&rsv_iqid=0xbccc5b9a000f76e6&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ts_3&oq=%25E5%25A4%259A%25E8%25A1%258C%25E6%2596%2587%25E6%259C%25AC%25E7%259C%2581%25E7%2595%25A5%25E5%258F%25B7&rsv_btype=t&inputT=2473&rsv_t=fec3hB0PE04MDkxGHiV1k81e5C4DwS5dhZn7UD92ZSZqxpJC65PdHK%2BctV3yOy7QMxq2&rsv_pq=b35cdd7a0005aae6&rsv_sug3=73&rsv_sug1=58&rsv_sug7=100&rsv_sug2=0&prefixsug=ele&rsp=3&rsv_sug4=2473',isEdit:false},]
+ return
+ }
this.$get('sysConfig?type='+type).then(response=>{
if(response.code == 200){
let sets=response.data[type];
@@ -472,9 +545,38 @@
}
});
},
+ // link 移动
+ change: function (evt) {
+ // console.log(evt)
+ },
+ //start ,end ,add,update, sort, remove 得到的都差不多
+ start: function (evt) {
+ // console.log(evt)
+ },
+ end: function (evt) {
+ console.log(evt);
+ console.log(this.link);
+ evt.item //可以知道拖动的本身
+ evt.to // 可以知道拖动的目标列表
+ evt.from // 可以知道之前的列表
+ evt.oldIndex // 可以知道拖动前的位置
+ evt.newIndex // 可以知道拖动后的位置
+ },
+ move: function (evt, originalEvent) {
+ // console.log(evt)
+ // console.log(originalEvent) //鼠标位置
+ },
+ // link add
+ // link edit
+ linkEdit(item){
+ let index=this.link.findIndex((item1)=>item.id==item1.id);
+ this.$set(this.link,index,{...this.link[index],isEdit:true});
+ },
+ // link update
+ // link del
},
mounted() {
- this.querySetInfo('basic')
+ this.querySetInfo('basic');
}
}
@@ -487,6 +589,71 @@
width: 61.8% !important;
position: relative;
}
+ .linkBox{
+ position: relative;
+ width: 800px;
+ }
+
+ .linkTitle{
+ display: flex;
+ align-items:center;
+ border-bottom: 2px solid #dfe1e6;
+ color: #6b778c;
+ font-size: 12px;
+ height: 24px;
+ line-height: 24px;
+ font-weight: 600;
+ }
+ .handle{
+ cursor: move !important;
+ padding:0 5px;
+ line-height: 34px;
+ }
+ .linkBtn{
+ height: 28px;
+ line-height: 0px;
+ font-size: 12px;
+ }
+ .linkTitleHandle{
+ padding: 0 13px;
+ }
+ .linkContent{
+ display: flex;
+ padding: 5px 0px;
+ border-bottom: 1px solid #dfe1e6;
+ font-size: 13px;
+ line-height: 34px;
+ }
+ .linkFormContent{
+ display: flex;
+ line-height: 34px;
+ }
+ .linkTitleName{
+ width: 100px;
+ margin-right: 12px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ height: 31px;
+ }
+ .linkTitleUrl{
+ width: 460px;
+ margin-right: 12px;
+ height: 31px;
+ }
+ .linkTitleUrlContent{
+ display: inline-block;
+ width: 430px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ height: 31px;
+ }
+ .linkTitleUrl .nz-icon-edit{
+ font-size: 12px;
+ float: right;
+ cursor: pointer;
+ }