web_dist/src/views/dictionary/ShouShuBuWeiWeiHu.vue

<template>
  <div class="layout_container">
    <header>
      部位名称:
      <el-input v-model="shouShuBuWeiBianMa" clearable prefix-icon="Search" style="width: 120px"/>
      <el-divider direction="vertical"></el-divider>
      新增部位名称:
      <el-input v-model="newPart" :maxlength="16" clearable prefix-icon="Plus" show-word-limit
                style="width: 260px"></el-input>
      <el-button icon="Plus" type="success" @click="clickToAddPart">新增</el-button>
    </header>
    <div class="layout_main layout_el-table">
      <el-table :data="tempData.slice((shuJu.currentPage - 1) * 30, shuJu.currentPage * 30)"
                highlight-current-row>
        <el-table-column label="编码" prop="code"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm
                cancel-button-text="取消"
                confirm-button-text="确认"
                icon="Info"
                iconColor="#F56C6C"
                title="是否删除该手术"
                @confirm="delPart(scope.$index, scope.row.code)"
            >
              <template #reference>
                <el-button icon="Delete" size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="shuJu.currentPage"
                     :page-size="30"
                     :total="shuJu.total"
                     background
                     layout=" prev, pager, next,total"
                     @current-change="fanYe"/>
    </div>
  </div>
</template>

<script setup>
import {addASurgicalSite, huoQuShouShuBuWei, removeSurgicalSite} from '@/api/zhu-yuan-yi-sheng/shou-shu-shen-qing'
import {computed} from 'vue'
import {stringIsBlank} from '@/utils/blank-utils'
import {ElMessage} from 'element-plus'

const shouShuBuWeiBianMa = ref('')
const shuJu = ref({
  data: [],
  currentPage: 1,
  total: 0,
})

const newPart = ref('')

const tempData = computed(() => {
  shuJu.value.total = shuJu.value.data.length
  return shuJu.value.data.filter((item) => {
    return item.name.toString().indexOf(shouShuBuWeiBianMa.value) > -1
  })
})

const fanYe = (val) => {
  shuJu.value.currentPage = val
}

const clickToAddPart = () => {
  if (stringIsBlank(newPart.value)) {
    ElMessage.error('请先输入部位名称')
    return
  }
  addASurgicalSite(newPart.value).then((res) => {
    shuJu.value.data.push({
      code: res,
      name: newPart.value,
    })
    newPart.value = ''
  })
}

const delPart = (index, code) => {
  removeSurgicalSite(code).then(() => {
    shuJu.value.data.splice(index, 1)
  })
}

onMounted(() => {
  huoQuShouShuBuWei(shouShuBuWeiBianMa.value).then((res) => {
    shuJu.value.data = res
    shuJu.value.total = shuJu.value.data.length
  })
})
</script>