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 class="iconfont icon-RectangleCopy1"></span>
          查询
        </span>
        <span  class="default-btn" @click="resetSearch">
          <span class="iconfont icon-RectangleCopy"></span>
          重置
        </span>
        <span  class="default-btn" @click="openDialog">
          <span class="iconfont icon-jia"></span>
          新建项目
        </span>
        <span  class="default-btn" @click="openGroupDialog">
          <span class="iconfont icon-qunzutaozhuang"></span>
          组套
        </span>
      </div>
    </div>
    <div class="table">
      <el-scrollbar>
        <el-table :data="tableData" @row-click="rowClick" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
          <el-table-column prop="itemSocialCode" label="医保码编码" width="200"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="itemName" label="项目名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" label="单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="purchaseUnitPrice" label="原价" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.purchaseUnitPrice ? scope.row.purchaseUnitPrice + '元' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" label="售价" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.unitPrice ? scope.row.unitPrice + '元' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="createDatetime" label="创建时间" show-overflow-tooltip>
            <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>
  <GroupList ref="isOpenGroup"></GroupList>
</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/item/ItemEdit.vue";
import GroupList from "@/components/settings/item/group/GroupList.vue";
import {formatDate} from "@/utils/dateUtils.ts";
import {Plus} from "@element-plus/icons-vue"


const isOpenGroup = ref();
const emit = defineEmits(['selectCallBack'])
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 openGroupDialog = () => {
  nextTick(() => {
    isOpenGroup.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;
    justify-content: space-between;

    .title-search {
      border-radius: 10px;
      box-sizing: border-box;
      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>