项目页面优化

WXL

2025-12-29 2431480f5859ef40dfdf0eb19e1ba6ddebbd9ef2

 src/views/business/transfer/index.vue

@@ -2,7 +2,12 @@
  <div class="app-container">
    <!-- 搜索筛选区域 -->
    <el-card class="filter-card">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="转运单号" prop="transportNo">
          <el-input
            v-model="queryParams.transportNo"
@@ -31,12 +36,17 @@
          />
        </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="pending"/>
            <el-option label="转运中" value="transporting"/>
            <el-option label="已完成" value="completed"/>
            <el-option label="已取消" value="cancelled"/>
          <el-select
            v-model="queryParams.status"
            placeholder="转运状态"
            clearable
            style="width: 200px"
          >
            <el-option label="全部" value="" />
            <el-option label="待出发" value="pending" />
            <el-option label="转运中" value="transporting" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
@@ -51,7 +61,9 @@
          ></el-date-picker>
        </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>
@@ -97,71 +109,157 @@
    <!-- 操作按钮区域 -->
    <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-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-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" @click="handleExport">导出</el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="transportList" @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="id" width="140"/>
      <el-table-column label="案例编号" align="center" prop="caseNo" width="140"/>
    <el-table
      v-loading="loading"
      :data="transportList"
      @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="id" width="140" />
      <el-table-column
        label="案例编号"
        align="center"
        prop="caseNo"
        width="140"
      />
      <el-table-column label="捐献者信息" align="center" width="180">
        <template slot-scope="scope">
          <div class="donor-info">
            <div class="donor-name">{{ scope.row.donorName }}</div>
            <div class="donor-details">{{ scope.row.gender }} | {{ scope.row.age }}岁</div>
            <div class="donor-details">
              {{ scope.row.gender }} | {{ scope.row.age }}岁
            </div>
          </div>
        </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="transportTime" width="160"/>
      <el-table-column label="负责协调员" align="center" prop="coordinator" width="100"/>
      <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="transportTime"
        width="160"
      />
      <el-table-column
        label="负责协调员"
        align="center"
        prop="coordinator"
        width="100"
      />
      <el-table-column
        label="转运状态"
        align="center"
        prop="status"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">
            {{ scope.row.statusText }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="160"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="220"
      >
        <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-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-video-play"
            @click="handleStartTransport(scope.row)"
            v-if="scope.row.status === 'pending'"
          >开始转运</el-button>
            >开始转运</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="handleCompleteTransport(scope.row)"
            v-if="scope.row.status === 'transporting'"
          >完成转运</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"
@@ -176,9 +274,20 @@
      append-to-body
      :close-on-click-modal="false"
    >
      <transport-detail :transportData="currentTransport" @close="detailOpen = false"/>
      <transport-detail
        :transportData="currentTransport"
        @close="detailOpen = false"
      />
    </el-dialog>

    <!-- 新增：修改弹框 -->
    <transport-edit
      :edit-open="editOpen"
      :transport-data="currentTransport"
      :is-edit="isEditing"
      @update:edit-open="editOpen = $event"
      @close="handleEditClose"
      @save-success="handleSaveSuccess"
    />
    <!-- 操作确认弹框 -->
    <el-dialog
      :title="actionTitle"
@@ -198,12 +307,18 @@
</template>

<script>
import { listTransport, getTransport, delTransport, updateTransportStatus } from "@/api/system/business";
import TransportDetail from './transportDetail';
import {
  listTransport,
  getTransport,
  delTransport,
  updateTransportStatus
} from "@/api/system/business";
import TransportDetail from "./transportDetail";
import TransportEdit from "./TransportEdit";

export default {
  name: "TransportList",
  components: { TransportDetail },
  components: { TransportDetail, TransportEdit },
  data() {
    return {
      // 遮罩层
@@ -224,6 +339,9 @@
      detailOpen: false,
      // 操作确认弹框是否显示
      actionOpen: false,
      // 新增：修改弹框相关数据
      editOpen: false,
      isEditing: false,
      // 详情弹框标题
      detailTitle: "",
      // 操作确认标题
@@ -254,10 +372,10 @@
  filters: {
    statusFilter(status) {
      const statusMap = {
        'pending': 'warning',
        'transporting': 'primary',
        'completed': 'success',
        'cancelled': 'danger'
        pending: "warning",
        transporting: "primary",
        completed: "success",
        cancelled: "danger"
      };
      return statusMap[status];
    }
@@ -274,84 +392,85 @@
        // 测试数据
        this.transportList = [
          {
            id: 'T20241217001',
            caseNo: 'DON20241216001',
            donorName: '张三',
            gender: '男',
            id: "T20241217001",
            caseNo: "DON20241216001",
            donorName: "张三",
            gender: "男",
            age: 38,
            diagnosis: '脑外伤导致脑死亡，经抢救无效宣布脑死亡。家属同意器官捐献。',
            hospitalName: '青岛镜湖医院',
            transportTime: '2024-12-17 14:30:00',
            coordinator: '张医生',
            createTime: '2024-12-16 09:30:00',
            status: 'pending',
            statusText: '待出发',
            departureLocation: '青岛市立医院急诊科',
            destinationHospital: '青岛镜湖医院',
            emergencyDoctor: '王医生',
            nurse: '李护士',
            driver: '刘师傅',
            icuDoctor: '赵医生',
            diagnosis:
              "脑外伤导致脑死亡，经抢救无效宣布脑死亡。家属同意器官捐献。",
            hospitalName: "青岛镜湖医院",
            transportTime: "2024-12-17 14:30:00",
            coordinator: "张医生",
            createTime: "2024-12-16 09:30:00",
            status: "pending",
            statusText: "待出发",
            departureLocation: "青岛市立医院急诊科",
            destinationHospital: "青岛镜湖医院",
            emergencyDoctor: "王医生",
            nurse: "李护士",
            driver: "刘师傅",
            icuDoctor: "赵医生",
            contacts: [
              { role: '协调员电话', phone: '13800138000' },
              { role: '急诊医生电话', phone: '13800138001' },
              { role: '护士电话', phone: '13800138002' },
              { role: '司机电话', phone: '13800138003' },
              { role: 'ICU医生电话', phone: '13800138004' }
              { role: "协调员电话", phone: "13800138000" },
              { role: "急诊医生电话", phone: "13800138001" },
              { role: "护士电话", phone: "13800138002" },
              { role: "司机电话", phone: "13800138003" },
              { role: "ICU医生电话", phone: "13800138004" }
            ],
            remarks: '需要准备呼吸机等急救设备'
            remarks: "需要准备呼吸机等急救设备"
          },
          {
            id: 'T20241217002',
            caseNo: 'DON20241216002',
            donorName: '李四',
            gender: '女',
            id: "T20241217002",
            caseNo: "DON20241216002",
            donorName: "李四",
            gender: "女",
            age: 45,
            diagnosis: '脑梗死，脑干功能丧失',
            hospitalName: '青岛大学附属医院',
            transportTime: '2024-12-17 16:00:00',
            coordinator: '李医生',
            createTime: '2024-12-16 11:20:00',
            status: 'transporting',
            statusText: '转运中',
            departureLocation: '青岛大学附属医院ICU',
            destinationHospital: '青岛器官移植中心',
            currentLocation: '青岛市南区香港中路',
            estimatedTime: '30分钟'
            diagnosis: "脑梗死，脑干功能丧失",
            hospitalName: "青岛大学附属医院",
            transportTime: "2024-12-17 16:00:00",
            coordinator: "李医生",
            createTime: "2024-12-16 11:20:00",
            status: "transporting",
            statusText: "转运中",
            departureLocation: "青岛大学附属医院ICU",
            destinationHospital: "青岛器官移植中心",
            currentLocation: "青岛市南区香港中路",
            estimatedTime: "30分钟"
          },
          {
            id: 'T20241216003',
            caseNo: 'DON20241215001',
            donorName: '王五',
            gender: '男',
            id: "T20241216003",
            caseNo: "DON20241215001",
            donorName: "王五",
            gender: "男",
            age: 52,
            diagnosis: '心脏骤停，多器官功能衰竭',
            hospitalName: '青岛市立医院',
            transportTime: '2024-12-16 10:15:00',
            coordinator: '王医生',
            createTime: '2024-12-15 14:45:00',
            status: 'completed',
            statusText: '已完成',
            departureLocation: '青岛市立医院心内科',
            destinationHospital: '青岛器官移植中心',
            completedTime: '2024-12-16 12:30:00',
            distance: '15公里',
            duration: '2小时15分钟'
            diagnosis: "心脏骤停，多器官功能衰竭",
            hospitalName: "青岛市立医院",
            transportTime: "2024-12-16 10:15:00",
            coordinator: "王医生",
            createTime: "2024-12-15 14:45:00",
            status: "completed",
            statusText: "已完成",
            departureLocation: "青岛市立医院心内科",
            destinationHospital: "青岛器官移植中心",
            completedTime: "2024-12-16 12:30:00",
            distance: "15公里",
            duration: "2小时15分钟"
          },
          {
            id: 'T20241216004',
            caseNo: 'DON20241214001',
            donorName: '赵六',
            gender: '女',
            id: "T20241216004",
            caseNo: "DON20241214001",
            donorName: "赵六",
            gender: "女",
            age: 29,
            diagnosis: '急性肝衰竭',
            hospitalName: '青岛科大医院',
            transportTime: '2024-12-16 08:30:00',
            coordinator: '赵医生',
            createTime: '2024-12-14 16:20:00',
            status: 'cancelled',
            statusText: '已取消',
            cancelReason: '家属临时改变决定'
            diagnosis: "急性肝衰竭",
            hospitalName: "青岛科大医院",
            transportTime: "2024-12-16 08:30:00",
            coordinator: "赵医生",
            createTime: "2024-12-14 16:20:00",
            status: "cancelled",
            statusText: "已取消",
            cancelReason: "家属临时改变决定"
          }
        ];

@@ -365,8 +484,12 @@
    // 更新统计数据
    updateStats() {
      this.stats.totalTransports = this.transportList.length;
      this.stats.pendingTransports = this.transportList.filter(item => item.status === 'pending').length;
      this.stats.completedTransports = this.transportList.filter(item => item.status === 'completed').length;
      this.stats.pendingTransports = this.transportList.filter(
        item => item.status === "pending"
      ).length;
      this.stats.completedTransports = this.transportList.filter(
        item => item.status === "completed"
      ).length;
    },

    // 多选框选中数据
@@ -381,7 +504,30 @@
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.currentTransport = row || {};
      this.isEditing = true;
      this.editOpen = true;
    },

    /** 新建转运单 */
    handleAdd() {
      this.currentTransport = {};
      this.isEditing = false;
      this.editOpen = true;
    },

    /** 修改弹框关闭处理 */
    handleEditClose() {
      this.editOpen = false;
      this.currentTransport = {};
    },

    /** 保存成功处理 */
    handleSaveSuccess() {
      this.getList(); // 重新加载列表
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
@@ -399,29 +545,31 @@
    /** 开始转运操作 */
    handleStartTransport(row) {
      this.currentTransport = row;
      this.actionTitle = '开始转运';
      this.actionText = '开始';
      this.actionTitle = "开始转运";
      this.actionText = "开始";
      this.actionOpen = true;
    },

    /** 完成转运操作 */
    handleCompleteTransport(row) {
      this.currentTransport = row;
      this.actionTitle = '完成转运';
      this.actionText = '完成';
      this.actionTitle = "完成转运";
      this.actionText = "完成";
      this.actionOpen = true;
    },

    /** 确认操作 */
    confirmAction() {
      const index = this.transportList.findIndex(item => item.id === this.currentTransport.id);
      const index = this.transportList.findIndex(
        item => item.id === this.currentTransport.id
      );
      if (index !== -1) {
        if (this.actionText === '开始') {
          this.transportList[index].status = 'transporting';
          this.transportList[index].statusText = '转运中';
        } else if (this.actionText === '完成') {
          this.transportList[index].status = 'completed';
          this.transportList[index].statusText = '已完成';
        if (this.actionText === "开始") {
          this.transportList[index].status = "transporting";
          this.transportList[index].statusText = "转运中";
        } else if (this.actionText === "完成") {
          this.transportList[index].status = "completed";
          this.transportList[index].statusText = "已完成";
          this.transportList[index].completedTime = new Date().toLocaleString();
        }

@@ -433,34 +581,36 @@
      this.actionOpen = false;
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push('/transport/add');
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id || this.ids[0];
      this.$router.push('/transport/edit/' + id);
    },



    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除转运单编号为"' + ids + '"的数据项？').then(() => {
        // 模拟删除操作
        this.transportList = this.transportList.filter(item => !ids.includes(item.id));
        this.total = this.transportList.length;
        this.updateStats();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
      this.$modal
        .confirm('是否确认删除转运单编号为"' + ids + '"的数据项？')
        .then(() => {
          // 模拟删除操作
          this.transportList = this.transportList.filter(
            item => !ids.includes(item.id)
          );
          this.total = this.transportList.length;
          this.updateStats();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/transport/export', {
        ...this.queryParams
      }, `transport_${new Date().getTime()}.xlsx`)
      this.download(
        "system/transport/export",
        {
          ...this.queryParams
        },
        `transport_${new Date().getTime()}.xlsx`
      );
    }
  }
};
@@ -486,15 +636,15 @@
}

.stats-card.total {
  border-left: 4px solid #409EFF;
  border-left: 4px solid #409eff;
}

.stats-card.pending {
  border-left: 4px solid #E6A23C;
  border-left: 4px solid #e6a23c;
}

.stats-card.completed {
  border-left: 4px solid #67C23A;
  border-left: 4px solid #67c23a;
}

.stat-content {