cbjsxt-front-master/src/components/task/mounTaskComponents/basicInfoTab.vue

<template>
  <div class="basic-info-tab">
    <el-form
      ref="initiationForm"
      :model="formData.basicInfo"
      label-width="150px"
      class="initiation-form two-column-form"
      disabled
    >
      <!-- 成本监审项目名称 -->
      <el-form-item label="成本监审项目名称：" prop="projectName">
        <el-input
          v-model="formData.basicInfo.projectName"
          placeholder="请输入成本监审项目名称"
          style="width: 100%"
        ></el-input>
      </el-form-item>

      <!-- 关联成本监审目录 -->
      <el-form-item label="关联成本监审目录：" prop="catalogId">
        <CatalogCascader
          ref="catalogCascader"
          :form-item="{ placeholder: '请选择监审目录' }"
          style="width: 100%"
          :value="formData.basicInfo.catalogId"
        />
      </el-form-item>

      <!-- 监审地区 -->
      <el-form-item label="监审地区：">
        <RegionSelector
          :initial-area-code="formData.basicInfo.areaCode"
          :disabled="false"
          style="width: 100%"
        ></RegionSelector>
      </el-form-item>

      <!-- 被监审单位 -->
      <el-form-item label="被监审单位" prop="auditedUnitName">
        <el-select
          v-if="formData.basicInfo.auditedUnitId.length > 0"
          v-model="formData.basicInfo.auditedUnitId"
          placeholder="请选择单位"
          clearable
          multiple
          style="width: 100%"
          readonly
        >
          <el-option
            v-for="unit in unitList"
            :key="unit.unitId"
            :label="unit.unitName"
            :value="unit.unitId"
          />
        </el-select>
        <el-input
          v-else
          v-model="formData.basicInfo.auditUnitName"
          style="width: 100%"
          placeholder="请输入被监审单位"
          readonly
        />
      </el-form-item>

      <!-- 监审主体 -->
      <el-form-item label="监审主体：" prop="orgId">
        <el-select
          v-model="formData.basicInfo.orgId"
          placeholder="请选择监审主体"
          style="width: 100%"
          clearable
        >
          <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="归属年度：" prop="projectYear">
        <el-date-picker
          v-model="formData.basicInfo.projectYear"
          style="width: 100%"
          type="year"
          placeholder="请选择归属年度"
          format="yyyy"
          value-format="yyyy"
          clearable
        ></el-date-picker>
      </el-form-item>

      <!-- 立项来源 -->
      <el-form-item label="立项来源：" prop="sourceType">
        <el-select
          v-model="formData.basicInfo.sourceType"
          placeholder="请选择立项类型"
          style="width: 100%"
        >
          <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="监审形式：" prop="auditType">
        <el-select
          v-model="formData.basicInfo.auditType"
          placeholder="请选择监审形式"
          style="width: 100%"
        >
          <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="监审期间：" prop="auditPeriodArray">
        <div class="cost-period-container">
          <div class="cost-years-wrapper">
            <div
              v-for="(year, index) in formData.basicInfo.auditPeriodArray"
              :key="index"
              class="cost-year-item"
            >
              <el-date-picker
                v-model="year.value"
                style="width: 100%"
                type="year"
                placeholder="请选择年份"
                format="yyyy"
                value-format="yyyy"
                clearable
              ></el-date-picker>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 是否参加听证 -->
      <el-form-item label="是否参加听证：" prop="needHearing">
        <el-radio-group v-model="formData.basicInfo.needHearing">
          <el-radio label="0">是</el-radio>
          <el-radio label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 是否应急项目 -->
      <el-form-item label="是否应急项目：" prop="isEmergency">
        <el-radio-group v-model="formData.basicInfo.isEmergency">
          <el-radio label="0">是</el-radio>
          <el-radio label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 立项理由 -->
      <el-form-item label="立项理由：" prop="establishmentReason">
        <el-input
          v-model="formData.basicInfo.establishmentReason"
          type="textarea"
          :rows="4"
          placeholder="请输入立项理由"
          style="width: 100%"
        ></el-input>
      </el-form-item>

      <!-- 立项依据 -->
      <el-form-item label="立项依据：">
        <UploadComponent
          :upload-mode="'single'"
          :max-size="50 * 1024 * 1024"
          :allowed-types="['xlsx', 'xls', 'doc', 'docx', 'pdf']"
          :files-list="accordingFileList"
          :is-disabled="true"
        />
      </el-form-item>

      <!-- 其他材料 -->
      <el-form-item label="其他材料：">
        <UploadComponent
          :upload-mode="'single'"
          :max-size="50 * 1024 * 1024"
          :allowed-types="['xlsx', 'xls', 'doc', 'docx', 'pdf']"
          :files-list="otherFileList"
          :is-disabled="true"
        />
      </el-form-item>

      <!-- 监审任务负责人 -->
      <el-form-item label="监审任务负责人：" prop="leaderId">
        <el-select
          v-model="formData.basicInfo.leaderId"
          placeholder="请选择负责人"
          style="width: 100%"
        >
          <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="监审任务组成员：" prop="auditTeamMembers">
        <el-select
          v-model="formData.basicInfo.auditTeamMembers"
          placeholder="请选择成员"
          style="width: 100%"
          multiple
        >
          <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="其他专家：" prop="expertStr">
        <el-input
          v-model="formData.basicInfo.expertStr"
          placeholder="请输入其他专家"
          style="width: 100%"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { taskMixin } from './index.js'
  import RegionSelector from '@/views/costAudit/projectInfo/auditProjectManage/annualReviewPlan/RegionSelector.vue'
  import UploadComponent from '@/components/costAudit/UploadComponent.vue'
  import CatalogCascader from '@/views/costAudit/projectInfo/auditProjectManage/annualReviewPlan/CatalogCascader.vue'
  import { getDefaultDem, getOrgListByDemId } from '@/api/annualReviewPlan'
  import { getAllUnitList } from '@/api/auditEntityManage'
  export default {
    name: 'BasicInfoTab',
    components: {
      RegionSelector,
      UploadComponent,
      CatalogCascader,
    },
    mixins: [taskMixin],
    props: {
      // 父组件传递的参数
      project: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        // 添加其他数据源
        userList: [],
        OrgList: [],
        accordingFileList: [],
        otherFileList: [],
        unitList: [],
      }
    },
    // 添加watch监听project变化，确保项目数据更新时重新加载数据
    watch: {
      project: {
        handler() {
          if (this.project && this.project.projectId) {
            this.formData.basicInfo = this.project
            console.log(this.formData.basicInfo)
            this.formData.basicInfo.auditedUnitId = this.project.auditedUnitId
              ? this.project.auditedUnitId.split(',')
              : []
            this.formData.basicInfo.auditPeriodArray = this.project.auditPeriod
              .split(',')
              .map((year) => ({ value: year }))
            this.formData.basicInfo.auditTeamMembers =
              this.project.projectMembers.split(',')
            this.otherFileList = this.project.otherFileUrl
              ? this.project.otherFileUrl.split(',')
              : []
            this.accordingFileList = this.project.accordingFileUrl
              ? this.project.accordingFileUrl.split(',')
              : []
          }
        },
        deep: true,
        immediate: true,
      },
    },
    mounted() {
      this.getAllUnitList()
      this.getUser()
      this.getDefaultDem()
    },
    methods: {
      getAllUnitList() {
        getAllUnitList().then((res) => {
          this.unitList = res.value || []
        })
      },
      // 获取默认维度
      getDefaultDem() {
        getDefaultDem().then((res) => {
          if (res && res.code === 200) {
            const demId = res.value ? res.value.id : null
            if (demId) {
              this.getOrgListByDemId(demId)
            }
          }
        })
      },
      // 根据维度ID获取单位列表
      getOrgListByDemId(demId) {
        getOrgListByDemId({ demId }).then((res) => {
          if (res && res.code === 200) {
            this.OrgList = res.value || []
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .two-column-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
</style>