medicatedFoodDetails.vue 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
  3. <div style="padding: 20px; background-color: #fff;">
  4. 药膳详情
  5. </div>
  6. <div class="contentx" v-if="item!=null">
  7. <div class="desct"> 药膳信息</div>
  8. <el-descriptions title="" :column="3" border>
  9. <<el-descriptions-item label="图片" >
  10. <el-image
  11. style="width: 100px"
  12. :src="item.imgUrl"
  13. :preview-src-list="[item.imgUrl]">
  14. </el-image>
  15. </el-descriptions-item>
  16. <el-descriptions-item label="药膳名称"><span v-if="item!=null">{{item.foodName}}</span></el-descriptions-item>
  17. <el-descriptions-item label="排序"><span v-if="item!=null">{{item.sort}}</span></el-descriptions-item>
  18. <el-descriptions-item label="功效"><span v-if="item!=null">{{item.action}}</span></el-descriptions-item>
  19. <el-descriptions-item label="食材"><span v-if="item!=null">{{item.food}}</span></el-descriptions-item>
  20. <el-descriptions-item label="创建时间"><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
  21. <el-descriptions-item label="状态"><span v-if="item!=null"> <dict-tag :options="statusOptions" :value="item.status"/></span></el-descriptions-item>
  22. <el-descriptions-item label="主治疾病" span="3"><span v-if="item!=null" >{{item.indications}}</span></el-descriptions-item>
  23. <el-descriptions-item label="描述" span="3"><span v-if="item!=null" > <span v-html="item.descs"></span></span></el-descriptions-item>
  24. </el-descriptions>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. import { listMedicatedFood, getMedicatedFood, delMedicatedFood, addMedicatedFood, updateMedicatedFood, exportMedicatedFood } from "@/api/store/medicatedFood";
  30. export default {
  31. name: "MedicatedFoodDetails",
  32. data() {
  33. return {
  34. item:null,
  35. }
  36. },
  37. created() {
  38. this.getDicts("sys_company_status").then(response => {
  39. this.statusOptions = response.data;
  40. });
  41. },
  42. methods: {
  43. getDetails(orderId) {
  44. this.item=null;
  45. getMedicatedFood(orderId).then(response => {
  46. this.item = response.data;
  47. });
  48. },
  49. }
  50. }
  51. </script>
  52. <style>
  53. .contentx{
  54. height: 100%;
  55. background-color: #fff;
  56. padding: 0px 20px 20px;
  57. margin: 20px;
  58. }
  59. .el-descriptions-item__label.is-bordered-label{
  60. font-weight: normal;
  61. }
  62. .el-descriptions-item__content {
  63. max-width: 150px;
  64. min-width: 100px;
  65. }
  66. .desct{
  67. padding-top: 20px;
  68. padding-bottom: 20px;
  69. color: #524b4a;
  70. font-weight: bold;
  71. }
  72. </style>