兽医PC端方案制定

chenhai-ui/src/api/vet/plan.js

@@ -42,3 +42,12 @@ export function delPlan(id) {
     method: 'delete'
   })
 }
+
+// 查看对应的列表
+export function listPlanByConsultationId(query) {
+  return request({
+    url: '/vet/plan/listByConsultationId',
+    method: 'get',
+    params: query
+  })
+}

chenhai-ui/src/views/vet/plan/index.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="方案编号" prop="planNo">
-        <el-input
-          v-model="queryParams.planNo"
-          placeholder="请输入方案编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="方案标题" prop="title">
         <el-input
           v-model="queryParams.title"
@@ -17,22 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="农牧户姓名" prop="farmerName">
-        <el-input
-          v-model="queryParams.farmerName"
-          placeholder="请输入农牧户姓名"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="联系电话" prop="farmerPhone">
-        <el-input
-          v-model="queryParams.farmerPhone"
-          placeholder="请输入联系电话"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="治疗方式" prop="treatmentMethod">
         <el-input
           v-model="queryParams.treatmentMethod"
@@ -41,14 +17,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="兽医ID" prop="userId">
-        <el-input
-          v-model="queryParams.userId"
-          placeholder="请输入兽医ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -103,66 +71,62 @@
 
     <el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键ID" align="center" prop="id" />
-      <el-table-column label="方案编号" align="center" prop="planNo" />
       <el-table-column label="方案标题" align="center" prop="title" />
       <el-table-column label="农牧户姓名" align="center" prop="farmerName" />
-      <el-table-column label="联系电话" align="center" prop="farmerPhone" />
       <el-table-column label="动物类型" align="center" prop="animalType" />
-      <el-table-column label="症状描述" align="center" prop="symptoms" />
-      <el-table-column label="诊断结果" align="center" prop="diagnosis" />
-      <el-table-column label="治疗方式" align="center" prop="treatmentMethod" />
-      <el-table-column label="治疗方案描述" align="center" prop="treatmentDesc" />
-      <el-table-column label="注意事项" align="center" prop="precautions" />
-      <el-table-column label="状态" align="center" prop="status" />
-      <el-table-column label="兽医ID" align="center" prop="userId" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="症状描述" align="center" prop="symptoms" :show-overflow-tooltip="true"/>
+<!--      <el-table-column label="诊断结果" align="center" prop="diagnosis" />-->
+      <el-table-column label="治疗方式" align="center" prop="treatmentMethod" :show-overflow-tooltip="true"/>
+<!--      <el-table-column label="治疗方案描述" align="center" prop="treatmentDesc" />-->
+<!--      <el-table-column label="注意事项" align="center" prop="precautions" />-->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="300">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            v-hasPermi="['vet:comments:list']"
+            class="info-btn view-btn"
+          >详情</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
+            style="color: #42B983"
             v-hasPermi="['vet:plan:edit']"
+            class="info-btn alter-btn"
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
+            style="color: #f56c6c"
             v-hasPermi="['vet:plan:remove']"
+            class="info-btn delete-btn"
           >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+
+    <div class="pagestyle">
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改治疗方案对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="方案编号" prop="planNo">
-          <el-input v-model="form.planNo" placeholder="请输入方案编号" />
-        </el-form-item>
         <el-form-item label="方案标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入方案标题" />
         </el-form-item>
-        <el-form-item label="农牧户姓名" prop="farmerName">
-          <el-input v-model="form.farmerName" placeholder="请输入农牧户姓名" />
-        </el-form-item>
-        <el-form-item label="联系电话" prop="farmerPhone">
-          <el-input v-model="form.farmerPhone" placeholder="请输入联系电话" />
-        </el-form-item>
-        <el-form-item label="症状描述" prop="symptoms">
-          <el-input v-model="form.symptoms" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
         <el-form-item label="诊断结果" prop="diagnosis">
           <el-input v-model="form.diagnosis" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -175,33 +139,125 @@
         <el-form-item label="注意事项" prop="precautions">
           <el-input v-model="form.precautions" type="textarea" placeholder="请输入内容" />
         </el-form-item>
-        <el-form-item label="兽医ID" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入兽医ID" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="删除标志" prop="delFlag">
-          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 详情弹窗 -->
+    <el-dialog
+      title="方案详情"
+      :visible.sync="flag"
+      width="700px"
+      append-to-body
+      class="consultation-dialog"
+    >
+      <div class="consultation-card" v-loading="flagLoading">
+        <div class="consultation-header">
+          <div class="header-left">
+            <div class="clinic-name">
+              <i class="el-icon-edit-outline"></i>
+              <span>{{ currentDetail.title || '--' }}</span>
+            </div>
+            <div class="consultation-no">方案编号：{{ currentDetail.planNo || '--' }}</div>
+          </div>
+          <div class="header-right">
+            <div class="consultation-date">问诊日期：{{ currentDetail.createTime || '--' }}</div>
+          </div>
+        </div>
+
+        <div class="patient-section">
+          <div class="section-title">
+            <i class="el-icon-user title-icon"></i>
+            <span>患者信息</span>
+          </div>
+          <div class="patient-info-grid">
+            <div class="info-item">
+              <span class="item-label">农牧户姓名：</span>
+              <span class="item-value">{{ currentDetail.farmerName || '--' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">牲畜种类：</span>
+              <span class="item-value">{{ currentDetail.animalType || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="consultation-section">
+          <div class="section-title">
+            <i class="el-icon-document title-icon"></i>
+            <span>问诊内容</span>
+          </div>
+          <div class="content-item">
+            <div class="content-label">病情描述：</div>
+            <div class="content-value description-box">{{ currentDetail.symptoms || '--' }}</div>
+          </div>
+        </div>
+
+        <div class="diagnosis-section">
+          <div class="section-title">
+            <i class="el-icon-first-aid-kit title-icon"></i>
+            <span>诊断内容</span>
+          </div>
+          <div class="content-item">
+            <div class="content-label">诊断结果：</div>
+            <div class="content-value description-box">{{ currentDetail.diagnosis || '--' }}</div>
+          </div>
+          <div class="content-item">
+            <div class="content-label">治疗方式：</div>
+            <div class="content-value description-box">{{ currentDetail.treatmentMethod || '--' }}</div>
+          </div>
+          <div class="content-item">
+            <div class="content-label">治疗方案：</div>
+            <div class="content-value description-box">{{ currentDetail.treatmentDesc || '--' }}</div>
+          </div>
+          <div class="content-item">
+            <div class="content-label">注意事项：</div>
+            <div class="content-value description-box">{{ currentDetail.precautions || '--' }}</div>
+          </div>
+        </div>
+
+        <div class="signature-section">
+          <div class="signature-item">
+            <span class="signature-label">主治兽医：</span>
+            <span class="signature-value">{{ currentDetail.vetName || '--' }}</span>
+          </div>
+          <div class="signature-item">
+            <span class="signature-label">制定日期：</span>
+            <span class="signature-value">{{ currentDetail.updateTime || currentDetail.createTime || '--' }}</span>
+          </div>
+        </div>
+
+        <div class="consultation-footer">
+          <p>※ 本诊疗方案由执业兽医出具，请遵医嘱执行</p>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="flag = false">关 闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/vet/plan"
+import { listPlan, getPlan, delPlan, addPlan, updatePlan, listPlanByConsultationId } from "@/api/vet/plan"
 
 export default {
   name: "Plan",
+  props: {
+    consultationId: {
+      type: Number,
+      default: null
+    }
+  },
   data() {
     return {
       // 遮罩层
       loading: true,
+      flagLoading: false,
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -218,10 +274,14 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      flag: false,
+      // 当前查看的详情
+      currentDetail: {},
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        consultationId: null,
         planNo: null,
         title: null,
         farmerName: null,
@@ -240,32 +300,60 @@ export default {
       // 表单校验
       rules: {
         planNo: [
-          { required: true, message: "方案编号不能为空", trigger: "blur" }
+          {required: true, message: "方案编号不能为空", trigger: "blur"}
         ],
         title: [
-          { required: true, message: "方案标题不能为空", trigger: "blur" }
+          {required: true, message: "方案标题不能为空", trigger: "blur"}
         ],
         animalType: [
-          { required: true, message: "动物类型不能为空", trigger: "change" }
+          {required: true, message: "动物类型不能为空", trigger: "change"}
+        ],
+        treatmentMethod: [
+          {required: true, message: "治疗方式不能为空", trigger: "blur"}
         ],
         symptoms: [
-          { required: true, message: "症状描述不能为空", trigger: "blur" }
+          {required: true, message: "症状描述不能为空", trigger: "blur"}
         ],
       }
     }
   },
-  created() {
-    this.getList()
+  watch: {
+    consultationId: {
+      immediate: true,
+      handler() {
+        this.getList()
+      }
+    }
   },
+  // created() {
+  //   this.getList()
+  // },
   methods: {
     /** 查询治疗方案列表 */
+    // getList() {
+    //   this.loading = true
+    //   listPlan(this.queryParams).then(response => {
+    //     this.planList = response.rows
+    //     this.total = response.total
+    //     this.loading = false
+    //   })
+    // },
     getList() {
       this.loading = true
-      listPlan(this.queryParams).then(response => {
-        this.planList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
+      if (this.consultationId) {
+        this.queryParams.consultationId= this.consultationId
+        listPlanByConsultationId(this.queryParams).then(response => {
+          this.planList = response.rows
+          this.total = response.total
+          this.loading = false
+        })
+      } else {
+        listPlan(this.queryParams).then(response => {
+          this.planList = response.rows
+          this.total = response.total
+          this.loading = false
+        })
+      }
     },
     // 取消按钮
     cancel() {
@@ -308,7 +396,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -350,19 +438,418 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除治疗方案编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除治疗方案编号为"' + ids + '"的数据项？').then(function () {
         return delPlan(ids)
       }).then(() => {
         this.getList()
         this.$modal.msgSuccess("删除成功")
-      }).catch(() => {})
+      }).catch(() => {
+      })
     },
     /** 导出按钮操作 */
     handleExport() {
       this.download('vet/plan/export', {
         ...this.queryParams
       }, `plan_${new Date().getTime()}.xlsx`)
+    },
+
+    // 详情按钮
+    handleView(row) {
+      this.flag = true;
+      this.flagLoading = true;
+      this.currentDetail = {};
+      if (row && row.id) {
+        getPlan(row.id).then(response => {
+          if (response.code === 200) {
+            this.currentDetail = response.data;
+          } else {
+            this.$modal.msgError("获取详情失败");
+          }
+          this.flagLoading = false;
+        }).catch(() => {
+          this.flagLoading = false;
+          this.$modal.msgError("获取详情失败");
+        });
+      } else {
+        this.flagLoading = false;
+        this.$modal.msgError("数据异常");
+      }
     }
   }
 }
 </script>
+
+<style scoped>
+::v-deep .pagestyle .el-input{
+  width: auto !important;
+}
+
+::v-deep .pagestyle .pagination-container{
+  background-color: #f8fafc;
+}
+</style>
+
+<style scoped lang="scss">
+// 操作按钮样式
+.info-btn {
+  padding: 6px 10px;
+  border-radius: 4px;
+  margin: 0 10px;
+  transition: all 0.3s ease;
+}
+
+.view-btn:hover {
+  background-color: rgb(216, 238, 248);
+  transform: translateY(-1px);
+}
+
+.alter-btn:hover{
+  background-color: rgb(230, 255, 238);
+  transform: translateY(-1px);
+}
+
+.delete-btn:hover {
+  background-color: rgba(245, 108, 108, 0.1);
+  transform: translateY(-1px);
+}
+
+// 新增/修改的弹窗
+::v-deep .el-dialog {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
+  animation: dialogFadeIn 0.3s ease;
+}
+
+::v-deep .el-dialog__header {
+  background: linear-gradient(135deg, #2c7a4d 0%, #42b983 100%);
+  padding: 18px 24px;
+  border-bottom: none;
+  position: relative;
+}
+
+::v-deep .el-dialog__title {
+  font-size: 17px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 0.5px;
+}
+
+::v-deep .el-dialog__headerbtn:hover .el-dialog__close {
+  color: #ffd04b;
+  transform: rotate(90deg);
+}
+
+::v-deep .el-dialog__body {
+  padding: 28px 24px 20px;
+  background-color: #f8fafc;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+::v-deep .el-form-item {
+  margin-bottom: 20px;
+  transition: all 0.3s;
+}
+
+::v-deep .el-form-item__label {
+  font-weight: 500;
+  color: #2d3748;
+  font-size: 14px;
+  transition: color 0.3s;
+}
+
+::v-deep .el-input,
+::v-deep .el-textarea,
+::v-deep .el-select {
+  width: 100%;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-textarea__inner {
+  border-radius: 8px;
+  border: 1px solid #dcdfe6;
+  font-size: 14px;
+  transition: all 0.3s;
+  background-color: #fcfdfe;
+}
+
+::v-deep .el-input__inner:focus,
+::v-deep .el-textarea__inner:focus {
+  border-color: #42B983;
+  box-shadow: 0 0 0 3px rgb(230, 255, 238);
+  background-color: white;
+}
+
+::v-deep .el-select .el-input__inner {
+  padding-right: 35px;
+}
+
+::v-deep .el-dialog__footer {
+  padding: 20px 24px;
+  background-color: #f8fafc;
+  border-top: 1px solid #eef2f7;
+  border-radius: 0 0 12px 12px;
+}
+
+// 问诊单详情弹窗样式
+.consultation-dialog {
+  ::v-deep .el-dialog {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  ::v-deep .el-dialog__header {
+    background: linear-gradient(135deg, #2c7a4d 0%, #42b983 100%);
+    padding: 20px 24px;
+  }
+
+  ::v-deep .el-dialog__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: white;
+    letter-spacing: 1px;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0;
+    background-color: #f0f7f3;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  ::v-deep .el-dialog__footer {
+    background-color: #f0f7f3;
+    border-top: 1px solid #d0e6d8;
+    padding: 16px 24px;
+  }
+}
+
+.consultation-card {
+  padding: 24px;
+
+  .consultation-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px;
+    margin-bottom: 16px;
+    border-bottom: 2px dashed #b8d9c5;
+
+    .header-left {
+      .clinic-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #2c7a4d;
+        margin-bottom: 6px;
+        letter-spacing: 1px;
+      }
+
+      .consultation-no {
+        font-size: 14px;
+        color: #5a6b5f;
+      }
+    }
+
+    .header-right {
+      .consultation-date {
+        font-size: 14px;
+        color: #5a6b5f;
+        background-color: #e0f0e5;
+        padding: 4px 12px;
+        border-radius: 20px;
+      }
+    }
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .title-icon {
+      font-size: 20px;
+      margin-right: 8px;
+    }
+
+    span:last-child {
+      font-size: 16px;
+      font-weight: 600;
+      color: #2c7a4d;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -4px;
+        left: 0;
+        width: 40px;
+        height: 2px;
+        background-color: #42b983;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .patient-section {
+    background-color: white;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(66, 185, 131, 0.1);
+    border: 1px solid #d9ead3;
+
+    .patient-info-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+
+      .info-item {
+        .item-label {
+          color: #6b7a71;
+          font-size: 13px;
+        }
+
+        .item-value {
+          color: #2c3e34;
+          font-weight: 500;
+          font-size: 14px;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+
+  .consultation-section {
+    background-color: white;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(66, 185, 131, 0.1);
+    border: 1px solid #d9ead3;
+
+    .content-item {
+      margin-bottom: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .content-label {
+        font-weight: 600;
+        color: #2c7a4d;
+        margin-bottom: 8px;
+        font-size: 14px;
+      }
+
+      .content-value {
+        color: #2c3e34;
+        line-height: 1.6;
+        font-size: 14px;
+        background-color: #f8fcf9;
+        padding: 10px 12px;
+        border-radius: 8px;
+        border-left: 3px solid #42b983;
+      }
+
+      .description-box {
+        min-height: 60px;
+      }
+    }
+  }
+
+  .diagnosis-section {
+    background-color: white;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(66, 185, 131, 0.1);
+    border: 1px solid #d9ead3;
+
+    // 新增：让诊断内容中的病情描述与问诊内容样式一致
+    .content-item {
+      margin-bottom: 16px;
+
+      .content-label {
+        font-weight: 600;
+        color: #2c7a4d;
+        margin-bottom: 8px;
+        font-size: 14px;
+      }
+
+      .content-value {
+        color: #2c3e34;
+        line-height: 1.6;
+        font-size: 14px;
+        background-color: #f8fcf9;
+        padding: 10px 12px;
+        border-radius: 8px;
+        border-left: 3px solid #42b983;
+      }
+
+      .description-box {
+        min-height: 60px;
+      }
+    }
+  }
+
+  .signature-section {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 16px 0 8px;
+    border-top: 1px dashed #b8d9c5;
+
+    .signature-item {
+      margin-left: 30px;
+      display: flex;
+      align-items: center;
+
+      .signature-label {
+        color: #6b7a71;
+        font-size: 14px;
+        margin-right: 6px;
+      }
+
+      .signature-value {
+        font-weight: 600;
+        color: #2c3e34;
+        font-size: 15px;
+      }
+
+      .signature-img {
+        font-size: 20px;
+      }
+    }
+  }
+
+  .consultation-footer {
+    margin-top: 20px;
+    padding: 12px;
+    background-color: #e6f4ea;
+    border-radius: 8px;
+    text-align: center;
+
+    p {
+      margin: 4px 0;
+      color: #3d7250;
+      font-size: 13px;
+
+      &:first-child {
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>