<template> <ContentWrap> <!-- 搜索工作栏 --> <Search :schema="Barcode.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" /> </ContentWrap> <!-- 列表头部 --> <TableHead :HeadButttondata="HeadButttondata" @button-base-click="buttonBaseClick" :route-name="routeName" @updataTableColumns="updataTableColumns" @searchFormClick="searchFormClick" :allSchemas="Barcode.allSchemas" /> <!-- 列表 --> <ContentWrap> <Table v-clientTable :columns="tableColumns" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="{ total: tableObject.total }" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage" v-model:sort="tableObject.sort" > <template #code="{row}"> <el-button type="primary" link @click="openDetail(row, '代码', row.code)"> <span>{{ row.code }}</span> </el-button> </template> <template #action="{ row }"> <ButtonBase :Butttondata="butttondata" @button-base-click="buttonTableClick($event,row)" /> </template> </Table> </ContentWrap> <!-- 表单弹窗:添加/修改 --> <BasicForm ref="basicFormRef" @success="formsSuccess" :rules="BarcodeRules" :formAllSchemas="Barcode.allSchemas" :apiUpdate="BarcodeApi.updateBarcode" :apiCreate="BarcodeApi.createBarcode" :isBusiness="false" /> <!-- 详情 --> <Detail ref="detailRef" :isBasic="true" :allSchemas="Barcode.allSchemas" /> <!-- 导入 --> <ImportForm ref="importFormRef" url="/wms/barcode/import" :importTemplateData="importTemplateData" @success="importSuccess" /> </template> <script setup lang="ts"> import download from '@/utils/download' import * as BarcodeApi from '@/api/wms/barcode' import BasicForm from '@/components/BasicForm/src/BasicForm.vue' import { Barcode, BarcodeRules } from './barcode.data' import * as defaultButtons from '@/utils/disposition/defaultButtons' import TableHead from '@/components/TableHead/src/TableHead.vue' import ImportForm from '@/components/ImportForm/src/ImportForm.vue' import Detail from '@/components/Detail/src/Detail.vue' defineOptions({ name: 'Barcode' }) const message = useMessage() // 消息弹窗 const { t } = useI18n() // 国际化 const route = useRoute() //路由信息 const routeName = ref() routeName.value = route.name const tableColumns = ref(Barcode.allSchemas.tableColumns) console.log(tableColumns.value); //字段设置 更新主列表字段 const updataTableColumns = (val) => { tableColumns.value = val } const { tableObject, tableMethods } = useTable({ getListApi: BarcodeApi.getBarcodePage // 分页接口 }) // 获得表格的各种操作 const { getList, setSearchParams } = tableMethods // 列表头部按钮 const HeadButttondata = [ defaultButtons.defaultAddBtn({hasPermi:'wms:barcode:create'}), // 新增 defaultButtons.defaultImportBtn({hasPermi:'wms:barcode:import'}), // 导入 defaultButtons.defaultExportBtn({hasPermi:'wms:barcode:export'}), // 导出 defaultButtons.defaultFreshBtn(null),//刷新 defaultButtons.defaultFilterBtn(null), //筛选 defaultButtons.defaultSetBtn(null), // 设置 // { // label: '自定义扩展按钮', // name: 'zdy', // hide: false, // type: 'primary', // icon: 'Select', // color: '' // }, ] // 头部按钮事件 const buttonBaseClick = (val, item) => { if (val == 'add') { // 新增 openForm('create') } else if (val == 'import') { // 导入 handleImport() } else if (val == 'export') { // 导出 handleExport() } else if (val == 'refresh') { // 刷新 if (tableObject.params.filters && tableObject.params.filters.length > 0 ) { searchFormClick({ filters: tableObject.params.filters }) } else { getList() } } else if (val == 'filtrate') { // 筛选 } else { // 其他按钮 console.log('其他按钮', item) } } // 列表-操作按钮 const butttondata = [ defaultButtons.mainListEditBtn({hasPermi:'wms:barcode:update'}), // 编辑 defaultButtons.mainListDeleteBtn({hasPermi:'wms:barcode:delete'}), // 删除 ] // 列表-操作按钮事件 const buttonTableClick = async (val, row) => { if (val == 'edit') { // 编辑 // const res = await BarcodeApi.getItempackaging(row.id) openForm('update', row) } else if (val == 'delete') { // 删除 handleDelete(row.id) } } /** 添加/修改操作 */ const basicFormRef = ref() const openForm = (type: string, row?: any) => { if(type == "update"){ Barcode.allSchemas.formSchema.forEach((item) => { if (item.field == 'code') { item.componentProps.disabled = true } }) }else { Barcode.allSchemas.formSchema.forEach((item) => { if (item.field == 'code') { item.componentProps.disabled = false } }) } basicFormRef.value.open(type, row) } // form表单提交 const formsSuccess = async (formType,data) => { basicFormRef.value.formLoading = true try { if (formType === 'create') { await BarcodeApi.createBarcode(data) message.success(t('common.createSuccess')) } else { await BarcodeApi.updateBarcode(data) message.success(t('common.updateSuccess')) } } finally { basicFormRef.value.formLoading = false } basicFormRef.value.dialogVisible = false getList() } /** 详情操作 */ const detailRef = ref() const openDetail = (row: any, titleName: any, titleValue: any) => { detailRef.value.openDetail(row, titleName, titleValue, 'basicBarcode') } /** 删除按钮操作 */ const handleDelete = async (id: number) => { try { // 删除的二次确认 await message.delConfirm() tableObject.loading = true // 发起删除 await BarcodeApi.deleteBarcode(id) tableObject.loading = false message.success(t('common.delSuccess')) // 刷新列表 await getList() } catch {} } /** 导出按钮操作 */ const exportLoading = ref(false) // 导出的加载中 const handleExport = async () => { try { // 导出的二次确认 await message.exportConfirm() // 发起导出 exportLoading.value = true const data = await BarcodeApi.exportBarcode(tableObject.params) download.excel(data, '条码片段.xlsx') } catch { } finally { exportLoading.value = false } } /** 导入 */ const importFormRef = ref() const handleImport = () => { importFormRef.value.open() } // 导入附件弹窗所需的参数 const importTemplateData = reactive({ templateUrl: '', templateTitle: '条码片段导入模版.xlsx' }) // 导入成功之后 const importSuccess = () => { getList() } // 筛选提交 const searchFormClick = (searchData) => { tableObject.params = { isSearch: true, filters: searchData.filters } getList() // 刷新当前列表 } /** 初始化 **/ onMounted(async() => { getList() importTemplateData.templateUrl = await BarcodeApi.importTemplate() }) </script>