xx-doctor-web-html/src/views/user/operational-assistant/index.vue

<template>
  <div class="operational-assistant">
    <div class="app-bodyer-detail">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" size="medium">
            <el-form-item label="姓名">
              <el-input placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker placeholder="请选择开始时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker placeholder="请选择结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="tableData">
        <el-table
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          stripe
        >
          <el-table-column label="今日新增潜在患者">
            <el-table-column width="90" label="状态" prop=""></el-table-column>
            <el-table-column width="90" label="姓名" prop=""></el-table-column>
            <el-table-column width="90" label="年龄" prop=""></el-table-column>
            <el-table-column width="90" label="性别" prop=""></el-table-column>
            <el-table-column label="手机1" prop=""></el-table-column>
            <el-table-column
              label="最后就诊时间"
              prop=""
              width="120"
            ></el-table-column>
            <el-table-column
              label="标签发现时间"
              prop=""
              width="120"
            ></el-table-column>
            <el-table-column label="推理依据" prop=""></el-table-column>
            <el-table-column label="查看病例" prop=""></el-table-column>
            <el-table-column label="其他标签" prop="tag" width="170">
              <template slot-scope="scope">
                <el-select v-model="scope.row.tag" @change="handleTagSelect(scope.row, scope.$index)">
                  <el-option
                    v-for="item in otherTags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template slot-scope="scope">
                <el-button type="text">加入会诊</el-button>
                <el-button type="text" @click="handleAddManagement(scope.row)">加入管理</el-button>
                <el-button type="text">排除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <!-- <el-table :data="FollowTableData" style="width: 100%; margin-top: 40px">
          <el-table-column label="今日待随访患者">
            <el-table-column width="90" label="状态" prop="a"></el-table-column>
            <el-table-column
              width="90"
              label="随访类型"
              prop="b"
            ></el-table-column>
            <el-table-column width="90" label="姓名" prop="c"></el-table-column>
            <el-table-column width="90" label="年龄" prop="d"></el-table-column>
            <el-table-column width="90" label="性别" prop=""></el-table-column>
            <el-table-column label="手机1" prop="e"></el-table-column>
            <el-table-column label="其他标签" prop="g"></el-table-column>
            <el-table-column label="目标科室" prop="f"></el-table-column>
            <el-table-column label="就诊计划" prop=""></el-table-column>
            <el-table-column label="随访概述" prop="i"></el-table-column>
            <el-table-column label="下次随访时间" prop="j"></el-table-column>
          </el-table-column>
        </el-table> -->
        <el-table
          ref="treeTable"
          :data="treeTableData"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          style="width: 100%; margin-top: 40px;"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <!-- 类型列 -->
          <el-table-column
            label="随访类型"
            prop="label"
            width="180"
            class="flex-column"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.children" class="type-node" style="display: flex;">
                {{ scope.row.label }}
                <el-tag size="mini" type="info" style="margin-left: 4px;">{{ scope.row.children.length }}</el-tag>
              </div>
            </template>
          </el-table-column>

          <!-- 基础信息列 -->
          <el-table-column label="姓名" prop="name" width="100"></el-table-column>
          <el-table-column label="年龄" prop="age" width="80"></el-table-column>
          <el-table-column label="性别" prop="gender" width="80"></el-table-column>
          <el-table-column label="手机1" prop="phone" width="120"></el-table-column>
          <el-table-column label="其他标签" prop="tags" width="120"></el-table-column>
          <el-table-column label="目标科室" prop="department"></el-table-column>
          <el-table-column label="就诊计划" prop="plan"></el-table-column>
          <el-table-column label="随访结论" prop="" width="140">
            <template slot-scope="scope" v-if="!scope.row.children">
              <el-select
                v-model="scope.row.conclusion"
                @change="handleSelect(scope.row, scope.$index)"
              >
                <el-option
                  v-for="item in selectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="随访概述" prop="" width="200">
            <template slot-scope="scope" v-if="!scope.row.children">
              <el-input
                v-model="scope.row.i"
                type="textarea"
                :rows="3"
                placeholder="请输入随访概述"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="下次随访时间" prop="" width="200" fixed="right">
            <template slot-scope="scope" v-if="!scope.row.children">
              <!-- {{ scope.row }} -->
                <el-date-picker v-if="['2', '3'].includes(scope.row.conclusion)" v-model="scope.row.nextTime"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="" width="80" fixed="right">
            <template slot-scope="scope" v-if="!scope.row.children">
              <!-- {{ scope.row }} -->
              <!-- <el-button type="text" :disabled="!['2', '3'].includes(scope.row.conclusion)">发送</el-button> -->
              <el-button type="text" :disabled="scope.row.conclusion !== '1'">发送</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [
        {
          tag: ''
        }
      ],
      FollowTableData: [
        {
          a: "测试状态",
          b: "测试类型",
          c: "测试姓名",
          d: "3",
          e: "18500516707",
          f: "测试科室",
          g: "测试标签",
          h: "考虑中",
          i: "测试情况",
          j: "2025-04-01",
        },
      ],
      rowData: [
        { type: '出院后随访', name: '张三', age: 35 },
        { type: '门诊随访', name: '李四', age: 28 }
      ],
      rawData: [
        {
          id: 1,
          followType: '出院后随访',
          name: '张三',
          age: 35,
          gender: '男',
          phone: '13800001111',
          status: 1,
          conclusion: '1', // 随访结论
          department: '心内科',
          plan: '术后复查',
          nextTime: '',
          tags: '市内领导'
        },
        {
          id: 111,
          followType: '出院后随访',
          name: '张一',
          age: 35,
          gender: '男',
          phone: '13800001111',
          status: 1,
          conclusion: '2', // 随访结论
          department: '心内科',
          plan: '术后复查',
          nextTime: '',
          tags: '离休干部'
        },
        {
          id: 111222,
          followType: '出院后随访',
          name: '张二',
          age: 35,
          gender: '男',
          phone: '13800001111',
          status: 1,
          conclusion: '3', // 随访结论
          department: '心内科',
          plan: '术后复查',
          nextTime: '',
          tags: '忠诚客户'
        },
        {
          id: 2,
          followType: '门诊随访',
          name: '李四',
          age: 28,
          gender: '女',
          phone: '13900002222',
          status: 2,
          conclusion: '4', // 随访结论
          department: '呼吸科',
          plan: 'CT复查',
          nextTime: '',
          tags: '本院职工及家属'
        },
        {
          id: 3,
          followType: '多标签患者',
          name: '李哥',
          age: 28,
          gender: '女',
          phone: '13900002222',
          status: 2,
          conclusion: '5', // 随访结论
          department: '呼吸科',
          plan: 'CT复查',
          nextTime: '',
          tags: '高净值客户'
        }
      ],
      followTypes: [
        '出院后随访',
        '门诊随访',
        '潜在风险随访',
        '流失患者随访',
        '会诊随访',
        '多标签患者'
      ],
      otherTags: [
        {
          label: '本院职工及家属',
          value: 1
        },
        {
          label: '市内领导',
          value: 2
        },
        {
          label: '离休干部',
          value: 3
        },
        {
          label: '纠纷患者',
          value: 4
        },
        {
          label: '忠诚客户',
          value: 5
        },
        {
          label: '高净值客户',
          value: 6
        }
      ],
      selectData: [
        {
          label: "计划就诊（时间）",
          value: '1',
        },
        {
          label: "考虑中",
          value: '2',
        },
        {
          label: "外院就诊",
          value: '3',
        },
        {
          label: "排除",
          value: '4',
        },
        {
          label: "失访",
          value: '5'
        }
      ]
    }
  },
  computed: {
    treeTableData() {
      return this.followTypes.map(type => ({
        id: type,
        label: type,
        children: this.rawData
          .filter(item => item.followType === type)
          .map(item => ({
            ...item,
            id: item.id.toString()
          }))
      }))
    }
  },
  methods: {
    handleSelect(row, index) {
      console.log(row, index, "index")
    },
    // 选择标签
    handleTagSelect(row, index) {
      console.log(row, index, "index")
    },
    // 加入管理
    handleAddManagement(row) {
      this.$router.push({ path: 'operational-manage' })
      console.log(row, "加入管理")
    },
  }
}
</script>

<style lang="scss" scoped>
.operational-assistant {
  padding: 20px;
  margin: 0 14px;
  border-radius: 20px;
  background-color: #ffffff;
  min-height: calc(100vh - 80px);
}

::v-deep .el-table thead.is-group th.el-table__cell {
  background-color: #ffffff;
  border-left: none;
  border-right: none;
}

::v-deep td {
  border: none !important;
}

.el-table {
  border: none;
}

::v-deep .el-table th.el-table__cell {
  border-right: none !important;
}

::v-deep tr {
  border: none !important;
}

::v-deep .cell {
  display: flex !important;
  // align-items: center !important;
}
</style>