cbjsxt-front-master/src/views/EntDeclaration/auditTaskManagement/components/ProjectInfoTab.vue

<template>
  <el-form :model="localFormData" label-width="180px" :disabled="true">
    <el-form-item label="成本监审项目名称：">
      <el-input
        v-model="localFormData.projectName"
        placeholder="请输入成本监审项目名称"
        style="width: 400px"
        :disabled="isViewMode"
      ></el-input>
    </el-form-item>
    <el-form-item label="关联成本监审目录：">
      <CatalogCascader
        ref="catalogCascader"
        :form-item="{ placeholder: '请选择监审目录' }"
        style="width: 100%"
        :value="localFormData.catalogId"
        :disabled="isViewMode"
        @change="$emit('catalog-change', $event)"
      />
    </el-form-item>
    <el-form-item label="监审地区：">
      <RegionSelector
        :initial-area-code="localFormData.areaCode"
        :disabled="isViewMode"
        @region-change="$emit('region-change', $event)"
      ></RegionSelector>
    </el-form-item>
    <el-form-item label="被监审单位：">
      <el-select
        v-if="localFormData.auditUnitId"
        v-model="localFormData.auditUnitId"
        placeholder="请选择单位"
        clearable
        multiple
        style="width: 100%"
        :disabled="isViewMode"
      >
        <el-option
          v-for="unit in unitList"
          :key="unit.unitId"
          :label="unit.unitName"
          :value="unit.unitId"
        />
      </el-select>
      <el-input
        v-else
        v-model="localFormData.auditUnitName"
        placeholder="请输入单位"
        style="width: 100%"
        :disabled="isViewMode"
      ></el-input>
    </el-form-item>
    <el-form-item label="监审主体：">
      <el-select
        v-model="localFormData.orgId"
        placeholder="请选择监审主体"
        style="width: 100%"
        clearable
        :disabled="isViewMode"
      >
        <el-option
          v-for="Org in OrgList"
          :key="Org.id"
          :label="Org.name"
          :value="Org.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="归属年度：">
      <el-date-picker
        v-model="localFormData.projectYear"
        style="width: 100%"
        type="year"
        placeholder="请选择归属年度"
        format="yyyy"
        value-format="yyyy"
        clearable
        :disabled="isViewMode"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="立项来源：">
      <el-select
        v-model="localFormData.sourceType"
        placeholder="请选择立项类型"
        style="width: 100%"
        :disabled="isViewMode"
      >
        <el-option
          v-for="item in dictData['projectProposal']"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="监审形式：">
      <el-select
        v-model="localFormData.auditType"
        placeholder="请选择监审形式"
        style="width: 100%"
        :disabled="isViewMode"
      >
        <el-option
          v-for="item in dictData['auditType']"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="监审期间：">
      <div class="cost-period-container">
        <el-button
          type="primary"
          size="small"
          class="add-cost-year-btn"
          :disabled="isViewMode || true"
          @click="$emit('add-cost-year')"
        >
          +
        </el-button>
        <div class="cost-years-wrapper">
          <div
            v-for="(year, index) in localFormData.auditPeriodArray"
            :key="index"
            class="cost-year-item"
          >
            <el-date-picker
              v-model="year.value"
              style="width: 82%"
              type="year"
              placeholder="请选择年份"
              format="yyyy"
              value-format="yyyy"
              clearable
              :disabled="isViewMode"
            ></el-date-picker>
            <el-button
              type="danger"
              size="small"
              class="delete-cost-year-btn"
              :disabled="isViewMode || true"
              @click="$emit('delete-cost-year', index)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="是否参加听证：">
      <el-radio-group
        v-model="localFormData.needHearing"
        :disabled="isViewMode"
      >
        <el-radio :label="0">是</el-radio>
        <el-radio :label="1">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否应急项目：">
      <el-radio-group
        v-model="localFormData.isEmergency"
        :disabled="isViewMode"
      >
        <el-radio :label="0">是</el-radio>
        <el-radio :label="1">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="立项理由：">
      <el-input
        v-model="localFormData.establishmentReason"
        style="width: 100%"
        type="textarea"
        rows="4"
        placeholder="请输入立项理由"
        :disabled="isViewMode"
      ></el-input>
    </el-form-item>
    <el-form-item label="监审任务负责人：">
      <el-select
        v-model="localFormData.auditGroup"
        placeholder="请选择负责人"
        style="width: 100%"
        :disabled="isViewMode"
      >
        <el-option
          v-for="(item, index) in userList"
          :key="index"
          :label="item.fullname"
          :value="item.userId"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="监审任务组成员：">
      <el-select
        v-model="localFormData.auditTeamMembers"
        placeholder="请选择成员"
        multiple
        style="width: 100%"
        :disabled="isViewMode"
      >
        <el-option
          v-for="(item, index) in userList"
          :key="index"
          :label="item.fullname"
          :value="item.userId"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="其他专家：">
      <el-input
        v-model="localFormData.expertStr"
        placeholder="请输入其他专家"
        style="width: 100%"
        :disabled="isViewMode"
      ></el-input>
    </el-form-item>
    <el-form-item label="预定的监审工作起止时间：">
      <el-date-picker
        v-model="localFormData.plannedAuditStartDate"
        type="date"
        placeholder="开始日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        style="width: 150px"
        :disabled="isViewMode"
      ></el-date-picker>
      <span style="margin: 0 10px">—</span>
      <el-date-picker
        v-model="localFormData.plannedAuditEndDate"
        type="date"
        placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        style="width: 150px"
        :disabled="isViewMode"
      ></el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'ProjectInfoTab',
    components: {
      CatalogCascader: () =>
        import(
          '@/views/costAudit/projectInfo/auditProjectManage/annualReviewPlan/CatalogCascader'
        ),
      RegionSelector: () =>
        import(
          '@/views/costAudit/projectInfo/auditProjectManage/annualReviewPlan/RegionSelector'
        ),
    },
    props: {
      formData: {
        type: Object,
        required: true,
      },
      isViewMode: {
        type: Boolean,
        default: false,
      },
      unitList: {
        type: Array,
        default: () => [],
      },
      OrgList: {
        type: Array,
        default: () => [],
      },
      userList: {
        type: Array,
        default: () => [],
      },
      dictData: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        localFormData: {},
        isInternalUpdate: false, // 标记是否是内部更新（避免watch循环触发）
      }
    },
    watch: {
      formData: {
        handler(newVal) {
          // 标记为内部更新，避免触发 localFormData 的 watch
          this.isInternalUpdate = true
          // 深拷贝 formData
          this.localFormData = JSON.parse(JSON.stringify(newVal))
          this.$nextTick(() => {
            this.isInternalUpdate = false
          })
        },
        immediate: true,
        deep: true,
      },
      localFormData: {
        handler(newVal) {
          // 只有在非内部更新时才触发事件
          if (!this.isInternalUpdate) {
            this.$emit('change', { ...newVal })
          }
        },
        deep: true,
      },
    },
  }
</script>