From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 16 七月 2025 22:39:23 +0800 Subject: [PATCH] 添加时间筛选 --- src/views/operate/rectification/surveyList/index.vue | 570 ++++++++++++++++++++++++++++++-------------------------- 1 files changed, 304 insertions(+), 266 deletions(-) diff --git a/src/views/operate/rectification/surveyList/index.vue b/src/views/operate/rectification/surveyList/index.vue index 085739f..a55ef57 100644 --- a/src/views/operate/rectification/surveyList/index.vue +++ b/src/views/operate/rectification/surveyList/index.vue @@ -1,290 +1,328 @@ <template> - <div class="otherInterface"> - <header> - <div class="headerTitle">杩愯惀绠$悊 >> 涓撻」鏁存不 > 鏅煡鍒楄〃</div> - </header> - <main> - <div class="mainHeader"> - <div class="add"> - <el-button type="primary" icon="el-icon-plus">鏂板浠诲姟</el-button> - </div> - <div class="date-search"> - <span>鎸夊ぉ鏌ヨ:</span> - <div class="mydate"> - <el-input placeholder="璇疯緭鍏ュ紑濮嬫椂闂�"></el-input> - <div class="line"> - 鈥斺�斺�� 鈥斺�斺�� - </div> - <el-input placeholder="璇疯緭鍏ョ粨鏉熸椂闂�"></el-input> - </div> - </div> - <div class="search"> - <el-input placeholder="璇疯緭鍏ユ爣棰樻垨鑰呬换鍔$紪鍙�"></el-input> - </div> - <div class="btn"> - <el-button icon="el-icon-plus" type="primary">鎼滅储</el-button> - <el-button icon="el-icon-delete">閲嶇疆</el-button> - </div> - </div> - <div class="mainContent"> - <!-- @selection-change="handleSelectionChange" --> - <!-- 鏁版嵁娓叉煋 --> - <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" - :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" - :row-class-name="tableRowClassName"> - <el-table-column type="selection" width="55"> - </el-table-column> - <el-table-column label="浠诲姟缂栧彿" prop="applicationName" min-width="10"> - </el-table-column> - <el-table-column prop="applicationType" label="闂绫诲瀷" min-width="10"> - </el-table-column> - <el-table-column prop="websiteUrl" label="澶х被" min-width="10"> - </el-table-column> - <el-table-column prop="applicationType" label="灏忕被" min-width="10"> - </el-table-column> - <el-table-column prop="applicationType" label="琛楅亾" min-width="10"> - </el-table-column> - <el-table-column prop="applicationType" label="绀惧尯" min-width="10"> - </el-table-column> - <el-table-column prop="applicationType" label="浠诲姟鎻忚堪" min-width="10"> - </el-table-column> - <el-table-column prop="applicationType" label="涓婃姤鏃堕棿" min-width="10"> - </el-table-column> - <el-table-column label="鎿嶄綔" min-width="10"> - <template slot-scope="scope"> - <span @click="handleDelete(scope.row)">鏌ョ湅</span> - </template> - </el-table-column> - </el-table> - <!-- 鍒嗛〉 --> - <!-- <div class="pagination"> - <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum" - :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev" - @next-click="handleNext"> - </el-pagination> - </div> --> - </div> - </main> - <footer> - <!-- 鍒涘缓寮圭獥 --> - <el-dialog :visible.sync="dialogCreate" title="鏂板绗笁鏂规帴鍙�" width="45%" v-if="dialogCreate" - :before-close="handleClose"> - <createInterface /> - </el-dialog> - <!-- 鏌ョ湅寮圭獥 --> - <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'淇敼绗笁鏂规帴鍙�':'鏌ョ湅绗笁鏂规帴鍙�'" width="45%" - v-if="dialogUpdate" :before-close="handleClose"> - <viewInterface :updateFlag="updateFlag" :userInfo=userInfo /> - </el-dialog> - </footer> - </div> + <div class="otherInterface"> + <header> + <div class="headerTitle">杩愯惀绠$悊 >> 涓撻」鏁存不 > 鏅煡鍒楄〃</div> + </header> + <main> + <div class="mainHeader"> + <div class="add"> + <el-button type="primary" icon="el-icon-plus" @click="handleAdd()" + >鏂板浠诲姟</el-button + > + </div> + <div class="date-search"> + <span>鎸夊ぉ鏌ヨ:</span> + <div class="block"> + <el-date-picker + v-model="beginTime" + type="date" + placeholder="璇烽�夋嫨寮�濮嬫棩鏈�" + > + </el-date-picker> + </div> + <span>鈥斺�斺�� 鈥斺�斺��</span> + <div class="block"> + <el-date-picker + v-model="endTime" + type="date" + placeholder="璇烽�夋嫨缁撴潫鏃ユ湡" + > + </el-date-picker> + </div> + </div> + <div class="search"> + <el-input placeholder="璇疯緭鍏ユ爣棰樻垨鑰呬换鍔$紪鍙�"></el-input> + </div> + <div class="btn"> + <el-button icon="el-icon-search" type="primary">鎼滅储</el-button> + <el-button icon="el-icon-delete">閲嶇疆</el-button> + </div> + </div> + <div class="mainContent"> + <!-- 鏁版嵁娓叉煋 --> + <el-table + ref="multipleTable" + :data="tableData" + tooltip-effect="dark" + style="width: 100%" + :header-cell-style="{ + 'font-weight': '650', + 'line-height': '45px', + }" + :row-class-name="tableRowClassName" + > + <el-table-column label="浠诲姟缂栧彿" prop="num" min-width="10"> + </el-table-column> + <el-table-column prop="type" label="闂绫诲瀷" min-width="10"> + </el-table-column> + <el-table-column prop="bigclass" label="澶х被" min-width="10"> + </el-table-column> + <el-table-column prop="subclass" label="灏忕被" min-width="10"> + </el-table-column> + <el-table-column prop="street" label="琛楅亾" min-width="10"> + </el-table-column> + <el-table-column prop="community" label="绀惧尯" min-width="10"> + </el-table-column> + <el-table-column prop="task" label="浠诲姟鎻忚堪" min-width="10"> + </el-table-column> + <el-table-column prop="reportTime" label="涓婃姤鏃堕棿" min-width="10"> + </el-table-column> + <el-table-column label="鎿嶄綔" min-width="10"> + <template slot-scope="scope"> + <span @click="handleView(scope.row)" style="cursor: pointer" + >鏌ョ湅</span + > + </template> + </el-table-column> + </el-table> + </div> + </main> + <footer> + <!-- 鍒涘缓寮圭獥 --> + <el-dialog + :visible.sync="dialogCreate" + title="鏂板" + width="45%" + v-if="dialogCreate" + :before-close="handleClose" + > + <createInterface @closeDialog="closeDialog" /> + </el-dialog> + <!-- 鏌ョ湅寮圭獥 --> + <el-dialog + :visible.sync="dialogUpdate" + :title="updateFlag ? '缂栬緫' : '璇︽儏'" + width="45%" + v-if="dialogUpdate" + :before-close="handleClose" + > + <viewInterface :updateFlag="updateFlag" :userInfo="userInfo" /> + </el-dialog> + </footer> + </div> </template> <script> -import createInterface from './components/createInterface'; -import viewInterface from './components/viewInterface' +import createInterface from "./components/createInterface"; +import viewInterface from "./components/viewInterface"; export default { - components: { - createInterface, viewInterface - }, - data() { - return { - tableData: [], - search: "", - dialogCreate: false, - dialogUpdate: false, - updateFlag: false, - userInfo: '', - date:'', - // totalNum: 200, - // pageSize: 10, - // currentPage: 1, + components: { + createInterface, + viewInterface, + }, + data() { + return { + tableData: [ + { + num: 1234, + type: "鍩庣绫讳簨浠�", + bigclass: "鍏朵粬", + subclass: "鍏朵粬", + street: "琛楅亾", + community: "绀惧尯", + task: "浠诲姟鎻忚堪", + reportTime: "2022-10-31 13:20", + }, + { + num: 1234, + type: "鍩庣绫讳簨浠�", + bigclass: "鍏朵粬", + subclass: "鍏朵粬", + street: "琛楅亾", + community: "绀惧尯", + task: "浠诲姟鎻忚堪", + reportTime: "2022-10-31 13:20", + }, + { + num: 1234, + type: "鍩庣绫讳簨浠�", + bigclass: "鍏朵粬", + subclass: "鍏朵粬", + street: "琛楅亾", + community: "绀惧尯", + task: "浠诲姟鎻忚堪", + reportTime: "2022-10-31 13:20", + }, + ], + search: "", + dialogCreate: false, + dialogUpdate: false, + updateFlag: false, + userInfo: "", + date: "", + beginTime: "", + endTime: "", + }; + }, + created() { + this.getUserList(); + }, + methods: { + // 鑾峰彇鎺ュ彛鍒楄〃 + getUserList() { + const that = this; + this.dialogCreate = false; + this.$axios.get("sccg/system/portal/thirdApp/search").then((res) => { + const { code, data } = res; + if (code === 200) { + this.tableData = data; } + }); }, - created() { - this.getUserList(); + // 璁剧疆琛ㄦ牸鏂戦┈绾� + tableRowClassName({ row, rowIndex }) { + if ((rowIndex + 1) % 2 === 0) { + return "warning-row"; + } else { + return "success-row"; + } }, - methods: { - // 鑾峰彇鎺ュ彛鍒楄〃 - getUserList() { - const that = this; - // const { currentPage, pageSize, search } = this; - this.dialogCreate = false; - this.$axios.get("sccg/system/portal/thirdApp/search").then(res => { - const { code, data } = res; - if (code == 200) { - this.tableData = data; - } - }) - }, - // 璁剧疆琛ㄦ牸鏂戦┈绾� - tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { - return 'warning-row'; - } else { - return 'success-row'; - } - return ''; - }, - // 鎵撳紑鏂板鐣岄潰 - handleAdd() { - this.dialogCreate = true; - }, - // 鍒涘缓寮圭獥鍏抽棴 - handleClose(done) { - const that = this; - this.$confirm('纭鍏抽棴锛�') - .then(_ => { - that.dialogCreate = false; - done(); - }) - .catch(_ => { }); - }, - // 鍒涘缓鏌ョ湅寮圭獥 - handleView(rowData) { - this.userInfo = rowData; - this.dialogUpdate = true; - }, - // 鍒犻櫎绗笁鏂规帴鍙� - handleDelete({ id }) { - console.log(id); - this.$axios.delete('sccg/system/portal/thirdApp/delete', { - params: { - id - } - }).then(res => { - console.log(res); - }) - } - // // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� - // changeCurrentPage(page) { - // this.currentPage = page; - // this.getUserList(); - // }, - // // 涓婁竴椤电偣鍑讳簨浠� - // handlePrev(page) { - // this.currentPage = page; - // this.getUserList(); - // }, - // // 涓嬩竴椤电偣鍑讳簨浠� - // handleNext(page) { - // this.currentPage = page; - // this.getUserList(); - // }, - } -} + // 鎵撳紑鏂板鐣岄潰 + handleAdd() { + this.dialogCreate = true; + }, + // 鍒涘缓寮圭獥鍏抽棴 + handleClose(done) { + const that = this; + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + that.dialogCreate = false; + done(); + }) + .catch((_) => {}); + }, + closeDialog({ flag, index }) { + this.dialogCreate = flag; + }, + // 鍒涘缓鏌ョ湅寮圭獥 + handleView(rowData) { + this.userInfo = rowData; + this.dialogUpdate = true; + }, + // 鍒犻櫎绗笁鏂规帴鍙� + handleDelete({ id }) { + this.$axios + .delete("sccg/system/portal/thirdApp/delete", { + params: { + id, + }, + }) + .then((res) => { + }); + }, + }, +}; </script> -<!-- sccg/system/portal/thirdApp/search --> <style lang="scss" scoped> .otherInterface { - header { + header { + display: flex; + line-height: 60px; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + &::v-deep .el-button { + background-color: #eb5d01; + border: none; + color: #fff; + border-radius: 20px; + } + } + + main { + padding: 10px 20px; + + .mainHeader { + padding-left: 20px; + display: flex; + line-height: 60px; + color: #4b9bb7; + // background-color: #09152f; + display: flex; + .add, + .search, + .btn { + flex: 1; + } + .date-search { + flex: 3; display: flex; - line-height: 60px; - justify-content: space-between; - padding: 0 20px; - color: #4b9bb7; - - &::v-deep .el-button { - background-color: #eb5d01; - border: none; - color: #fff; - border-radius: 20px; + .mydate { + display: flex; + .line { + margin: 0 10px 0 20px; + } } + } + .el-input { + width: 180px; + height: 35px; + margin-left: 10px; + + // &::v-deep .el-input__inner { + // background-color: #09152f; + // border: 1px solid #17324c; + // font-size: 12px; + // } + } } - main { - padding: 10px 20px; + .mainContent { + margin-top: 20px; - .mainHeader { - padding-left: 20px; - display: flex; - line-height: 60px; - color: #4b9bb7; - background-color: #09152f; - display: flex; - .add,.search,.btn{ - flex:1; - } - .date-search{ - flex: 3; - display: flex; - .mydate{ - display: flex; - .line{ - margin:0 10px 0 20px; - } - } - } - .el-input { - width: 180px; - height: 35px; - margin-left: 10px; + .el-table { + // color: #4b9bb7; - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - font-size: 12px; - } - } + &::v-deep .el-table__empty-block { + background-color: #06122c; } - .mainContent { - margin-top: 20px; - - .el-table { - color: #4b9bb7; - - &::v-deep .el-table__empty-block { - background-color: #06122c; - } - - &::v-deep .el-table__empty-text { - color: #4b9bb7; - } - - &::v-deep .warning-row { - background-color: #06122c; - } - - &::v-deep .success-row { - background-color: #071f39; - } - } - - .line { - padding: 0 5px; - // margin-top: -10px; - } + &::v-deep .el-table__empty-text { + color: #4b9bb7; } + + &::v-deep .warning-row { + background-color: #06122c; + } + + &::v-deep .success-row { + background-color: #071f39; + } + } + + .line { + padding: 0 5px; + // margin-top: -10px; + } + } + } + + footer { + &::v-deep .el-dialog__header, + &::v-deep .el-dialog__body { + background-color: #06122c; } - footer { - - &::v-deep .el-dialog__header, - &::v-deep .el-dialog__body { - background-color: #06122c; - } - - &::v-deep .el-dialog__header { - display: flex; - align-items: center; - background-color: #fff; - padding: 20px; - line-height: 60px; - } - - &::v-deep .el-dialog__title { - color: #4b9bb7; - } - - &::v-deep .el-dialog__close { - width: 20px; - height: 20px; - // color: #fff; - } - - &::v-deep .el-dialog__body { - padding: 0; - } + &::v-deep .el-dialog__header { + display: flex; + align-items: center; + background-color: #fff; + padding: 20px; + line-height: 60px; } + + &::v-deep .el-dialog__title { + color: #4b9bb7; + } + + &::v-deep .el-dialog__close { + width: 20px; + height: 20px; + // color: #fff; + } + + &::v-deep .el-dialog__body { + padding: 0; + } + } } </style> \ No newline at end of file -- Gitblit v1.8.0