<div class="ml-20"><el-input v-model.trim="queryParams.wipOrderNo" size="small" clearable style="width:150px" placeholder="请输入工单号" /><el-select class="ml-20" v-model="queryParams.progressStatus" filterable  clearable style="width:150px" size="small"  placeholder="请选择工单状态"><el-optionv-for="item in progressoptions":key="item.dictValue":label="item.dictLabel":value="item.dictValue"></el-option></el-select><el-select  class="ml-20" v-model="queryParams.progressStatus" filterable  clearable style="width:150px" size="small"  placeholder="请选择工单类型"><el-optionv-for="item in progressoptions":key="item.dictValue":label="item.dictLabel":value="item.dictValue"></el-option></el-select><el-date-pickerv-model="time"size="small"style="width:350px"class="mt-10"type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"@change="dataChange"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker><el-button type="primary" size="small" class="ml-20" @click="handleQuery">查询</el-button><div  class="mt-20 mr-20"><el-table :data="dataList" class="Gradient"><el-table-column label="工单号" align="center" prop="gongdanhao" /><el-table-column label="工单状态" align="center" prop="zhuangtai" /><el-table-column label="工单类型" align="center" prop="leixing" /><el-table-column label="计划开始时间" align="center" prop="shijian" width="150px" /><!-- :header-cell-style="{ background: 'linear-gradient(270deg, rgba(0,192,255,0.2) 0%, rgba(0,192,255,0.4) 45%, rgba(0,192,255,0.6) 72%, #00C0FF 100%)', color: '#ffffff', fontSize: '14px', textAlign: 'center' }"> --><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button  @click="bindingpoint(scope.row)" type="text" size="small" style="color: rgb(4, 192, 255);">详情</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"style="text-align: center;margin:20px 0;":current-page="queryParams.pageNum":page-size="queryParams.pageSize":total="queryParams.total"layout="total, sizes, prev, pager, next, jumper"></el-pagination></div></div>

dataList:[{gongdanhao:'DB000001',zhuangtai:'已接受',leixing:'量产工单',shijian:'2023-08-05  16:06:09'},{gongdanhao:'DB000001',zhuangtai:'已接受',leixing:'量产工单',shijian:'2023-08-05  16:06:09'},{gongdanhao:'DB000001',zhuangtai:'已接受',leixing:'量产工单',shijian:'2023-08-05  16:06:09'}],time:[],queryParams:{wipOrderNo:'',progressStatus:'',total:30},

样式

.kanbanapp-main{.el-input--small .el-input__inner{border: rgba(204,202,204,0.2);background:rgba(204,202,204,0.2);color: #fff;}.el-range-editor--small.el-input__inner{background:rgb(43 49 76);// background:rgba(204,202,204,0.2);border: rgba(204,202,204,0.2);}.el-range-editor--small .el-range-input{background:rgb(43 49 76);color: #fff;// border: rgba(204,202,204,0.2);}.el-button--primary {background: rgba(4, 192, 255, 1);border-color: rgba(4, 192, 255, 1);}.Gradient.el-table::before {height: 0;}.Gradient {background: transparent!important;}.Gradient tbody tr {background-color: transparent!important;}.Gradient thead tr {background: linear-gradient(270deg, rgba(2, 67, 119,0.2) 0%, rgba(2, 67, 119,0.4) 45%, rgba(2, 67, 119,0.7) 72%, rgb(2, 67, 119) 100%) !important;}.Gradient  .el-table__header-wrapper, .el-table__fixed-header-wrapper {th {background: none;color: #fff;font-size: 14px;}}.Gradient  .el-table__body tr:hover>td.el-table__cell {background-color: transparent!important;}.Gradient  td.el-table__cell {border: 0;color: #ffffff;text-align: center;font-size: 14px;} .Gradient .el-table .el-table__header-wrapper th{background: transparent!important;}.el-pagination .el-select .el-input .el-input__inner{background: none;border: 1px solid #506B8A;color: #84919A;}.el-pagination__editor.el-input .el-input__inner{background: none;border: 1px solid #506B8A;color: #84919A;}.el-pagination .btn-prev{background: none;color: #84919A;}.el-pagination .btn-next{background: none;color: #84919A;}.el-pager li.active{background: rgba(0, 192, 255, 1);color: #fff;}.el-pagination__total{color: #84919A;}.el-pager li{background: none;color: #84919A;border: 1px solid #506B8A;margin: 0 5px ;}.el-pagination__jump{color: #84919A;}}