From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue | 165 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 137 insertions(+), 28 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue b/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue index b4c9115..d684bb0 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue @@ -1,13 +1,23 @@ <template> <div class="lkg-manage"> <div class="import-btn"> - <label>涓婁紶LKG鏁版嵁鏂囦欢</label> - <el-button + <!-- <label> : </label> --> + <!-- <el-button size="mini" type="primary" @click="uploadDirectoryTrigger" :loading="uploading" - >鐐瑰嚮涓婁紶</el-button> + >涓婁紶 LKJ 鏁版嵁鏂囦欢</el-button + > --> + <el-tooltip class="item" effect="dark" content="涓婁紶 LKJ 鏁版嵁鏂囦欢" placement="bottom"> + <span + class="icon iconfont" + @click="uploadDirectoryTrigger" + style="font-size: 34px; color: #92abd1" + ></span + > + </el-tooltip> + <input ref="directoryInput" @change="importDirectory" @@ -19,75 +29,174 @@ </div> <div class="lkg-list"> - <el-table :data="lkgData" stripe style="width: 100%"> - <el-table-column type="index" width="100" label="搴忓彿"></el-table-column> + <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 } from "@/api/shuohuang" +import { uploadLKG, getLKGData, delLKGData } from "@/api/shuohuang"; export default { data() { return { uploading: false, - lkgData: [] - } + lkgData: [], + }; }, mounted() { this.fetchLKGData(); }, methods: { uploadDirectoryTrigger() { - this.$refs['directoryInput'].click(); + 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]) + 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; - }) + 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 => { + 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: 10px 20px; + margin-bottom: 10px; + span { + cursor: pointer; + } + button { + span { + color: #fff; + } + } } .lkg-list { - margin: 10px 20px; + // 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> \ No newline at end of file -- Gitblit v1.8.0