dvcp_v2_webapp/packages/extra/AppCodeGeneration/components/Detail.vue

<template>
  <ai-detail v-loading="pageShow" isHasSidebar>
    <template #title>
      <ai-title :title="colData.applicationName+'详情'" isShowBottomBorder isShowBack @onBackClick="onBack(true)"></ai-title>
    </template>
    <template #content>
      <AiSidebar :tabTitle="tabTitle" v-model="currIndex" v-if="appType"></AiSidebar>
      <ai-card v-show="currIndex === 0" :title="items[0].groupName" v-for="(items, indexs) in formDataList" :key="indexs">
        <template slot="content">
          <ai-wrapper>
            <ai-info-item :label="item.fieldName" v-show="item.type !== 'resident'" v-for="(item, index) in items" :key="index" :isLine="item.grid == 1">
              <span v-if="item.dict && item.type != 'checkbox'">{{$dict.getLabel(item.dict, formData[item.fieldDbName]) || '-'}}</span>
              <span v-else-if="item.type == 'checkbox'">{{formData[item.fieldDbName]}}</span>
              <span v-else-if="item.type == 'rtf'" v-html="formData[item.fieldDbName]"></span>
              <ai-file-list :fileList="formData[item.fieldDbName]" v-else-if="item.type == 'upload'" :fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>
              <span v-else-if="item.type == 'area'">{{ formData[item.fieldDbName + '_name'] }}</span>
              <span v-else-if="item.type == 'gird'">{{ formData[item.fieldDbName + '_name'] }}</span>
              <span v-else>{{ formData[item.fieldDbName] || '-' }}</span>
            </ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <component
        :is="component"
        :name="params.name || params.name00"
        :areaId="formData.area"
        :id="params.id"
        :appId="appId"
        :dict="dict"
        :instance="instance"
        v-if="currIndex === 1">
      </component>
    </template>
  </ai-detail>
</template>

<script>
  import { mapState } from 'vuex'
  import Visit from '../app/visit/Visit'

  export default {
    name: 'Detail',

    props: {
      dict: Object,
      appId: String,
      params: Object,
      configs: Object,
      appType: String,
      instance: Function
    },

    components: {
      Visit
    },

    data () {
      return {
        formData: {},
        colData: {},
        formDataList: [],
        tabTitle: ['人员信息'],
        pageShow: false,
        currIndex: 0,
        component: ''
      }
    },

    computed: {
      ...mapState(['user']),
    },

    created () {
      if (!this.appType) return

      if (this.appType === '0') {
        this.component = 'Visit'
      }
      this.dict.load('diyAppType').then(() => {
        this.tabTitle.push(this.dict.getLabel('diyAppType', this.appType))
      })
    },

    mounted () {
      this.pageShow = true
      this.getDetail()
    },

    methods: {
      initForm (data) {
        this.colData = data
        let dictList = []
        let formList = {}
        data.tableInfos.map((item) => {
          let colItem
          if (item.dictionaryCode) {
            dictList.push(item.dictionaryCode)
          }
          if (item.dictionaryCode && item.type != 'radio' && item.type != 'checkbox') {
            colItem = {
              ...item,
              type: 'dict',
              dict: item.dictionaryCode
            }
          } else if (item.type == 'radio') {
            colItem = {
              ...item,
              dict: item.dictionaryCode,
            }
          } else if (item.type == 'checkbox') {
            colItem = {
              ...item,
              dict: item.dictionaryCode,
              fieldValue: item.fieldValue?.split(',') || []
            }
          } else if (item.type == 'onOff') {
            colItem = {
              ...item,
              fieldValue: 0
            }
          } else {
            if (item.type == 'date' && !item.timePattern) {
              item.timePattern = 'yyyy-MM-dd'
            }
            if (item.type == 'datetime' && !item.timePattern) {
              item.timePattern = 'HH:mm:ss yyyy-MM-dd'
            }
            if (item.type == 'time' && !item.timePattern) {
              item.timePattern = 'HH:mm:ss'
            }

            colItem = {
              ...item,
              type: item.type,
            }
          }
          formList[item.groupIndex]?.push(colItem) || (formList[item.groupIndex] = [colItem])
          if (item.type === 'upload') {
            this.$set(this.formData, colItem.fieldDbName, this.formData[colItem.fieldDbName] ? this.formData[colItem.fieldDbName].split(',').map(v => {
              return {
                url: v
              }
            }) : [])
          } else {
            this.$set(this.formData, colItem.fieldDbName, this.formData[colItem.fieldDbName] || "")
          }
        })
        this.formDataList = Object.values(formList)

        this.$forceUpdate()

        if (dictList.length) {
          this.getDictList(dictList)
        } else {
          this.pageShow = true
        }
      },

      getFormData () {
        this.initForm(this.configs)
      },

      getDetail () {
        this.instance.post(`/app/appapplicationinfo/queryDetailById?appId=${this.appId}&id=${this.params.id}`).then((res) => {
          if (res?.data) {
            this.formData = res.data
            this.getFormData()

            this.pageShow = false
          }
        }).catch(() => {
          this.pageShow = false
        })
      },

      getDictList (listName) {
        this.dict.load(listName.join(',')).then(() => {

        })
      },

      onBack (isRefresh) {
        this.$emit('change', {
          type: 'list',
          isRefresh: !!isRefresh,
        })
      },

      toEdit () {
        this.$emit('change', {
          type: 'Add',
          params: this.params,
          backType: 'Detail'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .form-div{
    display: inline-block;
  }
  .especial {
    margin-bottom: 12px;
    .icon {
      vertical-align: top;
      display: inline-block;
      padding-top: 5px;
      margin-left: 20px;
      color: #f46;
    }
    .people {
      display: inline-block;
      font-size: 14px;
      color: #666;
      margin-right: 16px;
      vertical-align: top;
    }
    .AiWechatSelecter {
      display: inline-block;
      margin-left: 3px;
    }
    .hint {
      font-size: 14px;
      color: #999;
      margin-left: 16px;
    }
    .mar-r40{
      margin-right: 40px;
    }
    .w80{
      width: 80px;
      text-align: right;
      color: #888;
    }
  }
  .add-icon{
    text-align: right;
    cursor: pointer;
    i{
      font-size: 14px;
    }
  }
  .color1{
    color:#4B87FE;
  }
  .color2{
    color:#2EA222;
  }
  .color3{
    color:#999999;
  }
  .AiWechatSelecter{
    width: calc(100% - 150px);
  }
</style>