yos_web/src/components/normal-basic-layout/details/index.vue

<template>
  <div class="container">
    <div class="container normal-panel normal-margin flex-align-stretch flex-between">
      <div>
        <div class="flex-align-center">
          <p class="appname inline-16">{{routerName}}</p>
          <div class="flex-align-center">
            <p class="normal-title inline-16">{{titleText}}</p>
            <div>
              <el-button :disabled="rowindex === 1" size="mini" icon="el-icon-arrow-left" @click="previous()"></el-button>
              <el-button :disabled="rowindex === total" size="mini" @click="next()"><i class="el-icon-arrow-right"></i></el-button>
            </div>
          </div>
        </div>
        <div v-if="tags">
          <el-tag style="margin-right:10px" v-for="item in tags" :key="item.index" size="mini" effect="light">{{item}}</el-tag>
        </div>
        <div v-else>
          <slot name="tags"></slot>
        </div>
      </div>
      <div>
        <slot name="customOperation"></slot>
        <cpAdd :formPath="formPath" :data="editData" btnType="default" @onAddSuccess="onSuccess"></cpAdd>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="container normal-panel normal-margin">
          <el-descriptions title="基本信息" :column="4">
              <el-descriptions-item v-for="item in mainAreaData" :key="item.index" :label="item.label">{{item.value?item.value:'--'}}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div  class="my-tabs">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane v-for="(tab,index) in tabs" :key="index" :label="tab" :name="'tab' + index"></el-tab-pane>
            <el-tab-pane label="附件" name="file"></el-tab-pane>
            <el-tab-pane label="操作记录" name="log"></el-tab-pane>
          </el-tabs>
        </div>
        <div v-show="'tab'+index === activeName" v-for="(item,index) in tabs" :key="index">
          <slot :name="'slot' + index"></slot>
        </div>
        <slot name="custom"></slot>
      </el-col>
      <el-col :span="6">
        <group></group>
        <follow-up></follow-up>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import cpAdd from '../modules/cpEdit.vue'
import followUp from './modules/followUp.vue'
import group from './modules/group.vue'
export default {
  props:['titleText','mainAreaData','turnPageId','idname','formPath','editData','tags','tabs'],
  data () {
    return {
      activeName:'tab0',
      routerName:'',
      rowindex:0,
      total:0,
      param:{
        "id": '',
        "content": {
          "isExport":false,
          "pageNumber": 1,
          "pageSize": 1,
          "where": {
            "condition": ""
          }
        }
      }
    }
  },
  components:{
    cpAdd,
    followUp,
    group
  },
  methods:{
    async queryData (pageNumber) {
      this.param.id = this.turnPageId
      this.param.content.pageNumber = pageNumber
      const res = await this.$api.requested(this.param)
      this.total = res.total
      this.$emit('pageChange',res.data[0][this.idname],res.data[0].rowindex)
    },
    next () {
      this.rowindex += 1
      this.queryData(this.rowindex)
    },
    previous () {
      this.rowindex -= 1
      this.queryData(this.rowindex)
    },
    onSuccess () {
      this.$emit('onEditSuccess')
    }
  },
  created () {
    this.routerName = this.$route.meta.title
    this.rowindex = Number(this.$route.query.rowindex)
  },
}

</script>
<style>
</style>
<style scoped>
.appname{
  display: inline;
  background: #FA8C19;
  color:#fff;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
}
</style>