yos_web/src/HDrpManagement/projectChange/modules/detail.vue

<template>
  <basicDetails
    ref="details"
    :titleText="mainData.projectname"
    formPath="projectChange"
    :editData="mainData"
    :mainAreaData="mainAreaData"
    :turnPageId="20221020143502"
    idname="sa_projectid"
    :tags="[]"
    :tabs="['详细信息','项目评估','关联客户','联系人','产品配置单','报价单','竞争对手','合同','关联线索']"
    @pageChange="pageChange"
    @onEditSuccess="queryMainData($route.query.id)">
    <!-- 使用此插槽可不传[tags] -->
<!--    <tagPanl slot="tags" :data="tagObj" ownertable="sa_project" :id="mainData.sa_projectid" @onSuccess="queryMainData"/>-->
    <div slot="customOperation">
      <!-- 此区域提供了自定义操作按钮 -->
      <putPeople class="inline-16" @putSuccess="putSuccess" v-if="flagTag !== ''" :rowData="mainData" :flagTag="flagTag" :disabled="mainData.disabled"/>
      <recovery class="inline-16" v-if="tool.checkAuth($route.name,'recovery')  && mainData.status === '已失败'" :rowData="mainData" :disabled="mainData.disabled" @onRecovery="onSuccess"></recovery>
      <finish class="inline-16" v-if="tool.checkAuth($route.name,'finish')  && mainData.status === '跟进中'" :disabled="mainData.disabled" @onFinish="onSuccess"></finish>
      <Del class="inline-16" :id="mainData.sa_projectid" :nameId="20221020144302" :rowData="mainData" nameKey="sa_projectids" v-if="tool.checkAuth($route.name,'toVoid') " :disabled="mainData.disabled" @deleteSuccess="deleteSuccess"/>

    </div>
    <template #customBefore>
      <div class="flex-align-start normal-panel mt-10 flex-between"  style="flex-wrap:nowrap;border-radius: 5px;padding:10px 10px 0 10px">
        <div class="flex-align-center-wrap" style="">
          <div v-for="item in stageList" :key="item.stagename" >
            <div class="stage__panel normal-panel"  v-if="item.rowindex === selectRowindex" :style="selectColor">
              <div style="transform: skewX(20deg);!important;color: #ffffff">{{item.stagename}}</div>
            </div>
            <div class="stage__panel normal-panel"  v-else :style="unselectColor">
              <div style="transform: skewX(20deg);!important;color: #000000" >{{item.stagename}}</div>
            </div>
          </div>
        </div>
        <div>
          <setStage  :stage="stageList" @setStage="setStage" style="margin-bottom: 10px"></setStage>
        </div>
      </div>
    </template>
    <div slot="slot0" class=" normal-panel">
      <BaseInfo v-if="detailInfo" :detailInfo="detailInfo"/>
    </div>
    <div slot="slot1" class=" normal-panel">
      <StageTask ref="setStage" v-if="mainData" :rowData="mainData"/>
    </div>
    <div slot="slot2" class=" normal-panel">
      <andEnterprise :rowData="mainData" v-if="flag === 1" @changeSuccess="changeSuccess"/>
    </div>
    <div slot="slot3" class=" normal-panel">
      <contacts v-if="mainData" :data="mainData" />
    </div>
    <div slot="slot4" class=" normal-panel" >
      <product_set :data="mainData"  v-if="flag === 1"  @productSetSuccess="queryMainData($route.query.id)" @delSuccess="queryMainData($route.query.id)"/>
    </div>
    <div slot="slot5" class="normal-panel" >
      <quotation :data="mainData" v-if="flag === 1" />
    </div>
    <div slot="slot6" class=" normal-panel">
      <Rival v-if="mainData" :data="mainData" />
    </div>
    <div slot="slot7" class=" normal-panel">
      <contract v-if="mainData" :data="mainData" />
    </div>
    <div slot="slot8" class=" normal-panel">
      <clue v-if="mainData" :data="mainData" />
    </div>

  </basicDetails>
</template>

<script>
import Quotation from './modules/quotation/index'
import product_set from './modules/productSet/index'
import Rival from './modules/rival/index'
import BaseInfo from './modules/baseInfo/baseInfo'
import StageTask from './modules/stageTask/index'
import putPeople from '../components/putPeople.vue'
import Check from '../components/check'
import Locked from '../components/Locked'
import Del from '../components/del'
import andEnterprise from './modules/andEnterprise/index'
import clue from './modules/clue/index'
import setStage from '../components/setStage'
import finish from '../components/finish'
import recovery from '../components/recovery'
import contacts from './modules/contacts/index'
import contract from './modules/contract/index'
export default {
  components:{
    Quotation,
    product_set,
    Rival,
    BaseInfo,
    StageTask,
    putPeople,
    Check,
    Locked,
    andEnterprise,
    Del,
    clue,
    setStage,
    finish,
    recovery,
    contacts,
    contract},
  data () {
    return {
      totalPrice:0,
      dialogVisible:false,
      disabled:false,
      userInfo:JSON.parse(window.sessionStorage.getItem('userInfo')),
      nowStage:'',
      flagTag:'',
      flag:0,
      put:{
        putFlag:0,
      },
      mainData: {
        disabled:false
      },
      mainAreaData:'',
      /* 企业列表 */
      enterpriseList:'',
      /* 企业列表 */
      projectType:'',
      projectLead:'',
      projectPanl:'',
      projectAddress:'',
      detailInfo:'',
      tagObj:'',
      putPeople:'',
      stageList:[],
      selectRowindex:'',
      selectColor:{
        background: '#3874F6'
      },
      unselectColor:{
        background: '#EEEEEE'
      },
    }
  },
  watch:{
    mainData(val) {
      if (this.mainData.leader.length !== 0){
        if (JSON.parse(window.sessionStorage.getItem('userInfo')).userid === this.mainData.leader[0].userid){
          /*是负责人*/
          this.mainData.disabled = true
        }else {
          /*不是负责人*/
          this.mainData.disabled = false
        }
      }
      console.log("权限结果",this.mainData.disabled)
    }
  },
  provide () {
    return {
      enterpriseList:() => this.enterpriseList,
      projectType:() => this.projectType,
      projectLead:() => this.projectLead,
      projectPanl:() => this.projectPanl,
      detailData:() => this.mainData,
      projectAddress:() => this.projectAddress
    }
  },
  methods:{
    /*修改关联客户*/
    changeSuccess(){
      this.queryMainData()
      this.$refs.details.refreshTag()
    },
    deleteSuccess(){
      /*this.queryMainData(this.$route.query.id)*/
      this.$store.dispatch('changeDetailDrawer',false)
    },
    async queryMainData (id) {
      this.totalPrice = 0
      const res = await this.$api.requested({
        "id": "20221021103902",
        "version":1,
        "content": {
            "sa_projectid":this.$route.query.id
        }
      })

      this.mainData = res.data
      this.mainData.discountrate = Math.round((this.mainData.discountrate * 100) * 100)/100
      console.log(this.mainData,"项目商机详情");
      
      /* 获取标签数据 */
      /*this.tagObj = await this.$store.dispatch('queryTagList',{table:'sa_project',id:this.mainData.sa_projectid})*/
      this.flag = 1
      this.productSet()
      this.getProjectAddres()
      this.projectStage()
      this.tagData()
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.flag = 0
      this.$router.replace({path:'/projectChangeDetail',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    // 获取标签数据
    async tagData(){
      const res = await this.$api.requested({
        content: {
          ownertable: "sa_project",
          ownerid: this.$route.query.id
        },
        id: 20220929085401
      })
      if (res.data.systemtag.length === 0){
        this.flagTag = 0
      }else {
        for (let i=0;i<res.data.systemtag.length;i++){
          if (res.data.systemtag[i] === '报备中'){
            this.flagTag = 1
            break
          }else if (res.data.systemtag[i] === '已报备'){
            this.flagTag = 2
            break
          }else {
            this.flagTag = 0
          }
        }
      }
      this.$refs.details.$refs.tag.queryTag()
      this.put.putFlag = this.flagTag
      this.mainData = Object.assign({},this.put,this.mainData)
    },
    /*修改项目阶段*/
    async setStage(val){
      /*console.log(this.nowStage)*/
      const res = await this.$api.requested({
        "id": "20221024160102",
        "content": {
          "sa_projectid":this.mainData.sa_projectid,
          "sa_project_stageid":val
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryMainData(this.$route.query.id)
        this.$refs.setStage.listData(this.$route.query.id)
      })
    },
    /*获取货品选择信息*/
    selectionChange(val){
    },
    /* 获取联系人:负责人列表 */
    async getAccount () {
      let res = await this.$api.requested({
        "id": "20221018150602",
        "content": {
            "sys_enterpriseid": 1,
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        }
      })
    },
    async getSysetms () {
      /* 获取项目类型 */
      let res = await this.$store.dispatch('optiontypeselect','projecttype')
      this.projectType = res.data
    },
    /** 获取公司数据 */
    async getEnterprise () {
      let res = await this.$api.requested({
        "id": 20221021095802,
        "content": {
            "pageNumber": 1,
            "pageSize": 99999,
            "where": {
                "condition": ""
            }
        },
      })
      this.enterpriseList = res.data
    },
    /* 获取项目地址 */
    async getProjectAddres () {
      let res = await this.$api.requested({
        "id": "20221022165503",
        "content": {
            "sys_enterpriseid": this.mainData.sys_enterpriseid,
            "pageNumber": 1,
            "pageSize": 999999,
            "where": {
                "condition": ""
            }
        }
      })
      this.projectAddress = res.data
      
      /* 获取项目等级 */
      let res2 = await this.$store.dispatch('optiontypeselect','projectgrade')
      this.projectLead = res2.data
      this.changeDataStructure()
    },
    changeDataStructure () {
      let that = this
      this.detailInfo = {
        baseInfo: [
          {label:'项目编号',value:this.mainData.projectnum ? this.mainData.projectnum : '--'},
          {label:'项目名称',value:this.mainData.projectname ? this.mainData.projectname : '--'},
          {label:'项目地址',value:`${this.mainData.province} - ${this.mainData.city} - ${this.mainData.county}`},
          {label:'详细地址',value:this.mainData.address},
          // {label:'项目等级',value:this.projectLead.find(item => item.rowindex == this.mainData.grade).value},
          {label: '项目等级',value: this.mainData.grade ? this.mainData.grade : '--'},
          {label:'项目类型',value:this.mainData.projecttype ? this.mainData.projecttype : '--'},
          {label:'当前项目阶段',value:this.mainData.stagename ? this.mainData.stagename : '--'},

        /*  {label:'项目联系人',value:this.mainData.contact ? this.mainData.contact : '--'},
          {label:'联系人手机号',value:this.mainData.phonenumber ? this.mainData.phonenumber : '--'},*/
          {label:'项目规模',value:this.mainData.scale ? this.mainData.scale : '--'},
          {label:'项目状态',value:this.mainData.status ? this.mainData.status : '--',
            style:function () {
              let style = {}
              switch (that.mainData.status) {
                case '已成交':
                  style = {color:'#fa8c16'}
                  break;
                case '跟进中':
                  style = {color:'#52c41a'}
                  break;
                case '已失败':
                  style = {color:'#999999'}
                  break;
                default:
                  break;
              }
              return style

            }},
         /* {label:'项目折扣',value:this.mainData.discountrate ? this.mainData.discountrate : '--'},*/
          {label:'项目预算(万元)',value:this.mainData.budgetary ? this.mainData.budgetary : '--'},
          {label:'预计签约金额(元)',value:this.mainData.signamount_due ? this.mainData.signamount_due : '--'},
          {label:'预计成交时间',value:this.mainData.signdate_due ? this.mainData.signdate_due : '--'},
          {label:'赢率',value:this.mainData.winrate ? this.mainData.winrate : '--'},
          {label:'负责人',value:this.mainData.name ? this.mainData.name : '--'},
        ],
        systemInfo: [
          {label:'创建人',value:this.mainData.createby ? this.mainData.createby : '--'},
          {label:'创建时间',value:this.mainData.createdate ? this.mainData.createdate : '--'},
          {label:'项目报备人',value:this.mainData.reportby?this.mainData.reportby:'--'},
          {label:'项目报备时间',value:this.mainData.reportdate?this.mainData.reportdate:'--'},
          {label:'报备审核人',value:this.mainData.reportcheckby?this.mainData.reportcheckby:'--'},
          {label:'报备审核时间',value:this.mainData.reportcheckdate?this.mainData.reportcheckdate:'--'},
          /*{label:'锁定状态',value:this.mainData.locked == '0' ? '锁定' : '解锁'},*/
          {label:'最近编辑人',value:this.mainData.changeby ? this.mainData.changeby : '--'},
          {label:'最近编辑时间',value:this.mainData.changedate ? this.mainData.changedate : '--'},
          {label:'转手次数',value:this.mainData.leader.length !== 0?this.mainData.leader[0].leadernum === 0?'0':this.mainData.leader[0].leadernum:'--'},
        ]
      }
      this.mainAreaData = [
        {
          label:'项目名称',
          value: this.mainData.projectname
        },
        {
          label:'项目编号',
          value:this.mainData.projectnum
        },
        {
          label:'项目规模',
          value: this.mainData.scale
        },
        {
          label:'项目等级',
          /*value: this.projectLead.find(item => item.rowindex == this.mainData.grade).value*/
          value: this.mainData.grade
        },
        {
          label:'项目类型',
          value:this.mainData.projecttype
        },
        {
          label:'项目阶段',
          value: this.mainData.stagename
        },
        {
          label:'项目状态',
          value: this.mainData.status,
          style: ()=> {
            let style = {}
            switch (that.mainData.status) {
              case '已成交':
                style = {color:'#fa8c16'}
                break;
              case '跟进中':
                style = {color:'#52c41a'}
                break;
              case '已失败':
                style = {color:'#999999'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'负责人',
          value: this.mainData.name
        },
        {
          label:'预计签约金额(元)',
          value: this.mainData.signamount_due
        },
      ]
    },
    /*获取项目阶段*/
    async projectStage(){
      const res = await this.$api.requested({
        "id": 20221024102402,
        "content": {
          "sa_projectid":this.mainData.sa_projectid
        }
      })
      this.stageList = res.data
      res.data.forEach((e)=>{
        if (e.active === 1){
          this.selectRowindex = e.rowindex
        }
      })
    },
    /*切换阶段*/
    changeSelect(val){
      this.nowStage = val
      this.selectRowindex = val.rowindex
    },
    /*产品配置单*/
    async productSet(){
      const res = await this.$api.requested({
        "id": 20221021145702,
        "content": {
          "sa_projectid": this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 50,
          "where": {
            "condition": ""
          }
        },
      })
      res.data.forEach(e=>{
        this.totalPrice = this.totalPrice + e.amount
      })
    },
    /*报备结果*/
    putSuccess(val){
      this.put.putFlag = val
      this.queryMainData(this.$route.query.id)

    },
    onSuccess(){
      this.queryMainData(this.$route.query.id)
    }
  },
  mounted () {
  },
  async created () {
    this.queryMainData(this.$route.query.id)
    /*this.getUserInfo()
    this.getPutPeople()*/
    this.getEnterprise()
    this.getSysetms()
    // 验证权限
   /* this.tool.checkAuth(this.$route.name,'update')?'':this.$router.go(-1)*/

  },
}

</script>
<style scoped>
.stage__panel{
  padding: 0px 10px 0px 10px ;
  height: 32px;
  line-height: 32px;
  min-width:85px;
  border-radius: 2px;
  transform: skewX(-20deg);
  margin-left:15px;
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  background: #EEEEEE;
}
.stage__panel > div {
  transform: skewX(45deg);
}

</style>