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

<template>
  <div v-if="refreshPage" style="min-width:1200px">
    <div style="margin:10px 10px 0 10px;border-radius:5px;" class="container normal-panel sticky" @click="closeTags">
      <div class="flex-align-start flex-between normal-margin" style="flex-wrap:nowrap">
        <div>
          <p class="main_title mt-10">{{titleText?titleText:'##'}}</p>
          <tagTemp v-if="activeApp.isdatatag" ref="tag" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)" @onSuccess="onSuccess"></tagTemp>
        </div>
        <div class="flex-align-center" style="flex: 1 0 auto;  justify-content: flex-end;">
          <cpEdit v-if="tool.checkAuth($route.name,'update')" :formPath="formPath" :oldFormPath="oldFormPath" :data="editData" btnType="default" @onAddSuccess="onSuccess"></cpEdit>
          <!-- 打印 -->
          <reportCenter size="mini" position="detail" class="inline-16" :data="reportCenterLsit.filter(item => item.type == 'printinfo')" v-if="reportCenterLsit.filter(item => item.type == 'printinfo').length > 0 && systemappid != 163">
            <template v-slot:print="scope2">
              <el-button @click="printBtn($route.query.id,scope2.data)" type="text" size="mini">打 印</el-button>
            </template>
          </reportCenter>

          <div>
            <slot name="customOperation"></slot>
          </div>
          <el-button v-if="tool.checkAuth($route.name,'delete') && delApiId" :type="checkDisabled()?'':'primary'" class="inline-16" size="mini" :disabled="checkDisabled()" @click="deleteData">删 除</el-button>
         
          <div v-if="!pageChange">
            <el-button size="mini" icon="el-icon-arrow-left" @click="previous()"></el-button>
            <el-button size="mini" @click="next()"><i class="el-icon-arrow-right"></i></el-button>
          </div>
        </div>
      </div>
      <div>
        <slot name="d_head"></slot>
      </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 mainAData" :key="item.index" :label="item.label"><span :style="item.style?item.style():''">{{item.value !== ''?item.value:'--'}}</span></el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1" size="mini">
          <el-descriptions-item label-class-name="my-label-layout" content-class-name="my-content" v-for="item in mainAData2" :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="activeApp.isdatateam?10:activeApp.isdatafollowup?10:0">
        <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">
          <taskTemp v-if="activeApp.isdatateam" :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>
          </taskTemp>
          <group v-if="activeApp.isdatateam" ref="group" style="margin-bottom:10px" :justsaler="justsaler" :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 taskTemp from './modules/task/index.vue'
import reportCenter from '../reportCenter/index'
import {mapGetters} from 'vuex'
export default {
  props:['titleText','mainAreaData','turnPageId','delApiId','idname','ownertable','formPath','oldFormPath','editData','tags','tabs','statusCheck','pageChange','justsaler'],
  data () {
    return {
      routerName:'',
      rowindex:0,
      total:0,
      param:{
        "id": '',
        "content": {
          "isExport":false,
          "pageNumber": 1,
          "pageSize": 1,
          "nocache": true,
          "where": {
            "condition": ""
          }
        }
      },
      collapse:true,
      refreshPage:true,
      reportCenterLsit:[],
      systemappid:JSON.parse(sessionStorage.getItem('activeApp')).systemappid,
      idx:0
    }
  },
  computed:{
    mainAData () {
      try {
        let data = this.mainAreaData.filter(e=>{
          if(e.label !== '备注') {
            return e
          }
        })
        return data
      } catch (error) {
        
      }
      
    },
    mainAData2 () {
      try {
        let data = this.mainAreaData.filter(e=>{
          if(e.label == '备注') {
            return e
          }
        })
        return data
      } catch (error) {
        
      }
      
    },
    ...mapGetters({
      activeApp:"activeApp",
      svlistData:'svlistData'
    })
  },
  components:{
    cpEdit,
    followUp,
    group,
    tagTemp,
    tabTemp,
    taskTemp,
    reportCenter
  },
  methods:{
    async queryData (pageNumber) {
      /* 暴露请求配置 进行修改 */
      this.$emit('updateParam',this.param)
      
      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():''
      this.refresh()
    },
    /* 获取是否有报表数据 */
    async getSystemAppid () {
      let res = await this.$api.requested({
        "id":20221213094401,
        "content": {
          "systemappid":this.systemappid,
        }
      })
      
      this.reportCenterLsit = res.data
    },
    async printBtn (data,data2) {
      let res = await this.$api.requested({
        "id":20221213094501,
        "content": {
          sys_reportid:data2.sys_reportid,
          dataid:data[this.idName]
        }
      })
      this.tool.showMessage(res,() => {
        
        window.open(this.tool.getBaseUrl() + res.data + `&${this.idname}=${data}`)  
      })
    },
    next () {
      let nowId = this.$route.query.id
      let changeId = ''
      console.log( this.svlistData.listData)
      if ((this.idx + 1) == this.svlistData.listData.length) return this.$message({
        message:"已经是当前页最后一条了!",
        type:'warning'
      })
      this.svlistData.listData.forEach((e,index)=>{
        if (e[this.idname] == nowId) {
          changeId = this.svlistData.listData[index + 1][this.idname]
          this.idx = index + 1
        }
      })
      
      this.$emit('pageChange',changeId,this.idx)
      this.refresh()
    },
    previous () {
      let nowId = this.$route.query.id
      let changeId = ''
      if ((this.idx - 1) < 0) return this.$message({
        message:"当前是第一条",
        type:'warning'
      })
      this.svlistData.listData.forEach((e,index)=>{
        if (e[this.idname] == nowId) {
          changeId = this.svlistData.listData[index - 1][this.idname]
          this.idx = index - 1
        }
      })
      
      this.$emit('pageChange',changeId,this.idx)
      this.refresh()
    },
    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()
    },
    closeTags() {
      this.$refs.tag?this.$refs.tag.closeTag():''
    }
  },
  mounted () {
    this.idx = this.$route.query.rowindex
  },
  created () {
    this.$emit('detailCreate',this.param)
    this.routerName = this.$route.meta.title
    this.rowindex = Number(this.$route.query.rowindex)
    this.getSystemAppid()
  },
  watch:{
    mainAreaData () {
      // console.log(this.mainAData,'mainAData')
    }
  }
}

</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;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.no-wrap{
  flex-wrap:nowrap !important;
}
.main_title{
  font-size:30px;
  font-weight:300;
  margin-right:16px;
  line-height: 2rem;
}
</style>