cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { repairList } from "@/api/notify/repair";
import { getTableList } from "@/api/notify/maintain.ts";
import { getTableList as serviceMan } from "@/api/notify/serviceman.ts";
import { allNeighborhood } from "@/api/community/residence";
import { parseTime, globalFilters } from "@/utils/tool";
import Pagination from "@/components/Pagination/index.vue";
import { ElMessageBox } from "element-plus";
// import * as store from "@/pinia/index";
import { useLoginStore } from "@/pinia/login";
import { status } 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[];
  communities: any[];
  status: any[];
  params: Params;
}
const value1 = ref([]);
let data: Data = reactive({
  list: [],
  projects: [],
  communities: [],
  serviceMen: [],
  status: status,
  loading: false,
  params: {
    total: 0,
    query: {
      page: 1,
      pageSize: 10,
      userName: "",
      status: null,
      repairProject: "",
      id: "",
      handleName: "",
      phone: "",
      endTime: "",
      startTime: "",
    },
  },
});
/**
 * 小区列表
 */
const getCommunityList = async () => {
  try {
    const res = await allNeighborhood();
    data.communities = res?.data?.data;
  } catch (e) {
    console.log(e);
  }
};
/**
 * 维修人员列表
 */
const serviceManList = async (pageSize = 500) => {
  try {
    const res = await serviceMan({
      page: 1,
      pageSize: pageSize,
      accendantType: 1,
    });
    data.serviceMen = res?.data?.data?.list;
    if (res?.data?.data?.total > pageSize) {
      serviceManList(res?.data?.data?.total);
    }
  } catch (e) {
    console.log(e);
  }
};
/**
 * 列表
 */
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 {array} value [开始时间, 结束时间]
 */
const handleTimeChange = (value: array) => {
  data.params.query.startTime = value ? value[0] : "";
  data.params.query.endTime = value ? value[1] : "";
  getList();
};
/**
 * 获取维修项目
 * @param {number} pageSize 一页数据条数
 */
const getProjects = async (pageSize: number = 20) => {
  try {
    const res = await getTableList({
      page: 1,
      pageSize: pageSize,
      // oid: store?.family?.loginStore()?.organizationId ?? 0,
      oid: useLoginStore()?.getOid ?? 0,
    });
    data.projects = res?.data?.data?.list;
    if (res?.data?.data?.total > pageSize) {
      getProjects(res?.data?.data?.total);
    }
  } catch (e) {
    console.log(e);
  }
};
/**
 * 状态值
 * @enum {number}
 */
enum payTypeEnum {
  "微信" = 1,
  "现金",
  "支付宝",
}
onMounted(() => {
  getCommunityList();
  getProjects();
  serviceManList();
  getList();
});
</script>

<template>
  <div class="page-container">
    <h1>工单列表</h1>
    <el-row style="padding-bottom: 20px">
      <el-form :inline="true" label-width="70px" @submit.native.prevent>
        <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-input
            v-model.trim="data.params.query.handleName"
            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.name"
              :value="item.id"
              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="50"
            @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">
        <template #default="scope">
          {{
            data.communities.find((i) => ~~i.id === ~~scope.row.neighboorHoodId)
              ?.name ?? scope.row.neighboorHoodId
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="repairName"
        label="报修项目"
        align="center"
      ></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">
        <template #default="scope">{{ ~~scope.row.totalFee / 100 }}</template>
      </el-table-column>
      <el-table-column prop="repairId" label="处理人" align="center">
        <template #default="scope">
          {{
            data.serviceMen.find((i) => ~~i.sid === ~~scope.row.repairId)
              ?.name ?? scope.row.repairId
          }}
        </template>
      </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>