From 3b7fcf5ea471f6cb388f86d0732b8ece47a3cefc Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期一, 29 十二月 2025 21:05:58 +0800
Subject: [PATCH] 页面更新
---
src/views/business/appear/index.vue | 399 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 269 insertions(+), 130 deletions(-)
diff --git a/src/views/business/appear/index.vue b/src/views/business/appear/index.vue
index 3e975a0..863cebe 100644
--- a/src/views/business/appear/index.vue
+++ b/src/views/business/appear/index.vue
@@ -2,23 +2,45 @@
<div class="app-container">
<!-- 鎼滅储绛涢�夊尯鍩� -->
<el-card class="filter-card">
- <el-form :model="queryParams" ref="queryForm" :inline="true" class="demo-form-inline">
+ <el-form
+ :model="queryParams"
+ ref="queryForm"
+ :inline="true"
+ class="demo-form-inline"
+ >
<el-form-item label="鎹愮尞缂栧彿" prop="donorNo">
- <el-input v-model="queryParams.donorNo" placeholder="璇疯緭鍏ユ崘鐚紪鍙�" clearable style="width: 200px"/>
+ <el-input
+ v-model="queryParams.donorNo"
+ placeholder="璇疯緭鍏ユ崘鐚紪鍙�"
+ clearable
+ style="width: 200px"
+ />
</el-form-item>
<el-form-item label="鎹愮尞鑰呭鍚�" prop="donorName">
- <el-input v-model="queryParams.donorName" placeholder="璇疯緭鍏ユ崘鐚�呭鍚�" clearable style="width: 200px"/>
+ <el-input
+ v-model="queryParams.donorName"
+ placeholder="璇疯緭鍏ユ崘鐚�呭鍚�"
+ clearable
+ style="width: 200px"
+ />
</el-form-item>
<el-form-item label="妗堜緥鐘舵��" prop="status">
- <el-select v-model="queryParams.status" placeholder="璇烽�夋嫨鐘舵��" clearable style="width: 200px">
- <el-option label="鍏ㄩ儴" value=""/>
- <el-option label="寰呭鎵�" value="0"/>
- <el-option label="宸查�氳繃" value="1"/>
- <el-option label="宸查┏鍥�" value="2"/>
+ <el-select
+ v-model="queryParams.status"
+ placeholder="璇烽�夋嫨鐘舵��"
+ clearable
+ style="width: 200px"
+ >
+ <el-option label="鍏ㄩ儴" value="" />
+ <el-option label="寰呭鎵�" value="0" />
+ <el-option label="宸查�氳繃" value="1" />
+ <el-option label="宸茬粓姝�" value="2" />
</el-select>
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="el-icon-search" @click="handleQuery">鎼滅储</el-button>
+ <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+ >鎼滅储</el-button
+ >
<el-button icon="el-icon-refresh" @click="resetQuery">閲嶇疆</el-button>
</el-form-item>
</el-form>
@@ -27,61 +49,106 @@
<!-- 鎿嶄綔鎸夐挳鍖哄煙 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
- <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">鏂板妗堜緥</el-button>
+ <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd"
+ >鏂板妗堜緥</el-button
+ >
</el-col>
+
<el-col :span="1.5">
- <el-button type="success" plain icon="el-icon-edit" :disabled="single" @click="handleUpdate">淇敼</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="danger" plain icon="el-icon-delete" :disabled="multiple" @click="handleDelete">鍒犻櫎</el-button>
+ <el-button
+ type="danger"
+ plain
+ icon="el-icon-delete"
+ :disabled="multiple"
+ @click="handleDelete"
+ >鍒犻櫎</el-button
+ >
</el-col>
</el-row>
<!-- 鏁版嵁琛ㄦ牸 -->
- <el-table v-loading="loading" :data="caseList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center"/>
- <el-table-column label="搴忓彿" type="index" width="60" align="center"/>
- <el-table-column label="鎹愮尞缂栧彿" align="center" prop="donorNo" width="140"/>
- <el-table-column label="鎹愮尞鑰呭鍚�" align="center" prop="donorName" width="100"/>
+ <el-table
+ v-loading="loading"
+ :data="caseList"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55" align="center" />
+ <!-- <el-table-column label="搴忓彿" type="index" width="60" align="center"/>
+ <el-table-column label="鎹愮尞缂栧彿" align="center" prop="donorNo" width="140"/> -->
+ <el-table-column
+ label="涓婃姤鏃堕棿"
+ align="center"
+ prop="reportTime"
+ width="160"
+ />
+
+ <el-table-column
+ label="鎹愮尞鑰呭鍚�"
+ align="center"
+ prop="donorName"
+ width="100"
+ />
<el-table-column label="鎬у埆" align="center" prop="gender" width="80">
<template slot-scope="scope">
- <dict-tag :options="genderOptions" :value="scope.row.gender"/>
+ <dict-tag :options="genderOptions" :value="scope.row.gender" />
</template>
</el-table-column>
- <el-table-column label="骞撮緞" align="center" prop="age" width="80"/>
+ <el-table-column label="骞撮緞" align="center" prop="age" width="80" />
<el-table-column label="琛�鍨�" align="center" prop="bloodType" width="80">
<template slot-scope="scope">
- <dict-tag :options="bloodTypeOptions" :value="scope.row.bloodType"/>
+ <dict-tag :options="bloodTypeOptions" :value="scope.row.bloodType" />
</template>
</el-table-column>
- <el-table-column label="鐤剧梾璇婃柇" align="center" prop="diagnosis" min-width="200" show-overflow-tooltip/>
- <el-table-column label="鍖婚櫌鍚嶇О" align="center" prop="hospitalName" width="150"/>
- <el-table-column label="妗堜緥鐘舵��" align="center" prop="status" width="100">
+ <el-table-column
+ label="鐤剧梾璇婃柇"
+ align="center"
+ prop="diagnosis"
+ min-width="200"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ label="涓婃姤鍖婚櫌"
+ align="center"
+ prop="hospitalName"
+ width="150"
+ />
+ <el-table-column label="鐘舵��" align="center" prop="status" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">
{{ scope.row.status | statusTextFilter }}
</el-tag>
</template>
</el-table-column>
- <el-table-column label="涓婃姤鏃堕棿" align="center" prop="reportTime" width="160"/>
- <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" width="200">
+ <el-table-column
+ label="鎿嶄綔"
+ align="center"
+ class-name="small-padding fixed-width"
+ width="200"
+ >
<template slot-scope="scope">
- <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">璇︽儏</el-button>
- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">淇敼</el-button>
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-view"
+ @click="handleDetail(scope.row)"
+ >璇︽儏</el-button
+ >
+
<el-button
size="mini"
type="text"
icon="el-icon-check"
@click="handleApprove(scope.row)"
v-if="scope.row.status === '0'"
- >瀹℃壒</el-button>
+ >瀹℃壒</el-button
+ >
</template>
</el-table-column>
</el-table>
<!-- 鍒嗛〉 -->
<pagination
- v-show="total>0"
+ v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@@ -96,46 +163,72 @@
append-to-body
:close-on-click-modal="false"
>
- <case-detail :caseData="currentCase" @close="detailOpen = false"/>
+ <case-detail :caseData="currentCase" @close="detailOpen = false" />
</el-dialog>
<!-- 瀹℃壒寮规 -->
+ <!-- 瀹℃壒寮规浼樺寲 -->
<el-dialog
title="妗堜緥瀹℃壒"
:visible.sync="approveOpen"
- width="500px"
+ width="80vw"
append-to-body
+ class="approve-dialog"
>
- <el-form ref="approveForm" :model="approveForm" :rules="approveRules" label-width="80px">
- <el-form-item label="瀹℃壒缁撴灉" prop="approveResult">
- <el-radio-group v-model="approveForm.approveResult">
- <el-radio label="1">閫氳繃</el-radio>
- <el-radio label="2">椹冲洖</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="瀹℃壒鎰忚" prop="approveOpinion">
- <el-input
- type="textarea"
- v-model="approveForm.approveOpinion"
- placeholder="璇疯緭鍏ュ鎵规剰瑙�"
- :rows="4"
- maxlength="500"
- />
- </el-form-item>
- </el-form>
+ <el-container style="height: 800px;">
+ <!-- 宸︿晶锛氭渚嬭鎯� -->
+ <el-aside
+ width="50vw"
+ style="background: #f8f9fa; padding: 20px; overflow-y: auto;"
+ >
+ <div class="approve-detail-preview">
+ <h3 style="margin-bottom: 15px; color: #303133;">妗堜緥璇︽儏棰勮</h3>
+ <case-detail :caseData="currentCase" :showtitle="false" />
+ </div>
+ </el-aside>
+
+ <!-- 鍙充晶锛氬鎵硅〃鍗� -->
+ <el-main style="padding: 20px;">
+ <el-form
+ ref="approveForm"
+ :model="approveForm"
+ :rules="approveRules"
+ label-width="100px"
+ >
+ <el-form-item label="瀹℃壒缁撴灉" prop="approveResult">
+ <el-radio-group v-model="approveForm.approveResult">
+ <el-radio label="1">閫氳繃</el-radio>
+ <el-radio label="2">缁堟</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="瀹℃壒鎰忚" prop="approveOpinion">
+ <el-input
+ type="textarea"
+ v-model="approveForm.approveOpinion"
+ placeholder="璇疯緭鍏ヨ缁嗙殑瀹℃壒鎰忚锛屽寘鎷�氳繃鎴栫粓姝㈢殑鐞嗙敱"
+ :rows="6"
+ maxlength="500"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-form>
+ </el-main>
+ </el-container>
+
<div slot="footer" class="dialog-footer">
- <el-button @click="approveOpen = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="submitApprove">纭� 瀹�</el-button>
+ <el-button @click="approveOpen = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitApprove">纭畾</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
- import CaseDetail from './caseDetail';
+import CaseDetail from "./caseDetail";
+import CaseDetailPreview from "./CaseDetailPreview";
export default {
name: "CaseList",
- components: { CaseDetail },
+ components: { CaseDetail, CaseDetailPreview },
data() {
return {
@@ -199,17 +292,17 @@
filters: {
statusFilter(status) {
const statusMap = {
- '0': 'warning', // 寰呭鎵�
- '1': 'success', // 宸查�氳繃
- '2': 'danger' // 宸查┏鍥�
+ "0": "warning", // 寰呭鎵�
+ "1": "success", // 宸查�氳繃
+ "2": "danger" // 宸茬粓姝�
};
return statusMap[status];
},
statusTextFilter(status) {
const statusMap = {
- '0': '寰呭鎵�',
- '1': '宸查�氳繃',
- '2': '宸查┏鍥�'
+ "0": "寰呭鎵�",
+ "1": "宸查�氳繃",
+ "2": "宸茬粓姝�"
};
return statusMap[status];
}
@@ -227,74 +320,76 @@
this.caseList = [
{
id: 1,
- donorNo: 'DON20241219001',
- donorName: '寮犱笁',
- gender: '0',
+ donorNo: "DON20241219001",
+ donorName: "寮犱笁",
+ gender: "2",
age: 38,
- bloodType: 'A',
- diagnosis: '鑴戝浼ゅ鑷磋剳姝讳骸锛岀粡鎶㈡晳鏃犳晥瀹ｅ竷鑴戞浜°�傚灞炲悓鎰忓櫒瀹樻崘鐚��',
- hospitalName: '闈掑矝澶у闄勫睘鍖婚櫌',
- status: '0',
- reportTime: '2024-12-19 09:30:00',
- reporterName: '鏉庡尰鐢�',
- idCardNo: '370203198510123456',
- nation: '姹夋棌',
- phone: '13800138000',
- address: '灞变笢鐪侀潚宀涘競甯傚崡鍖洪娓腑璺�100鍙�',
- inpatientNo: 'ZY20241219001',
- departmentName: '绁炵粡澶栫',
- doctorName: '鐜嬩富浠�',
- infectiousDisease: '鏃�',
- medicalRecord: '鎮ｈ�呭洜浜ら�氫簨鏁呭鑷翠弗閲嶈剳澶栦激锛岀粡鎶㈡晳鏃犳晥瀹ｅ竷鑴戞浜°��',
- hospitalLevel: '涓夌骇鐢茬瓑',
- contactPerson: '寮犳姢澹�',
- contactPhone: '13900139000',
- hospitalAddress: '灞变笢鐪侀潚宀涘競甯傚崡鍖烘睙鑻忚矾1鍙�'
+ bloodType: "A",
+ diagnosis:
+ "鑴戝浼ゅ鑷磋剳姝讳骸锛岀粡鎶㈡晳鏃犳晥瀹ｅ竷鑴戞浜°�傚灞炲悓鎰忓櫒瀹樻崘鐚��",
+ hospitalName: "闈掑矝澶у闄勫睘鍖婚櫌",
+ status: "0",
+ reportTime: "2024-12-19 09:30:00",
+ reporterName: "鏉庡尰鐢�",
+ idCardNo: "370203198510123456",
+ nation: "姹夋棌",
+ phone: "13800138000",
+ address: "灞变笢鐪侀潚宀涘競甯傚崡鍖洪娓腑璺�100鍙�",
+ inpatientNo: "ZY20241219001",
+ departmentName: "绁炵粡澶栫",
+ doctorName: "鐜嬩富浠�",
+ infectiousDisease: "鏃�",
+ medicalRecord:
+ "鎮ｈ�呭洜浜ら�氫簨鏁呭鑷翠弗閲嶈剳澶栦激锛岀粡鎶㈡晳鏃犳晥瀹ｅ竷鑴戞浜°��",
+ hospitalLevel: "涓夌骇鐢茬瓑",
+ contactPerson: "寮犳姢澹�",
+ contactPhone: "13900139000",
+ hospitalAddress: "灞变笢鐪侀潚宀涘競甯傚崡鍖烘睙鑻忚矾1鍙�"
},
{
id: 2,
- donorNo: 'DON20241218001',
- donorName: '鏉庡洓',
- gender: '1',
+ donorNo: "DON20241218001",
+ donorName: "鏉庡洓",
+ gender: "1",
age: 45,
- bloodType: 'O',
- diagnosis: '鎬ユ�у績鑲屾姝伙紝蹇冭剰鍔熻兘琛扮',
- hospitalName: '闈掑矝甯傜珛鍖婚櫌',
- status: '1',
- reportTime: '2024-12-18 14:20:00',
- approveTime: '2024-12-18 16:30:00',
- reporterName: '鍒樺尰鐢�',
- approverName: '瀹℃牳涓撳憳A',
- approveOpinion: '璧勬枡榻愬叏锛岀鍚堟崘鐚潯浠讹紝鍚屾剰閫氳繃銆�'
+ bloodType: "O",
+ diagnosis: "鎬ユ�у績鑲屾姝伙紝蹇冭剰鍔熻兘琛扮",
+ hospitalName: "闈掑矝甯傜珛鍖婚櫌",
+ status: "1",
+ reportTime: "2024-12-18 14:20:00",
+ approveTime: "2024-12-18 16:30:00",
+ reporterName: "鍒樺尰鐢�",
+ approverName: "瀹℃牳涓撳憳A",
+ approveOpinion: "璧勬枡榻愬叏锛岀鍚堟崘鐚潯浠讹紝鍚屾剰閫氳繃銆�"
},
{
id: 3,
- donorNo: 'DON20241217001',
- donorName: '鐜嬩簲',
- gender: '0',
+ donorNo: "DON20241217001",
+ donorName: "鐜嬩簲",
+ gender: "2",
age: 52,
- bloodType: 'B',
- diagnosis: '棰呭唴鍑鸿锛岃剳骞插姛鑳戒抚澶�',
- hospitalName: '闈掑矝鐪肩鍖婚櫌',
- status: '2',
- reportTime: '2024-12-17 10:15:00',
- approveTime: '2024-12-17 14:20:00',
- reporterName: '闄堝尰鐢�',
- approverName: '瀹℃牳涓撳憳B',
- approveOpinion: '瀹跺睘鍚屾剰涔︿笉瀹屾暣锛岄渶琛ュ厖鏉愭枡鍚庨噸鏂版彁浜ゃ��'
+ bloodType: "B",
+ diagnosis: "棰呭唴鍑鸿锛岃剳骞插姛鑳戒抚澶�",
+ hospitalName: "闈掑矝鐪肩鍖婚櫌",
+ status: "2",
+ reportTime: "2024-12-17 10:15:00",
+ approveTime: "2024-12-17 14:20:00",
+ reporterName: "闄堝尰鐢�",
+ approverName: "瀹℃牳涓撳憳B",
+ approveOpinion: "瀹跺睘鍚屾剰涔︿笉瀹屾暣锛岄渶琛ュ厖鏉愭枡鍚庨噸鏂版彁浜ゃ��"
},
{
id: 4,
- donorNo: 'DON20241216001',
- donorName: '璧靛叚',
- gender: '1',
+ donorNo: "DON20241216001",
+ donorName: "璧靛叚",
+ gender: "1",
age: 28,
- bloodType: 'AB',
- diagnosis: '閲嶅瀷棰呰剳鎹熶激锛屽鍣ㄥ畼鍔熻兘琛扮',
- hospitalName: '闈掑矝鍎跨鍖婚櫌',
- status: '0',
- reportTime: '2024-12-16 16:45:00',
- reporterName: '瀛欏尰鐢�'
+ bloodType: "AB",
+ diagnosis: "閲嶅瀷棰呰剳鎹熶激锛屽鍣ㄥ畼鍔熻兘琛扮",
+ hospitalName: "闈掑矝鍎跨鍖婚櫌",
+ status: "0",
+ reportTime: "2024-12-16 16:45:00",
+ reporterName: "瀛欏尰鐢�"
}
];
this.total = this.caseList.length;
@@ -323,7 +418,7 @@
this.detailTitle = `妗堜緥璇︽儏 - ${row.donorNo}`;
this.detailOpen = true;
},
- /** 瀹℃壒鎸夐挳鎿嶄綔 */
+ // 鍦ㄧ埗缁勪欢涓洿鏂板鎵规柟娉�
handleApprove(row) {
this.currentCase = row;
this.approveForm.caseId = row.id;
@@ -331,6 +426,7 @@
this.approveForm.approveOpinion = "";
this.approveOpen = true;
},
+
/** 鎻愪氦瀹℃壒 */
submitApprove() {
this.$refs["approveForm"].validate(valid => {
@@ -339,11 +435,13 @@
this.$modal.msgSuccess("瀹℃壒鎴愬姛");
this.approveOpen = false;
// 鏇存柊妗堜緥鐘舵��
- const caseItem = this.caseList.find(item => item.id === this.approveForm.caseId);
+ const caseItem = this.caseList.find(
+ item => item.id === this.approveForm.caseId
+ );
if (caseItem) {
caseItem.status = this.approveForm.approveResult;
caseItem.approveTime = new Date().toLocaleString();
- caseItem.approverName = '褰撳墠鐢ㄦ埛';
+ caseItem.approverName = "褰撳墠鐢ㄦ埛";
caseItem.approveOpinion = this.approveForm.approveOpinion;
}
}
@@ -351,22 +449,21 @@
},
/** 鏂板鎸夐挳鎿嶄綔 */
handleAdd() {
- this.$router.push('/case/add');
+ this.$router.push("/case/add");
},
- /** 淇敼鎸夐挳鎿嶄綔 */
- handleUpdate(row) {
- const id = row.id || this.ids[0];
- this.$router.push('/case/edit/' + id);
- },
+
/** 鍒犻櫎鎸夐挳鎿嶄綔 */
handleDelete(row) {
const ids = row.id || this.ids;
- this.$modal.confirm('鏄惁纭鍒犻櫎妗堜緥缂栧彿涓�"' + ids + '"鐨勬暟鎹」锛�').then(() => {
- // 妯℃嫙鍒犻櫎鎿嶄綔
- this.caseList = this.caseList.filter(item => !ids.includes(item.id));
- this.total = this.caseList.length;
- this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- }).catch(() => {});
+ this.$modal
+ .confirm('鏄惁纭鍒犻櫎浣忛櫌鍙蜂负"' + ids + '"鐨勬暟鎹」锛�')
+ .then(() => {
+ // 妯℃嫙鍒犻櫎鎿嶄綔
+ this.caseList = this.caseList.filter(item => !ids.includes(item.id));
+ this.total = this.caseList.length;
+ this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ })
+ .catch(() => {});
}
}
};
@@ -379,4 +476,46 @@
.mb8 {
margin-bottom: 8px;
}
+/* 璇︽儏椤甸潰鏍峰紡浼樺寲 */
+.case-detail-container {
+ max-height: 70vh;
+ overflow-y: auto;
+ padding: 0 10px;
+}
+
+.detail-section {
+ margin-bottom: 16px;
+}
+
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.section-title {
+ font-size: 16px;
+ font-weight: bold;
+ color: #303133;
+}
+
+/* 瀹℃壒寮规鏍峰紡 */
+.approve-dialog >>> .el-dialog__body {
+ padding: 0;
+}
+
+.approve-detail-preview {
+ height: 100%;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 1200px) {
+ .approve-dialog {
+ width: 95% !important;
+ }
+
+ .el-aside {
+ width: 50% !important;
+ }
+}
</style>
--
Gitblit v1.9.3