From ba9e9e253daaa024bc6cfadb10bc289770aaf55e Mon Sep 17 00:00:00 2001
From: liyong <18434998025@163.com>
Date: 星期日, 04 一月 2026 17:20:01 +0800
Subject: [PATCH] feat(alarmManagement): 重构报警管理模块界面和功能

---
 src/views/alarmManagement/alarmConfig/alarmRule.vue      |  355 +++++++++-------
 src/views/alarmManagement/alarmKnowledge/alarmHandle.vue |  652 +++++++++++++++++++++++-------
 src/views/alarmManagement/alarmConfig/Form.vue           |  151 +++++++
 src/views/alarmManagement/alarmConfig/Modal.vue          |   69 +++
 4 files changed, 907 insertions(+), 320 deletions(-)

diff --git a/src/views/alarmManagement/alarmConfig/Form.vue b/src/views/alarmManagement/alarmConfig/Form.vue
new file mode 100644
index 0000000..d2ec9f8
--- /dev/null
+++ b/src/views/alarmManagement/alarmConfig/Form.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="瑙勫垯鍚嶇О" prop="deviceName">
+          <el-input v-model="form.deviceName" placeholder="璇疯緭鍏ヨ鍒欏悕绉�" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="璁惧绫诲瀷" prop="deviceModel">
+          <el-input v-model="form.deviceModel" placeholder="璇疯緭鍏ヨ澶囩被鍨�" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="鐩戞帶鍙傛暟" prop="supplierName">
+          <el-input v-model="form.supplierName" placeholder="璇疯緭鍏ョ洃鎺у弬鏁�" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="鎶ヨ绾у埆" prop="unit">
+          <el-input v-model="form.unit" placeholder="璇疯緭鍏ユ姤璀︾骇鍒�" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="鏄惁鍚敤" prop="status">
+          <el-switch
+              v-model="form.status"
+              :active-value="1"
+              :inactive-value="0"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="鍒涘缓鏃ユ湡" prop="createTime">
+          <el-date-picker
+            style="width: 100%"
+            v-model="form.createTime"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="date"
+            placeholder="璇烽�夋嫨褰曞叆鏃ユ湡"
+            clearable
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup>
+import useFormData from "@/hooks/useFormData.js";
+// import useUserStore from "@/store/modules/user";
+import { getLedgerById } from "@/api/equipmentManagement/ledger.js";
+import dayjs from "dayjs";
+import {
+  calculateTaxIncludeTotalPrice,
+  calculateTaxExclusiveTotalPrice,
+} from "@/utils/summarizeTable.js";
+import { ElMessage } from "element-plus";
+import {ref} from "vue";
+
+defineOptions({
+  name: "璁惧鍙拌处琛ㄥ崟",
+});
+const formRef = ref(null);
+const operationType = ref('');
+const formRules = {
+	deviceName: [{ required: true, trigger: "blur", message: "璇疯緭鍏�" }],
+	deviceModel: [{ required: true, trigger: "blur", message: "璇疯緭鍏�" }],
+	supplierName: [{ required: true, trigger: "blur", message: "璇疯緭鍏�" }],
+	unit: [{ required: true, trigger: "blur", message: "璇疯緭鍏�" }],
+	taxRate: [{ required: true, trigger: "change", message: "璇烽�夋嫨" }],
+}
+
+const { form, resetForm } = useFormData({
+  deviceName: undefined, // 璁惧鍚嶇О
+  deviceModel: undefined, // 瑙勬牸鍨嬪彿
+  deviceBrand: undefined, // 璁惧鍝佺墝
+  supplierName: undefined, // 渚涘簲鍟�
+  storageLocation: undefined, // 瀛樻斁浣嶇疆
+  enableDepreciation: false, // 鏄惁鍚敤鎶樻棫
+  unit: undefined, // 鍗曚綅
+  number: 1, // 鏁伴噺
+  taxIncludingPriceUnit: undefined, // 鍚◣鍗曚环
+  taxIncludingPriceTotal: undefined, // 鍚◣鎬讳环
+  taxRate: undefined, // 绋庣巼
+  unTaxIncludingPriceTotal: undefined, // 涓嶅惈绋庢�讳环
+  // createUser: useUserStore().nickName, // 褰曞叆浜�
+  createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 褰曞叆鏃ユ湡
+	planRuntimeTime: dayjs().format("YYYY-MM-DD"), // 褰曞叆鏃ユ湡
+});
+
+const loadForm = async (id) => {
+	if (id) {
+		operationType.value = 'edit'
+	}
+  const { code, data } = await getLedgerById(id);
+  if (code == 200) {
+    form.deviceName = data.deviceName;
+    form.deviceModel = data.deviceModel;
+    form.deviceBrand = data.deviceBrand;
+    form.supplierName = data.supplierName;
+    form.storageLocation = data.storageLocation;
+    form.enableDepreciation = data.enableDepreciation;
+    form.unit = data.unit;
+    form.number = 1;
+    form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
+    form.taxIncludingPriceTotal = data.taxIncludingPriceTotal;
+    form.taxRate = data.taxRate;
+    form.unTaxIncludingPriceTotal = data.unTaxIncludingPriceTotal;
+    form.createTime = data.createTime;
+  }
+};
+
+const mathNum = () => {
+  if (!form.taxIncludingPriceUnit) {
+    ElMessage.error("璇疯緭鍏ュ崟浠�");
+    return;
+  }
+  form.taxIncludingPriceTotal = calculateTaxIncludeTotalPrice(
+    form.taxIncludingPriceUnit,
+    form.number
+  );
+  if (form.taxRate) {
+    form.unTaxIncludingPriceTotal = calculateTaxExclusiveTotalPrice(
+      form.taxIncludingPriceTotal,
+      form.taxRate
+    );
+  }
+};
+
+// 娓呴櫎琛ㄥ崟鏍￠獙鐘舵��
+const clearValidate = () => {
+  formRef.value?.clearValidate();
+};
+
+// 閲嶇疆琛ㄥ崟鏁版嵁鍜屾牎楠岀姸鎬�
+const resetFormAndValidate = () => {
+  resetForm();
+  clearValidate();
+};
+
+defineExpose({
+  form,
+  loadForm,
+  resetForm,
+  clearValidate,
+  resetFormAndValidate,
+	formRef,
+});
+</script>
diff --git a/src/views/alarmManagement/alarmConfig/Modal.vue b/src/views/alarmManagement/alarmConfig/Modal.vue
new file mode 100644
index 0000000..580e362
--- /dev/null
+++ b/src/views/alarmManagement/alarmConfig/Modal.vue
@@ -0,0 +1,69 @@
+<template>
+  <el-dialog :title="modalOptions.title" v-model="visible" @close="close">
+    <Form ref="formRef"></Form>
+    <template #footer>
+			<el-button type="primary" @click="sendForm" :loading="loading">
+				{{ modalOptions.confirmText }}
+			</el-button>
+      <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useModal } from "@/hooks/useModal.js";
+import { addLedger, editLedger } from "@/api/equipmentManagement/ledger.js";
+import Form from "./Form.vue";
+import { ElMessage } from "element-plus";
+const { proxy } = getCurrentInstance()
+
+defineOptions({
+  name: "璁惧鍙拌处鏂板缂栬緫",
+});
+
+const emits = defineEmits(["success"]);
+
+const formRef = ref();
+const {
+  id,
+  visible,
+  loading,
+  openModal,
+  modalOptions,
+  handleConfirm,
+  closeModal,
+} = useModal({ title: "璁惧鍙拌处" });
+
+const sendForm = () => {
+	proxy.$refs.formRef.$refs.formRef.validate(async valid => {
+		if (valid) {
+			const {code} = id.value
+				? await editLedger({id: id.value, ...formRef.value.form})
+				: await addLedger(formRef.value.form);
+			if (code == 200) {
+				emits("success");
+				ElMessage({message: "鎿嶄綔鎴愬姛", type: "success"});
+				close();
+			} else {
+				loading.value = false;
+			}
+		}
+	})
+};
+
+const close = () => {
+	formRef.value.resetFormAndValidate();
+  closeModal();
+};
+
+const loadForm = async (id) => {
+  openModal(id);
+  await nextTick();
+  formRef.value.loadForm(id);
+};
+
+defineExpose({
+  openModal,
+  loadForm,
+});
+</script>
diff --git a/src/views/alarmManagement/alarmConfig/alarmRule.vue b/src/views/alarmManagement/alarmConfig/alarmRule.vue
index ef90a36..b2e44be 100644
--- a/src/views/alarmManagement/alarmConfig/alarmRule.vue
+++ b/src/views/alarmManagement/alarmConfig/alarmRule.vue
@@ -1,173 +1,222 @@
 <template>
-  <div class="alarm-rule-config">
-    <el-card shadow="never" class="search-card">
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
-        <el-form-item label="瑙勫垯鍚嶇О">
-          <el-input v-model="searchForm.ruleName" placeholder="璇疯緭鍏ヨ鍒欏悕绉�" />
-        </el-form-item>
-        <el-form-item label="璁惧绫诲瀷">
-          <el-select v-model="searchForm.equipmentType" placeholder="璇烽�夋嫨璁惧绫诲瀷">
-            <el-option label="宸ヨ壓璁惧" value="宸ヨ壓璁惧" />
-            <el-option label="妫�娴嬭澶�" value="妫�娴嬭澶�" />
-            <el-option label="鍏朵粬璁惧" value="鍏朵粬璁惧" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleSearch">鎼滅储</el-button>
-          <el-button icon="el-icon-refresh" @click="handleReset">閲嶇疆</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <el-card shadow="never" class="table-card">
-      <template #header>
-        <div class="card-header">
-          <span>鎶ヨ瑙勫垯閰嶇疆</span>
-          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">鏂板瑙勫垯</el-button>
-        </div>
-      </template>
-      <el-table :data="ruleList" style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
-        <el-table-column type="index" label="搴忓彿" width="80" />
-        <el-table-column prop="ruleName" label="瑙勫垯鍚嶇О" />
-        <el-table-column prop="equipmentType" label="璁惧绫诲瀷" />
-        <el-table-column prop="parameter" label="鐩戞帶鍙傛暟" />
-        <el-table-column prop="alarmLevel" label="鎶ヨ绾у埆" />
-        <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="180" show-overflow-tooltip/>
-        <el-table-column prop="status" label="鐘舵��" width="150">
-          <template #default="scope">
-            <el-switch v-model="scope.row.status" active-text="鍚敤" inactive-text="绂佺敤" />
-          </template>
-        </el-table-column>
-        <el-table-column label="鎿嶄綔" width="150" fixed="right">
-          <template #default="scope">
-            <el-button size="small" type="text" @click="handleEdit(scope.row)">缂栬緫</el-button>
-            <el-button size="small" type="text" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="pagination">
-        <el-pagination
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="ruleList.length"
-          :page-size="10"
-          :page-sizes="[10, 20, 30, 50]"
+  <div class="app-container">
+    <el-form :model="filters" :inline="true">
+      <el-form-item label="瑙勫垯鍚嶇О">
+        <el-input
+          v-model="filters.deviceName"
+          style="width: 240px"
+          placeholder="璇疯緭鍏ヨ鍒欏悕绉�"
+          clearable
+          @change="getTableData"
         />
+      </el-form-item>
+      <el-form-item label="璁惧绫诲瀷">
+        <el-input
+            v-model="filters.deviceModel"
+            style="width: 240px"
+            placeholder="璇疯緭鍏ヨ澶囩被鍨�"
+            clearable
+            @change="getTableData"
+        />
+      </el-form-item>
+      <el-form-item label="鐩戞帶鍙傛暟">
+        <el-input
+            v-model="filters.supplierName"
+            style="width: 240px"
+            placeholder="璇疯緭鍏ョ洃鎺у弬鏁�"
+            clearable
+            @change="getTableData"
+        />
+      </el-form-item>
+    </el-form>
+    <div class="table_list">
+      <div class="actions">
+        <div></div>
+        <div>
+          <el-button type="primary" @click="add" icon="Plus"> 鏂板 </el-button>
+          <el-button
+            type="danger"
+            icon="Delete"
+            :disabled="multipleList.length <= 0"
+            @click="deleteRow(multipleList.map((item) => item.id))"
+          >
+            鎵归噺鍒犻櫎
+          </el-button>
+        </div>
       </div>
-    </el-card>
+      <PIMTable
+        rowKey="id"
+        isSelection
+        :column="columns"
+        :tableData="dataList"
+        :page="{
+          current: pagination.currentPage,
+          size: pagination.pageSize,
+          total: pagination.total,
+        }"
+        @selection-change="handleSelectionChange"
+        @pagination="changePage"
+      >
+      </PIMTable>
+    </div>
+    <Modal ref="modalRef" @success="getTableData"></Modal>
+    <el-dialog v-model="qrDialogVisible" title="浜岀淮鐮�" width="300px">
+      <div style="text-align:center;">
+        <img :src="qrCodeUrl" alt="浜岀淮鐮�" style="width:200px;height:200px;" />
+        <div style="margin:10px 0;">
+          <el-button type="primary" @click="downloadQRCode">涓嬭浇浜岀淮鐮佸浘鐗�</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'AlarmRule',
-  data() {
-    return {
-      searchForm: {
-        ruleName: '',
-        equipmentType: ''
-      },
-      ruleList: [
-        {
-          id: 1,
-          ruleName: '娓╁害杩囬珮鎶ヨ',
-          equipmentType: '宸ヨ壓璁惧',
-          parameter: '娓╁害',
-          alarmLevel: '涓ラ噸',
-          createTime: '2025-12-01 10:30:00',
-          status: true
-        },
-        {
-          id: 2,
-          ruleName: '鍘嬪姏寮傚父鎶ヨ',
-          equipmentType: '宸ヨ壓璁惧',
-          parameter: '鍘嬪姏',
-          alarmLevel: '涓瓑',
-          createTime: '2025-12-02 14:20:00',
-          status: true
-        },
-        {
-          id: 3,
-          ruleName: '娴侀噺杩囦綆鎶ヨ',
-          equipmentType: '妫�娴嬭澶�',
-          parameter: '娴侀噺',
-          alarmLevel: '杞诲井',
-          createTime: '2025-12-03 09:15:00',
-          status: false
-        },
-        {
-          id: 4,
-          ruleName: '鐢靛帇涓嶇ǔ瀹氭姤璀�',
-          equipmentType: '鍏朵粬璁惧',
-          parameter: '鐢靛帇',
-          alarmLevel: '涓瓑',
-          createTime: '2025-12-04 16:45:00',
-          status: true
-        },
-        {
-          id: 5,
-          ruleName: '娑蹭綅寮傚父鎶ヨ',
-          equipmentType: '宸ヨ壓璁惧',
-          parameter: '娑蹭綅',
-          alarmLevel: '涓ラ噸',
-          createTime: '2025-12-05 11:20:00',
-          status: true
-        }
-      ]
-    }
+<script setup>
+import { usePaginationApi } from "../../../hooks/usePaginationApi.jsx";
+import { getLedgerPage, delLedger } from "../../..//api/equipmentManagement/ledger.js";
+import { onMounted, getCurrentInstance } from "vue";
+import Modal from "./Modal.vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import dayjs from "dayjs";
+import { ref } from "vue";
+
+defineOptions({
+  name: "璁惧鍙拌处",
+});
+
+// 琛ㄦ牸澶氶�夋閫変腑椤�
+const multipleList = ref([]);
+const { proxy } = getCurrentInstance();
+const modalRef = ref();
+const qrDialogVisible = ref(false);
+const qrCodeUrl = ref("");
+const qrRowData = ref(null);
+
+const {
+  filters,
+  columns,
+  dataList,
+  pagination,
+  getTableData,
+  resetFilters,
+  onCurrentChange,
+} = usePaginationApi(
+  getLedgerPage,
+  {
+    deviceName: undefined,
+    deviceModel: undefined,
+    supplierName: undefined,
+    unit: undefined,
+    entryDateStart: undefined,
+    entryDateEnd: undefined,
   },
-  methods: {
-    handleSearch() {
-      console.log('鎼滅储', this.searchForm)
+  [
+    {
+      label: "瑙勫垯鍚嶇О",
+      align: "center",
+      prop: "deviceName",
     },
-    handleReset() {
-      this.searchForm = {
-        ruleName: '',
-        equipmentType: ''
-      }
+    {
+      label: "璁惧绫诲瀷",
+      align: "center",
+      prop: "deviceModel",
     },
-    handleAdd() {
-      console.log('鏂板瑙勫垯')
+    {
+      label: "鐩戞帶鍙傛暟",
+      align: "center",
+      prop: "supplierName",
     },
-    handleEdit(row) {
-      console.log('缂栬緫瑙勫垯', row)
+    {
+      label: "鎶ヨ绾у埆",
+      align: "center",
+      prop: "unit",
     },
-    handleDelete(row) {
-      console.log('鍒犻櫎瑙勫垯', row)
+    {
+      label: "鍒涘缓鏃堕棿",
+      align: "center",
+      prop: "createTime",
+    },
+    {
+      label: "鏄惁鍚敤",
+      align: "center",
+      prop: "status",
+    },
+		{
+			dataType: "action",
+			label: "鎿嶄綔",
+			align: "center",
+			fixed: 'right',
+			width: 150,
+			operation: [
+				{
+					name: "缂栬緫",
+					type: "text",
+					clickFun: (row) => {
+						edit(row.id)
+					},
+				},
+			],
+		},
+  ]
+);
+
+// 澶氶�夊悗鍋氫粈涔�
+const handleSelectionChange = (selectionList) => {
+  multipleList.value = selectionList;
+};
+
+const add = () => {
+  modalRef.value.openModal();
+};
+const edit = (id) => {
+  modalRef.value.loadForm(id);
+};
+const changePage = ({ page, limit }) => {
+  pagination.currentPage = page;
+	pagination.pageSize = limit;
+  onCurrentChange(page);
+};
+const deleteRow = (id) => {
+  ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ枃浠�, 鏄惁缁х画?", "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  }).then(async () => {
+    const { code } = await delLedger(id);
+    if (code == 200) {
+      ElMessage({
+        type: "success",
+        message: "鍒犻櫎鎴愬姛",
+      });
+      getTableData();
     }
+  });
+};
+
+const changeDaterange = (value) => {
+  if (value) {
+    filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
+    filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
+  } else {
+    filters.entryDateStart = undefined;
+    filters.entryDateEnd = undefined;
   }
-}
+  getTableData();
+};
+
+
+onMounted(() => {
+  getTableData();
+});
 </script>
 
-<style scoped>
-.alarm-rule-config {
-  padding: 16px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
+<style lang="scss" scoped>
+.table_list {
+  margin-top: unset;
 }
-
-.search-card {
-  margin-bottom: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.table-card {
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
+.actions {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding: 0 20px;
+  margin-bottom: 10px;
 }
-
-.pagination {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 20px;
-}
-
 </style>
diff --git a/src/views/alarmManagement/alarmKnowledge/alarmHandle.vue b/src/views/alarmManagement/alarmKnowledge/alarmHandle.vue
index fa0a8f8..a5f2f9f 100644
--- a/src/views/alarmManagement/alarmKnowledge/alarmHandle.vue
+++ b/src/views/alarmManagement/alarmKnowledge/alarmHandle.vue
@@ -1,180 +1,498 @@
 <template>
-  <div class="alarm-handle-knowledge">
-    <el-card shadow="never" class="search-card">
-      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
-        <el-form-item label="鐭ヨ瘑搴撴爣棰�">
-          <el-input v-model="searchForm.title" placeholder="璇疯緭鍏ョ煡璇嗗簱鏍囬" />
-        </el-form-item>
-        <el-form-item label="鎶ヨ绫诲瀷">
-          <el-select v-model="searchForm.alarmType" placeholder="璇烽�夋嫨鎶ヨ绫诲瀷" clearable>
-            <el-option label="娓╁害鎶ヨ" value="娓╁害鎶ヨ" />
-            <el-option label="鍘嬪姏鎶ヨ" value="鍘嬪姏鎶ヨ" />
-            <el-option label="鎸姩鎶ヨ" value="鎸姩鎶ヨ" />
-            <el-option label="娑蹭綅鎶ヨ" value="娑蹭綅鎶ヨ" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleSearch">鎼滅储</el-button>
-          <el-button icon="el-icon-plus" @click="handleAdd">鏂板</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <el-card shadow="never" class="table-card" >
-      <el-table :data="knowledgeList" style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
-        <el-table-column type="index" label="搴忓彿" width="80" />
-        <el-table-column prop="title" label="鐭ヨ瘑搴撴爣棰�" min-width="200" />
-        <el-table-column prop="alarmType" label="鎶ヨ绫诲瀷" width="120" />
-        <el-table-column prop="alarmLevel" label="鎶ヨ绾у埆" width="100">
-          <template #default="scope">
-            <el-tag :type="getAlarmLevelType(scope.row.alarmLevel)">
-              {{ scope.row.alarmLevel }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="180" />
-        <el-table-column prop="creator" label="鍒涘缓浜�" width="100" />
-        <el-table-column prop="status" label="鐘舵��" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === '鍚敤' ? 'success' : 'info'">
-              {{ scope.row.status }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="鎿嶄綔" width="250" fixed="right">
-          <template #default="scope">
-            <el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row)">鏌ョ湅</el-button>
-            <el-button size="small" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">缂栬緫</el-button>
-            <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="pagination">
-        <el-pagination
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="knowledgeList.length"
-          :page-size="10"
-          :page-sizes="[10, 20, 30, 50]"
+  <div class="app-container">
+    <div class="search_form">
+      <div>
+        <span class="search_title">鐭ヨ瘑搴撴爣棰橈細</span>
+        <el-input
+          v-model="searchForm.customerName"
+          style="width: 240px"
+          placeholder="璇疯緭鍏�"
+          @change="handleQuery"
+          clearable
+          :prefix-icon="Search"
         />
+        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+          >鎼滅储</el-button
+        >
       </div>
-    </el-card>
+      <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"
+        @selection-change="handleSelectionChange"
+        :tableLoading="tableLoading"
+        @pagination="pagination"
+      ></PIMTable>
+    </div>
+    <el-dialog
+      v-model="dialogFormVisible"
+      :title="operationType === 'add' ? '鏂板鐭ヨ瘑搴�' : '缂栬緫鐭ヨ瘑搴�'"
+      width="70%"
+      @close="closeDia"
+    >
+      <el-form
+        :model="form"
+        label-width="140px"
+        label-position="top"
+        :rules="rules"
+        ref="formRef"
+      >
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鐭ヨ瘑搴撴爣棰橈細" prop="customerName">
+              <el-input
+                v-model="form.customerName"
+                placeholder="璇疯緭鍏�"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="鎶ヨ绫诲瀷锛�"
+              prop="taxpayerIdentificationNumber"
+            >
+              <el-input
+                v-model="form.taxpayerIdentificationNumber"
+                placeholder="璇疯緭鍏�"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鎶ヨ绾у埆锛�" prop="companyAddress">
+              <el-select
+                  v-model="form.companyAddress"
+                  placeholder="璇烽�夋嫨鎶ヨ绾у埆"
+                  clearable
+                  style="width: 100%"
+              >
+                <el-option label="涓�鑸�" value="涓�鑸�" />
+                <el-option label="杞诲井" value="杞诲井" />
+                <el-option label="涓ラ噸" value="涓ラ噸" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+					<el-col :span="12">
+						<el-form-item label="鑱旂郴浜猴細" prop="companyPhone">
+							<el-input v-model="form.companyPhone" 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="closeDia">鍙栨秷</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� -->
+    <el-dialog
+      :title="upload.title"
+      v-model="upload.open"
+      width="400px"
+      append-to-body
+    >
+      <el-upload
+        ref="uploadRef"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :before-upload="upload.beforeUpload"
+        :on-progress="upload.onProgress"
+        :on-success="upload.onSuccess"
+        :on-error="upload.onError"
+        :on-change="upload.onChange"
+        :auto-upload="false"
+        drag
+      >
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              style="font-size: 12px; vertical-align: baseline"
+              @click="importTemplate"
+              >涓嬭浇妯℃澘</el-link
+            >
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button>
+          <el-button @click="upload.open = false">鍙� 娑�</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'AlarmHandleKnowledge',
-  data() {
-    return {
-      searchForm: {
-        title: '',
-        alarmType: ''
-      },
-      knowledgeList: [
-        {
-          id: 1,
-          title: '鍙嶅簲閲滄俯搴﹁繃楂樻姤璀﹀鐞嗘祦绋�',
-          alarmType: '娓╁害鎶ヨ',
-          alarmLevel: '涓ラ噸',
-          createTime: '2025-12-01 14:30:00',
-          creator: '绠＄悊鍛�',
-          status: '鍚敤'
-        },
-        {
-          id: 2,
-          title: '绂诲績娉垫尟鍔ㄥ紓甯告姤璀﹀鐞嗘寚鍗�',
-          alarmType: '鎸姩鎶ヨ',
-          alarmLevel: '涓瓑',
-          createTime: '2025-12-02 09:15:00',
-          creator: '璁惧宸ョ▼甯�',
-          status: '鍚敤'
-        },
-        {
-          id: 3,
-          title: '鍌ㄧ綈娑蹭綅杩囦綆鎶ヨ澶勭悊鏂规硶',
-          alarmType: '娑蹭綅鎶ヨ',
-          alarmLevel: '杞诲井',
-          createTime: '2025-12-03 16:45:00',
-          creator: '宸ヨ壓宸ョ▼甯�',
-          status: '鍚敤'
-        },
-        {
-          id: 4,
-          title: '鍘嬬缉鏈哄帇鍔涜繃楂樻姤璀﹀簲鎬ラ妗�',
-          alarmType: '鍘嬪姏鎶ヨ',
-          alarmLevel: '涓ラ噸',
-          createTime: '2025-12-04 11:20:00',
-          creator: '瀹夊叏涓荤',
-          status: '鍚敤'
-        },
-        {
-          id: 5,
-          title: '骞茬嚗鏈烘箍搴﹀紓甯告姤璀﹀鐞嗘祦绋�',
-          alarmType: '婀垮害鎶ヨ',
-          alarmLevel: '涓瓑',
-          createTime: '2025-12-05 15:10:00',
-          creator: '宸ヨ壓宸ョ▼甯�',
-          status: '绂佺敤'
-        }
-      ]
+<script setup>
+import {onMounted, ref} from "vue";
+import { Search } from "@element-plus/icons-vue";
+import {
+  addCustomer,
+  delCustomer,
+  getCustomer,
+  listCustomer,
+  updateCustomer,
+} from "@/api/basicData/customerFile.js";
+import { ElMessageBox } from "element-plus";
+import { userListNoPage } from "@/api/system/user.js";
+import useUserStore from "@/store/modules/user";
+import { getToken } from "@/utils/auth.js";
+const { proxy } = getCurrentInstance();
+const userStore = useUserStore();
+
+const tableColumn = ref([
+  {
+    label: "鐭ヨ瘑搴撴爣棰�",
+    prop: "customerName",
+    width: 220,
+  },
+  {
+    label: "鎶ヨ绫诲瀷",
+    prop: "taxpayerIdentificationNumber",
+    width: 220,
+  },
+  {
+    label: "鎶ヨ绾у埆",
+    prop: "companyAddress",
+    width: 250,
+    formatter: (row, column, cellValue) => {
+      const levelMap = {
+        '涓�鑸�': '涓�鑸�',
+        '杞诲井': '杞诲井',
+        '涓ラ噸': '涓ラ噸'
+      };
+      return levelMap[cellValue] || cellValue;
     }
   },
-  methods: {
-    getAlarmLevelType(level) {
-      switch (level) {
-        case '涓ラ噸':
-          return 'danger'
-        case '涓瓑':
-          return 'warning'
-        case '杞诲井':
-          return 'info'
-        default:
-          return 'info'
-      }
-    },
-    handleSearch() {
-      console.log('鎼滅储鐭ヨ瘑搴�', this.searchForm)
-    },
-    handleAdd() {
-      console.log('鏂板鐭ヨ瘑搴�')
-    },
-    handleView(row) {
-      console.log('鏌ョ湅鐭ヨ瘑搴撹鎯�', row)
-    },
-    handleEdit(row) {
-      console.log('缂栬緫鐭ヨ瘑搴�', row)
-    },
-    handleDelete(row) {
-      console.log('鍒犻櫎鐭ヨ瘑搴�', row)
+  {
+    label: "鑱旂郴浜�",
+    prop: "companyPhone",
+  },
+  {
+    label: "鍒涘缓鏃堕棿",
+    prop: "maintenanceTime",
+    width: 100,
+  },
+  {
+    dataType: "action",
+    label: "鎿嶄綔",
+    align: "center",
+		fixed: 'right',
+    operation: [
+      {
+        name: "缂栬緫",
+        type: "text",
+        clickFun: (row) => {
+          openForm("edit", row);
+        }
+      },
+    ],
+  },
+]);
+const tableData = ref([]);
+const selectedRows = ref([]);
+const userList = ref([]);
+const tableLoading = ref(false);
+const page = reactive({
+  current: 1,
+  size: 100,
+  total: 0,
+});
+const total = ref(0);
+
+// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁
+const operationType = ref("");
+const dialogFormVisible = ref(false);
+const formYYs = ref({    // 鍏朵粬瀛楁...
+  contactList: [
+    {
+      contactPerson: "",
+      contactPhone: ""
     }
+  ]
+});
+const data = reactive({
+  searchForm: {
+    customerName: "",
+  },
+  form: {
+    customerName: "",
+    taxpayerIdentificationNumber: "",
+    companyAddress: "",
+    addressPhone: "",
+    contactPerson: "",
+    contactPhone: "",
+    maintainer: "",
+    maintenanceTime: "",
+    basicBankAccount: "",
+    bankAccount: "",
+    bankCode: "",
+  },
+  rules: {
+    customerName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    taxpayerIdentificationNumber: [
+      { required: true, message: "璇疯緭鍏�", trigger: "blur" },
+    ],
+    companyAddress: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    companyPhone: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    // contactPerson: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    // contactPhone: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    maintainer: [{ required: false, message: "璇烽�夋嫨", trigger: "change" }],
+    maintenanceTime: [
+      { required: false, message: "璇烽�夋嫨", trigger: "change" },
+    ],
+    basicBankAccount: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    bankAccount: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    bankCode: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+  },
+});
+const upload = reactive({
+  // 鏄惁鏄剧ず寮瑰嚭灞傦紙瀹㈡埛瀵煎叆锛�
+  open: false,
+  // 寮瑰嚭灞傛爣棰橈紙瀹㈡埛瀵煎叆锛�
+  title: "",
+  // 鏄惁绂佺敤涓婁紶
+  isUploading: false,
+  // 璁剧疆涓婁紶鐨勮姹傚ご閮�
+  headers: { Authorization: "Bearer " + getToken() },
+  // 涓婁紶鐨勫湴鍧�
+  url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
+  // 鏂囦欢涓婁紶鍓嶇殑鍥炶皟
+  beforeUpload: (file) => {
+    console.log('鏂囦欢鍗冲皢涓婁紶', file);
+    // 鍙互鍦ㄦ澶勫仛鏂囦欢绫诲瀷鎴栧ぇ灏忔牎楠�
+    const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
+    if (!isValid) {
+      proxy.$modal.msgError("鍙兘涓婁紶 Excel 鏂囦欢");
+    }
+    return isValid;
+  },
+  // 鏂囦欢鐘舵�佹敼鍙樻椂鐨勫洖璋�
+  onChange: (file, fileList) => {
+    console.log('鏂囦欢鐘舵�佹敼鍙�', file, fileList);
+  },
+  // 鏂囦欢涓婁紶鎴愬姛鏃剁殑鍥炶皟
+  onSuccess: (response, file, fileList) => {
+    console.log('涓婁紶鎴愬姛', response, file, fileList);
+    upload.isUploading = false;
+    if(response.code === 200){
+      proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
+      upload.open = false;
+      proxy.$refs["uploadRef"].clearFiles();
+      getList();
+    }else if(response.code === 500){
+      proxy.$modal.msgError(response.msg);
+    }else{
+      proxy.$modal.msgWarning(response.msg);
+    }
+  },
+  // 鏂囦欢涓婁紶澶辫触鏃剁殑鍥炶皟
+  onError: (error, file, fileList) => {
+    console.error('涓婁紶澶辫触', error, file, fileList);
+    upload.isUploading = false;
+    proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触");
+  },
+  // 鏂囦欢涓婁紶杩涘害鍥炶皟
+  onProgress: (event, file, fileList) => {
+    console.log('涓婁紶涓�...', event.percent);
   }
+});
+const { searchForm, form, rules } = toRefs(data);
+const addNewContact = () => {
+  formYYs.value.contactList.push({
+    contactPerson: "",
+    contactPhone: ""
+  });
+};
+
+const removeContact = (index) => {
+  if (formYYs.value.contactList.length > 1) {
+    formYYs.value.contactList.splice(index, 1);
+  }
+};
+// 鏌ヨ鍒楄〃
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+  page.current = 1;
+  getList();
+};
+const pagination = (obj) => {
+  page.current = obj.page;
+  page.size = obj.limit;
+  getList();
+};
+const getList = () => {
+  tableLoading.value = true;
+  listCustomer({ ...searchForm.value, ...page }).then((res) => {
+    tableLoading.value = false;
+    tableData.value = res.records;
+    page.total = res.total;
+  });
+};
+// 琛ㄦ牸閫夋嫨鏁版嵁
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection;
+};
+/** 鎻愪氦涓婁紶鏂囦欢 */
+function submitFileForm() {
+  upload.isUploading = true;
+  proxy.$refs["uploadRef"].submit();
 }
+/** 瀵煎叆鎸夐挳鎿嶄綔 */
+function handleImport() {
+  upload.title = "瀹㈡埛瀵煎叆";
+  upload.open = true;
+}
+/** 涓嬭浇妯℃澘 */
+function importTemplate() {
+  proxy.download("/basic/customer/downloadTemplate", {}, "瀹㈡埛瀵煎叆妯℃澘.xlsx");
+}
+// 鎵撳紑寮规
+const openForm = (type, row) => {
+  operationType.value = type;
+  form.value = {};
+  form.value.maintainer = userStore.nickName;
+  formYYs.value.contactList = [
+    {
+      contactPerson: "",
+      contactPhone: ""
+    }
+  ];
+  form.value.maintenanceTime = getCurrentDate();
+  userListNoPage().then((res) => {
+    userList.value = res.data;
+  });
+  if (type === "edit") {
+    getCustomer(row.id).then((res) => {
+      form.value = { ...res.data };
+      formYYs.value.contactList = res.data.contactPerson.split(",").map((item, index) => {
+        return {
+          contactPerson: item,
+          contactPhone: res.data.contactPhone.split(",")[index]
+        }
+      });
+
+    });
+  }
+  dialogFormVisible.value = true;
+};
+// 鎻愪氦琛ㄥ崟
+const submitForm = () => {
+  proxy.$refs["formRef"].validate((valid) => {
+    if (valid) {
+      if (operationType.value === "edit") {
+        submitEdit();
+      } else {
+        submitAdd();
+      }
+    }
+  });
+};
+// 鎻愪氦鏂板
+const submitAdd = () => {
+  if(formYYs.value.contactList.length < 1){
+    return proxy.$modal.msgWarning("璇疯嚦灏戞坊鍔犱竴涓仈绯讳汉");
+  }
+  form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
+  form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
+  addCustomer(form.value).then((res) => {
+    proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+    closeDia();
+    getList();
+  });
+};
+// 鎻愪氦淇敼
+const submitEdit = () => {
+	form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
+	form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
+  updateCustomer(form.value).then((res) => {
+    proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+    closeDia();
+    getList();
+  });
+};
+// 鍏抽棴寮规
+const closeDia = () => {
+  proxy.resetForm("formRef");
+  dialogFormVisible.value = false;
+};
+// 瀵煎嚭
+const handleOut = () => {
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      proxy.download("/basic/customer/export", {}, "瀹㈡埛妗ｆ.xlsx");
+    })
+    .catch(() => {
+      proxy.$modal.msg("宸插彇娑�");
+    });
+};
+// 鍒犻櫎
+const handleDelete = () => {
+  let ids = [];
+  if (selectedRows.value.length > 0) {
+    ids = selectedRows.value.map((item) => item.id);
+  } else {
+    proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+    return;
+  }
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      tableLoading.value = true;
+      delCustomer(ids)
+        .then((res) => {
+          proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+          getList();
+        })
+        .finally(() => {
+          tableLoading.value = false;
+        });
+    })
+    .catch(() => {
+      proxy.$modal.msg("宸插彇娑�");
+    });
+};
+
+// 鑾峰彇褰撳墠鏃ユ湡骞舵牸寮忓寲涓� YYYY-MM-DD
+function getCurrentDate() {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0"); // 鏈堜唤浠�0寮�濮�
+  const day = String(today.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+onMounted(() => {
+	getList();
+});
 </script>
 
-<style scoped>
-.alarm-handle-knowledge {
-  padding: 16px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
-}
-
-.search-card {
-  margin-bottom: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.table-card {
-  margin-top: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.pagination {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 20px;
-}
-
-</style>
+<style scoped lang="scss"></style>

--
Gitblit v1.9.3