sfms3.0-ui/src/views/qms/qualityNotice/components/qualityNotice.vue

<template>
  <div class="content">
    <el-form
      :model="form"
      label-width="120px"
      :rules="rules"
      ref="formRef"
      :disabled='disabled'
    >
      <!-- 质量通知表单 -->
      <el-row :gutter="20">
        <el-col :span="12" v-if="form.number">
          <el-form-item label="编码" prop="number">
            <el-input v-model="form.number" placeholder="请选择编码" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <!-- <el-input v-model="form.type" placeholder="请选择类型"/> -->
            <el-select v-model="form.type" placeholder="请选择类型" disabled>
              <el-option v-for="item in getIntDictOptions(DICT_TYPE.QUALITY_NOTIFICATION_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" placeholder="请输入描述"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详情" prop="detail">
            <el-input v-model="form.detail" placeholder="请输入详情"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优先级" prop="priority">
            <el-input-number v-model="form.priority" :precision="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <!-- <el-input v-model="form.status" placeholder="请选择状态"/> -->
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报告人" prop="reporter">
            <el-input v-model="form.reporter" placeholder="请输入报告人"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报告时间" prop="reportTime">
            <el-date-picker v-model="form.reportTime" type="datetime" placeholder="请选择报告时间" style="width: 100%;" value-format="x"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="要求开始时间" prop="requestStartTime">
            <el-date-picker v-model="form.requestStartTime" type="datetime" placeholder="请选择要求开始时间" style="width: 100%;" value-format="x"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="要求结束时间" prop="requestEndTime">
            <el-date-picker v-model="form.requestEndTime" type="datetime" placeholder="请选择要求结束时间" style="width: 100%;" value-format="x"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否造成停机" prop="whetherCausesMachineHalt">
            <el-switch v-model="form.whetherCausesMachineHalt" @change="changeHalt"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停机开始时间" prop="machineHaltStartTime">
            <el-date-picker v-model="form.machineHaltStartTime" type="datetime" placeholder="请选择停机开始时间" style="width: 100%;" value-format="x"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停机结束时间" prop="machineHaltEndTime">
            <el-date-picker v-model="form.machineHaltEndTime" type="datetime" placeholder="请选择停机结束时间" style="width: 100%;" value-format="x"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="协调人" prop="coordinator">
            <el-input v-model="form.coordinator" placeholder="请输入协调人"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务模板编号" prop="taskTemplateCode">
            <el-input v-model="form.taskTemplateCode" placeholder="请输入任务模板编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完成时间" prop="finishTime">
            <el-date-picker v-model="form.finishTime" type="datetime" placeholder="请选择完成时间" style="width: 100%;" value-format="x"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参考通知编号" prop="referenceNoticeCode">
            <el-input v-model="form.referenceNoticeCode" placeholder="请输入参考通知编号"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
// 质量通知类型数据
const form = ref({
  description:'',
  detail:'',
  type:1,
  priority:0,
  status:1,
  reporter:'',
  reportTime:'',
  requestStartTime:"",
  requestEndTime:"",
  whetherCausesMachineHalt:false,
  machineHaltStartTime:"",
  machineHaltEndTime:"",
  coordinator:"",
  taskTemplateCode:"",
  finishTime:"",
  referenceNoticeCode:""
})
const formRef = ref()
// 质量通知校验
const rules = ref({
  priority: [required],
  status: [required],
  reporter: [required],
  reportTime: [required],
  requestStartTime: [required],
  requestEndTime: [required],
  machineHaltStartTime: [{ required: false , message: '该项为必填项', trigger: 'blur' }],
  machineHaltEndTime: [{ required: false , message: '该项为必填项', trigger: 'blur' }],
  coordinator: [required],
})

const props = defineProps({
  // 类型
  type: {
    type: Number,
    default: 0
  },
   // 数据
   data: {
    type: Object,
    default: null
  },
  // 是否可输入
  disabled:{
    type:Boolean,
    default: false
  }
})
const statusList = ref()
// 编辑赋值
nextTick(()=>{
  form.value = props.data ? props.data: {}
  form.value.status = 1
  if(form.value.number){
    statusList.value = getIntDictOptions(DICT_TYPE.QUALITY_NOTICE_STATUS)
  }else{
    statusList.value =getIntDictOptions(DICT_TYPE.QUALITY_NOTICE_STATUS).filter(item=>item.value == 1)
  }
  form.value.status = parseInt(form.value.status)
})

// 选择是否停机
const changeHalt= (e)=>{
  console.log(rules.value.machineHaltStartTime[0])
  if(e){
    rules.value.machineHaltStartTime[0].required = true
    rules.value.machineHaltEndTime[0].required = true
  }else{
    rules.value.machineHaltStartTime[0].required = false
    rules.value.machineHaltEndTime[0].required = false
  }
}
watch(
  () => props.type,
  (val) => {
    form.value.type = val
  }
)
defineExpose({formRef,form})
</script>
<style scoped lang="scss">
.content{
padding: 20px;
.type{
padding: 0px 20px 20px;}
}
</style>