peisweb/src/components/doctorCheck/CheckPicture.vue

<template>
  <div style="display: flex;">
    <div>
      <div>
        <el-button type="primary" class="btnClass" @click="btnGetPic" size="small">采图</el-button>
      </div>
      <div>
        <el-button type="primary" class="btnClass" @click="btnExpPic" size="small">导图</el-button>
      </div>
      <div>
        <el-button type="primary" class="btnClass" @click="btnSavePic" size="small">保存</el-button>
      </div>
    </div>
    <div class="demo-image__preview" v-for="(item,index) in checkPictures" :key="item.id" style="padding: 0 0 0 2px;"> 
      <div style="position: relative;font-size:24px;margin: -6px 0 0 55px;z-index:2;">
        <el-tooltip content="删除该图" placement="bottom" effect="light">
          <i class="el-icon-close" @click="btnDelImage(index)"
            style="color: red;cursor:pointer;"></i>
        </el-tooltip>
      </div>
      <div style="margin-top: -25px;">
        <el-image 
          style="width: 80px; height: 80px;border-radius:5px;"
          :src="item.pictureFilename" 
          :preview-src-list="[item.pictureFilename]">
        </el-image>
      </div>
      <div style="display: flex;">
        <div style="margin: -6px 0 0 1px;">
          <el-checkbox v-model="item.isPrintTrans"></el-checkbox>
        </div>
        <div style="font-size:12px;margin: -2px 0 0 1px;">打印</div>        
        <div style="font-size:15px;margin: -5px 0 0 2px;">
          <el-tooltip content="保存后，图片将按序号从小到大排序" placement="bottom" effect="light">
            <input placeholder="排序" v-model="item.displayOrder" @onkeyup="validateInteger(e,index)" 
              style="width: 35px" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { deepCopy } from '@/utlis/proFunc';

export default {
  components: {},
  data() {
    return {
      checkPictures:[{
        id:'1',
        registerCheckId:'registerCheckId',
        isPrint:'Y',
        isPrintTrans:true,
        pictureFilename:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
      },{
        id:'2',
        registerCheckId:'registerCheckId',
        isPrint:'Y',
        isPrintTrans:true,
        pictureFilename:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      }],     
    };
  },

  created() {},

  //挂载完成
  mounted() {},

  computed: {
    ...mapState(["dict", "doctorCheck","patientRegister", "customerOrg"]),
    lmoment(date, forMat) {
      return moment(new Date(date)).format(forMat);
    },
  },
  methods: {
    // 根据checkId获取图片列表信息
    getCheckPictures(registerCheckId){
      this.checkPictures = []
      if(!registerCheckId){        
        return
      }
      // {
      //   "registerCheckId": "3a0f6a3c-88a5-d5f7-d59b-ef3b3807490b",
      //   "pictureFilename": "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      //   "isPrint": "N",
      //   "displayOrder": 1,
      //   "creatorName": "admin",
      //   "lastModifierName": "admin",
      //   "lastModificationTime": "2023-12-15T15:24:08",
      //   "lastModifierId": "3a0c4180-107c-0c89-b25b-0bd34666dcec",
      //   "creationTime": "2023-12-15T15:24:06",
      //   "creatorId": "3a0c4180-107c-0c89-b25b-0bd34666dcec",
      //   "id": "3a0f6a3c-88a5-d5f7-d59b-ef3b38074901"
      // }
      getapi(`/api/app/registercheckpicture/getregistercheckpictureinregistercheckid?RegisterCheckId=${registerCheckId}`)
      .then(res =>{
        if(res.code != -1){
          res.data.forEach(e => {
            this.checkPictures.push(Object.assign({isPrintTrans:e.isPrint == 'Y' ? true:false},e))
          });
        }
      })
    },

    btnGetPic(){
      console.log('采图，开发中……')
    },

    btnExpPic(){
      console.log('导图，开发中……')
    },

    btnSavePic(){
      let body = []
      // [
      //   {
      //     "registerCheckPictureId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",  // 新增无需传此值
      //     "registerCheckId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
      //     "pictureFilename": "string",
      //     "isPrint": "string",
      //     "displayOrder": 0
      //   }
      // ]
      if(this.checkPictures.length == 0){
        this.$message.warning("没有可保存的图片数据！")
        return
      }

      let checkPictures = deepCopy(this.checkPictures)
      checkPictures.sort((a,b) =>{
        let seq1 = 0
        let seq2 = 0
        try {
          seq1 = parseInt(a.displayOrder)
        } catch (error) {
          seq1 = 0
        }
        try {
          seq2 = parseInt(b.displayOrder)
        } catch (error) {
          seq2 = 0
        }
        return seq1 - seq2
      })

      checkPictures.forEach(e => {
        let item = {
          registerCheckId:e.registerCheckId,
          pictureFilename:e.pictureFilename
        }
        if(e.id) item.registerCheckPictureId = e.id
        if(e.isPrintTrans){
          item.isPrint = 'Y'
        }else{
          item.isPrint = 'N'
        }        
        body.push(item);
      });

      postapi('/api/app/registercheckpicture/createregistercheckpicturemany',body)
      .then(res =>{
        if(res.code != -1){
          this.$message.success("操作成功！")
          this.getCheckPictures(checkPictures[0].registerCheckId);
        }
      })

      
    },

    // 删除图片
    btnDelImage(index){
      let body = [this.checkPictures[index].id]
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {        
        return postapi(`/api/app/registercheckpicture/deleteregistercheckpicturemany`, body)
      }).then((res) => {
        if(res.code != -1){
          this.$message.success("操作成功！")          
          this.checkPictures.splice(index,1)
        }   
      }).catch((err) => {
        if (err == "cancel") {
          this.$message.info("已取消");          
        }
      });
      
    },

    validateInteger(e,index){
      var regex = /^[0-9]*$/;
      console.log(e,index)
      if (!regex.test(e.value)) {
        // 如果输入不满足整数条件，则清除输入框内容

        e.value = "";
      }
    }

  },

  //监听事件
  watch: {
    //体检人员切换
    "doctorCheck.RegisterCheckId":{
      immediate:true,
      handler(newVal, oldVal) {
        console.log("watch:doctorCheck.RegisterCheckId:", newVal, " oldVal：", oldVal);        
        this.getCheckPictures(newVal)        
      }
    },
  }
};
</script>
<style scoped>
.query {
  margin-left: 10px;
  margin-right: 2px;
  padding: 1px 1px;
}

.btnClass{
  margin: 2px 2px 0;    
  height: 26px;
  min-width: 40px;
  padding: 5px 5px; /*原始 默认值 10px 10px */
}
</style>