超级表格带弹窗 ​

<template>
  <div class="table-box">
    <!-- 包材信息维护 -->
    <ProTable 
      ref="table" 
      :columns="columns" 
      :requestApi="pagePackingList"
      :moreConfig="moreConfig">
      <template #tableHeader>
        <el-button @click="onAddEdit('新增')" type="primary">新增</el-button>
      </template>
      <template #operation="{ row }">
        <el-button @click="onAddEdit('编辑', row)" type="primary" plain>编辑</el-button>
      </template>
    </ProTable>
    <ComDialog v-model="visible" width="50%" :title="title" top="5vh">
      <template #default>
        <add-edit :dialogData="dialogData" :form="form"></add-edit>
      </template>
      <template #footer>
        <el-button @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </template>
    </ComDialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { pagePackingList, addPacking, editPacking,importStockPackingListInfo } from '@/api/modules/packagingManage.js'
import { getType } from '../utils/getType.js'
import ProTable from '@/components/ProTable'
import ComDialog from '@/components/ComDialog'
import addEdit from './components/addEdit.vue'
import useDialogData from '@/hooks/useDialogData.js'

const table = ref()
const typeList = ref([])
const specList = ref([])
const iceSpecList = ref([])
const boxSpecList = ref([])


//函数调用，获取包材类型
//函数调用,获取包材类型
getType('packingType').then((res) => {
  typeList.value = res
})
getType('iceFloe').then((res) => {
  iceSpecList.value = res
})
getType('pack').then((res) => {
  boxSpecList.value = res
})

// 物料类型change
const getSpecList = (searchParam, value) => {
  //清空specId
  searchParam.packingSpec = ''
  let realValue = typeList.value.find((item) => item.id === value).realValue
  if (!realValue || realValue === 'WDJ') {
    specList.value = []
  } else if (realValue === 'BP') {
    specList.value = iceSpecList.value
  } else {
    specList.value = boxSpecList.value
  }
}
const columns = [
  { type: 'index', label: '#', width: 80,fixed:'left'},

  { prop: 'operation', label: '操作', width: 140 ,fixed:'left'},

  {
    search: true,
    searchType: 'text',
    prop: 'packingCode',
    label: '物料编码',
    minWidth: 100,
    fixed:'left'
  },
    {
    search: true,
    searchType: 'select',
    prop: 'packingTypes',
    replaceProp: 'packingTypeString', //表格prop与查询prop不同时，用来表示表格prop
    label: '物料品类',
    minWidth: 100,
    enum: [
      { value: 1, label: '包材' },
      { value: 2, label: '耗材' }
    ], //下拉列表
    searchEvent: {}
  },
  {
    search: true,
    searchType: 'text',
    prop: 'packingName',
    replaceProp: 'name',
    label: '物料名称',
    minWidth: 100,
  },
  {
    search: true,
    searchType: 'select',
    prop: 'packingType',
    replaceProp: 'packingTypeStr',
    label: '物料类型',
     minWidth: 100,
    enum: typeList, //下拉列表
    toLabel: 'value', // enum用于label
    toValue: 'id', // enum用于value
    searchEvent: {
      change: getSpecList
    }
  },
  {
    search: true,
    searchType: 'select',
    prop: 'packingSpec',
    replaceProp: 'packingSpecStr',
    label: '物料规格',
     minWidth: 100,
    enum: specList, //下拉列表
    toLabel: 'value',
    toValue: 'id'
  },
  {
    prop: 'packingUnitStr',
    label: '物料单位',
     minWidth: 100,
  },
  {
    prop: 'temperatureStr',
    label: '温度区间',
     minWidth: 180,
  },
  {
    prop: 'remark',
    label: '描述信息',
     minWidth: 100,
  },
  {
    prop: 'validityPeriod',
    label: '有效期（单位月）',
     minWidth: 170,
  },
  {
    prop: 'validUntil',
    label: '有效期至',
     minWidth: 140,
  }
]
const moreConfig = [
  {
    title: '导入',
    type:'elUpload',
    cb: importStockPackingListInfo
  }
]
// 传递给useDialogData，当提交完成会刷新表格,可不传
const refreshTable = () => {
  table.value.refresh()
}

// api一定要用ref包起来,响应式,别乱搞
let submitApi = ref(addPacking)
const { dialogData, visible, onSubmit, onCancel, form } = useDialogData(submitApi, refreshTable)
const title = ref('新增')
// 新增编辑 修改对应的api
const onAddEdit = (str, row = {}) => {
  if (str == '新增') {
    submitApi.value = addPacking
  } else {
    submitApi.value = editPacking
    // 编辑回显数据 核心
    Object.assign(dialogData, row)
  }
  visible.value = true
  title.value = str
}
</script>

<style lang="scss" scoped></style>