<template>
|
<div class="transfer-memo">
|
<div class="filter-bar flex-box">
|
<div>
|
<label>操作时间</label>
|
<el-date-picker
|
v-model="searchTime"
|
type="datetimerange"
|
size="small"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
style="max-width: 350px"
|
></el-date-picker>
|
</div>
|
<div>
|
<label>操作人</label>
|
<div>
|
<el-input
|
v-model="Operator"
|
size="small"
|
style="width: 130px"
|
></el-input>
|
</div>
|
</div>
|
<div>
|
<label>转储状态</label>
|
<div>
|
<el-select v-model="Status" size="small">
|
<el-option value="" label="全部"></el-option>
|
<el-option
|
style="width: 190px"
|
v-for="item in allTransferStatus"
|
:key="item.id"
|
:value="item.name"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="btns">
|
<el-button
|
type="primary"
|
size="small"
|
@click="renderTable"
|
class="query-btn"
|
>查询</el-button
|
>
|
<el-button
|
type="primary"
|
size="small"
|
@click="resetFilter"
|
class="reset-btn"
|
>重置</el-button
|
>
|
</div>
|
</div>
|
<div class="table-area">
|
<el-table
|
:data="tableData"
|
fit
|
stripe
|
:header-cell-style="{
|
background: '#2D52D7',
|
color: '#fff',
|
height: '50px',
|
}"
|
>
|
<el-table-column prop="OperaterDate" label="操作时间"></el-table-column>
|
<el-table-column prop="Operator" label="操作人"></el-table-column>
|
<el-table-column prop="tranferDevice" label="转储设备名称">
|
<template slot-scope="scope">
|
<div>设备{{ scope.row.DeviceID }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="SlotID" label="卡槽位置">
|
<template slot-scope="scope">
|
<div>插槽{{ scope.row.SlotID }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Status" label="转储状态"></el-table-column>
|
<el-table-column prop="Cover" label="现场图片"></el-table-column>
|
<el-table-column prop="Content" label="转储内容"></el-table-column>
|
</el-table>
|
<el-pagination
|
class="pagination-under-table"
|
@size-change="handleTableSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="PageIndex"
|
:page-size="PageSize"
|
:page-sizes="pageSizes"
|
layout="total,sizes, prev, pager, next"
|
:total="tableTotal"
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getTransferStatusList, getTransferRecord } from "@/api/shuohuang";
|
export default {
|
data() {
|
return {
|
pickerOptions: {
|
shortcuts: [
|
{
|
text: "今天",
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setHours(0, 0, 0);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
{
|
text: "昨天",
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
start.setHours(0, 0, 0);
|
end.setTime(end.getTime() - 3600 * 1000 * 24);
|
end.setHours(23, 59, 59);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
{
|
text: "近三天",
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
{
|
text: "近一周",
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
//start.setHours(0,0,0);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
],
|
},
|
Status: "",
|
Operator: "",
|
allTransferStatus: [],
|
tableData: [],
|
tableTotal: 0,
|
PageIndex: 1,
|
pageSizes: [8, 15, 20],
|
PageSize: 8,
|
searchTime: [
|
"2020-01-01 00:00:00",
|
this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
|
],
|
};
|
},
|
mounted() {
|
this.renderTable();
|
this.renderTransferStatusList();
|
},
|
methods: {
|
handleCurrentChange() {
|
this.renderTable();
|
},
|
resetFilter() {
|
this.searchTime = [];
|
this.Operator = "";
|
this.Status = "";
|
this.renderTable();
|
},
|
handleTableSizeChange(size) {
|
this.tablePageSize = size;
|
this.renderTable();
|
},
|
renderTransferStatusList() {
|
let _this = this;
|
getTransferStatusList().then((res) => {
|
_this.allTransferStatus = res.data.map((item, index) => {
|
return {
|
id: "sta" + index,
|
name: item,
|
};
|
});
|
});
|
},
|
renderTable() {
|
let _this = this;
|
let params = {
|
Operator: this.Operator,
|
Status: this.Status,
|
PageIndex: this.PageIndex,
|
PageSize: this.PageSize,
|
StartDate: this.searchTime ? this.searchTime[0] : "",
|
EndDate: this.searchTime ? this.searchTime[1] : "",
|
};
|
|
getTransferRecord(params).then((res) => {
|
_this.tableData = res.data;
|
_this.tableTotal = res.total;
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.transfer-memo {
|
padding: 33px;
|
background-color: #fff;
|
height: 100%;
|
border-radius: 10px;
|
box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
|
.table-area .el-table {
|
border: none;
|
}
|
.el-table th.el-table__cell > .cell {
|
color: #fff;
|
}
|
.btns {
|
.reset-btn {
|
background-color: #a6b5cb !important;
|
border-color: #a6b5cb !important;
|
}
|
.query-btn {
|
background-color: #2d52d7 !important;
|
}
|
button span {
|
color: #fff;
|
}
|
}
|
.flex-box {
|
margin-bottom: 23px;
|
}
|
.filter-bar.flex-box {
|
& > div {
|
display: flex;
|
align-items: center;
|
margin-right: 35px;
|
font-size: 13px;
|
label {
|
padding-right: 15px;
|
color: #425277;
|
}
|
}
|
}
|
.el-table tbody tr:hover > td {
|
background-color: inherit !important;
|
}
|
.el-table th.el-table__cell.is-leaf,
|
.el-table td.el-table__cell {
|
border-bottom: none;
|
}
|
.el-table {
|
border: 1px solid #dedede;
|
th {
|
background: #f5f5f5;
|
color: #333;
|
}
|
.operation {
|
cursor: pointer;
|
}
|
.el-table--striped
|
.el-table__body
|
tr.el-table__row--striped
|
td.el-table__cell {
|
background: #f4f6f9;
|
}
|
}
|
.pagination-under-table {
|
margin-top: 20px;
|
}
|
}
|
</style>
|
