sfms3.0-ui/src/views/eam/equipmentMaintenanceMain/finishForm2.vue

<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="保养人ID" prop="maintenancer">
            <el-input v-model="formData.maintenancer" placeholder="请输入保养人" :disabled="isDisabled"/>
          </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="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-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 EquipmentMaintenanceMainApi from '@/api/eam/equipmentMaintenanceMain'
import { SearchTable } from '@/components/SearchTable'
import {ElInput} from "element-plus";

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:'',
  maintenancer: '',
  maintenancePhone: '',
  startTime:'',
  endTime:'',
  status:'5',
})
const formRules = reactive({
  maintenancer: [
    { required: true, message: '保养人ID不能为空', trigger: 'blur' },
  ],
  maintenancePhone: [
    { 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.planNumber
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const submitForm = async (val) => {


   // 校验表单
   if (!basicFormRef) return
   const valid = await basicFormRef.value.validate()
   if (!valid) return

   //发送数据
   await EquipmentMaintenanceMainApi.executeMaintenanceOrder(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>