From 6f2fbd431fd71a71cfdb5de543959c76f0c47c8f Mon Sep 17 00:00:00 2001 From: spring <2396852758@qq.com> Date: 星期五, 15 八月 2025 11:49:05 +0800 Subject: [PATCH] 企业知识库 --- src/views/collaborativeApproval/knowledgeBase/index.vue | 848 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 848 insertions(+), 0 deletions(-) diff --git a/src/views/collaborativeApproval/knowledgeBase/index.vue b/src/views/collaborativeApproval/knowledgeBase/index.vue new file mode 100644 index 0000000..f944859 --- /dev/null +++ b/src/views/collaborativeApproval/knowledgeBase/index.vue @@ -0,0 +1,848 @@ +<template> + <div class="app-container"> + <div class="search_form"> + <div> + <span class="search_title">鐭ヨ瘑鏍囬锛�</span> + <el-input + v-model="searchForm.title" + style="width: 240px" + placeholder="璇疯緭鍏ョ煡璇嗘爣棰樻悳绱�" + @change="handleQuery" + clearable + :prefix-icon="Search" + /> + <span class="search_title ml10">鐭ヨ瘑绫诲瀷锛�</span> + <el-select v-model="searchForm.type" clearable @change="handleQuery" style="width: 240px"> + <el-option label="鍚堝悓鐗规壒" :value="'contract'" /> + <el-option label="瀹℃壒妗堜緥" :value="'approval'" /> + <el-option label="瑙e喅鏂规" :value="'solution'" /> + <el-option label="缁忛獙鎬荤粨" :value="'experience'" /> + <el-option label="鎿嶄綔鎸囧崡" :value="'guide'" /> + </el-select> + <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" + @selection-change="handleSelectionChange" + :tableLoading="tableLoading" + @pagination="pagination" + :total="page.total" + ></PIMTable> + </div> + + <!-- 鏂板/缂栬緫鐭ヨ瘑寮圭獥 --> + <el-dialog + v-model="dialogVisible" + :title="dialogTitle" + width="800px" + :close-on-click-modal="false" + > + <el-form ref="formRef" :model="form" :rules="rules" label-width="120px"> + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="鐭ヨ瘑鏍囬" prop="title"> + <el-input v-model="form.title" placeholder="璇疯緭鍏ョ煡璇嗘爣棰�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鐭ヨ瘑绫诲瀷" prop="type"> + <el-select v-model="form.type" placeholder="璇烽�夋嫨鐭ヨ瘑绫诲瀷" style="width: 100%"> + <el-option label="鍚堝悓鐗规壒" value="contract" /> + <el-option label="瀹℃壒妗堜緥" value="approval" /> + <el-option label="瑙e喅鏂规" value="solution" /> + <el-option label="缁忛獙鎬荤粨" value="experience" /> + <el-option label="鎿嶄綔鎸囧崡" value="guide" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="閫傜敤鍦烘櫙" prop="scenario"> + <el-input v-model="form.scenario" placeholder="璇疯緭鍏ラ�傜敤鍦烘櫙" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="瑙e喅鏁堢巼" prop="efficiency"> + <el-select v-model="form.efficiency" placeholder="璇烽�夋嫨瑙e喅鏁堢巼" style="width: 100%"> + <el-option label="鏄捐憲鎻愬崌" value="high" /> + <el-option label="涓�鑸彁鍗�" value="medium" /> + <el-option label="杞诲井鎻愬崌" value="low" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-form-item label="闂鎻忚堪" prop="problem"> + <el-input + v-model="form.problem" + type="textarea" + :rows="3" + placeholder="璇锋弿杩伴亣鍒扮殑闂" + /> + </el-form-item> + <el-form-item label="瑙e喅鏂规" prop="solution"> + <el-input + v-model="form.solution" + type="textarea" + :rows="4" + placeholder="璇疯缁嗘弿杩拌В鍐虫柟妗�" + /> + </el-form-item> + <el-form-item label="鍏抽敭瑕佺偣" prop="keyPoints"> + <el-input + v-model="form.keyPoints" + type="textarea" + :rows="3" + placeholder="璇疯緭鍏ュ叧閿鐐癸紝鐢ㄩ�楀彿鍒嗛殧" + /> + </el-form-item> + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="鍒涘缓浜�" prop="creator"> + <el-input v-model="form.creator" placeholder="璇疯緭鍏ュ垱寤轰汉" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="浣跨敤娆℃暟" prop="usageCount"> + <el-input-number v-model="form.usageCount" :min="0" style="width: 100%" /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="dialogVisible = false">鍙栨秷</el-button> + <el-button type="primary" @click="submitForm">纭畾</el-button> + </span> + </template> + </el-dialog> + + <!-- 鏌ョ湅鐭ヨ瘑璇︽儏寮圭獥 --> + <el-dialog + v-model="viewDialogVisible" + title="鐭ヨ瘑璇︽儏" + width="900px" + :close-on-click-modal="false" + > + <div class="knowledge-detail"> + <el-descriptions :column="2" border> + <el-descriptions-item label="鐭ヨ瘑鏍囬" :span="2"> + <span class="detail-title">{{ currentKnowledge.title }}</span> + </el-descriptions-item> + <el-descriptions-item label="鐭ヨ瘑绫诲瀷"> + <el-tag :type="getTypeTagType(currentKnowledge.type)"> + {{ getTypeLabel(currentKnowledge.type) }} + </el-tag> + </el-descriptions-item> + <el-descriptions-item label="閫傜敤鍦烘櫙"> + {{ currentKnowledge.scenario }} + </el-descriptions-item> + <el-descriptions-item label="瑙e喅鏁堢巼"> + <el-tag :type="getEfficiencyTagType(currentKnowledge.efficiency)"> + {{ getEfficiencyLabel(currentKnowledge.efficiency) }} + </el-tag> + </el-descriptions-item> + <el-descriptions-item label="浣跨敤娆℃暟"> + <el-tag type="info">{{ currentKnowledge.usageCount }} 娆�</el-tag> + </el-descriptions-item> + <el-descriptions-item label="鍒涘缓浜�"> + {{ currentKnowledge.creator }} + </el-descriptions-item> + <el-descriptions-item label="鍒涘缓鏃堕棿"> + {{ currentKnowledge.createTime }} + </el-descriptions-item> + </el-descriptions> + + <div class="detail-section"> + <h4>闂鎻忚堪</h4> + <div class="detail-content">{{ currentKnowledge.problem }}</div> + </div> + + <div class="detail-section"> + <h4>瑙e喅鏂规</h4> + <div class="detail-content">{{ currentKnowledge.solution }}</div> + </div> + + <div class="detail-section"> + <h4>鍏抽敭瑕佺偣</h4> + <div class="key-points"> + <el-tag + v-for="(point, index) in currentKnowledge.keyPoints.split(',')" + :key="index" + type="success" + style="margin-right: 8px; margin-bottom: 8px;" + > + {{ point.trim() }} + </el-tag> + </div> + </div> + + <div class="detail-section"> + <h4>浣跨敤缁熻</h4> + <div class="usage-stats"> + <el-row :gutter="20"> + <el-col :span="8"> + <div class="stat-item"> + <div class="stat-number">{{ currentKnowledge.usageCount }}</div> + <div class="stat-label">浣跨敤娆℃暟</div> + </div> + </el-col> + <el-col :span="8"> + <div class="stat-item"> + <div class="stat-number">{{ getEfficiencyScore(currentKnowledge.efficiency) }}%</div> + <div class="stat-label">鏁堢巼鎻愬崌</div> + </div> + </el-col> + <el-col :span="8"> + <div class="stat-item"> + <div class="stat-number">{{ getTimeSaved(currentKnowledge.efficiency) }}</div> + <div class="stat-label">骞冲潎鑺傜渷鏃堕棿</div> + </div> + </el-col> + </el-row> + </div> + </div> + </div> + + <template #footer> + <span class="dialog-footer"> + <el-button @click="viewDialogVisible = false">鍏抽棴</el-button> + <el-button type="primary" @click="copyKnowledge">澶嶅埗鐭ヨ瘑</el-button> + <el-button type="success" @click="markAsFavorite">鏀惰棌</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script setup> +import { Search } from "@element-plus/icons-vue"; +import { onMounted, ref, reactive, toRefs } from "vue"; +import { ElMessage, ElMessageBox } from "element-plus"; +import PIMTable from "@/components/PIMTable/PIMTable.vue"; + +// 琛ㄥ崟楠岃瘉瑙勫垯 +const rules = { + title: [ + { required: true, message: "璇疯緭鍏ョ煡璇嗘爣棰�", trigger: "blur" } + ], + type: [ + { required: true, message: "璇烽�夋嫨鐭ヨ瘑绫诲瀷", trigger: "change" } + ], + problem: [ + { required: true, message: "璇锋弿杩伴亣鍒扮殑闂", trigger: "blur" } + ], + solution: [ + { required: true, message: "璇疯缁嗘弿杩拌В鍐虫柟妗�", trigger: "blur" } + ] +}; + +// 鍝嶅簲寮忔暟鎹� +const data = reactive({ + searchForm: { + title: "", + type: "", + }, + tableLoading: false, + page: { + current: 1, + size: 100, + total: 0, + }, + tableData: [], + selectedIds: [], + form: { + title: "", + type: "", + scenario: "", + efficiency: "medium", + problem: "", + solution: "", + keyPoints: "", + creator: "", + usageCount: 0 + }, + dialogVisible: false, + dialogTitle: "", + dialogType: "add", + viewDialogVisible: false, + currentKnowledge: {} +}); + +const { + searchForm, + tableLoading, + page, + tableData, + selectedIds, + form, + dialogVisible, + dialogTitle, + dialogType, + viewDialogVisible, + currentKnowledge +} = toRefs(data); + +// 琛ㄥ崟寮曠敤 +const formRef = ref(); + +// 琛ㄦ牸鍒楅厤缃� +const tableColumn = ref([ + { + label: "鐭ヨ瘑鏍囬", + prop: "title", + showOverflowTooltip: true, + }, + { + label: "鐭ヨ瘑绫诲瀷", + prop: "type", + dataType: "tag", + formatData: (params) => { + const typeMap = { + contract: "鍚堝悓鐗规壒", + approval: "瀹℃壒妗堜緥", + solution: "瑙e喅鏂规", + experience: "缁忛獙鎬荤粨", + guide: "鎿嶄綔鎸囧崡" + }; + return typeMap[params] || params; + }, + formatType: (params) => { + const typeMap = { + contract: "success", + approval: "warning", + solution: "primary", + experience: "info", + guide: "danger" + }; + return typeMap[params] || "info"; + } + }, + { + label: "閫傜敤鍦烘櫙", + prop: "scenario", + width: 150, + showOverflowTooltip: true, + }, + { + label: "瑙e喅鏁堢巼", + prop: "efficiency", + dataType: "tag", + formatData: (params) => { + const efficiencyMap = { + high: "鏄捐憲鎻愬崌", + medium: "涓�鑸彁鍗�", + low: "杞诲井鎻愬崌" + }; + return efficiencyMap[params] || params; + }, + formatType: (params) => { + const typeMap = { + high: "success", + medium: "warning", + low: "info" + }; + return typeMap[params] || "info"; + } + }, + { + label: "浣跨敤娆℃暟", + prop: "usageCount", + width: 100, + align: "center" + }, + { + label: "鍒涘缓浜�", + prop: "creator", + width: 120, + }, + { + label: "鍒涘缓鏃堕棿", + prop: "createTime", + width: 180, + }, + { + dataType: "action", + label: "鎿嶄綔", + align: "center", + fixed: "right", + width: 200, + operation: [ + { + name: "缂栬緫", + type: "text", + clickFun: (row) => { + openForm("edit", row); + } + }, + { + name: "鏌ョ湅", + type: "text", + clickFun: (row) => { + viewKnowledge(row); + } + } + ] + } +]); + +// 妯℃嫙鏁版嵁 +let mockData = [ + { + id: "1", + title: "鐗规畩鍚堝悓瀹℃壒娴佺▼浼樺寲鏂规", + type: "contract", + scenario: "澶ч鍚堝悓蹇�熷鎵�", + efficiency: "high", + problem: "澶ч鍚堝悓瀹℃壒娴佺▼澶嶆潅锛屽鎵规椂闂撮暱锛屽奖鍝嶄笟鍔¤繘灞�", + solution: "寤虹珛缁胯壊閫氶亾锛屽绗﹀悎鏉′欢鐨勫悎鍚岄噰鐢ㄧ畝鍖栧鎵规祦绋嬶紝鐢遍儴闂ㄨ礋璐d汉鐩存帴瀹℃壒锛屽钩鍧囧鎵规椂闂翠粠3澶╃缉鐭嚦1澶�", + keyPoints: "缁胯壊閫氶亾鏉′欢,绠�鍖栨祦绋�,瀹℃壒鏉冮檺,鏃堕棿鎺у埗", + creator: "寮犵粡鐞�", + usageCount: 15, + createTime: "2024-01-15 10:30:00" + }, + { + id: "2", + title: "璺ㄩ儴闂ㄥ崗浣滃鎵圭粡楠屾�荤粨", + type: "experience", + scenario: "澶氶儴闂ㄥ崗浣滈」鐩�", + efficiency: "medium", + problem: "璺ㄩ儴闂ㄩ」鐩鎵规椂锛屽悇閮ㄩ棬鎰忚涓嶇粺涓�锛屽鎵硅繘搴︾紦鎱�", + solution: "寤虹珛椤圭洰鍗忚皟鏈哄埗锛屾寚瀹氶」鐩礋璐d汉锛屽畾鏈熷彫寮�鍗忚皟浼氳锛岀粺涓�鍚勬柟鎰忚鍚庡啀杩涜瀹℃壒", + keyPoints: "椤圭洰鍗忚皟,瀹氭湡浼氳,缁熶竴鎰忚,璐熻矗浜哄埗搴�", + creator: "鏉庝富绠�", + usageCount: 8, + createTime: "2024-01-14 15:20:00" + }, + { + id: "3", + title: "绱ф�ラ噰璐鎵规搷浣滄寚鍗�", + type: "guide", + scenario: "绱ф�ラ噰璐渶姹�", + efficiency: "high", + problem: "绱ф�ラ噰璐椂瀹℃壒娴佺▼澶嶆潅锛屾棤娉曟弧瓒崇揣鎬ラ渶姹�", + solution: "鍒跺畾绱ф�ラ噰璐鎵规爣鍑嗭紝鏄庣‘绱ф�ョ▼搴﹀垎绾э紝涓嶅悓绾у埆閲囩敤涓嶅悓瀹℃壒娴佺▼锛岀‘淇濈揣鎬ラ渶姹傚緱鍒板強鏃跺鐞�", + keyPoints: "绱ф�ュ垎绾�,鏍囧噯鍒跺畾,娴佺▼绠�鍖�,鍙婃椂澶勭悊", + creator: "鐜嬩笓鍛�", + usageCount: 12, + createTime: "2024-01-13 09:15:00" + } +]; + +// 鐭ヨ瘑鏍囬妯℃澘 +const titleTemplates = [ + "{type}瀹℃壒娴佺▼浼樺寲鏂规", + "{scenario}澶勭悊缁忛獙鎬荤粨", + "{type}鐗规畩鎯呭喌澶勭悊鎸囧崡", + "{scenario}蹇�熷鎵规柟妗�", + "{type}鏍囧噯鍖栨搷浣滄祦绋�", + "{scenario}闂瑙e喅鏂规", + "{type}鏈�浣冲疄璺垫�荤粨", + "{scenario}鏁堢巼鎻愬崌鏂规" +]; + +// 鐭ヨ瘑绫诲瀷閰嶇疆 +const knowledgeTypes = [ + { type: "contract", label: "鍚堝悓鐗规壒", efficiency: "high" }, + { type: "approval", label: "瀹℃壒妗堜緥", efficiency: "medium" }, + { type: "solution", label: "瑙e喅鏂规", efficiency: "high" }, + { type: "experience", label: "缁忛獙鎬荤粨", efficiency: "medium" }, + { type: "guide", label: "鎿嶄綔鎸囧崡", efficiency: "low" } +]; + +// 鍦烘櫙鍒楄〃 +const scenarios = ["澶ч鍚堝悓瀹℃壒", "璺ㄩ儴闂ㄥ崗浣�", "绱ф�ラ噰璐�", "鐗规畩鐢宠", "娴佺▼浼樺寲", "闂澶勭悊", "鏍囧噯鍖栧缓璁�", "鏁堢巼鎻愬崌"]; + +// 鑷姩鐢熸垚鏂版暟鎹� +const generateNewData = () => { + const newId = (mockData.length + 1).toString(); + const now = new Date(); + const randomType = knowledgeTypes[Math.floor(Math.random() * knowledgeTypes.length)]; + const randomScenario = scenarios[Math.floor(Math.random() * scenarios.length)]; + + // 鐢熸垚闅忔満鏍囬 + let title = titleTemplates[Math.floor(Math.random() * titleTemplates.length)]; + title = title + .replace('{type}', randomType.label) + .replace('{scenario}', randomScenario); + + const newKnowledge = { + id: newId, + title: title, + type: randomType.type, + scenario: randomScenario, + efficiency: randomType.efficiency, + problem: `鍦�${randomScenario}杩囩▼涓亣鍒扮殑闂鎻忚堪...`, + solution: `閽堝${randomScenario}鐨勮В鍐虫柟妗堝拰鎿嶄綔姝ラ...`, + keyPoints: "鍏抽敭瑕佺偣1,鍏抽敭瑕佺偣2,鍏抽敭瑕佺偣3,鍏抽敭瑕佺偣4", + creator: ["寮犵粡鐞�", "鏉庝富绠�", "鐜嬩笓鍛�", "鍒樻�荤洃"][Math.floor(Math.random() * 4)], + usageCount: Math.floor(Math.random() * 20) + 1, + createTime: now.toLocaleString() + }; + + // 娣诲姞鍒版暟鎹紑澶� + mockData.unshift(newKnowledge); + + // 淇濇寔鏁版嵁閲忓湪鍚堢悊鑼冨洿鍐咃紙鏈�澶氫繚鐣�30鏉★級 + if (mockData.length > 30) { + mockData = mockData.slice(0, 30); + } + + console.log(`[${new Date().toLocaleString()}] 鑷姩鐢熸垚鏂扮煡璇�: ${title}`); +}; + +// 鐢熷懡鍛ㄦ湡 +onMounted(() => { + getList(); + startAutoRefresh(); +}); + +// 寮�濮嬭嚜鍔ㄥ埛鏂� +const startAutoRefresh = () => { + setInterval(() => { + generateNewData(); + getList(); + }, 600000); // 10鍒嗛挓鍒锋柊涓�娆� (10 * 60 * 1000 = 600000ms) +}; + +// 鏌ヨ鏁版嵁 +const handleQuery = () => { + page.value.current = 1; + getList(); +}; + +const getList = () => { + tableLoading.value = true; + + setTimeout(() => { + let filteredData = [...mockData]; + + if (searchForm.value.title) { + filteredData = filteredData.filter(item => + item.title.toLowerCase().includes(searchForm.value.title.toLowerCase()) + ); + } + + if (searchForm.value.type) { + filteredData = filteredData.filter(item => item.type === searchForm.value.type); + } + + tableData.value = filteredData; + page.value.total = filteredData.length; + tableLoading.value = false; + }, 500); +}; + +// 鍒嗛〉澶勭悊 +const pagination = (obj) => { + page.value.current = obj.page; + page.value.size = obj.limit; + handleQuery(); +}; + +// 閫夋嫨鍙樺寲澶勭悊 +const handleSelectionChange = (selection) => { + selectedIds.value = selection.map(item => item.id); +}; + +// 鎵撳紑琛ㄥ崟 +const openForm = (type, row = null) => { + dialogType.value = type; + if (type === "add") { + dialogTitle.value = "鏂板鐭ヨ瘑"; + // 閲嶇疆琛ㄥ崟 + Object.assign(form.value, { + title: "", + type: "", + scenario: "", + efficiency: "medium", + problem: "", + solution: "", + keyPoints: "", + creator: "", + usageCount: 0 + }); + } else if (type === "edit" && row) { + dialogTitle.value = "缂栬緫鐭ヨ瘑"; + Object.assign(form.value, { + title: row.title, + type: row.type, + scenario: row.scenario, + efficiency: row.efficiency, + problem: row.problem, + solution: row.solution, + keyPoints: row.keyPoints, + creator: row.creator, + usageCount: row.usageCount + }); + } + dialogVisible.value = true; +}; + +// 鏌ョ湅鐭ヨ瘑璇︽儏 +const viewKnowledge = (row) => { + currentKnowledge.value = { ...row }; + viewDialogVisible.value = true; +}; + +// 鑾峰彇绫诲瀷鏍囩绫诲瀷 +const getTypeTagType = (type) => { + const typeMap = { + contract: "success", + approval: "warning", + solution: "primary", + experience: "info", + guide: "danger" + }; + return typeMap[type] || "info"; +}; + +// 鑾峰彇绫诲瀷鏍囩鏂囨湰 +const getTypeLabel = (type) => { + const typeMap = { + contract: "鍚堝悓鐗规壒", + approval: "瀹℃壒妗堜緥", + solution: "瑙e喅鏂规", + experience: "缁忛獙鎬荤粨", + guide: "鎿嶄綔鎸囧崡" + }; + return typeMap[type] || type; +}; + +// 鑾峰彇鏁堢巼鏍囩绫诲瀷 +const getEfficiencyTagType = (efficiency) => { + const typeMap = { + high: "success", + medium: "warning", + low: "info" + }; + return typeMap[efficiency] || "info"; +}; + +// 鑾峰彇鏁堢巼鏍囩鏂囨湰 +const getEfficiencyLabel = (efficiency) => { + const efficiencyMap = { + high: "鏄捐憲鎻愬崌", + medium: "涓�鑸彁鍗�", + low: "杞诲井鎻愬崌" + }; + return efficiencyMap[efficiency] || efficiency; +}; + +// 鑾峰彇鏁堢巼鎻愬崌鐧惧垎姣� +const getEfficiencyScore = (efficiency) => { + const scoreMap = { + high: 40, + medium: 25, + low: 15 + }; + return scoreMap[efficiency] || 0; +}; + +// 鑾峰彇骞冲潎鑺傜渷鏃堕棿 +const getTimeSaved = (efficiency) => { + const timeMap = { + high: "2-3澶�", + medium: "1-2澶�", + low: "0.5-1澶�" + }; + return timeMap[efficiency] || "鏈煡"; +}; + +// 澶嶅埗鐭ヨ瘑 +const copyKnowledge = () => { + const knowledgeText = ` +鐭ヨ瘑鏍囬锛�${currentKnowledge.value.title} +鐭ヨ瘑绫诲瀷锛�${getTypeLabel(currentKnowledge.value.type)} +閫傜敤鍦烘櫙锛�${currentKnowledge.value.scenario} +闂鎻忚堪锛�${currentKnowledge.value.problem} +瑙e喅鏂规锛�${currentKnowledge.value.solution} +鍏抽敭瑕佺偣锛�${currentKnowledge.value.keyPoints} +鍒涘缓浜猴細${currentKnowledge.value.creator} + `.trim(); + + // 澶嶅埗鍒板壀璐存澘 + navigator.clipboard.writeText(knowledgeText).then(() => { + ElMessage.success("鐭ヨ瘑鍐呭宸插鍒跺埌鍓创鏉�"); + }).catch(() => { + ElMessage.error("澶嶅埗澶辫触锛岃鎵嬪姩澶嶅埗"); + }); +}; + +// 鏀惰棌鐭ヨ瘑 +const markAsFavorite = () => { + // 澧炲姞浣跨敤娆℃暟 + const index = mockData.findIndex(item => item.id === currentKnowledge.value.id); + if (index !== -1) { + mockData[index].usageCount += 1; + currentKnowledge.value.usageCount += 1; + } + + ElMessage.success("宸叉敹钘忥紝浣跨敤娆℃暟+1"); +}; + +// 鎻愪氦鐭ヨ瘑琛ㄥ崟 +const submitForm = async () => { + try { + await formRef.value.validate(); + + if (dialogType.value === "add") { + // 鏂板鐭ヨ瘑 + const newKnowledge = { + id: (mockData.length + 1).toString(), + title: form.value.title, + type: form.value.type, + scenario: form.value.scenario, + efficiency: form.value.efficiency, + problem: form.value.problem, + solution: form.value.solution, + keyPoints: form.value.keyPoints, + creator: form.value.creator, + usageCount: form.value.usageCount, + createTime: new Date().toLocaleString() + }; + + mockData.unshift(newKnowledge); + ElMessage.success("鐭ヨ瘑鍒涘缓鎴愬姛"); + } else { + // 缂栬緫鐭ヨ瘑 + const index = mockData.findIndex(item => item.id === selectedIds.value[0]); + if (index !== -1) { + Object.assign(mockData[index], { + title: form.value.title, + type: form.value.type, + scenario: form.value.scenario, + efficiency: form.value.efficiency, + problem: form.value.problem, + solution: form.value.solution, + keyPoints: form.value.keyPoints, + creator: form.value.creator, + usageCount: form.value.usageCount + }); + ElMessage.success("鐭ヨ瘑鏇存柊鎴愬姛"); + } + } + + dialogVisible.value = false; + getList(); + } catch (error) { + console.error("琛ㄥ崟楠岃瘉澶辫触:", error); + } +}; + +// 鍒犻櫎鐭ヨ瘑 +const handleDelete = () => { + if (selectedIds.value.length === 0) { + ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鐭ヨ瘑"); + return; + } + + ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", { + confirmButtonText: "纭", + cancelButtonText: "鍙栨秷", + type: "warning", + }).then(() => { + // 浠巑ockData涓垹闄ら�変腑鐨勯」 + selectedIds.value.forEach(id => { + const index = mockData.findIndex(item => item.id === id); + if (index !== -1) { + mockData.splice(index, 1); + } + }); + + ElMessage.success("鍒犻櫎鎴愬姛"); + selectedIds.value = []; + getList(); + }).catch(() => { + // 鐢ㄦ埛鍙栨秷 + }); +}; +</script> + +<style scoped> +.auto-refresh-info { + margin-bottom: 15px; +} + +.auto-refresh-info .el-alert { + border-radius: 8px; +} + +.dialog-footer { + text-align: right; +} + +.knowledge-detail { + padding: 20px 0; +} + +.detail-title { + font-size: 18px; + font-weight: bold; + color: #303133; +} + +.detail-section { + margin-top: 24px; +} + +.detail-section h4 { + margin: 0 0 12px 0; + font-size: 16px; + font-weight: 600; + color: #303133; + border-left: 4px solid #409eff; + padding-left: 12px; +} + +.detail-content { + background: #f8f9fa; + padding: 16px; + border-radius: 6px; + line-height: 1.6; + color: #606266; + white-space: pre-wrap; +} + +.key-points { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.usage-stats { + margin-top: 16px; +} + +.stat-item { + text-align: center; + padding: 20px; + background: #f8f9fa; + border-radius: 8px; +} + +.stat-number { + font-size: 24px; + font-weight: bold; + color: #409eff; + margin-bottom: 8px; +} + +.stat-label { + font-size: 14px; + color: #909399; +} +</style> -- Gitblit v1.9.3