web/src/components/settings/SetMenu.vue

<template>
  <Mask :width="800" :height="600" :is-show="show" @close="show=false" title="项目列表">
    <div class="search_content_wrapper">
      <div class="search_wrapper">
        <span>药品名称:</span>
        <el-input
            class="input"
            v-model="keyword"
            placeholder="请输入药品名称或者编号"
            @input="search_social"
            clearable/>
        <el-button type="primary" @click="add">添加项目</el-button>
      </div>
      <div class="content">
        <el-table :data="tableList" @row-click="rowClick">
          <el-table-column
              prop="name"
              label="项目名称">
          </el-table-column>
          <el-table-column
              prop="purchaseUnitPrice"
              label="总进货价">
          </el-table-column>
          <el-table-column
              prop="unitPrice"
              label="总售价">
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="current_page"
              :page-size="20"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </Mask>
  <AddProject :add="true" ref="addProjectMaskRef" @close="init"></AddProject>
</template>
<script setup lang="ts">
import {ref, nextTick} from "vue";
import {post} from '@/utils/request.ts'
import Mask from "@/components/common/Mask.vue";
import AddProject from "@/components/settings/AddProject.vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {ElMessage} from "element-plus";

let current_search_data: any = null;
let keyword = ref('');
let current_page = ref(1)
const show = ref(false);

const emit = defineEmits(["confirm"])

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

const init = () => {

  post("item/group/list", {
    name: keyword.value,
    page: current_page.value,
    size: 10,
  }).then((res: any) => {
    tableList.value = res.list
    total.value = res.total_count
    show.value = true;
  })

};
defineExpose({init});

function init_search_data() {
  isloading.value = false;
  current_search_data = null;
  search_result.value = {
    totalPage: 0,
    list: [],
    pageNum: 1,
  }
}

const tableList = ref<any>([
  {
    name: '',
    purchaseUnitPrice: '',
    unitPrice: '',
  }
])
let isloading = ref(false);
let search_social = () => {
  isloading.value = true;
}
const addProjectMaskRef = ref<any>(null);
const rowClick = (row: any) => {
  nextTick(() => {
    addProjectMaskRef.value?.init(row);
  })
}
const add = () => {
  nextTick(() => {
    addProjectMaskRef.value?.initData();
  })
}
const total=ref<any>(0)
const handleCurrentChange = (val: any) => {
  current_page.value = val;
  init();
}
</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;
}

.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;
  }
}

.content {
  display: block;
  width: 100%;
  flex: 1;
  //min-height: 0;

  table {
    //border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    //border: 1px solid #ccc;
    padding: 8px;
    text-align: left;

  }

  th {
    //background-color: #F9F9F9;
  }

  /* 可选：为可点击的行添加鼠标悬停效果 */
  tr:hover {
    //background-color: #f5f5f5;
  }
}

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

.search_result {
  width: 100%;
  height: 400px;
}
</style>