From f1e3004a77d510b7693c11aeaffc4241bed363b8 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 05 二月 2026 16:59:52 +0800
Subject: [PATCH] fix: 售后质量追溯
---
src/views/qualityManagement/afterSalesTraceability/index.vue | 595 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 595 insertions(+), 0 deletions(-)
diff --git a/src/views/qualityManagement/afterSalesTraceability/index.vue b/src/views/qualityManagement/afterSalesTraceability/index.vue
new file mode 100644
index 0000000..8cd4856
--- /dev/null
+++ b/src/views/qualityManagement/afterSalesTraceability/index.vue
@@ -0,0 +1,595 @@
+<template>
+ <div class="app-container">
+ <!-- 鏌ヨ鏉′欢 -->
+ <el-form
+ :model="queryParams"
+ ref="queryForm"
+ :inline="true"
+ v-show="showSearch"
+ label-width="90px"
+ >
+ <el-form-item label="浜у搧鍨嬪彿" prop="productModel">
+ <el-input
+ v-model="queryParams.productModel"
+ placeholder="璇疯緭鍏ヤ骇鍝佸瀷鍙�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="瀹㈡埛鍚嶇О" prop="customerName">
+ <el-input
+ v-model="queryParams.customerName"
+ placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="鍙嶉鏃堕棿" prop="feedbackRange">
+ <el-date-picker
+ v-model="queryParams.feedbackRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ clearable
+ />
+ </el-form-item>
+ <el-form-item label="澶勭悊鐘舵��" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="璇烽�夋嫨澶勭悊鐘舵��"
+ clearable
+ >
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="Search" @click="handleQuery">
+ 鎼滅储
+ </el-button>
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+
+ <!-- 鎿嶄綔鍖� -->
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="3">
+ <el-button
+ type="primary"
+ plain
+ icon="Plus"
+ @click="handleAdd"
+ >
+ 鏂板鍞悗璐ㄩ噺璁板綍
+ </el-button>
+ </el-col>
+ <el-col :span="3">
+ <el-button
+ type="success"
+ plain
+ icon="Edit"
+ :disabled="single"
+ @click="handleUpdate"
+ >
+ 淇敼
+ </el-button>
+ </el-col>
+ <el-col :span="3">
+ <el-button
+ type="danger"
+ plain
+ icon="Delete"
+ :disabled="multiple"
+ @click="handleDelete"
+ >
+ 鍒犻櫎
+ </el-button>
+ </el-col>
+ <el-col :span="3">
+ <el-button
+ type="warning"
+ plain
+ icon="Download"
+ @click="handleExport"
+ >
+ 瀵煎嚭
+ </el-button>
+ </el-col>
+ <right-toolbar
+ v-model:showSearch="showSearch"
+ @queryTable="getList"
+ />
+ </el-row>
+
+ <!-- 鏁版嵁琛� -->
+ <el-table
+ v-loading="loading"
+ :data="afterSalesList"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55" align="center" />
+ <el-table-column label="搴忓彿" type="index" width="55" align="center" />
+ <el-table-column label="閿�鍞悎鍚屽彿" prop="contractNo" width="160" />
+ <el-table-column label="浜у搧缂栧彿" prop="productCode" width="140" />
+ <el-table-column label="浜у搧鍨嬪彿" prop="productModel" width="140" />
+ <el-table-column label="瀹㈡埛鍚嶇О" prop="customerName" width="160" />
+ <el-table-column label="鑱旂郴鏂瑰紡" prop="contact" width="140" />
+ <el-table-column label="鍙嶉鏃堕棿" prop="feedbackTime" width="160">
+ <template #default="scope">
+ <span>{{ scope.row.feedbackTime }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="闂鎻忚堪" prop="problemDesc" show-overflow-tooltip />
+ <el-table-column label="缁翠慨鎯呭喌" prop="repairInfo" show-overflow-tooltip />
+ <el-table-column label="澶勭悊缁撴灉" prop="result" show-overflow-tooltip />
+ <el-table-column label="澶勭悊鐘舵��" prop="status" width="120" align="center">
+ <template #default="scope">
+ <dict-tag
+ :options="statusOptions"
+ :value="scope.row.status"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" width="160" fixed="right">
+ <template #default="scope">
+ <el-button size="small" type="text" icon="Edit" @click="handleUpdate(scope.row)">
+ 淇敼
+ </el-button>
+ <el-button size="small" type="text" icon="Delete" @click="handleDelete(scope.row)">
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <pagination
+ v-show="total > 0"
+ :total="total"
+ v-model:page="queryParams.pageNum"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+
+ <!-- 鏂板/淇敼寮圭獥 -->
+ <el-dialog
+ :title="title"
+ v-model="open"
+ width="900px"
+ append-to-body
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="110px"
+ >
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="閿�鍞悎鍚屽彿" prop="contractNo">
+ <el-input
+ v-model="form.contractNo"
+ placeholder="璇烽�夋嫨鍏宠仈閿�鍞悎鍚屽彿"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="浜у搧缂栧彿" prop="productCode">
+ <el-input
+ v-model="form.productCode"
+ placeholder="璇烽�夋嫨鍏宠仈浜у搧缂栧彿"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="浜у搧鍨嬪彿" prop="productModel">
+ <el-input
+ v-model="form.productModel"
+ placeholder="璇疯緭鍏ヤ骇鍝佸瀷鍙�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="瀹㈡埛鍚嶇О" prop="customerName">
+ <el-input
+ v-model="form.customerName"
+ placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鑱旂郴鏂瑰紡" prop="contact">
+ <el-input
+ v-model="form.contact"
+ placeholder="璇疯緭鍏ュ鎴疯仈绯绘柟寮�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍙嶉鏃堕棿" prop="feedbackTime">
+ <el-date-picker
+ v-model="form.feedbackTime"
+ type="datetime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ format="YYYY-MM-DD HH:mm"
+ placeholder="璇烽�夋嫨鍙嶉鏃堕棿"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="瀹㈡埛鍙嶉闂" prop="problemDesc">
+ <el-input
+ v-model="form.problemDesc"
+ type="textarea"
+ :rows="3"
+ placeholder="璇疯缁嗚褰曞鎴峰弽棣堥棶棰樸�佺幇璞℃弿杩扮瓑淇℃伅"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="缁翠慨鎯呭喌" prop="repairInfo">
+ <el-input
+ v-model="form.repairInfo"
+ type="textarea"
+ :rows="2"
+ placeholder="璁板綍缁翠慨杩囩▼銆佷娇鐢ㄥ浠躲�佽繑淇鏁扮瓑"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="澶勭悊缁撴灉" prop="result">
+ <el-input
+ v-model="form.result"
+ type="textarea"
+ :rows="2"
+ placeholder="璁板綍鏈�缁堝鐞嗙粨鏋滐紝濡傛洿鎹€�侀��璐с�佸崌绾х瓑"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="澶勭悊鐘舵��" prop="status">
+ <el-select
+ v-model="form.status"
+ placeholder="璇烽�夋嫨澶勭悊鐘舵��"
+ >
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input
+ v-model="form.remark"
+ type="textarea"
+ :rows="2"
+ placeholder="鍙褰曞悗缁窡韪剰瑙併�佸鐩樼粨璁虹瓑"
+ />
+ </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="cancel">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup name="AfterSalesTraceability">
+import { ref, reactive, onMounted } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+
+// 鐘舵�佸瓧鍏�
+const statusOptions = ref([
+ { label: "寰呭鐞�", value: "0" },
+ { label: "澶勭悊涓�", value: "1" },
+ { label: "宸插畬鎴�", value: "2" },
+ { label: "宸插叧闂�", value: "3" },
+]);
+
+// 妯℃嫙鍞悗璐ㄩ噺鏁版嵁
+const afterSalesList = ref([
+ {
+ id: 1,
+ contractNo: "SC-2024-001",
+ productCode: "P-10001",
+ productModel: "XG-500A",
+ customerName: "鍗庡崡鐢靛瓙绉戞妧鏈夐檺鍏徃",
+ contact: "寮犲伐 / 13800000001",
+ feedbackTime: "2024-12-01 10:23:00",
+ problemDesc: "浣跨敤涓変釜鏈堝悗鍑虹幇闂存瓏鎬ф帀鐢碉紝褰卞搷浜х嚎绋冲畾杩愯銆�",
+ repairInfo: "瀹夋帓宸ョ▼甯堜笂闂ㄦ淇紝鏇存崲鐢垫簮妯″潡骞跺姞鍥烘帴绾跨瀛愩��",
+ result: "鏇存崲鐢垫簮鎬绘垚锛屾仮澶嶆甯镐娇鐢紝寤鸿瀹㈡埛澧炲姞UPS淇濇姢銆�",
+ status: "2",
+ remark: "鍒楀叆閲嶇偣璺熻釜瀹㈡埛锛屽悗缁瀵熶竴涓搴︺��",
+ },
+ {
+ id: 2,
+ contractNo: "SC-2024-015",
+ productCode: "P-10045",
+ productModel: "XG-500B",
+ customerName: "鍗庝笢绮惧瘑鍒堕�犳湁闄愬叕鍙�",
+ contact: "鏉庡伐 / 13800000002",
+ feedbackTime: "2024-12-05 15:40:00",
+ problemDesc: "閮ㄥ垎鎵规鍑虹幇澶栧３鍒姳锛屽鎴锋姇璇夊瑙傝川閲忎笉杈炬爣銆�",
+ repairInfo: "涓庣敓浜х幇鍦烘牳鏌ワ紝纭鏉ユ枡鎼繍鍙婂寘瑁呯幆鑺傚瓨鍦ㄧ纰伴闄┿��",
+ result: "瀵归棶棰樻壒娆￠噸鏂拌繑宸ワ紝琛ュ彂鑹搧锛屽苟浼樺寲鍖呰闃叉姢鏂规銆�",
+ status: "1",
+ remark: "闇�璺熻釜鍚庣画鎵规鎶曡瘔鐜囧彉鍖栥��",
+ },
+ {
+ id: 3,
+ contractNo: "SC-2024-032",
+ productCode: "P-10110",
+ productModel: "XG-600C",
+ customerName: "瑗垮崡鏂拌兘婧愮鎶�鑲′唤",
+ contact: "鐜嬪伐 / 13800000003",
+ feedbackTime: "2024-11-28 09:15:00",
+ problemDesc: "鐜板満璋冭瘯鏃跺彂鐜版帴鍙ｄ笉鍏煎锛岄渶瑕侀�傞厤瀹㈡埛鏃х増绯荤粺銆�",
+ repairInfo: "杩滅▼鎶�鏈敮鎸�+鐜板満宸ョ▼甯堣仈鍚堟帓鏌ワ紝鎻愪緵杩囨浮閫傞厤鏂规銆�",
+ result: "閫氳繃鏇存崲鎺ユ彃浠跺苟鍗囩骇鍥轰欢鐗堟湰瑙ｅ喅銆�",
+ status: "0",
+ remark: "寤鸿涓嬫鍚堝悓鍓嶇疆娌熼�氭帴鍙ｈ鏍笺��",
+ },
+]);
+
+const open = ref(false);
+const loading = ref(false);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(3);
+const title = ref("鏂板鍞悗璐ㄩ噺璁板綍");
+
+const data = reactive({
+ form: {},
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ productModel: null,
+ customerName: null,
+ feedbackRange: [],
+ status: null,
+ },
+ rules: {
+ contractNo: [
+ { required: true, message: "閿�鍞悎鍚屽彿涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ productCode: [
+ { required: true, message: "浜у搧缂栧彿涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ productModel: [
+ { required: true, message: "浜у搧鍨嬪彿涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ customerName: [
+ { required: true, message: "瀹㈡埛鍚嶇О涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ contact: [
+ { required: true, message: "鑱旂郴鏂瑰紡涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ feedbackTime: [
+ { required: true, message: "鍙嶉鏃堕棿涓嶈兘涓虹┖", trigger: "change" },
+ ],
+ problemDesc: [
+ { required: true, message: "瀹㈡埛鍙嶉闂涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ status: [
+ { required: true, message: "澶勭悊鐘舵�佷笉鑳戒负绌�", trigger: "change" },
+ ],
+ },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+// 鏌ヨ鍒楄〃锛堜粎鍓嶇绛涢�夛紝涓嶈皟鎺ュ彛锛�
+function getList() {
+ loading.value = true;
+ const list = afterSalesList.value.filter((item) => {
+ if (
+ queryParams.value.productModel &&
+ !item.productModel
+ ?.toLowerCase()
+ .includes(queryParams.value.productModel.toLowerCase())
+ ) {
+ return false;
+ }
+ if (
+ queryParams.value.customerName &&
+ !item.customerName
+ ?.toLowerCase()
+ .includes(queryParams.value.customerName.toLowerCase())
+ ) {
+ return false;
+ }
+ if (queryParams.value.status && item.status !== queryParams.value.status) {
+ return false;
+ }
+ if (
+ Array.isArray(queryParams.value.feedbackRange) &&
+ queryParams.value.feedbackRange.length === 2
+ ) {
+ const [start, end] = queryParams.value.feedbackRange;
+ const dateStr = item.feedbackTime?.slice(0, 10);
+ if (dateStr < start || dateStr > end) {
+ return false;
+ }
+ }
+ return true;
+ });
+ total.value = list.length;
+ // 姝ゅ鏈仛鍒嗛〉锛屼粎妯℃嫙鍏ㄩ噺灞曠ず
+ afterSalesList.value = list;
+ loading.value = false;
+}
+
+// 鍙栨秷
+function cancel() {
+ open.value = false;
+ reset();
+}
+
+// 琛ㄥ崟閲嶇疆
+function reset() {
+ form.value = {
+ id: null,
+ contractNo: null,
+ productCode: null,
+ productModel: null,
+ customerName: null,
+ contact: null,
+ feedbackTime: null,
+ problemDesc: null,
+ repairInfo: null,
+ result: null,
+ status: "0",
+ remark: null,
+ };
+ proxy.resetForm("formRef");
+}
+
+// 鎼滅储
+function handleQuery() {
+ queryParams.value.pageNum = 1;
+ getList();
+}
+
+// 閲嶇疆
+function resetQuery() {
+ proxy.resetForm("queryForm");
+ queryParams.value.feedbackRange = [];
+ handleQuery();
+}
+
+// 澶氶��
+function handleSelectionChange(selection) {
+ ids.value = selection.map((item) => item.id);
+ single.value = selection.length !== 1;
+ multiple.value = !selection.length;
+}
+
+// 鏂板
+function handleAdd() {
+ reset();
+ open.value = true;
+ title.value = "鏂板鍞悗璐ㄩ噺璁板綍";
+}
+
+// 淇敼
+function handleUpdate(row) {
+ reset();
+ const current = row || afterSalesList.value.find((item) => item.id === ids.value[0]);
+ if (current) {
+ form.value = { ...current };
+ open.value = true;
+ title.value = "淇敼鍞悗璐ㄩ噺璁板綍";
+ }
+}
+
+// 鎻愪氦
+function submitForm() {
+ proxy.$refs["formRef"].validate((valid) => {
+ if (valid) {
+ if (form.value.id != null) {
+ // 淇敼锛氭浛鎹㈡湰鍦版ā鎷熸暟鎹�
+ const index = afterSalesList.value.findIndex(
+ (item) => item.id === form.value.id
+ );
+ if (index !== -1) {
+ afterSalesList.value.splice(index, 1, { ...form.value });
+ }
+ proxy.$modal.msgSuccess("淇敼鎴愬姛");
+ } else {
+ // 鏂板锛氭彃鍏ユ湰鍦版ā鎷熸暟鎹�
+ const newId =
+ afterSalesList.value.length > 0
+ ? Math.max(...afterSalesList.value.map((i) => i.id)) + 1
+ : 1;
+ afterSalesList.value.push({ ...form.value, id: newId });
+ proxy.$modal.msgSuccess("鏂板鎴愬姛");
+ }
+ open.value = false;
+ getList();
+ }
+ });
+}
+
+// 鍒犻櫎
+function handleDelete(row) {
+ const deleteIds = row?.id ? [row.id] : ids.value;
+ if (!deleteIds || deleteIds.length === 0) {
+ proxy.$modal.msgWarning("璇峰厛閫夋嫨瑕佸垹闄ょ殑璁板綍");
+ return;
+ }
+ ElMessageBox.confirm(
+ '鏄惁纭鍒犻櫎閫変腑鐨勫敭鍚庤川閲忚褰曪紵',
+ "璀﹀憡",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ )
+ .then(() => {
+ // 鍓嶇鍒犻櫎鏈湴妯℃嫙鏁版嵁
+ afterSalesList.value = afterSalesList.value.filter(
+ (item) => !deleteIds.includes(item.id)
+ );
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ })
+ .catch(() => {});
+}
+
+// 瀵煎嚭
+function handleExport() {
+ proxy.$modal.msgSuccess("瀵煎嚭鍔熻兘涓烘紨绀哄姛鑳斤紝褰撳墠鏈鎺ュ疄闄呭鍑烘帴鍙�");
+}
+
+onMounted(() => {
+ getList();
+});
+</script>
+
+<style scoped>
+.mb8 {
+ margin-bottom: 8px;
+}
+.dialog-footer {
+ text-align: right;
+}
+</style>
+
--
Gitblit v1.9.3