peisweb/src/components/occDisease/OccDiseasePrevious.vue

<template>
  <div>
    <div style="margin-left: 10px;font-weight: 700;">既往病史：</div>
    <el-table :data="dataTransOpts.tableM.patient_past_medical_history" border height="200" row-key="id" size="small"
      highlight-current-row ref="Previous">
      <el-table-column prop="occupationalDisease" label="疾病名称" min-width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.occupationalDisease" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="diagnosisDate" label="诊断日期" min-width="100">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.diagnosisDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            placeholder="诊断日期" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="diagnosisHospital" label="诊断单位" min-width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.diagnosisHospital" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="isRecovery" label="治愈" min-width="40" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isRecovery" true-label="Y" false-label="N"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="treatmentMethods" label="治疗方式" min-width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.treatmentMethods" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="lastModifierName" label="修改人员" min-width="80" align="center" />
      <el-table-column prop="lastModificationTime" label="修改时间" min-width="150" align="center" />
      <el-table-column prop="creatorName" label="创建人员" min-width="80" align="center" />
      <el-table-column prop="creationTime" label="创建时间" min-width="150" align="center" />
      <el-table-column fixed="right" width="30" align="center">
        <template slot="header">
          <div style="display: flex;justify-content:space-between;">
            <div></div>
            <div>
              <i class="el-icon-plus" @click="btnAdd('past')" style="font-size: 24px;color: blue;cursor:pointer;"></i>
            </div>
          </div>
        </template>
        <template slot-scope="scope">
          <i class="el-icon-delete" @click="deleteRow(scope.$index, 'past')"
            style="font-size: 24px;color: red;cursor:pointer;"></i>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0 0 10px;font-weight: 700;">职业病史：</div>
    <el-table :data="dataTransOpts.tableM.patient_occupational_medical_history" border height="200" row-key="id"
      size="small" highlight-current-row ref="occ">
      <el-table-column prop="occupationalDisease" label="疾病名称" min-width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.occupationalDisease" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="diagnosisDate" label="诊断日期" min-width="100">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.diagnosisDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            placeholder="诊断日期" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="diagnosisHospital" label="诊断单位" min-width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.diagnosisHospital" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="isRecovery" label="治愈" min-width="40" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isRecovery" true-label="Y" false-label="N"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="treatmentMethods" label="治疗方式" min-width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.treatmentMethods" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="lastModifierName" label="修改人员" min-width="80" align="center" />
      <el-table-column prop="lastModificationTime" label="修改时间" min-width="150" align="center" />
      <el-table-column prop="creatorName" label="创建人员" min-width="80" align="center" />
      <el-table-column prop="creationTime" label="创建时间" min-width="150" align="center" />
      <el-table-column fixed="right" width="30" align="center">
        <template slot="header">
          <div style="display: flex;justify-content:space-between;">
            <div></div>
            <div>
              <i class="el-icon-plus" @click="btnAdd('occ')" style="font-size: 24px;color: blue;cursor:pointer;"></i>
            </div>
          </div>
        </template>
        <template slot-scope="scope">
          <i class="el-icon-delete" @click="deleteRow(scope.$index, 'occ')"
            style="font-size: 24px;color: red;cursor:pointer;"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>


import moment from "moment";
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { getPagePriv, checkPagePriv, objCopy, deepCopy, arrayExistObj } from "../../utlis/proFunc";
export default {
  components: {},
  props: ["refFunc"],
  data() {
    return {
      pagePriv: {
        routeUrlorPageName: 'customerOrg', //当前页面归属路由或归属页面权限名称
        privs: [] // 页面权限
      },
      postion: [
        {
          poisonTypeName: "职业史",
          poisonDtos: [
            {
              id: "3a12ad8e-3b84-75a2-415e-c03ed69bda66",
              displayName: "噪声，粉尘",
              simpleCode: "ZS，FC"
            }
          ]
        }
      ],  // 毒害因素

    };
  },

  created() {
    //获取用户当前页面的权限
    let userPriv = window.sessionStorage.getItem('userPriv')
    if (userPriv) this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName))

  },

  //挂载完成
  mounted() {
    this.$nextTick(() => {
      this.postion = deepCopy(this.dict.postion)
    })
  },

  computed: {
    ...mapState(["window", "dict", "dialogWin", "dataTransOpts"]),
  },

  methods: {
    moment, checkPagePriv,

    filterMethod(v) {
      if (v) {
        let lv = v.toUpperCase()
        let postion = []
        let postionList = this.dict.postionList.filter(e => {
          return e.poisonTypeName.indexOf(lv) > -1 || e.displayName.indexOf(lv) > -1 || e.simpleCode.indexOf(lv) > -1
        })
        postionList.forEach(e => {
          let lfind = arrayExistObj(postion, "poisonTypeName", e.poisonTypeName)
          if (lfind == -1) {
            postion.push({ poisonTypeName: e.poisonTypeName, poisonDtos: [{ id: e.id, displayName: e.displayName, simpleCode: e.simpleCode }] })
          } else {
            postion[lfind]['poisonDtos'].push({ id: e.id, displayName: e.displayName, simpleCode: e.simpleCode })
          }
        });
        this.postion = postion
      } else {
        this.postion = deepCopy(this.dict.postion)
      }
      console.log('filterMethod', v)

    },


    //删除联系方式行
    deleteRow(index, tableType) {
      this.$confirm("此操作确定后将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        if (tableType == 'past') {
          this.dataTransOpts.tableM.patient_past_medical_history.splice(index, 1);
        } else {
          this.dataTransOpts.tableM.patient_occupational_medical_history.splice(index, 1);
        }
        //this.submit('form');
      }).catch((err) => {
        if (err != 'cancel') {
          this.$message.info({ showClose: true, message: err });
        }
      });
    },

    //新增联系方式
    btnAdd(tableType) {
      this.postion = deepCopy(this.dict.postion)
      if (tableType == 'past') {
        this.dataTransOpts.tableM.patient_past_medical_history.push({
          patientRegisterId: this.patientRegisterId,
          occupationalDisease: '',
          diagnosisDate: '',
          diagnosisHospital: '',
          isRecovery: 'N',
          treatmentMethods: ''
        });
      } else {
        this.dataTransOpts.tableM.patient_occupational_medical_history.push({
          patientRegisterId: this.patientRegisterId,
          occupationalDisease: '',
          diagnosisDate: '',
          diagnosisHospital: '',
          isRecovery: 'N',
          treatmentMethods: ''
        });
      }
    },
  },

  watch: {
    // 单位id未变时，强制刷新
    "dataTransOpts.refresh.contact_person.S": {
      // immediate: true,
      handler(newVal, oldVal) {
        console.log(`watch 联系人 newVal:${newVal} oldVal:${oldVal} customerOrgId: ${this.dataTransOpts.tableS.contact_person.id}`);
        this.getFormData(this.dataTransOpts.tableS.contact_person.id)
      }
    },

    // 'customerOrgId' (newVal,oldVal){
    //   console.log('watch customerOrgId',newVal,oldVal)
    //   if(newVal != oldVal){
    //     this.personId = ''
    //   }
    // }
  },
};
</script>
<style scoped>
@import '../../assets/css/global_table.css';
@import '../../assets/css/global_input.css';
@import '../../assets/css/global_form.css';
@import '../../assets/css/global_dialog.css';

::v-deep .el-select-group__title {
  font-size: 15px;
  background-color: #EEEEEE;
  color: black;
  font-weight: 700;
}

.btnClass {
  width: 110px;
}
</style>