干燥机配套车间生产管理系统/云平台服务端
baoshiwei
2024-05-27 fa3ac93010bea3805438ee3ab0a182bfbf7423da
src/views/dry/DryHerbList.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,169 @@
<template>
   <div>
      <!--引用表格-->
      <BasicTable @register="registerTable" :rowSelection="rowSelection">
         <!--插槽:table标题-->
         <template #tableTitle>
            <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> æ–°å¢ž</a-button>
            <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> å¯¼å‡º</a-button>
            <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
               <template #overlay>
                  <a-menu>
                     <a-menu-item key="1" @click="batchHandleDelete">
                        <Icon icon="ant-design:delete-outlined" />
                        åˆ é™¤
                     </a-menu-item>
                  </a-menu>
               </template>
               <a-button
                  >批量操作
                  <Icon icon="mdi:chevron-down" />
               </a-button>
            </a-dropdown>
         </template>
         <!--操作栏-->
         <template #action="{ record }">
            <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
         </template>
         <!--字段回显插槽-->
         <template #htmlSlot="{ text }">
            <div v-html="text"></div>
         </template>
         <!--省市区字段回显插槽-->
         <template #pcaSlot="{ text }">
            {{ getAreaTextByCode(text) }}
         </template>
         <template #fileSlot="{ text }">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
            <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
         </template>
      </BasicTable>
      <!-- è¡¨å•区域 -->
      <DryHerbModal @register="registerModal" @success="handleSuccess" />
   </div>
</template>
<script lang="ts" name="dry-dryHerb" setup>
   import { ref } from 'vue'
   import DryHerbModal from './components/DryHerbModal.vue'
   import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './api/DryHerb.api'
   import { columns, searchFormSchema } from './dataDefine/DryHerb.data'
   import { useModal } from '/@/components/Modal'
   import { BasicTable, TableAction } from '/@/components/Table'
   import { useListPage } from '/@/hooks/system/useListPage'
   import { downloadFile } from '/@/utils/common/renderUtils'
   const checkedKeys = ref<Array<string | number>>([])
   //注册model
   const [registerModal, { openModal }] = useModal()
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
      tableProps: {
         title: '药材',
         api: list,
         columns,
         canResize: false,
         formConfig: {
            //labelWidth: 120,
            schemas: searchFormSchema,
            autoSubmitOnEnter: true,
            showAdvancedButton: true,
            fieldMapToNumber: [],
            fieldMapToTime: [],
         },
         actionColumn: {
            width: 120,
            fixed: 'right',
         },
      },
      exportConfig: {
         name: '药材',
         url: getExportUrl,
      },
      importConfig: {
         url: getImportUrl,
         success: handleSuccess,
      },
   })
   const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext
   /**
    * æ–°å¢žäº‹ä»¶
    */
   function handleAdd() {
      openModal(true, {
         isUpdate: false,
         showFooter: true,
      })
   }
   /**
    * ç¼–辑事件
    */
   function handleEdit(record: Recordable) {
      openModal(true, {
         record,
         isUpdate: true,
         showFooter: true,
      })
   }
   /**
    * è¯¦æƒ…
    */
   function handleDetail(record: Recordable) {
      openModal(true, {
         record,
         isUpdate: true,
         showFooter: false,
      })
   }
   /**
    * åˆ é™¤äº‹ä»¶
    */
   async function handleDelete(record) {
      await deleteOne({ id: record.id }, handleSuccess)
   }
   /**
    * æ‰¹é‡åˆ é™¤äº‹ä»¶
    */
   async function batchHandleDelete() {
      await batchDelete({ ids: selectedRowKeys.value }, handleSuccess)
   }
   /**
    * æˆåŠŸå›žè°ƒ
    */
   function handleSuccess() {
      ;(selectedRowKeys.value = []) && reload()
   }
   /**
    * æ“ä½œæ 
    */
   function getTableAction(record) {
      return [
         {
            label: '编辑',
            onClick: handleEdit.bind(null, record),
         },
      ]
   }
   /**
    * ä¸‹æ‹‰æ“ä½œæ 
    */
   function getDropDownAction(record) {
      return [
         {
            label: '详情',
            onClick: handleDetail.bind(null, record),
         },
         {
            label: '删除',
            popConfirm: {
               title: '是否确认删除',
               confirm: handleDelete.bind(null, record),
            },
         },
      ]
   }
</script>
<style scoped></style>