mosr-web/src/views/plan/detail.vue

<template>
  <div v-loading="loading">
    <el-form :model="formData" class="query-form">
      <el-row>
        <el-col :span="8">
          <el-form-item label="年度计划名称" prop="annualPlanName">
            <div v-if="isEdit">
              <el-input v-model="formData.annualPlanName" placeholder="请输入年度计划名称" clearable>
              </el-input>
              <el-button color="#DED0B2" style="margin-left: 10px" @click="editName">提交</el-button>
            </div>
            <span v-else>{{ formData.annualPlanName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" prop="createTime">
            <span>{{ formData.createTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="query-btn">
      <el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
      <el-popover :visible="editVisible" placement="top" :width="160">
        <p>点击编辑可以修改年度计划名称！</p>
        <div style="text-align: right; margin: 0">
          <el-button size="small" color="#DED0B2" @click="editVisible = false">
            确认
          </el-button>
        </div>
        <template #reference>
          <el-button color="#DED0B2" v-perm="['annual:plan:edit']" style="float: right;margin: 0 10px 10px 0"
                     @click="editBtn">编辑
          </el-button>
        </template>
      </el-popover>

    </div>
    <el-table ref="table" :data="formData.projectList" border :header-cell-style="{background:'#f5f7fa'}">
      <el-table-column label="四川省国有资产经营投资管理有限责任公司科技创新项目年度计划表" align="center">
        <template #default="scope">
          <el-table-column type="index" label="序号" align="center" width="60"/>
          <el-table-column prop="projectName" label="项目名称" align="center" width="100"/>
          <el-table-column prop="time" label="起始时间" align="center" width="100">
            <template #default="scope">
              {{ scope.row.startTime + ' 至 ' + scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column prop="projectType" label="项目类型" align="center">
            <template #default="scope">
              <div v-if="scope.row.projectType !== null">
                <Tag dictType="project_type" :value="scope.row.projectType"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="承办部门" align="center" width="90"/>
          <el-table-column prop="investmentType" label="出资类型" align="center">
            <template #default="scope">
              <div v-if="scope.row.investmentType !== null">
                <Tag dictType="invest_type" :value="scope.row.investmentType"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="projectImpact" label="项目影响" align="center" width="90">
            <template #default="scope">
              <div v-if="scope.row.projectImpact !== null">
                <Tag dictType="project_impact" :value="scope.row.projectImpact"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="businessSegment" label="所属业务板块" align="center" width="110">
            <template #default="scope">
              <div v-if="scope.row.businessSegment !== null">
                <Tag dictType="business_segment" :value="scope.row.businessSegment"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="resultForm" label="预期成果形式" align="center" min-width="100px">
            <template #default="scope">
              <div v-if="scope.row.resultForm !== null">
                  <Tag style="margin-top: 3px" dictType="result_form" v-for="item in scope.row.resultForm" :value="item"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="technicalStandard" label="预期技术标准制定" align="center">
            <template #default="scope">
              <div v-if="scope.row.technicalStandard !== null">
                <Tag dictType="technical_standard" :value="scope.row.technicalStandard"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="industryUniversityResearch" label="产学研联合" align="center">
            <template #default="scope">
              <div v-if="scope.row.industryUniversityResearch !== null">
                <Tag dictType="industry_university" :value="scope.row.industryUniversityResearch"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="governmentDeclaration" label="开展政府申报" align="center">
            <template #default="scope">
              <div v-if="scope.row.governmentDeclaration !== null">
                <Tag dictType="government_declaration" :value="scope.row.governmentDeclaration"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="prospectiveIntellectualProperty" label="预期知识产权" align="center" width="190">
            <template #default="scope">
              <div style="text-align: left">
                发明专利（{{ scope.row.inventionPatent ? scope.row.inventionPatent : 0 }}）项，<br>
                实用新型专利（{{ scope.row.newPatent ? scope.row.newPatent : 0 }}）项，<br>
                软件著作权（{{ scope.row.softwareCopyright ? scope.row.softwareCopyright : 0 }}）项，<br>
                著作权（{{ scope.row.copyright ? scope.row.copyright : 0 }}）项，<br>
                其他（{{ scope.row.other ? scope.row.other : 0 }}）项，
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="intellectualProperty" label="知识产权状况" align="center">
            <template #default="scope">
              <div v-if="scope.row.intellectualProperty !== null">
                <Tag dictType="intellectual_property" :value="scope.row.intellectualProperty"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="intellectualProperty" label="经费预算(元)" align="center">
            <template #default="scope">
              <span>{{ toThousands(scope.row.economicEstimate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="specialFundAmount" label="专项资金(元)" align="center">
            <template #default="scope">
              <span>{{ toThousands(scope.row.specialFundAmount) }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {toThousands} from '@/utils/changePrice.js'
import {ElNotification} from "element-plus";
import {getPlan, editPlan} from "@/api/project-demand/summary";
import {useCacheStore} from '@/stores/cache.js'
import {exportExcel} from "@/utils/export-excel";

const cacheStore = useCacheStore()
const loading = ref(false)
const formData = ref({})
const table = ref()
const route = useRoute()
const isEdit = ref(false)
const editVisible = ref(false)
if(route.query.type=='summary'){
  editVisible.value=true
}
const exportTable = () => {
  const $e = table.value.$el
  let $table = $e.querySelector('.el-table__fixed')
  if (!$table) {
    $table = $e
  }
  exportExcel($table, (5 + (Object.keys(formData.value.projectList[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目年度计划表", 2)
}
const editName = () => {
  let param = {
    annualPlanId: route.query.annualPlanId,
    annualPlanName: formData.value.annualPlanName
  }
  editPlan(param).then(res => {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: res.code === 1000 ? 'success' : 'error'
    })
    if (res.code === 1000) {
      isEdit.value = false
    }
  })
}
const editBtn = () => {
  isEdit.value = true
}
const filterDict = (data, value) => {
  if (data === undefined || value === undefined) return;
  let label = ''
  let result = []
  if (value instanceof Array) {
    value.forEach(item1 => {
      data.find(item => {
        if (item.value == item1) {
          result.push(item.label)
        }
      })
    })
    label = result.map(item => item).join('，')
  } else {
    if (data instanceof Array) {
      data.find(item => {
        if (item.value == value) {
          label = item.label
        }
      })
    }
  }
  return label
}
const getDetailInfo = () => {
  loading.value = true
  getPlan(route.query.annualPlanId).then(res => {
    if (res.code === 1000) {
      formData.value = res.data
      loading.value = false
    }else{
      ElNotification({
        title: '提示',
        message: res.msg,
        type:'error'
      })
    }
  })
}
onMounted(() => {
  if (route.query.annualPlanId) {
    getDetailInfo()
  }
})
</script>

<style scoped>

</style>