web/src/components/settings/ItemSearch.vue

<template>
  <Mask :width="800" :height="600" :is-show="show" @close="close" title="药品" :show-footer="true">
    <template #default>
      <div class="search_content_wrapper">
        <div class="search_wrapper">
          <span>项目名称:</span>
          <el-input
              class="input"
              v-model="keyword"
              placeholder="请输入药品名称或者编号"
              @keydown.enter="searchSocialItem"
              clearable/>
          <el-button type="primary" @click="searchSocialItem">搜索</el-button>
        </div>
        <div class="search_result" style="width: 100%;padding: 0 12px">
          <div class="result_table" style="width: 100%;height: 100%;box-sizing: border-box;padding-bottom: 20px">
            <el-table v-loading="isloading" :data="searchResult.list"
                      style="width: 100%;height: 100%"
                      highlight-current-row
                      @row-click="changeCurRow"
                      :row-class-name="tableRowClassName">
              <el-table-column prop="name" label="名称" fixed show-overflow-tooltip/>
              <el-table-column prop="code" fixed label="医疗目录编码" show-overflow-tooltip/>
              <el-table-column prop="unit" label="计价单位" width="180" show-overflow-tooltip/>
            </el-table>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="bottom">
        <div class="page_btn_list">
          <el-pagination background layout="prev, pager, next" :page-count="searchResult.totalPage"
                         v-model:current-page="searchResult.pageNum" @current-change="changePage"/>
        </div>
        <div class="btn">
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button type="primary" @click="close">关闭</el-button>
        </div>
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps} from "vue";
import {post} from '@/utils/request.ts'
import Mask from "@/components/common/Mask.vue";

let curItem: any = null;
let keyword = ref('');
const show = ref(false);

const emit = defineEmits(["confirm"])

let searchResult = ref({
  totalPage: 0,
  list: [],
  pageNum: 1,
});


let tableRowClassName = (res: any) => {
  if (curItem != null && curItem.id == res.row.id) {
    return 'invalid';
  }
  return 'valid'
}

let changePage = (page: number) => {
  searchSocialItem()
}
const changeCurRow = (row: any) => {
  curItem = row;
}

const init = (_name: string) => {
  keyword.value = _name;
  show.value = true;
  initSearchData()
  if (keyword.value && keyword.value != "") {
    searchSocialItem()
  }

};
defineExpose({init});

function initSearchData() {
  isloading.value = false;
  curItem = null;
}


let confirm = () => {
  emit('confirm', curItem)
  close()


}
let isloading = ref(false);
let searchSocialItem = () => {
  isloading.value = true;
  post("social/directory/itemSearch", {
    keyword: keyword.value, pageSize: 20, pageNum: searchResult.value.pageNum
  }, {catch_error: true}).then((res: any) => {
    searchResult.value.totalPage = res.total_page;
    searchResult.value.list = res.list;
    initSearchData()
  }).catch(() => {
    isloading.value = false;
  })
}
const close = () => {
  show.value = false;
}
</script>
<style scoped lang="scss">
.search_bottom {
  display: block;
  margin-top: 10px;
}

.search_content_wrapper {
  background-color: #FFF;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: auto;
  margin-top: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.search_wrapper {
  position: relative;
  width: 100%;
  display: flex;
  margin: 0 auto;
  height: 60px;

  span {
    position: relative;
    display: block;
    width: 100px;
    text-align: right;
    line-height: 40px;
  }

  .input {
    display: block;
    flex: 1;
  }


  button {
    width: 80px;
    line-height: 40px;
    color: #FFF;
    margin-left: 10px;
    height: 40px;
    background-color: #409EFF;
    border: none;
  }
}

:deep(.invalid) {
  color: #409EFF;
}

.search_result {
  width: 100%;
  flex: 1;
  min-height: 0;
}

.bottom {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

:deep(.el-input__wrapper) {
  width: 100%;
}
</style>