完成投诉管理

src/views/system/Activity/addActivity.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="ResidentMainBox p-2 w-full">
+    <PageHeader title="投诉类型"></PageHeader>
+    <div class="ResidentMainBody">
+      <el-card>
+        <template #header>
+          <div class="title">基本信息</div>
+        </template>
+        <div class="addBuildingFormBody">
+          <div class="formbox">
+            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+              <el-form-item label="投诉类型名称" prop="name">
+                <el-input v-model.trim="form.name" placeholder="请输入投诉类型名称" />
+              </el-form-item>
+              <el-form-item label="投诉类型状态" prop="status">
+                <el-radio-group v-model="form.status">
+                  <el-radio v-for="(item, index) in com_repair_project_status" :key="index" :value="item.value">{{ item.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="submitForm">提交</el-button>
+                <el-button @click="handleBack">返回</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+import { addComplaintType, getComplaintType, updateComplaintType } from '@/api/system/ComplainType';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_repair_project_status } = toRefs<any>(proxy?.useDict('com_repair_project_status'));
+
+const route = useRoute();
+const router = useRouter();
+const formRef = ref();
+const form = ref({
+  'id': null,
+  'name': '',
+  'status': '0'
+});
+const rules = {
+  name: [{ required: true, message: '请输入投诉类型名称', trigger: 'blur' }]
+};
+const userid = ref();
+
+//  ! 投诉 ====================================================================================================
+function init() {
+  getComplaintType(userid.value).then((res) => {
+    form.value = {
+      ...form.value,
+      ...res.data
+    };
+    console.log(form.value);
+  });
+}
+
+if (route.query.id) {
+  userid.value = route.query.id;
+  init();
+}
+
+// 提交
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      if (userid.value) {
+        updateComplaintType(form.value).then(() => {
+          ElMessage.success('编辑成功');
+          handleBack();
+        });
+      } else {
+        addComplaintType(form.value).then(() => {
+          ElMessage.success('添加成功');
+          handleBack();
+        });
+      }
+    }
+  });
+};
+
+//  返回
+function handleBack() {
+  router.push({
+    path: '/repair/complaintType'
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.ResidentMainBox {
+  display: flex;
+  flex-direction: column;
+  .ResidentMainBody {
+    margin-top: 20px;
+    flex: 1;
+
+    .formbox {
+      width: 500px;
+      margin: 0 auto;
+    }
+    &:deep(div.el-step__head.is-process) {
+      & > div.el-step__line {
+        width: 0;
+        border: 1px dashed gray;
+        background: transparent;
+      }
+    }
+    &:deep(.el-step.is-vertical .el-step__line) {
+      top: 20px;
+    }
+    &:deep(div.el-step__head.is-finish) {
+      & > div.el-step__line {
+        width: 0;
+        border: 1px solid var(--el-color-primary);
+        background: transparent;
+      }
+    }
+  }
+}
+</style>