kg-viewer/src/views/dict/Drugs.vue

<template>
    <div class="box">      
      <BasicDialog :isOpen="data.dataDialogOpen" @close="data.dataDialogOpen = false">
        <!-- 自定义标题和内容 -->
        <template v-slot:header>{{data.dialogHeader}}</template>
        <template v-slot>
          <table >
            <tbody>
              <tr><td class="prop_header">ID</td><td class="prop_value">{{data.dialogContent['id']}}</td></tr>
              <tr><td class="prop_header">药品代码</td><td class="prop_value">{{data.dialogContent['drug_code']}}</td></tr>
              <tr><td class="prop_header">注册名</td><td class="prop_value">{{data.dialogContent['reg_name']}}</td></tr>
              <tr><td class="prop_header">商品名</td><td class="prop_value">{{data.dialogContent['prod_name']}}</td></tr>
              <tr><td class="prop_header">注册剂型</td><td class="prop_value">{{data.dialogContent['reg_dosage_form']}}</td></tr>
              <tr><td class="prop_header">商品剂型</td><td class="prop_value">{{data.dialogContent['act_dosage_form']}}</td></tr>
              <tr><td class="prop_header">注册规格</td><td class="prop_value">{{data.dialogContent['reg_spec']}}</td></tr>
              <tr><td class="prop_header">商品规格</td><td class="prop_value">{{data.dialogContent['act_spec']}}</td></tr>
              <tr><td class="prop_header">包装材料</td><td class="prop_value">{{data.dialogContent['pkg_mat']}}</td></tr>
              <tr><td class="prop_header">最小包装</td><td class="prop_value">{{data.dialogContent['min_pack_size']}}</td></tr>
              <tr><td class="prop_header">最小包装单位</td><td class="prop_value">{{data.dialogContent['min_pack_unit']}}</td></tr>
              <tr><td class="prop_header">最小用量单位</td><td class="prop_value">{{data.dialogContent['min_dosage_unit']}}</td></tr>
              <tr><td class="prop_header">生产厂商</td><td class="prop_value">{{data.dialogContent['prod_factory']}}</td></tr>
              <tr><td class="prop_header">准字</td><td class="prop_value">{{data.dialogContent['license_no']}}</td></tr>
              <tr><td class="prop_header">药品标准码</td><td class="prop_value">{{data.dialogContent['drug_std_code']}}</td></tr>
              <tr><td class="prop_header">分销厂商</td><td class="prop_value">{{data.dialogContent['subpkg_factory']}}</td></tr>
              <tr><td class="prop_header">销售状态</td><td class="prop_value">{{data.dialogContent['sales_status']}}</td></tr>
              <tr><td class="prop_header">社保名称</td><td class="prop_value">{{data.dialogContent['social_insurance_name']}}</td></tr>
              <tr><td class="prop_header">甲乙类</td><td class="prop_value">{{data.dialogContent['jiayi_category']}}</td></tr>
              <tr><td class="prop_header">社保剂型</td><td class="prop_value">{{data.dialogContent['social_dosage_form']}}</td></tr>
              <tr><td class="prop_header">序列号</td><td class="prop_value">{{data.dialogContent['serial_no']}}</td></tr>
              <tr><td class="prop_header">注释</td><td class="prop_value">{{data.dialogContent['comments']}}</td></tr>

            </tbody>
          </table>
</template>
      </BasicDialog>
      <ActionBar @reset="resetParams" @refresh="refreshTable">
        <template #left>
          <h2>药品字典</h2>
        </template>
        <template #right>
          <el-input v-model="searchParams.name" placeholder="请输入ID"  clearable />
        </template>
      </ActionBar>
      <el-table :data="tableData" style="width: 100%" max-height="calc(100vh - 270px)">
        <el-table-column prop="drug_code" label="Code"/>
        <el-table-column prop="reg_name" label="Name"/>
        <el-table-column prop="reg_dosage_form" label="Dosage Form"/>
        <el-table-column prop="reg_spec" label="Spec."/>
        <el-table-column prop="prod_factory" label="Prod. Factory"/>

        <el-table-column fixed="right" width="170">
          <template #header>
            <div style="display: flex;justify-content: center;align-items: center">
              <div style="margin-right: 10px">操作</div>
            </div>
          </template>
          <template #default="scope">
            <el-button type="primary"  @click="handleEdit(scope.row)">
              详细资料
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination ref="paginationRef" :params="searchParams" :reqFunc="paginationList" @pageData="setTableData" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive } from "vue";
  import BasicDialog from "@/components/BasicDialog.vue"
  import ActionBar from "@/components/ActionBar.vue";
  import Pagination from "@/components/Pagination.vue"
  import { paginationList,save } from "@/api/drugs/index.ts"
  import usePagination from "@/compositionApi/pagination.ts"


  
  const {searchParams, tableData, paginationRef, setTableData, refreshTable,resetParams} =  usePagination();
  // const {tableFields} = useTableField()
  // const { openForm,rules,formDesc,submitForm ,editRef} = useFromEdit(refreshTable)

  const data = reactive({    
    dataDialogOpen: false,
    dialogHeader: null,
    dialogContent: {},
    search: "",
    id: 0,
  });
  

  function handleEdit(row: any){
      data.id = row.id
      data.dialogHeader = row.reg_name;
      data.dialogContent = row;        
      data.dataDialogOpen = true;
    }

  
  </script>
  
  <style lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
  }
  .prop_header{
    background-color: #CDCDCD;    
    font-weight: bold;
  }
  .prop_value{
    background-color: #adcddb;    
    padding-left: 10px;
  }
  </style>