web/src/views/settings/item.vue

<template>
  <div class="container-wrapper">
    <div class="title">
      <div class="title-search">
        <el-form
            :model="search"
            label-width="auto"
            :inline="true"
            class="demo-form-inline"
        >
          <el-form-item>
            <el-input v-model="search.itemSocialCode" placeholder="医保码编码" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="search.itemName" placeholder="项目名称" style="width: 200px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="title-btn">
        <span  class="default-btn" @click="initData()">查询</span>
        <span  class="default-btn" @click="resetSearch" style="margin: 0 24px">重置</span>
        <span  class="default-btn" @click="openDialog">新建项目</span>
<!--        <el-button type="primary" @click="openSetMenu">组套</el-button>-->
      </div>
    </div>
    <div class="table">
      <el-scrollbar>
        <el-table :data="tableData" @row-click="rowClick">
          <el-table-column prop="itemSocialCode" label="医保码编码" width="200"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="itemName" label="项目名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
          <el-table-column prop="purchaseUnitPrice" label="原价"></el-table-column>
          <el-table-column prop="unitPrice" label="售价"></el-table-column>
          <el-table-column prop="createDatetime" label="创建时间">
            <template #default="scope">
              {{ formatDate(scope.row.createDatetime) }}
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </div>
  </div>
  <ItemEdit :id="id" ref="ItemEditRef" @close="initData()"></ItemEdit>
  <SetMenu ref="setMenuRef"></SetMenu>
</template>
<script setup lang="ts">
import {nextTick, onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import Mask from "@/components/common/Mask.vue";
import ItemEdit from "@/components/settings/ItemEdit.vue";
import SetMenu from "@/components/settings/SetMenu.vue";
import {formatDate} from "@/utils/dateUtils.ts";
import {Plus} from "@element-plus/icons-vue"

const state = ref([])
const options = ref([
  {
    value: '选项1',
    label: '黄金糕',
    disabled: true
  },
])
const selectRef = ref();
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  console.log(queryString)
  // post("goods/goods/search", {keyword: queryString}).then((res: any) => {
  //   options.value = res;
  //   let list = res;
  //   for (let i = 0; i < list.length; i++) {
  //     list[i].value = list[i].name;
  //   }
  //   console.log("search",list)
  //   // cb(res)
  // })
}
const emit = defineEmits(['selectCallBack'])
const handleSelect = (item: any) => {
  let goods = JSON.parse(JSON.stringify(item));
  let inventory = {
    hilistCode: goods.hilistCode,
    unitPrice: goods.unitPrice,
    packagingUnit: goods.packagingUnit,
    minPackagingUnit: goods.minPackagingUnit,
    disassemblyPrice: goods.disassemblyPrice,
    minPackagingNumber: goods.minPackagingNumber,
    goodId: goods.id,
    name: goods.name,
    wholeNumber: 0,
    idCode: (goods.idCode && goods.idCode != "") ? goods.idCode.split(",") : [],
    purchaseUnitPrice: goods.purchaseUnitPrice,
    trdnFlag: goods.trdnFlag
  }
  if (selectRef.value) {
    (selectRef.value as HTMLElement).blur();
  }
  emit('selectCallBack', inventory);
  state.value = []

}
const isShow = ref(false)
const ItemEditRef = ref<any>('')
const id = ref<any>('')
const rowClick = ((row: any) => {
  id.value = row.id
  openDialog()
})

const tableData = ref<any>([])
const initData = () => {
  post('item/list', {pageNum: page.value, pageSize: pageSize.value, ...search.value}).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
  })
  id.value = ''
  isShow.value = false
}
onMounted(() => {
  initData()
})
const setMenuRef = ref<any>('')
const openSetMenu = () => {
  nextTick(() => {
    setMenuRef.value?.init();
  });
}
const changePage = (val: any) => {
  page.value = val
  initData()
};
const pageSize = ref(20);
const page = ref(1);
const total = ref(0);
const search = ref<any>({})
const resetSearch = () => {
  search.value = {}
  initData()
}
const openDialog = () => {
  nextTick(() => {
    ItemEditRef.value?.init()
  })
}
const loading= ref(true)
</script>
<style scoped lang="scss">
.container-wrapper {
  padding: 24px;
  background: #fff;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;

    .title-search {
      padding: 10px;
      border-radius: 10px;
      box-sizing: border-box;
      margin-top: 10px;
      margin-bottom: 10px;
      display: flex;
    }

    .el-popper.is-pure {
      padding: 10px;
    }
  }

  .table {
    flex: 1;
    min-height: 0;
  }

  .bottom {
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
  }
}

:deep(.el-input__wrapper){
  height: 42px;
}
</style>