add:维修人员管理

张红振
1 parent 11681ac1
Showing 10 changed files with 479 additions and 29 deletions
src/api/notify/serviceman.ts
src/components/Pagination/index.vue
src/router/index.ts
src/router/modules/serviceman.ts
src/views/community/housekeeper/houseDetail.vue
src/views/community/residence/communityDetail.vue
src/views/housekeeper/buildinMganager/detail.vue
src/views/ownerManagement/owner/detail.vue
src/views/serviceman/detail.vue
src/views/serviceman/index.vue
+import request from '../request'
+
+// 列表查询
+export function getTableList(params:any) {
+  return request({
+    method: 'get',
+    url: '/accendant/getList',
+    params: params
+  })
+}
+
+// 新增修改
+export function addOrUpdate(params:any) {
+  return request({
+    method: 'post',
+    url: '/accendant/addOrUpdate',
+    data: params
+  })
+}
+// 删除
+export function deleteAccendant(params:any) {
+  return request({
+    method: 'delete',
+    url: '/accendant/deleteAccendant',
+    params: params
+  })
+}
@@ -39,8 +39,8 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
  
 const emit = defineEmits<{
   (e: "pageChange", curPage: number, curSize: number, tagName: string): void;
-  (e: "update:currentPage", val);
-  (e: "update:pageSize", val);
+  (e: "update:currentPage", val:number): void;
+  (e: "update:pageSize", val:number): void;
 }>();
  
 const currentPage = computed({
@@ -9,6 +9,7 @@ import Property from &quot;./modules/property&quot;
 import Community from "./modules/community"
 import OwnerManagement from "./modules/ownerManagement"
 import Housekeeper from "./modules/housekeeper"
+import Serviceman from "./modules/serviceman"
 import Layout from '@/layout/enter.vue'
 const routes: Array<any> = [
   {
@@ -38,6 +39,7 @@ const routes: Array&lt;any&gt; = [
   Community,
   OwnerManagement,
   Housekeeper,
+  Serviceman,
   {
     path: '/404',
     name: 'Error',
+import Layout from '@/layout/enter.vue'
+const serviceman = {
+  path: '/',
+  component: Layout,
+  name: 'Serviceman',
+  children: [{
+    path: 'serviceman',
+    name: 'serviceman',
+    component: () => import('@/views/serviceman/index.vue'),
+    meta: { title: '维修人员管理' }
+  }]
+}
+
+export default serviceman
@@ -36,7 +36,7 @@ let data = reactive({
 /**
  * 获取下拉数据
  */
-const getSelectList: void = () => {
+const getSelectList = (): void => {
   getTableList({ page: 1, pageSize: 1000, type: 0 })
     .then((res) => {
       data.options = res.data.data.list;
@@ -124,7 +124,7 @@ let submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
       addOrUpdate(props.formObj)
         .then((res) => {
           loading.value = false;
-          emit('success')
+          emit("success");
         })
         .catch((err) => {
           loading.value = false;
@@ -176,12 +176,14 @@ defineExpose({
     <el-form-item label="楼宇名称:" prop="buildingName">
       <el-input
         v-model="props.formObj.buildingName"
+        maxlength="30"
         :disabled="!!props.formObj.id"
         placeholder="请输入楼宇名称"
       ></el-input>
     </el-form-item>
     <el-form-item label="单元:" prop="unitCount">
       <el-input
+        maxlength="15"
         v-model="props.formObj.unitCount"
         placeholder="请输入单元"
         onkeyup="value=value.replace(/[^\d]/g,'')"
@@ -197,13 +199,15 @@ defineExpose({
     </el-form-item>
     <el-form-item label="建筑面积:" prop="grossArea">
       <el-input
+        maxlength="8"
         v-model="props.formObj.grossArea"
-        onkeyup="value=value.replace(/[^\d]/g,'')"
+        onkeyup="value=value.replace(/[^\d.]/g,'')"
         placeholder="请输入建筑面积"
       ></el-input>
     </el-form-item>
     <el-form-item label="总房屋数量:" prop="houseCount">
       <el-input
+        maxlength="4"
         v-model="props.formObj.houseCount"
         onkeyup="value=value.replace(/[^\d]/g,'')"
         placeholder="请输入总房屋数量"
@@ -211,8 +215,9 @@ defineExpose({
     </el-form-item>
     <el-form-item label="使用面积:" prop="employArea">
       <el-input
+        maxlength="8"
         v-model="props.formObj.employArea"
-        onkeyup="value=value.replace(/[^\d]/g,'')"
+        onkeyup="value=value.replace(/[^\d.]/g,'')"
         placeholder="请输入使用面积"
       ></el-input>
     </el-form-item>
@@ -107,22 +107,22 @@ const cancel: void = () =&gt; {
 <template>
   <el-form ref="ruleFormRef" :model="props.formObj" :rules="rules" label-width="100px">
     <el-form-item label="小区名称:" prop="name">
-      <el-input v-model="props.formObj.name" placeholder="请输入名称" :disabled="!!props.formObj.id"></el-input>
+      <el-input v-model="props.formObj.name" placeholder="请输入名称" :disabled="!!props.formObj.id" maxlength="30"></el-input>
     </el-form-item>
     <el-form-item label="所在地区:" prop="locality">
-      <el-input v-model="props.formObj.locality" placeholder="请输入所在地区"></el-input>
+      <el-input v-model="props.formObj.locality" placeholder="请输入所在地区" maxlength="30"></el-input>
     </el-form-item>
     <el-form-item label="详细地址:" prop="address">
-      <el-input v-model="props.formObj.address" placeholder="请输入详细地址"></el-input>
+      <el-input v-model="props.formObj.address" placeholder="请输入详细地址" maxlength="50"></el-input>
     </el-form-item>
     <el-form-item label="楼座数:" prop="buildingCount">
-      <el-input v-model="props.formObj.buildingCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入楼座数"></el-input>
+      <el-input v-model="props.formObj.buildingCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入楼座数" maxlength="3"></el-input>
     </el-form-item>
     <el-form-item label="储藏室数:" prop="storeroomCount">
-      <el-input v-model="props.formObj.storeroomCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入储藏室数"></el-input>
+      <el-input v-model="props.formObj.storeroomCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入储藏室数" maxlength="3"></el-input>
     </el-form-item>
     <el-form-item label="车位数:" prop="truckSpaceCount">
-      <el-input v-model="props.formObj.truckSpaceCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入车位数"></el-input>
+      <el-input v-model="props.formObj.truckSpaceCount" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入车位数" maxlength="3"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button
 <script setup lang="ts">
-import { reactive, ref, getCurrentInstance,defineExpose } from "vue";
+import { reactive, ref, getCurrentInstance, defineExpose } from "vue";
 import type { ElForm } from "element-plus";
 import { insertOrUpdate } from "@/api/housekeeper/buildinMganager.ts";
  
@@ -88,12 +88,14 @@ let submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
   if (!formEl) return;
   formEl.validate((valid) => {
     if (valid) {
-      insertOrUpdate(props.formObj).then((res) => {
-        loading.value = false;
-        emit("success");
-      }).catch((err) => {
-        loading.value = false;
-      });
+      insertOrUpdate(props.formObj)
+        .then((res) => {
+          loading.value = false;
+          emit("success");
+        })
+        .catch((err) => {
+          loading.value = false;
+        });
     } else {
       instance?.proxy?.$message.error("请完善信息"); //调用
       loading.value = false;
@@ -115,7 +117,7 @@ const cancel: void = () =&gt; {
 };
  
 defineExpose({
-  resetForm
+  resetForm,
 });
 </script>
  
@@ -131,16 +133,21 @@ defineExpose({
       <el-input
         v-model="props.formObj.name"
         placeholder="请输入名称"
+        maxlength="10"
       ></el-input>
     </el-form-item>
     <el-form-item label="手机号:" prop="mobile">
       <el-input
         v-model="props.formObj.mobile"
+        maxlength="30"
+        onkeyup="value=value.replace(/[^\d]/g,'')"
         placeholder="请输入所在地区"
       ></el-input>
     </el-form-item>
     <el-form-item label="身份证号:" prop="idcard">
       <el-input
+        maxlength="18"
+        onkeyup="value=value.replace(/[^\d]/g,'')"
         v-model="props.formObj.idcard"
         placeholder="请输入详细地址"
       ></el-input>
@@ -179,6 +186,7 @@ defineExpose({
     </el-form-item>
     <el-form-item label="户籍所在地:" prop="censusRegister">
       <el-input
+        maxlength="50"
         v-model="props.formObj.censusRegister"
         placeholder="请输入户籍所在地"
       ></el-input>
@@ -194,6 +202,7 @@ defineExpose({
     </el-form-item>
     <el-form-item label="民族:" prop="nationality">
       <el-input
+        maxlength="20"
         v-model="props.formObj.nationality"
         placeholder="请输入民族"
       ></el-input>
 <script setup lang="ts">
-import { reactive, onMounted, watchEffect,defineEmits } from "vue";
+import { reactive, onMounted, watchEffect, defineEmits } from "vue";
 import { getResidentById, update } from "@/api/ownerManagement/owner.ts";
  
 // 声明props
@@ -35,11 +35,7 @@ const data = reactive({
     { label: "城镇户口", value: 1 },
     { label: "外阜", value: 2 },
   ],
-  livingList: [
-    { label: "自住"},
-    { label: "暂住" },
-    { label: "外租" },
-  ],
+  livingList: [{ label: "自住" }, { label: "暂住" }, { label: "外租" }],
 });
 const emit = defineEmits<{
   (e: "cancel"): void;
@@ -62,7 +58,7 @@ const getData = (id: number) =&gt; {
  */
 const submit = () => {
   update(data.formObj).then((res) => {
-    emit("success")
+    emit("success");
   });
 };
 /**
@@ -97,6 +93,8 @@ watchEffect((newValue, oldVlaue) =&gt; {
     </el-form-item>
     <el-form-item label="身份证号:" prop="idcard">
       <el-input
+        maxlength="18"
+        onkeyup="value=value.replace(/[^\d]/g,'')"
         v-model="data.formObj.idcard"
         :disabled="props.isEdit"
       ></el-input>
@@ -104,6 +102,8 @@ watchEffect((newValue, oldVlaue) =&gt; {
  
     <el-form-item label="手机号:" prop="mobile">
       <el-input
+        maxlength="11"
+        onkeyup="value=value.replace(/[^\d]/g,'')"
         v-model="data.formObj.mobile"
         disabled
       ></el-input>
@@ -192,7 +192,7 @@ watchEffect((newValue, oldVlaue) =&gt; {
       </el-select>
     </el-form-item>
     <el-form-item label="居住类型:" prop="isLiving">
-    <el-select
+      <el-select
         v-model="data.formObj.isLiving"
         placeholder="请选择"
         style="width: 200px"
@@ -222,7 +222,7 @@ watchEffect((newValue, oldVlaue) =&gt; {
     <el-row>
       <el-form-item>
         <el-button type="primary" @click="submit">保存</el-button>
-         <el-button @click="cancel">取消</el-button>
+        <el-button @click="cancel">取消</el-button>
       </el-form-item>
     </el-row>
   </el-form>
+<script setup lang="ts">
+import { reactive, ref, onMounted, getCurrentInstance,defineExpose } from "vue";
+import type { ElForm } from "element-plus";
+import { addOrUpdate } from "@/api/notify/serviceman.ts";
+import { getTableList } from "@/api/community/residence.ts";
+
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
+// 声明props
+const props = defineProps({
+  formObj: {
+    type: Object,
+    default: {
+      name: null,
+      age:null,
+      mobile: null,
+      idCard: null,
+      sex: null,
+      neighborhoods: [],
+    },
+  },
+});
+const data = reactive({
+  loading: false,
+  options: [],
+  sexList: ["男", "女"],
+});
+
+// 表单验证
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请输入小区名",
+      trigger: "blur",
+    },
+  ],
+  age: [
+    {
+      required: true,
+      message: "请输入年龄",
+      trigger: "blur",
+    },
+  ],
+  mobile: [
+    {
+      required: true,
+      message: "请输入手机号",
+      trigger: "blur",
+    },
+  ],
+  idCard: [
+    {
+      required: true,
+      message: "请输入身份证",
+      trigger: "blur",
+    },
+  ],
+  neighborhoods: [
+    {
+      required: true,
+      message: "请输入楼座数",
+      trigger: "blur",
+    },
+  ],
+  sex: [
+    {
+      required: true,
+      message: "请选择性别",
+      trigger: "blur",
+    },
+  ],
+});
+/**
+ * 获取下拉数据
+ */
+const getSelectList = (): void => {
+  getTableList({ page: 1, pageSize: 1000, type: 0 })
+    .then((res) => {
+      data.options = res.data.data.list;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+const emit = defineEmits<{
+  (e: "cancel"): void;
+  (e: "success"): void;
+}>();
+
+/**
+ * 表单提交
+ * @param {ElForm | undefined} formEl 表单对象
+ */
+let submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  data.loading = true;
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      let params = JSON.parse(JSON.stringify(props.formObj));
+      delete params.neighborhoods;
+      let ids = props.formObj.neighborhoods
+        .map((item) => {
+          return item.id;
+        })
+        .toString();
+        params=Object.assign(params,{ids:ids})
+        // console.log({ accendant: params, neighborhoodIds: ids })
+      addOrUpdate(params)
+        .then((res) => {
+          data.loading = false;
+          emit("success");
+        })
+        .catch((err) => {
+          data.loading = false;
+        });
+    } else {
+      instance?.proxy?.$message.error("请完善信息"); //调用
+      data.loading = false;
+      return false;
+    }
+  });
+};
+/**
+ * 重置
+ */
+let resetForm = () => {
+  ruleFormRef.value.resetFields();
+};
+/**
+ * 取消提交
+ */
+const cancel: void = () => {
+  emit("cancel");
+};
+defineExpose({
+  resetForm,
+});
+onMounted(() => {
+  getSelectList();
+});
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="props.formObj"
+    :rules="rules"
+    label-width="100px"
+  >
+    <el-form-item label="姓名:" prop="name">
+      <el-input
+        v-model="props.formObj.name"
+        placeholder="请输入姓名"
+        maxlength="30"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="年龄:" prop="age">
+      <el-input
+        v-model="props.formObj.age"
+        placeholder="请输入年龄"
+        maxlength="3"
+        onkeyup="value=value.replace(/[^\d]/g,'')"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="联系电话:" prop="mobile">
+      <el-input
+        v-model="props.formObj.mobile"
+        placeholder="请输入联系电话"
+        maxlength="11"
+        onkeyup="value=value.replace(/[^\d]/g,'')"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="身份证号:" prop="idCard">
+      <el-input
+        v-model="props.formObj.idCard"
+        placeholder="请输入身份证号"
+        maxlength="18"
+        onkeyup="value=value.replace(/[^\d]/g,'')"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="服务小区:" prop="neighborhoods">
+      <el-select
+        v-model="props.formObj.neighborhoods"
+        multiple
+        placeholder="请选择小区"
+        value-key="id"
+      >
+        <el-option
+          v-for="item in data.options"
+          :key="item"
+          :label="item.name"
+          :value="item"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="性别:" prop="sex">
+      <el-select v-model="props.formObj.sex" placeholder="请选择性别">
+        <el-option
+          v-for="item in data.sexList"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button
+        type="primary"
+        @click="submitForm(ruleFormRef)"
+        :loading="data.loading"
+        >保存</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { reactive, onMounted, getCurrentInstance,ref } from "vue";
+import { getTableList, deleteAccendant } from "@/api/notify/serviceman.ts";
+import Detail from "./detail.vue";
+import { parseTime } from "@/utils/tool.ts";
+import Pagination from "@/components/Pagination/index.vue";
+
+let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
+const detailRef = ref<InstanceType<typeof ElForm>>();
+// 数据筛选
+const searchData = reactive({
+  name: null,
+  accendantType:1,
+  page: 1,
+  pageSize: 10,
+});
+// 展示
+const data = reactive({
+  total: 0,
+  tableList: [],
+  dialogVisible: false,
+  loading: false,
+  title: "新增维修人员",
+  formObj: {},
+});
+
+/**
+ * 列表查询
+ */
+const search = (): void => {
+  data.loading = true;
+  getTableList(searchData)
+    .then((res) => {
+      data.tableList = res.data.data;
+      data.total = res.data.data.length;
+      searchData.pageSize = res.data.data.pageSize;
+      data.loading = false;
+    })
+    .catch((err) => {
+      console.log(err);
+      data.loading = false;
+    });
+};
+/**
+ * 编辑
+ * @param { Object } 列表对象
+ */
+const edit = (row: Object) => {
+  data.title = "编辑维修人员";
+  data.formObj = JSON.parse(JSON.stringify(row));
+  data.dialogVisible = true;
+};
+/**
+ * 删除
+ * @param { number } accendantId 唯一ID
+ */
+const remove = (accendantId: number) => {
+  instance?.proxy?.$messageBox
+    .confirm("确认要进行此操作？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+    })
+    .then(() => {
+      deleteAccendant({ accendantId: accendantId }).then((res) => {
+        instance?.proxy?.$message.success("操作成功"); //调用
+        search();
+      });
+    })
+    .catch((err) => {});
+};
+/**
+ * 组件操作成功回调
+ */
+const changeData: void = () => {
+  data.dialogVisible = false;
+  search();
+};
+
+/**
+ * 弹框关闭
+ */
+const dialogClose: void = () => {
+  data.title = "新增维修人员";
+  data.formObj = {};
+   detailRef.value.resetForm();
+};
+
+onMounted(() => {
+  search();
+});
+</script>
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form :inline="true" :model="searchData" v-loading="data.loading">
+      <el-form-item>
+        <el-input
+          placeholder="请输入姓名/电话"
+          v-model="searchData.name"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        ><el-button type="primary" @click="search"
+          >查询</el-button
+        ></el-form-item
+      >
+      <el-row>
+        <el-form-item>
+          <!-- <el-button type="primary">导入</el-button>
+          <el-button type="primary">导出</el-button> -->
+          <el-button type="primary" @click="data.dialogVisible = true"
+            >新增</el-button
+          >
+        </el-form-item>
+      </el-row>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table border :data="data.tableList">
+      <el-table-column label="姓名" prop="name"></el-table-column>
+      <el-table-column label="性别" prop="sex"></el-table-column>
+      <el-table-column label="年龄" prop="age"></el-table-column>
+      <el-table-column label="服务小区" prop="truckSpaceCount">
+      <template #default="scope">
+       <span v-for="item in scope.row.neighborhoods">{{ `${item.name} ` }}</span>
+      </template>
+      </el-table-column>
+      <el-table-column label="联系电话" prop="mobile"></el-table-column>
+      <el-table-column label="身份证号" prop="idCard"></el-table-column>
+      <el-table-column label="创建时间" prop="createTime">
+        <template #default="scope">
+          <span>{{ parseTime(new Date(scope.row.createTime).getTime()) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button type="text" size="mini" @click="edit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button type="text" size="mini" @click="remove(scope.row.id)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <Pagination
+      v-if="data.total > 0"
+      :total="data.total"
+      v-model:currentPage="searchData.page"
+      v-model:pageSize="searchData.pageSize"
+      @pageChange="search"
+    ></Pagination>
+
+    <!-- 详情弹框 -->
+    <el-dialog
+      v-model="data.dialogVisible"
+      :title="data.title"
+      width="30%"
+      @close="dialogClose"
+    >
+      <Detail
+      ref="detailRef"
+        @cancel="data.dialogVisible = false"
+        @success="changeData"
+        :formObj="data.formObj"
+      ></Detail>
+    </el-dialog>
+  </div>
+</template>
+
+<style></style>