物业管理

杨泽宇
1 parent eab5869b
Showing 8 changed files with 396 additions and 78 deletions
src/api/property/index.ts
src/layout/menu.vue
src/main.ts
src/router/modules/property.ts
src/style/element.scss
src/utils/tool.ts
src/views/property/edit.vue
src/views/property/index.vue
 import request from '../request'
+import {formDataWrapper} from '@/utils/tool'
  
 /**
  * @description 物业列表
  * @function propertyList
  */
-export function propertyList (params) {
+export const propertyList = async ( params: any ) => {
   for (const i in params) {
     if (!(params[i] + '').trim()) {
       delete params[i]
     }
   }
-  return request({
-    method: 'get',
-    url: '/property/list',
-    params: {
-      page: 1,
-      pageSize: 10
-    }
-  })
-}
-
-export const property_list = async ( params: any ) => {
   let res: any = await request.get( '/property/list', { params } )
-  // let res: any = await request( {url: '/neighborhood/getList', params:{propertyId: 1, type: 1}, method: 'post' })
   return res
 }
  
@@ -42,10 +31,7 @@ export function propertyAdd (data) {
  * @description 修改物业状态
  * @function propertyStatus
  */
-export function propertyStatus (params) {
-  return request({
-    method: 'post',
-    url: '/property/updateStatus',
-    params: params
-  })
-} 
 \ No newline at end of file
+export const propertyStatus = async ( data: any ) => {
+  let res: any = await request.post( '/property/updateStatus', formDataWrapper(data)  )
+  return res
+}
 \ No newline at end of file
@@ -6,7 +6,7 @@
  */
 import { ref, computed } from "vue";
 import * as store from "@/pinia/index";
-import styles from '@/style/global.module.scss';
+import styles from "@/style/global.module.scss";
 // TIP 使用element plus ICON
 import {
   Location,
@@ -15,8 +15,8 @@ import {
   Setting,
 } from "@element-plus/icons-vue";
 // TIP 获取scss样式变量
-let styleData = computed(()=>{
-  return styles
+let styleData = computed(() => {
+  return styles;
 });
 </script>
  
@@ -28,31 +28,28 @@ let styleData = computed(()=&gt;{
       :text-color="styleData.menuText"
       :active-text-color="styleData.menuActiveText"
       class="el-menu-vertical-demo"
+      :router="true"
       :collapse-transition="false"
       :collapse="store.family.appStore().isCollapse"
     >
       <el-sub-menu index="1">
         <template #title>
           <el-icon><location /></el-icon>
-          <span>Navigator One</span>
+          <span>物业管理</span>
         </template>
         <el-menu-item-group>
-          <template #title><span>Group One</span></template>
-          <el-menu-item index="1-1">item one</el-menu-item>
-          <el-menu-item index="1-2">item two</el-menu-item>
+          <el-menu-item index="/property">物业列表</el-menu-item>
         </el-menu-item-group>
-        <el-menu-item-group title="Group Two">
-          <el-menu-item index="1-3">item three</el-menu-item>
+      </el-sub-menu>
+      <el-sub-menu index="2">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>小区管理</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/community">小区管理</el-menu-item>
         </el-menu-item-group>
-        <el-sub-menu index="1-4">
-          <template #title><span>item four</span></template>
-          <el-menu-item index="1-4-1">item one</el-menu-item>
-        </el-sub-menu>
       </el-sub-menu>
-      <el-menu-item index="2">
-        <el-icon><icon-menu /></el-icon>
-        <template #title>Navigator Two</template>
-      </el-menu-item>
       <el-menu-item index="3" disabled>
         <el-icon><document /></el-icon>
         <template #title>Navigator Three</template>
@@ -5,6 +5,7 @@ import promise from &#39;es6-promise&#39;
 // import store from '@/store/index'
  
 import ElementPlus from 'element-plus'
+import { ElMessage } from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn' // TIP elementUI配置中文环境
  
@@ -26,7 +27,6 @@ promise.polyfill()
  
 console.log('current env: ', process.env.NODE_ENV)
 console.log('current api url: ', import.meta.env.VITE_BASE_URL)
-
 const app = createApp(App)
  
 // TIP 全局静态变量、方法挂载
@@ -37,6 +37,7 @@ for(const i in globalVariable) {
 // TIP 关浏览器控制台错误和警告
 // app.config.warnHandler = () => null;
 // app.config.errorHandler = () => null;
+app.provide("$message", ElMessage);
  
 app
 // .use(store)
@@ -9,6 +9,11 @@ const property= {
     name: 'property',
     component: () => import('@/views/property/index.vue'),
     meta: { title: '物业管理' }
+  }, {
+    path: '/property/edit',
+    name: 'edit',
+    component: () => import('@/views/property/edit.vue'),
+    meta: { title: '物业编辑' }
   }]
 }
  
@@ -8,4 +8,7 @@
 // TIP 解决左侧菜单scrollbar左侧有间隔
 .el-scrollbar {
   width: 100%;
+}
+.el-form--inline .el-form-item {
+  margin-right: 0;
 }
 \ No newline at end of file
@@ -153,4 +153,17 @@ export function globalFilters (value: number, groupData: EnumData[]) {
   } else {
     return value
   }
+}
+
+/**
+ * 请求参数包formData
+ * @param {object}} data
+ * @returns {FormData} fd
+ */
+export function formDataWrapper (data: any) {
+  const fd: any = new FormData()
+  for (let i in data) {
+    fd.append(i, data[i])
+  }
+  return fd
 }
 \ No newline at end of file
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance } from "vue";
+import { propertyAdd } from "@/api/property";
+import { validMobile } from "@/utils/validate";
+import type { ElForm } from "element-plus";
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+let form = reactive({
+  data: {
+    name: "",
+    userName: "",
+    userPhone: "",
+    location: "北京",
+    address: "",
+    businessLicense: "",
+    contractNumber: "",
+    logo: "",
+    id: null,
+    shortName: "",
+    remark: "",
+    status: 0,
+  },
+});
+// 校验手机号格式
+const checkPhone = (rules, value, callback) => {
+  if (validMobile(value)) {
+    callback();
+  } else {
+    callback(new Error("请填写格式正确的手机号码"));
+  }
+};
+// 表单验证规则
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请填写物业名称",
+      trigger: "blur",
+    },
+  ],
+  userName: [
+    {
+      required: true,
+      message: "请填写联系人",
+      trigger: "blur",
+    },
+  ],
+  userPhone: [
+    {
+      required: true,
+      message: "请填写格式正确的手机号码",
+      trigger: "blur",
+      validator: checkPhone,
+    },
+  ],
+  location: [
+    {
+      required: true,
+      message: "请填写地区",
+      trigger: "blur",
+    },
+  ],
+  address: [
+    {
+      required: true,
+      message: "请填写详细地址",
+      trigger: "blur",
+    },
+  ],
+  businessLicense: [
+    {
+      required: true,
+      message: "请上传营业执照",
+      trigger: "blur",
+    },
+  ],
+  contractNumber: [
+    {
+      required: true,
+      message: "请填写合同编号",
+      trigger: "blur",
+    },
+  ],
+  type: [
+    {
+      required: true,
+      message: "请选择类型",
+      trigger: "blur",
+    },
+  ],
+});
+// 表单重置
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+// 表单提交
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      propertyAdd(form.data)
+        .then((res) => {
+          if (res) {
+            globalProperties.$message.success("操作成功");
+            history.go(-1);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      globalProperties.$message.success("请检查表单格式");
+      return false;
+    }
+  });
+};
+</script>
+
+<template>
+  <div class="page-container">
+    <el-card class="form_card" style="max-width: 1303px">
+      <h1>新增物业</h1>
+      <el-form
+        :inline="true"
+        :model="form.data"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="120px"
+        style="display: flex; flex-wrap: wrap; width: 100%"
+      >
+        <el-form-item label="物业名称" prop="name" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.name"
+            placeholder="请填写物业名称"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="物业简称" prop="shortName" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.shortName"
+            placeholder="请填写物业简称"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="联系人" prop="userName" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.userName"
+            placeholder="请填写联系人"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="userPhone" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.userPhone"
+            placeholder="请填写联系电话"
+            maxlength="11"
+          />
+        </el-form-item>
+        <el-form-item label="地区" prop="location" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.location"
+            placeholder="请填写地区"
+            maxlength="11"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item label="详细地址" prop="address" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.address"
+            placeholder="请填写详细地址"
+            maxlength="50"
+          />
+        </el-form-item>
+        <el-form-item
+          label="营业执照"
+          prop="businessLicense"
+          style="width: 50%"
+        >
+          <el-input
+            v-model.trim="form.data.businessLicense"
+            placeholder="请填写营业执照"
+            maxlength="50"
+          />
+        </el-form-item>
+        <el-form-item label="物业LOGO" prop="logo" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.logo"
+            placeholder="请填写物业LOGO"
+            maxlength="50"
+          />
+        </el-form-item>
+        <el-form-item label="合同编号" prop="contractNumber" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.contractNumber"
+            placeholder="请填写合同编号"
+            maxlength="50"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.remark"
+            placeholder="请填写备注"
+            maxlength="50"
+          />
+        </el-form-item>
+        <el-form-item label="类型" prop="type" style="width: 50%">
+          <el-select v-model="form.data.type">
+            <el-option label="物业" value="1"></el-option>
+            <el-option label="公益" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >提交</el-button
+          >
+          <el-button type="info" @click="resetForm(ruleFormRef)"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { property_list } from "@/api/property";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import { propertyList, propertyStatus } from "@/api/property";
+import { parseTime } from "@/utils/tool";
 import Pagination from "@/components/Pagination/index.vue";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+interface Form {
+  page: number;
+  pageSize: number;
+  name?: string;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[] | null;
+  params: Params;
+}
 let data = reactive({
-  list: []
-})
-let loading = ref(false);
-let params = reactive({
-  total: 0,
-  query: {
-    page: 1,
-    pageSize: 10,
+  list: [],
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      name: "",
+    },
   },
 });
+// 列表
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await propertyList(data.params.query);
+    data.list = res.data.data.list;
+    data.params.total = res.data.data.total;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+// 分页
 const handlePageChange = (page, size) => {
-  params.query.page = page;
-  params.query.pageSize = size;
+  data.params.query.page = page;
+  data.params.query.pageSize = size;
+  getList();
+};
+// 查询
+const handleSearch = () => {
+  getList();
 };
-const handleLogin = async () => {
+// 切换状态
+const handleStatus = async (obj) => {
   try {
-    const res = await property_list();
-    console.log(res.data.data.list);
-    data.list = res.data.data.list
+    const res = await propertyStatus({
+      id: obj.id,
+      status: obj.status ? 0 : 1,
+    });
+    if (res?.data) {
+      globalProperties.$message.success("操作成功");
+      getList();
+    } else {
+      globalProperties.$message.error("操作失败");
+    }
   } catch (e) {
-    console.log(e)
+    console.log(e);
   }
 };
-
+// 状态值
+enum statusEnum {
+  "禁用" = 0,
+  "启用",
+}
 onMounted(() => {
-  try{
-    handleLogin()
-  } catch(e) {
-    console.log(e)
-  }
+  getList();
 });
 </script>
  
 <template>
   <div class="page-container">
     <h1>物业列表</h1>
+    <el-row style="padding-bottom: 20px">
+      <el-form :inline="true" label-width="70px">
+        <el-form-item label="物业名称">
+          <el-input
+            v-model.trim="data.params.query.name"
+            placeholder="请填写物业名称"
+            maxlength="15"
+            @change="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button type="primary">
+            <router-link to="/property/edit">创建物业</router-link>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
     <el-table
       :data="data.list"
       style="width: 100%"
       border
-      v-loading="loading"
+      v-loading="data.loading"
       align="center"
       element-loading-text="拼命加载中"
     >
-      <el-table-column prop="location" label="地区" width="180">
+      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
+      <el-table-column prop="location" label="地区" align="center">
       </el-table-column>
-      <el-table-column prop="address" label="详细地址" width="180">
+      <el-table-column prop="address" label="详细地址" align="center">
       </el-table-column>
-      <el-table-column prop="name" label="公司名称" width="180">
+      <el-table-column prop="name" label="公司名称" align="center">
       </el-table-column>
-      <el-table-column prop="userName" label="联系人" width="180">
+      <el-table-column prop="userName" label="联系人" align="center">
       </el-table-column>
-      <el-table-column prop="userPhone" label="联系电话" width="180">
+      <el-table-column prop="userPhone" label="联系电话" align="center">
       </el-table-column>
-      <el-table-column prop="businessLicense" label="营业执照" width="180">
+      <el-table-column prop="businessLicense" label="营业执照" align="center">
+        <template #default="scope">
+          <el-image
+            :src="
+              scope.row.businessLicense
+                ? scope.row.businessLicense
+                : globalProperties.$defaultImage
+            "
+            fit="contain"
+            lazy
+            style="height: 100px"
+          ></el-image>
+        </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="入驻时间" width="180">
+      <el-table-column prop="createTime" label="入驻时间" align="center">
+        <template #default="scope">
+          {{ parseTime(new Date(scope.row.createTime).getTime()) }}
+        </template>
       </el-table-column>
-      <el-table-column prop="contractNumber" label="合同编号" width="180">
+      <el-table-column prop="contractNumber" label="合同编号" align="center">
       </el-table-column>
-      <el-table-column prop="status" label="状态">
+      <el-table-column prop="status" label="状态" align="center">
         <template #default="scope">
-          {{ scope.row.status }}
+          {{ statusEnum[scope.row.status] }}
         </template>
       </el-table-column>
-      <el-table-column label="操作">
+      <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary">代理登录</el-button>
-          <el-button type="primary">删除</el-button>
+          <el-button type="text" disabled>代理登录</el-button>
+          <el-button type="text" @click="handleStatus(scope.row)">{{
+            scope.row.status ? "禁用" : "启用"
+          }}</el-button>
+          <el-button type="text" disabled>删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <Pagination
-      :total="params.total"
-      :currentPage="params.query.page"
-      :pageSize="params.query.pageSize"
+      :total="data.params.total"
+      :currentPage="data.params.query.page"
+      :pageSize="data.params.query.pageSize"
       @pageChange="handlePageChange"
     ></Pagination>
   </div>