klp-oa/klp-ui/src/views/wms/post/objection/components/DeptOpinionForm.vue

<template>
  <div class="dept-form-container">
    <!-- 生产部 deptId=1 -->
    <template v-if="deptId === 1">
      <el-form-item label="内部调查情况" prop="internalInvestigation">
        <el-input v-model="formData.internalInvestigation" type="textarea" :rows="3" placeholder="请描述内部调查情况" @input="emitJson" />
      </el-form-item>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="确认人" prop="internalConfirmer">
            <el-input v-model="formData.internalConfirmer" placeholder="请输入确认人" @input="emitJson" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期" prop="internalConfirmDate">
            <el-date-picker v-model="formData.internalConfirmDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%" @change="emitJson" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="外部调查情况" prop="externalInvestigation">
        <el-input v-model="formData.externalInvestigation" type="textarea" :rows="3" placeholder="请描述外部调查情况" @input="emitJson" />
      </el-form-item>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="确认人" prop="externalConfirmer">
            <el-input v-model="formData.externalConfirmer" placeholder="请输入确认人" @input="emitJson" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期" prop="externalConfirmDate">
            <el-date-picker v-model="formData.externalConfirmDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%" @change="emitJson" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="责任单位" prop="responsibleUnit">
        <el-input v-model="formData.responsibleUnit" placeholder="请输入责任单位" @input="emitJson" />
      </el-form-item>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="接收人" prop="receiver">
            <el-input v-model="formData.receiver" placeholder="请输入接收人" @input="emitJson" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接受日期" prop="acceptDate">
            <el-date-picker v-model="formData.acceptDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%" @change="emitJson" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>

    <!-- 质量部 deptId=2 -->
    <template v-else-if="deptId === 2">
      <el-form-item label="产生原因" prop="cause">
        <el-input v-model="formData.cause" type="textarea" :rows="3" placeholder="请描述产生原因" @input="emitJson" />
      </el-form-item>
      <el-form-item label="流出原因" prop="escapeReason">
        <el-input v-model="formData.escapeReason" type="textarea" :rows="3" placeholder="请描述流出原因" @input="emitJson" />
      </el-form-item>
      <el-form-item label="纠正措施" prop="correctiveAction">
        <el-input v-model="formData.correctiveAction" type="textarea" :rows="3" placeholder="请输入纠正措施" @input="emitJson" />
      </el-form-item>
      <el-form-item label="预计整改完成日期" prop="rectifyDate">
        <el-date-picker v-model="formData.rectifyDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%" @change="emitJson" />
      </el-form-item>
      <el-form-item label="主管意见" prop="supervisorOpinion">
        <el-input v-model="formData.supervisorOpinion" type="textarea" :rows="2" placeholder="请输入主管意见" @input="emitJson" />
      </el-form-item>
    </template>

    <!-- 销售部 deptId=3 -->
    <template v-else>
      <el-form-item label="处理意见" prop="handlingOpinion">
        <el-input v-model="formData.handlingOpinion" type="textarea" :rows="4" placeholder="请输入处理意见" @input="emitJson" />
      </el-form-item>
      <el-form-item label="领导意见" prop="leaderOpinion">
        <el-input v-model="formData.leaderOpinion" type="textarea" :rows="3" placeholder="请输入领导意见" @input="emitJson" />
      </el-form-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'DeptOpinionForm',
  props: {
    deptId: {
      type: Number,
      required: true
    },
    jsonData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {}
    };
  },
  watch: {
    jsonData: {
      immediate: true,
      handler(val) {
        this.parseJson(val);
      }
    },
    deptId() {
      this.parseJson(this.jsonData);
    }
  },
  methods: {
    parseJson(val) {
      const defaults = this.getDefaults();
      if (val) {
        try {
          const parsed = JSON.parse(val);
          this.formData = { ...defaults, ...parsed };
        } catch (e) {
          this.formData = { ...defaults };
        }
      } else {
        this.formData = { ...defaults };
      }
    },
    getDefaults() {
      if (this.deptId === 1) {
        return { internalInvestigation: '', internalConfirmer: '', internalConfirmDate: '', externalInvestigation: '', externalConfirmer: '', externalConfirmDate: '', responsibleUnit: '', receiver: '', acceptDate: '' };
      } else if (this.deptId === 2) {
        return { cause: '', escapeReason: '', correctiveAction: '', rectifyDate: '', supervisorOpinion: '' };
      } else {
        return { handlingOpinion: '', leaderOpinion: '' };
      }
    },
    emitJson() {
      this.$emit('input', JSON.stringify(this.formData));
    }
  }
};
</script>

<style scoped>
.dept-form-container {
  width: 100%;
}
</style>