报修管理

杨泽宇
1 parent 71f53348
Showing 14 changed files with 744 additions and 28 deletions
src/api/notify/repair.ts
src/api/property/channel.ts
src/layout/enter.vue
src/layout/header.vue
src/layout/menu.vue
src/router/index.ts
src/router/modules/property.ts
src/router/modules/repair.ts
src/style/menu.scss
src/views/column/edit.vue
src/views/column/index.vue
src/views/repair/config.ts
src/views/repair/edit.vue
src/views/repair/index.vue
+import request from '../request';
+import { deleteEmptyParam } from '@/utils/tool';
+
+/**
+ * @description 工单列表
+ * @function repairList
+ */
+export const repairList = async ( params: any ) => {
+  let res: any = await request({
+    method: 'get',
+    url: '/repair/list',
+    params: deleteEmptyParam(params)
+  })
+  return res
+}
+
+/**
+ * @description 新增报修
+ * @function repairAdd
+ */
+export function repairAdd (data) {
+  return request({
+    method: 'post',
+    url: '/repair/add',
+    data: data
+  })
+}
+
+/**
+ * @description 工单详情
+ * @function repairDetail
+ */
+export const repairDetail = async ( params: any ) => {
+  let res: any = await request.get( '/repair/getRepairOrder', params  )
+  return res
+}
 \ No newline at end of file
+import request from '../request'
+
+/**
+ * @description 栏目列表
+ * @function columnList
+ */
+export const columnList = async ( params: any ) => {
+  let res: any = await request.get( '/column/list', { params } )
+  return res
+}
+
+/**
+ * @description 新增栏目
+ * @function columnAdd
+ */
+export function columnAdd (data) {
+  return request({
+    method: 'post',
+    url: '/column/add',
+    data: data
+  })
+}
+
+/**
+ * @description 修改栏目状态
+ * @function columnStatus
+ */
+export const columnStatus = async ( params: any ) => {
+  let res: any = await request.put( '/column/status', params  )
+  return res
+}
+
+/**
+ * @description 修改栏目
+ * @function columnEdit
+ */
+ export const columnEdit = async ( data: any ) => {
+  let res: any = await request.post( '/column/edit', data  )
+  return res
+}
+
+
+/**
+ * @description 栏目排序
+ * @function columnSort
+ */
+ export const columnSort = async ( params: any ) => {
+  let res: any = await request.put( '/column/sort', params  )
+  return res
+}
 \ No newline at end of file
@@ -3,15 +3,17 @@
  * 公共布局入口组件
  * @module Enter
  */
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, computed } from "vue";
 import Header from "./header.vue";
 import Menu from "./menu.vue";
 import * as store from "@/pinia/index";
 let asyncData = reactive({
-  isCollapse: null
-})
+  isCollapse: null,
+});
 onMounted(() => {
-  asyncData.isCollapse = store.family.appStore().isCollapse
+  asyncData.isCollapse = computed (() => {
+    return store.family.appStore().isCollapse
+  })
 });
 </script>
@@ -30,24 +32,17 @@ onMounted(() =&gt; {
       class="view-container"
       :class="asyncData.isCollapse ? 'thinMenu' : 'fatMenu'"
     >
-      <router-view v-slot="{ Component, route }">
-        <transition :name="route.name">
-          <keep-alive v-if="route?.meta?.keepAlive">
-            <component :is="Component" />
-          </keep-alive>
-          <component :is="Component" v-else />
-        </transition>
-      </router-view>
+      <div>
+        <router-view v-slot="{ Component, route }">
+          <transition :name="route.name">
+            <keep-alive v-if="route?.meta?.keepAlive">
+              <component :is="Component" />
+            </keep-alive>
+            <component :is="Component" v-else />
+          </transition>
+        </router-view>
+      </div>
     </div>
     <!-- TIP 右侧具体页面内容结束 -->
   </div>
 </template>
-
-<style scoped lang="scss">
-.fatMenu {
-  margin-left: $sideBarWidth !important;
-}
-.thinMenu {
-  margin-left: $sideBarWidthThin !important;
-}
-</style>
@@ -3,7 +3,7 @@
  * 公共布局头部组件
  * @module Header
  */
-import { getCurrentInstance, onMounted, reactive } from "vue";
+import { getCurrentInstance, onMounted, reactive, computed } from "vue";
 import * as store from "@/pinia/index";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { Fold, Expand } from "@element-plus/icons-vue";
@@ -45,8 +45,9 @@ let asyncData = reactive({
 onMounted(() => {
   asyncData.userInfo = store.family.loginStore().userName;
   asyncData.organizationLogo = store.family.loginStore().organizationLogo;
-  // 去除控制台警告，这么写就不报警告，写成computed return的形式就报警告，暂未找到原因（view中v-if、:class原因已排除、别的页面同样参数同样用法不会报警告）
-  asyncData.isCollapse = store.family.appStore().isCollapse;
+  asyncData.isCollapse = computed (() => {
+    return store.family.appStore().isCollapse
+  })
 });
 </script>
@@ -72,8 +73,8 @@ onMounted(() =&gt; {
     <!-- TIP logo结束 -->
     <!-- TIP 控制菜单collapse的按钮 -->
     <div class="menu-collapse-button" @click="toggleMenu">
-      <Expand class="font-style" v-if="asyncData.isCollapse" />
-      <Fold class="font-style" v-if="!asyncData.isCollapse" />
+      <Expand class="font-style" v-show="asyncData.isCollapse" />
+      <Fold class="font-style" v-show="!asyncData.isCollapse" />
     </div>
     <!-- TIP 控制菜单collapse的按钮结束 -->
     <!-- TIP 功能键 -->
@@ -18,7 +18,10 @@ let asyncData = reactive({
 });
 onMounted(() => {
   asyncData.menuData = store.family.loginStore().menuList;
-  asyncData.isCollapse = store.family.appStore().isCollapse
+  // asyncData.isCollapse = store.family.appStore().isCollapse
+  asyncData.isCollapse = computed (() => {
+    return store.family.appStore().isCollapse
+  })
 });
 </script>
 import { createRouter, createWebHashHistory } from 'vue-router'
+import Repair from './modules/repair'
 import Notify from './modules/notify'
 import System from './modules/system'
 import Permission from './modules/permission'
@@ -27,6 +28,7 @@ const routes: Array&lt;any&gt; = [
       meta: { title: '欢迎访问' }
     }]
   },
+  Repair,
   Notify,
   System,
   Permission,
@@ -13,6 +13,16 @@ const property= {
     name: 'edit',
     component: () => import('@/views/property/edit.vue'),
     meta: { title: '物业编辑' }
+  }, {
+    path: '/property/column',
+    name: 'column',
+    component: () => import('@/views/column/index.vue'),
+    meta: { title: '栏目管理' }
+  }, {
+    path: '/property/column/edit',
+    name: 'columnEdit',
+    component: () => import('@/views/column/edit.vue'),
+    meta: { title: '栏目编辑' }
   }]
 }
+import Layout from '@/layout/enter.vue'
+const repair = {
+  path: '/',
+  component: Layout,
+  name: 'Repair',
+  children: [{
+    path: 'repair',
+    name: 'repair',
+    component: () => import('@/views/repair/index.vue'),
+    meta: { title: '报修管理' }
+  }, {
+    path: '/repair/edit',
+    name: 'repairEdit',
+    component: () => import('@/views/repair/edit.vue'),
+    meta: { title: '报修编辑' }
+  }]
+}
+
+export default repair
 // TIP 左侧菜单固定宽度，右边页面部分自适应
 .main-container {
-  *zoom: 1; position: relative;
+  position: relative;
   .sidebar-container {
     height: 100vh;
     position: fixed; 
+<template>栏目编辑</template>
 \ No newline at end of file
+<template>栏目列表</template>
 \ No newline at end of file
+interface Option {
+  label: string,
+  value: number
+}
+
+/**
+ * 维修项目
+ */
+export const projects: Option[] = [
+  {
+    label: '马桶疏通',
+    value: 1
+  },
+  {
+    label: '下水道疏通',
+    value: 2
+  },
+  {
+    label: '水龙头维修',
+    value: 3
+  },
+  {
+    label: '更换灯泡',
+    value: 4
+  }
+]
+
+/**
+ * 工单状态
+ */
+export const status: Option[] = [
+  {
+    label: '未处理',
+    value: 0
+  },
+  {
+    label: '处理中',
+    value: 1
+  },
+  {
+    label: '已失效',
+    value: 2
+  },
+  {
+    label: '已完成',
+    value: 3
+  },
+]
 \ No newline at end of file
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { getTableList } from "@/api/community/residence";
+import { repairAdd, repairDetail } from "@/api/notify/repair";
+import { back } from "@/utils/tool";
+import { projects } from "./config";
+import type { ElForm } from "element-plus";
+let instance: ComponentInternalInstance | null = getCurrentInstance();
+let form = reactive({
+  data: {
+    userName: "",
+    neighboorHoodId: null,
+    address: "",
+    phone: "",
+    repairProject: "",
+    intentBeginTime: "",
+    intentEndTime: "",
+    remark: "",
+    id: null,
+  },
+  neighborhoods: [],
+  checkList: [],
+  projects: projects,
+  loading: false,
+  dataType: "",
+});
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+/**
+ * 表单验证规则
+ */
+const rules = reactive({
+  neighboorHoodId: [
+    {
+      required: true,
+      message: "请选择小区",
+      trigger: "blur",
+    },
+  ],
+  userName: [
+    {
+      required: true,
+      message: "请填写报修人",
+      trigger: "blur",
+    },
+  ],
+  address: [
+    {
+      required: true,
+      message: "请填写报修地址",
+      trigger: "blur",
+    },
+  ],
+  phone: [
+    {
+      required: true,
+      message: "请填写联系电话",
+      trigger: "blur",
+    },
+  ],
+  repairProject: [
+    {
+      required: true,
+      message: "请选择报修项目",
+      trigger: "blur",
+    },
+  ],
+  intentBeginTime: [
+    {
+      required: true,
+      message: "请选择意向上门开始时间",
+      trigger: "blur",
+    },
+  ],
+  intentEndTime: [
+    {
+      required: true,
+      message: "请选择意向上门结束时间",
+      trigger: "blur",
+    },
+  ],
+});
+/**
+ * 表单重置
+ */
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  form.checkList = [];
+  formEl.resetFields();
+};
+/**
+ * 表单提交
+ */
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true;
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log(form.data);
+      repairAdd(form.data)
+        .then((res) => {
+          if (res) {
+            instance?.proxy?.$message.success("操作成功");
+            history.go(-1);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+        .finally(() => {
+          form.loading = false;
+        });
+    } else {
+      instance?.proxy?.$message.error("请检查表单格式");
+      form.loading = false;
+      return false;
+    }
+  });
+};
+/**
+ * 小区列表
+ * @param {number | null} pageSize 一次请求多少条数据
+ */
+const getNeighborhoods = async (pageSize: number = 20) => {
+  try {
+    const res = await getTableList({
+      page: 1,
+      type: 0,
+      pageSize: pageSize,
+    });
+    form.neighborhoods = res?.data?.data?.list;
+    if (res?.data?.data?.total > pageSize) {
+      getNeighborhoods(res?.data?.data?.total);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+onMounted(() => {
+  getNeighborhoods();
+  form.data = useRoute().query;
+  if (JSON.stringify(form.data) === "{}") {
+    form.dataType = "add";
+  } else {
+    form.dataType = "edit";
+    form.checkList = form.data.repairProject
+      ? form.data.repairProject?.split(",").map((v) => v / 1)
+      : [];
+  }
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <el-card class="form_card" style="max-width: 1303px">
+      <h1 v-show="form.dataType === 'add'">创建工单</h1>
+      <h1 v-show="form.dataType === 'edit'">工单详情</h1>
+      <el-form
+        :inline="true"
+        :model="form.data"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="120px"
+        class="card-form"
+        :disabled="form.dataType === 'edit'"
+      >
+        <el-form-item
+          label="所属小区"
+          prop="neighboorHoodId"
+          style="width: 50%"
+        >
+          <el-select
+            v-model="form.data.neighboorHoodId"
+            placeholder="请选择小区"
+          >
+            <el-option
+              :label="item.name"
+              :value="item.id"
+              v-for="(item, index) in form.neighborhoods"
+              :key="index"
+            ></el-option>
+          </el-select>
+        </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="address" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.address"
+            placeholder="请填写报修地址"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.phone"
+            placeholder="请填写联系电话"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="报修项目" prop="repairProject" style="width: 100%">
+          <el-checkbox-group
+            v-model="form.checkList"
+            @change="(data) => (form.data.repairProject = data.join(','))"
+          >
+            <el-checkbox
+              v-for="(item, index) in form.projects"
+              :key="index"
+              :label="item.value"
+              >{{ item.label }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item
+          label="意向开始时间"
+          prop="intentBeginTime"
+          style="width: 50%"
+        >
+          <!-- format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss" -->
+          <el-date-picker
+            v-model="form.data.intentBeginTime"
+            type="datetime"
+            placeholder="请选择意向上门开始时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="意向结束时间"
+          prop="intentEndTime"
+          style="width: 50%"
+        >
+          <el-date-picker
+            v-model="form.data.intentEndTime"
+            type="datetime"
+            placeholder="请选择意向上门结束时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.remark"
+            placeholder="请填写备注"
+            maxlength="15"
+            type="textarea"
+            :rows="5"
+          />
+        </el-form-item>
+        <el-form-item style="width: 100%" v-show="form.dataType !== 'edit'">
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
+            >提交</el-button
+          >
+          <el-button
+            type="info"
+            @click="resetForm(ruleFormRef)"
+            v-show="form.dataType === 'add'"
+            >取消</el-button
+          >
+          <el-button type="info" @click="back">返回</el-button>
+        </el-form-item>
+      </el-form>
+      <el-button type="info" @click="back" v-if="form.dataType === 'edit'"
+        >返回</el-button
+      >
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import { repairList } from "@/api/notify/repair";
+import { parseTime, globalFilters } from "@/utils/tool";
+import Pagination from "@/components/Pagination/index.vue";
+import { ElMessageBox } from "element-plus";
+import { status, projects } from "./config";
+interface Form {
+  page: number;
+  pageSize: number;
+  userName?: string;
+  status?: number;
+  repairProject?: string;
+  id?: string;
+  phone?: string;
+  endTime?: string;
+  startTime?: string;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[];
+  projects: any[];
+  status: any[];
+  params: Params;
+}
+const value1 = ref([]);
+let data: Data = reactive({
+  list: [],
+  projects: projects,
+  status: status,
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      userName: "",
+      status: null,
+      repairProject: "",
+      id: "",
+      phone: "",
+      endTime: "",
+      startTime: "",
+    },
+  },
+});
+/**
+ * 列表
+ */
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await repairList(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;
+  }
+};
+/**
+ * 状态
+ * @param {object} obj 要操作的数据对象
+ */
+const handleStatus = async (obj) => {
+  try {
+    const res = await roleStatus({
+      roleId: obj.id,
+      status: obj.status ? 0 : 1,
+    });
+    if (res?.data) {
+      globalProperties.$message.success("操作成功");
+      getList();
+    } else {
+      globalProperties.$message.error("操作失败");
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+/**
+ * 时间组件回调
+ * @param {array} value [开始时间, 结束时间]
+ */
+const handleTimeChange = (value: array) => {
+  data.params.query.startTime = value ? value[0] : "";
+  data.params.query.endTime = value ? value[1] : "";
+  getList();
+};
+/**
+ * 获取维修项目名
+ * @param {string} ids 维修项目id串
+ */
+const getProjectNames = (ids: string) => {
+  let result: array = [];
+  if (ids) {
+    ids.split(",").map((item) => {
+      projects.map((i) => {
+        if (~~i.value === ~~item) {
+          result.push(i.label);
+        }
+      });
+    });
+  }
+  return result.join(",");
+};
+/**
+ * 状态值
+ * @enum {number}
+ */
+enum payTypeEnum {
+  "微信" = 1,
+  "现金",
+  "支付宝",
+}
+onMounted(() => {
+  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-date-picker
+            v-model="value1"
+            type="datetimerange"
+            range-separator="至"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="handleTimeChange"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select
+            v-model="data.params.query.status"
+            clearable
+            placeholder="请选择状态"
+            @change="getList"
+          >
+            <el-option
+              :label="item.label"
+              :value="item.value"
+              v-for="(item, index) in data.status"
+              :key="index"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="报修人">
+          <el-input
+            v-model.trim="data.params.query.userName"
+            placeholder="请填写报修人"
+            maxlength="15"
+            @change="getList"
+          />
+        </el-form-item>
+        <el-form-item label="报修项目">
+          <el-select
+            v-model="data.params.query.repairProject"
+            clearable
+            placeholder="请选择报修项目"
+            @change="getList"
+          >
+            <el-option
+              :label="item.label"
+              :value="item.value"
+              v-for="(item, index) in data.projects"
+              :key="index"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="联系电话">
+          <el-input
+            v-model.trim="data.params.query.phone"
+            placeholder="请填写联系电话"
+            maxlength="15"
+            @change="getList"
+          />
+        </el-form-item>
+        <el-form-item label="订单号">
+          <el-input
+            v-model.trim="data.params.query.id"
+            placeholder="请填写订单号"
+            maxlength="15"
+            @change="getList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList">查询</el-button>
+          <el-button type="primary"
+            ><router-link :to="{ path: '/repair/edit' }"
+              >创建工单</router-link
+            ></el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border
+      v-loading="data.loading"
+      align="center"
+      element-loading-text="拼命加载中"
+    >
+      <el-table-column prop="id" label="订单编号" align="center">
+      </el-table-column>
+      <el-table-column prop="neighboorHoodId" label="小区" align="center">
+      </el-table-column>
+      <el-table-column prop="repairProject" label="报修项目" align="center">
+        <template #default="scope">
+          {{ getProjectNames(scope.row.repairProject) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="报修地址" align="center">
+      </el-table-column>
+      <el-table-column prop="userName" label="报修人" align="center">
+      </el-table-column>
+      <el-table-column prop="phone" label="联系电话" align="center">
+      </el-table-column>
+      <el-table-column
+        prop="intentBeginTime"
+        label="意向上门时间"
+        align="center"
+      >
+        <template #default="scope">
+          {{ parseTime(new Date(scope.row.intentBeginTime).getTime()) }} ~
+          {{ parseTime(new Date(scope.row.intentEndTime).getTime()) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="totalFee" label="金额" align="center">
+      </el-table-column>
+      <el-table-column prop="repairId" label="处理人" align="center">
+      </el-table-column>
+      <el-table-column prop="payType" label="支付方式" align="center">
+        <template #default="scope">
+          {{ payTypeEnum[scope.row.payType] }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="repairTime" label="处理时间" align="center">
+        <template #default="scope">
+          {{ parseTime(new Date(scope.row.repairTime).getTime()) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" align="center">
+        <template #default="scope">
+          {{ globalFilters(scope.row.status, data.status) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="text">
+            <router-link :to="{ path: '/repair/edit', query: scope.row }"
+              >详情</router-link
+            >
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="data.params.total"
+      v-model:currentPage="data.params.query.page"
+      v-model:pageSize="data.params.query.pageSize"
+      @pageChange="getList"
+    ></Pagination>
+  </div>
+</template>