wuye / webui

Commit 274e44b593614681cb5cb7defde6346596fb69e8

Authored by wuxw
1 parent d767b5e6

v1.9 优化代码

Inline Side-by-side
Showing 7 changed files with 467 additions and 1 deletions
src/api/fee/roomFeeImportDetailApi.js 0 → 100644
  View file @274e44b
  1 +import request from '@/utils/request'
  2 +
  3 +// 查询导入费用详情
  4 +export function queryImportFeeDetail(params) {
  5 + return new Promise((resolve, reject) => {
  6 + request({
  7 + url: '/importFee/queryImportFeeDetail',
  8 + method: 'get',
  9 + params
  10 + }).then(response => {
  11 + const res = response.data
  12 + if (res.code === 0) {
  13 + resolve(res)
  14 + } else {
  15 + reject(new Error(res.msg || '查询导入费用详情失败'))
  16 + }
  17 + }).catch(error => {
  18 + reject(error)
  19 + })
  20 + })
  21 +}
... ...
src/i18n/index.js
  View file @274e44b
... ... @@ -148,6 +148,7 @@ import { messages as systemI18n } from './systemI18n'
148 148 import { messages as communityI18n } from './communityI18n'
149 149 import { messages as workI18n } from './workI18n'
150 150 import { messages as feeI18n } from './feeI18n'
  151 +import { messages as roomFeeImportMessages } from '../views/fee/roomFeeImportLang'
151 152  
152 153 Vue.use(VueI18n)
153 154  
... ... @@ -293,6 +294,7 @@ const messages = {
293 294 ...communityI18n.en,
294 295 ...workI18n.en,
295 296 ...feeI18n.en,
  297 + ...roomFeeImportMessages.en,
296 298 },
297 299 zh: {
298 300 ...loginMessages.zh,
... ... @@ -432,6 +434,7 @@ const messages = {
432 434 ...communityI18n.zh,
433 435 ...workI18n.zh,
434 436 ...feeI18n.zh,
  437 + ...roomFeeImportMessages.zh,
435 438 }
436 439 }
437 440  
... ...
src/router/feeRouter.js
  View file @274e44b
... ... @@ -60,6 +60,11 @@ export default [
60 60 component: () => import('@/views/fee/roomFeeImportList.vue')
61 61 },
62 62 {
  63 + path: '/views/fee/roomFeeImportDetail',
  64 + name: '/views/fee/roomFeeImportDetail',
  65 + component: () => import('@/views/fee/roomFeeImportDetail.vue')
  66 + },
  67 + {
63 68 path: '/views/fee/shareReadingFee',
64 69 name: '/views/fee/shareReadingFee',
65 70 component: () => import('@/views/fee/shareReadingFeeList.vue')
... ...
src/views/fee/roomFeeImportDetail.md 0 → 100644
  View file @274e44b
  1 +```html
  2 +<div class=" animated fadeInRight ecommerce">
  3 + <div class="row">
  4 + <div class="col-lg-12">
  5 + <div class="ibox ">
  6 + <div class="ibox-title">
  7 + <h5>
  8 + <span><vc:i18n name="查询条件" namespace="roomFeeImportDetail"></vc:i18n></span>
  9 + </h5>
  10 + <div class="ibox-tools" style="top:10px;">
  11 + <button type="button" class="btn btn-link btn-sm" style="margin-right:10px;"
  12 + v-on:click="_moreCondition()">
  13 + {{roomFeeImportDetailInfo.moreCondition == true?'隐藏':'更多'}}
  14 + </button>
  15 + </div>
  16 + </div>
  17 + <div class="ibox-content">
  18 + <div class="row">
  19 + <div class="col-sm-4">
  20 + <div class="form-group">
  21 + <input type="text" :placeholder="vc.i18n('请输入楼栋编号','roomFeeImportDetail')"
  22 + v-model="roomFeeImportDetailInfo.conditions.floorNum" class=" form-control">
  23 + </div>
  24 + </div>
  25 + <div class="col-sm-4">
  26 + <div class="form-group">
  27 + <input type="text" :placeholder="vc.i18n('请输入单元编号','roomFeeImportDetail')"
  28 + v-model="roomFeeImportDetailInfo.conditions.unitNum" class=" form-control">
  29 + </div>
  30 + </div>
  31 + <div class="col-sm-3">
  32 + <div class="form-group">
  33 + <input type="text" :placeholder="vc.i18n('请输入房屋编号','roomFeeImportDetail')"
  34 + v-model="roomFeeImportDetailInfo.conditions.roomNum" class=" form-control">
  35 + </div>
  36 + </div>
  37 + <div class="col-sm-2">
  38 + <button type="button" class="btn btn-primary btn-sm" v-on:click="_queryFeeDetailMethod()">
  39 + <i class="fa fa-search"></i>
  40 + <span><vc:i18n name="查询" namespace="roomFeeImportDetail"></vc:i18n></span>
  41 + </button>
  42 + </div>
  43 + </div>
  44 + <!--<div class="row">
  45 + <div class="col-sm-4" v-if="roomFeeImportDetailInfo.moreCondition == true">
  46 + <div class="form-group">
  47 + <input type="text" :placeholder="vc.i18n('请输入信息ID','roomFeeImportDetail')"
  48 + v-model="roomFeeImportDetailInfo.conditions.activitiesId" class=" form-control">
  49 + </div>
  50 + </div>
  51 + </div>-->
  52 + </div>
  53 + </div>
  54 + </div>
  55 + </div>
  56 + <div class="row">
  57 + <div class="col-lg-12">
  58 + <div class="ibox">
  59 + <div class="ibox-title">
  60 + <h5>
  61 + <span><vc:i18n name="导入费用详情" namespace="roomFeeImportDetail"></vc:i18n></span>
  62 + </h5>
  63 + <div class="ibox-tools" style="top:10px;">
  64 + <button type="button" class="btn btn-primary btn-sm" v-on:click="_goBack()">
  65 + <i class="fa fa-close"></i>返回
  66 + </button>
  67 + </div>
  68 + </div>
  69 + <div class="ibox-content">
  70 + <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
  71 + <thead>
  72 + <tr>
  73 + <th class="text-center">
  74 + <span><vc:i18n name="楼栋编号" namespace="roomFeeImportDetail"></vc:i18n></span>
  75 + </th>
  76 + <th class="text-center">
  77 + <span><vc:i18n name="单元编号" namespace="roomFeeImportDetail"></vc:i18n></span>
  78 + </th>
  79 + <th class="text-center">
  80 + <span><vc:i18n name="房屋编号" namespace="roomFeeImportDetail"></vc:i18n></span>
  81 + </th>
  82 + <th class="text-center">
  83 + <span><vc:i18n name="费用名称" namespace="roomFeeImportDetail"></vc:i18n></span>
  84 + </th>
  85 + <th class="text-center">
  86 + <span><vc:i18n name="开始时间" namespace="roomFeeImportDetail"></vc:i18n></span>
  87 + </th>
  88 + <th class="text-center">
  89 + <span><vc:i18n name="结束时间" namespace="roomFeeImportDetail"></vc:i18n></span>
  90 + </th>
  91 + <th class="text-center">
  92 + <span><vc:i18n name="总金额" namespace="roomFeeImportDetail"></vc:i18n></span>
  93 + </th>
  94 + <th class="text-center">
  95 + <span><vc:i18n name="备注" namespace="roomFeeImportDetail"></vc:i18n></span>
  96 + </th>
  97 + <th class="text-center">
  98 + <span><vc:i18n name="状态" namespace="roomFeeImportDetail"></vc:i18n></span>
  99 + </th>
  100 + </tr>
  101 + </thead>
  102 + <tbody>
  103 + <tr v-for="detail in roomFeeImportDetailInfo.importFeeDetails">
  104 + <td class="text-center">{{detail.floorNum}}</td>
  105 + <td class="text-center">{{detail.unitNum}}</td>
  106 + <td class="text-center">{{detail.roomNum}}</td>
  107 + <td class="text-center">{{detail.feeName}}</td>
  108 + <td class="text-center">{{detail.startTime}}</td>
  109 + <td class="text-center">{{detail.endTime}}</td>
  110 + <td class="text-center">{{detail.amount}}</td>
  111 + <td class="text-center">{{detail.remark}}</td>
  112 + <td class="text-center">
  113 + <span class="badge badge-success" v-if="detail.state == '1000'">
  114 + <span><vc:i18n name="导入成功" namespace="roomFeeImportDetail"></vc:i18n></span>
  115 + </span>
  116 + <span class="badge badge-danger" v-else>
  117 + <span><vc:i18n name="导入失败" namespace="roomFeeImportDetail"></vc:i18n></span>
  118 + </span>
  119 + </td>
  120 + </tr>
  121 + </tbody>
  122 + <tfoot>
  123 + <tr>
  124 + <td colspan="9">
  125 + <ul class="pagination float-right"></ul>
  126 + </td>
  127 + </tr>
  128 + </tfoot>
  129 + </table>
  130 + <!-- 分页 -->
  131 + <vc:create path="frame/pagination"></vc:create>
  132 + </div>
  133 + </div>
  134 + </div>
  135 + </div>
  136 +</div>
  137 +```
  138 +```js
  139 +/**
  140 + 入驻小区
  141 + **/
  142 +(function (vc) {
  143 + var DEFAULT_PAGE = 1;
  144 + var DEFAULT_ROWS = 10;
  145 + vc.extends({
  146 + data: {
  147 + roomFeeImportDetailInfo: {
  148 + importFeeDetails: [],
  149 + total: 0,
  150 + records: 1,
  151 + moreCondition: false,
  152 + conditions: {
  153 + floorNum: '',
  154 + unitNum: '',
  155 + roomNum: '',
  156 + importFeeId: ''
  157 + }
  158 + }
  159 + },
  160 + _initMethod: function () {
  161 + $that.roomFeeImportDetailInfo.conditions.importFeeId = vc.getParam('importFeeId');
  162 + $that._listImportFeeDetails(DEFAULT_PAGE, DEFAULT_ROWS);
  163 + },
  164 + _initEvent: function () {
  165 + vc.on('pagination', 'page_event', function (_currentPage) {
  166 + vc.component._listImportFeeDetails(_currentPage, DEFAULT_ROWS);
  167 + });
  168 + },
  169 + methods: {
  170 + _listImportFeeDetails: function (_page, _rows) {
  171 + vc.component.roomFeeImportDetailInfo.conditions.page = _page;
  172 + vc.component.roomFeeImportDetailInfo.conditions.row = _rows;
  173 + vc.component.roomFeeImportDetailInfo.conditions.communityId = vc.getCurrentCommunity().communityId;
  174 + var param = {
  175 + params: vc.component.roomFeeImportDetailInfo.conditions
  176 + };
  177 + //发送get请求
  178 + vc.http.apiGet('/importFee/queryImportFeeDetail',
  179 + param,
  180 + function (json, res) {
  181 + var _roomFeeImportDetailInfo = JSON.parse(json);
  182 + vc.component.roomFeeImportDetailInfo.total = _roomFeeImportDetailInfo.total;
  183 + vc.component.roomFeeImportDetailInfo.records = _roomFeeImportDetailInfo.records;
  184 + vc.component.roomFeeImportDetailInfo.importFeeDetails = _roomFeeImportDetailInfo.data;
  185 + vc.emit('pagination', 'init', {
  186 + total: vc.component.roomFeeImportDetailInfo.records,
  187 + currentPage: _page
  188 + });
  189 + }, function (errInfo, error) {
  190 + console.log('请求失败处理');
  191 + }
  192 + );
  193 + },
  194 + _openBillDetail: function () {
  195 + },
  196 + _queryFeeDetailMethod: function () {
  197 + vc.component._listImportFeeDetails(DEFAULT_PAGE, DEFAULT_ROWS);
  198 + },
  199 + _moreCondition: function () {
  200 + if (vc.component.roomFeeImportDetailInfo.moreCondition) {
  201 + vc.component.roomFeeImportDetailInfo.moreCondition = false;
  202 + } else {
  203 + vc.component.roomFeeImportDetailInfo.moreCondition = true;
  204 + }
  205 + },
  206 + _goBack: function () {
  207 + vc.goBack();
  208 + }
  209 + }
  210 + });
  211 +})(window.vc);
  212 +```
0 213 \ No newline at end of file
... ...
src/views/fee/roomFeeImportDetail.vue 0 → 100644
  View file @274e44b
  1 +<template>
  2 + <div class="room-fee-import-detail-container animated fadeInRight">
  3 + <!-- 查询条件 -->
  4 + <el-card class="search-card">
  5 + <div slot="header" class="flex justify-between">
  6 + <span>{{ $t('roomFeeImportDetail.search.title') }}</span>
  7 + <el-button type="text" size="small" @click="toggleMoreCondition">
  8 + {{ showMoreCondition ? $t('roomFeeImportDetail.search.hideCondition') : $t('roomFeeImportDetail.search.moreCondition') }}
  9 + </el-button>
  10 + </div>
  11 + <el-row :gutter="20">
  12 + <el-col :span="6">
  13 + <el-input v-model="searchForm.floorNum" :placeholder="$t('roomFeeImportDetail.search.floorNum')" clearable />
  14 + </el-col>
  15 + <el-col :span="6">
  16 + <el-input v-model="searchForm.unitNum" :placeholder="$t('roomFeeImportDetail.search.unitNum')" clearable />
  17 + </el-col>
  18 + <el-col :span="6">
  19 + <el-input v-model="searchForm.roomNum" :placeholder="$t('roomFeeImportDetail.search.roomNum')" clearable />
  20 + </el-col>
  21 + <el-col :span="6">
  22 + <el-button type="primary" @click="handleSearch">
  23 + {{ $t('common.search') }}
  24 + </el-button>
  25 + </el-col>
  26 + </el-row>
  27 + </el-card>
  28 +
  29 + <!-- 导入费用详情列表 -->
  30 + <el-card class="table-card">
  31 + <div slot="header" class="flex justify-between">
  32 + <span>{{ $t('roomFeeImportDetail.table.title') }}</span>
  33 + <el-button type="primary" @click="goBack">
  34 + {{ $t('roomFeeImportDetail.button.back') }}
  35 + </el-button>
  36 + </div>
  37 +
  38 + <el-table :data="tableData" border style="width: 100%" v-loading="loading">
  39 + <el-table-column prop="floorNum" :label="$t('roomFeeImportDetail.table.floorNum')" align="center" />
  40 + <el-table-column prop="unitNum" :label="$t('roomFeeImportDetail.table.unitNum')" align="center" />
  41 + <el-table-column prop="roomNum" :label="$t('roomFeeImportDetail.table.roomNum')" align="center" />
  42 + <el-table-column prop="feeName" :label="$t('roomFeeImportDetail.table.feeName')" align="center" />
  43 + <el-table-column prop="startTime" :label="$t('roomFeeImportDetail.table.startTime')" align="center" />
  44 + <el-table-column prop="endTime" :label="$t('roomFeeImportDetail.table.endTime')" align="center" />
  45 + <el-table-column prop="amount" :label="$t('roomFeeImportDetail.table.amount')" align="center" />
  46 + <el-table-column prop="remark" :label="$t('roomFeeImportDetail.table.remark')" align="center" />
  47 + <el-table-column :label="$t('roomFeeImportDetail.table.state')" align="center">
  48 + <template slot-scope="scope">
  49 + <el-tag v-if="scope.row.state === '1000'" type="success">
  50 + {{ $t('roomFeeImportDetail.status.success') }}
  51 + </el-tag>
  52 + <el-tag v-else type="danger">
  53 + {{ $t('roomFeeImportDetail.status.failed') }}
  54 + </el-tag>
  55 + </template>
  56 + </el-table-column>
  57 + </el-table>
  58 +
  59 + <el-pagination
  60 + :current-page="pagination.current"
  61 + :page-sizes="[10, 20, 30, 50]"
  62 + :page-size="pagination.size"
  63 + :total="pagination.total"
  64 + layout="total, sizes, prev, pager, next, jumper"
  65 + @size-change="handleSizeChange"
  66 + @current-change="handleCurrentChange"
  67 + />
  68 + </el-card>
  69 + </div>
  70 +</template>
  71 +
  72 +<script>
  73 +import { queryImportFeeDetail } from '@/api/fee/roomFeeImportDetailApi'
  74 +import {getCommunityId} from '@/api/community/communityApi'
  75 +
  76 +export default {
  77 + name: 'RoomFeeImportDetail',
  78 + data() {
  79 + return {
  80 + loading: false,
  81 + showMoreCondition: false,
  82 + searchForm: {
  83 + floorNum: '',
  84 + unitNum: '',
  85 + roomNum: '',
  86 + importFeeId: ''
  87 + },
  88 + tableData: [],
  89 + pagination: {
  90 + current: 1,
  91 + size: 10,
  92 + total: 0
  93 + }
  94 + }
  95 + },
  96 + created() {
  97 + console.log('RoomFeeImportDetail created')
  98 + this.initData()
  99 + },
  100 + methods: {
  101 + initData() {
  102 + // 从路由参数获取 importFeeId
  103 + this.searchForm.importFeeId = this.$route.query.importFeeId
  104 + this.getList()
  105 + },
  106 + async getList() {
  107 + try {
  108 + this.loading = true
  109 + const params = {
  110 + page: this.pagination.current,
  111 + row: this.pagination.size,
  112 + importFeeId: this.searchForm.importFeeId,
  113 + floorNum: this.searchForm.floorNum,
  114 + unitNum: this.searchForm.unitNum,
  115 + roomNum: this.searchForm.roomNum,
  116 + communityId: getCommunityId()
  117 + }
  118 + const { data, total } = await queryImportFeeDetail(params)
  119 + this.tableData = data
  120 + this.pagination.total = total
  121 + } catch (error) {
  122 + this.$message.error(this.$t('roomFeeImportDetail.message.fetchError'))
  123 + } finally {
  124 + this.loading = false
  125 + }
  126 + },
  127 + handleSearch() {
  128 + this.pagination.current = 1
  129 + this.getList()
  130 + },
  131 + handleSizeChange(val) {
  132 + this.pagination.size = val
  133 + this.getList()
  134 + },
  135 + handleCurrentChange(val) {
  136 + this.pagination.current = val
  137 + this.getList()
  138 + },
  139 + toggleMoreCondition() {
  140 + this.showMoreCondition = !this.showMoreCondition
  141 + },
  142 + goBack() {
  143 + this.$router.go(-1)
  144 + }
  145 + }
  146 +}
  147 +</script>
  148 +
  149 +<style lang="scss" scoped>
  150 +.room-fee-import-detail-container {
  151 + padding: 20px;
  152 +
  153 + .search-card {
  154 + margin-bottom: 20px;
  155 + }
  156 +
  157 + .table-card {
  158 + margin-bottom: 20px;
  159 + }
  160 +}
  161 +</style>
... ...
src/views/fee/roomFeeImportLang.js
  View file @274e44b
... ... @@ -54,6 +54,38 @@ export const messages = {
54 54 downloadSuccess: 'Download template successfully',
55 55 downloadFailed: 'Download template failed'
56 56 }
  57 + },
  58 + roomFeeImportDetail: {
  59 + search: {
  60 + title: 'Search Conditions',
  61 + floorNum: 'Please enter floor number',
  62 + unitNum: 'Please enter unit number',
  63 + roomNum: 'Please enter room number',
  64 + moreCondition: 'More',
  65 + hideCondition: 'Hide'
  66 + },
  67 + table: {
  68 + title: 'Import Fee Details',
  69 + floorNum: 'Floor Number',
  70 + unitNum: 'Unit Number',
  71 + roomNum: 'Room Number',
  72 + feeName: 'Fee Name',
  73 + startTime: 'Start Time',
  74 + endTime: 'End Time',
  75 + amount: 'Total Amount',
  76 + remark: 'Remark',
  77 + state: 'Status'
  78 + },
  79 + status: {
  80 + success: 'Import Success',
  81 + failed: 'Import Failed'
  82 + },
  83 + button: {
  84 + back: 'Back'
  85 + },
  86 + message: {
  87 + fetchError: 'Failed to fetch data'
  88 + }
57 89 }
58 90 },
59 91 zh: {
... ... @@ -111,6 +143,38 @@ export const messages = {
111 143 downloadSuccess: '下载模板成功',
112 144 downloadFailed: '下载模板失败'
113 145 }
  146 + },
  147 + roomFeeImportDetail: {
  148 + search: {
  149 + title: '查询条件',
  150 + floorNum: '请输入楼栋编号',
  151 + unitNum: '请输入单元编号',
  152 + roomNum: '请输入房屋编号',
  153 + moreCondition: '更多',
  154 + hideCondition: '隐藏'
  155 + },
  156 + table: {
  157 + title: '导入费用详情',
  158 + floorNum: '楼栋编号',
  159 + unitNum: '单元编号',
  160 + roomNum: '房屋编号',
  161 + feeName: '费用名称',
  162 + startTime: '开始时间',
  163 + endTime: '结束时间',
  164 + amount: '总金额',
  165 + remark: '备注',
  166 + state: '状态'
  167 + },
  168 + status: {
  169 + success: '导入成功',
  170 + failed: '导入失败'
  171 + },
  172 + button: {
  173 + back: '返回'
  174 + },
  175 + message: {
  176 + fetchError: '获取数据失败'
  177 + }
114 178 }
115 179 }
116 180 }
117 181 \ No newline at end of file
... ...
src/views/fee/roomFeeImportList.vue
  View file @274e44b
... ... @@ -136,7 +136,7 @@ export default {
136 136 },
137 137 handleDetail(row) {
138 138 this.$router.push({
139   - path: '/fee/roomFeeImportDetail',
  139 + path: '/views/fee/roomFeeImportDetail',
140 140 query: { importFeeId: row.importFeeId }
141 141 })
142 142 },
... ...