cbjsxt-front-master/src/components/task/taskComponents/conclusionTab.vue

<template>
  <!-- 出具结论内容（只读默认） -->
  <div class="conclusion-section">
    <!-- <el-button v-if="!isView" type="primary" style="margin-bottom: 20px">
      保存
    </el-button> -->

    <el-form
      ref="conclusionForm"
      :model="conclusionForm"
      label-width="150px"
      class="conclusion-form"
      :disabled="true"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="定价成本构成">
            <el-input
              v-model="conclusionForm.pricingCostStructure"
              type="textarea"
              :rows="4"
              placeholder="填写 (非必填)"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="审核的内容和方法">
            <el-input
              v-model="conclusionForm.auditContentMethod"
              type="textarea"
              :rows="4"
              placeholder="填写 (非必填)"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="成本费用项目核销（减）情况及理由">
            <el-input
              v-model="conclusionForm.costDeductionReason"
              type="textarea"
              :rows="4"
              placeholder="填写 (非必填)"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="成本监审结论">
            <el-input
              v-model="conclusionForm.costAuditConclusion"
              type="textarea"
              :rows="4"
              placeholder="填写 (非必填)"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="违约情况说明">
            <el-input
              v-model="conclusionForm.defaultConditions"
              type="textarea"
              :rows="4"
              placeholder="填写 (非必填)"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="其他需要说明的事项">
            <el-input
              v-model="conclusionForm.otherExplanations"
              type="textarea"
              :rows="4"
              placeholder="填写 (非必填)"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { getConclusionDetail } from '@/api/taskProgressManage'
  export default {
    name: 'ConclusionTabReadonly',
    props: {
      project: { type: Object, default: () => ({}) },
    },
    data() {
      return {
        conclusionForm: {
          pricingCostStructure: '',
          auditContentMethod: '',
          costDeductionReason: '',
          costAuditConclusion: '',
          defaultConditions: '',
          otherExplanations: '',
          conclusionStatus: '',
          projectId: '',
        },
      }
    },
    watch: {
      project: {
        handler() {
          this.getConclusionDetails()
        },
        immediate: true,
        deep: false,
      },
    },
    methods: {
      getConclusionDetails() {
        if (!this.project || !this.project.projectId) return
        getConclusionDetail({ projectId: this.project.projectId }).then(
          (res) => {
            if (res && res.code === 200) {
              const v = (res && res.value) || {}
              this.conclusionForm = {
                pricingCostStructure: v.pricingCostStructure || '',
                auditContentMethod: v.auditContentMethod || '',
                costDeductionReason: v.costDeductionReason || '',
                costAuditConclusion: v.costAuditConclusion || '',
                defaultConditions: v.defaultConditions || '',
                otherExplanations: v.otherExplanations || '',
                conclusionStatus: v.conclusionStatus || '',
                projectId:
                  v.projectId || (this.project && this.project.projectId) || '',
              }
            }
          }
        )
      },
    },
  }
</script>

<style lang="scss" scoped>
  /* 强制置灰禁用态的输入框与文本域 */
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa !important;
    color: #c0c4cc !important;
  }
  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #f5f7fa !important;
    color: #c0c4cc !important;
  }
</style>