web_dist/src/views/dictionary/AdverseDept.vue

<template>
  <div class="layout_container">
    <header class="round-header">
      <el-input
          v-model="searchContent"
          prefix-icon="Search"
          placeholder="科室编码、名称"
          style="width: 200px;"
          clearable
      />
      <el-divider direction="vertical" />
      <el-button
        type="primary"
        icon="Plus"
        @click="handleClickAdd"
      >
        添加科室
      </el-button>
    </header>
    <div class="layout_main layout_el-table">
      <el-table
          ref="tableRef"
          :data="filterList"
          stripe
          highlight-current-row
      >
        <el-table-column prop="deptId" label="科室编码" />
        <el-table-column label="科室名称">
          <template #default="{row}">
            <div v-if="row.editType">
              <el-input
                  v-model="row.deptName"
                  readonly
                  @click="showSearchDept"
                  style="width: 80%;"
              />
            </div>
            <div v-else>
              {{ row.deptName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="leaderId" label="不良事件处理人工号" />
        <el-table-column prop="leaderName" label="不良事件处理人姓名">
          <template #default="{row}">
            <div v-if="row.editType">
              <el-input
                  v-model="row.leaderName"
                  readonly
                  @click="showSearchPhysician"
                  style="width: 80%;"
              />
            </div>
            <div v-else>
              {{ row.leaderName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row, $index}">
            <el-button
                v-if="!row.editType"
                type="primary"
                icon="Edit"
                plain
                @click="handleClickEdit(row)"
            >
              修改
            </el-button>
            <el-button
                v-if="row.editType"
                type="info"
                icon="Refresh"
                plain
                @click="handleClickCancel(row)"
            >
              取消
            </el-button>
            <el-button
                v-if="row.editType"
                type="success"
                icon="Check"
                plain
                @click="handleClickSave(row)"
            >
              保存
            </el-button>
            <el-button
                v-if="!row.editType"
                type="danger"
                icon="Delete"
                plain
                @click="handleClickDel(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Search
        v-if="showSearch"
        :target="searchTarget"
        :title="searchTitle"
        :show-emp-dept="searchTarget === 'physician'"
        @click-item="onChooseItem"
        @close="showSearch = false"
    />
  </div>
</template>

<script setup>
import Search from '@/components/search/Index.vue'
import {getAllAdverseDept, saveAdverseDept} from "@/api/adverse-event/index.js";
import XEUtils from "xe-utils";
import {xcMessage} from "@/utils/xiaochan-element-plus";
import {ElMessageBox} from "element-plus";

const tableRef = ref();

const searchContent = ref('')
const adverseDeptList = ref([])
const filterList = computed(() => {
  return adverseDeptList.value.filter((item) => {
    return item.deptId.indexOf(searchContent.value) !== -1
    || item.deptName.indexOf(searchContent.value) !== -1
  })
})

const tempOriDept = ref({})
const currentDept = ref({})

const showSearch = ref(false)
const searchTarget = ref('')
const searchTitle = ref('')

function showSearchDept() {
  searchTarget.value = 'dept'
  searchTitle.value = '科室检索'
  showSearch.value = true
}

function showSearchPhysician() {
  searchTarget.value = 'physician'
  searchTitle.value = '人员检索'
  showSearch.value = true
}

function onChooseItem(item) {
  if (searchTarget.value === 'dept') {
    currentDept.value.deptId = item.code
    currentDept.value.deptName = item.name
  } else {
    currentDept.value.leaderId = item.codeRs
    currentDept.value.leaderName = item.name
    currentDept.value.leaderCode = item.code
  }
  showSearch.value = false
}

function handleClickAdd() {
  currentDept.value = {
    editType: 'ADD',
    deptId: '',
    deptName: '',
    leaderId: '',
    leaderName: '',
    leaderCode: ''
  }
  adverseDeptList.value.push(currentDept.value)
  tableRef.value.setCurrentRow(currentDept.value)
  nextTick(() => {
    const bodyWrapper = tableRef.value.$el.querySelector('.el-table__body')
    if (bodyWrapper) {
      tableRef.value.setScrollTop(bodyWrapper.scrollHeight)
    }
  })
}

function handleClickEdit(row) {
  tempOriDept.value = XEUtils.clone(row)
  row.editType = 'UPDATE'
  currentDept.value = row
}

function handleClickCancel(row) {
  if (row.editType === 'ADD') {
    adverseDeptList.value.splice(adverseDeptList.value.length - 1, 1)
  } else {
    row.deptId = tempOriDept.value.deptId
    row.deptName = tempOriDept.value.deptName
    row.leaderId = tempOriDept.value.leaderId
    row.leaderName = tempOriDept.value.leaderName
    row.leaderCode = tempOriDept.value.leaderCode
    row.editType = null
  }
  currentDept.value = {}
}

function handleClickSave(row, index) {
  saveAdverseDept(row).then((res) => {
    xcMessage.success(res)
    currentDept.value = {}
    if (row.editType === 'DELETE' && index !== null) {
      adverseDeptList.value.splice(index, 1)
    } else {
      row.editType = null
    }
  })
}

function handleClickDel(row, index) {
  ElMessageBox.confirm(`确定要删除此项吗？（${row.deptName}）`, '提示', {
    type: 'warning',
  }).then(() => {
    row.editType = 'DELETE'
    handleClickSave(row, index)
  }).catch(() => {})
}

onMounted(() => {
  getAllAdverseDept().then(res => {
    adverseDeptList.value = res
  })
})
</script>