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

<template>
  <div v-if="refreshPage">
    <div style="margin:10px 10px 0 10px;border-radius:5px" class="container normal-panel sticky">
      <div class="flex-align-center flex-between normal-margin">
        <div class="flex-align-center" style="flex:1 0 auto">
          <p style="font-size:30px;font-weight:300;margin-right:16px">{{titleText?titleText:'##'}}</p>
          <tagTemp v-if="activeApp.isdatatag" style="flex:1" ref="tag" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)" @onSuccess="onSuccess"></tagTemp>
        </div>
        <div class="flex-align-center">
          <cpEdit v-if="tool.checkAuth($route.name,'update')" :formPath="formPath" :oldFormPath="oldFormPath" :data="editData" btnType="default" @onAddSuccess="onSuccess"></cpEdit>
          <el-button v-if="tool.checkAuth($route.name,'delete') && delApiId" class="inline-16" size="mini" :disabled="checkDisabled()" @click="deleteData">删 除</el-button>
          <div>
            <slot name="customOperation"></slot>
          </div>
          <div v-if="!pageChange">
            <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>
        <el-descriptions :column="5" size="mini">
          <el-descriptions-item label-class-name="my-label-layout" content-class-name="my-content" v-for="item in mainAreaData" :key="item.index" :label="item.label"><span :style="item.style?item.style():''">{{item.value?item.value:'--'}}</span></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div style="box-sizing: border-box;padding:10px">
      <el-row class="flex-align-stretch no-wrap" :gutter="10">
        <el-col style="flex:1 0 auto;" :span="activeApp.isdatateam?18:activeApp.isdatafollowup?18:24">
          <slot name="customBefore"></slot>
          <tabTemp :tabs="tabs" :editData="editData" :idname="idname" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)" @onTabClick="onTabClick">
            <div :slot="'slot' + index" v-for="(tab,index) in tabs" :key="tab.index">
              <slot :name="'slot' + index"></slot>
            </div>
          </tabTemp>
          <slot name="custom"></slot>
        </el-col>
        <el-col v-if="collapse" style="width:400px;" :span="6">
          <group v-if="activeApp.isdatateam" ref="group" style="margin-bottom:10px" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)" @onSuccess="onSuccess">
            <el-button slot="collapse" type="text" icon="el-icon-s-unfold" class="inline-16" @click="onCollapse"></el-button>
          </group>
          <follow-up v-if="activeApp.isdatafollowup" ref="follow" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)">
            <el-button slot="collapse" type="text" icon="el-icon-s-unfold" class="inline-16" @click="onCollapse"></el-button>
          </follow-up>
        </el-col>
        <div v-else style="text-align-center" class="container normal-panel">
          <el-button slot="collapse" type="text" icon="el-icon-s-fold" @click="onCollapse"></el-button>
        </div>
        
      </el-row>
    </div>
    
  </div>
</template>

<script>
import cpEdit from '../modules/cpEdit.vue'
import followUp from './modules/followUp/followUp.vue'
import tagTemp from './modules/tags/tag.vue'
import tabTemp from './modules/tabs/tab.vue'

import group from './modules/group/group.vue'
import {mapGetters} from 'vuex'
export default {
  props:['titleText','mainAreaData','turnPageId','delApiId','idname','ownertable','formPath','oldFormPath','editData','tags','tabs','statusCheck','pageChange'],
  data () {
    return {
      routerName:'',
      rowindex:0,
      total:0,
      param:{
        "id": '',
        "content": {
          "isExport":false,
          "pageNumber": 1,
          "pageSize": 1,
          "where": {
            "condition": ""
          }
        }
      },
      collapse:true,
      refreshPage:true
    }
  },
  computed:{
    ...mapGetters({
      activeApp:"activeApp"
    })
  },
  components:{
    cpEdit,
    followUp,
    group,
    tagTemp,
    tabTemp
  },
  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)
      this.$refs['tag']?this.$refs['tag'].queryTag():''
      
    },
    next () {
      this.rowindex += 1
      this.queryData(this.rowindex)
      
    },
    previous () {
      this.rowindex -= 1
      this.queryData(this.rowindex)
    },
    onSuccess () {
      this.$emit('onEditSuccess')
    },
    deleteData () {
      this.$confirm('确定删除当前数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let param = {
          "id": this.delApiId,
          "content":{}
        }
        if (this.idname instanceof Array) { //判断传入的类型是多个还是单个idname
          let obj = {}
          this.idname.forEach(e=>{
            obj[e] = ''
          })
          param.content[`${this.idname[0]}s`] =  [Object.keys(obj).map((key,item)=>{
            obj[key] = this.editData[key]
          })]
        } else {
          param.content[`${this.idname}s`] = [this.editData[this.idname]]
        }
        const res = await this.$api.requested(param)
        this.tool.showMessage(res,()=>{
          this.$store.dispatch('changeDetailDrawer',false)
        })
      }).catch((err) => {
        
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    checkDisabled () {
      if (this.statusCheck) {
        let _isSame = this.statusCheck.some(item=>item.value === this.editData[item.key])
        return _isSame
      } else {
        return false
      }
    },
    onTabClick () {
      this.$emit('onTabClick')
    },
    onCollapse () {
      this.collapse?this.collapse = false:this.collapse = true
    },
    refresh () {
      this.refreshPage = false
      setTimeout(() => {
        this.refreshPage = true
      }, 10);
    },
    refreshTag () {
      this.$refs.tag.queryTag()
    }
  },
  mounted () {
  },
  created () {
    this.$emit('detailCreate',this.param)
    this.routerName = this.$route.meta.title
    this.rowindex = Number(this.$route.query.rowindex)
  },
  watch:{
    mainAreaData () {
      this.refresh()
    }
  }
}

</script>
<style>
.detail__head__label{
  display: inline-block;
  width: 70px;
}
.my-label-layout{
  font-size: 14px;
  color: #999;
}
</style>
<style scoped>
.appname{
  display: inline;
  background: #FA8C19;
  color:#fff;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
}
.my-tabs{
  background:#eeeeee
}
.sticky{
  position: sticky;
  top:0;
}
.no-wrap{
  flex-wrap:nowrap !important;
}
</style>