<template>
<div>
<div class="container">
<div class="handle-box">
<div class="condition">
<span class="textfont">创建日期范围:</span>
<el-date-picker v-model="form.value2" type="daterange" align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>
</div>
<div class="condition">
<span class="textfont">工号:</span>
<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
</div>
<div class="condition">
<span class="textfont">姓名:</span>
<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
</div>
<div class="condition">
<span class="textfont">模块:</span>
<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
</div>
<div class="condition">
<span class="textfont">账号:</span>
<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
</div>
<div class="condition">
<span class="textfont">岗位:</span>
<el-input v-model="form.order_sn" placeholder="请输入" @keyup.enter.native="screen()"></el-input>
</div>
<div class="condition">
<span class="textfont">归属团队:</span>
<el-select v-model="form.customer_id" placeholder="请选择1" @keyup.enter.native="screen()">
<el-option v-for="item in orderstateid" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
<div class="condition">
<span class="textfont">归属企业:</span>
<el-select v-model="form.customer_id" placeholder="请选择1" @keyup.enter.native="screen()">
<el-option v-for="item in orderstateid" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
<div class="condition">
<span class="textfont">状态:</span>
<el-select v-model="form.customer_id" placeholder="请选择1" @keyup.enter.native="screen()">
<el-option v-for="item in orderstateid" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
<div class="condition">
</div>
<div class="condition">
</div>
<div style="text-align: right;margin-right: 1%;" class="condition">
<el-button type="primary" icon="el-icon-search">查询</el-button>
<el-button icon="el-icon-refresh">重置</el-button>
</div>
</div>
</div>
<!--表格上方点击事件-->
<div style="background: #FFFFFF;padding: 0px 20px 0px 20px;margin-top: 10px;text-align: right;">
</div>
<div style="padding: 15px 20px 20px 20px;background: #FFFFFF;">
<vxe-grid :loading="loading" border resizable keep-source ref="xGrid" id="toolbar_demo_1" :height="tableHeight" :import-config="{}" :export-config="{}" :columns="tableColumn" :toolbar-config="tableToolbar" :pager-config="tablePage" :data="tableData">
<template #operation="{ row }">
<vxe-button v-for='(index,item) in row.caozuo' :key="index" status="primary" @click="uploadFileEvent(row)">{{item.aaa}}</vxe-button>
</template>
<template #toolbar_buttons>
<el-popover placement="bottom" width="150" height="150" trigger="click" >
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<draggable v-model="citiestablelist" @end="end" chosen-class="chosen" force-fallback="true" group="people" animation="500">
<transition-group tag="div" id="citiestablelist" class="item-ul">
<div v-for="city in citiestablelist" :key="city.field" class='item'>
<i class="el-icon-rank"></i>
<el-checkbox v-model='city.checked1' :label="city" :disabled='city.disabled' style="display:block;display: inline-block;margin-left: 10px;" @change="handleCheckedCitiesChange">{{city.title}}</el-checkbox>
</div>
</transition-group>
</draggable>
<el-button slot="reference" icon="el-icon-setting" circle style='margin-right: 10px;'></el-button>
</el-popover>
<vxe-button @click="">批量状态设置</vxe-button>
<vxe-button @click="">批量修改</vxe-button>
<vxe-button @click="">新建</vxe-button>
</template>
<template #pager>
<vxe-pager border :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :current-page.sync="tablePage.currentPage" :page-size.sync="tablePage.pageSize" :total="tablePage.total" @page-change="handlePageChange">
</vxe-pager>
</template>
</vxe-grid>
</div>
</div>
</template>
<script>
//拖拽组件,暂时没用
import draggable from 'vuedraggable'
import { fetchData } from '../../../../api/index';
export default {
name: 'basetable',
data() {
return {
//所有表格的值
citiestablelist: [{
field: '1',
disabled: true,
type: 'checkbox',
width: 160,
checked1: true,
},
{
field: '2',
type: 'seq',
title: '序号',
width: 160,
checked1: true,
},
{
field: 'name',
title: '账号',
width: 160,
checked1: true,
editRender: {
name: 'input'
}
},
{
field: 'money',
title: '工号',
width: 160,
checked1: false,
//是否正序倒叙
sortable: true,
filters: [{
data: ''
}],
filterRender: {
name: 'input',
attrs: {
placeholder: '按回车确认筛选'
},
events: {
keyup: this.enterFilterEvent
}
},
editRender: {
name: 'input',
events: {
focus: this.ageFocusEvent
}
}
},
{
field: 'state',
title: '昵称',
width: 500,
checked1: false,
filters: [{
label: '成功',
value: '成功'
},
{
label: '失败',
value: '失败'
},
],
},
{
field: 'data1',
title: '姓名',
width: 160,
checked1: false,
//是否正序倒叙
sortable: true,
filters: [{
data: ''
}],
filterRender: {
name: 'input',
attrs: {
placeholder: '按回车确认筛选'
},
events: {
keyup: this.enterFilterEvent
}
},
editRender: {
name: 'input'
}
},
{
field: 'id',
title: '归属团队',
width: 160,
checked1: false,
editRender: {
name: 'input'
}
},
{
field: 'thumb',
title: '岗位',
checked1: false,
showOverflow: true,
minWidth: 300,
editRender: {
name: 'input'
}
},
{
field: '10',
title: '操作',
width: 320,
fixed: "right",
showOverflow: true,
slots: {
default: 'operation'
}
}
],
loading: false,
//分页
tablePage: {
total: 100,
currentPage: 1,
pageSize: 10
},
tableHeight: window.innerHeight - 330,
form: {},
//时间值
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
orderstateid: [],
tableData: [],
tableToolbar: {
refresh: {
query: this.getData
},
import: true,
export: true,
print: true,
zoom: true,
custom: true,
slots: {
buttons: 'toolbar_buttons',
}
},
//表格table的值
tableColumn: [],
isIndeterminate:true,
checkAll:false,
};
},
created() {
this.getData();
this.handleCheckedCitiesChange()
},
//拖拽组件,暂时没用
components: {
draggable
},
methods: {
//全选
handleCheckAllChange(val) {
console.log(val)
if(val){
for(var i = 0;i<this.citiestablelist.length;i++){
if(!this.citiestablelist[i].disabled){
this.citiestablelist[i].checked1 = true
}
}
}else{
for(var i = 0;i<this.citiestablelist.length;i++){
if(!this.citiestablelist[i].disabled){
this.citiestablelist[i].checked1 = false
}
}
}
// this.tableColumn = val ? this.citiestablelist : [];
this.handleCheckedCitiesChange()
this.isIndeterminate = false;
},
//拖拽结束
end(evt){
console.log(this.citiestablelist)
let tableColumnoldlist = []
for(var i = 0;i<this.citiestablelist.length;i++){
if(this.citiestablelist[i].checked1){
tableColumnoldlist.push(this.citiestablelist[i])
}
}
this.tableColumn = tableColumnoldlist
},
handleCheckedCitiesChange(val) {
let tableColumnoldlist = []
for(var i = 0;i<this.citiestablelist.length;i++){
if(this.citiestablelist[i].checked1){
tableColumnoldlist.push(this.citiestablelist[i])
}
}
this.tableColumn = tableColumnoldlist
this.checkAll = this.tableColumn.length === this.citiestablelist.length;
this.isIndeterminate = this.tableColumn.length > 0 && this.tableColumn.length < this.citiestablelist.length;
},
// 表格内部操作按钮
uploadFileEvent(row) {
console.log(row)
},
//分页
handlePageChange({
currentPage,
pageSize
}) {
this.tablePage.currentPage = currentPage
this.tablePage.pageSize = pageSize
this.getData()
},
//筛选回车事件
enterFilterEvent({
$panel,
column
}, event) {
if(event.keyCode === 13) {
console.log('筛选回车事件')
$panel.confirmFilter()
}
},
toolbarCustomEvent() {
console.log("aaa")
},
// 获取 easy-mock 的模拟数据
getData() {
this.loading = true
this.tableData = [{
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"data1": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"data1": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
}, {
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"data1": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"data1": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
}, {
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"data1": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"data1": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
}, {
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"data1": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"data1": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png",
'caozuo': [{
aaa: '设置'
}, {
aaa: '删除'
}]
}
]
setTimeout(() => {
this.loading = false
}, 2000);
},
//表格上的刷新
reload() {
// 清除所有状态
this.$refs.xGrid.clearAll()
return this.getData()
},
// 触发搜索按钮
handleSearch() {
this.$set(this.query, 'pageIndex', 1);
this.getData();
},
}
};
</script>
<style scoped>
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
display: inline-block;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #ff0000;
}
.mr10 {
margin-right: 10px;
}
.table-td-thumb {
display: block;
margin: auto;
width: 40px;
height: 40px;
}
.container {
padding: 20px 20px 5px 20px;
border: none;
}
.condition {
width: 24%;
margin-bottom: 16px;
margin-right: 1%;
border-radius: 0 !important;
text-align: right;
}
.condition1 {
width: calc(48% - 125px);
margin-bottom: 16px;
border-radius: 0 !important;
text-align: right;
margin-right: calc(2% + 125px);
}
.condition>div {
width: calc(100% - 125px);
}
.condition1>div {
width: calc(50% - 62.5px);
}
.handle-box {
display: flex;
flex-wrap: wrap;
}
.textfont {
min-width: 125px;
color: #666;
font-size: 14px;
}
.chosen {
background-color: #f1f1f1;
}
.item{
margin-top: 5px;
padding: 5px;
}
.item:hover {
background-color: #f1f1f1;
cursor: move;
}
</style>
vue列设置 多选框加上拖拽效果
最新推荐文章于 2024-03-15 11:41:16 发布