pqs-9100_client/frontend/src/views/machine/testSource/index.vue

<template>
    <div class="table-box">
        <ProTable ref="proTable" :columns="columns" :request-api="getTableList">
            <template #tableHeader="scope">
                <el-button v-auth.testSource="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
                    新增
                </el-button>
                <el-button
                    v-auth.testSource="'delete'"
                    type="danger"
                    :icon="Delete"
                    plain
                    :disabled="!scope.isSelected"
                    @click="batchDelete(scope.selectedListIds)"
                >
                    删除
                </el-button>
            </template>
            <template #operation="scope">
                <el-button v-auth.testSource="'view'" type="primary" link :icon="View" @click="openDialog('view', scope.row)">
                    查看
                </el-button>
                <el-button v-auth.testSource="'edit'" type="primary" link :icon="EditPen" @click="openDialog('edit', scope.row)">
                    编辑
                </el-button>
                <el-button
                    v-auth.testSource="'delete'"
                    type="primary"
                    link
                    :icon="Delete"
                    @click="handleDelete(scope.row)"
                >
                    删除
                </el-button>
            </template>
        </ProTable>
    </div>
    <TestSourcePopup :refresh-table="proTable?.getTableList" ref="testSourcePopup" />
</template>

<script setup lang="tsx" name="useRole">
import { type TestSource } from '@/api/device/interface/testSource'
import { useHandleData } from '@/hooks/useHandleData'
import ProTable from '@/components/ProTable/index.vue'
import type { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, View } from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import TestSourcePopup from './components/testSourcePopup.vue'
import { getTestSourceList, deleteTestSource } from '@/api/device/testSource/index'
import { reactive, ref } from 'vue'
import { useModeStore } from '@/stores/modules/mode'

defineOptions({
    name: 'testSource'
})

const testSourcePopup = ref()
const dictStore = useDictStore()
const modeStore = useModeStore()
const proTable = ref<ProTableInstance>()

const getTableList = (params: any) => {
    const newParams = JSON.parse(JSON.stringify(params))
    const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id
    newParams.pattern = patternId
    return getTestSourceList(newParams)
}

const columns = reactive<ColumnProps<TestSource.ResTestSource>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    { type: 'index', fixed: 'left', width: 70, label: '序号' },
    {
        prop: 'name',
        label: '名称',
        search: { el: 'input' },
        minWidth: 300
    },
    {
        prop: 'devType',
        label: '设备类型',
        enum: dictStore.getDictData(
            'S_Dev_Type_' + dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.code
        ),
        fieldNames: { label: 'name', value: 'id' },
        search: { el: 'select' },
        minWidth: 250
    },
    {
        prop: 'type',
        label: '检测源类型',
        enum: dictStore.getDictData('Pq_Source_Type'),
        fieldNames: { label: 'name', value: 'id' },
        search: { el: 'select' },
        minWidth: 150
    },
    {
        prop: 'maxVoltage',
        label: '最大电压(V)',
        minWidth: 140
    },
    {
        prop: 'maxCurrent',
        label: '最大电流(A)',
        minWidth: 140
    },
    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])

const openDialog = (titleType: string, row: Partial<TestSource.ResTestSource> = {}) => {
    testSourcePopup.value?.open(titleType, row, modeStore.currentMode)
}

const batchDelete = async (id: string[]) => {
    await useHandleData(deleteTestSource, id, '删除所选检测源')
    proTable.value?.clearSelection()
    proTable.value?.getTableList()
}

const handleDelete = async (params: TestSource.ResTestSource) => {
    await useHandleData(deleteTestSource, [params.id], `删除【${params.name}】检测源`)
    proTable.value?.getTableList()
}
</script>