yos_web/src/SDrpManagement/salerPrivatecustomer/detail/customerDetail.vue

<template>
  <div>
    <basicDetails
      ref="details"
      :titleText="mainData.enterprisename"
      formPath="salerPrivatecustomer"
      :editData="mainData"
      :mainAreaData="mainAreaData"
      turnPageId="20221012164402"
      idname="sa_customersid"
      tags=""
      typeTask="我的客户"
      :tabs="[
        '详细信息',
        '联系人',
        '客户地址',
        '开票信息',
        '项目商机',
        '报价单',
        '关联合同',
        '账户余额',
        '银行卡信息',
        '关联线索',
      ]"
      @pageChange="pageChange"
      @onEditSuccess="onEditSuccess"
      @logSuccess="queryMainData"
      @sysTag="sysTag"
    >
      <div slot="tags">
        <!-- 使用此插槽可不传[tags] -->
        <!-- :tabs="['经销商团队','代理区域','营销类别','账户余额']" -->
        <!--        <tagPanl slot="tags" :data="tags" :id="mainData.sa_customersid" @onSuccess="queryMainData"/>-->
      </div>
      <div slot="customOperationBef">
        <commissionSet
          class="inline-16"
          v-if="tool.checkAuth($route.name, 'commissionSet')"
          ownertable="sa_customers"
          @setSuccess="queryMainData"
          :data="mainData"
        ></commissionSet>
      </div>
      <div slot="customOperation">
        <!-- 此区域提供了自定义操作按钮 -->
        <el-button
          class="inline-16"
          type="primary"
          size="mini"
          @click="portraitShowFun"
          >{{ $t("360°画像") }}</el-button
        >
        <!-- <mindmap class="inline-16" ref="mindmap" :id="this.$route.query.id" name="custom"></mindmap> -->
        <statusChange
          class="inline-16"
          v-if="tool.checkAuth($route.name, 'statusChange')"
          :disabled="mainData.disabled"
          :id="mainData.sa_customersid"
          @statusChangeSuccess="statusChangeSuccess"
        ></statusChange>
        <share
          class="inline-16"
          v-if="
            tool.checkAuth($route.name, 'share') &&
            mainData.sourcepoolname === ''
          "
          :disabled="mainData.disabled"
          :id="mainData.sa_customersid"
          @onshow="onSuccess"
          @shareSuccess="onSuccess"
        ></share>
        <toBack
          class="inline-16"
          v-if="
            tool.checkAuth($route.name, 'back') &&
            mainData.sa_customerpoolid_source !== 0
          "
          :disabled="mainData.disabled"
          :data="mainData"
          @backSuccess="onSuccess"
        ></toBack>
        <duplicatesCustomer
          class="inline-16"
          v-if="tool.checkAuth($route.name, 'queryDuplicates')"
          :data="mainData"
          @onSuccessTag="onSuccessTag"
        ></duplicatesCustomer>
        <confirmSelection class="inline-16" content="暂缓的客户将不计入客户相关数据统计，是否确定暂缓该客户" btn-title="暂缓" btn-type="primary" confirm-button-text="确定暂缓" cancel-button-text="取消"
                          paramId="20221010164602" @onSuccess="queryMainData();$refs.details.$refs.tag.queryTag();$refs.baseDetail.basicData()" v-if="tool.checkAuth($route.name,'putOff') && mainData.status != '暂缓' && mainData.disabled"
        ></confirmSelection>
        <confirmSelection class="inline-16" content="是否确定取消暂缓并继续跟进客户" btn-title="取消暂缓" btn-type="primary" confirm-button-text="取消暂缓" cancel-button-text="关闭"
                          paramId="20221010164602" @onSuccess="queryMainData();$refs.details.$refs.tag.queryTag();$refs.baseDetail.basicData()" v-if="tool.checkAuth($route.name,'putOff') && mainData.status == '暂缓' && mainData.disabled"
        ></confirmSelection>
        <to_void
          class="inline-16"
          v-if="tool.checkAuth($route.name, 'toVoid')"
          :id="mainData.sa_customersid"
          :disabled="mainData.disabled"
          :data="mainData"
          @onshow="onSuccess"
          @toVoidSuccess="onSuccess"
        ></to_void>
        <recovery
          class="inline-16"
          v-if="
            tool.checkAuth($route.name, 'recovery') &&
            mainData.sa_customerpoolid_source !== 0
          "
          :data="mainData"
          @onshow="onSuccess"
          @backSuccess="onSuccess"
        ></recovery>
      </div>
      <div slot="slot0">
        <detailed
          :data="mainData"
          v-if="Object.keys(mainData).length > 1"
          ref="baseDetail"
        ></detailed>
      </div>
      <div slot="slot1" class="normal-panel">
        <contacts
          :data="mainData"
          ref="contactsRef"
          @onSuccess="onSuccess"
          v-if="flag"
        ></contacts>
      </div>
      <div slot="slot2" class="normal-panel">
        <address_manage :data="mainData" v-if="flag"></address_manage>
      </div>
      <div slot="slot3" class="normal-panel">
        <financial :mainData="mainData" v-if="flag"></financial>
      </div>
      <div slot="slot4" class="normal-panel">
        <projectChange :data="mainData" v-if="flag"></projectChange>
      </div>
      <div slot="slot5" class="normal-panel">
        <quotedPrice :data="mainData" v-if="flag"></quotedPrice>
      </div>
      <div slot="slot6" class="normal-panel">
        <contract :data="mainData" v-if="flag"></contract>
      </div>
      <div slot="slot7" class="normal-panel">
        <accountMoney :data="mainData" v-if="flag"></accountMoney>
      </div>
      <div slot="slot8" class="normal-panel">
        <bankCard :data="mainData" v-if="flag"></bankCard>
      </div>
      <div slot="slot9" class="normal-panel">
        <followLeads :data="mainData" v-if="flag"></followLeads>
      </div>
    </basicDetails>
    <PortraitDetail
      ref="PortraitDetail"
      v-if="PortraitShow"
      :data="mainData"
    ></PortraitDetail>
  </div>
</template>

<script>
import detailed from "./modules/detailedData";
import contacts from "./modules/contacts/list";
import address_manage from "./modules/addressManage/list";
import transactionUser from "./modules/operation/transactionUser";
import lock from "./modules/operation/lock";
import unlock from "./modules/operation/unlock";
import share from "./modules/operation/share";
import send_back from "./modules/operation/sendBack";
import to_void from "./modules/operation/toVoid";
import transaction_status from "./modules/operation/transactionStatus";
import statusChange from "./modules/operation/statusChange";
import recovery from "./modules/operation/recovery";
import financial from "./modules/financialInfo/index.vue";
import projectChange from "./modules/projectChange/list";
import quotedPrice from "./modules/quotedPrice/list";
import followLeads from "./modules/followLeads/index";
import toBack from "@/SDrpManagement/salerPrivatecustomer/detail/modules/operation/toBack";
import contract from "./modules/contract/index";
import accountMoney from "./modules/accountMoney/index";
import bankCard from "./modules/bankCard/index";
import duplicatesCustomer from "@/components/duplicatesData/duplicatesCustomer";
import mindmap from "@/components/mindmap/index.vue";
import PortraitDetail from "@/HDrpManagement/customerPortrait/modules/detail.vue";
import commissionSet from "@/components/commissionSetNew/index.vue";
export default {
  name: "detail",
  data() {
    return {
      mainData: {
        disabled: false,
      },
      mainAreaData: [],
      userInfo: JSON.parse(window.sessionStorage.getItem("active_account")),
      tags: {},
      visible: false,
      dialogFormVisible: false,
      dialogFormLeader: false,
      form: {
        status: "",
        userid: "",
      },
      users: [],
      flag: false,
      disabled: false,
      tagFlag: false,
      PortraitShow: false,
    };
  },
  components: {
    detailed,
    contacts,
    address_manage,
    transactionUser,
    lock,
    unlock,
    share,
    send_back,
    to_void,
    transaction_status,
    recovery,
    financial,
    projectChange,
    quotedPrice,
    followLeads,
    statusChange,
    toBack,
    contract,
    accountMoney,
    bankCard,
    duplicatesCustomer,
    mindmap,
    PortraitDetail,
    commissionSet,
  },
  watch: {
    /*$route (val) {
      if (val.path == '/customerDetail') {
        console.log(val,'rouer111')
       /!* this.getFileList()
        this.$refs.add.dialogVisible = false*!/
      }

    },*/
    async mainData(val) {
      const res = await this.$api.requested({
        id: 20220930103501,
        content: {
          ownertable: "sa_customers",
          ownerid: this.$route.query.id,
        },
      });
      const agent = await this.$api.requested({
        id: 20230329122604,
        content: {
          ownertable: "sa_customers",
          ownerid: this.$route.query.id,
        },
      });
      if (this.mainData.leader.length !== 0) {
        if (
          JSON.parse(window.sessionStorage.getItem("active_account")).userid ===
          this.mainData.leader[0].userid
        ) {
          /*是负责人*/
          this.mainData.disabled = true;
        } else {
          let flag = 0;
          for (var i = 0; i < res.data[0].team.length; i++) {
            if (
              res.data[0].team[i].userid ===
              JSON.parse(window.sessionStorage.getItem("active_account")).userid
            ) {
              if (res.data[0].team[i].editable === 1) {
                this.mainData.disabled = true;
                flag = 1;
                break;
              } else {
                flag = 0;
                break;
              }
            }
          }
          /*不是负责人*/
          flag === 0
            ? agent.data.editable === 0
              ? (this.mainData.disabled = false)
              : (this.mainData.disabled = true)
            : (this.mainData.disabled = true);
          this.$refs.details.$refs.group.editdataleader =
            agent.data.editdataleader;
        }
      }
      console.log("权限结果", this.mainData.disabled);
    },
  },
  methods: {
    goPortrait() {
      let model;
      let id = this.$route.query.id;
      JSON.parse(sessionStorage.getItem("module_info")).forEach((item1) => {
        item1.modules.forEach((item2) => {
          item2.apps.forEach((item3) => {
            if (item3.systemappid == 259) {
              model = item3;
              return;
            }
          });
        });
      });
      sessionStorage.setItem("active_modules", JSON.stringify(model));
      this.$store.dispatch("changeDetailDrawer", false);
      this.$router.push("/customerportrait");
      setTimeout(() => {
        this.$router.push({
          path: "/customerportrait",
          query: {
            id: id,
            isTrue: 1,
          },
        });
      }, 1000);
    },
    async queryMainData() {
      const res = await this.$api.requested({
        id: 20221012164302,
        content: {
          sa_customersid: this.$route.query.id,
        },
      });
      /* this.mainData = res.data*/
      this.mainData = Object.assign({}, this.mainData, res.data);
      /*if (this.mainData.reward_point){
        let point = ''
        for (var i = 0;i< this.mainData.reward_point.length;i++){
          if (i === this.mainData.reward_point.length -1){
            point = point + this.mainData.reward_point[i]
          }else {
            point = point  + this.mainData.reward_point[i] + '，'
          }
        }
        this.mainData.reward_point = point
      }*/
      this.$refs["details"].param.content.type = this.$route.query.tabIndex;
      this.$refs["details"].param.content.isExport = false;
      this.changeDataStructure();
      this.flag = true;
    },
    show() {
      this.visible = false;
    },
    portraitShowFun() {
      this.PortraitShow = true;
      this.$nextTick(() => {
        this.$refs.PortraitDetail.dialogFormVisible = true;
      });
    },
    changeDataStructure() {
      let that = this;
      this.mainAreaData = [
        {
          label: "客户编号",
          value: this.mainData.sa_customersid,
        },
        {
          label: "erp编号",
          value: this.mainData.erpagentnum,
        },
        {
          label: "客户名称",
          value: this.mainData.enterprisename,
        },
        {
          label: "客户类型",
          value: this.mainData.type,
        },
        {
          label: "客户等级",
          value: this.mainData.grade === 0 ? "" : this.mainData.grade,
        },
        {
          label: "客户分类",
          value: this.mainData.customergrade,
        },
        {
          label: "成交状态",
          value: this.$t(this.mainData.tradingstatus),
          style: function () {
            let style = {};
            switch (that.mainData.tradingstatus) {
              case "已成交":
                style = { color: "#3874f6" };
                break;
              case "未成交":
                style = { color: "#e6a23c" };
                break;
              case "多次成交":
                style = { color: "#e6a23c" };
                break;
              default:
                break;
            }
            return style;
          },
        },
        {
          label: "合作状态",
          value: this.$t(this.mainData.status),
          style: function () {
            let style = {};
            switch (that.mainData.status) {
              case "潜在":
                style = { color: "#3874f6" };
                break;
              case "合作中":
                style = { color: "#67c23a" };
                break;
              case "暂缓":
                style = { color: "#e6a23c" };
                break;
              case "暂缓":
                style = { color: "#d90a0a" };
                break;
              case "已终止":
                style = { color: "#f56c6c" };
                break;
              default:
                break;
            }
            return style;
          },
        },
        {
          label: "来源公海",
          value: this.mainData.sourcepoolname,
        },
        {
          label: "负责人",
          value: this.mainData.leader
            ? this.mainData.leader.length
              ? this.mainData.leader[0].name
              : "--"
            : "--",
        },
        {
          label: "部门",
          value: this.mainData.leader
            ? this.mainData.leader.length
              ? this.mainData.leader[0].depname
              : "--"
            : "--",
        },
        {
          label: "归属经销商",
          value: this.mainData.agentname,
        },
        {
          label: "营销费用",
          value:
            "¥ " + this.tool.formatAmount(this.mainData.salesfeesamount, 2),
        },
      ];
      if (
        this.$route.query.portrait == "1" ||
        this.$route.query.portrait == "ht" ||
        this.$route.query.portrait == "xm" ||
        this.$route.query.portrait == "dd" ||
        this.$route.query.portrait == "fw"
      ) {
        this.$refs.mindmap.onShow();
      }
    },
    // 监听切换数据,上一页,下一页
    pageChange(id, rowindex, tabIndex) {
      console.log("翻页");
      this.flag = false;
      /*   tabIndex = this.$route.query.tabIndex*/
      /* this.$router.replace({path:'/customerDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex,portrait:''}})*/
      this.queryMainData(id);
    },
    onSuccess() {
      this.visible = false;
      this.queryMainData(this.$route.query.id);
      this.$emit("onSuccess");
    },
    statusChangeSuccess() {
      /*  this.$refs.details.refreshTag()
      this.$refs.baseDetail.basicData()
      this.$refs.baseDetail.systemData()*/
      this.flag = false;
      this.queryMainData();
    },
    onEditSuccess() {
      this.flag = false;
      this.queryMainData();
    },

    sysTag(val) {
      this.tagFlag = false;
      for (let i = 0; i < val.length; i++) {
        if (val[i] == "疑似重复") {
          this.tagFlag = true;
          break;
        }
      }
    },
    onSuccessTag() {
      this.$refs.details.$refs.tag.queryTag();
    },
  },
  mounted() {},
  created() {
    this.queryMainData(this.$route.query.id);
  },
};
</script>

<style scoped>
</style>