From 5173f8e31d106abd003e123c8679cf53c7940b33 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期一, 30 一月 2023 11:54:12 +0800 Subject: [PATCH] 网格绘制 --- src/views/systemSetting/device/handheldTerminal/index.vue | 158 ++++++++++++++++++++++++++++------------------------ 1 files changed, 86 insertions(+), 72 deletions(-) diff --git a/src/views/systemSetting/device/handheldTerminal/index.vue b/src/views/systemSetting/device/handheldTerminal/index.vue index 03d856f..004e3ae 100644 --- a/src/views/systemSetting/device/handheldTerminal/index.vue +++ b/src/views/systemSetting/device/handheldTerminal/index.vue @@ -23,20 +23,17 @@ <main> <div class="main-content"> <div class="main-title"> - <el-button - class="el-icon-plus" - type="primary" - @click="dialogCreate = true" + <el-button class="el-icon-plus button-addition" type="primary" @click="handleAdd" >娣诲姞</el-button > </div> <!-- 鏁版嵁灞曠ず --> <el-table + border + stripe ref="multipleTable" :header-cell-style="{ - background: '#06122c', - 'font-size': '12px', - color: '#4b9bb7', + 'background':'#F5F5F5', 'font-weight': '650', 'line-height': '45px', }" @@ -53,7 +50,7 @@ </el-table-column> <el-table-column prop="phone" label="鑱旂郴鏂瑰紡" min-width="10"> </el-table-column> - <el-table-column prop="pDepartName" label="鎵�灞為儴闂�" min-width="10"> + <el-table-column prop="pdepartName" label="鎵�灞為儴闂�" min-width="10"> </el-table-column> <el-table-column prop="departName" label="鎵�灞炲ぇ闃�" min-width="10"> </el-table-column> @@ -68,7 +65,7 @@ <el-table-column prop="operation" label="鎿嶄綔" min-width="20"> <template slot-scope="scope"> - <div class="btn"> + <div class="operation"> <span @click="handleEdit(scope.row)">缂栬緫</span> <span class="line">|</span> <span @click="handleDelete(scope.row)">鍒犻櫎</span> @@ -105,7 +102,7 @@ width="60%" :before-close="handleClose" > - <MyForm :info="handheldTerminal" :closeDialog="setTableData"></MyForm> + <MyForm :info="handheldTerminal" @closeDialog="handleCallBack"></MyForm> </el-dialog> </footer> </div> @@ -142,31 +139,47 @@ pageSize: 10, currentPage: 1, renderFlag: false, - handheldTerminal: { - id: 0, - name: "", - code: "", - user: "", - phone: "", - departId: 0, - }, + handheldTerminal: {}, }; }, created() { this.setTableData(); }, methods: { - ...mapActions([ - "getHandheldTerminalList", - "saveHandheldTerminal", - "updateHandheldTerminal", - ]), + ...mapActions(["getHandheldTerminalList", "deleteHandheldTerminal"]), + handleAdd() { + this.handheldTerminal = { + id: 0, + name: "", + code: "", + user: "", + phone: "", + departId: 0, + departName: "", + }; + this.dialogCreate = true; + }, handleEdit(row) { - this.handheldTerminal = row; this.dialogCreate = true; }, - handleDelete(row) {}, + handleDelete(row) { + this.$confirm("纭鍒犻櫎锛�").then((_) => { + this.deleteHandheldTerminal(row.id).then((res) => { + this.$message({ + type: "success", + message: "鍒犻櫎鎴愬姛锛�", + }); + this.setTableData(); + }); + }); + }, + + handleCallBack(e) { + this.currentPage = 1; + this.dialogCreate = false; + this.setTableData(); + }, formatSate(row, column) { return row.state == 1 ? "鍦ㄧ嚎" : "绂荤嚎"; }, @@ -183,6 +196,7 @@ // 寮圭獥鍏抽棴 handleClose(done) { this.$confirm("纭鍏抽棴?").then((_) => { + this.dialogCreate = false; done(); }); }, @@ -194,8 +208,8 @@ pageSize, state: context, }).then((res) => { - this.list = res.records; - this.totalNum = res.total; + this.list = res.records; + this.totalNum = res.total; }); }, handleStateChange(e) { @@ -222,15 +236,15 @@ <style lang="scss" scoped> .list { text-align: left; - margin: 10px 20px; - color: #4b9bb7; - + padding: 10px 20px; + // color: #4b9bb7; + border: 1px solid #ccc; header { - background-color: #09152f; - border: 1pox solid #fff; + background-color: white; + // border: 1pox solid #fff; .header-content { - padding: 0 40px; + padding: 0; display: flex; line-height: 100px; justify-content: space-between; @@ -246,26 +260,26 @@ .el-input { flex: 2; - color: #1d3f57; + // color: #1d3f57; - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } + // &::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; + // } } } } } main { - background-color: #09152f; - margin-top: 20px; + // background-color: #09152f; + //margin-top: 20px; padding-bottom: 50px; - border: 1pox solid #fff; + //border: 1pox solid #fff; .main-title { line-height: 60px; - padding: 10px 20px; + padding:0px; } .tools { @@ -281,7 +295,7 @@ line-height: 28px; display: flex; align-items: center; - border: 1px solid #17324c; + // border: 1px solid #17324c; border-radius: 4px; font-size: 12px; margin-left: 10px; @@ -295,18 +309,18 @@ width: 120px; } - &::v-deep .el-input__inner { - border: none; - background-color: #09152f; - } + // &::v-deep .el-input__inner { + // border: none; + // background-color: #09152f; + // } - &:hover { - border: 1px solid #4b9bb7; - } + // &:hover { + // border: 1px solid #4b9bb7; + // } - &:hover .el-checkbox { - color: #4b9bb7; - } + // &:hover .el-checkbox { + // color: #4b9bb7; + // } } } @@ -317,27 +331,27 @@ justify-content: center; .el-pagination { - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - background-color: #071f39; - color: #4b9bb7; - } + // &::v-deep li, + // &::v-deep .btn-prev, + // &::v-deep .btn-next { + // background-color: #071f39; + // color: #4b9bb7; + // } - &::v-deep .active { - background-color: #409eff; - color: #fff; - } + // &::v-deep .active { + // background-color: #409eff; + // color: #fff; + // } } } } - &::v-deep .warning-row { - background-color: #06122c; - } + // &::v-deep .warning-row { + // background-color: #06122c; + // } - &::v-deep .success-row { - background-color: #071f39; - } + // &::v-deep .success-row { + // background-color: #071f39; + // } .operationBox { display: flex; @@ -347,8 +361,8 @@ background-color: #4b9bb7; } .el-table { - color: #4b9bb7; - font-size: 10px; + // color: #4b9bb7; + // font-size: 10px; .operation { display: flex; @@ -363,4 +377,4 @@ } } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0