完善查看详情里不要有上传功能

Tcsm

2023-09-25 380728d2f235e0253df0fc1c558874a549cf0256

 ruoyi-ui/src/views/doctor/doctorInfo.vue

@@ -1,60 +1,98 @@
<template>
  <div class="app-container">
  <div class="app-container" id="printable-content">
    <div class="form-header mt">
      <h4 class="dt h4">就医记录详细信息 </h4>
      <el-button type="primary" class="pt"  icon="el-icon-edit" @click="handleEdit()" :disabled="btn">编辑</el-button>
      <!--      <br>-->
      <!--      <el-button type="primary" class="pt"   @click="handleExport"-->
      <!--                 v-hasPermi="['self:user:export']" >导出</el-button>-->
      <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;" >
        <span>就医记录详细信息</span>
        <div style="display: flex; align-items: center;">
          <el-button size="mini" type="text"  v-print="'#printable-content'" v-hasPermi="['person:information:memo']">
            <div class="form" ><el-icon  style="padding-right:100px;"></el-icon>
              <span class="text" style="width: 69px;height: 26px;font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">打印</span></div>
          </el-button></div>
      </h1>
    </div>

    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
    <div>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-position="left" label-width="100px">
      <!--      <el-form-item label="id" prop="id">-->
      <!--        <el-input v-model="formData.id" placeholder="请输入id" :maxlength="11" show-word-limit :disabled="true"-->
      <!--                  clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="类型" prop="type">
        <el-input v-model="formData.type" placeholder="请输入类型" clearable :style="{width: '100%'}" :disabled="dsb">
        </el-input>
      </el-form-item>
      <el-form-item label="症状" prop="symptom">
        <el-input v-model="formData.symptom" placeholder="请输入症状" clearable :style="{width: '100%'}" :disabled="dsb">
        </el-input>
      </el-form-item>
      <el-form-item label="持续时间" prop="duration">
        <el-input v-model="formData.duration" placeholder="请输入持续时间" clearable :style="{width: '100%'}" :disabled="dsb">
        </el-input>
      </el-form-item>
      <el-form-item label="中医处方" prop="cmedical">
        <el-input v-model="formData.cmedical" placeholder="请输入中医处方" clearable :style="{width: '100%'}" :disabled="dsb">
        </el-input>
      </el-form-item>
      <el-form-item label="西医处方" prop="wmedical">
        <el-input v-model="formData.wmedical" placeholder="请输入西医处方" clearable :style="{width: '100%'}" :disabled="dsb">
        </el-input>
      </el-form-item>
      <el-form-item label="功效" prop="effect">
        <el-input v-model="formData.effect" placeholder="请输入功效" clearable :style="{width: '100%'}" :disabled="dsb">
        </el-input>
      </el-form-item>
      <el-form-item label="适用人" prop="suitable">
        <el-input v-model="formData.suitable" placeholder="请输入适用人" clearable :style="{width: '100%'}" :disabled="dsb">
        </el-input>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
      </el-form-item>

      <h4 class="form-header">电子文件 </h4>
      <el-container>
      <div>
        <el-container>
          <el-row>
            <el-cow :span="8">
              <el-form-item label="类别" prop="type" label-width="55px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-select v-model="formData.type" placeholder="请选择类别" clearable :style="{width: '100%'}"   :disabled="dsb">
                  <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
                  ></el-option>
                </el-select>
                <el-input v-model="newOption" v-if="showInput" placeholder="若未在上述选项中找到对应类别，请在此输入新的类别" @change="addNewOption"></el-input>
              </el-form-item>
            </el-cow>
            <el-cow :span="8">
              <el-form-item label="症状" prop="symptom" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.symptom" placeholder="请输入症状" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow :span="8">
              <el-form-item label="持续时间" prop="duration" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.duration" placeholder="请输入持续时间" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow :span="8">
              <el-form-item label="功效" prop="effect" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.effect" placeholder="请输入功效" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow :span="8">
              <el-form-item label="适用人" prop="suitable" label-width="65px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.suitable" placeholder="请输入适用人" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow :span="8">
              <el-form-item label="备注" prop="remark" label-width="45px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
          <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
        </el-form-item>
            </el-cow>
          </el-row>
        </el-container>
      </div>
      <div style="padding-left:120px">
        <el-container>
          <el-row>
            <el-cow :span="8">
              <el-form-item label="中医处方" prop="cmedical" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.cmedical" placeholder="请输入中医处方"  clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow :span="8">
              <el-form-item label="西医处方" prop="wmedical" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
            <el-input v-model="formData.wmedical" placeholder="请输入西医处方" clearable :style="{width: '100%'}" :disabled="dsb">
            </el-input>
          </el-form-item>
            </el-cow>
          </el-row>
        </el-container>
      </div>
      </el-container>
      <h4 class="form-header">相关图片 </h4>
      <el-upload
        action="#"
        list-type="picture-card"
        multiple
        :http-request="requestUpload"
        :file-list="fileList"
        :disabled="!btn"
        :class="{ hide: !btn }"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div v-if="uploading" class="upload-status">正在上传...</div>
        <i v-if="!uploading" slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
@@ -66,20 +104,21 @@
          >
          <span class="el-upload-list__item-actions">
        <span

          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"

          class="el-upload-list__item-delete"
          @click="handleDownload(file.url)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          v-if="isShow"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
@@ -92,33 +131,66 @@
      </el-upload>

      <h4 class="form-header">其他附件 </h4>
      <el-upload
        action=""
        :file-list="fileListOther"
        class="upload-demo"
        multiple
        :on-preview="handlePreview"
    <el-upload
            action=""
            :file-list="fileListOther"
            class="upload-demo"
            multiple
            list-type="picture-card"
            :on-preview="handleFileCardPreview"
            :on-remove="handleRemoveFile"
            :http-request="requestUpload"
            :show-file-list="true"
            :disabled="!btn"
            :class="{ hide: !btn }"
          >
              <div v-if="uploading" class="upload-status">正在上传...</div>
              <i v-if="!uploading" slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  src="../../assets/401_images/401.gif"
                  alt=""
                  style="width: 147px; height: 147px"
                  fit="cover"
                >
                <span class="el-upload-list__item-actions">
                <span

        :on-remove="handleRemove"
        :http-request="requestUpload"
        :show-file-list="true"
      >
        <el-button type="primary">点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
          </div>
        </template>
                  class="el-upload-list__item-preview"
                  @click="handleFileCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span

                  class="el-upload-list__item-delete"
                  @click="handleDownload(file.url)"
                >
                 <i class="el-icon-download"></i>
                 </span>
                <span
                  v-if="isShow"
                  class="el-upload-list__item-delete"
                  @click="handleRemoveFile(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>


      </el-upload>
              </div>


          </el-upload>

      <el-form-item size="large">
        <el-button type="primary" @click="submitForm" :disabled="dsb">修改</el-button>
        <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">修改</el-button>
      </el-form-item>
    </el-form>

    </div>
    <el-dialog  :visible.sync="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
      <img w-full :src="dialogImageUrl"    style="width: 700px; height: 700px" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
@@ -128,7 +200,7 @@
import {blobValidate} from "@/utils/ruoyi";
import errorCode from "@/utils/errorCode";
import {Message} from "element-ui";
import { getDoctor, updateDoctor,download,uploadPic} from "@/api/doctor/index";
import {getDoctor, updateDoctor, download, uploadPic, listType} from "@/api/doctor/index";

export default {
  components: {},
@@ -138,17 +210,15 @@
      cdi:"就医记录详细信息",
      udi:"就医记录信息详情",
      fot:[".jpg",".jif"],
      fileList:[
      ],
      fileListOther:[

      ],
      fileList:[],
      fileListOther:[],
      dsb:true,
      btn:false,

      isShow:true,
      uploading: false,
      // 就医记录表格数据
      doctorList: [],

      typeList:[],
      formData: {
        //就医记录
        id:undefined,
@@ -162,13 +232,14 @@
        remark:undefined,
        url: undefined,
      },
      desurl:'',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      rules: {
        type: [{
          required: true,
          message: '请输入类型',
          message: '请输入类别',
          trigger: 'blur'
        }],
        symptom: [{
@@ -210,6 +281,8 @@

      },
      typeOptions: [],
      newOption: undefined,
      showInput: false
    }
  },
  computed: {},
@@ -222,12 +295,16 @@
      jd =  this.$route.query.detail
      this.btn= jd
      this.dsb = !jd
      this.isShow=true
      this.showInput=true
      document.title = "修改就医记录详细信息";
      this.$route.meta.title = "修改就医记录详细信息";//列表的名称
    }
    else{
      document.title = "查看就医记录详细信息";
      this.$route.meta.title = "查看就医记录详细信息";//列表的名称
      document.title = "就医记录详细信息";
      this.$route.meta.title = "就医记录详细信息";//列表的名称
      this.isShow=false
      this.btn = false;
    }

    let _this = this
@@ -254,7 +331,16 @@
        }
        this.loading = false;
      });
      this.getCateInfor()
      listType(this.queryParams).then(response => {
          this.typeList = response.data;
          this.total = response.data.total;
          // console.log( this.typeList )
          // 在回调函数中调用 getTypeOptions()
          this.getTypeOptions();
          this.loading = false;
        }
      );
      // this.getCateInfor()

    }
  },
@@ -271,6 +357,31 @@
    //     })
    //   })
    // },
    //类别
    addNewOption() {
      const newOption = this.newOption.trim();
      if (newOption && !this.typeOptions.includes(newOption)) {
        this.typeOptions.push(newOption);
        this.$set(this.formData, 'type', newOption); // 更新formDat.type的值为新的选项
      }
    },
    getTypeOptions() {
      const filteredOptions = this.typeList.filter(item => typeof item === 'string' && item !== '');
      // 创建一个空对象用于存储唯一的字符串选项
      const uniqueOptions = {};
      // 构建下拉选项列表
      this.typeOptions = filteredOptions.reduce((options, option) => {
        if (!uniqueOptions[option]) {
          uniqueOptions[option] = true;
          options.push({
            label: option,
            value: option
          });
        }
        return options;
      }, []);

    },
    submitForm() {
      let ul = this.fileList.map(function (elem){
        return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
@@ -314,10 +425,24 @@
      })
    },
    handleRemoveFile(file) {
      alert(23)
      for(let i = 0; i < this.fileListOther.length; i++)
      {
        if(this.fileListOther[i].url==file.url)
          this.$delete(this.fileListOther,i);
      }
    },
    handleRemove(file) {
      alert(323)
      for(let i = 0; i < this.fileList.length; i++)
      {
        if(this.fileList[i].url==file.url)
          this.$delete(this.fileList,i);
      }
    },
    handleFileCardPreview(file){
      this.dialogFileUrl = file.url;
      const Base64 = require('js-base64').Base64
      this.desurl = process.env.VUE_APP_BASE_OTHER_API+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl));
      myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300');
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
@@ -331,7 +456,7 @@
      download(formData).then(async (response) => {
        const isLogin = await blobValidate(response);
        let nt = new Date().getTime()
        let filename = 'property_'+nt+'.'+suffix
        let filename = 'doctor_'+nt+'.'+suffix
        const blob = new Blob([response])
        saveAs(blob, filename)
      })
@@ -340,6 +465,7 @@
    {
      this.dsb = false
      this.btn = true
      this.isShow=false
    },
    requestUpload(params)
    {
@@ -347,10 +473,11 @@
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this

      this.uploading = true;
      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)

        this.uploading = false;
        this.$modal.msgSuccess("上传成功");
        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})
@@ -378,6 +505,9 @@
</script>

<style scoped>
.app-container{
  background-color: #FEF7FC;
}
.mt
{
  position: relative;
@@ -392,4 +522,10 @@
  display: block;
  position: absolute;
}
.hide .el-upload--picture-card {
  display: none;
}
.form{
  background:center/11% no-repeat url('../../assets/icons/form.png') ;
}
</style>