# Conflicts:
#	frontend/src/views/plan/planList/index.vue
This commit is contained in:
GYYM
2024-11-13 19:04:30 +08:00
3 changed files with 326 additions and 288 deletions

View File

@@ -1,30 +1,30 @@
<template> <template>
<RenderTableColumn v-bind="column" /> <RenderTableColumn v-bind='column' />
</template> </template>
<script setup lang="tsx" name="TableColumn"> <script setup lang='tsx' name='TableColumn'>
import { ColumnProps, RenderScope, HeaderRenderScope } from "@/components/ProTable/interface"; import { ColumnProps, RenderScope, HeaderRenderScope } from '@/components/ProTable/interface'
import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils"; import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from '@/utils'
defineProps<{ column: ColumnProps }>(); defineProps<{ column: ColumnProps }>()
const slots = useSlots(); const slots = useSlots()
const enumMap = inject("enumMap", ref(new Map())); const enumMap = inject('enumMap', ref(new Map()))
// 渲染表格数据 // 渲染表格数据
const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => { const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
return enumMap.value.get(item.prop) && item.isFilterEnum return enumMap.value.get(item.prop) && item.isFilterEnum
? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames) ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
: formatValue(handleRowAccordingToProp(scope.row, item.prop!)); : formatValue(handleRowAccordingToProp(scope.row, item.prop!))
}; }
// 获取 tag 类型 // 获取 tag 类型
const getTagType = (item: ColumnProps, scope: RenderScope<any>) => { const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
return ( return (
filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag") || "primary" filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, 'tag') || 'primary'
); )
}; }
const RenderTableColumn = (item: ColumnProps) => { const RenderTableColumn = (item: ColumnProps) => {
return ( return (
@@ -32,26 +32,26 @@ const RenderTableColumn = (item: ColumnProps) => {
{item.isShow && ( {item.isShow && (
<el-table-column <el-table-column
{...item} {...item}
align={item.align ?? "center"} align={item.align ?? 'center'}
showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"} showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== 'operation'}
> >
{{ {{
default: (scope: RenderScope<any>) => { default: (scope: RenderScope<any>) => {
if (item._children) return item._children.map(child => RenderTableColumn(child)); if (item._children) return item._children.map(child => RenderTableColumn(child))
if (item.render) return item.render(scope); if (item.render) return item.render(scope)
if (item.prop && slots[handleProp(item.prop)]) return slots[handleProp(item.prop)]!(scope); if (item.prop && slots[handleProp(item.prop)]) return slots[handleProp(item.prop)]!(scope)
if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>; if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>
return renderCellData(item, scope); return renderCellData(item, scope)
}, },
header: (scope: HeaderRenderScope<any>) => { header: (scope: HeaderRenderScope<any>) => {
if (item.headerRender) return item.headerRender(scope); if (item.headerRender) return item.headerRender(scope)
if (item.prop && slots[`${handleProp(item.prop)}Header`]) return slots[`${handleProp(item.prop)}Header`]!(scope); if (item.prop && slots[`${handleProp(item.prop)}Header`]) return slots[`${handleProp(item.prop)}Header`]!(scope)
return item.label; return item.label
} },
}} }}
</el-table-column> </el-table-column>
)} )}
</> </>
); )
}; }
</script> </script>

View File

@@ -480,3 +480,15 @@
} }
} }
} }
.cn-render-buttons {
cursor: pointer;
display: inline-block;
margin-left: 13px;
line-height: 18px;
padding: 2px;
.icon {
font-size: 12px !important;
// color: var(--ba-bg-color-overlay) !important;
}
}

View File

@@ -7,39 +7,52 @@
> >
<!-- 表格 header 按钮 --> <!-- 表格 header 按钮 -->
<template #tableHeader='scope'> <template #tableHeader='scope'>
<el-button type='primary' :icon='Download' @click="importClick">导入</el-button> <el-button type='primary' :icon='Download' @click='importClick'>导入</el-button>
<el-button type='primary' :icon='CirclePlus' :disabled='!(scope.selectedList.length > 1)' @click="combineClick">合并</el-button> <el-button type='primary' :icon='CirclePlus' :disabled='!(scope.selectedList.length > 1)' @click='combineClick'>
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button> 合并
</el-button>
<el-button type='primary' :icon='CirclePlus' @click='openAddDialog'>新增</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'> <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
批量删除 批量删除
</el-button> </el-button>
<input type="file" style="display: none" ref="fileInput" @change="handleFiles"> <input type='file' style='display: none' ref='fileInput' @change='handleFiles'>
</template> </template>
<!-- 表格操作 --> <!-- 表格操作 -->
<template #operation='scope'> <template #operation='scope'>
<!-- <el-button type='primary' link :icon='View' @click="handleRowClick(scope.row)">查看</el-button> --> <!-- <el-button type='primary' link :icon='View' @click="handleRowClick(scope.row)">查看</el-button> -->
<el-button type='primary' link :icon='Upload' @click="exportClick">导出</el-button> <el-button type='primary' link :icon='Upload' @click='exportClick'>导出</el-button>
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(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> <div class='cn-render-buttons'>
<el-button type='primary' link :icon='List' @click="showDeviceOpen(scope.row)">设备绑定</el-button> <el-dropdown trigger='click'>
<el-button type='primary' link :icon='Tools' @click="showtestSourceOpen(scope.row)">检测源绑定</el-button> <el-button link type='primary' class='table-operate'>
<div class='table-operate-text'>更多</div>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :style="{color: 'var(--el-color-danger)'}" :icon='Delete'>
删除
</el-dropdown-item>
<el-dropdown-item :icon='List' @click='showDeviceOpen(scope.row)'>
设备绑定
</el-dropdown-item>
<el-dropdown-item :icon='Tools' @click='showtestSourceOpen(scope.row)'>
检测源绑定
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template> </template>
</ProTable> </ProTable>
<!-- 向计划导入/导出设备对话框 -->
<planPopup @update:visible="dialogFormVisible = $event"/>
:visible="dialogFormVisible"
:formData="dialogForm"
:dialogTitle="dialogTitle"
:is-read-only="isReadOnly"
@update:visible="dialogFormVisible = $event"
/>
<!-- 查看误差体系详细信息 --> <!-- 查看误差体系详细信息 -->
<ErrorStandardDialog <ErrorStandardDialog
:visible="detail_dialogFormVisible" :visible='detail_dialogFormVisible'
:formData="detail_dialogForm" :formData='detail_dialogForm'
:dialogTitle="detail_dialogTitle" :dialogTitle='detail_dialogTitle'
@update:visible="detail_dialogFormVisible = $event" @update:visible='detail_dialogFormVisible = $event'
/> />
</div> </div>
<devTransfer <devTransfer
@@ -54,33 +67,44 @@
<SourceOpen :width='viewWidth' :height='viewHeight' ref='openSourceView' /> <SourceOpen :width='viewWidth' :height='viewHeight' ref='openSourceView' />
</template> </template>
<script setup lang="tsx" name='useProTable'> <script setup lang='tsx' name='useProTable'>
import ProTable from '@/components/ProTable/index.vue' import ProTable from '@/components/ProTable/index.vue'
import TimeControl from '@/components/TimeControl/index.vue' import TimeControl from '@/components/TimeControl/index.vue'
import type { ProTableInstance,ColumnProps } from '@/components/ProTable/interface' import type { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete,EditPen,View,Upload,Download,List,Tools} from '@element-plus/icons-vue' import { CirclePlus, Delete, EditPen, View, Upload, Download, List, Tools } from '@element-plus/icons-vue'
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData' import {
import { reactive,ref } from 'vue' dictPattern,
dictTestState,
dictReportState,
dictResult,
testPlanDataList,
testSoureDataList,
testScriptDataList,
testErrSystDataList,
planData,
testFatherPlanList,
} from '@/api/plan/planData'
import { reactive, ref } from 'vue'
import type { Plan } from '@/api/plan/interface' import type { Plan } from '@/api/plan/interface'
import planPopup from "@/views/plan/planList/components/planPopup.vue"; // 导入子组件 import planPopup from '@/views/plan/planList/components/planPopup.vue' // 导入子组件
import DeviceOpen from '@/views/plan/planList/components/devPopup.vue' import DeviceOpen from '@/views/plan/planList/components/devPopup.vue'
import SourceOpen from '@/views/plan/planList/components/sourcePopup.vue' import SourceOpen from '@/views/plan/planList/components/sourcePopup.vue'
import temp from './components/temp.vue' import temp from './components/temp.vue'
import devTransfer from './components/devTransfer.vue' import devTransfer from './components/devTransfer.vue'
import sourceTransfer from './components/sourceTransfer.vue' import sourceTransfer from './components/sourceTransfer.vue'
import { useViewSize } from '@/hooks/useViewSize' import { useViewSize } from '@/hooks/useViewSize'
import { useRouter } from "vue-router"; import { useRouter } from 'vue-router'
import { useDictStore } from '@/stores/modules/dict' import { useDictStore } from '@/stores/modules/dict'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus' import type { Action } from 'element-plus'
import type { ErrorSystem } from '@/api/error/interface' import type { ErrorSystem } from '@/api/error/interface'
import ErrorStandardDialog from "@/views/machine/errorSystem/components/ErrorStandardDialog.vue"; // 导入子组件 import ErrorStandardDialog from '@/views/machine/errorSystem/components/ErrorStandardDialog.vue' // 导入子组件
const dictStore = useDictStore() const dictStore = useDictStore()
// 定义包含和排除的单位 // 定义包含和排除的单位
const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位 const includedUnits = ['日', '周', '月', '自定义'] // 可以根据需要包含的单位
const excludedUnits = ['季度','年']; // 要排除的单位 const excludedUnits = ['季度', '年'] // 要排除的单位
const defaultUnits = '日'; // 默认的单位 const defaultUnits = '日' // 默认的单位
const { popupBaseView, viewWidth, viewHeight } = useViewSize() const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const openDeviceView = ref() const openDeviceView = ref()
const openSourceView = ref() const openSourceView = ref()
@@ -92,31 +116,31 @@ const proTable = ref<ProTableInstance>()
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
const dialogTitle = ref('') const dialogTitle = ref('')
const isReadOnly = ref(false) const isReadOnly = ref(false)
const router = useRouter(); const router = useRouter()
const dialogForm = ref<Plan.PlanBO>({ const dialogForm = ref<Plan.PlanBO>({
id: '' , id: '',
name: '', name: '',
pattern:'', pattern: '',
father_Plan_Id:'', father_Plan_Id: '',
dataSource_Id:'', dataSource_Id: '',
script_Id:'', script_Id: '',
error_Sys_Id:'', error_Sys_Id: '',
test_State: '', test_State: '',
report_State: '', report_State: '',
result:'', result: '',
}); })
const detail_dialogFormVisible = ref(false) const detail_dialogFormVisible = ref(false)
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系') const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
const detail_dialogForm = ref<ErrorSystem.Error_detail>({ const detail_dialogForm = ref<ErrorSystem.Error_detail>({
measured: '',//被测量 measured: '',//被测量
deviceLevel: '',//检测装置级别 deviceLevel: '',//检测装置级别
measurementType:'', measurementType: '',
condition: '',//测量条件 condition: '',//测量条件
maxErrorValue: '',//最大误差 maxErrorValue: '',//最大误差
}); })
// 表格配置项 // 表格配置项
const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
@@ -131,7 +155,7 @@ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
{ {
prop: 'testSourceName', prop: 'testSourceName',
label: '检测源名称', label: '检测源名称',
width: 200, width: 300,
render: scope => { render: scope => {
return ( return (
// <el-button // <el-button
@@ -142,14 +166,14 @@ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
// {{ button.text }} // {{ button.text }}
// </el-button> // </el-button>
<div class='flx-flex-start'> <div class='flx-flex-start'>
<el-button type = "primary" link onClick = {() => showData(scope.row.testSourceName)}> <el-button type='primary' link onClick={() => showData(scope.row.testSourceName)}>
{scope.row.testSourceName} {scope.row.testSourceName}
</el-button> </el-button>
<temp></temp> <temp></temp>
</div> </div>
); )
 } },
}, },
{ {
prop: 'script_Id', prop: 'script_Id',
@@ -159,11 +183,11 @@ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
fieldNames: { label: 'label', value: 'id' }, fieldNames: { label: 'label', value: 'id' },
render: scope => { render: scope => {
return ( return (
<el-button type = "primary" link onClick = {() => showData(scope.row.script_Id)}> <el-button type='primary' link onClick={() => showData(scope.row.script_Id)}>
{getScriptName(scope.row.script_Id)} {getScriptName(scope.row.script_Id)}
</el-button> </el-button>
); )
 } },
}, },
{ {
prop: 'error_Sys_Id', prop: 'error_Sys_Id',
@@ -172,13 +196,13 @@ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
enum: testErrSystDataList, enum: testErrSystDataList,
fieldNames: { label: 'label', value: 'id' }, fieldNames: { label: 'label', value: 'id' },
render: scope => { render: scope => {
const errSysName = getErrSysName(scope.row.error_Sys_Id); const errSysName = getErrSysName(scope.row.error_Sys_Id)
return ( return (
<el-button type = "primary" link onClick = {() => showData(errSysName || '')}> <el-button type='primary' link onClick={() => showData(errSysName || '')}>
{errSysName} {errSysName}
</el-button> </el-button>
); )
 } },
}, },
{ {
prop: 'dataSource_Id', prop: 'dataSource_Id',
@@ -235,27 +259,28 @@ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
// }, // },
// }, // },
// }, // },
{ prop: 'operation', label: '操作', fixed: 'right' ,width: 450, }, { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
]) ])
function getScriptName(id:string){ function getScriptName(id: string) {
return testScriptDataList.find(item=>item.id==id)?.label return testScriptDataList.find(item => item.id == id)?.label
}
function getErrSysName(id:string){
return testErrSystDataList.find(item=>item.id==id)?.label
} }
const fileInput = ref<HTMLInputElement | null>(null); // 声明 fileInput function getErrSysName(id: string) {
function openFileDialog() { return testErrSystDataList.find(item => item.id == id)?.label
}
const fileInput = ref<HTMLInputElement | null>(null) // 声明 fileInput
function openFileDialog() {
if (fileInput.value) { if (fileInput.value) {
fileInput.value.click(); fileInput.value.click()
} }
} }
function showData(row: string) { function showData(row: string) {
detail_dialogTitle.value = row; detail_dialogTitle.value = row
detail_dialogFormVisible.value = true; // 显示对话框 detail_dialogFormVisible.value = true // 显示对话框
// router.push({ // router.push({
// path: "/machine/device", // path: "/machine/device",
@@ -264,11 +289,11 @@ function showData(row: string) {
} }
function handleFiles(event: Event) { function handleFiles(event: Event) {
const target = event.target as HTMLInputElement; const target = event.target as HTMLInputElement
const files = target.files; const files = target.files
if (files && files.length > 0) { if (files && files.length > 0) {
// 处理文件 // 处理文件
console.log(files); console.log(files)
ElMessageBox.confirm( ElMessageBox.confirm(
'导入的数据与当前数据有冲突,请选择以哪个数据为主进行覆盖', '导入的数据与当前数据有冲突,请选择以哪个数据为主进行覆盖',
'数据冲突', '数据冲突',
@@ -277,7 +302,7 @@ function handleFiles(event: Event) {
confirmButtonText: '以导入数据为主覆盖', confirmButtonText: '以导入数据为主覆盖',
cancelButtonText: '以当前数据为主覆盖', cancelButtonText: '以当前数据为主覆盖',
type: 'warning', type: 'warning',
} },
) )
.then(() => { .then(() => {
ElMessage({ ElMessage({
@@ -296,6 +321,7 @@ function handleFiles(event: Event) {
}) })
} }
} }
// 点击导入按钮 // 点击导入按钮
const importClick = () => { const importClick = () => {
openFileDialog() openFileDialog()
@@ -313,10 +339,10 @@ const combineClick = () => {
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
} },
) )
.then(({ value }) => { .then(({ value }) => {
console.log(`合并后的计划名为:`,value) console.log(`合并后的计划名为:`, value)
proTable.value?.clearSelection() proTable.value?.clearSelection()
proTable.value?.getTableList() proTable.value?.getTableList()
}) })
@@ -324,45 +350,45 @@ const combineClick = () => {
// 打开编辑对话框 // 打开编辑对话框
const openEditDialog = (planSystem: Plan.PlanBO) => { const openEditDialog = (planSystem: Plan.PlanBO) => {
dialogForm.value = {...planSystem}; dialogForm.value = { ...planSystem }
dialogTitle.value = '编辑检测计划'; dialogTitle.value = '编辑检测计划'
isReadOnly.value = false; isReadOnly.value = false
dialogFormVisible.value = true; // 打开对话框 dialogFormVisible.value = true // 打开对话框
}; }
const openAddDialog = () => { const openAddDialog = () => {
dialogForm.value = { dialogForm.value = {
id: '', id: '',
name: '', name: '',
pattern:'', pattern: '',
father_Plan_Id:'', father_Plan_Id: '',
dataSource_Id:'', dataSource_Id: '',
script_Id:'', script_Id: '',
error_Sys_Id:'', error_Sys_Id: '',
test_State: '', test_State: '',
report_State: '', report_State: '',
result:'', result: '',
}; }
dialogTitle.value = '新增检测计划'; dialogTitle.value = '新增检测计划'
isReadOnly.value = false; isReadOnly.value = false
dialogFormVisible.value = true; // 打开对话框 dialogFormVisible.value = true // 打开对话框
}; }
const handleRowClick = (planSystem: Plan.PlanBO) =>{ const handleRowClick = (planSystem: Plan.PlanBO) => {
dialogForm.value = {...planSystem}; dialogForm.value = { ...planSystem }
dialogTitle.value = '查看检测计划'; dialogTitle.value = '查看检测计划'
isReadOnly.value = true; isReadOnly.value = true
dialogFormVisible.value = true; // 打开对话框 dialogFormVisible.value = true // 打开对话框
} }
const showDeviceOpen = (planSystem: Plan.PlanBO) => { const showDeviceOpen = (planSystem: Plan.PlanBO) => {
devTransferVisible.value = true; devTransferVisible.value = true
//openDeviceView.value.open('计划设备列表') //openDeviceView.value.open('计划设备列表')
} }
const showtestSourceOpen=(planSystem: Plan.PlanBO)=>{ const showtestSourceOpen = (planSystem: Plan.PlanBO) => {
sourceTransferVisible.value = true; sourceTransferVisible.value = true
// openSourceView.value.open('计划检测源列表') // openSourceView.value.open('计划检测源列表')
// router.push({ // router.push({
// path: "/machine/testSource", // path: "/machine/testSource",