优化
This commit is contained in:
熊成强
parent
cfacebdd48
commit
3878f5fb14
@ -21,7 +21,8 @@
|
||||
"less-loader": "^4.1.0",
|
||||
"svg-sprite-loader": "^5.0.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-router": "^3.0.1"
|
||||
"vue-router": "^3.0.1",
|
||||
"vuedraggable": "^2.24.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
||||
@ -18,3 +18,16 @@
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.center(){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 0 !important;
|
||||
// }
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 0 !important;height: 0;
|
||||
// }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 354 B |
@ -40,8 +40,79 @@
|
||||
<div class="set-add">
|
||||
<el-button icon="el-icon-plus" size="small" @click="handleAdd" round>添加考核维度</el-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="set-content">
|
||||
<draggable
|
||||
v-model="materialsList"
|
||||
:options='options'
|
||||
@change="change"
|
||||
@start="start"
|
||||
@end="end"
|
||||
@move="move"
|
||||
>
|
||||
<div class="set-content-item item" v-for="i in materialsList" :key="i">
|
||||
<div class="set-content-item-top commonFont">
|
||||
<div class="set-content-item-top-left my-handle sortable-drag">
|
||||
{{i}}呵呵呵
|
||||
</div>
|
||||
<div class="set-content-item-top-right">
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="set-content-item-center commonFont">
|
||||
<div class="set-content-item-center-left">
|
||||
2154325
|
||||
</div>
|
||||
<div class="set-content-item-center-right">
|
||||
2154325
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tableData.length !==0" class="set-content-item-table">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
fixed
|
||||
prop="name"
|
||||
label="指标名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="number"
|
||||
label="考核标准">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="number"
|
||||
label="权重(%)">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="deleteRow(scope.$index)"
|
||||
type="text"
|
||||
size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click.native.prevent="deleteRow(scope.$index)"
|
||||
type="text"
|
||||
size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="set-content-item-bottom">
|
||||
<el-button size="mini" plain>选择指标项</el-button>
|
||||
<el-button size="mini" plain>增加指标项</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<div>
|
||||
<popup-right v-if="show" @cancel='handleCancel' @submit="handleSubmit" title="添加维度"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -49,23 +120,60 @@
|
||||
|
||||
<script>
|
||||
import PopupRight from '@/components/PopupRight'
|
||||
import draggable from 'vuedraggable'
|
||||
import Sortable from 'sortablejs'
|
||||
console.log('Sortable: ', Sortable)
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
form: {}
|
||||
form: {},
|
||||
materialsList: [0, 1, 2, 3, 4, 5],
|
||||
tableData: [{name: '12345', number: 1}, {name: '78945', number: 2}, {name: '5566655', number: 3}],
|
||||
options: {
|
||||
group: 'name',
|
||||
draggable: '.item',
|
||||
handle: '.my-handle',
|
||||
dragClass: 'sortable-drag',
|
||||
sort: true, // 内部排序列表
|
||||
delay: 0, // 以毫秒为单位定义排序何时开始。
|
||||
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
|
||||
disabled: false, // 如果设置为真，则禁用sortable。
|
||||
store: null, // @see Store
|
||||
animation: 150 // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
PopupRight
|
||||
PopupRight,
|
||||
draggable
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
mounted () {
|
||||
this.rowDrop()
|
||||
},
|
||||
methods: {
|
||||
// 行拖拽
|
||||
rowDrop () {
|
||||
const tbody = document.querySelector('.el-table__body-wrapper tbody')
|
||||
const _this = this
|
||||
Sortable.create(tbody, {
|
||||
onEnd ({ newIndex, oldIndex }) {
|
||||
const currRow = _this.tableData.splice(oldIndex, 1)[0]
|
||||
_this.tableData.splice(newIndex, 0, currRow)
|
||||
}
|
||||
})
|
||||
},
|
||||
change () {},
|
||||
start () {},
|
||||
end () {},
|
||||
move () {},
|
||||
// 添加考核维度
|
||||
handleAdd () {
|
||||
this.show = true
|
||||
// this.show = true
|
||||
|
||||
console.log('materialsList: ', this.materialsList)
|
||||
},
|
||||
handleCancel () {
|
||||
this.show = false
|
||||
@ -79,7 +187,6 @@ export default {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.set{
|
||||
&-top{
|
||||
@ -108,5 +215,76 @@ export default {
|
||||
&-add{
|
||||
margin: 20px 0;
|
||||
}
|
||||
&-content{
|
||||
&-item{
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
min-height: 40px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @borderColor;
|
||||
&-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid @borderColor;
|
||||
&-left{
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
.center();
|
||||
cursor: move ;
|
||||
position: relative;
|
||||
}
|
||||
.my-handle::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width:14px;
|
||||
height: 27px;
|
||||
background: url('./imgs/before.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i{
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-icon-edit:hover{
|
||||
color: @fontBlue;
|
||||
}
|
||||
.el-icon-delete:hover{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-center{
|
||||
height: 40px;
|
||||
background: #f7f7f7;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
&-left{
|
||||
padding-right: 20px;
|
||||
border-right: 1px solid @borderColor;
|
||||
}
|
||||
&-right{
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
&-table{
|
||||
}
|
||||
&-bottom{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user