From 6f722fd40047103177e8ccfa4c84a7e0f7a9a885 Mon Sep 17 00:00:00 2001 From: wl <173@qq.com> Date: 星期三, 14 十二月 2022 15:51:01 +0800 Subject: [PATCH] 违规检索分页 --- src/views/intelligentPatrol/illegalSearch/index.vue | 114 ++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 89 insertions(+), 25 deletions(-) diff --git a/src/views/intelligentPatrol/illegalSearch/index.vue b/src/views/intelligentPatrol/illegalSearch/index.vue index 9e7e68c..7c90d74 100644 --- a/src/views/intelligentPatrol/illegalSearch/index.vue +++ b/src/views/intelligentPatrol/illegalSearch/index.vue @@ -6,14 +6,15 @@ <el-form ref="condition" :model="form" label-width="100px"> <el-form-item :label=item.label :key=item.id v-for="item in headerList" :prop="item.prop"> <el-input v-if="item.type === 'input'" v-model="form[item.prop]" :placeholder="item.placeholder"></el-input> - <el-cascader v-if="item.type === 'cascader'" :options="item.options" :props="{ value: 'id', label: 'regionName' }" - v-model="form[item.prop]" :placeholder="item.placeholder"></el-cascader> + <el-cascader v-if="item.type === 'cascader'" :options="item.options" + :props="{ value: 'id', label: 'regionName' }" v-model="form[item.prop]" + :placeholder="item.placeholder"></el-cascader> <el-select v-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder"> - <el-option v-for="option in item.options" :value="option.id" :key="option.id" :label="option.name"></el-option> + <el-option v-for="option in item.options" :value="option.id" :key="option.id" + :label="option.name"></el-option> </el-select> - <el-date-picker v-if="item.type === 'timepick'" type="datetimerange" v-model="form[item.prop]" start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" value-format="yyyy-MM-dd HH:mm:ss" - ></el-date-picker> + <el-date-picker v-if="item.type === 'timepick'" type="datetimerange" v-model="form[item.prop]" + start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> </el-form-item> </el-form> </div> @@ -68,6 +69,28 @@ </el-table-column> </el-table> </div> + <div class="tools"> + <div class="funs"> + <!-- <div class="funsItem"> + <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox> + </div> + <div class="funsItem"> + <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉��</el-checkbox> + </div> + <div class="funsItem"> + <el-select v-model="myIdx" placeholder="鎵归噺鎿嶄綔" @change="selectChange"> + <el-option v-for="item in options" :key="item.value" :label="item.label" + :value="item.value" :disabled="item.disabled"> + </el-option> + </el-select> + </div> --> + </div> + <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> <!-- 鏌ョ湅鍏蜂綋淇℃伅 --> @@ -95,16 +118,16 @@ // 鑾峰彇缁勭粐鍒楄〃 department.getDepartmentList() - .then(res => { - this.headerList[0].options = res; - }) - .catch(err => this.$message.error(err)) + .then(res => { + this.headerList[0].options = res; + }) + .catch(err => this.$message.error(err)) getVideoPoint({ current: 1, size: 100 }) - .then(({ records }) => { - this.headerList[4].options = records; - }) - .catch(err => this.$message.error(err)) + .then(({ records }) => { + this.headerList[4].options = records; + }) + .catch(err => this.$message.error(err)) }, data() { @@ -114,6 +137,7 @@ info: null, currentPage: 1, pageSize: 10, + totalNum: null, headerList: [ { id: 1, @@ -208,10 +232,11 @@ methods: { getTableData(params) { basecase.getViolationList({ current: this.currentPage, pageSize: this.pageSize, ...params }) - .then(({ records }) => { - this.tableData = records; - }) - .catch(err => this.$message.error(err)) + .then(({ records, total }) => { + this.tableData = records; + this.totalNum = total; + }) + .catch(err => this.$message.error(err)) }, searchTableData() { @@ -250,13 +275,45 @@ this.info = data this.dialogView = true }, - + // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� + changeCurrentPage(page) { + const { alarmTime, organization } = this.form; + const [startTime, endTime] = alarmTime ?? [null, null]; + const [communityId, streetId] = organization ?? [null, null]; + const params = Object.assign({}, this.form); + delete params.alarmTime; + delete params.organization; + this.currentPage = page; + this.getTableData({ startTime, streetId, communityId, endTime, ...params }); + }, + // 涓婁竴椤电偣鍑讳簨浠� + handlePrev(page) { + const { alarmTime, organization } = this.form; + const [startTime, endTime] = alarmTime ?? [null, null]; + const [communityId, streetId] = organization ?? [null, null]; + const params = Object.assign({}, this.form); + delete params.alarmTime; + delete params.organization; + this.currentPage = page; + this.getTableData({ startTime, streetId, communityId, endTime, ...params }); + }, + // 涓嬩竴椤电偣鍑讳簨浠� + handleNext(page) { + const { alarmTime, organization } = this.form; + const [startTime, endTime] = alarmTime ?? [null, null]; + const [communityId, streetId] = organization ?? [null, null]; + const params = Object.assign({}, this.form); + delete params.alarmTime; + delete params.organization; + this.currentPage = page; + this.getTableData({ startTime, streetId, communityId, endTime, ...params }); + }, exportTableData() { basecase.exportViolationData({ current: 1 }) - .then(() => { - this.$message.success('鎿嶄綔鎴愬姛'); - }) - .catch(err => this.$message.error(err)) + .then(() => { + this.$message.success('鎿嶄綔鎴愬姛'); + }) + .catch(err => this.$message.error(err)) } } } @@ -313,9 +370,11 @@ color: #4b9bb7; } } - .el-table{ + + .el-table { color: #4b9bb7; } + .tools { display: flex; justify-content: space-between; @@ -345,5 +404,10 @@ &::v-deep .el-input__inner { border: none; background-color: #09152f; - }}}}}} + } + } + } + } + } +} </style> \ No newline at end of file -- Gitblit v1.8.0