超级信息展示板

<fh-face-plate
  :shadow="true"
  :innerPad="10"
  :outerMarg="20"
  :allStyle="{ paddingTop: '25px', marginTop: '10px' }"
>
  <ta-tabs
    :defaultActiveKey="defaultActiveKey"
    ref="taTabsDom"
    @change="changeTab"
    :style="{ background: '#fff' }"
    @tabClick="fntabClick"
  >
    <ta-tab-pane tab="基本信息" key="1"></ta-tab-pane>
    <ta-tab-pane tab="实施计划" key="2"></ta-tab-pane>
    <ta-tab-pane tab="实施反馈" key="3"></ta-tab-pane>
    <ta-tab-pane tab="结项报告" key="4"></ta-tab-pane>
    <ta-tab-pane tab="公众参与" key="5"></ta-tab-pane>
  </ta-tabs>
  <div v-show="defaultActiveKey == '1'">
    <!--BEGIN intro-panel 重新-基础信息-查看详情-案例 -->
    <intro-panel :dataList="info_dataList" :item="{}">
      <hlta-superTitle
        slot="title"
        :theme="1"
        :font="'h5'"
        :title="'基本信息'"
      ></hlta-superTitle>
    </intro-panel>

    <!--END intro-panel 重新-基础信息-查看详情-案例 -->
    <intro-panel :dataList="info_dataList2" :item2="{}">
      <hlta-superTitle
        slot="title"
        :theme="1"
        :font="'h5'"
        :title="'项目说明'"
      ></hlta-superTitle>
    </intro-panel>
    <div
      v-for="(intro-panel, tbIdx) in tform_group"
      :key="tbIdx"
    >
      <intro-panel :dataList="intro-panel.createItems" :item3="intro-panel.item">
        <hlta-superTitle
          slot="title"
          v-if="tbIdx === 0"
          :theme="1"
          :font="'h5'"
          :title="'项目执行方'"
        >
          <template slot="moreBtn"></template>
        </hlta-superTitle>
        <ta-divider
          v-else
          slot="title"
          :dashed="true"
          :orientation="'center'"
        >
          第{{ tbIdx + 1 }}部分
        </ta-divider>
      </intro-panel>
    </div>
  </div>
  <div v-if="defaultActiveKey == '3'">
    <feed-back
      ref="feedBack"
      :projectId="prevViewItem.id"
      :projectType="prevViewItem.projectQuality"
      :title="'实施反馈'"
    ></feed-back>
  </div>
  <div v-if="defaultActiveKey == '2'">
    <implement-plan
      ref="implementPlan"
      :projectId="prevViewItem.id"
      :projectType="prevViewItem.projectQuality"
      :title="'实施计划'"
    ></implement-plan>
  </div>
  <div v-if="defaultActiveKey == '4'">
    <end-report
      ref="endReport"
      :projectId="prevViewItem.id"
      :projectType="prevViewItem.projectQuality"
      :title="'结项报告'"
    ></end-report>
  </div>
  <div v-if="defaultActiveKey=='5'">
    <active-join
      ref="activeJoin"
      :project-type="prevViewItem.projectQuality"
      :project-id="prevViewItem.id"
    ></active-join>
  </div>
</fh-face-plate>

import introPanel from '@bizCp/hlta-superForm/src/modules/intro-panel'
import { hlta_introPanel_InitData } from '@bizCp/hlta-Utils/lib/introPanel.js'

export default {
  data(){
    return {
      info_dataList: [],
      info_dataList2: [],
    }
  },
  methods:{
 // intro_panel示例方法，用于赋值
    initData_intro_panel (data) {
      // const {} = data;
      this.info_dataList = [
        {
          label: '服务领域',
          property: 'demandType',
          mode: 'tag',
          filter: {
            value: '',
            dict: 'REQUIRETYPE',
          },
          span: 7,
          // hidden:true
        },
        {
          label: '项目背景',
          property: 'projectBackground',
          textarea: {
            value: '',
          },
          span: 24,
        },
        {
          label: '预计产出',
          property: 'projectedOutputs',
          textarea: {
            value: '',
          },
          span: 24,
        },
        {
          property: 'cpServeObjectPoList',
          label: '服务对象',
          mode: 'tag',
          filter: {
            value: '',
            dict: 'SERVICEOBJECT',
          },
          span: 21,
        },
        {
          property: 'serveNum',
          label: '服务人数',
          value: '',
          span: 7,
        },
      ];
      this.info_dataList2 = [
        {
          property: 'funder',
          label: '资助方',
          value: '',
          span: 7,
          hidden: data.projectQuality !== '01',
        },
        {
          property: 'fundSource',
          label: '资金来源',
          filter: {
            value: '',
            dict: 'SOURCEFUNDS',
          },
          span: 7,
        },
        {
          property: 'publicFundraising',
          label: '是否公开募捐',
          cellLabelW: '120px',
          mode: 'tag',
          filter: {
            value: '',
            dict: 'YESORNO',
          },
          span: 7,
          hidden: data.projectQuality !== '03',
        },
        {
          property: 'recordCode',
          label: '公募备案编号',
          cellLabelW: '120px',
          value: '',
          span: 7,
          hidden: (data.publicFundraising !== '1'),
        },
        {
          property: 'recordName',
          label: '募捐备案名称',
          value: '',
          span: 7,
          hidden: (data.publicFundraising !== '1'),
        },
        {
          property: 'cpTypePoList',
          label: '项目分类',
          mode: 'tag',
          filter: {
            value: '',
            dict: data.projectQuality !== '01' ? 'CLASSIFICATION' : 'PROJECTCLASS',
          },
          span: 21,
        },
        {
          label: '项目创新性',
          property: 'projectInnovation',
          textarea: {
            value: '',
          },
          span: 24,
        },
        {
          label: '可预见风险及应对措施',
          property: 'riskMeasure',
          textarea: {
            value: '',
          },
          span: 24,
        },
        {
          label: '附件',
          isEllipsis: 1,
          file: {
            fileList: this.fileList,
          },
          span: 12,
        },
        {
          label: '评估报告',
          isEllipsis: 1,
          cellLabelW: '120px',
          file: {
            fileList: this.fileList2,
          },
          span: 12,
        }
      ];

      hlta_introPanel_InitData.call(this, this.info_dataList, data)
      hlta_introPanel_InitData.call(this, this.info_dataList2, data)
    },
     async queryDetail (id) {
      let param = {}
      param.id = id
      this.Base.submit(null, {
        method: 'post',
        url: 'collaborateProject/detail',
        data: param,
      }).then((data) => {
        let detailInfo = data.data.result
        this.detailInfo = data.data.result

        if (this.detailInfo.admsAreaListName) {
          this.detailInfo.admsAreaList = this.detailInfo.admsAreaListName
        }
        if (this.detailInfo.ossIdList) {
          let fileList = []
          this.detailInfo.ossIdList.forEach((item) => {
            let f = {}
            f.name = item.originalName
            f.url = item.path
            f.uid = item.ossId
            f.status = 'done'
            fileList.push(f)
          })
          this.fileList = fileList
        }
        if (this.detailInfo.assReportList) {
          let fileList = []
          this.detailInfo.assReportList.forEach((item) => {
            let f = {}
            f.name = item.originalName
            f.url = item.path
            f.uid = item.ossId
            f.status = 'done'
            fileList.push(f)
          })
          this.fileList2 = fileList
        }

        console.log('this.detailInfo~~~~~~~~~~~~~~~~', this.detailInfo)
        this.businessDepList.forEach(item=>{
          if (item.value === this.detailInfo.funder) {
            this.detailInfo.funder = item.label
          }
        })
        this.totalName = this.detailInfo.projectName
        this.titleList = [
          {
            label: "执行机构",
            value: this.prevViewItem.socialOrgName,
            isEllipsis: 1,
            span: 7,
          },
          {
            label: '开始时间',
            property: 'projectStartTime',
            value: this.detailInfo.projectStartTime,
            span: 7,
          },
          {
            label: '结束时间',
            property: 'projectEndTime',
            value: this.detailInfo.projectEndTime,
            span: 7,
          },
          {
            label: "实施区域",
            property: 'admsAreaList',
            mode: 'tag',
            isEllipsis: 1,
            tags: {
              value: this.detailInfo.admsAreaListName,
            },
            span: 21,
          },
          {
            property: 'budget',
            label: '经费预算(万元)',
            value: this.detailInfo.budget,
            span: 7,
          },
          {
            property: 'projectQuality',
            label: '项目性质',
            mode: 'tag',
            isEllipsis: 1,
            filter: {
              value: this.detailInfo.projectQuality,
              dict: 'PROJECTNATURE',
            },
            span: 7,
          },
          {
            label: '项目状态',
            property: 'projectStatus',
            mode: 'tag',
            isEllipsis: 1,
            filter: {
              value: this.detailInfo.projectStatus,
              dict: 'PROJECTSTATUS',
            },
            span: 7,
          }
        ]
        this.initData_intro_panel(this.detailInfo)
        this.detailInfo.projectExecutingPartyList.forEach((item) => {
          const param = this.findItemRow(item.bsoId);
          console.log("param=====",param)
          if (param) {
            item.bsoId = param.socialOrgName
          }
        })
        let projectExecutingPartyList =
          this.detailInfo.projectExecutingPartyList
        if (projectExecutingPartyList.length > 0) {
          this.tform_group = []
          for (let i = 0; i < projectExecutingPartyList.length; i++) {
            this.tform_group.push({
              item: {},
              createItems: this.createItems3,
            })
          }
        } else {
          this.tform_group = [
            {
              item: {},
              createItems: this.createItems3,
            }
          ]
        }

        this.$nextTick(() => {
          for (let i = 0; i < this.tform_group.length; i++) {
            console.log('i=======吹時候', i)

            this.tform_group[i].createItems = [
              {
                property: 'bsoId',
                label: '执行机构',
                isEllipsis: 1,
                value: projectExecutingPartyList[i].bsoId,
                span: 24,
              },
              {
                property: 'synopsis',
                label: '机构简介',
                isEllipsis: 1,
                textarea: {
                  value: projectExecutingPartyList[i].synopsis,
                },
                span: 24,
              },
              {
                property: 'personName',
                label: '项目联系人',
                isEllipsis: 1,
                value: projectExecutingPartyList[i].personName,
                span: 11,
              },
              {
                property: 'personPhone',
                label: '联系人手机',
                cellLabelW: '120px',
                isEllipsis: 1,
                value: projectExecutingPartyList[i].personPhone,
                span: 11,
              }
            ]
          }
        })
        // hlta_SetCompsUpload_fileList.call(
        //   this,
        //   this.createItems2,
        //   'ossIdList',
        //   this.fileList
        // )
        // hlta_SetCompsUpload_fileList.call(
        //   this,
        //   this.createItems2,
        //   'assReportList',
        //   this.fileList2
        // )
      })
    },
    showDrawer (prevViewItem) {
      console.log(prevViewItem)
      this.visible = true
      this.$nextTick(() => {
        console.log('this.$refs.taTabsDom==')
        this.$refs.taTabsDom.activeKey = '1'
        // this.defaultActiveKey = 1
      })
      console.log('this.defaultActiveKey', this.defaultActiveKey)
      if (prevViewItem == null || prevViewItem == '') {
        this.isAdd = true
      }

      this.prevViewItem = prevViewItem

      const id = this.prevViewItem.id
      if (id) {
        // 基本信息
        this.queryDetail(id)
        this.isAdd = false
      }
    },
  }
}

prop(属性)

参数	说明	类型	默认值
dataList	初始化信息展示板数据模型	Array	详见options说明
more-btn	更多自定义按钮	boolean	false

options(可选项配置)

dataList

参数	说明	类型	默认值
label	item块label名称	string	-
property	api键名	string	-
value	显示文本明文	string	-
isEllipsis	文本内容超出省略	boolean	0
span	一行占位布局格数	Number	8
mode	标签样式风格	string	tag
tags	tag文本明文	object/[Array Object]	{value: [显示文本明文]}
filter	字典查询明文回显	object/[Array Object]	{ value: [显示文本明文], dict: [字体键名] }
cellLabelW	label宽度自定义	string	''
hidden	字段显隐	boolean	false
file	附件展示	object	{ fileList: [{url:'',name:''},...] }
labelSpan	label文本行占位	Number	2
img	viewer插件展示图片	object/[Array Object]	传入图片地址即可 ['url','url',...]

Events(事件)

方法名称	说明	返回类型	参数

slots(插槽)

属性	说明	默认值
title	标题	{}
moreBtn	更多个性化按钮	{}

protocol(规约)

> 1. 更美观的详情页，请使用intro-panel（超级信息展示板）
> 2. hidden属性可以用作一般需求的权限控制，前端拿到后端返回的权限配置信息，返回对应的boolean类型即可（只是控制显示隐藏的鉴权可以用这个属性）
> 3. 设置值-只需要将处理好的明文文本传入到每个对象模型的value字段上即可