xiangan_pc/src/page-subspecialty/views/modules/optometryManagement/outFocusEye/reviewForm.vue

<template>
  <div class="reviewContain">
    <div class="reviewLeft">
      <div class="content-top">
        <div v-for="(item, index) in formList" :key="index" class="formBox" :class="[index === curIndex ? 'active' : '']" @click="handleForm(index, item)">
          <div style="display: flex;padding: 2px 0">
            <p :class="[index === curIndex ? 'activeFont' : 'curFont']">{{ item.checkDate }}</p>
            <i v-if="index === curIndex" style="margin-top: 5px;color: rgb(199,5,5);margin-left: 12px" class="el-icon-delete" @click="deleteForm(item.id)" />
          </div>
        </div>
        <img v-if="!formList.length" src="@/assets/img/nodata.png" alt="" class="nodata">
      </div>
      <div class="content-bottom">
        <div class="commonForm-text">
          <span>常用表单</span>
          <span class="line" />
        </div>
        <div class="record">
          <p>离焦眼镜复查单</p>
          <img :src="require('@/assets/img/add.png')" alt="" @click="addRecord()">
        </div>
      </div>
    </div>
    <div class="reviewRight">
      <div v-if="formList.length">
        <div style="display: flex;justify-content: flex-end;margin-bottom: 16px">
          <el-button type="primary" size="small" @click="saveSecondForm()">保存</el-button>
        </div>
        <el-table
          :data="tableData"
          :span-method="objectSecondMethod"
          style="width: 100%"
        >
          <el-table-column
            label="复诊记录"
            width="220"
            align="center"
          >
            <template slot-scope="scope">
              日期：
              <el-date-picker
                v-model="secondForm.checkDate"
                style="width: 140px"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
              <!--                <el-input v-model="secondForm.checkDate" placeholder="" style="width: 100px" />-->
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            align="center"
            label="眼别"
            prop="name"
          />
          <el-table-column
            align="center"
            label="球镜"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.ds === '右眼'" v-model="secondForm.dsOd" placeholder="" />
              <el-input v-if="scope.row.ds === '左眼'" v-model="secondForm.dsOs" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column
            label="柱镜"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.dc === '右眼'" v-model="secondForm.dcOd" placeholder="" />
              <el-input v-if="scope.row.dc === '左眼'" v-model="secondForm.dcOs" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column
            label="轴向"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.a === '右眼'" v-model="secondForm.aod" placeholder="" />
              <el-input v-if="scope.row.a === '左眼'" v-model="secondForm.aos" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column
            label="矫正视力"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.va === '右眼'" v-model="secondForm.vaOd" placeholder="" />
              <el-input v-if="scope.row.va === '左眼'" v-model="secondForm.vaOs" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column
            label="戴镜视力"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.vag === '右眼'" v-model="secondForm.vagOd" placeholder="" />
              <el-input v-if="scope.row.vag === '左眼'" v-model="secondForm.vagOs" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column
            label="眼轴"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.iol === '右眼'" v-model="secondForm.iolOd" placeholder="" />
              <el-input v-if="scope.row.iol === '左眼'" v-model="secondForm.iolOs" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column
            label="联合光度"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.lhgd === '右眼'" v-model="secondForm.lhgdOd" placeholder="" />
              <el-input v-if="scope.row.lhgd === '左眼'" v-model="secondForm.lhgdOs" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column
            label="下次复诊时间"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-date-picker
                v-model="secondForm.nextCheckDate"
                style="width: 140px"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            width="130"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="secondForm.remark" type="textarea" :rows="3" placeholder="" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    patientId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [
        {
          checkDate: '',
          nextCheckDate: '',
          name: '右眼',
          ds: '右眼',
          dc: '右眼',
          iol: '右眼',
          lhgd: '右眼',
          vag: '右眼',
          va: '右眼',
          a: '右眼',
          remark: ''
        },
        {
          checkDate: '',
          nextCheckDate: '',
          name: '左眼',
          ds: '左眼',
          dc: '左眼',
          iol: '左眼',
          lhgd: '左眼',
          vag: '左眼',
          va: '左眼',
          a: '左眼',
          remark: ''
        }
      ],
      secondForm: {
        patientId: '',
        checkDate: '',
        nextCheckDate: '',
        dcOd: '',
        dcOs: '',
        dsOd: '',
        dsOs: '',
        iolOd: '',
        iolOs: '',
        lhgdOd: '',
        lhgdOs: '',
        vagOd: '',
        vagOs: '',
        remark: '',
        vaOd: '',
        vaOs: '',
        aod: '',
        aos: ''
      },
      id: '',
      curIndex: 0,
      formList: []
    }
  },
  mounted() {
    this.getFormList()
  },
  methods: {
    objectSecondMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 9 || columnIndex === 10) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    saveSecondForm() {
      this.secondForm.patientId = this.patientId
      this.$http.post('/defocused/saveOrUpdateSecondDefocused', this.secondForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getSecondForm()
          }
        })
      }).catch(() => {})
    },
    async getSecondForm() {
      this.$http.get('/defocused/getSecondDefocused', {
        params: {
          id: this.id
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.secondForm = res.data
        }
      }).catch(() => {})
    },
    async getFormList() {
      const { data: res } = await this.$http.get('/defocused/getAllSecDefocusedByPid', {
        params: {
          patientId: this.patientId
        }
      })
      if (res.code === 0) {
        this.formList = res.data || []
        if (this.formList.length) {
          this.id = this.formList[0].id
          this.secondForm = this.formList[0]
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    handleForm(index, item) {
      this.curIndex = index
      this.id = item.id
      this.secondForm = item
    },
    async addRecord() {
      const params = {
        patientId: this.patientId
      }
      const { data: res } = await this.$http.post('/defocused/saveOrUpdateSecondDefocused', params)
      if (res.code === 0) {
        await this.getFormList()
        this.$message.success('新增成功')
      } else {
        this.$message.error(res.msg)
      }
    },
    deleteForm(id) {
      const params = {
        id: id
      }
      this.$confirmFun('你确定要删除吗？').then(async() => {
        const { data: res } = await this.$http.post('/defocused/delSecDefocusedById', params)
        if (res.code === 0) {
          this.$message.success('删除成功')
          await this.getFormList()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.reviewContain {
  width: 100%;
  height: 100%;
  display: flex;
  .reviewLeft{
    width: 180px;
    height: 100%;
    margin-right: 16px;

    .content-top, .content-bottom{
      height: 50%;
      overflow-y: auto;
    }
    .content-bottom {
      .commonForm-text {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
      }
      .line {
        border-bottom: 1px solid #e5e6eb;
        flex: 1;
        display: inline-block;
        margin: 0 10px;
      }
      .record{
        display: flex;
        justify-content: space-between;
        padding-top: 12px;
        cursor: pointer;
        p {
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          letter-spacing: 1px;
        }
        img {
          width: 16px;
          height: 16px;
          margin-top: 3px;
        }
      }
    }
    .formBox{
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      padding: 2px 8px;
      border-radius: 2px;
      margin-top: 12px;
    }
    .active {
      color: white;
      background-color: #1C76FD;
    }
    .curFont {
      color: #A6A4A4;
    }
    .activeFont {
      color: #D9D9D9;
    }
    .nodata {
      width: 200px;
      margin-top: 50px;
    }
  }
  .reviewRight{
    flex: 1;
    //background-color: #ececf1;
  }
  .review-head {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
  }
  .review-content {
    width: 100%;
    height: calc( 100vh - 50px - 32px - 42px - 48px - 15px);
    padding: 16px;
    background: #ffffff;
    overflow-x: auto;
  }
  .vision{
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    text-align: center;
    color: #1E79FF;
    font-weight: 600;
    margin-right: 8px;
    background-color: #EBF6FF;
  }
}
</style>