cnlive_project / cnlive-community-web-vue · Commits

Commit c34d74f43da7f0b5601d228e5e697c17e484fadb

Authored by 张红振
1 parent 2cbd1f66

add new page

Inline Side-by-side
Showing 12 changed files with 987 additions and 120 deletions
src/api/community/housekeeper.ts 0 → 100644
  View file @c34d74f
  1 +import request from '../request'
  2 +
  3 +// 列表查询
  4 +export function getTableList(params:any) {
  5 + return request({
  6 + method: 'get',
  7 + url: '/building/getList',
  8 + params: params
  9 + })
  10 +}
  11 +
  12 +// 新增修改
  13 +export function addOrUpdate(params:any) {
  14 + return request({
  15 + method: 'post',
  16 + url: '/building/addOrUpdate',
  17 + data: params
  18 + })
  19 +}
  20 +// 删除
  21 +export function deleteBuilding(params:any) {
  22 + return request({
  23 + method: 'delete',
  24 + url: '/building/deleteBuilding',
  25 + params: params
  26 + })
  27 +}
src/api/community/houses.ts 0 → 100644
  View file @c34d74f
  1 +import request from '../request'
  2 +
  3 +// 列表查询
  4 +export function getTableList(params:any) {
  5 + return request({
  6 + method: 'get',
  7 + url: '/house/getList',
  8 + params: params
  9 + })
  10 +}
  11 +
  12 +// 房屋信息
  13 +export function getHouse(params:any) {
  14 + return request({
  15 + method: 'post',
  16 + url: '/house/getHouse',
  17 + params: params
  18 + })
  19 +}
  20 +// 删除
  21 +export function deleteHouse(params:any) {
  22 + return request({
  23 + method: 'delete',
  24 + url: '/house/deleteHouse',
  25 + params: params
  26 + })
  27 +}
src/api/community/index.ts deleted 100644 → 0
  View file @2cbd1f6
1 -import request from '../request'  
2 -  
3 -// export const getTableList = async ( params: any ) => {  
4 -// let res: any = await request.post( '/neighborhood/getList', params, {headers: {'X-Token': '2ebb4ca07a7ac8af47a1c4b182ea124435f4001e'}} )  
5 -// return res  
6 -// }  
7 -// export const getTableList = async ( params: any ) => {  
8 -// let res: any = await request.get( '/neighborhood/getList',{headers: {'X-Token': '2ebb4ca07a7ac8af47a1c4b182ea124435f4001e'}} )  
9 -// return res  
10 -// }  
11 -export function getTableList(params) {  
12 - return request({  
13 - method: 'post',  
14 - url: '/neighborhood/getList',  
15 - params: params,  
16 - headers: {'X-Token': '2ebb4ca07a7ac8af47a1c4b182ea124435f4001e'}  
17 - })  
18 -}  
src/api/community/residence.ts 0 → 100644
  View file @c34d74f
  1 +import request from '../request'
  2 +
  3 +// 列表查询
  4 +export function getTableList(params:any) {
  5 + return request({
  6 + method: 'get',
  7 + url: '/neighborhood/getList',
  8 + params: params
  9 + })
  10 +}
  11 +
  12 +// 新增修改
  13 +export function addOrUpdate(params:any) {
  14 + return request({
  15 + method: 'post',
  16 + url: '/neighborhood/addOrUpdate',
  17 + data: params
  18 + })
  19 +}
  20 +// 删除
  21 +export function deleteNeighborhood(params:any) {
  22 + return request({
  23 + method: 'delete',
  24 + url: '/neighborhood/deleteNeighborhood',
  25 + params: params
  26 + })
  27 +}
src/router/modules/community.ts
  View file @c34d74f
1 -import { RouteRecordRaw } from 'vue-router' 1 +
2 import Layout from '@/layout/enter.vue' 2 import Layout from '@/layout/enter.vue'
3 const community= { 3 const community= {
4 path: '/', 4 path: '/',
@@ -7,9 +7,22 @@ const community= { @@ -7,9 +7,22 @@ const community= {
7 children: [{ 7 children: [{
8 path: 'community', 8 path: 'community',
9 name: 'community', 9 name: 'community',
10 - component: () => import('@/views/community/index.vue'), 10 + component: () => import('@/views/community/residence/index.vue'),
11 meta: { title: '小区管理' } 11 meta: { title: '小区管理' }
12 - }] 12 + },
  13 + {
  14 + path: 'housekeeper',
  15 + name: 'housekeeper',
  16 + component: () => import('@/views/community/housekeeper/index.vue'),
  17 + meta: { title: '楼宇管理' }
  18 + },
  19 + {
  20 + path: 'houses',
  21 + name: 'houses',
  22 + component: () => import('@/views/community/houses/index.vue'),
  23 + meta: { title: '房屋管理' }
  24 + }
  25 + ]
13 } 26 }
14 27
15 export default community 28 export default community
src/views/community/housekeeper/houseDetail.vue 0 → 100644
  View file @c34d74f
  1 +<script setup lang="ts">
  2 +import { reactive, ref, watch, onMounted } from "vue";
  3 +import type { ElForm } from "element-plus";
  4 +import { ElMessage } from "element-plus";
  5 +import { addOrUpdate } from "@/api/community/housekeeper.ts";
  6 +import { getTableList } from "@/api/community/residence.ts";
  7 +const ruleFormRef = ref<InstanceType<typeof ElForm>>();
  8 +// 声明props
  9 +const props = defineProps({
  10 + formObj: {
  11 + type: Object,
  12 + default: {
  13 + neighborhoodId: null,
  14 + buildingName: null,
  15 + unitCount: null,
  16 + createTime: null,
  17 + grossArea: null,
  18 + houseCount: null,
  19 + employArea: null,
  20 + note: null,
  21 + },
  22 + },
  23 +});
  24 +
  25 +let loading = ref(false);
  26 +let data = reactive({
  27 + options: [],
  28 +});
  29 +/**
  30 + * 获取下拉数据
  31 + */
  32 +const getSelectList: void = () => {
  33 + getTableList({ pageNum: 1, pageSize: 1000,type:0 })
  34 + .then((res) => {
  35 + data.options = res.data.data.list;
  36 + })
  37 + .catch((err) => {
  38 + console.log(err);
  39 + });
  40 +};
  41 +onMounted(() => {
  42 + getSelectList()
  43 +})
  44 +// 表单验证
  45 +const rules = reactive({
  46 + neighborhoodId: [
  47 + {
  48 + required: true,
  49 + message: "请选择所属小区",
  50 + trigger: "change",
  51 + },
  52 + ],
  53 + buildingName: [
  54 + {
  55 + required: true,
  56 + message: "请输入楼宇名称",
  57 + trigger: "blur",
  58 + },
  59 + ],
  60 + unitCount: [
  61 + {
  62 + required: true,
  63 + message: "请输入单元数",
  64 + trigger: "blur",
  65 + },
  66 + ],
  67 + createTime: [
  68 + {
  69 + required: true,
  70 + message: "请选择创建时间",
  71 + trigger: "change",
  72 + },
  73 + ],
  74 + grossArea: [
  75 + {
  76 + required: true,
  77 + message: "请输入建筑面积",
  78 + trigger: "blur",
  79 + },
  80 + ],
  81 + houseCount: [
  82 + {
  83 + required: true,
  84 + message: "请输入总房屋数量",
  85 + trigger: "blur",
  86 + },
  87 + ],
  88 + employArea: [
  89 + {
  90 + required: true,
  91 + message: "请输入使用面积",
  92 + trigger: "blur",
  93 + },
  94 + ],
  95 +});
  96 +
  97 +const emit = defineEmits<{
  98 + (e: "cancel"): void;
  99 + (e: "success"): void;
  100 +}>();
  101 +
  102 +/**
  103 + * 表单提交
  104 + * @param {ElForm | undefined} formEl 表单对象
  105 + */
  106 +let submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  107 + loading.value = true;
  108 + if (!formEl) return;
  109 + formEl.validate((valid) => {
  110 + if (valid) {
  111 + console.log("111");
  112 + addOrUpdate(props.formObj).then((res) => {
  113 + console.log(res);
  114 + emit("success");
  115 + });
  116 + } else {
  117 + ElMessage({
  118 + message: "请完善信息",
  119 + type: "error",
  120 + });
  121 + loading.value = false;
  122 + return false;
  123 + }
  124 + });
  125 +};
  126 +
  127 +/**
  128 + * 取消提交
  129 + */
  130 +const cancel: void = () => {
  131 + emit("cancel");
  132 +};
  133 +</script>
  134 +
  135 +<template>
  136 + <el-form
  137 + ref="ruleFormRef"
  138 + :model="props.formObj"
  139 + :rules="rules"
  140 + label-width="120px"
  141 + :inline="true"
  142 + >
  143 + <el-form-item label="所属小区:" prop="neighborhoodId">
  144 + <el-select
  145 + v-model="props.formObj.neighborhoodId"
  146 + placeholder="请选择"
  147 + style="width: 200px"
  148 + >
  149 + <el-option
  150 + v-for="item in data.options"
  151 + :key="item.id"
  152 + :label="item.name"
  153 + :value="item.id"
  154 + >
  155 + </el-option>
  156 + </el-select>
  157 + </el-form-item>
  158 + <el-form-item label="楼宇名称:" prop="buildingName">
  159 + <el-input
  160 + v-model="props.formObj.buildingName"
  161 + placeholder="请输入楼宇名称"
  162 + ></el-input>
  163 + </el-form-item>
  164 + <el-form-item label="单元数:" prop="unitCount">
  165 + <el-input
  166 + v-model="props.formObj.unitCount"
  167 + placeholder="请输入单元数"
  168 + onkeyup="value=value.replace(/[^\d]/g,'')"
  169 + ></el-input>
  170 + </el-form-item>
  171 + <el-form-item label="建成日期:" prop="createTime">
  172 + <el-date-picker
  173 + v-model="props.formObj.createTime"
  174 + type="date"
  175 + placeholder="请选择"
  176 + style="width: 200px"
  177 + ></el-date-picker>
  178 + </el-form-item>
  179 + <el-form-item label="建筑面积:" prop="grossArea">
  180 + <el-input
  181 + v-model="props.formObj.grossArea"
  182 + onkeyup="value=value.replace(/[^\d]/g,'')"
  183 + placeholder="请输入建筑面积"
  184 + ></el-input>
  185 + </el-form-item>
  186 + <el-form-item label="总房屋数量:" prop="houseCount">
  187 + <el-input
  188 + v-model="props.formObj.houseCount"
  189 + onkeyup="value=value.replace(/[^\d]/g,'')"
  190 + placeholder="请输入总房屋数量"
  191 + ></el-input>
  192 + </el-form-item>
  193 + <el-form-item label="使用面积:" prop="employArea">
  194 + <el-input
  195 + v-model="props.formObj.employArea"
  196 + onkeyup="value=value.replace(/[^\d]/g,'')"
  197 + placeholder="请输入使用面积"
  198 + ></el-input>
  199 + </el-form-item>
  200 + <el-row>
  201 + <el-form-item label="备注信息:" prop="note" style="width: 60%">
  202 + <el-input
  203 + type="textarea"
  204 + :autosize="{ minRows: 3, maxRows: 4 }"
  205 + v-model="props.formObj.note"
  206 + placeholder="请输入备注信息"
  207 + maxlength="20"
  208 + show-word-limit
  209 + ></el-input>
  210 + </el-form-item>
  211 + </el-row>
  212 +
  213 + <el-row>
  214 + <el-form-item>
  215 + <el-button
  216 + type="primary"
  217 + @click="submitForm(ruleFormRef)"
  218 + :loading="loading"
  219 + >保存</el-button
  220 + >
  221 + <el-button @click="cancel">取消</el-button>
  222 + </el-form-item>
  223 + </el-row>
  224 + </el-form>
  225 +</template>
src/views/community/housekeeper/index.vue 0 → 100644
  View file @c34d74f
  1 +<script setup lang="ts">
  2 +import { reactive, onMounted, ref } from "vue";
  3 +import { getTableList, deleteBuilding } from "@/api/community/housekeeper.ts";
  4 +import { parseTime } from "@/utils/tool.ts";
  5 +import HouseDetail from "./houseDetail.vue";
  6 +import Pagination from "@/components/Pagination/index.vue";
  7 +import { ElMessage } from "element-plus";
  8 +// 数据筛选
  9 +const searchData = reactive({
  10 + neighborhoodId: null,
  11 + type: 0,
  12 + name: null,
  13 + pageNum: 1,
  14 + pageSize: 10,
  15 +});
  16 +// 展示
  17 +const data = reactive({
  18 + total: 0,
  19 + tableList: [],
  20 + dialogVisible: false,
  21 + loading: false,
  22 + title: "新增楼宇",
  23 + formObj: {},
  24 +});
  25 +
  26 +/**
  27 + * 列表查询
  28 + */
  29 +const search = (): void => {
  30 + data.loading = true;
  31 + getTableList(searchData)
  32 + .then((res) => {
  33 + data.tableList = res.data.data.list;
  34 + data.total = res.data.data.total;
  35 + searchData.pageSize = res.data.data.pageSize;
  36 + data.loading = false;
  37 + })
  38 + .catch((err) => {
  39 + console.log(err);
  40 + data.loading = false;
  41 + });
  42 +};
  43 +/**
  44 + * 编辑
  45 + * @param { Object } 列表对象
  46 + */
  47 +const edit = (row: Object) => {
  48 + data.formObj = row;
  49 + data.dialogVisible = true;
  50 + console.log(data.formObj);
  51 +};
  52 +/**
  53 + * 删除
  54 + * @param { number } buildingId 楼宇ID
  55 + */
  56 +const remove = (buildingId: number) => {
  57 + deleteBuilding({ buildingId: buildingId }).then((res) => {
  58 + ElMessage.success("操作成功");
  59 + search();
  60 + });
  61 +};
  62 +/**
  63 + * 组件操作成功回调
  64 + */
  65 +const changeData: void = () => {
  66 + data.dialogVisible = false;
  67 + search();
  68 +};
  69 +
  70 +/**
  71 + * 弹框关闭
  72 + */
  73 +const dialogClose: void = () => {
  74 + data.formObj = {};
  75 +};
  76 +onMounted(() => {
  77 + search();
  78 +});
  79 +</script>
  80 +
  81 +<template>
  82 + <div class="app-container">
  83 + <!-- 搜索 -->
  84 + <el-form :inline="true" :model="searchData" v-loading="data.loading">
  85 + <el-form-item>
  86 + <el-input
  87 + placeholder="请输入楼宇名称/楼管姓名"
  88 + v-model="searchData.name"
  89 + clearable
  90 + ></el-input>
  91 + </el-form-item>
  92 + <el-form-item
  93 + ><el-button type="primary" @click="search"
  94 + >查询</el-button
  95 + ></el-form-item
  96 + >
  97 + <el-row>
  98 + <el-form-item>
  99 + <el-button type="primary">导入</el-button>
  100 + <el-button type="primary">导出</el-button>
  101 + <el-button type="primary" @click="data.dialogVisible = true"
  102 + >新增</el-button
  103 + >
  104 + </el-form-item>
  105 + </el-row>
  106 + </el-form>
  107 +
  108 + <!-- 表格 -->
  109 + <el-table border :data="data.tableList">
  110 + <el-table-column label="所属小区" prop="name">
  111 + <template #default="scope">
  112 + <span>{{ scope.row.neighborhood.name }}</span></template
  113 + >
  114 + </el-table-column>
  115 + <el-table-column label="楼宇名称" prop="buildingName"></el-table-column>
  116 + <el-table-column label="单元数" prop="unitCount"></el-table-column>
  117 + <el-table-column label="总房屋数量" prop="houseCount"></el-table-column>
  118 + <el-table-column label="建成日期" prop="createTime">
  119 + <template #default="scope">
  120 + <span>{{ parseTime(new Date(scope.row.createTime).getTime()) }}</span>
  121 + </template>
  122 + </el-table-column>
  123 + <el-table-column label="建筑面积" prop="grossArea"></el-table-column>
  124 + <el-table-column label="使用面积" prop="employArea"></el-table-column>
  125 + <el-table-column
  126 + label="楼管姓名"
  127 + prop="buildingManager"
  128 + ></el-table-column>
  129 + <el-table-column label="操作">
  130 + <template #default="scope">
  131 + <el-button type="text" size="mini">更换楼管</el-button>
  132 + <el-button type="text" size="mini">房屋管理</el-button>
  133 + <el-button type="text" size="mini" @click="edit(scope.row)"
  134 + >编辑</el-button
  135 + >
  136 + <el-button type="text" size="mini" @click="remove(scope.row.id)"
  137 + >删除</el-button
  138 + >
  139 + </template>
  140 + </el-table-column>
  141 + </el-table>
  142 +
  143 + <!-- 分页 -->
  144 + <Pagination
  145 + v-if="data.total > 0"
  146 + :total="data.total"
  147 + :currentPage="searchData.pageNum"
  148 + :pageSize="searchData.pageSize"
  149 + @pageChange="search"
  150 + ></Pagination>
  151 +
  152 + <!-- 详情弹框 -->
  153 + <el-dialog
  154 + v-model="data.dialogVisible"
  155 + :title="data.title"
  156 + width="60%"
  157 + @close="dialogClose"
  158 + >
  159 + <HouseDetail
  160 + @cancel="data.dialogVisible = false"
  161 + @success="changeData"
  162 + :formObj="data.formObj"
  163 + ></HouseDetail>
  164 + </el-dialog>
  165 + </div>
  166 +</template>
  167 +
  168 +<style></style>
src/views/community/houses/detail.vue 0 → 100644
  View file @c34d74f
  1 +<script setup lang="ts">
  2 +import { reactive, ref, onMounted } from "vue";
  3 +import { getHouse } from "@/api/community/houses.ts";
  4 +
  5 +// 声明props
  6 +const props = defineProps({
  7 + formObj: {
  8 + type: Object,
  9 + default: {},
  10 + },
  11 +});
  12 +console.log(props.formObj);
  13 +</script>
  14 +
  15 +<template>
  16 + <el-form
  17 + :model="props.formObj"
  18 + label-width="120px"
  19 + :inline="true"
  20 + >
  21 + <el-form-item label="所属小区:">
  22 + <el-input
  23 + :model-value="props.formObj.building.neighborhood.name"
  24 + readonly
  25 + ></el-input>
  26 + </el-form-item>
  27 + <el-form-item label="楼宇名称:" prop="buildingName">
  28 + <el-input
  29 + :model-value="props.formObj.building.buildingName"
  30 + readonly
  31 + ></el-input>
  32 + </el-form-item>
  33 + <el-form-item label="单元:" prop="unitCount">
  34 + <el-input
  35 + :model-value="props.formObj.unitCount"
  36 + readonly
  37 + ></el-input>
  38 + </el-form-item>
  39 + <el-form-item label="房间号:" prop="unitCount">
  40 + <el-input
  41 + :model-value="props.formObj.roomNumber"
  42 + readonly
  43 + ></el-input>
  44 + </el-form-item>
  45 + <el-form-item label="建筑面积:" prop="grossArea">
  46 + <el-input
  47 + :model-value="props.formObj.grossArea"
  48 + readonly
  49 + ></el-input>
  50 + </el-form-item>
  51 + <el-form-item label="使用面积:" prop="employArea">
  52 + <el-input
  53 + :model-value="props.formObj.useArea"
  54 + readonly
  55 + ></el-input>
  56 + </el-form-item>
  57 + </el-form>
  58 +</template>
src/views/community/houses/index.vue 0 → 100644
  View file @c34d74f
  1 +<script setup lang="ts">
  2 +import { reactive, onMounted, ref } from "vue";
  3 +import { getTableList, deleteHouse,getHouse } from "@/api/community/houses.ts";
  4 +import { parseTime } from "@/utils/tool.ts";
  5 +import Detail from "./detail.vue";
  6 +import Pagination from "@/components/Pagination/index.vue";
  7 +import { ElMessage } from "element-plus";
  8 +// 数据筛选
  9 +const searchData = reactive({
  10 + buildingId: 1,
  11 + type: 0,
  12 + roomNumber: null,
  13 + pageNum: 1,
  14 + pageSize: 10,
  15 +});
  16 +// 展示
  17 +const data = reactive({
  18 + total: 0,
  19 + tableList: [],
  20 + dialogVisible: false,
  21 + loading: false,
  22 + title: "房屋详情",
  23 + formObj: {},
  24 +});
  25 +
  26 +/**
  27 + * 列表查询
  28 + */
  29 +const search = (): void => {
  30 + data.loading = true;
  31 + getTableList(searchData)
  32 + .then((res) => {
  33 + data.tableList = res.data.data.list;
  34 + data.total = res.data.data.total;
  35 + searchData.pageSize = res.data.data.pageSize;
  36 + data.loading = false;
  37 + })
  38 + .catch((err) => {
  39 + console.log(err);
  40 + data.loading = false;
  41 + });
  42 +};
  43 +/**
  44 + * 详情
  45 + * @param { number } houseId 房屋ID
  46 + */
  47 +const check = (houseId: number) => {
  48 + getHouse({ houseId: houseId }).then((res) => {
  49 + data.formObj = res.data.data;
  50 + data.dialogVisible=true;
  51 + });
  52 +};
  53 +
  54 +/**
  55 + * 删除
  56 + * @param { number } houseId 房屋ID
  57 + */
  58 +const remove = (houseId: number) => {
  59 + deleteHouse({ houseId: houseId }).then((res) => {
  60 + ElMessage.success("操作成功");
  61 + search();
  62 + });
  63 +};
  64 +
  65 +onMounted(() => {
  66 + search();
  67 +});
  68 +</script>
  69 +
  70 +<template>
  71 + <div class="app-container">
  72 + <!-- 搜索 -->
  73 + <el-form :inline="true" :model="searchData" v-loading="data.loading">
  74 + <el-form-item>
  75 + <el-input
  76 + placeholder="请输入房间号"
  77 + v-model="searchData.roomNumber"
  78 + clearable
  79 + ></el-input>
  80 + </el-form-item>
  81 + <el-form-item
  82 + ><el-button type="primary" @click="search"
  83 + >查询</el-button
  84 + ></el-form-item
  85 + >
  86 + <el-row>
  87 + <el-form-item>
  88 + <el-button type="primary">导入</el-button>
  89 + <el-button type="primary">导出</el-button>
  90 + </el-form-item>
  91 + </el-row>
  92 + </el-form>
  93 +
  94 + <!-- 表格 -->
  95 + <el-table border :data="data.tableList">
  96 + <el-table-column label="所属小区" prop="name">
  97 + <template #default="scope">
  98 + <span>{{ scope.row.building.neighborhood.name }}</span></template
  99 + >
  100 + </el-table-column>
  101 + <el-table-column label="楼宇名称" prop="buildingName">
  102 + <template #default="scope">
  103 + <span>{{ scope.row.building.buildingName }}</span></template
  104 + >
  105 + </el-table-column>
  106 + <el-table-column label="单元数" prop="unitCount"></el-table-column>
  107 + <el-table-column label="房间号" prop="roomNumber"></el-table-column>
  108 + <el-table-column label="建筑面积" prop="grossArea"></el-table-column>
  109 + <el-table-column label="使用面积" prop="useArea"></el-table-column>
  110 + <el-table-column label="操作" width="350px">
  111 + <template #default="scope">
  112 + <el-button type="text" size="mini">更换楼管</el-button>
  113 + <el-button type="text" size="mini">房屋管理</el-button>
  114 + <el-button type="text" size="mini">查看业主</el-button>
  115 + <el-button type="text" size="mini" @click="check(scope.row.id)">查看房屋</el-button>
  116 + <!-- <el-button type="text" size="mini" @click="edit(scope.row)"
  117 + >编辑</el-button
  118 + > -->
  119 + <el-button type="text" size="mini" @click="remove(scope.row.id)"
  120 + >删除</el-button
  121 + >
  122 + </template>
  123 + </el-table-column>
  124 + </el-table>
  125 +
  126 + <!-- 分页 -->
  127 + <Pagination
  128 + v-if="data.total > 0"
  129 + :total="data.total"
  130 + :currentPage="searchData.pageNum"
  131 + :pageSize="searchData.pageSize"
  132 + @pageChange="search"
  133 + ></Pagination>
  134 +
  135 + <!-- 详情弹框 -->
  136 + <el-dialog
  137 + v-model="data.dialogVisible"
  138 + :title="data.title"
  139 + width="40%"
  140 + @close="data.dialogClose"
  141 + >
  142 + <Detail
  143 + :formObj="data.formObj"
  144 + ></Detail>
  145 + </el-dialog>
  146 + </div>
  147 +</template>
  148 +
  149 +<style></style>
src/views/community/index.vue deleted 100644 → 0
  View file @2cbd1f6
1 -<script setup lang="ts">  
2 -import { reactive, onMounted } from "vue";  
3 -import { getTableList } from "@/api/community";  
4 -import Pagination from "@/components/Pagination/index.vue";  
5 -  
6 -interface Item {  
7 - name: string,  
8 - type: number,  
9 - id:number,  
10 -}  
11 - // 列表  
12 -const tableData:Array<Item> = reactive([])  
13 -  
14 -const data = reactive({  
15 - // 搜索列表参数  
16 - search: {  
17 - propertyId: 1,  
18 - type: 0,  
19 - name: null,  
20 - },  
21 - // 分页  
22 - total: 0,  
23 - pageNum: 1,  
24 - pageSize: 0,  
25 -  
26 -});  
27 -  
28 -/**  
29 - * 列表查询  
30 - */  
31 -const search = () => {  
32 - getTableList(data.search)  
33 - .then((res) => {  
34 - data.tableList = res.data.data.list;  
35 - tableData.push(...res.data.data.list) ;  
36 - tableData.push({name:12131,type:'1',id:'1'}) ;  
37 - data.total = res.data.data.total;  
38 - data.pageSize = res.data.data.pageSize;  
39 - data.pageNum = res.data.data.pageNum;  
40 - data.tableList = res.data.data.list;  
41 - console.log(data.tableList);  
42 - console.log(tableData);  
43 - })  
44 - .catch((err) => {  
45 - console.log(err);  
46 - });  
47 -};  
48 -  
49 -onMounted(() => {  
50 - search();  
51 -});  
52 -</script>  
53 -<template>  
54 - <div class="app-container">  
55 - <el-form :inline="true" :model="data.search">  
56 - <el-form-item>  
57 - <el-input  
58 - placeholder="请输入社区名称"  
59 - v-model="data.search.name"  
60 - ></el-input>  
61 - </el-form-item>  
62 - <el-form-item  
63 - ><el-button type="primary" @click="search"  
64 - >查询</el-button  
65 - ></el-form-item  
66 - >  
67 - <el-row>  
68 - <el-form-item>  
69 - <el-button type="primary">导入</el-button>  
70 - <el-button type="primary">导出</el-button>  
71 - <el-button type="primary">新增</el-button>  
72 - </el-form-item>  
73 - </el-row>  
74 - </el-form>  
75 - <el-table border :data="tableData">  
76 - <el-table-column label="小区名称" prop="name"></el-table-column>  
77 - <el-table-column label="楼座数"></el-table-column>  
78 - <el-table-column label="储藏室数"></el-table-column>  
79 - <el-table-column label="车位数"></el-table-column>  
80 - <el-table-column label="所在地区"></el-table-column>  
81 - <el-table-column label="详细地址"></el-table-column>  
82 - <el-table-column label="操作">  
83 - <template #default>  
84 - <el-button type="text" size="mini">编辑</el-button>  
85 - <el-button type="text" size="mini">删除</el-button>  
86 - <el-button type="text" size="mini">楼宇管理</el-button>  
87 - </template>  
88 - </el-table-column>  
89 - </el-table>  
90 - <Pagination  
91 - :total="data.total"  
92 - :currentPage="data.pageNum"  
93 - :pageSize="data.pageSize"  
94 - @pageChange="getTableList"  
95 - ></Pagination>  
96 - </div>  
97 -</template>  
98 -  
99 -<style></style>  
src/views/community/residence/communityDetail.vue 0 → 100644
  View file @c34d74f
  1 +<script setup lang="ts">
  2 +import { reactive, ref, watch, onMounted } from "vue";
  3 +import type { ElForm } from "element-plus";
  4 +import { ElMessage } from "element-plus";
  5 +import { addOrUpdate } from "@/api/community/residence.ts";
  6 +const ruleFormRef = ref<InstanceType<typeof ElForm>>();
  7 +// 声明props
  8 +const props = defineProps({
  9 + formObj: {
  10 + type: Object,
  11 + default: {
  12 + name: null,
  13 + address: null,
  14 + locality: null,
  15 + buildingCount: null,
  16 + storeroomCount: null,
  17 + truckSpaceCount: null,
  18 + },
  19 + },
  20 +});
  21 +
  22 +let loading = ref(false);
  23 +
  24 +// 表单验证
  25 +const rules = reactive({
  26 + name: [
  27 + {
  28 + required: true,
  29 + message: "请输入小区名",
  30 + trigger: "blur",
  31 + },
  32 + ],
  33 + locality: [
  34 + {
  35 + required: true,
  36 + message: "请输入所在地区",
  37 + trigger: "blur",
  38 + },
  39 + ],
  40 + address: [
  41 + {
  42 + required: true,
  43 + message: "请输入地址",
  44 + trigger: "blur",
  45 + },
  46 + ],
  47 + buildingCount: [
  48 + {
  49 + required: true,
  50 + message: "请输入楼座数",
  51 + trigger: "blur",
  52 + },
  53 + ],
  54 + storeroomCount: [
  55 + {
  56 + required: true,
  57 + message: "请输入储藏室数",
  58 + trigger: "blur",
  59 + },
  60 + ],
  61 + truckSpaceCount: [
  62 + {
  63 + required: true,
  64 + message: "请输入车位数",
  65 + trigger: "blur",
  66 + },
  67 + ],
  68 +});
  69 +
  70 +const emit = defineEmits<{
  71 + (e: "cancel"): void;
  72 + (e: "success"): void;
  73 +}>();
  74 +
  75 +/**
  76 + * 表单提交
  77 + * @param {ElForm | undefined} formEl 表单对象
  78 + */
  79 +let submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  80 + loading.value = true;
  81 + if (!formEl) return;
  82 + formEl.validate((valid) => {
  83 + if (valid) {
  84 + console.log("111")
  85 + addOrUpdate(props.formObj).then((res) => {
  86 + console.log(res);
  87 + emit("success");
  88 + });
  89 + } else {
  90 + ElMessage({
  91 + message: "请完善信息",
  92 + type: "error",
  93 + });
  94 + loading.value = false;
  95 + return false;
  96 + }
  97 + });
  98 +};
  99 +
  100 +/**
  101 + * 取消提交
  102 + */
  103 +const cancel: void = () => {
  104 + emit("cancel");
  105 +};
  106 +</script>
  107 +
  108 +<template>
  109 + <el-form ref="ruleFormRef" :model="props.formObj" :rules="rules" label-width="100px">
  110 + <el-form-item label="小区名称:" prop="name">
  111 + <el-input v-model="props.formObj.name" placeholder="请输入名称"></el-input>
  112 + </el-form-item>
  113 + <el-form-item label="所在地区:" prop="locality">
  114 + <el-input v-model="props.formObj.locality" placeholder="请输入所在地区"></el-input>
  115 + </el-form-item>
  116 + <el-form-item label="详细地址:" prop="address">
  117 + <el-input v-model="props.formObj.address" placeholder="请输入详细地址"></el-input>
  118 + </el-form-item>
  119 + <el-form-item label="楼座数:" prop="buildingCount">
  120 + <el-input v-model="props.formObj.buildingCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入楼座数"></el-input>
  121 + </el-form-item>
  122 + <el-form-item label="储藏室数:" prop="storeroomCount">
  123 + <el-input v-model="props.formObj.storeroomCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入储藏室数"></el-input>
  124 + </el-form-item>
  125 + <el-form-item label="车位数:" prop="truckSpaceCount">
  126 + <el-input v-model="props.formObj.truckSpaceCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入车位数"></el-input>
  127 + </el-form-item>
  128 + <el-form-item>
  129 + <el-button
  130 + type="primary"
  131 + @click="submitForm(ruleFormRef)"
  132 + :loading="loading"
  133 + >保存</el-button
  134 + >
  135 + <el-button @click="cancel">取消</el-button>
  136 + </el-form-item>
  137 + </el-form>
  138 +</template>
src/views/community/residence/index.vue 0 → 100644
  View file @c34d74f
  1 +<script setup lang="ts">
  2 +import { reactive, onMounted, ref } from "vue";
  3 +import { getTableList, deleteNeighborhood } from "@/api/community/residence.ts";
  4 +import CommunityDetail from "./communityDetail.vue";
  5 +import Pagination from "@/components/Pagination/index.vue";
  6 +import { ElMessage } from "element-plus";
  7 +// 数据筛选
  8 +const searchData = reactive({
  9 + propertyId: 1,
  10 + type: 0,
  11 + name: null,
  12 + pageNum: 1,
  13 + pageSize: 10,
  14 +});
  15 +// 展示
  16 +const data = reactive({
  17 + total: 0,
  18 + tableList: [],
  19 + dialogVisible: false,
  20 + loading: false,
  21 + title: "新增小区",
  22 + formObj: {},
  23 +});
  24 +
  25 +/**
  26 + * 列表查询
  27 + */
  28 +const search = (): void => {
  29 + data.loading = true;
  30 + getTableList(searchData)
  31 + .then((res) => {
  32 + data.tableList = res.data.data.list;
  33 + data.total = res.data.data.total;
  34 + searchData.pageSize = res.data.data.pageSize;
  35 + data.loading = false;
  36 + })
  37 + .catch((err) => {
  38 + console.log(err);
  39 + data.loading = false;
  40 + });
  41 +};
  42 +/**
  43 + * 编辑
  44 + * @param { Object } 列表对象
  45 + */
  46 +const edit = (row: Object) => {
  47 + data.formObj = row;
  48 + data.dialogVisible = true;
  49 + console.log(data.formObj);
  50 +};
  51 +/**
  52 + * 删除
  53 + * @param { number } neighborhoodId 小区ID
  54 + */
  55 +const remove = (neighborhoodId: number) => {
  56 + deleteNeighborhood({ neighborhoodId: neighborhoodId }).then((res) => {
  57 + ElMessage.success("操作成功");
  58 + search();
  59 + });
  60 +};
  61 +/**
  62 + * 组件操作成功回调
  63 + */
  64 +const changeData: void = () => {
  65 + data.dialogVisible = false;
  66 + search();
  67 +};
  68 +
  69 +/**
  70 + * 弹框关闭
  71 + */
  72 +const dialogClose: void = () => {
  73 + data.formObj = {};
  74 +};
  75 +onMounted(() => {
  76 + search();
  77 +});
  78 +</script>
  79 +<template>
  80 + <div class="app-container">
  81 + <!-- 搜索 -->
  82 + <el-form :inline="true" :model="searchData" v-loading="data.loading">
  83 + <el-form-item>
  84 + <el-input
  85 + placeholder="请输入社区名称"
  86 + v-model="searchData.name"
  87 + clearable
  88 + ></el-input>
  89 + </el-form-item>
  90 + <el-form-item
  91 + ><el-button type="primary" @click="search"
  92 + >查询</el-button
  93 + ></el-form-item
  94 + >
  95 + <el-row>
  96 + <el-form-item>
  97 + <el-button type="primary">导入</el-button>
  98 + <el-button type="primary">导出</el-button>
  99 + <el-button type="primary" @click="data.dialogVisible = true"
  100 + >新增</el-button
  101 + >
  102 + </el-form-item>
  103 + </el-row>
  104 + </el-form>
  105 +
  106 + <!-- 表格 -->
  107 + <el-table border :data="data.tableList">
  108 + <el-table-column label="小区名称" prop="name"></el-table-column>
  109 + <el-table-column label="楼座数" prop="buildingCount"></el-table-column>
  110 + <el-table-column label="储藏室数" prop="storeroomCount"></el-table-column>
  111 + <el-table-column label="车位数" prop="truckSpaceCount"></el-table-column>
  112 + <el-table-column label="所在地区" prop="locality"></el-table-column>
  113 + <el-table-column label="详细地址" prop="address"></el-table-column>
  114 + <el-table-column label="操作">
  115 + <template #default="scope">
  116 + <el-button type="text" size="mini" @click="edit(scope.row)"
  117 + >编辑</el-button
  118 + >
  119 + <el-button type="text" size="mini" @click="remove(scope.row.id)"
  120 + >删除</el-button
  121 + >
  122 + <el-button type="text" size="mini">楼宇管理</el-button>
  123 + </template>
  124 + </el-table-column>
  125 + </el-table>
  126 +
  127 + <!-- 分页 -->
  128 + <Pagination
  129 + v-if="data.total > 0"
  130 + :total="data.total"
  131 + :currentPage="searchData.pageNum"
  132 + :pageSize="searchData.pageSize"
  133 + @pageChange="search"
  134 + ></Pagination>
  135 +
  136 + <!-- 详情弹框 -->
  137 + <el-dialog
  138 + v-model="data.dialogVisible"
  139 + :title="data.title"
  140 + width="30%"
  141 + @close="dialogClose"
  142 + >
  143 + <CommunityDetail
  144 + @cancel="data.dialogVisible = false"
  145 + @success="changeData"
  146 + :formObj="data.formObj"
  147 + ></CommunityDetail>
  148 + </el-dialog>
  149 + </div>
  150 +</template>
  151 +
  152 +<style></style>