<template>
|
<div class="lkg-manage">
|
<div class="import-btn">
|
<!-- <label> : </label> -->
|
<!-- <el-button
|
size="mini"
|
type="primary"
|
@click="uploadDirectoryTrigger"
|
:loading="uploading"
|
>上传 LKJ 数据文件</el-button
|
> -->
|
<span
|
class="icon iconfont"
|
@click="uploadDirectoryTrigger"
|
style="font-size: 34px; color: #92abd1"
|
></span
|
>
|
<input
|
ref="directoryInput"
|
@change="importDirectory"
|
hidden
|
type="file"
|
accept=".xlsx, .xls"
|
multiple
|
/>
|
</div>
|
|
<div class="lkg-list">
|
<el-table
|
:data="lkgData"
|
stripe
|
style="width: 100%"
|
:header-cell-style="{
|
background: '#2D52D7',
|
color: '#fff',
|
height: '50px',
|
}"
|
>
|
<el-table-column
|
type="index"
|
width="120"
|
label="序号"
|
></el-table-column>
|
<el-table-column prop="CarNumber" label="机车号"></el-table-column>
|
<el-table-column prop="TrainNumber" label="车次"></el-table-column>
|
<el-table-column prop="Driver1" label="司机"></el-table-column>
|
<el-table-column prop="Driver2" label="副司机"></el-table-column>
|
<el-table-column prop="StartTime" label="开始时间"></el-table-column>
|
<el-table-column prop="EndTime" label="结束时间"></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div class="icon-wrap">
|
<span class="iconfont icon del-icon" @click="delLKG(scope.row)"
|
></span
|
>
|
</div>
|
<!-- <i class="el-icon-delete del-icon" ></i> -->
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { uploadLKG, getLKGData, delLKGData } from "@/api/shuohuang";
|
|
export default {
|
data() {
|
return {
|
uploading: false,
|
lkgData: [],
|
};
|
},
|
mounted() {
|
this.fetchLKGData();
|
},
|
methods: {
|
uploadDirectoryTrigger() {
|
this.$refs["directoryInput"].click();
|
},
|
importDirectory() {
|
let _this = this;
|
_this.uploading = true;
|
let formData = new FormData();
|
for (let i = 0; i < this.$refs["directoryInput"].files.length; i++) {
|
formData.append("files", this.$refs["directoryInput"].files[i]);
|
}
|
|
uploadLKG(formData)
|
.then((res) => {
|
if (res && res.success) {
|
this.$message.success("上传成功");
|
}
|
_this.uploading = false;
|
this.fetchLKGData();
|
})
|
.catch((err) => {
|
this.$message.warning("上传失败", err);
|
_this.uploading = false;
|
});
|
},
|
fetchLKGData() {
|
getLKGData().then((rsp) => {
|
if (rsp && rsp.success) {
|
this.lkgData = rsp.data;
|
}
|
});
|
},
|
delLKG(row) {
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
delLKGData({ id: row.ID })
|
.then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$message.success("删除成功");
|
} else {
|
this.$message.warning("删除失败");
|
}
|
|
this.fetchLKGData();
|
})
|
.catch((err) => {
|
this.$message.warning("删除失败");
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.lkg-manage {
|
background: #fff;
|
padding: 25px 33px;box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
|
border-radius: 10px;
|
.import-btn {
|
text-align: left;
|
margin-bottom: 10px;
|
span {
|
cursor: pointer;
|
}
|
button {
|
span {
|
color: #fff;
|
}
|
}
|
}
|
|
.lkg-list {
|
// margin: 10px 20px;
|
.el-table--striped
|
.el-table__body
|
tr.el-table__row--striped
|
td.el-table__cell {
|
background: #f4f6f9;
|
}
|
.el-table__row > td {
|
border: none;
|
}
|
.el-table th.is-leaf {
|
border: none;
|
}
|
.el-table {
|
margin-top: 15px;
|
border: none;
|
}
|
th.el-table__cell > .cell {
|
color: #fff;
|
}
|
}
|
.icon-wrap {
|
background: #9dabc1;
|
width: 24px; height: 24px;
|
border-radius: 50%;
|
text-align: center;
|
.del-icon {
|
color: #fff;
|
font-size: 21px;
|
cursor: pointer;
|
}
|
}
|
.icon-wrap:hover{
|
background: #D94141;
|
}
|
|
}
|
</style>
|
