被检设备

frontend/src/views/machine/device/index.vue

@@ -1,123 +1,132 @@
 <template>
-    <div class='table-box'>
+    <div class='table-box' ref='popupBaseView'>
       <ProTable
         ref='proTable'
         :columns='columns'
-        :data='deviceData'
+         :request-api='getPqDevList'
      >
         <!-- :requestApi="getRoleList" -->
         <!-- 表格 header 按钮 -->
         <template #tableHeader='scope'>
-          <el-button type='primary' :icon='CirclePlus' >新增</el-button>
-          <el-button type='primary' :icon='Download' plain >导出数据</el-button>
-          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
+          <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
+          <el-button type='primary' :icon='Download'  plain @click='downloadFile()'>批量导出</el-button>
+          <el-button type='primary' :icon='Upload'  plain @click='importFile()'>批量导入</el-button>
+          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'  @click='batchDelete(scope.selectedListIds)'>
             批量删除
           </el-button>
         </template>
         <!-- 表格操作 -->
         <template #operation='scope'>
-          <el-button type='primary' link :icon='View' >查看</el-button>
-          <el-button type='primary' link :icon='EditPen' >编辑</el-button>
-          <el-button type='primary' link :icon='Delete' >删除</el-button>
+          <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
+          <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
       </template>
   
       </ProTable>
     </div>
-  
+    <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup'/>
   </template>
   
   <script setup lang='tsx' name='useRole'>
-  import { Device } from '@/api/device/interface'
+    import TimeControl from '@/components/TimeControl/index.vue'
+  import { type Device } from '@/api/device/interface'
   import { useHandleData } from '@/hooks/useHandleData'
   import { useDownload } from '@/hooks/useDownload'
   import { useAuthButtons } from '@/hooks/useAuthButtons'
   import ProTable from '@/components/ProTable/index.vue'
   import ImportExcel from '@/components/ImportExcel/index.vue'
-  import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-  
+  import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
+  import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
   import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
   import deviceDataList from '@/api/device/deviceData'
   import { useDictStore } from '@/stores/modules/dict'
-   import {
-    getDeviceList,
-  } from '@/api/device/device'
-  
+  import {getPqDevList,deletePqDev,exportPqDev,importPqDev} from '@/api/device/device.ts'
+  import { reactive, ref } from 'vue'
   const dictStore = useDictStore()
-  
-  const deviceData = deviceDataList.data
   // ProTable 实例
   const proTable = ref<ProTableInstance>()
-  
-  // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-  const initParam = reactive({ type: 1 })
-  
-  // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
-  // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
-  const dataCallback = (data: any) => {
-    return {
-      list: data.list,
-      total: data.total,
-    }
-  }
-  
-  // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
-  // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
-  const getTableList = (params: any) => {
-    let newParams = JSON.parse(JSON.stringify(params))
-    newParams.createTime && (newParams.startTime = newParams.createTime[0])
-    newParams.createTime && (newParams.endTime = newParams.createTime[1])
-    delete newParams.createTime
-    return getDeviceList(newParams)
-  }
-  
-  // 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
-  const { BUTTONS } = useAuthButtons()
-  
+  const devicePopup = ref()
+    // 定义包含和排除的单位
+const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位
+const excludedUnits = ['季度','年']; // 要排除的单位
+const defaultUnits = '日'; // 默认的单位
   // 表格配置项
-  const columns = reactive<ColumnProps<Device.ResDeviceList>[]>([
+  const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
     { type: 'selection', fixed: 'left', width: 70 },
     { type: 'index', fixed: 'left', width: 70, label: '序号' },
     {
-      prop: 'deviceName',
+      prop: 'name',
       label: '名称',
       search: { el: 'input' },
-      minWidth: 120,
+      minWidth: 200,
     },
     {
-      prop: 'deviceType',
+      prop: 'devType',
       label: '类型',
-      search: { el: 'input' },
-      minWidth: 280,
+      enum: dictStore.getDictData('High_Cate'),
+      search: { el: 'select', props: { filterable: true } },
+      fieldNames: { label: 'name', value: 'code' },
+      minWidth: 200,
     },
     {
-      prop: 'deviceChannels',
+      prop: 'devChns',
       label: '设备通道数',
-      minWidth: 120,
+      minWidth: 110,
     },
     {
-      prop: 'PlanName',
-      label: '所属计划',
-      search: { el: 'input' },
-      minWidth: 280,
-    },
-    {
-      prop: 'deviceUn',
+      prop: 'devVolt',
       label: '额定电压（V）',
       minWidth: 130,
     },
     {
-      prop: 'deviceIn',
+      prop: 'devCurr',
       label: '额定电流（A）',
       minWidth: 130,
     },
     {
-      prop: 'deviceCompany',
+      prop: 'manufacturer',
       label: '制作厂商',
-      minWidth: 280,
+      minWidth: 200,
     },
-    { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
+    {
+      prop: 'createDate',
+      label: '生产日期',
+      minWidth: 200,
+      search: {
+      span: 2,
+      render: () => {
+        return (
+          <div class='flx-flex-start'>
+            <TimeControl 
+            include={includedUnits} 
+            exclude={excludedUnits} 
+            default={defaultUnits} 
+            />
+          </div>
+        )
+      },
+    },
+    },
+    { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
   ])
   
+  // 打开 drawer(新增、编辑)
+  const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
+    devicePopup.value?.open(titleType, row)
+    
+  }
+  
+  // 批量删除字典类型
+  const batchDelete = async (id: string[]) => {
+    await useHandleData(deletePqDev, id, '删除所选设备')
+    proTable.value?.clearSelection()
+    proTable.value?.getTableList()
+  }
+  
+  // 删除字典类型
+  const handleDelete = async (params: Device.ResPqDev) => {
+    await useHandleData(deletePqDev, [params.id], `删除【${params.name}】设备`)
+    proTable.value?.getTableList()
+  }
   
   </script>