From a6f97a0ed4d838a8d27b75b3b4869adba97f3963 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 21 四月 2026 15:56:03 +0800
Subject: [PATCH] 新疆马铃薯 1.设备巡检查看附件展示修改

---
 src/views/basicData/customerFile/index.vue |  515 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 486 insertions(+), 29 deletions(-)

diff --git a/src/views/basicData/customerFile/index.vue b/src/views/basicData/customerFile/index.vue
index b4d6199..c1be93a 100644
--- a/src/views/basicData/customerFile/index.vue
+++ b/src/views/basicData/customerFile/index.vue
@@ -1,43 +1,500 @@
 <template>
-<div class="app-container">
-  <div class="search_form">
-    <div>
-      <span class="search_title">瀹㈡埛鍚嶇О锛�</span>
-      <el-input
-          v-model="input2"
-          style="width: 240px"
+  <div class="app-container">
+    <div class="search_form">
+      <div>
+        <span class="search_title">鍚嶇О锛�</span>
+        <el-input
+          v-model="searchForm.customerName"
+          style="width: 240px; margin-right: 10px"
           placeholder="璇疯緭鍏�"
+          @change="handleQuery"
+          clearable
           :prefix-icon="Search"
+        />
+        <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 @click="handleOut">瀵煎嚭</el-button>
+        <el-button type="info" plain icon="Upload" @click="handleImport">
+          瀵煎叆
+        </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"
       />
     </div>
-    <div>
-      <el-button type="primary">鏂板瀹㈡埛</el-button>
-      <el-button>瀵煎嚭</el-button>
-      <el-button type="danger" plain>鍒犻櫎</el-button>
-    </div>
+
+    <el-dialog
+      v-model="dialogFormVisible"
+      :title="operationType === 'add' ? '鏂板瀹㈡埛淇℃伅' : '缂栬緫瀹㈡埛淇℃伅'"
+      width="600px"
+      @close="closeDia"
+    >
+      <el-form
+        :model="form"
+        label-width="120px"
+        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="maintainer">
+              <el-input v-model="form.maintainer" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="缁存姢鏃堕棿锛�" prop="maintenanceTime">
+              <el-date-picker
+                style="width: 100%"
+                v-model="form.maintenanceTime"
+                value-format="YYYY-MM-DD"
+                format="YYYY-MM-DD"
+                type="date"
+                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"><UploadFilled /></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>
+
+    <el-dialog title="瀹㈡埛璇︽儏" v-model="detailDialogVisible" width="600px" @close="closeDetailDialog">
+      <div class="detail-section">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="info-item">
+              <span class="info-label">鍚嶇О锛�</span>
+              <span class="info-value">{{ detailForm.customerName }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="info-item">
+              <span class="info-label">绾崇◣浜鸿瘑鍒彿锛�</span>
+              <span class="info-value">{{ detailForm.taxpayerIdentificationNumber }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="info-item">
+              <span class="info-label">缁存姢浜猴細</span>
+              <span class="info-value">{{ detailForm.maintainer }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="info-item">
+              <span class="info-label">缁存姢鏃堕棿锛�</span>
+              <span class="info-value">{{ detailForm.maintenanceTime }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeDetailDialog">鍏抽棴</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
-  <div class="table_list">
-    <PIMTable :column="tableColumn"></PIMTable>
-  </div>
-</div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import {Search} from "@element-plus/icons-vue";
+  import { onMounted, ref, reactive, getCurrentInstance, toRefs } from "vue";
+  import { Search, UploadFilled } from "@element-plus/icons-vue";
+  import { addCustomer, delCustomer, getCustomer, listCustomer, updateCustomer } from "@/api/basicData/customerFile.js";
+  import { ElMessageBox } from "element-plus";
+  import useUserStore from "@/store/modules/user";
+  import { getToken } from "@/utils/auth.js";
 
-const input2 = ref('')
-const tableColumn = ref([
-  {
-    label: '鎵瑰噯鍐呭',
-    prop: 'ratifyRemark'
-  }, {
-    label: '鎵瑰噯浜�',
-    prop: 'ratifyName',
-  },
-])
+  const { proxy } = getCurrentInstance();
+  const userStore = useUserStore();
+
+  const tableColumn = ref([
+    {
+      label: "鍚嶇О",
+      prop: "customerName",
+    },
+    {
+      label: "绾崇◣浜鸿瘑鍒彿",
+      prop: "taxpayerIdentificationNumber",
+    },
+    {
+      label: "缁存姢浜�",
+      prop: "maintainer",
+    },
+    {
+      label: "缁存姢鏃堕棿",
+      prop: "maintenanceTime",
+    },
+    {
+      dataType: "action",
+      label: "鎿嶄綔",
+      align: "center",
+      fixed: "right",
+      width: 220,
+      operation: [
+        {
+          name: "缂栬緫",
+          type: "text",
+          clickFun: row => {
+            openForm("edit", row);
+          },
+        },
+        {
+          name: "璇︽儏",
+          type: "text",
+          clickFun: row => {
+            openDetailDialog(row);
+          },
+        },
+      ],
+    },
+  ]);
+
+  const tableData = ref([]);
+  const selectedRows = ref([]);
+  const tableLoading = ref(false);
+  const detailDialogVisible = ref(false);
+  const dialogFormVisible = ref(false);
+  const operationType = ref("");
+  const formRef = ref();
+  const uploadRef = ref();
+
+  const defaultForm = () => ({
+    customerName: "",
+    taxpayerIdentificationNumber: "",
+    maintainer: userStore.nickName,
+    maintenanceTime: getCurrentDate(),
+  });
+
+  const detailForm = reactive({
+    customerName: "",
+    taxpayerIdentificationNumber: "",
+    maintainer: "",
+    maintenanceTime: "",
+  });
+
+  const data = reactive({
+    searchForm: {
+      customerName: "",
+    },
+    form: defaultForm(),
+    rules: {
+      customerName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+      taxpayerIdentificationNumber: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+      maintainer: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+      maintenanceTime: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
+    },
+  });
+
+  const { searchForm, form, rules } = toRefs(data);
+
+  const page = reactive({
+    current: 1,
+    size: 100,
+    total: 0,
+  });
+
+  const upload = reactive({
+    open: false,
+    title: "",
+    isUploading: false,
+    headers: { Authorization: "Bearer " + getToken() },
+    url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
+    updateSupport: 0,
+    beforeUpload: 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: () => {},
+    onSuccess: response => {
+      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: () => {
+      upload.isUploading = false;
+      proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触");
+    },
+    onProgress: () => {},
+  });
+
+  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;
+  };
+
+  const submitFileForm = () => {
+    upload.isUploading = true;
+    proxy.$refs["uploadRef"].submit();
+  };
+
+  const handleImport = () => {
+    upload.title = "瀹㈡埛瀵煎叆";
+    upload.open = true;
+  };
+
+  const importTemplate = () => {
+    proxy.download("/basic/customer/downloadTemplate", {}, "瀹㈡埛瀵煎叆妯℃澘.xlsx");
+  };
+
+  const openForm = (type, row) => {
+    operationType.value = type;
+    form.value = defaultForm();
+    if (type === "edit") {
+      getCustomer(row.id).then(res => {
+        form.value.id = res.data.id || "";
+        form.value.customerName = res.data.customerName || "";
+        form.value.taxpayerIdentificationNumber = res.data.taxpayerIdentificationNumber || "";
+        form.value.maintainer = res.data.maintainer || userStore.nickName;
+        form.value.maintenanceTime = res.data.maintenanceTime || getCurrentDate();
+      });
+    }
+    dialogFormVisible.value = true;
+  };
+
+  const submitForm = () => {
+    proxy.$refs["formRef"].validate(valid => {
+      if (!valid) {
+        return;
+      }
+      if (operationType.value === "edit") {
+        updateCustomer(form.value).then(() => {
+          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+          closeDia();
+          getList();
+        });
+      } else {
+        addCustomer(form.value).then(() => {
+          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+          closeDia();
+          getList();
+        });
+      }
+    });
+  };
+
+  const closeDia = () => {
+    proxy.resetForm("formRef");
+    form.value = defaultForm();
+    dialogFormVisible.value = false;
+  };
+
+  const handleOut = () => {
+    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+      confirmButtonText: "纭",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    })
+      .then(() => {
+        proxy.download("/basic/customer/export", {}, "瀹㈡埛妗ｆ.xlsx");
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
+  };
+
+  const handleDelete = () => {
+    if (selectedRows.value.length === 0) {
+      proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+      return;
+    }
+    const unauthorizedData = selectedRows.value.filter(
+      item => item.maintainer !== userStore.nickName,
+    );
+    if (unauthorizedData.length > 0) {
+      proxy.$modal.msgWarning("涓嶅彲鍒犻櫎浠栦汉缁存姢鐨勬暟鎹�");
+      return;
+    }
+    const ids = selectedRows.value.map(item => item.id);
+    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+      confirmButtonText: "纭",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    })
+      .then(() => {
+        tableLoading.value = true;
+        delCustomer(ids)
+          .then(() => {
+            proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+            getList();
+          })
+          .finally(() => {
+            tableLoading.value = false;
+          });
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
+  };
+
+  const openDetailDialog = row => {
+    getCustomer(row.id).then(res => {
+      Object.assign(detailForm, {
+        customerName: res.data.customerName || "",
+        taxpayerIdentificationNumber: res.data.taxpayerIdentificationNumber || "",
+        maintainer: res.data.maintainer || "",
+        maintenanceTime: res.data.maintenanceTime || "",
+      });
+      detailDialogVisible.value = true;
+    });
+  };
+
+  const closeDetailDialog = () => {
+    detailDialogVisible.value = false;
+  };
+
+  function getCurrentDate() {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, "0");
+    const day = String(today.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  onMounted(() => {
+    getList();
+  });
 </script>
 
 <style scoped lang="scss">
+  .detail-section {
+    padding: 10px 0;
+  }
 
-</style>
\ No newline at end of file
+  .info-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 16px;
+    line-height: 1.6;
+  }
+
+  .info-label {
+    flex: 0 0 120px;
+    color: #606266;
+    font-weight: 600;
+  }
+
+  .info-value {
+    flex: 1;
+    color: #303133;
+    word-break: break-all;
+  }
+</style>

--
Gitblit v1.9.3