web_dist/src/views/technology-archives/TechnologyArchivesCore.vue

<template>
  <div class="layout_container">
    <header>
      <el-button type="primary" icon="Plus" @click="onAddItem" style="margin-left: 5px">新增记录</el-button>
    </header>
    <div class="layout_main">
      <el-tabs class="el-tabs__fill" v-model="editableTabsValue" type="border-card" @tab-click="handleClick">
        <el-tab-pane key="eighthInfo" label="限制类医疗技术档案" name="eighthInfo">
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table :data="eighthData" border style="width: 100%; height: 100%" stripe highlight-current-row :key="eighthKey">
                <el-table-column type="index" prop="no" label="序号" width="80" />
                <el-table-column prop="id" label="id号" width="80" v-if="false"/>
                <el-table-column prop="socialNo" label="身份证号" width="180">
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.socialNo"></el-input>
                    <span v-else>{{ scope.row.socialNo }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="开展时间" width="180">
                  <template v-slot="scope">
                    <el-date-picker v-if="scope.row.isEdit" v-model="scope.row.time" type="date" style="width: 100%"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    <span v-else>{{ scope.row.time }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="限制类技术项目名称" width="240" show-overflow-tooltip>
                  <template #header>
                    <span>限制类技术项目名称</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content>注：<br />限制类技术必须参加卫健委备案培训基地规范化培训，取得合格证书后方可获得技术授权。</template>
                      <el-icon color="red" size="14"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </template>
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.name"></el-input>
                    <span v-else>{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="opCode" label="手术编码" width="180">
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.opCode"></el-input>
                    <span v-else>{{ scope.row.opCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="opName" label="手术名称" width="240" show-overflow-tooltip>
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.opName"></el-input>
                    <span v-else>{{ scope.row.opName }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="delFlag" label="权限资格" width="120">
                  <template v-slot="scope">
                    <div v-if="scope.row.isEdit">
                      <el-select v-model="scope.row.delFlag" clearable placeholder="请选择权限资格">
                        <el-option v-for="option in delOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                    <div v-else>
                      <el-select v-model="scope.row.delFlag" disabled placeholder="请选择权限资格">
                        <el-option v-for="option in delOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="comment" label="备注" width="200" show-overflow-tooltip>
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.comment"></el-input>
                    <span v-else>{{ scope.row.comment }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="180" width="180" center>
                  <template #default="scope">
                    <el-button type="primary" size="small" v-if="!scope.row.isEdit"
                               @click="editEighthInfo(scope.row)">编辑</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.isEdit"
                               @click="updateEighthInfo(scope.row)">保存</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.isEdit"
                               @click="cancelEighthInfo(scope.row, scope.$index)">取消
                    </el-button>
                    <el-button type="danger" size="small" @click.prevent="deleteEighthInfo(scope.row)">
                      删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="eleventhInfo" label="医疗安全行为记录" name="eleventhInfo">
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table :data="eleventhData" border style="width: 100%; height: 100%" stripe highlight-current-row :key="eleventhKey">
                <el-table-column type="index" prop="no" label="序号" width="80" />
                <el-table-column prop="id" label="id号" width="80" v-if="false"/>
                <el-table-column prop="socialNo" label="身份证号" width="180">
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.socialNo"></el-input>
                    <span v-else>{{ scope.row.socialNo }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="时间" width="200">
                  <template v-slot="scope">
                    <el-date-picker v-if="scope.row.isEdit" v-model="scope.row.time" type="date" style="width: 100%"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    <span v-else>{{ scope.row.time }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="record" label="事件性质" width="180">
                  <template #header>
                    <span>事件性质</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content>注：<br />事件性质包括医疗投诉、纠纷、差错、事故、表扬等。</template>
                      <el-icon color="red" size="14"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </template>
                  <template v-slot="scope">
                    <div v-if="scope.row.isEdit">
                      <el-select v-model="scope.row.record" clearable placeholder="请选择事件性质">
                        <el-option v-for="option in qualityOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                    <div v-else>
                      <el-select v-model="scope.row.record" disabled placeholder="请选择事件性质">
                        <el-option v-for="option in qualityOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="comment" label="情况摘要" width="450" show-overflow-tooltip>
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.comment"></el-input>
                    <span v-else>{{ scope.row.comment }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="180" width="180" center>
                  <template #default="scope">
                    <el-button type="primary" size="small" v-if="!scope.row.isEdit"
                               @click="editEleventhInfo(scope.row)">编辑</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.isEdit"
                               @click="updateEleventhInfo(scope.row)">保存</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.isEdit"
                               @click="cancelEleventhInfo(scope.row, scope.$index)">取消
                    </el-button>
                    <el-button type="danger" size="small" @click.prevent="deleteEleventhInfo(scope.row)">
                      删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="fifteenthInfo" label="应用医疗技术权限记录" name="fifteenthInfo">
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table :data="fifteenthData" border style="width: 100%; height: 100%" stripe highlight-current-row :key="fifteenthKey">
                <el-table-column type="index" prop="no" label="序号" width="80" />
                <el-table-column prop="id" label="id号" width="80" v-if="false"/>
                <el-table-column prop="socialNo" label="身份证号" width="180">
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.socialNo"></el-input>
                    <span v-else>{{ scope.row.socialNo }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="时间" width="200">
                  <template v-slot="scope">
                    <el-date-picker v-if="scope.row.isEdit" v-model="scope.row.time" type="date" style="width: 100%"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    <span v-else>{{ scope.row.time }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="权限名称" width="200">
                  <template #header>
                    <span>权限名称</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content>注：<br />含临床技能、病历书写与审核、处方权限、值班、会诊、门诊开设、分级麻醉、分级手术/操作授权、麻精处方、抗菌素处方分级。</template>
                      <el-icon color="red" size="14"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </template>
                  <template v-slot="scope">
                    <div v-if="scope.row.isEdit">
                      <el-select v-model="scope.row.name" clearable placeholder="请选择权限名称">
                        <el-option v-for="option in permissionsOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                    <div v-else>
                      <el-select v-model="scope.row.name" disabled placeholder="请选择权限名称">
                        <el-option v-for="option in permissionsOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="content" label="权限内容" width="350" show-overflow-tooltip>
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.content"></el-input>
                    <span v-else>{{ scope.row.content }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="delFlag" label="权限资格" width="120">
                  <template v-slot="scope">
                    <div v-if="scope.row.isEdit">
                      <el-select v-model="scope.row.delFlag" clearable placeholder="请选择权限资格">
                        <el-option v-for="option in delOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                    <div v-else>
                      <el-select v-model="scope.row.delFlag" disabled placeholder="请选择权限资格">
                        <el-option v-for="option in delOptions" :key="option.code" :label="option.name"
                                   :value="option.code"></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="comment" label="备注" width="200" show-overflow-tooltip>
                  <template v-slot="scope">
                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.comment"></el-input>
                    <span v-else>{{ scope.row.comment }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="180" width="180" center>
                  <template #default="scope">
                    <el-button type="primary" size="small" v-if="!scope.row.isEdit"
                               @click="editFifteenthInfo(scope.row)">编辑</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.isEdit"
                               @click="updateFifteenthInfo(scope.row)">保存</el-button>
                    <el-button type="primary" size="small" v-if="scope.row.isEdit"
                               @click="cancelFifteenthInfo(scope.row, scope.$index)">取消
                    </el-button>
                    <el-button type="danger" size="small" @click.prevent="deleteFifteenthInfo(scope.row)">
                      删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup name="TechnologyArchivesCore">
import {nextTick, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {QuestionFilled} from "@element-plus/icons-vue";
import {
  selectTechnologyArchives8, saveTechnologyArchives8, delTechnologyArchives8ByCode,
  selectTechnologyArchives11, saveTechnologyArchives11, delTechnologyArchives11ByCode,
  selectTechnologyArchives15, saveTechnologyArchives15, delTechnologyArchives15ByCode
} from "@/api/technology-archives/technology-archives";
import {useUserStore} from "@/pinia/user-store";

const editableTabsValue = ref('eighthInfo')
const userInfo = useUserStore().userInfo
const delOptions = [{ code: '0', name: '授予' }, { code: '1', name: '除去' }]
const qualityOptions = [{ code: '1', name: '医疗投诉' }, { code: '2', name: '医疗纠纷' },
  { code: '3', name: '不良事件' }, { code: '4', name: '表彰' }, { code: '5', name: '表扬' },
  { code: '6', name: '差错' }, { code: '7', name: '事故' }, { code: '9', name: '其他' }]
const permissionsOptions = [{ code: '1', name: '临床技能' }, { code: '2', name: '病历书写与审核' },
  { code: '3', name: '处方权限' }, { code: '4', name: '值班' }, { code: '5', name: '会诊' },
  { code: '6', name: '门诊开设' }, { code: '7', name: '分级麻醉' }, { code: '8', name: '分级手术/操作授权' },
  { code: '9', name: '麻精处方' }, { code: '10', name: '抗菌素处方分级' }]
onMounted(() => {
  nextTick(() => {
    queryTechnologyArchives8()
  })
})
// 切换tab
const handleClick = (tab) => {
  // 查询哪个tab页面
  editableTabsValue.value = tab.props.name
  if(editableTabsValue.value === 'eighthInfo'){
    queryTechnologyArchives8()
  } else if(editableTabsValue.value === 'eleventhInfo'){
    queryTechnologyArchives11()
  } else if(editableTabsValue.value === 'fifteenthInfo'){
    queryTechnologyArchives15()
  }
}

const megTip = '核心数据有变更,与原始数据记录存在关联,请谨慎做更改，是否确认！！！'
let eighthKey = ref(1)
const eighthData = ref([])
let eleventhKey = ref(1)
const eleventhData = ref([])
let fifteenthKey = ref(1)
const fifteenthData = ref([])
const queryTechnologyArchives8 = () => {
  selectTechnologyArchives8()
    .then((res) => {
      res.forEach(row => {
        // 是否标记
        row['isEdit'] = false
        // 是否新增
        row['isAdd'] = false
      })
      eighthData.value = res
    })
    .catch(() => {
      eighthData.value = []
    })
}
const queryTechnologyArchives11 = () => {
  selectTechnologyArchives11()
    .then((res) => {
      res.forEach(row => {
        // 是否标记
        row['isEdit'] = false
        // 是否新增
        row['isAdd'] = false
      })
      eleventhData.value = res
    })
    .catch(() => {
      eleventhData.value = []
    })
}
const queryTechnologyArchives15 = () => {
  selectTechnologyArchives15()
    .then((res) => {
      res.forEach(row => {
        // 是否标记
        row['isEdit'] = false
        // 是否新增
        row['isAdd'] = false
      })
      fifteenthData.value = res
    })
    .catch(() => {
      fifteenthData.value = []
    })
}

const onAddItem = () => {
  if (editableTabsValue.value === 'eighthInfo') {
    eighthData.value.push({
      socialNo: userInfo.socialNo,
      time: '',
      name: '',
      opName: '',
      opCode: '',
      delFlag: '',
      comment: '',
      isEdit: true,
      isAdd: true,
    })
  } else if (editableTabsValue.value === 'eleventhInfo') {
    eleventhData.value.push({
      socialNo: userInfo.socialNo,
      time: '',
      record: '',
      comment: '',
      isEdit: true,
      isAdd: true,
    })
  } else if (editableTabsValue.value === 'fifteenthInfo') {
    fifteenthData.value.push({
      socialNo: userInfo.socialNo,
      time: '',
      name: '',
      content: '',
      delFlag: '',
      comment: '',
      isEdit: true,
      isAdd: true,
    })
  }
}

// 限制类医疗技术档案增删改存开始
// 编辑
const editEighthInfo = (row) => {
  // 备份原始数据
  row['oldRow'] = JSON.parse(JSON.stringify(row))
  row.isEdit = true
}
// 取消
const cancelEighthInfo = (row, index) => {
  // 如果是新增的数据
  if (row.isAdd) {
    eighthData.value.splice(index, 1)
  } else {
    // 不是新增的数据  还原数据
    for (const i in row.oldRow) {
      row[i] = row.oldRow[i]
    }
  }
  eighthKey.value = Math.random()
}
// 保存
const updateEighthInfo = (row) => {
  if (!row.socialNo) {
    ElMessage({
      type: "warning",
      message: "身份证号不存在，请检查!",
      duration: 2500,
      showClose: true,
    });
    return
  }
  callSaveEighthInfo(row)
}

const callSaveEighthInfo = (row) => {
  let title = '请确认是否保存<span style="color:#d12020;">' + row.name + '</span>?'
  ElMessageBox.confirm(title, {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    saveTechnologyArchives8(row).then((res) => {
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      queryTechnologyArchives8()
    })
  }).catch((action) => {
    if (action === 'cancel') {
      queryTechnologyArchives8()
    }
  })
}

const deleteEighthInfo = (row) => {
  let title = '请确认是否删除<span style="color:#d12020;">' + row.name + '</span>?'
  ElMessageBox.confirm(title, {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    delTechnologyArchives8ByCode(row.socialNo, row.id).then((res) => {
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      queryTechnologyArchives8()
    })
  }).catch((action) => {
    if (action === 'cancel') {
      queryTechnologyArchives8()
    }
  })
}
// 限制类医疗技术档案增删改存结束

// 医疗安全行为记录增删改存开始
// 编辑
const editEleventhInfo = (row) => {
  // 备份原始数据
  row['oldRow'] = JSON.parse(JSON.stringify(row))
  row.isEdit = true
}
// 取消
const cancelEleventhInfo = (row, index) => {
  // 如果是新增的数据
  if (row.isAdd) {
    eleventhData.value.splice(index, 1)
  } else {
    // 不是新增的数据  还原数据
    for (const i in row.oldRow) {
      row[i] = row.oldRow[i]
    }
  }
  eleventhKey.value = Math.random()
}
// 保存
const updateEleventhInfo = (row) => {
  if (!row.socialNo) {
    ElMessage({
      type: "warning",
      message: "身份证号不存在，请检查!",
      duration: 2500,
      showClose: true,
    });
    return
  }
  callSaveEleventhInfo(row)
}

const callSaveEleventhInfo = (row) => {
  let title = '请确认是否保存<span style="color:#d12020;">' + row.comment.length > 10 ? row.comment.substring(0,10) + '...' : row.comment + '</span>?'
  ElMessageBox.confirm(title, {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    saveTechnologyArchives11(row).then((res) => {
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      queryTechnologyArchives11()
    })
  }).catch((action) => {
    if (action === 'cancel') {
      queryTechnologyArchives11()
    }
  })
}

const deleteEleventhInfo = (row) => {
  let title = '请确认是否删除<span style="color:#d12020;">' + row.comment.length > 10 ? row.comment.substring(0,10) + '...' : row.comment + '</span>?'
  ElMessageBox.confirm(title, {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    delTechnologyArchives11ByCode(row.socialNo, row.id).then((res) => {
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      queryTechnologyArchives11()
    })
  }).catch((action) => {
    if (action === 'cancel') {
      queryTechnologyArchives11()
    }
  })
}
// 医疗安全行为记录增删改存结束

// 应用医疗技术权限记录增删改存开始
// 编辑
const editFifteenthInfo = (row) => {
  // 备份原始数据
  row['oldRow'] = JSON.parse(JSON.stringify(row))
  row.isEdit = true
}
// 取消
const cancelFifteenthInfo = (row, index) => {
  // 如果是新增的数据
  if (row.isAdd) {
    fifteenthData.value.splice(index, 1)
  } else {
    // 不是新增的数据  还原数据
    for (const i in row.oldRow) {
      row[i] = row.oldRow[i]
    }
  }
  fifteenthKey.value = Math.random()
}
// 保存
const updateFifteenthInfo = (row) => {
  if (!row.socialNo) {
    ElMessage({
      type: "warning",
      message: "身份证号不存在，请检查!",
      duration: 2500,
      showClose: true,
    });
    return
  }
  callSaveFifteenthInfo(row)
}

const callSaveFifteenthInfo = (row) => {
  let title = '请确认是否保存<span style="color:#d12020;">' + row.name + '</span>?'
  ElMessageBox.confirm(title, {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    saveTechnologyArchives15(row).then((res) => {
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      queryTechnologyArchives15()
    })
  }).catch((action) => {
    if (action === 'cancel') {
      queryTechnologyArchives15()
    }
  })
}

const deleteFifteenthInfo = (row) => {
  let title = '请确认是否删除<span style="color:#d12020;">' + row.name + '</span>?'
  ElMessageBox.confirm(title, {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    delTechnologyArchives15ByCode(row.socialNo, row.id).then((res) => {
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      queryTechnologyArchives15()
    })
  }).catch((action) => {
    if (action === 'cancel') {
      queryTechnologyArchives15()
    }
  })
}
// 应用医疗技术权限记录增删改存结束
</script>