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

<template>
  <div>
    <basicDetails
        v-if="Object.keys(mainData).length > 0"
        ref="details"
        :titleText="mainData.billno"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20221121201502"
        idname="sa_contractid"
        ownertable="sa_contract"
        :tabs="mainData.type == '项目' ? ['产品清单','合同条款','角色信息'] : mainData.type == '框架' ? ['产品明细折扣','产品类别折扣','业绩目标'] : mainData.type == '居间' ? null : ['工具清单','合同条款']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation" >
        <editBtn :modelList="modelList" v-if="tool.checkAuth($route.name,'update')" :disabled="mainData.status != '新建' || !isLeader" @onSuccess="queryMainData();$refs.billno.listData()" :data="mainData" class="inline-16"/>
        <submit-check :disabled="!isLeader" :data="mainData" @onSuccess="queryMainData" />
        <reverseCheck @onSuccess="queryMainData()" :data="mainData" v-if="tool.checkAuth($route.name,'reverseCheck') && mainData.status == '审核'" />
        <contractOver v-if="tool.checkAuth($route.name,'contractOver') && mainData.status != '已终止' && mainData.status != '审核' && isLeader" :disabled="!isLeader" :id="mainData.sa_contractid" @onSuccess="queryMainData"/>
        <Del :idName="20221121202502" :id="mainData.sa_contractid" idKey="sa_contractids" class="inline-16" v-if="tool.checkAuth($route.name,'delete') && mainData.type == '新建' && isLeader"/>
      </div>
      <div slot="slot0" >
        <!--产品清单表-->
        <productBillno ref="billno" @priceChange="queryMainData" v-if="mainData.type == '项目'">
          <addProduct v-if="tool.checkAuth($route.name,'addProduct')" :disabled="mainData.status != '新建' || !isLeader" slot="addProduct" @onSuccess="$refs.billno.listData()"/>
          <template v-slot:edit="scope">
            <el-button 
              v-if="tool.checkAuth($route.name,'insert')"
              class="inline-16" 
              :disabled="mainData.status != '新建' || !isLeader" 
              type="text" size="mini" slot="edit" 
              @click="$refs.billno.editIndex = scope.data.sa_contract_itemsid;$refs.billno.form = Object.assign({},$refs.billno.form,scope.data)"
            >编 辑</el-button>
          </template>
          <template v-slot:del="scope">
            <delete-btn :nameId="20221123164502" :disabled="mainData.status != '新建' || !isLeader" nameKey="sa_contract_itemsids" :id="scope.data.sa_contract_itemsid" @deleteSuccess="$refs.billno.listData()"></delete-btn>
          </template>
        </productBillno>
        <!--产品明细折扣表-->
        <productDetailList ref="productDetailList" v-if="mainData.type == '框架'" @priceChange="queryMainData">
          <addProductDetail :disabled="mainData.status != '新建' || !isLeader" slot="addProduct" v-if="tool.checkAuth($route.name,'addProductDetail')" @onSuccess="$refs.productDetailList.listData()"/>
          <template v-slot:edit="scope">
            <el-button 
              v-if="tool.checkAuth($route.name,'update')"
              class="inline-16" 
              :disabled="mainData.status != '新建' || !isLeader" 
              type="text" 
              size="mini" 
              slot="edit" 
              @click="$refs.productDetailList.editIndex = scope.data.sa_contract_itemsid;$refs.productDetailList.form = Object.assign({},$refs.productDetailList.form,scope.data)"
            >编 辑</el-button>
          </template>
          <template v-slot:del="scope">
            <delete-btn v-if="tool.checkAuth($route.name,'delete')" :nameId="20221123164502" :disabled="mainData.status != '新建' || !isLeader" nameKey="sa_contract_itemsids" :id="scope.data.sa_contract_itemsid" @deleteSuccess="$refs.productDetailList.listData()"></delete-btn>
          </template>
        </productDetailList>
        <!--工具清单-->
        <toolList ref="toolList" v-if="mainData.type == '工具借用'" @priceChange="queryMainData">
          <addTool v-if="tool.checkAuth($route.name,'addTool')" :disabled="mainData.status != '新建' || !isLeader" slot="addProduct" @onSuccess="$refs.toolList.listData()"/>
          <template v-slot:edit="scope">
            <el-button 
              v-if="tool.checkAuth($route.name,'update')"
              class="inline-16" 
              :disabled="mainData.status != '新建' || !isLeader" 
              type="text" 
              size="mini" 
              slot="edit" 
              @click="$refs.toolList.editIndex = scope.data.sa_contract_itemsid;$refs.toolList.form = Object.assign({},$refs.toolList.form,scope.data)"
            >编 辑</el-button>
          </template>
          <template v-slot:del="scope">
            <delete-btn v-if="tool.checkAuth($route.name,'delete')" :nameId="20221123164502" :disabled="mainData.status != '新建' || !isLeader" nameKey="sa_contract_itemsids" :id="scope.data.sa_contract_itemsid" @deleteSuccess="$refs.toolList.listData()"></delete-btn>
          </template>
        </toolList>
      </div>
      <div slot="slot1" >
        <!--产品类别折扣表-->
        <productClassList ref="classList" @priceChange="queryMainData" v-if="mainData.type == '框架'">
          <addClass v-if="tool.checkAuth($route.name,'addClass')" :disabled="mainData.status != '新建' || !isLeader" slot="addProduct" @onSuccess="$refs.classList.listData()"/>
          <template v-slot:edit="scope">
            <el-button 
              v-if="tool.checkAuth($route.name,'update')"
              class="inline-16" 
              :disabled="mainData.status != '新建' || !isLeader" 
              type="text" size="mini" slot="edit" 
              @click="$refs.classList.currentEdit = scope.data;$refs.classList.form = Object.assign({},$refs.classList.form,scope.data)"
            >编 辑</el-button>
          </template>
          <template v-slot:del="scope">
            <delete-btn v-if="tool.checkAuth($route.name,'delete')" :nameId="20221124111202" :disabled="mainData.status != '新建' || !isLeader" nameKey="sa_contract_itemsaleclassids" :id="scope.data.sa_contract_itemsaleclassid" @deleteSuccess="$refs.classList.listData()"></delete-btn>
          </template>
        </productClassList>
        <!--合同条款-->
        <contractClause :disabled="mainData.status != '新建' || !isLeader" ref="Claus" v-if="mainData.type == '项目' || mainData.type == '工具借用'">
          <el-button 
            v-if="tool.checkAuth($route.name,'addClaus')"
            size="small" 
            type="primary" 
            slot="addProduct" 
            class="inline-16"
            @click="$refs.Claus.list.unshift({content:'',sa_contract_clauseid:0}),$refs.Claus.editIndex=0,$refs.Claus.form.sa_contract_clauseid=0"
            :disabled="mainData.status != '新建' || !isLeader" 
          >添 加</el-button>
          <template v-slot:edit="scope">
            <el-button 
              v-if="tool.checkAuth($route.name,'update')"
              class="inline-16" 
              :disabled="mainData.status != '新建' || scope.data.editable != 1 || !isLeader" 
              type="text" size="mini" slot="edit" 
              @click="$refs.Claus.currentEdit = scope.data;$refs.Claus.form = Object.assign({},$refs.Claus.form,scope.data)"
            >编 辑</el-button>
          </template>

          <template v-slot:del="scope">
            <delete-btn
             :nameId="20221128160302" 
             nameKey="sa_contract_clauseids" 
             :id="scope.data.sa_contract_clauseid" @deleteSuccess="$refs.Claus.listData()"
             v-if="scope.data.sa_contract_clauseid == 0"
            ></delete-btn>
          </template>
        </contractClause>
      </div>
      <div slot="slot2">
        <!--业绩目标-->
        <taskTarget ref="taskTarget" v-if="Object.keys(mainData).length > 0" :data="mainData">
          <template v-slot:edit="scope">
            <edit-target :disabled="mainData.status != '新建' || !isLeader" v-if="tool.checkAuth($route.name,'update')" :data="scope.data" :salerId="mainData" @onSuccess="$refs.taskTarget.queryData()"/>
          </template>
        </taskTarget>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import Del from '../components/delete'
import editBtn from '../components/editContract'
import SubmitCheck from '../components/submitCheck'
import productBillno from '../components/productList/productBillno'
import productDetailList from '../components/productDetailList/productDetailList'
import addProduct from '../components/productList/addProduct'
import addProductDetail from '../components/productDetailList/addProduct'
import addTool from '../components/toolList/addTool'
import toolList from '../components/toolList/toolList'
import addClass from '../components/productClassList/addProduct'
import productClassList from '../components/productClassList/productClassList'
import contractClause from '../components/contractClause/contractClause'
import editTarget from '../components/taskTarget/editTarget'
import taskTarget from '../components/taskTarget//taskTarget'
import contractOver from '../components/contractOver'
import reverseCheck from '../components/reverseCheck'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      modelList:[],
      isLeader:false
    }
  },
  components:{
    Del,
    SubmitCheck,
    editBtn,
    productBillno,
    addProduct,
    productDetailList,
    addProductDetail,
    addTool,
    toolList,
    addClass,
    productClassList,
    contractClause,
    editTarget,
    taskTarget,
    contractOver,
    reverseCheck
  },
  watch: {
    mainData: {
      handler (val) {
        this.isLeader = val.leader ? JSON.parse(window.sessionStorage.getItem('active_account')).userid == val.leader[0].userid : false
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20221121195102,
        "content": {
          "sa_contractid": this.$route.query.id
        }
      })
      this.mainData = res.data
      console.log(this.mainData);
      
      this.mainData.type == '项目' 
        ? this.mainData.typemx == '直销' 
          ? this.$router.replace({path:'/contractDetail',query:{id:this.$route.query.id,rowindex:this.$route.query.rowindex,type:'直销项目'}}) : this.$router.replace({path:'/contractDetail',query:{id:this.$route.query.id,rowindex:this.$route.query.rowindex,type:'经销项目'}})
          : this.$router.replace({path:'/contractDetail',query:{id:this.$route.query.id,rowindex:this.$route.query.rowindex,type:this.mainData.type}})

      this.changeDataStructure()
    },
    changeDataStructure() {
      let that = this
      this.mainData.type == '项目' 
        ? this.mainData.typemx == '直销' 
          ? this.mainAreaData = [
            /* 直销信息 */
          {
            label:'合同编号',
            value:this.mainData.billno
          },
          {
            label:'标题',
            value:this.mainData.title
          },
          {
            label:'合同模板',
            value:this.mainData.modelname
          },
          {
            label:'客户',
            value:this.mainData.enterprisename
          },
          {
            label:'项目名称',
            value:this.mainData.projectname
          },
          {
            label:'合同类型',
            value:this.mainData.type == '项目' ? this.mainData.typemx == '直销' ? '直销项目协议' : '经销项目协议' : ''
          },
          {
            label:'业务员',
            value:this.mainData.salername
          },
          {
            label:'合同有效期',
            value:`${this.mainData.begdate}-${this.mainData.enddate}`
          },
          {
            label:'签约日期',
            value:this.mainData.signdate
          },
          {
            label:'签约金额(元)',
            value:this.mainData.signamount
          },
          {
            label:'创建时间',
            value:this.mainData.createdate
          },
          {
            label:'创建人',
            value:this.mainData.createby
          },
          {
            label:'状态',
            value:this.mainData.status,
            style:function () {
            let style = {}
            switch (that.mainData.status) {
                case '新建':
                  style = {color:'#3874f6'}
                  break;
                case '提交':
                  style = {color:'#52c41a'}
                  break;
                case '审核':
                  style = {color:'#333333'}
                  break;
                default:
                  break;
              }
              return style
            }
          },
          {
            label:'合同描述',
            value:this.mainData.remarks
          },
        ] : this.mainAreaData = [
          /* 经销信息 */
          {
            label:'合同编号',
            value:this.mainData.billno
          },
          {
            label:'标题',
            value:this.mainData.title
          },
          {
            label:'合同模板',
            value:this.mainData.modelname
          },
          {
            label:'经销商',
            value:this.mainData.enterprisename
          },
          {
            label:'项目名称',
            value:this.mainData.projectname
          },
          {
            label:'合同类型',
            value:this.mainData.type == '项目' ? this.mainData.typemx == '直销' ? '直销项目协议' : '经销项目协议' : ''
          },
          {
            label:'业务员',
            value:this.mainData.salername
          },
          {
            label:'合同有效期',
            value:`${this.mainData.begdate}-${this.mainData.enddate}`
          },
          {
            label:'签约日期',
            value:this.mainData.signdate
          },
          {
            label:'签约金额(元)',
            value:this.mainData.signamount
          },
          {
            label:'创建时间',
            value:this.mainData.createdate
          },
          {
            label:'创建人',
            value:this.mainData.createby
          },
          {
            label:'状态',
            value:this.mainData.status,
            style:function () {
            let style = {}
            switch (that.mainData.status) {
                case '新建':
                  style = {color:'#3874f6'}
                  break;
                case '提交':
                  style = {color:'#52c41a'}
                  break;
                case '审核':
                  style = {color:'#333333'}
                  break;
                default:
                  break;
              }
              return style
            }
          },
          {
            label:'合同描述',
            value:this.mainData.remarks
          },
        ] : this.mainData.type == '框架'
            ? this.mainAreaData = [
            /* 合作协议 */
          {
            label:'合同编号',
            value:this.mainData.billno
          },
          {
            label:'标题',
            value:this.mainData.title
          },
          {
            label:'合同模板',
            value:this.mainData.modelname
          },
          {
            label:'经销商',
            value:this.mainData.enterprisename
          },
          {
            label:'业务员',
            value:this.mainData.salername
          },
          {
            label:'合同类型',
            value:'经销商合作协议'
          },
          {
            label:'折扣(%)',
            value:this.mainData.discountrate
          },
          {
            label:'合同有效期',
            value:`${this.mainData.begdate}-${this.mainData.enddate}`
          },
          {
            label:'签约日期',
            value:this.mainData.signdate
          },
          {
            label:'签约金额(元)',
            value:this.mainData.signamount
          },
          {
            label:'创建时间',
            value:this.mainData.createdate
          },
          {
            label:'创建人',
            value:this.mainData.createby
          },
          {
            label:'状态',
            value:this.mainData.status,
            style:function () {
            let style = {}
            switch (that.mainData.status) {
                case '新建':
                  style = {color:'#3874f6'}
                  break;
                case '提交':
                  style = {color:'#52c41a'}
                  break;
                case '审核':
                  style = {color:'#333333'}
                  break;
                default:
                  break;
              }
              return style
            }
          },
          {
            label:'合同描述',
            value:this.mainData.remarks
          },
        ] : this.mainData.type == '工具借用'
          ? this.mainAreaData = [
          /* 工具借用 */
          {
            label:'合同编号',
            value:this.mainData.billno
          },
          {
            label:'标题',
            value:this.mainData.title
          },
          {
            label:'合同模板',
            value:this.mainData.modelname
          },
          {
            label:'客户',
            value:this.mainData.enterprisename
          },
          {
            label:'合同类型',
            value:'工具借用协议'
          },
          {
            label:'业务员',
            value:this.mainData.salername
          },
          {
            label:'合同有效期',
            value:`${this.mainData.begdate}-${this.mainData.enddate}`
          },
          {
            label:'签约日期',
            value:this.mainData.signdate
          },
          {
            label:'单套价格(元)',
            value:this.mainData.signamount
          },
          {
            label:'创建时间',
            value:this.mainData.createdate
          },
          {
            label:'创建人',
            value:this.mainData.createby
          },
          {
            label:'状态',
            value:this.mainData.status,
            style:function () {
            let style = {}
            switch (that.mainData.status) {
                case '新建':
                  style = {color:'#3874f6'}
                  break;
                case '提交':
                  style = {color:'#52c41a'}
                  break;
                case '审核':
                  style = {color:'#333333'}
                  break;
                default:
                  break;
              }
              return style
            }
          },
          {
            label:'合同描述',
            value:this.mainData.remarks
          },
        ] : this.mainAreaData = [
          /* 居间协议 */
          {
            label:'合同编号',
            value:this.mainData.billno
          },
          {
            label:'标题',
            value:this.mainData.title
          },
          {
            label:'合同模板',
            value:this.mainData.modelname
          },
          {
            label:'居间服务商',
            value:this.mainData.enterprisename
          },
          {
            label:'项目名称',
            value:this.mainData.projectname
          },
          {
            label:'合同类型',
            value:'居间协议'
          },
          {
            label:'业务员',
            value:this.mainData.salername
          },
          {
            label:'合同有效期',
            value:`${this.mainData.begdate}-${this.mainData.enddate}`
          },
          {
            label:'签约日期',
            value:this.mainData.signdate
          },
          {
            label:'佣金比例(%)',
            value:this.mainData.kickback
          },
          {
            label:'创建时间',
            value:this.mainData.createdate
          },
          {
            label:'创建人',
            value:this.mainData.createby
          },
          {
            label:'状态',
            value:this.mainData.status,
            style:function () {
            let style = {}
            switch (that.mainData.status) {
                case '新建':
                  style = {color:'#3874f6'}
                  break;
                case '提交':
                  style = {color:'#52c41a'}
                  break;
                case '审核':
                  style = {color:'#333333'}
                  break;
                default:
                  break;
              }
              return style
            }
          },
          {
            label:'合同描述',
            value:this.mainData.remarks
          },
        ]

    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/contractDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    },
    async getModelList () {
      let res = await this.$api.requested({
        "id": 20221121155801,
        "content": { 
          "pageNumber": 1,
            "pageSize": 999999,
            "where":{
            "condition":""
            }
        }
      })
      this.modelList = res.data
      console.log(this.modelList);
    },
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
    this.getModelList()
  },
  created() {
  }
}
</script>

<style scoped>

</style>