From 3f3b9005eacd44e9111f0d3b4916a9a0baf380b0 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 06 一月 2026 22:36:10 +0800
Subject: [PATCH] 代码调整10

---
 src/views/environmentAccess/vehicleInfoAudit/index.vue |  499 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 499 insertions(+), 0 deletions(-)

diff --git a/src/views/environmentAccess/vehicleInfoAudit/index.vue b/src/views/environmentAccess/vehicleInfoAudit/index.vue
new file mode 100644
index 0000000..924ca55
--- /dev/null
+++ b/src/views/environmentAccess/vehicleInfoAudit/index.vue
@@ -0,0 +1,499 @@
+<template>
+  <div class="app-container">
+    <div class="search_form">
+      <div>
+        <span class="search_title">杞︾墝鍙风爜锛�</span>
+        <el-input
+          v-model="searchForm.plateNo"
+          style="width: 240px"
+          placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�"
+          clearable
+          :prefix-icon="Search"
+          @change="handleQuery"
+        />
+        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+          鎼滅储
+        </el-button>
+      </div>
+      <div>
+        <el-button type="primary" @click="openForm('add')">鏂板</el-button>
+        <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
+      </div>
+    </div>
+
+    <div class="table_list">
+      <PIMTable
+        rowKey="id"
+        :column="tableColumn"
+        :tableData="tableData"
+        :page="page"
+        :isSelection="true"
+        :tableLoading="tableLoading"
+        @selection-change="handleSelectionChange"
+        @pagination="pagination"
+      />
+    </div>
+
+    <!-- 鏂板/缂栬緫杞﹁締淇℃伅寮圭獥 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="operationType === 'add' ? '鏂板杞﹁締淇℃伅' : '缂栬緫杞﹁締淇℃伅'"
+      width="70%"
+      @close="closeFormDialog"
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="140px"
+        label-position="top"
+      >
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="杞︾墝鍙风爜" prop="plateNo">
+              <el-input v-model="form.plateNo" placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍙风墝棰滆壊" prop="plateColor">
+              <el-input v-model="form.plateColor" placeholder="璇疯緭鍏ュ彿鐗岄鑹�" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="杞﹁締绫诲瀷" prop="carType">
+              <el-input v-model="form.carType" placeholder="璇疯緭鍏ヨ溅杈嗙被鍨�" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="杞﹁締璇嗗埆浠ｇ爜(VIN)" prop="carVin">
+              <el-input v-model="form.carVin" placeholder="璇疯緭鍏� VIN 鐮�" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="杞﹁締鍨嬪彿" prop="carModel">
+              <el-input v-model="form.carModel" placeholder="璇疯緭鍏ヨ溅杈嗗瀷鍙�" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍙戝姩鏈哄瀷鍙�" prop="engineModel">
+              <el-input v-model="form.engineModel" placeholder="璇疯緭鍏ュ彂鍔ㄦ満鍨嬪彿" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鍙戝姩鏈虹敓浜у巶" prop="engineProductFactory">
+              <el-input v-model="form.engineProductFactory" placeholder="璇疯緭鍏ュ彂鍔ㄦ満鐢熶骇鍘�" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍙戝姩鏈虹紪鍙�" prop="engineNo">
+              <el-input v-model="form.engineNo" placeholder="璇疯緭鍏ュ彂鍔ㄦ満缂栧彿" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鎺掓斁鏍囧噯" prop="emissionStandard">
+              <el-input v-model="form.emissionStandard" placeholder="璇疯緭鍏ユ帓鏀炬爣鍑�" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="娉ㄥ唽鐧昏鏃ユ湡" prop="registeDate">
+              <el-date-picker
+                v-model="form.registeDate"
+                type="date"
+                style="width: 100%"
+                value-format="YYYY-MM-DD"
+                placeholder="璇烽�夋嫨娉ㄥ唽鐧昏鏃ユ湡"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="浣跨敤鎬ц川" prop="natureOfUse">
+              <el-input v-model="form.natureOfUse" placeholder="璇疯緭鍏ヤ娇鐢ㄦ�ц川" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鐕冩枡绫诲瀷" prop="fuelType">
+              <el-input v-model="form.fuelType" placeholder="璇疯緭鍏ョ噧鏂欑被鍨�" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">纭</el-button>
+          <el-button @click="closeFormDialog">鍙栨秷</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 瀹℃牳寮圭獥 -->
+    <el-dialog
+      v-model="auditDialogVisible"
+      title="杞﹁締淇℃伅瀹℃牳"
+      width="500px"
+      @close="closeAuditDialog"
+    >
+      <el-form :model="auditForm" label-width="100px">
+        <el-form-item label="瀹℃牳缁撴灉" prop="status">
+          <el-radio-group v-model="auditForm.status">
+            <el-radio label="approved">閫氳繃</el-radio>
+            <el-radio label="rejected">涓嶉�氳繃</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="瀹℃牳鎰忚" prop="comment">
+          <el-input
+            v-model="auditForm.comment"
+            type="textarea"
+            :rows="3"
+            placeholder="璇疯緭鍏ュ鏍告剰瑙侊紙閫夊～锛�"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitAudit">纭</el-button>
+          <el-button @click="closeAuditDialog">鍙栨秷</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import {
+  listVehicleInfo,
+  addVehicleInfo,
+  updateVehicleInfo,
+  delVehicleInfo,
+  reviewVehicleInfo,
+} from "@/api/environmentAccess/vehicleInfo";
+
+// 鏌ヨ鏉′欢
+const searchForm = reactive({
+  plateNo: "",
+});
+
+// 琛ㄦ牸鍒楅厤缃�
+const tableColumn = ref([
+  {
+    label: "杞︾墝鍙风爜",
+    prop: "plateNo",
+    align: "center",
+    width: 140,
+  },
+  {
+    label: "鍙风墝棰滆壊",
+    prop: "plateColor",
+    align: "center",
+    width: 100,
+  },
+  {
+    label: "杞﹁締绫诲瀷",
+    prop: "carType",
+    align: "center",
+    width: 120,
+  },
+  {
+    label: "杞﹁締璇嗗埆浠ｇ爜(VIN)",
+    prop: "carVin",
+    align: "center",
+    minWidth: 200,
+    showOverflowTooltip: true,
+  },
+  {
+    label: "杞﹁締鍨嬪彿",
+    prop: "carModel",
+    align: "center",
+    width: 140,
+  },
+  {
+    label: "鍙戝姩鏈哄瀷鍙�",
+    prop: "engineModel",
+    align: "center",
+    width: 140,
+  },
+  {
+    label: "鍙戝姩鏈虹敓浜у巶",
+    prop: "engineProductFactory",
+    align: "center",
+    width: 160,
+  },
+  {
+    label: "鍙戝姩鏈虹紪鍙�",
+    prop: "engineNo",
+    align: "center",
+    width: 140,
+  },
+  {
+    label: "鎺掓斁鏍囧噯",
+    prop: "emissionStandard",
+    align: "center",
+    width: 120,
+  },
+  {
+    label: "娉ㄥ唽鐧昏鏃ユ湡",
+    prop: "registeDate",
+    align: "center",
+    width: 140,
+  },
+  {
+    label: "浣跨敤鎬ц川",
+    prop: "natureOfUse",
+    align: "center",
+    width: 120,
+  },
+  {
+    label: "鐕冩枡绫诲瀷",
+    prop: "fuelType",
+    align: "center",
+    width: 120,
+  },
+  {
+    label: "瀹℃牳鐘舵��",
+    prop: "reviewStatus",
+    align: "center",
+    dataType: "tag",
+    width: 120,
+    formatData: (value) => {
+      if (value === "approved") return "宸查�氳繃";
+      if (value === "rejected") return "鏈�氳繃";
+      if (value === "pending") return "寰呭鏍�";
+      return "鏈彁浜�";
+    },
+    formatType: (value) => {
+      if (value === "approved") return "success";
+      if (value === "rejected") return "danger";
+      if (value === "pending") return "warning";
+      return "";
+    },
+  },
+  {
+    dataType: "action",
+    label: "鎿嶄綔",
+    align: "center",
+    fixed: "right",
+    width: 220,
+    operation: [
+      {
+        name: "缂栬緫",
+        type: "text",
+        clickFun: (row) => openForm("edit", row),
+      },
+      {
+        name: "瀹℃牳",
+        type: "text",
+        clickFun: (row) => openAuditDialog(row),
+      },
+      {
+        name: "鍒犻櫎",
+        type: "text",
+        clickFun: (row) => deleteRow(row),
+      },
+    ],
+  },
+]);
+
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([]);
+const tableLoading = ref(false);
+const selectedRows = ref([]);
+
+// 鍒嗛〉
+const page = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+
+// 琛ㄥ崟鐩稿叧
+const dialogVisible = ref(false);
+const operationType = ref("add");
+const formRef = ref(null);
+const form = reactive(createEmptyForm());
+
+function createEmptyForm() {
+  return {
+    id: undefined,
+    plateNo: "",
+    plateColor: "",
+    carType: "",
+    carVin: "",
+    carModel: "",
+    engineModel: "",
+    engineProductFactory: "",
+    engineNo: "",
+    emissionStandard: "",
+    registeDate: "",
+    natureOfUse: "",
+    fuelType: "",
+    reviewStatus: "pending",
+  };
+}
+
+const rules = {
+  plateNo: [{ required: true, message: "璇疯緭鍏ヨ溅鐗屽彿鐮�", trigger: "blur" }],
+  carVin: [{ required: true, message: "璇疯緭鍏� VIN 鐮�", trigger: "blur" }],
+};
+
+// 瀹℃牳鐩稿叧
+const auditDialogVisible = ref(false);
+const currentAuditRow = ref(null);
+const auditForm = reactive({
+  status: "approved",
+  comment: "",
+});
+
+// 鏌ヨ
+function handleQuery() {
+  page.current = 1;
+  loadTableData();
+}
+
+// 鍔犺浇鏁版嵁
+function loadTableData() {
+  tableLoading.value = true;
+  listVehicleInfo({
+    pageNum: page.current,
+    pageSize: page.size,
+    ...searchForm,
+  })
+    .then((res) => {
+      const { records, total } = res.data;
+      tableData.value = records || [];
+      page.total = total || 0;
+    })
+    .finally(() => {
+      tableLoading.value = false;
+    });
+}
+
+// 鍒嗛〉鍙樺寲
+function pagination({ page: current, limit }) {
+  page.current = current;
+  page.size = limit;
+  loadTableData();
+}
+
+// 閫夋嫨琛�
+function handleSelectionChange(selection) {
+  selectedRows.value = selection;
+}
+
+// 鎵撳紑琛ㄥ崟
+function openForm(type, row) {
+  operationType.value = type;
+  if (type === "edit" && row) {
+    Object.assign(form, row);
+  } else {
+    Object.assign(form, createEmptyForm());
+  }
+  dialogVisible.value = true;
+}
+
+function closeFormDialog() {
+  dialogVisible.value = false;
+  formRef.value?.resetFields();
+}
+
+// 鎻愪氦琛ㄥ崟
+function submitForm() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return;
+
+    const api = operationType.value === "add" ? addVehicleInfo : updateVehicleInfo;
+    api({ ...form })
+      .then(() => {
+        ElMessage.success(operationType.value === "add" ? "鏂板鎴愬姛" : "缂栬緫鎴愬姛");
+        dialogVisible.value = false;
+        loadTableData();
+      })
+      .catch(() => {});
+  });
+}
+
+// 鍒犻櫎鍗曟潯
+function deleteRow(row) {
+  ElMessageBox.confirm("纭鍒犻櫎璇ヨ溅杈嗕俊鎭悧锛�", "鎻愮ず", {
+    type: "warning",
+  })
+    .then(() => {
+      delVehicleInfo([row.id]).then(() => {
+        ElMessage.success("鍒犻櫎鎴愬姛");
+        loadTableData();
+      });
+    })
+    .catch(() => {});
+}
+
+// 鎵归噺鍒犻櫎
+function handleDelete() {
+  if (!selectedRows.value.length) {
+    ElMessage.warning("璇峰厛閫夋嫨瑕佸垹闄ょ殑璁板綍");
+    return;
+  }
+  ElMessageBox.confirm("纭鍒犻櫎閫変腑鐨勮溅杈嗕俊鎭悧锛�", "鎻愮ず", {
+    type: "warning",
+  })
+    .then(() => {
+      const ids = selectedRows.value.map((item) => item.id);
+      delVehicleInfo(ids).then(() => {
+        ElMessage.success("鍒犻櫎鎴愬姛");
+        loadTableData();
+      });
+    })
+    .catch(() => {});
+}
+
+// 鎵撳紑瀹℃牳寮圭獥
+function openAuditDialog(row) {
+  currentAuditRow.value = row;
+  auditForm.status = row.reviewStatus || "pending";
+  auditForm.comment = row.auditComment || "";
+  auditDialogVisible.value = true;
+}
+
+function closeAuditDialog() {
+  auditDialogVisible.value = false;
+}
+
+// 鎻愪氦瀹℃牳
+function submitAudit() {
+  if (!currentAuditRow.value) return;
+
+  reviewVehicleInfo({
+    id: currentAuditRow.value.id,
+    reviewStatus: auditForm.status,
+    auditComment: auditForm.comment,
+  })
+    .then(() => {
+      ElMessage.success("瀹℃牳瀹屾垚");
+      auditDialogVisible.value = false;
+      loadTableData();
+    })
+    .catch(() => {});
+}
+
+// 鍒濆鍖�
+loadTableData();
+</script>
+
+<style scoped lang="scss">
+.table_list {
+  margin-top: 20px;
+}
+</style>
+

--
Gitblit v1.9.3