新增检测计划列表
This commit is contained in:
sjl
130
frontend/src/views/plan/planList/components/PlanDialog.vue
Normal file
130
frontend/src/views/plan/planList/components/PlanDialog.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
|
||||
<el-form :model="formData" >
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" :disabled="isReadOnly"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="父计划" prop="type">
|
||||
<el-select v-model="formData.father_Plan_Id" placeholder="请选择父计划" :disabled="isReadOnly">
|
||||
<el-option
|
||||
v-for="plan in fatherPlanList"
|
||||
:key="plan.value"
|
||||
:label="plan.label"
|
||||
:value="plan.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> <el-form-item label="数据源" prop="type">
|
||||
<el-select v-model="formData.dataSource_Id" placeholder="请选择数据源" :disabled="isReadOnly">
|
||||
<el-option
|
||||
v-for="plan in sourceList"
|
||||
:key="plan.value"
|
||||
:label="plan.label"
|
||||
:value="plan.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> <el-form-item label="检测脚本" prop="type">
|
||||
<el-select v-model="formData.script_Id" placeholder="请选择检测脚本" :disabled="isReadOnly">
|
||||
<el-option
|
||||
v-for="plan in scriptList"
|
||||
:key="plan.value"
|
||||
:label="plan.label"
|
||||
:value="plan.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="误差体系" prop="type">
|
||||
<el-select v-model="formData.error_Sys_Id" placeholder="请选择误差体系" :disabled="isReadOnly">
|
||||
<el-option
|
||||
v-for="plan in errorList"
|
||||
:key="plan.value"
|
||||
:label="plan.label"
|
||||
:value="plan.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :disabled="isReadOnly">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, reactive,watch,ref } from 'vue';
|
||||
import { dialogSmall} from '@/utils/elementBind'
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
dialogTitle: string;
|
||||
isReadOnly: boolean,
|
||||
formData: {
|
||||
id:string;
|
||||
name: string;
|
||||
pattern: string; //模式，字典表（数字、模拟、比对）
|
||||
father_Plan_Id: string; //父计划ID
|
||||
dataSource_Id: string; //数据源ID
|
||||
script_Id: string; //检测脚本ID
|
||||
error_Sys_Id: string;//误差体系ID
|
||||
test_State: string; //检测状态
|
||||
report_State: string; //报告生成状态
|
||||
result: string;//检测结果
|
||||
state: number; //状态
|
||||
|
||||
};
|
||||
}>();
|
||||
|
||||
const fatherPlanList = [
|
||||
{ label: '/', value: 'type0' },
|
||||
{ label: '检测计划1', value: 'type1' },
|
||||
{ label: '检测计划2', value: 'type2' },
|
||||
{ label: '检测计划3', value: 'type3' },
|
||||
{ label: '检测计划4', value: 'type4' },
|
||||
];
|
||||
|
||||
const sourceList = [
|
||||
{ label: '分钟统计数据最大值', value: 'type0' },
|
||||
{ label: '分钟统计数据最大值', value: 'type1' },
|
||||
{ label: '分钟统计数据CP95值', value: 'type2' },
|
||||
];
|
||||
|
||||
const scriptList = [
|
||||
{ label: '/', value: 'type0' },
|
||||
{ label: '国网入网检测脚本（单影响量-模拟式）', value: 'type1' },
|
||||
{ label: '国网入网检测脚本（Q/GDW 10650.4 - 2021) 数字式', value: 'type1' },
|
||||
];
|
||||
|
||||
const errorList = [
|
||||
{ label: 'Q/GDW 1650.2- 2016', value: 'type0' },
|
||||
{ label: 'Q/GDW 10650.2 - 2021', value: 'type1' },
|
||||
];
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'submit', data: any): void;
|
||||
}>();
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false); // 关闭对话框
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
emit('submit', props.formData); // 提交表单数据
|
||||
emit('update:visible', false); // 提交后关闭对话框
|
||||
};
|
||||
|
||||
// 当 props.visible 改变时，更新 formData
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
// 这里可以重置表单数据，如果需要的话
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
122
frontend/src/views/plan/planList/components/PlanOpen.vue
Normal file
122
frontend/src/views/plan/planList/components/PlanOpen.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<!--单列-->
|
||||
<template>
|
||||
<el-dialog class='table-box'
|
||||
v-model='dialogVisible'
|
||||
top='114px'
|
||||
:style="{height:height,maxHeight:height,overflow:'hidden'}"
|
||||
:title='title'
|
||||
:width='width'
|
||||
:modal='false'>
|
||||
<div class='table-box'>
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:data='deviceData'
|
||||
type='selection'
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader>
|
||||
<el-button type='primary' :icon='Download' >导入设备</el-button>
|
||||
<el-button type='primary' :icon='Download' >下载报告</el-button>
|
||||
<el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length'>
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation>
|
||||
<el-button type='primary' link :icon='View'>查看</el-button>
|
||||
<el-button type='primary' link :icon='Delete' >删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang='tsx'>
|
||||
import { Delete, View ,Upload,Download} from '@element-plus/icons-vue'
|
||||
import { reactive,ref } from 'vue'
|
||||
import type { Device } from '@/api/device/interface'
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
|
||||
import deviceDataList from '@/api/device/deviceData'
|
||||
|
||||
const deviceData = deviceDataList.plan_devicedata
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
let multipleSelection = ref<string[]>([])
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<Device.DeviceList>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{
|
||||
prop: 'Name',
|
||||
label: '名称',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
prop: 'Dev_Type',
|
||||
label: '类型',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
prop: 'Dev_Chns',
|
||||
label: '通道数',
|
||||
minWidth: 70,
|
||||
},
|
||||
{
|
||||
prop: 'ReCheck_Num',
|
||||
label: '复检次数',
|
||||
minWidth: 70,
|
||||
},
|
||||
{
|
||||
prop: 'Report_State',
|
||||
label: '报告状态',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
prop: 'Check_Result',
|
||||
label: '检测结果',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
prop: 'Check_State',
|
||||
label: '检测状态',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
prop: 'Document_State',
|
||||
label: '归档状态',
|
||||
minWidth: 130,
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 },
|
||||
])
|
||||
|
||||
const open = (textTitle: string) => {
|
||||
dialogVisible.value = true
|
||||
title.value = textTitle
|
||||
}
|
||||
|
||||
|
||||
defineExpose({ open })
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: String,
|
||||
default: '800px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '744px',
|
||||
},
|
||||
})
|
||||
|
||||
//选中
|
||||
// 处理选择变化
|
||||
const handleSelectionChange = (selection:Device.DeviceList[]) => {
|
||||
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
|
||||
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
:draggable="true"
|
||||
:destroy-on-close="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<div class="container">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
status-icon
|
||||
>
|
||||
<el-form-item label="Activity name" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity count" prop="count">
|
||||
<el-select-v2
|
||||
v-model="ruleForm.count"
|
||||
placeholder="Activity count"
|
||||
:options="options"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="ruleForm.date1"
|
||||
type="date"
|
||||
aria-label="Pick a date"
|
||||
placeholder="Pick a date"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="text-center" :span="2">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker
|
||||
v-model="ruleForm.date2"
|
||||
aria-label="Pick a time"
|
||||
placeholder="Pick a time"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity location" prop="location">
|
||||
<el-segmented v-model="ruleForm.location" :options="locationOptions" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox value="Online activities" name="type">
|
||||
Online activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Promotion activities" name="type">
|
||||
Promotion activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Offline activities" name="type">
|
||||
Offline activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Simple brand exposure" name="type">
|
||||
Simple brand exposure
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio value="Sponsorship">Sponsorship</el-radio>
|
||||
<el-radio value="Venue">Venue</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
|
||||
|
||||
interface RuleForm {
|
||||
name: string
|
||||
region: string
|
||||
count: string
|
||||
date1: string
|
||||
date2: string
|
||||
delivery: boolean
|
||||
location: string
|
||||
type: string[]
|
||||
resource: string
|
||||
desc: string
|
||||
}
|
||||
const formSize = ref<ComponentSize>('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
name: 'Hello',
|
||||
region: '',
|
||||
count: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
location: '',
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
})
|
||||
const locationOptions = ['Home', 'Company', 'School']
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity zone',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
count: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity count',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date1: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a date',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date2: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a time',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
location: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a location',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: 'Please select at least one activity type',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
resource: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select activity resource',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
close()
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
close()
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
|
||||
const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
||||
value: `${idx + 1}`,
|
||||
label: `${idx + 1}`,
|
||||
}))
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
const dialogVisible = ref<boolean>(false);
|
||||
const dialogTitle = ref<string>("");
|
||||
const open = (title: string) => {
|
||||
dialogTitle.value = title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const close=()=>{
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user