完成7.7质量监督计划

licp

2024-12-19 6566ae250ee4a89613a36953c7a42a212c33125f

完成7.7质量监督计划

 src/components/do/a7-quality-control-plan/detailFormDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,163 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :title="operationType === 'edit'? '编辑' : '新增'"
               :visible.sync="formDia"
               width="80%" @close="closeDia">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-col :span="12">
          <el-form-item label="监督日期" prop="superviseTime">
            <el-date-picker
              v-model="form.superviseTime"
              clearable
              format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
              style="width: 100%"
              type="date"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监督目的" prop="supervisePurpose">
            <el-input v-model="form.supervisePurpose" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监控项目" prop="superviseProject">
            <el-input v-model="form.superviseProject" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="被监督人员" prop="supervisee">
            <el-input v-model="form.supervisee" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监督原因" prop="superviseReason">
            <el-input v-model="form.superviseReason" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDia">取 æ¶ˆ</el-button>
                    <el-button :loading="upLoad" type="primary" @click="submitForm">ç¡® å®š</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'detailFormDialog',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  props: ['superviseId'],
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formDia: false,
      form: {
        qualityMonitorDetailsId: '',
        superviseTime: '',
        supervisePurpose: '',
        superviseProject: '',
        supervisee: '',
        superviseReason: '',
        remark: '',
        superviseDetailsId: '',
      },
      rules: {
        superviseTime: [{ required: true, message: '请输入监督日期', trigger: 'blur' }],
        supervisePurpose: [{ required: true, message: '请输入监督目的', trigger: 'blur' }],
        superviseProject: [{ required: true, message: '请输入监控项目', trigger: 'blur' }],
      },
      upLoad: false,
      operationType: '',
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia(type, row) {
      this.formDia = true
      this.operationType = type
      if (type === 'edit') {
        this.searchInfo(row)
      }
    },
    searchInfo (row) {
      this.form = {...row}
    },
    // æäº¤è¡¨å•
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.operationType === 'add') {
            this.handleAdd()
          } else {
            this.handleEdit()
          }
        }
      })
    },
    // æäº¤æ–°å¢ž
    handleAdd () {
      let entity = this.HaveJson(this.form)
      entity.superviseId = this.superviseId
      this.upLoad = true
      this.$axios.post(this.$api.qualitySupervise.addQualitySuperviseDetail, entity, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.upLoad = false
        if (res.code === 201) return
        this.$message.success('新增成功')
        this.closeDia()
      }).catch(err => {
        console.log('err---', err);
        this.upLoad = false
      })
    },
    // æäº¤ä¿®æ”¹
    handleEdit () {
      const entity = this.HaveJson(this.form)
      this.upLoad = true
      this.$axios.post(this.$api.qualitySupervise.updateQualitySuperviseDetail, entity, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.upLoad = false
        if (res.code === 201) return
        this.$message.success('修改成功')
        this.closeDia()
      }).catch(err => {
        console.log('err---', err);
        this.upLoad = false
      })
    },
    // å…³é—­å¼¹æ¡†
    closeDia () {
      this.$refs.form.resetFields();
      this.formDia = false
      this.$emit('closeDia')
    },
  }
};
</script>

<style scoped>
>>>.el-dialog__body {
  max-height: 720px;
  overflow-y: auto;
}
</style>

 src/components/do/a7-quality-control-plan/processingSheet.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,512 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="formDia"
               title="不符合工作控制单"
               width="60%" @close="closeProcessingDia">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="不符合工作情况记录" @click.native="setStep(0)"></el-step>
        <el-step title="处理措施" @click.native="setStep(1)"></el-step>
        <el-step title="纠正措施" @click.native="setStep(2)"></el-step>
        <el-step title="是否通知客户及可恢复工作" @click.native="setStep(3)"></el-step>
      </el-steps>
      <div>
        <table border="1" cellspacing="10" class="tables">
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p>发生部门：</p>
            </td>
            <td class="td-info">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.occurrenceDepartment"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.occurrenceDepartment }}</span>
            </td>
            <td class="td-title">
              <p>部门负责人：</p>
            </td>
            <td class="td-info">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.headDepartment"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.headDepartment }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p><span class="required-span">* </span>不符合工作发现途径：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-radio-group v-model="form.findWay" v-removeAriaHidden :disabled="showStep === 0 && currentStep !== 0">
                <el-radio :label="0">管理评审</el-radio>
                <el-radio :label="1">内部审核</el-radio>
                <el-radio :label="2">检测过程控制</el-radio>
                <el-radio :label="3">内部质量控制</el-radio>
                <el-radio :label="4">内部监督</el-radio>
                <el-radio :label="5">外部评审</el-radio>
                <el-radio :label="6">外部投诉</el-radio>
                <el-radio :label="7">其他</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p>不符合工作的详细记录：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.recordDetail"
                        :rows="4"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.recordDetail }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p>不符合工作的以及及条款号：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.recordAccording"
                        :rows="4"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.recordAccording }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p><span class="required-span">* </span>被监督人：</p>
            </td>
            <td class="td-info">
              <el-select v-if="showStep === 0 && currentStep === 0" v-model="form.supervisedUserId" clearable
                         filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in supervisedUserList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.supervisedUserName }}</span>
            </td>
            <td class="td-title">
              <p><span class="required-span">* </span>被监督时间：</p>
            </td>
            <td class="td-info">
              <el-date-picker
                v-if="showStep === 0 && currentStep === 0"
                v-model="form.supervisedTime"
                format="yyyy-MM-dd"
                placeholder="选择日期"
                size="small"
                style="width: 80%"
                type="date"
                value-format="yyyy-MM-dd">
              </el-date-picker>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.supervisedTime }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td v-if="currentStep === 0" class="td-title">
              <p><span class="required-span">* </span>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 0" class="td-info">
              <el-select v-model="form.actionsUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 0 && currentStep !== 0">
            <td class="td-title">
              <p>发现部门：</p>
            </td>
            <td class="td-info">
              {{form.foundDepartment}}
            </td>
            <td class="td-title">
              <p>时间：</p>
            </td>
            <td class="td-info">
              {{form.recordTime}}
            </td>
          </tr>
          <tr v-if="showStep === 0 && currentStep !== 0">
            <td class="td-title">
              <p>记录人：</p>
            </td>
            <td class="td-info">
              {{form.recordUserName}}
            </td>
            <td class="td-title">
              <p>记录时间：</p>
            </td>
            <td class="td-info">
              {{form.recordTime}}
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td class="td-title">
              <p><span class="required-span">* </span>消除不符合工作所采取的措施：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 1 && currentStep === 1" v-model="form.eliminateMeasure"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 1 && currentStep !== 1" class="td-info1"> {{ form.eliminateMeasure }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td class="td-title">
              <p>当前负责人：</p>
            </td>
            <td class="td-info">
              {{form.actionsUserName}}
            </td>
            <td class="td-title">
              <p>处理时间：</p>
            </td>
            <td class="td-info">
              {{form.actionsTime}}
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td v-if="currentStep === 1" class="td-title">
              <p><span class="required-span">* </span>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 1" class="td-info" colspan="3">
              <el-select v-model="form.correctUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p><span class="required-span">* </span>是否需要采取纠正措施：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-radio-group v-model="form.isCorrect" v-removeAriaHidden :disabled="showStep === 2 && currentStep !== 2">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p>纠正措施处理单跟踪：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 2 && currentStep === 2" v-model="form.correctContent"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 2 && currentStep !== 2" class="td-info1"> {{ form.correctContent }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p>当前负责人：</p>
            </td>
            <td class="td-info">
              {{form.correctUserName}}
            </td>
            <td v-if="showStep === 2 && currentStep !== 2" class="td-title">
              <p>处理时间：</p>
            </td>
            <td v-if="showStep === 2 && currentStep !== 2" class="td-info">
              {{form.correctTime}}
            </td>
            <td v-if="currentStep === 2" class="td-title">
              <p><span class="required-span">* </span>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 2" class="td-info">
              <el-select v-model="form.qualityManagerUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 3">
            <td rowspan="3">
              <p>是否通知客户及可恢复工作</p>
            </td>
          </tr>
          <tr v-if="showStep === 3">
            <td class="td-title">
              <p><span class="required-span">* </span>通知客户：</p>
            </td>
            <td class="td-info" colspan="2">
              <el-radio-group v-model="form.notifyCustomer" v-removeAriaHidden :disabled="showStep === 3 && currentStep !== 3">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-if="showStep === 3">
            <td class="td-title">
              <p><span class="required-span">* </span>恢复工作：</p>
            </td>
            <td class="td-info" colspan="2">
              <el-radio-group v-model="form.backToWork" v-removeAriaHidden :disabled="showStep === 3 && currentStep !== 3">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-if="showStep === 3">
            <td class="td-title">
              <p>当前负责人：</p>
            </td>
            <td class="td-info">
              {{form.qualityManagerUserName}}
            </td>
            <td v-if="showStep === 3 && currentStep !== 3" class="td-title">
              <p>处理时间：</p>
            </td>
            <td v-if="showStep === 3 && currentStep !== 2" class="td-info">
              {{form.qualityManagerTime}}
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeProcessingDia">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 4" :loading="editLoad" type="primary" @click="handleEdit">提 äº¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'processingSheet',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formDia: false,
      currentStep: 0,
      showStep: 0,
      form: {
        occurrenceDepartment: '',
        headDepartment: '',
        findWay: '',
        recordDetail: '',
        recordAccording: '',
        supervisedUserId: '',
        supervisedUserName: '',
        supervisedTime: '',
        actionsUserId: '',
        actionsUserName: '',
        eliminateMeasure: '',
        correctUserId: '',
        correctUserName: '',
        isCorrect: '',
        qualityManagerUserId: '',
        correctContent: '',
        superviseDetailsId: '',
        superviseDetailsAccordingId: '',
        flowType: '',
        recordUserName: '',
        recordTime: '',
        foundDepartment: '',
        actionsTime: '',
        correctTime: '',
        notifyCustomer: '',
        backToWork: '',
        qualityManagerUserName: '',
        qualityManagerTime: '',
      },
      editLoad: false,
      personList: [],
      supervisedUserList: [],
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia (row) {
      this.formDia = true
      this.searchInfo(row)
      this.form.superviseDetailsId = row.superviseDetailsId
      this.getAuthorizedPerson() // èŽ·å–人员列表
      this.getSupervisedUserList() // èŽ·å–当前部门人员
    },
    // æŸ¥è¯¢ç›‘控计划详情实施信息
    searchInfo (row) {
      this.form.qualityMonitorDetailsId = row.qualityMonitorDetailsId
      this.$axios.get(this.$api.qualitySupervise.getSuperviseDetailAccording + '?superviseDetailsId=' + row.superviseDetailsId).then(res => {
        if (res.code === 201) return
        if (res.data.superviseDetailsAccordingId === null) {
          this.showStep = 0
          this.currentStep = 0
        } else {
          this.form = res.data
          if (res.data.isFinish === 0) {
            if (res.data.actionsUserId) {
              this.showStep = 1
              this.currentStep = 1
            }
            if (res.data.correctUserId) {
              this.showStep = 2
              this.currentStep = 2
            }
            if (res.data.qualityManagerUserId) {
              this.showStep = 3
              this.currentStep = 3
            }
          } else {
            this.currentStep = 4
            this.showStep = 3
          }
        }
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // æäº¤
    handleEdit () {
      if (this.currentStep === 0) {
        if (this.form.findWay === null) {
          this.$message.warning('请选择不符合工作发现途径')
          return
        }
        if (!this.form.supervisedUserId) {
          this.$message.warning('请选择被监督人')
          return
        }
        if (!this.form.supervisedTime) {
          this.$message.warning('请选择被监督时间')
          return
        }
        if (!this.form.actionsUserId) {
          this.$message.warning('请选择下一步负责人')
          return
        }
      } else if (this.currentStep === 1) {
        if (!this.form.supervisedUserId) {
          this.$message.warning('请填写消除不符合工作所采取的措施')
          return
        }
        if (!this.form.correctUserId) {
          this.$message.warning('请选择下一步负责人')
          return
        }
      } else if (this.currentStep === 2) {
        if (this.form.isCorrect === null) {
          this.$message.warning('请选择是否需要采取纠正措施')
          return
        }
        if (!this.form.qualityManagerUserId) {
          this.$message.warning('请选择下一步负责人')
          return
        }
      } else if (this.currentStep === 3) {
        if (this.form.notifyCustomer === null) {
          this.$message.warning('请选择是否通知客户')
          return
        }
        if (this.form.backToWork === null) {
          this.$message.warning('请选择是否恢复工作')
          return
        }
      }
      this.editLoad = true
      this.form.supervisedTime = ''
      this.form.flowType = this.currentStep
      delete this.form.recordTime
      delete this.form.actionsTime
      delete this.form.correctTime
      this.$axios.post(this.$api.qualitySupervise.addSuperviseDetailAccording, this.form, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.editLoad = false
        if (res.code === 201) return
        this.$message.success('提交成功')
        this.closeProcessingDia()
      }).catch(err => {
        console.log('err---', err);
        this.editLoad = false
      })
    },
    // å…³é—­å¼¹æ¡†
    closeProcessingDia () {
      this.formDia = false
      this.$emit('closeProcessingDia')
    },
    setStep (step) {
      this.showStep = step
    },
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getUserMenu).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.personList = data
      })
    },
    getSupervisedUserList () {
      this.$axios.get(this.$api.user.selectDepartmentLimsUserList).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.supervisedUserList = data
      })
    },
  }
};
</script>

<style scoped>
>>>.el-dialog {
  margin: 10vh auto 50px !important;
}
.tables {
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
}
.td-title {
  height: 40px;
  width: 170px;
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}
.td-info {
  padding: 6px;
}
.td-info1 {
  display: inline-block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
}
</style>

 src/components/do/a7-quality-control-plan/recordsDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,423 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="formDia"
               title="检测工作监督记录表"
               width="70%" @close="closeRecordsDia">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="实施"></el-step>
        <el-step title="批准"></el-step>
      </el-steps>
      <div style="height: 65vh;overflow-y: auto">
        <table border="1" cellspacing="10" class="tables">
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>检测人员：</p>
            </td>
            <td colspan="2">
              <el-input v-if="currentStep === 0" v-model="form.testMember"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.testMember }}</span>
            </td>
            <td class="td-title">
              <p><span class="required-span">* </span>监督员：</p>
            </td>
            <td colspan="2">
              <el-input v-if="currentStep === 0" v-model="form.supervisor"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.supervisor }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>检测项目：</p>
            </td>
            <td>
              <el-input v-if="currentStep === 0" v-model="form.testItem"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.testItem }}</span>
            </td>
            <td class="td-title">
              <p><span class="required-span">* </span>样品编号：</p>
            </td>
            <td>
              <el-input v-if="currentStep === 0" v-model="form.sampleNumber"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.sampleNumber }}</span>
            </td>
            <td class="td-title">
              <p><span class="required-span">* </span>检测日期：</p>
            </td>
            <td>
              <el-input v-if="currentStep === 0" v-model="form.testDate"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.testDate }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>人员：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.personnel"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.personnel }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>仪器设备：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.device"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.device }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>工作环境：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.environment"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.environment }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>样品采集：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.sampleCollection"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.sampleCollection }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>样品的准备：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.samplePreparation"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.samplePreparation }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>检测方法：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.detectionMethod"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.detectionMethod }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>检测记录：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.inspectionRecord"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.inspectionRecord }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>检测报告：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.examiningReport"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.examiningReport }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>监督情况评价：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.supervisionEvaluation"
                        :rows="4"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-else class="td-info"> {{ form.supervisionEvaluation }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p><span class="required-span">* </span>不符合处理意见：</p>
            </td>
            <td colspan="5">
              <el-input v-if="currentStep === 0" v-model="form.handlingAdvice"
                        :rows="4"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-else class="td-info"> {{ form.handlingAdvice }}</span>
            </td>
          </tr>
          <tr>
            <td v-if="currentStep === 0" class="td-title">
              <p><span class="required-span">* </span>请选择下一步批准人：</p>
            </td>
            <td v-if="currentStep === 0" colspan="5">
              <el-select v-model="form.ratifyUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
            <td v-if="currentStep === 1" class="td-title">
              <p>批准负责人：</p>
            </td>
            <td v-if="currentStep === 1" class="td-info" colspan="5">
              {{form.ratifyUserName}}
            </td>
          </tr>
          <tr v-if="currentStep === 1 || currentStep === 2">
            <td class="td-title">
              <p><span class="required-span">* </span>审批结论：</p>
            </td>
            <td colspan="2">
              <el-input v-if="currentStep === 1"
                        v-model="form.ratifyOpinion"
                        :rows="4"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="currentStep === 2" class="td-info"> {{ form.ratifyOpinion }}</span>
            </td>
            <td class="td-title">
              <p v-if="currentStep === 1">请选择是否符合：</p>
              <p v-if="currentStep === 2">是否符合：</p>
            </td>
            <td colspan="2">
              <el-radio-group v-if="currentStep === 1" v-model="form.isAccording">
                <el-radio :label="0">不符合</el-radio>
                <el-radio :label="1">符合</el-radio>
              </el-radio-group>
              <span v-if="currentStep === 2" class="td-info"> {{ form.isAccording === 0 ? '不符合' : '符合' }}</span>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeRecordsDia">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 2" :loading="editLoad" type="primary" @click="handleEdit">提 äº¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'recordsDialog',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formDia: false,
      form: {
        superviseDetailsId: '',
        superviseDetailsRecordId: '',
        testMember: '',
        supervisor: '',
        testItem: '',
        sampleNumber: '',
        testDate: '',
        personnel: '',
        device: '',
        environment: '',
        sampleCollection: '',
        samplePreparation: '',
        detectionMethod: '',
        inspectionRecord: '',
        examiningReport: '',
        supervisionEvaluation: '',
        handlingAdvice: '',
        ratifyUserId: '',
        ratifyUserName: '',
        ratifyOpinion: '',
        isAccording: '',
      },
      currentStep: 0,
      editLoad: false,
      personList: [],
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia(row) {
      this.formDia = true
      this.searchInfo(row)
      this.getAuthorizedPerson()
    },
    // æŸ¥è¯¢ç›‘督计划详情记录流程信息
    searchInfo (row) {
      this.$axios.get(this.$api.qualitySupervise.getSuperviseDetailRecord + '?superviseDetailsId=' + row.superviseDetailsId).then(res => {
        if (res.code === 201) return
        // æœ‰superviseDetailsRecordId说明提交过记录
        if (res.data.superviseDetailsRecordId) {
          // æ˜¯å¦ç»“束0:未结束, 1:已结束
          if (res.data.isFinish === 0) {
            this.currentStep = 1
          } else if (res.data.isFinish === 1) {
            this.currentStep = 2
          }
        } else {
          this.currentStep = 0
        }
        this.form = res.data
        this.form.superviseDetailsId = row.superviseDetailsId
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // æäº¤æµç¨‹
    handleEdit () {
      if (!this.form.testMember || !this.form.supervisor || !this.form.testItem || !this.form.sampleNumber
        || !this.form.testDate) {
        this.$message.warning('请填写完整')
        return
      }
      if (this.currentStep === 0) {
        this.addInfo()
      } else {
        this.editInfo()
      }
    },
    // æäº¤è®°å½•
    addInfo () {
      if (!this.form.ratifyUserId) {
        this.$message.warning('请选择下一步批准人')
        return
      }
      this.editLoad = true
      this.$axios.post(this.$api.qualitySupervise.addSuperviseDetailRecord, this.form, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.editLoad = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeRecordsDia()
      }).catch(err => {
        console.log('err---', err);
        this.editLoad = false
      })
    },
    // æäº¤æ‰¹å‡†
    editInfo () {
      if (!this.form.ratifyOpinion) {
        this.$message.warning('请填写审批意见')
        return
      }
      console.log('this.form.isAccording---', this.form.isAccording);
      if (this.form.isAccording === null) {
        this.$message.warning('请选择是否符合')
        return
      }
      this.editLoad = true
      this.$axios.post(this.$api.qualitySupervise.addSuperviseRecordOpinion, this.form, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.editLoad = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeRecordsDia()
      }).catch(err => {
        console.log('err---', err);
        this.editLoad = false
      })
    },
    // å…³é—­å¼¹æ¡†
    closeRecordsDia () {
      this.formDia = false
      this.$emit('closeRecordsDia')
    },
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getUserMenu).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.personList = data
      })
    },
  }
};
</script>

<style scoped>
>>>.el-dialog {
  margin: 20px auto 50px !important;
}
.tables {
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
}
.td-title {
  height: 40px;
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}
.td-info {
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
}
.tables td {
  height: 40px;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}
</style>

 src/components/do/a7-quality-control-plan/rectifyDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,421 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="formDia"
               title="纠正措施处理单"
               width="60%" @close="closeRectifyDia">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="不合格或偏离事实的描述" @click.native="setStep(0)"></el-step>
        <el-step title="原因分析" @click.native="setStep(1)"></el-step>
        <el-step title="纠正措施" @click.native="setStep(2)"></el-step>
        <el-step title="实施验证结果" @click.native="setStep(3)"></el-step>
      </el-steps>
      <div style="height: 65vh;overflow-y: auto;">
        <table border="1" cellspacing="10" class="tables">
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p><span class="required-span">* </span>不合格或偏离事实的描述：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.raiseResult"
                        :rows="4"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.raiseResult }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td v-if="currentStep === 0" class="td-title">
              <p><span class="required-span">* </span>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 0" class="td-info" colspan="3">
              <el-select v-model="form.causeUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 0 && currentStep !== 0">
            <td class="td-title">
              <p>提出人：</p>
            </td>
            <td class="td-info">
              {{form.raiseUserName}}
            </td>
            <td class="td-title">
              <p>提出部门：</p>
            </td>
            <td class="td-info">
              {{form.raiseDepartment}}
            </td>
          </tr>
          <tr v-if="showStep === 0 && currentStep !== 0">
            <td class="td-title">
              <p>日期：</p>
            </td>
            <td class="td-info" colspan="3">
              {{form.raiseTime}}
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td class="td-title">
              <p><span class="required-span">* </span>原因分析：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 1 && currentStep === 1" v-model="form.causeResult"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 1 && currentStep !== 1" class="td-info1"> {{ form.causeResult }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 1 && currentStep !== 1">
            <td class="td-title">
              <p>原因分析人：</p>
            </td>
            <td class="td-info">
              {{form.causeUserName}}
            </td>
            <td class="td-title">
              <p>责任部门：</p>
            </td>
            <td class="td-info">
              {{form.causeDepartment}}
            </td>
          </tr>
          <tr v-if="showStep === 1 && currentStep !== 1">
            <td class="td-title">
              <p>原因分析日期：</p>
            </td>
            <td class="td-info" colspan="3">
              {{form.causeTime}}
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td v-if="currentStep === 1" class="td-title">
              <p><span class="required-span">* </span>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 1" class="td-info" colspan="3">
              <el-select v-model="form.correctUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p><span class="required-span">* </span>纠正措施：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 2 && currentStep === 2" v-model="form.correctResult"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 2 && currentStep !== 2" class="td-info1"> {{ form.correctResult }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p>提出要求部门确认：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 2 && currentStep === 2" v-model="form.raiseDepartmentAffirm"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 2 && currentStep !== 2" class="td-info1"> {{ form.raiseDepartmentAffirm }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 2 && currentStep !== 2">
            <td class="td-title">
              <p>纠正人：</p>
            </td>
            <td class="td-info">
              {{form.correctUserName}}
            </td>
            <td class="td-title">
              <p>责任部门：</p>
            </td>
            <td class="td-info">
              {{form.correctDepartment}}
            </td>
          </tr>
          <tr v-if="showStep === 2 && currentStep !== 2">
            <td class="td-title">
              <p>纠正日期：</p>
            </td>
            <td class="td-info" colspan="3">
              {{form.correctTime}}
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td v-if="currentStep === 2" class="td-title">
              <p><span class="required-span">* </span>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 2" class="td-info" colspan="3">
              <el-select v-model="form.validationUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 3">
            <td class="td-title">
              <p><span class="required-span">* </span>实施验证结果：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 3 && currentStep === 3" v-model="form.validationResult"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 3 && currentStep !== 3" class="td-info1"> {{ form.validationResult }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 3 && currentStep !== 3">
            <td class="td-title">
              <p>验证人：</p>
            </td>
            <td class="td-info">
              {{form.validationUserName}}
            </td>
            <td class="td-title">
              <p>责任部门：</p>
            </td>
            <td class="td-info">
              {{form.validationDepartment}}
            </td>
          </tr>
          <tr v-if="showStep === 3 && currentStep !== 3">
            <td class="td-title">
              <p>验证日期：</p>
            </td>
            <td class="td-info" colspan="3">
              {{form.validationTime}}
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeRectifyDia">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 4" :loading="editLoad" type="primary" @click="handleEdit">提 äº¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'rectifyDialog',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formDia: false,
      currentStep: 0,
      showStep: 0,
      form: {
        superviseDetailsId: '',
        raiseResult: '',
        vdeRaiseResult: '',
        causeUserId: '',
        raiseUserName: '',
        raiseDepartment: '',
        raiseTime: '',
        causeResult: '',
        causeUserName: '',
        causeDepartment: '',
        causeTime: '',
        correctUserId: '',
        correctResult: '',
        raiseDepartmentAffirm: '',
        correctUserName: '',
        correctDepartment: '',
        correctTime: '',
        validationUserId: '',
        validationResult: '',
        validationUserName: '',
        validationDepartment: '',
        validationTime: '',
      },
      editLoad: false,
      personList: [],
      supervisedUserList: [],
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia (row) {
      this.formDia = true
      this.searchInfo(row)
      this.form.superviseDetailsId = row.superviseDetailsId
      this.getAuthorizedPerson() // èŽ·å–人员列表
      this.getSupervisedUserList() // èŽ·å–当前部门人员
    },
    // æŸ¥è¯¢ç›‘控计划详情实施信息
    searchInfo (row) {
      this.form.qualityMonitorDetailsId = row.qualityMonitorDetailsId
      this.$axios.get(this.$api.qualitySupervise.getSuperviseDetailCorrect + '?superviseDetailsId=' + row.superviseDetailsId).then(res => {
        if (res.code === 201) return
        if (res.data.superviseDetailsCorrectId === null) {
          this.showStep = 0
          this.currentStep = 0
        } else {
          this.form = res.data
          if (res.data.isFinish === 0) {
            if (res.data.causeUserId) {
              this.showStep = 1
              this.currentStep = 1
            }
            if (res.data.correctUserId) {
              this.showStep = 2
              this.currentStep = 2
            }
            if (res.data.validationUserId) {
              this.showStep = 3
              this.currentStep = 3
            }
          } else {
            this.currentStep = 4
            this.showStep = 3
          }
        }
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // æäº¤
    handleEdit () {
      if (this.currentStep === 0) {
        if (!this.form.raiseResult) {
          this.$message.warning('请填写不合格描述')
          return
        }
        if (!this.form.causeUserId) {
          this.$message.warning('请选择下一步负责人')
          return
        }
      } else if (this.currentStep === 1) {
        if (!this.form.causeResult) {
          this.$message.warning('请填写原因分析')
          return
        }
        if (!this.form.correctUserId) {
          this.$message.warning('请选择下一步负责人')
          return
        }
      } else if (this.currentStep === 2) {
        if (!this.form.correctResult) {
          this.$message.warning('请填写纠正措施')
          return
        }
        if (!this.form.validationUserId) {
          this.$message.warning('请选择下一步负责人')
          return
        }
      } else if (this.currentStep === 3) {
        if (!this.form.validationResult) {
          this.$message.warning('请填写实施验证结果')
          return
        }
      }
      this.editLoad = true
      this.form.supervisedTime = ''
      this.form.flowType = this.currentStep
      delete this.form.recordTime
      delete this.form.actionsTime
      delete this.form.correctTime
      this.$axios.post(this.$api.qualitySupervise.addSuperviseDetailCorrect, this.form, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.editLoad = false
        if (res.code === 201) return
        this.$message.success('提交成功')
        this.closeRectifyDia()
      }).catch(err => {
        console.log('err---', err);
        this.editLoad = false
      })
    },
    // å…³é—­å¼¹æ¡†
    closeRectifyDia () {
      this.formDia = false
      this.$emit('closeRectifyDia')
    },
    setStep (step) {
      this.showStep = step
    },
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getUserMenu).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.personList = data
      })
    },
    getSupervisedUserList () {
      this.$axios.get(this.$api.user.selectDepartmentLimsUserList).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.supervisedUserList = data
      })
    },
  }
};
</script>

<style scoped>
>>>.el-dialog {
  margin: 10vh auto 50px !important;
}
.tables {
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
}
.td-title {
  height: 40px;
  width: 170px;
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}
.td-info {
  padding: 6px;
}
.td-info1 {
  display: inline-block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
}
</style>

 src/components/view/a7-quality-control-plan.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,676 @@
<template>
<!--  7.7质量监督计划-->
  <div>
    <div class="table-card">
      <TableCard title="年度计划表">
        <template v-slot:form>
          <div class="items_center">
            <span>计划名称：</span>
            <el-input v-model="yearForm.superviseName" class="search" placeholder="请输入"
                      size="small"></el-input>
            <el-button size="small" type="primary" @click="getYearPlanList">查询</el-button>
            <el-button size="small" @click="clearYear">重置</el-button>
          </div>
          <div>
            <el-upload ref='upload' :action="action"
                       :before-upload="beforeUpload" :headers="headers" :on-error="onError"
                       :on-success="handleSuccessUp" :show-file-list="false" accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'>
              <el-button :loading="upLoading" size="small" type="primary">导入</el-button>
            </el-upload>
          </div>
        </template>
        <template v-slot:table>
          <ZTTable
            ref="yearTable"
            :column="yearColumnData"
            :height="'25vh'"
            :highlightCurrentRow="true"
            :rowClick="rowClick"
            :table-data="yearTableData"
            :table-loading="yearLoading"
            style="margin-top: 0.5em;padding: 0 15px;"
          >
          </ZTTable>
          <el-divider></el-divider>
          <!-- åˆ†é¡µ -->
          <div class="pagination">
            <div></div>
            <el-pagination :page-size="yearPage.size" :page-sizes="[10, 20, 30, 40]"
                           :total="yearPage.total" layout="total, sizes, prev, pager, next, jumper"
                           @current-change="handleYearCurrent" @size-change="handleYearSizeChange">
            </el-pagination>
          </div>
        </template>
      </TableCard>
    </div>
    <div  class="table-card">
      <TableCard title="年度计划明细表">
        <template v-slot:form>
          <div class="items_center">
            <span>监督目的：</span>
            <el-input v-model="yearDetailForm.supervisePurpose" class="search" placeholder="请输入" size="small"></el-input>
            <span>监督项目：</span>
            <el-input v-model="yearDetailForm.superviseProject" class="search" placeholder="请输入" size="small"></el-input>
            <el-button size="small" type="primary" @click="getYearDetailPlanList">查询</el-button>
            <el-button size="small" @click="clearDetail">重置</el-button>
          </div>
          <div>
            <el-button size="small" type="primary" @click="showDialog('add')">新增</el-button>
          </div>
        </template>
        <template v-slot:table>
          <ZTTable :column="yearDetailColumnData" :height="'25vh'" :table-data="yearDetailTableData"
                   :table-loading="yearDetailLoading" style="margin-top: 18px; padding: 0 15px;">
          </ZTTable>
          <el-divider></el-divider>
          <!-- åˆ†é¡µ -->
          <div class="pagination">
            <div></div>
            <el-pagination :page-size="yearDetailPage.size" :page-sizes="[10, 20, 30, 40]"
                           :total="yearDetailPage.total" layout="total, sizes, prev, pager, next, jumper"
                           @current-change="handleYearDetailCurrent" @size-change="handleYearDetailSizeChange">
            </el-pagination>
          </div>
        </template>
      </TableCard>
    </div>
    <!--新增修改弹框-->
    <detail-form-dialog v-if="formDia" ref="formDia" :superviseId="superviseId" @closeDia="closeDia"></detail-form-dialog>
    <!--记录流程弹框-->
    <records-dialog v-if="recordsDia" ref="recordsDia" :superviseId="superviseId" @closeRecordsDia="closeRecordsDia"></records-dialog>
    <!--不符合处理流程弹框-->
    <processing-sheet v-if="processingDia" ref="processingDia" :superviseId="superviseId" @closeProcessingDia="closeProcessingDia"></processing-sheet>
    <!--纠正处理流程弹框-->
    <rectify-dialog v-if="rectifyDia" ref="rectifyDia" :superviseId="superviseId" @closeProcessingDia="closeRectifyDia"></rectify-dialog>
    <el-dialog :visible.sync="ratifyDialog" title="批准" width="30%" @close="closeRatifyDia">
      <span>
        æ‰¹å‡†å¤‡æ³¨ï¼š
        <el-input v-model="ratifyInfo.ratifyRemark" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="ratifyLoading" @click="handleRatify(0)">不批准</el-button>
        <el-button :loading="ratifyLoading" type="primary" @click="handleRatify(1)">批 å‡†</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="downloadDialog"
      title="导出"
      width="600px">
          <span>
            <el-button plain type="primary" @click="controlDown">记录单导出</el-button>
            <el-button plain type="primary" @click="processingDown">处理单导出</el-button>
            <el-button plain type="primary" @click="supervisoryDown">纠正单导出</el-button>
          </span>
      <span slot="footer" class="dialog-footer">
            <el-button @click="downloadDialog = false">取 æ¶ˆ</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import ZTTable from '../caorui/ZTTable/index.vue';
import TableCard from '../caorui/TableCard/index.vue';
import DetailFormDialog from '../do/a7-quality-control-plan/detailFormDialog.vue';
import RecordsDialog from '../do/a7-quality-control-plan/recordsDialog.vue';
import ProcessingSheet from '../do/a7-quality-control-plan/processingSheet.vue';
import RectifyDialog from '../do/a7-quality-control-plan/rectifyDialog.vue';

export default {
  name: 'a7-quality-control-plan',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: { RectifyDialog, ProcessingSheet, RecordsDialog, DetailFormDialog, TableCard, ZTTable },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      yearForm: {
        superviseName: '',
      },
      yearPage: {
        current: 1,
        size: 20,
        total: 0
      },
      yearColumnData: [
        {
          label: '计划名称',
          prop: 'superviseName',
          minWidth: '150px'
        }, {
          label: '编制人',
          prop: 'writeUserName',
          minWidth: '100'
        }, {
          label: '编制日期',
          prop: 'writeTime',
          minWidth: '160'
        }, {
          dataType: 'tag',
          label: '批准状态',
          prop: 'ratifyStatus',
          minWidth: '100',
          formatData: (params) => {
            if (params === 0) {
              return '不批准';
            } else if (params === 1) {
              return '批准';
            } else {
              return null;
            }
          },
          formatType: (params) => {
            if (params === 0) {
              return 'danger';
            } else if (params === 1) {
              return 'success';
            } else {
              return null;
            }
          }
        },{
          label: '批准内容',
          prop: 'ratifyRemark',
          minWidth: '100'
        },{
          label: '批准人',
          prop: 'ratifyUserName',
          minWidth: '100'
        },{
          label: '批准日期',
          prop: 'ratifyTime',
          minWidth: '160'
        }, {
          label: '创建日期',
          prop: 'createTime',
          minWidth: '160'
        }, {
          label: '创建人',
          prop: 'createUser',
          minWidth: '100'
        }, {
          dataType: 'action',
          minWidth: '170',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '批准',
              type: 'text',
              disabled: (row) => {
                if (row.ratifyStatus === 1) {
                  return true
                } else {
                  return false
                }
              },
              clickFun: (row) => {
                this.approvalPlan(row)
              }
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.handleDown(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delPlan(row)
              }
            }
          ]
        }],
      yearTableData: [],  // å¹´è¡¨
      yearLoading: false,
      yearDetailForm: {
        supervisePurpose: '',
        superviseProject: ''
      },
      yearDetailColumnData: [
        {
          label: '监督日期',
          prop: 'superviseTime',
          minWidth: '150px'
        }, {
          label: '监督目的',
          prop: 'supervisePurpose',
          minWidth: '150px',
          showOverflowTooltip: true,
        }, {
          label: '监控项目',
          prop: 'superviseProject',
          minWidth: '150px'
        }, {
          label: '被监督人员',
          prop: 'supervisee',
          minWidth: '150px'
        }, {
          label: '监督原因',
          prop: 'superviseReason',
          minWidth: '150px'
        },{
          label: '备注',
          prop: 'remark',
          minWidth: '150px'
        },{
          dataType: 'action',
          width: '260',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.showDialog('edit', row)
              }
            },
            {
              name: '记录',
              type: 'text',
              clickFun: (row) => {
                this.records(row)
              }
            },
            {
              name: '处理',
              type: 'text',
              clickFun: (row) => {
                this.processing(row)
              },
              disabled: (row) => {
                if (row.isAccording === 1 || row.isAccording === null) {
                  return true
                } else {
                  return false
                }
              },
            },
            {
              name: '纠正',
              type: 'text',
              clickFun: (row) => {
                this.rectify(row)
              },
              disabled: (row) => {
                if (row.isAccording === 1 || row.isAccording === null || row.isCorrect === null || row.isCorrect === 0) {
                  return true
                } else {
                  return false
                }
              },
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.openDownloadDia(row);
              },
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delYearPlanDetail(row)
              }
            }
          ]
        }
      ],
      yearDetailTableData: [], // å¹´æ˜Žç»†è¡¨
      yearDetailLoading: false,
      yearDetailPage: {
        current: 1,
        size: 20,
        total: 0
      },
      superviseId: '',
      formDia: false,
      recordsDia: false,
      processingDia: false,
      rectifyDia: false,
      ratifyDialog: false,
      ratifyLoading: false,
      ratifyInfo: {},
      upLoading: false,
      downloadDialog: false,
      download: {},
    };
  },
  mounted() {
    this.getYearPlanList()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢å¹´åº¦è®¡åˆ’表
    getYearPlanList () {
      const entity = {
        superviseName: this.yearForm.superviseName,
      }
      const page = this.yearPage
      this.yearLoading = true
      this.$axios.post(this.$api.qualitySupervise.pageQualitySupervise, { entity, page }, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.yearLoading = false
        if (res.code === 201) return
        this.yearTableData = res.data.records
        this.yearPage.total = res.data.total
        if (this.yearTableData.length > 0) {
          this.rowClick(this.yearTableData[0])
        }
      }).catch(err => {
        console.log('err---', err);
        this.yearLoading = false
      })
    },
    clearYear () {
      this.yearForm.superviseName = ''
      this.getYearPlanList()
    },
    // å¯¼å…¥æµç¨‹
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.getYearPlanList()
      }
    },
    // æ‰¹å‡†
    approvalPlan (row) {
      this.ratifyDialog = true
      this.ratifyInfo = row
    },
    handleRatify (ratifyStatus) {
      // æ‰¹å‡†çŠ¶æ€ , 0 ä¸é€šè¿‡, 1通过
      this.ratifyInfo.ratifyStatus = ratifyStatus
      this.ratifyLoading = true
      this.$axios.post(this.$api.qualitySupervise.ratifyQualitySupervise, this.ratifyInfo, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.ratifyLoading = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeRatifyDia()
      }).catch(err => {
        console.log('err---', err);
        this.ratifyLoading = false
      })
    },
    closeRatifyDia () {
      this.ratifyDialog = false
      this.ratifyInfo.ratifyRemark = ''
      this.getYearPlanList()
    },
    // å¯¼å‡º
    handleDown (row) {
      this.$axios.get(this.$api.qualitySupervise.exportQualitySupervise + '?superviseId=' + row.superviseId,{responseType: "blob"}).then(res => {
        this.outLoading = false
        this.$message.success('导出成功')
        const blob = new Blob([res],{ type: 'application/msword' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = row.superviseName + '.docx';
        link.click();
      })
    },
    // åˆ é™¤è¿›åº¦è®¡åˆ’表
    delPlan (row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yearLoading = true
        this.$axios.get(this.$api.qualitySupervise.delQualitySupervise + '?superviseId=' + row.superviseId).then(res => {
          this.yearLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.getYearPlanList()
        }).catch(err => {
          this.yearLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // å¹´åº¦è®¡åˆ’表格，点击行数据后刷新详情
    rowClick(row) {
      this.superviseId = row.superviseId
      this.getYearDetailPlanList()
    },
    // èŽ·å–年度明细表
    getYearDetailPlanList () {
      const entity = {
        superviseId: this.superviseId,
        supervisePurpose: this.yearDetailForm.supervisePurpose,
        superviseProject: this.yearDetailForm.superviseProject,
      }
      const page = this.yearDetailPage
      this.yearDetailLoading = true
      this.$axios.post(this.$api.qualitySupervise.pageQualitySuperviseDetail, { entity, page }, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.yearDetailLoading = false
        if (res.code === 201) return
        this.yearDetailTableData = res.data.records
        this.yearDetailPage.total = res.data.total
      }).catch(err => {
        console.log('err---', err);
        this.yearDetailLoading = false
      })
    },
    // é‡ç½®æ˜Žç»†è¡¨
    clearDetail () {
      this.yearDetailForm = {
        supervisePurpose: '',
        superviseProject: ''
      }
      this.getYearDetailPlanList()
    },
    // æ‰“开年度明细新增、修改弹框
    showDialog (type, row) {
      this.formDia = true
      this.$nextTick(() => {
        this.$refs.formDia.openDia(type, row)
      })
    },
    closeDia () {
      this.formDia = false
      this.getYearDetailPlanList()
    },
    // è®°å½•æµç¨‹
    records (row) {
      this.recordsDia = true
      this.$nextTick(() => {
        this.$refs.recordsDia.openDia(row)
      })
    },
    closeRecordsDia () {
      this.recordsDia = false
      this.getYearDetailPlanList()
    },
    // ä¸ç¬¦åˆæµç¨‹å¼¹æ¡†
    processing (row) {
      this.processingDia = true
      this.$nextTick(() => {
        this.$refs.processingDia.openDia(row)
      })
    },
    closeProcessingDia () {
      this.processingDia = false
      this.getYearDetailPlanList()
    },
    // çº æ­£æµç¨‹å¼¹æ¡†
    rectify (row) {
      this.rectifyDia = true
      this.$nextTick(() => {
        this.$refs.rectifyDia.openDia(row)
      })
    },
    closeRectifyDia () {
      this.rectifyDia = false
      this.getYearDetailPlanList()
    },
    // æ‰“开导出弹框
    openDownloadDia (row) {
      this.downloadDialog = true
      this.download = row
    },
    // å¯¼å‡ºè®°å½•
    controlDown () {
      this.$axios.get( this.$api.qualitySupervise.exportSuperviseDetailRecord+ '?superviseDetailsId=' + this.download.superviseDetailsId,{responseType: "blob"}).then(res => {
        this.$message.success('导出成功')
        const blob = new Blob([res],{ type: 'application/msword' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '记录导出' + '.docx';
        link.click();
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // å¤„理单导出
    processingDown () {
      this.$axios.get( this.$api.qualitySupervise.superviseDetailAccordingExport+ '?superviseDetailsId=' + this.download.superviseDetailsId,{responseType: "blob"}).then(res => {
        this.$message.success('导出成功')
        const blob = new Blob([res],{ type: 'application/msword' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '不符合项导出' + '.docx';
        link.click();
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // çº æ­£å•å¯¼å‡º
    supervisoryDown () {
      this.$axios.get(this.$api.qualitySupervise.exportSuperviseDetaillCorrect + '?superviseDetailsCorrectId=' + this.download.superviseDetailsCorrectId,{responseType: "blob"}).then(res => {
        this.outLoading = false
        this.$message.success('导出成功')
        const blob = new Blob([res],{ type: 'application/msword' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '监督纠正措施' + '.docx';
        link.click();
      })
    },
    // åˆ é™¤å¹´åº¦è¯¦æƒ…列表
    delYearPlanDetail (row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yearDetailLoading = true
        this.$axios.get(this.$api.qualitySupervise.delQualitySuperviseDetail + '?superviseDetailsId=' + row.superviseDetailsId).then(res => {
          this.yearDetailLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.getYearDetailPlanList()
        }).catch(err => {
          this.yearDetailLoading = false
          console.log('err---', err);
        })
      })
    },
    // å¹´è®¡åˆ’分页
    handleYearCurrent(page) {
      this.yearPage.current = page
      this.getYearPlanList()
    },
    handleYearSizeChange(size) {
      this.yearPage.size = size
      this.getYearPlanList()
    },
    // å¹´æ˜Žç»†è®¡åˆ’分页
    handleYearDetailCurrent(page) {
      this.yearDetailPage.current = page
      this.getYearDetailPlanList()
    },
    handleYearDetailSizeChange(size) {
      this.yearDetailPage.size = size
      this.getYearDetailPlanList()
    },
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi + this.$api.qualitySupervise.importQualitySupervise
    }
  },
};
</script>

<style scoped>
.table-card {
  background-color: #ffffff;
}
.flex_column {
  display: flex;
  height: 80vh;
  flex-direction: column;
  overflow: auto;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: space-between
}

.items_center {
  display: flex;
  align-items: center;
}

.date_box {
  margin: 0 5px;
}

.search {
  width: 150px;
  padding: 0 16px;
}
</style>