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

<template>
  <ai-detail v-if="pageShow">
    <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 class="mar-t16" label-width="80px" :columnsNumber="1">
            <div v-for="(item, index) in items" :key="index" :style="item.grid == 0.5 ? 'width: 50%;': 'width: 100%;'" class="form-div">
              <ai-info-item :label="item.fieldName+ '：'">
                <span v-if="item.dict && item.type != 'checkbox'">{{$dict.getLabel(item.dict, formData[item.fieldDbName]) || '-'}}</span>
                <span v-if="!item.dict && item.type != 'rtf' && item.type != 'upload' && item.type != 'area'">{{formData[item.fieldDbName]}}</span>
                <span v-if="item.type == 'checkbox'">{{formData[item.fieldDbName]}}</span>
                <span v-if="item.type == 'rtf'" v-html="formData[item.fieldDbName]"></span>
                <ai-file-list :fileList="formData[item.fieldDbName]" v-if="item.type == 'upload'" :fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>
                <span v-if="item.type == 'area'" v-html="formData[item.fieldDbName+'_name']"></span>
              </ai-info-item>
            </div>
          </ai-wrapper>
        </template>
      </ai-card>
      <component :is="component" 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.getFormData()
      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])
          this.$set(this.formData, colItem.fieldDbName, colItem.fieldValue || "")
        })
        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
          }
        })
      },

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

      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>