修改客户投诉 安全隐患台账新增展示效果

apps/web-ele/src/router/routes/local.ts

@@ -124,17 +124,6 @@ const localRoutes: RouteRecordStringComponent[] = [
     name: 'ScheduleDetail',
     path: '/schedule/detail/:taskId',
   },
-  // {
-  //   component: '/Archive/addNew/index',
-  //   meta: {
-  //     activePath: '/Archive/addNew',
-  //     icon: 'carbon:data-base',
-  //     title: '新增页面',
-  //     hideInMenu: true,
-  //   },
-  //   name: 'ArchiveaddNew',
-  //   path: '/Archive/addNew',
-  // },
 ];
 
 /**

apps/web-ele/src/views/Archive/HSSEManage/emergencyDrill/index.vue

@@ -1,19 +1,3 @@
-<template>
-  <Page :auto-content-height="true">
-    <BasicTable>
-      <template #action="{ row }">
-        <el-button
-          size="small"
-          type="primary"
-          plain
-          @click="() => handleTaskClick(row.taskId)"
-          >查看</el-button
-        >
-        <el-button size="small" type="primary" plain>打印</el-button>
-      </template>
-    </BasicTable>
-  </Page>
-</template>
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { Page } from '@vben/common-ui';
@@ -87,6 +71,22 @@ const handleTaskClick = (taskId: number) => {
   router.push(`/schedule/detail/${taskId}`);
 };
 </script>
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable>
+      <template #action="{ row }">
+        <el-button
+          size="small"
+          type="primary"
+          plain
+          @click="() => handleTaskClick(row.taskId)"
+          >查看</el-button
+        >
+        <el-button size="small" type="primary" plain>打印</el-button>
+      </template>
+    </BasicTable>
+  </Page>
+</template>
 <style scoped lang="scss">
 :deep(.el-tooltip__trigger:focus) {
   outline: none;

apps/web-ele/src/views/Archive/HSSEManage/safetyHazardLedger/drawer.vue

@@ -0,0 +1,292 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+import { reactive, ref } from 'vue';
+import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
+import type { FormInstance, FormRules, UploadFile } from 'element-plus';
+const [Drawer, drawerApi] = useVbenDrawer();
+interface RuleForm {
+  inspectgasstation: string;
+  gasStationName: string;
+  radio1: string;
+  discoverProblem: string;
+  sllabel: string;
+  handlingSuggestions: string;
+  hazardDescription: string;
+  riskLevel: string;
+  judgmentResult: string;
+  rectificationEndTime: string;
+  cploadImage: Record<string, any>;
+  executor: string;
+  endTime: string;
+  cC: string;
+  Ledgertype: string;
+}
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+  inspectgasstation: '',
+  gasStationName: '',
+  radio1: '',
+  discoverProblem: '',
+  sllabel: '',
+  handlingSuggestions: '',
+  hazardDescription: '',
+  riskLevel: '',
+  judgmentResult: '',
+  rectificationEndTime: '',
+  cploadImage: {
+    fileList: [],
+    dialogImageUrl: '',
+    dialogVisible: false,
+    disabled: false,
+  },
+  executor: '',
+  endTime: '',
+  cC: '',
+  Ledgertype: '',
+});
+const rules = reactive<FormRules<RuleForm>>({
+  inspectgasstation: [
+    {
+      required: true,
+      message: '请选择检查油站',
+      trigger: 'change',
+    },
+  ],
+  gasStationName: [
+    {
+      required: true,
+      message: '请选择油站名称',
+      trigger: 'change',
+    },
+  ],
+  discoverProblem: [
+    {
+      required: true,
+      message: '请输入发现问题',
+      trigger: 'change',
+    },
+  ],
+  hazardDescription: [
+    {
+      type: 'date',
+      required: true,
+      message: '请输入主要危害描述',
+      trigger: 'change',
+    },
+  ],
+  riskLevel: [
+    {
+      required: true,
+      message: '请选择风险度',
+      trigger: 'change',
+    },
+  ],
+  rectificationEndTime: [
+    {
+      type: 'date',
+      required: true,
+      message: '请选择整改截止时间',
+      trigger: 'change',
+    },
+  ],
+  executor: [
+    {
+      required: true,
+      message: '请选择执行人',
+      trigger: 'change',
+    },
+  ],
+  endTime: [
+    {
+      type: 'date',
+      required: true,
+      message: '请选择截止时间',
+      trigger: 'change',
+    },
+  ],
+});
+//删除图片
+const handleRemove = (file: UploadFile) => {
+  ruleForm.cploadImage.fileList = ruleForm.cploadImage.fileList.filter(
+    (item: any) => item.uid !== file.uid,
+  );
+};
+//图片预览
+const handlePictureCardPreview = (file: UploadFile) => {
+  ruleForm.cploadImage.dialogImageUrl = file.url;
+  ruleForm.cploadImage.dialogVisible = true;
+};
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+<template>
+  <Drawer title="新增隐患台账">
+    <div>
+      <el-form
+        ref="ruleFormRef"
+        style="max-width: 600px"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="auto"
+      >
+        <el-form-item label="检查油站" prop="inspectgasstation">
+          <el-select v-model="ruleForm.inspectgasstation" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="油站名称" prop="gasStationName">
+          <el-select v-model="ruleForm.gasStationName" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否转任务" prop="radio1">
+          <el-radio-group v-model="ruleForm.radio1">
+            <el-radio value="1" size="large">是</el-radio>
+            <el-radio value="2" size="large">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="发现问题" prop="discoverProblem">
+          <el-select v-model="ruleForm.discoverProblem" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签" prop="sllabel">
+          <el-select v-model="ruleForm.sllabel" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="处理建议" prop="handlingSuggestions">
+          <el-input
+            v-model="ruleForm.handlingSuggestions"
+            type="textarea"
+            placeholder="处理建议"
+          />
+        </el-form-item>
+        <el-form-item label="主要危害描述" prop="hazardDescription">
+          <el-input
+            v-model="ruleForm.hazardDescription"
+            placeholder="主要危害描述"
+          />
+        </el-form-item>
+        <el-form-item label="风险度" prop="riskLevel">
+          <el-select v-model="ruleForm.riskLevel" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="整改截止时间" prop="rectificationEndTime">
+          <el-date-picker
+            v-model="ruleForm.rectificationEndTime"
+            type="datetime"
+            placeholder="整改截止时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="问题图片" prop="cploadImage">
+          <el-upload
+            action="#"
+            v-model:file-list="ruleForm.cploadImage.fileList"
+            list-type="picture-card"
+            :auto-upload="false"
+          >
+            <el-icon><Plus /></el-icon>
+            <template #file="{ file }">
+              <div>
+                <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="file.url"
+                  alt=""
+                />
+                <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-preview"
+                    @click="handlePictureCardPreview(file)"
+                  >
+                    <el-icon><zoom-in /></el-icon>
+                  </span>
+                  <span
+                    v-if="!ruleForm.cploadImage.disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemove(file)"
+                  >
+                    <el-icon><Delete /></el-icon>
+                  </span>
+                </span>
+              </div>
+            </template>
+          </el-upload>
+
+          <el-dialog
+            v-model="ruleForm.cploadImage.dialogVisible"
+            width="80%"
+            :close-on-click-modal="true"
+          >
+            <div style="text-align: center; padding: 12px 8px">
+              <img
+                :src="ruleForm.cploadImage.dialogImageUrl"
+                alt="Preview Image"
+                style="
+                  width: 90vw;
+                  max-height: 80vh;
+                  display: inline-block;
+                  object-fit: contain;
+                  cursor: zoom-in;
+                "
+              />
+            </div>
+          </el-dialog>
+        </el-form-item>
+        <el-form-item label="执行人" prop="executor">
+          <el-select v-model="ruleForm.executor" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="截止时间" prop="endTime">
+          <el-date-picker
+            v-model="ruleForm.endTime"
+            type="datetime"
+            placeholder="截止时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="抄送人" prop="cC">
+          <el-select v-model="ruleForm.cC" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="台账类型" prop="Ledgertype">
+          <el-inputh
+            v-model="ruleForm.Ledgertype"
+            type="textarea"
+            placeholder="请输入台账类型"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm(ruleFormRef)">
+            提交
+          </el-button>
+          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </Drawer>
+</template>

apps/web-ele/src/views/Archive/HSSEManage/safetyHazardLedger/index.vue

@@ -1,35 +1,17 @@
-<template>
-  <Page :auto-content-height="true">
-    <BasicTable>
-      <template #toolbar-tools>
-        <el-button type="primary" plain @click="handleadd">新增</el-button>
-        <el-button type="primary" plain>导出</el-button>
-        <el-button @click="() => (showSearchForm = !showSearchForm)">
-          展开/折叠
-        </el-button>
-      </template>
-      <template #action="{ row }">
-        <el-button
-          size="small"
-          type="primary"
-          plain
-          @click="() => handleTaskClick(row.taskId)"
-          >查看</el-button
-        >
-      </template>
-    </BasicTable>
-  </Page>
-</template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
 import { columns, querySchema } from './config-data';
 import type { VbenFormProps } from '@vben/common-ui';
 import { mockData } from './config-data';
+import ExtraDrawer from './drawer.vue';
 const showSearchForm = ref(true) as any;
 const router = useRouter();
+const [Drawer, drawerApi] = useVbenDrawer({
+  connectedComponent: ExtraDrawer,
+});
 const formOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 80,
@@ -91,17 +73,43 @@ const [BasicTable, BasicTableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
 });
-const handleadd = () => {
-  router.push({
-    path: '/Archive/addNew',
-    query: { type: '安全隐患台账' },
+//隐藏自带的按钮
+nextTick(() => {
+  drawerApi.setState({
+    footer: false,
+    showCancelButton: false,
+    showConfirmButton: false,
   });
-};
-
+});
 const handleTaskClick = (taskId: number) => {
   router.push(`/schedule/detail/${taskId}`);
 };
 </script>
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable>
+      <template #toolbar-tools>
+        <el-button type="primary" plain @click="() => drawerApi.open()"
+          >新增</el-button
+        >
+        <el-button type="primary" plain>导出</el-button>
+        <el-button @click="() => (showSearchForm = !showSearchForm)">
+          展开/折叠
+        </el-button>
+      </template>
+      <template #action="{ row }">
+        <el-button
+          size="small"
+          type="primary"
+          plain
+          @click="() => handleTaskClick(row.taskId)"
+          >查看</el-button
+        >
+      </template>
+    </BasicTable>
+    <Drawer />
+  </Page>
+</template>
 <style scoped lang="scss">
 :deep(.el-tooltip__trigger:focus) {
   outline: none;

apps/web-ele/src/views/Archive/addNew/components/customerComplaintAdd.vue

@@ -1,257 +0,0 @@
-<script lang="ts" setup>
-import { reactive, ref } from 'vue';
-import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
-import type { FormInstance, FormRules, UploadFile } from 'element-plus';
-interface RuleForm {
-  complaintStation: string;
-  complaintChannels: string;
-  complainttype: string;
-  complaintime: string;
-  complaintdesc: string;
-  cploadImage: Record<string, any>;
-  judgmentResult: string;
-  startTime: string;
-  endTime: string;
-  Executor: string;
-}
-const ruleFormRef = ref<FormInstance>();
-const ruleForm = reactive<RuleForm>({
-  complaintStation: '',
-  complaintChannels: '',
-  complainttype: '',
-  complaintime: '',
-  complaintdesc: '',
-  cploadImage: {
-    fileList: [],
-    dialogImageUrl: '',
-    dialogVisible: false,
-    disabled: false,
-  },
-  judgmentResult: '',
-  startTime: '',
-  endTime: '',
-  Executor: '',
-});
-const rules = reactive<FormRules<RuleForm>>({
-  complaintStation: [
-    {
-      required: true,
-      message: '请选择投诉油站',
-      trigger: 'change',
-    },
-  ],
-  complaintChannels: [
-    {
-      required: true,
-      message: '请选择投诉渠道',
-      trigger: 'change',
-    },
-  ],
-  complainttype: [
-    {
-      required: true,
-      message: '请选择类型',
-      trigger: 'change',
-    },
-  ],
-  complaintime: [
-    {
-      type: 'date',
-      required: true,
-      message: '请选择投诉时间',
-      trigger: 'change',
-    },
-  ],
-  complaintdesc: [
-    {
-      required: true,
-      message: '请输入投诉问题',
-      trigger: 'change',
-    },
-  ],
-  startTime: [
-    {
-      type: 'date',
-      required: true,
-      message: '请选择开始时间',
-      trigger: 'change',
-    },
-  ],
-  endTime: [
-    {
-      type: 'date',
-      required: true,
-      message: '请选择截止时间',
-      trigger: 'change',
-    },
-  ],
-  Executor: [
-    {
-      type: 'date',
-      required: true,
-      message: '请选择执行人',
-      trigger: 'change',
-    },
-  ],
-});
-//删除图片
-const handleRemove = (file: UploadFile) => {
-  ruleForm.cploadImage.fileList = ruleForm.cploadImage.fileList.filter(
-    (item: any) => item.uid !== file.uid,
-  );
-};
-//图片预览
-const handlePictureCardPreview = (file: UploadFile) => {
-  ruleForm.cploadImage.dialogImageUrl = file.url;
-  ruleForm.cploadImage.dialogVisible = true;
-};
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!');
-    } else {
-      console.log('error submit!', fields);
-    }
-  });
-};
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
-</script>
-<template>
-  <el-form
-    ref="ruleFormRef"
-    style="max-width: 600px"
-    :model="ruleForm"
-    :rules="rules"
-    label-width="auto"
-  >
-    <el-form-item label="投诉油站" prop="complaintStation">
-      <el-select v-model="ruleForm.complaintStation" placeholder="请选择">
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="投诉渠道" prop="complaintChannels">
-      <el-select v-model="ruleForm.complaintChannels" placeholder="请选择">
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="类型" prop="complainttype">
-      <el-select v-model="ruleForm.complainttype" placeholder="请选择">
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="投诉时间" required>
-      <el-col :span="11">
-        <el-form-item prop="complaintime">
-          <el-date-picker
-            v-model="ruleForm.complaintime"
-            type="date"
-            placeholder="选择日期时间"
-            style="width: 100%"
-          />
-        </el-form-item>
-      </el-col>
-    </el-form-item>
-    <el-form-item label="投诉问题" prop="complaintdesc">
-      <el-input
-        v-model="ruleForm.complaintdesc"
-        type="textarea"
-        placeholder="投诉问题"
-      />
-    </el-form-item>
-    <el-form-item label="图片" prop="cploadImage">
-      <el-upload
-        action="#"
-        v-model:file-list="ruleForm.cploadImage.fileList"
-        list-type="picture-card"
-        :auto-upload="false"
-      >
-        <el-icon><Plus /></el-icon>
-        <template #file="{ file }">
-          <div>
-            <img
-              class="el-upload-list__item-thumbnail"
-              :src="file.url"
-              alt=""
-            />
-            <span class="el-upload-list__item-actions">
-              <span
-                class="el-upload-list__item-preview"
-                @click="handlePictureCardPreview(file)"
-              >
-                <el-icon><zoom-in /></el-icon>
-              </span>
-              <span
-                v-if="!ruleForm.cploadImage.disabled"
-                class="el-upload-list__item-delete"
-                @click="handleRemove(file)"
-              >
-                <el-icon><Delete /></el-icon>
-              </span>
-            </span>
-          </div>
-        </template>
-      </el-upload>
-
-      <el-dialog
-        v-model="ruleForm.cploadImage.dialogVisible"
-        width="80%"
-        :close-on-click-modal="true"
-      >
-        <div style="text-align: center; padding: 12px 8px">
-          <img
-            :src="ruleForm.cploadImage.dialogImageUrl"
-            alt="Preview Image"
-            style="
-              width: 90vw;
-              max-height: 80vh;
-              display: inline-block;
-              object-fit: contain;
-              cursor: zoom-in;
-            "
-          />
-        </div>
-      </el-dialog>
-    </el-form-item>
-    <el-form-item label="判定结果" prop="judgmentResult">
-      <el-select v-model="ruleForm.judgmentResult" placeholder="请选择">
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="开始时间" prop="startTime">
-      <el-date-picker
-        v-model="ruleForm.startTime"
-        type="datetime"
-        placeholder="选择日期时间"
-        style="width: 100%"
-      />
-    </el-form-item>
-    <el-form-item label="截止时间" prop="endTime">
-      <el-date-picker
-        v-model="ruleForm.startTime"
-        type="datetime"
-        placeholder="选择日期时间"
-        style="width: 100%"
-      />
-    </el-form-item>
-    <el-form-item label="执行人" prop="Executor">
-      <el-select v-model="ruleForm.Executor" placeholder="请选择">
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="submitForm(ruleFormRef)">
-        提交
-      </el-button>
-      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
-    </el-form-item>
-  </el-form>
-</template>

apps/web-ele/src/views/Archive/addNew/index.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { Page } from '@vben/common-ui';
-import customerComplaintAdd from './components/customerComplaintAdd.vue';
-import safetyHazardRegister from './components/safetyHazardRegister.vue';
-const route = useRoute();
-const type = ref(route.query.type);
-</script>
-<template>
-  <Page :auto-content-height="true">
-    <customerComplaintAdd v-if="type == '客户投诉'" />
-    <safetyHazardRegister v-if="type == '安全隐患台账'" />
-  </Page>
-</template>

apps/web-ele/src/views/Archive/addNew/components/safetyHazardRegister.vue

@@ -1,104 +1,97 @@
 <script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
 import { reactive, ref } from 'vue';
 import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
 import type { FormInstance, FormRules, UploadFile } from 'element-plus';
+const [Drawer, drawerApi] = useVbenDrawer();
 interface RuleForm {
-  inspectgasstation: string;
-  gasStationName: string;
-  radio1: string;
-  discoverProblem: string;
-  sllabel: string;
-  handlingSuggestions: string;
-  hazardDescription: string;
-  riskLevel: string;
-  judgmentResult: string;
-  rectificationEndTime: string;
+  complaintStation: string;
+  complaintChannels: string;
+  complainttype: string;
+  complaintime: string;
+  complaintdesc: string;
   cploadImage: Record<string, any>;
-  executor: string;
+  judgmentResult: string;
+  startTime: string;
   endTime: string;
-  cC: string;
-  Ledgertype: string;
+  Executor: string;
 }
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
-  inspectgasstation: '',
-  gasStationName: '',
-  radio1: '',
-  discoverProblem: '',
-  sllabel: '',
-  handlingSuggestions: '',
-  hazardDescription: '',
-  riskLevel: '',
-  judgmentResult: '',
-  rectificationEndTime: '',
+  complaintStation: '',
+  complaintChannels: '',
+  complainttype: '',
+  complaintime: '',
+  complaintdesc: '',
   cploadImage: {
     fileList: [],
     dialogImageUrl: '',
     dialogVisible: false,
     disabled: false,
   },
-  executor: '',
+  judgmentResult: '',
+  startTime: '',
   endTime: '',
-  cC: '',
-  Ledgertype: '',
+  Executor: '',
 });
 const rules = reactive<FormRules<RuleForm>>({
-  inspectgasstation: [
+  complaintStation: [
     {
       required: true,
-      message: '请选择检查油站',
+      message: '请选择投诉油站',
       trigger: 'change',
     },
   ],
-  gasStationName: [
+  complaintChannels: [
     {
       required: true,
-      message: '请选择油站名称',
+      message: '请选择投诉渠道',
       trigger: 'change',
     },
   ],
-  discoverProblem: [
+  complainttype: [
     {
       required: true,
-      message: '请输入发现问题',
+      message: '请选择类型',
       trigger: 'change',
     },
   ],
-  hazardDescription: [
+  complaintime: [
     {
       type: 'date',
       required: true,
-      message: '请输入主要危害描述',
+      message: '请选择投诉时间',
       trigger: 'change',
     },
   ],
-  riskLevel: [
+  complaintdesc: [
     {
       required: true,
-      message: '请选择风险度',
+      message: '请输入投诉问题',
       trigger: 'change',
     },
   ],
-  rectificationEndTime: [
+  startTime: [
     {
       type: 'date',
       required: true,
-      message: '请选择整改截止时间',
+      message: '请选择开始时间',
       trigger: 'change',
     },
   ],
-  executor: [
+  endTime: [
     {
+      type: 'date',
       required: true,
-      message: '请选择执行人',
+      message: '请选择截止时间',
       trigger: 'change',
     },
   ],
-  endTime: [
+  Executor: [
     {
       type: 'date',
       required: true,
-      message: '请选择截止时间',
+      message: '请选择执行人',
       trigger: 'change',
     },
   ],
@@ -114,7 +107,6 @@ const handlePictureCardPreview = (file: UploadFile) => {
   ruleForm.cploadImage.dialogImageUrl = file.url;
   ruleForm.cploadImage.dialogVisible = true;
 };
-
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
@@ -131,8 +123,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
 };
 </script>
 <template>
-  <div>
-    <h3 style="margin-bottom: 30px">新增隐患台账</h3>
+  <Drawer title="客户投诉新增">
     <el-form
       ref="ruleFormRef"
       style="max-width: 600px"
@@ -140,64 +131,44 @@ const resetForm = (formEl: FormInstance | undefined) => {
       :rules="rules"
       label-width="auto"
     >
-      <el-form-item label="检查油站" prop="inspectgasstation">
-        <el-select v-model="ruleForm.inspectgasstation" placeholder="请选择">
+      <el-form-item label="投诉油站" prop="complaintStation">
+        <el-select v-model="ruleForm.complaintStation" placeholder="请选择">
           <el-option label="Zone one" value="shanghai" />
           <el-option label="Zone two" value="beijing" />
         </el-select>
       </el-form-item>
-      <el-form-item label="油站名称" prop="gasStationName">
-        <el-select v-model="ruleForm.gasStationName" placeholder="请选择">
+      <el-form-item label="投诉渠道" prop="complaintChannels">
+        <el-select v-model="ruleForm.complaintChannels" placeholder="请选择">
           <el-option label="Zone one" value="shanghai" />
           <el-option label="Zone two" value="beijing" />
         </el-select>
       </el-form-item>
-      <el-form-item label="是否转任务" prop="radio1">
-        <el-radio-group v-model="ruleForm.radio1">
-          <el-radio value="1" size="large">是</el-radio>
-          <el-radio value="2" size="large">否</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="发现问题" prop="discoverProblem">
-        <el-select v-model="ruleForm.discoverProblem" placeholder="请选择">
+      <el-form-item label="类型" prop="complainttype">
+        <el-select v-model="ruleForm.complainttype" placeholder="请选择">
           <el-option label="Zone one" value="shanghai" />
           <el-option label="Zone two" value="beijing" />
         </el-select>
       </el-form-item>
-      <el-form-item label="标签" prop="sllabel">
-        <el-select v-model="ruleForm.sllabel" placeholder="请选择">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
+      <el-form-item label="投诉时间" required>
+        <el-col :span="11">
+          <el-form-item prop="complaintime">
+            <el-date-picker
+              v-model="ruleForm.complaintime"
+              type="date"
+              placeholder="选择日期时间"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
       </el-form-item>
-      <el-form-item label="处理建议" prop="handlingSuggestions">
+      <el-form-item label="投诉问题" prop="complaintdesc">
         <el-input
-          v-model="ruleForm.handlingSuggestions"
+          v-model="ruleForm.complaintdesc"
           type="textarea"
-          placeholder="处理建议"
+          placeholder="投诉问题"
         />
       </el-form-item>
-      <el-form-item label="主要危害描述" prop="hazardDescription">
-        <el-input
-          v-model="ruleForm.hazardDescription"
-          placeholder="主要危害描述"
-        />
-      </el-form-item>
-      <el-form-item label="风险度" prop="riskLevel">
-        <el-select v-model="ruleForm.riskLevel" placeholder="请选择">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="整改截止时间" prop="rectificationEndTime">
-        <el-date-picker
-          v-model="ruleForm.rectificationEndTime"
-          type="datetime"
-          placeholder="整改截止时间"
-          style="width: 100%"
-        />
-      </el-form-item>
-      <el-form-item label="问题图片" prop="cploadImage">
+      <el-form-item label="图片" prop="cploadImage">
         <el-upload
           action="#"
           v-model:file-list="ruleForm.cploadImage.fileList"
@@ -251,33 +222,34 @@ const resetForm = (formEl: FormInstance | undefined) => {
           </div>
         </el-dialog>
       </el-form-item>
-      <el-form-item label="执行人" prop="executor">
-        <el-select v-model="ruleForm.executor" placeholder="请选择">
+      <el-form-item label="判定结果" prop="judgmentResult">
+        <el-select v-model="ruleForm.judgmentResult" placeholder="请选择">
           <el-option label="Zone one" value="shanghai" />
           <el-option label="Zone two" value="beijing" />
         </el-select>
       </el-form-item>
+      <el-form-item label="开始时间" prop="startTime">
+        <el-date-picker
+          v-model="ruleForm.startTime"
+          type="datetime"
+          placeholder="选择日期时间"
+          style="width: 100%"
+        />
+      </el-form-item>
       <el-form-item label="截止时间" prop="endTime">
         <el-date-picker
-          v-model="ruleForm.endTime"
+          v-model="ruleForm.startTime"
           type="datetime"
-          placeholder="截止时间"
+          placeholder="选择日期时间"
           style="width: 100%"
         />
       </el-form-item>
-      <el-form-item label="抄送人" prop="cC">
-        <el-select v-model="ruleForm.cC" placeholder="请选择">
+      <el-form-item label="执行人" prop="Executor">
+        <el-select v-model="ruleForm.Executor" placeholder="请选择">
           <el-option label="Zone one" value="shanghai" />
           <el-option label="Zone two" value="beijing" />
         </el-select>
       </el-form-item>
-      <el-form-item label="台账类型" prop="Ledgertype">
-        <el-inputh
-          v-model="ruleForm.Ledgertype"
-          type="textarea"
-          placeholder="请输入台账类型"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm(ruleFormRef)">
           提交
@@ -285,5 +257,5 @@ const resetForm = (formEl: FormInstance | undefined) => {
         <el-button @click="resetForm(ruleFormRef)">取消</el-button>
       </el-form-item>
     </el-form>
-  </div>
+  </Drawer>
 </template>

apps/web-ele/src/views/Archive/operationsManagement/customercomplaint/index.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
 import { columns, querySchema } from './config-data';
 import type { VbenFormProps } from '@vben/common-ui';
 import { mockData } from './config-data';
+import ExtraDrawer from './drawer.vue';
 const showSearchForm = ref(true) as any;
 const router = useRouter();
+const [Drawer, drawerApi] = useVbenDrawer({
+  connectedComponent: ExtraDrawer,
+});
 const formOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 80,
@@ -26,7 +30,6 @@ const formOptions: VbenFormProps = {
   //   ],
   // ],
 };
-
 // 列表中显示配置
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
@@ -69,12 +72,14 @@ const [BasicTable, BasicTableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
 });
-const handleadd = () => {
-  router.push({
-    path: '/Archive/addNew',
-    query: { type: '客户投诉' },
+//隐藏自带的按钮
+nextTick(() => {
+  drawerApi.setState({
+    footer: false,
+    showCancelButton: false,
+    showConfirmButton: false,
   });
-};
+});
 const handleTaskClick = (taskId: number) => {
   router.push(`/schedule/detail/${taskId}`);
 };
@@ -83,7 +88,9 @@ const handleTaskClick = (taskId: number) => {
   <Page :auto-content-height="true">
     <BasicTable>
       <template #toolbar-tools>
-        <el-button type="primary" plain @click="handleadd">新增</el-button>
+        <el-button type="primary" plain @click="() => drawerApi.open()"
+          >新增</el-button
+        >
         <el-button @click="() => (showSearchForm = !showSearchForm)">
           展开/折叠
         </el-button>
@@ -98,6 +105,7 @@ const handleTaskClick = (taskId: number) => {
         >
       </template>
     </BasicTable>
+    <Drawer />
   </Page>
 </template>
 <style scoped lang="scss">