104 lines
2.9 KiB
Vue
104 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div class='table-box'>
|
||
|
|
<ProTable
|
||
|
|
ref='proTable'
|
||
|
|
:columns='columns'
|
||
|
|
:data='errorData'
|
||
|
|
type='selection'
|
||
|
|
>
|
||
|
|
<!-- 表格 header 按钮 -->
|
||
|
|
<template #tableHeader>
|
||
|
|
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增误差体系</el-button>
|
||
|
|
<el-button type='danger' :icon='Delete' plain
|
||
|
|
>
|
||
|
|
批量删除误差体系
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
<!-- 表格操作 -->
|
||
|
|
<template #operation='scope'>
|
||
|
|
<el-button type='primary' link :icon='View' @row-click="handleRowClick">查看</el-button>
|
||
|
|
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
|
||
|
|
<el-button type='primary' link :icon='Delete' >删除</el-button>
|
||
|
|
</template>
|
||
|
|
</ProTable>
|
||
|
|
|
||
|
|
<!-- 新增/编辑资源对话框 -->
|
||
|
|
<ResourceDialog
|
||
|
|
:visible="dialogFormVisible"
|
||
|
|
:formData="dialogForm"
|
||
|
|
:dialogTitle="dialogTitle"
|
||
|
|
@update:visible="dialogFormVisible = $event"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts" name='useProTable'>
|
||
|
|
import ProTable from '@/components/ProTable/index.vue'
|
||
|
|
import type { ColumnProps } from '@/components/ProTable/interface'
|
||
|
|
import { CirclePlus, Delete,EditPen,View} from '@element-plus/icons-vue'
|
||
|
|
import errorDataList from '@/api/error/errorData'
|
||
|
|
import { reactive,ref } from 'vue'
|
||
|
|
import type { ErrorSystem } from '@/api/error/interface'
|
||
|
|
import ResourceDialog from "@/views/machine/errorSystem/components/ErrorSystemDialog.vue"; // 导入子组件
|
||
|
|
let multipleSelection = ref<string[]>([])
|
||
|
|
const errorData = errorDataList
|
||
|
|
const dialogFormVisible = ref(false)
|
||
|
|
const dialogTitle = ref('新增误差体系')
|
||
|
|
const dialogForm = ref<ErrorSystem.ErrorSystemList>({
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
year:'',
|
||
|
|
level:'',
|
||
|
|
});
|
||
|
|
|
||
|
|
// 表格配置项
|
||
|
|
const columns = reactive<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
|
||
|
|
{ type: 'selection', fixed: 'left', width: 50 },
|
||
|
|
{
|
||
|
|
prop: 'id',
|
||
|
|
label: '序号',
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'name',
|
||
|
|
label: '误差体系名称',
|
||
|
|
width: 300,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'year',
|
||
|
|
label: '标准实施年份',
|
||
|
|
search: { el: 'input' },
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
prop: 'level',
|
||
|
|
label: '适用设备等级',
|
||
|
|
search: { el: 'select', props: { filterable: true } },
|
||
|
|
},
|
||
|
|
{ prop: 'operation', label: '操作', fixed: 'right' },
|
||
|
|
])
|
||
|
|
|
||
|
|
// 打开编辑对话框
|
||
|
|
const openEditDialog = (resource: ErrorSystem.ErrorSystemList) => {
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
const openAddDialog = () => {
|
||
|
|
dialogForm.value = {
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
year: '',
|
||
|
|
level: '',
|
||
|
|
};
|
||
|
|
dialogFormVisible.value = true; // 打开对话框
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const handleRowClick = (row: ErrorSystem.ErrorSystemList) =>{
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|