<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>角色與權限</title>
</head>
<link rel="stylesheet" type="text/css" href="../static/libs/iview/css/iview.css">
<link rel="stylesheet" type="text/css" href="../static/libs/iview/css/Ionicons.css">
<style>
#permission {
padding: 10px;
}
</style>
<body>
<div id="permission">
<mycomponent
v-model="data1"
:columns-list="columns1"
@on-start="handleOnstart1"
@on-end="handleOnend1"
v-on:clickRow="clickRow1"
></mycomponent>
</div>
</body>
<script type="text/javascript"
src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js">
</script>
<script type="text/javascript" src="../static/libs/iview/js/iview.min.js"></script>
<script src=".././static/libs/jquery/jquery-3.2.1.min.js?ver=1.1"></script>
<script src=".././static/libs/vue/sortable.js"></script>
<script src=".././static/libs/vue/vuedraggable.min.js"></script>
<script src=".././static/js/url.js"></script>
<script src="../static/js/perList.js" type="text/javascript">
</script>
</html>
$(function () {
// 模塊初始化；
APP.perList.init();
});
(function (L) {
var _this = null;
L.perList = L.perList || {};
_this = L.perList = {
sysData: [],
userId:115,
init: function() {
console.log(123123);
_this.table();
},
tableData:function(callback){
$.ajax({
type: 'GET',
dataType: "json",
// async: false,
url:'http://10.132.241.214:8888/role?simulation_employee_no=F1668963',
success: function(json) {
if (json.rv === 200) {
// _this.sysData = json.data;
console.log(json);
callback(json.data);
}
}
});
// return _this.sysData;
},
table:function(){
var Child = Vue.component('mycomponent', {
template: ' <div>\
<i-table \
ref="dragable" \
:columns="columnsList" \
:data="value" \
@on-row-click="clickRow"\
highlight-row \
></i-table>\
</div>',
name: 'DragableTable',
props: {
columnsList: Array,
value: Array,
},
methods: {
clickRow(data,index){
console.log(index);
this.$emit("clickRow1",index)
},
startFunc (e) {
console.log(444);
console.log(e);
console.log(this.$emit);
this.$emit('on-start', e.oldIndex);
},
endFunc (e) {
let movedRow = this.value[e.oldIndex];
this.value.splice(e.oldIndex, 1);
this.value.splice(e.newIndex, 0, movedRow);
this.$emit('on-end', {
value: this.value,
from: e.oldIndex,
to: e.newIndex
});
},
chooseFunc (e) {
this.$emit('on-choose', e.oldIndex);
}
},
mounted () {
var el = this.$refs.dragable.$children[1].$el.children[1];
let vm = this;
console.log(el);
Sortable.create(el, {
onStart: vm.startFunc,
onEnd: vm.endFunc,
onChoose: vm.chooseFunc
});
}
});
var Main = {
data () {
return {
columns1: [],
indexRow:null,
drag: false,
data1: [],
table1: {
hasDragged: false,
isDragging: false,
oldIndex: 0,
newIndex: 0,
draggingRecord: []
},
}
},
components:{
'mycomponent':Child
},
methods:{
handleOnstart1 (from) {
this.table1.oldIndex = from;
this.table1.hasDragged = true;
this.table1.isDragging = true;
},
handleOnend1 (e) {
this.table1.isDragging = false;
this.table1.draggingRecord.unshift({
from: e.from + 1,
to: e.to + 1
});
},
clickRow1:function(data){
console.log(444444);
console.log(data);
},
getData(){
var tData = this
_this.tableData(function(data){
tData.data1 = data;
});
this.columns1=[
{
title: '角色',
key: 'name'
},
{
title: '建立時間',
key: 'create_at'
},
{
title: '上次修改時間',
key: 'update_at'
},
{
title: ' ',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, 'View'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, 'Delete')
]);
}
}
];
}
},
created(){
this.getData();
}
}
var Component = Vue.extend(Main)
new Component().$mount('#permission')
},
}
}(APP));