You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
262 lines
8.2 KiB
262 lines
8.2 KiB
<template>
|
|
<Dialog v-model="dialogVisible" :title="dialogTitle" :close-on-click-modal="false">
|
|
<el-form ref="basicFormRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="100px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="维修描述" prop="maintenanceDesc">
|
|
<el-input v-model="formData.maintenanceDesc" placeholder="请输入维修描述" :disabled="isDisabled"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="维修级别" prop="level">
|
|
<el-select v-model="formData.level" placeholder="请选择维修级别" style="width: 150px">
|
|
<el-option label="大修" value="0"></el-option>
|
|
<el-option label="中修" value="1"></el-option>
|
|
<el-option label="小修" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="维修开始时间" prop="startTime">
|
|
<el-date-picker
|
|
v-model="formData.startTime"
|
|
type="datetime"
|
|
value-format="x"
|
|
placeholder="选择维修开始时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="维修结束时间" prop="endTime">
|
|
<el-date-picker
|
|
v-model="formData.endTime"
|
|
type="datetime"
|
|
value-format="x"
|
|
placeholder="选择维修结束时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="执行人" prop="maintenancer">
|
|
<el-input v-model="formData.maintenancer" placeholder="请输入执行人"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="维修人电话" prop="maintenancePhone">
|
|
<el-input v-model="formData.maintenancePhone" placeholder="请输入维修人电话" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="结果" prop="completeResult">
|
|
<el-select v-model="formData.completeResult" placeholder="请选择结果" style="width: 150px">
|
|
<el-option label="完成" value="0"></el-option>
|
|
<el-option label="临时措施" value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button :disabled="formLoading" type="primary" @click="submitForm('success')">确 定</el-button>
|
|
<el-button @click="handleClose('close')">取 消</el-button>
|
|
</template>
|
|
</Dialog>
|
|
|
|
<!--添加巡检项弹窗-->
|
|
<SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />
|
|
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import * as EquipmentRepairJobMainApi from '@/api/eam/equipmentRepairJobMain'
|
|
import { SearchTable } from '@/components/SearchTable'
|
|
import {ElInput} from "element-plus";
|
|
import {updateEquipmentRepairMain} from "@/api/eam/equipmentRepairJobMain";
|
|
|
|
defineOptions({ name: 'TeamForm' })
|
|
|
|
const { t } = useI18n() // 国际化
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
const dialogTitle = ref('') // 弹窗的标题
|
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
const tags=ref([])
|
|
|
|
const inputValue = ref('')
|
|
const inputVisible = ref(false)
|
|
const isDisabled = ref(false)
|
|
const InputRef = ref<InstanceType<typeof ElInput>>()
|
|
|
|
|
|
const formData = ref({
|
|
id:'',
|
|
number:'',
|
|
maintenanceDesc: '',
|
|
level: '',
|
|
startTime:'',
|
|
endTime:'',
|
|
maintenancer:'',
|
|
maintenancePhone:'',
|
|
completeResult:'',
|
|
})
|
|
const formRules = reactive({
|
|
maintenanceDesc: [
|
|
{ required: true, message: '维修描述不能为空', trigger: 'blur' },
|
|
],
|
|
level: [
|
|
{ required: true, message: '维修等级不能为空', trigger: 'blur' },
|
|
],
|
|
startTime: [
|
|
{ required: true, message: '开始时间不能为空', trigger: 'blur' },
|
|
],
|
|
endTime: [
|
|
{ required: true, message: '结束时间不能为空', trigger: 'blur' },
|
|
],
|
|
maintenancer: [
|
|
{ required: true, message: '维修人ID不能为空', trigger: 'blur' },
|
|
],
|
|
maintenancePhone: [
|
|
{ required: true, message: '维修人电话不能为空', trigger: 'blur' },
|
|
],
|
|
completeResult: [
|
|
{ required: true, message: '结果不能为空', trigger: 'blur' },
|
|
],
|
|
})
|
|
const basicFormRef = ref() // 表单 Ref
|
|
|
|
// /** 弹窗相关参数 */
|
|
// const searchTableRef = ref();
|
|
// const _searchTableTitle = ref();
|
|
// const _searchTableAllSchemas = ref();
|
|
// const _searchTablePage = ref();
|
|
// const _formField = ref();
|
|
// const _searchField = ref();
|
|
// const _multiple = ref();
|
|
// const _type = ref();
|
|
// const _row = ref();
|
|
// const _searchCondition = ref({})
|
|
//
|
|
//
|
|
// const addItem = () =>{
|
|
// addItemCommon(true,'xunJianItem')
|
|
// }
|
|
//
|
|
// /** 选择巡检项弹窗 */
|
|
// const addItemCommon = (multiple,field) => {
|
|
// _searchCondition.value = {}
|
|
// const filters: any[] = []
|
|
// filters.push({
|
|
// action: "==",
|
|
// column: 'available',
|
|
// value: 'TRUE'
|
|
// })
|
|
// // 参数整理
|
|
// _searchCondition.value.isSearch = true
|
|
// _searchCondition.value.filters = filters
|
|
// _searchTableTitle.value = '选择巡检项'
|
|
// _multiple.value = multiple
|
|
// _formField.value = field
|
|
// _searchField.value = field
|
|
// _searchTablePage.value = inspectionItemApi.getInspectionItemPage
|
|
// _searchTableAllSchemas.value = InspectionItem.allSchemas
|
|
// openCommon()
|
|
// }
|
|
//
|
|
// /** 弹窗选择之后 回调函数 添加选择集 */
|
|
// const searchTableSuccess = (formField, searchField, val, formRef, type, row ) => {
|
|
// nextTick?.(() => {
|
|
// if (formField === 'xunJianItem') {
|
|
// val.forEach(item => {
|
|
// const isExist = tags.value.some(tag => tag.content === item.content);
|
|
// if (!isExist){
|
|
// const newItem = {};
|
|
// newItem['content'] = item.content;
|
|
// newItem['id'] = item.id;
|
|
// tags.value.push(newItem);
|
|
// }
|
|
// });
|
|
// }
|
|
// })
|
|
// }
|
|
// /*打开弹窗*/
|
|
// const openCommon = () => {
|
|
// searchTableRef.value.open(
|
|
// _searchTableTitle.value,
|
|
// _searchTableAllSchemas.value,
|
|
// _searchTablePage.value,
|
|
// _formField.value,
|
|
// _searchField.value,
|
|
// _multiple.value,
|
|
// _type.value,
|
|
// _row.value,
|
|
// _searchCondition.value
|
|
// )
|
|
// }
|
|
/** 初始化弹窗 */
|
|
const open = async (type: string, row?: object) => {
|
|
dialogVisible.value = true
|
|
dialogTitle.value = t('action.' + type)
|
|
formType.value = type
|
|
//初始化数据
|
|
formData.value.id = row.id
|
|
formData.value.number = row.number
|
|
}
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
|
/** 提交表单 */
|
|
const submitForm = async (val) => {
|
|
|
|
|
|
// 校验表单
|
|
if (!basicFormRef) return
|
|
const valid = await basicFormRef.value.validate()
|
|
if (!valid) return
|
|
|
|
//发送数据
|
|
await EquipmentRepairJobMainApi.updateEquipmentRepairMain(formData.value);
|
|
|
|
//把success函数传递到父页面
|
|
emit('success',formData.value.id)
|
|
dialogVisible.value = false
|
|
}
|
|
|
|
const handleClose=(val)=>{
|
|
dialogVisible.value = false
|
|
emit('close',val)
|
|
}
|
|
|
|
// 传递给父类
|
|
const emit = defineEmits(['close','success'])
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tag-container {
|
|
margin-top: 10px; /* 可根据需要调整标签容器与表单项之间的间距 */
|
|
border: 1px solid #ccc; /* 添加边框样式 */
|
|
padding: 10px; /* 可根据需要调整容器内边距 */
|
|
width: 950px; /* 设置固定宽度为 950px */
|
|
overflow-y: auto; /* 当内容溢出容器高度时显示滚动条 */
|
|
word-wrap: break-word; /* 使用 word-wrap 属性实现超出范围换行 */
|
|
overflow-wrap: break-word; /* 兼容性更好的写法 */
|
|
flex-wrap: wrap;
|
|
}
|
|
.input-with-button {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-with-button > .el-input {
|
|
flex: 1;
|
|
/*margin-right: 10px;*/
|
|
}
|
|
|
|
</style>
|
|
|