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

<template>
   <div class='table-box'>
    <ProTable
      ref='proTable'
      :columns='columns'
      :data='errorData'
      type='selection'
      @selection-change="handleSelectionChange" 
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
          <el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length'
                     >
            批量删除
          </el-button>
      </template>
       <!-- 表格操作 -->
       <template #operation='scope'>
          <el-button type='primary' link :icon='View'  @click="handleRowClick(scope.row)">查看</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>

       <!-- 新增/编辑误差体系对话框 -->
       <ErrorSystemDialog     
      :visible="dialogFormVisible"
      :formData="dialogForm"
       :dialogTitle="dialogTitle"
      @update:visible="dialogFormVisible = $event"
    />

    <!-- 查看误差体系详细信息 -->
    <ErrorStandardDialog     
      :visible="detail_dialogFormVisible"
      :formData="detail_dialogForm"
       :dialogTitle="detail_dialogTitle"
      @update:visible="detail_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 ErrorSystemDialog from "@/views/machine/errorSystem/components/ErrorSystemDialog.vue"; // 导入子组件
import ErrorStandardDialog from "@/views/machine/errorSystem/components/ErrorStandardDialog.vue"; // 导入子组件
import { useDictStore } from '@/stores/modules/dict'
const dictStore = useDictStore()
let multipleSelection = ref<string[]>([])
const errorData = errorDataList.errordata
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增误差体系')
const dialogForm = ref<ErrorSystem.ErrorSystemList>({
      id: '',
      name: '',
      standard_Name:'',
      standard_Time:'',
      dev_Level:'',
      enable:1,
      state:1,     
});



const detail_dialogFormVisible = ref(false)
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
const detail_dialogForm = ref<ErrorSystem.Error_detail>({
                              measured: '',//被测量
                              deviceLevel: '',//检测装置级别
                              measurementType:'',
                              condition: '',//测量条件
                              maxErrorValue: '',//最大误差     
});

// 表格配置项
const columns = ref<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  {
    prop: 'id',
    label: '序号',
    width: 70,
  },
  {
    prop: 'name',
    label: '误差体系名称',
  },
  {
    prop: 'standard_Name',
    label: '参照标准名称',
  },
  {
    prop: 'standard_Time',
    label: '标准实施年份',
    width: 200,
    search: { el: 'input' },
  },
  {
    prop: 'dev_Level',
    label: '适用设备等级',
    width: 120,
    enum: dictStore.getDictData('errorLevel'),
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'code' },
  },
  { prop: 'operation', label: '操作', fixed: 'right' ,width: 300,},
])

// 打开编辑对话框
const openEditDialog = (errorSystem: ErrorSystem.ErrorSystemList) => {
  errorSystem.standard_Time ='2024'
  dialogForm.value = {...errorSystem};
  dialogTitle.value = '编辑误差体系';
  dialogFormVisible.value = true; // 打开对话框
};

const openAddDialog = () => {
  dialogForm.value = {
      id: '',
      name: '',
      standard_Name:'',
      standard_Time:'',
      dev_Level:'',
      
      state:0, 
  };
  dialogTitle.value = '新增误差体系';
  dialogFormVisible.value = true; // 打开对话框
};

//选中
 // 处理选择变化
 const handleSelectionChange = (selection:ErrorSystem.ErrorSystemList[]) => {
    multipleSelection.value = selection.map(row => row.id); // 更新选中的行
    
  };


const handleRowClick = (errorSystem: ErrorSystem.ErrorSystemList) =>{
  detail_dialogTitle.value = errorSystem.name;
  detail_dialogFormVisible.value = true; // 显示对话框
}
</script>

<style scoped>

</style>