add 项目维护

张红振
1 parent 1970e0f3
Showing 5 changed files with 331 additions and 0 deletions
src/api/notify/maintain.ts
src/router/index.ts
src/router/modules/maintain.ts
src/views/maintain/detail.vue
src/views/maintain/index.vue
+import request from '../request'
+
+// 列表查询
+export function getTableList(params:any) {
+  return request({
+    method: 'get',
+    url: '/maintain/listByOid',
+    params: params
+  })
+}
+// 删除
+export function deleteMaintainById(params:any) {
+  return request({
+    method: 'DELETE',
+    url: '/maintain/deleteMaintainById',
+    params: params
+  })
+}
+// 新增
+export function insertOrUpdate(params:any) {
+  return request({
+    method: 'POST',
+    url: '/maintain/insertOrUpdate',
+    data: params
+  })
+}
@@ -10,6 +10,7 @@ import Community from &quot;./modules/community&quot;
 import OwnerManagement from "./modules/ownerManagement"
 import Housekeeper from "./modules/housekeeper"
 import Serviceman from "./modules/serviceman"
+import Maintain from "./modules/maintain"
 import Layout from '@/layout/enter.vue'
 const routes: Array<any> = [
   {
@@ -40,6 +41,7 @@ const routes: Array&lt;any&gt; = [
   OwnerManagement,
   Housekeeper,
   Serviceman,
+  Maintain,
   {
     path: '/404',
     name: 'Error',
+import Layout from '@/layout/enter.vue'
+const Maintain = {
+  path: '/',
+  component: Layout,
+  name: 'maintain',
+  children: [{
+    path: 'maintain',
+    name: 'maintain',
+    component: () => import('@/views/maintain/index.vue'),
+    meta: { title: '项目维护' }
+  }
+  ]
+}
+
+export default Maintain
+<script setup lang="ts">
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import type { ElForm } from "element-plus";
+import { insertOrUpdate } from "@/api/notify/maintain.ts";
+
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
+// 声明props
+const props = defineProps({
+  formObj: {
+    type: Object,
+    default: {
+      name: null,
+      status: null,
+    },
+  },
+});
+
+let loading = ref(false);
+
+// 表单验证
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请输入项目名称",
+      trigger: "blur",
+    },
+  ],
+  status: [
+    {
+      required: true,
+      message: "请选择状态",
+      trigger: "blur",
+    },
+  ],
+});
+
+const emit = defineEmits<{
+  (e: "cancel"): void;
+  (e: "success"): void;
+}>();
+
+/**
+ * 表单提交
+ * @param {ElForm | undefined} formEl 表单对象
+ */
+let submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      insertOrUpdate(props.formObj)
+        .then((res) => {
+          loading.value = false;
+          emit("success");
+        })
+        .catch((err) => {
+          loading.value = false;
+        });
+    } else {
+      instance?.proxy?.$message.error("请完善信息"); //调用
+      loading.value = false;
+      return false;
+    }
+  });
+};
+
+/**
+ * 取消提交
+ */
+const cancel: void = () => {
+  emit("cancel");
+};
+</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="status">
+      <el-radio-group v-model="props.formObj.status">
+        <el-radio :label="0">停用</el-radio>
+        <el-radio :label="1">启用</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button
+        type="primary"
+        @click="submitForm(ruleFormRef)"
+        :loading="loading"
+        >保存</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { reactive, onMounted, getCurrentInstance } from "vue";
+import { getTableList,deleteMaintainById } from "@/api/notify/maintain.ts";
+import { parseTime } from "@/utils/tool.ts";
+import Detail from "./detail.vue";
+import Pagination from "@/components/Pagination/index.vue";
+import * as store from "@/pinia/index";
+
+let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
+
+// 数据筛选
+const searchData = reactive({
+  name: null,
+  page: 1,
+  pageSize: 10,
+  oid:store?.family?.loginStore()?.organizationId??0
+});
+// 展示
+const data = reactive({
+  total: 0,
+  time: [],
+  tableList: [],
+  dialogVisible: false,
+  loading: false,
+  title: "新增项目",
+  formObj: {},
+});
+
+/**
+ * 列表查询
+ */
+const search = (): void => {
+  data.loading = true;
+   searchData.startTime = data.time?.[0] ?? null;
+  searchData.endTime = data.time?.[1] ?? null;
+  getTableList(searchData)
+    .then((res) => {
+      data.tableList = res.data.data.list;
+      data.total = res.data.data.total;
+      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 } id 唯一ID
+ */
+const remove = (id: number) => {
+  instance?.proxy?.$messageBox
+    .confirm("确认要进行此操作？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+    })
+    .then(() => {
+      deleteMaintainById({ id: id }).then((res) => {
+        instance?.proxy?.$message.success("操作成功"); //调用
+        search();
+      });
+    })
+    .catch((err) => {});
+};
+/**
+ * 组件操作成功回调
+ */
+const changeData: void = () => {
+  data.dialogVisible = false;
+  search();
+};
+
+/**
+ * 弹框关闭
+ */
+const dialogClose: void = () => {
+  data.title = "新增项目";
+  data.formObj = {};
+};
+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-date-picker
+          v-model="data.time"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          value-format="YYYY-MM-DD hh:mm:ss"
+        >
+        </el-date-picker>
+      </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" @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="createTime">
+        <template #default="scope">
+          <span>{{ parseTime(new Date(scope.row.createTime).getTime()) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" prop="status">
+        <template #default="scope">
+          <span>{{ scope.row.status == 0 ? "停用" : "启用" }}</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
+        @cancel="data.dialogVisible = false"
+        @success="changeData"
+        :formObj="data.formObj"
+      ></Detail>
+    </el-dialog>
+  </div>
+</template>
+
+<style></style>