manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/business/businessInfo.vue

<template>
  <div class="flex flex-col h-full">
    <div class="bg-white info flex-1 overflow-y-auto cellnormall">
      <van-cell title="商机名称" :value="infoData.name" />
      <van-cell title="客户名称" :value="infoData.customerName" />
      <van-cell title="联系人姓名" :value="infoData.contactsName" />
      <van-cell title="商机金额">
        <template #default>
          <span class="text-[#FF8B32]" v-if="infoData.amountOfMoney">¥ {{ infoData.amountOfMoney }}</span>
        </template>
      </van-cell>
      <van-cell title="预计成交" :value="infoData.expectedTransactionDate" />
      <van-cell title="商机阶段" :value="infoData.stageValue" />
      <van-cell title="负责人">
        <template #default>
          <TranslationComponent :openId="infoData.inchargerName" />
        </template>
      </van-cell>
      <van-cell title="备注" :value="infoData.remark" />
    </div>
    <div class="bottomButton">
      <van-button type="primary" class="w-full block" v-if="!infoData.contactsName"
        @click="shoContactDialag()">关联联系人</van-button>
      <van-button type="warning" class="w-full block" v-if="infoData.inchargerName"
        @click="showDialogCli()">转移商机</van-button>
      <van-button type="primary" class="w-full block" v-if="!infoData.inchargerName"
        @click="claimAndClaim()">认领商机</van-button>
      <van-button type="default" class="w-full block" v-permission="[routingInformation.jurisdiction.edit]" @click="jumpEdit()">编辑商机</van-button>
      <van-button type="danger" class="w-full block" v-permission="[routingInformation.jurisdiction.delete]" @click="deleteBusinessOpportunity()">删除商机</van-button>
    </div>

    <!-- 转移弹窗 -->
    <van-dialog v-model:show="showDialog" :title="`转移商机`" show-cancel-button @confirm="confirmTransfer"
      :before-close="dialogCloseBefo">
      <van-cell title="转移至" is-link @click="showSelect = true">
        <template #value>
          {{ dialogSelection.label }}
        </template>
      </van-cell>
      <div class="themeTextColor text-size-small pl-4 pt-2 pb-2">转移后，将看不到此商机了</div>
    </van-dialog>

    <van-dialog v-model:show="showContactDialog" :title="`关联联系人`" show-cancel-button @confirm="relatedContacts"
      :before-close="dialogCloseBefo">
      <van-cell title="联系人" is-link @click="showContactSelect = true">
        <template #value>
          {{ dialogSelection.label }}
        </template>
      </van-cell>
    </van-dialog>

    <!-- select 选择器 -->
    <van-popup v-model:show="showSelect" destroy-on-close position="bottom" :style="{ height: '80%' }">
      <PullDownSelector @change="selectChange" />
    </van-popup>

    <van-popup v-model:show="showContactSelect" destroy-on-close position="bottom" :style="{ height: '80%' }">
      <PullDownSelector :options="allContactsList" :doYouNeedTranslation="false" @change="selectChange" />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { showConfirmDialog } from 'vant';
import { useLifecycle } from '@hooks/useCommon.js';
import { BUSINESS_OPPORTUNITY_TRANSFER, GET_CONTACTS_WITH_MORE_I_DS, CONTACT_PERSON_ASSOCIATED_WITH_BUSINESS_OPPORTUNITY } from '@hooks/useApi'
import { resetListData, getListFieldKey } from '@components/common/formForm/formCorrespondenceProcessing'
import requests from "@common/requests";
import useShowToast from '@hooks/useToast'
import useInfoStore from '@store/useInfoStore'
import useFixedData from "@store/useFixedData.js"
import useRouterStore from "@store/useRouterStore.js";
import { routingInfos } from "@utility/generalVariables"

const router = useRouterStore()
const fixedData = useFixedData()
const userInfo = useInfoStore()
const { toastSuccess, toastFail, toastText } = useShowToast()
const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const infoData = ref(props.info)
const routingInformation = routingInfos['business']

watch(() => props.info, (newValue) => {
  infoData.value = newValue
  getAllContactsList()
})

const showDialog = ref(false);
const showSelect = ref(false);
const showContactSelect = ref(false);
const showContactDialog = ref(false)
const dialogSelection = ref({});
const allContactsList = ref([]);

function deleteBusinessOpportunity() {
  const { name = '', searchFiled = {}, deteleFiled = '' } = routingInformation
  const row = infoData.value
  const foemVal = { [routingInformation.key == 'tasks' ? 'taskIds' : 'ids']: row.id }
  showConfirmDialog({
    title: `删除${name}`,
    message: `确定删除【${row[searchFiled?.search]}】${name}吗？`,
  }).then(() => {
    requests.post(deteleFiled, { ...foemVal }).then((res) => {
      toastSuccess('删除成功')
      router.navigateBack()
    }).catch((err) => {
      toastFail(err.msg ? err.msg : '删除失败')
    })
  })
}

function jumpEdit() {
  const formJson = fixedData.formJson[routingInformation.key] || []
  const formList = resetListData(formJson?.list)
  const filedObj = getListFieldKey(formList, infoData.value)
  const formVal = { ...filedObj, id: infoData.value.id }

  router.navigateTo({
    pathName: 'addEditor',
    success: () => {
      router.emit('addEditorParameter', {
        routerInfo: JSON.stringify(routingInformation),
        filedValue: JSON.stringify(formVal)
      })
    }
  })
}

function shoContactDialag() {
  dialogSelection.value = {}
  showContactDialog.value = true
}

function relatedContacts() {
  if (!dialogSelection.value.label) {
    return toastText('请选择要关联的联系人')
  }

  requests.post(CONTACT_PERSON_ASSOCIATED_WITH_BUSINESS_OPPORTUNITY, {
    id: props.info.id,
    contactsId: dialogSelection.value.value
  }).then((res) => {
    props.info.contactsName = dialogSelection.value.label
    showContactDialog.value = false
    toastSuccess('关联成功')
    listReloadData()
  })
}

function confirmTransfer() {
  if (!dialogSelection.value.label) {
    return toastText('请选择要转移的人员')
  }

  requests.post(BUSINESS_OPPORTUNITY_TRANSFER, { ids: props.info.id, inchargerId: dialogSelection.value.value }).then((res) => {
    toastSuccess('转移成功')
    showDialog.value = false
    setTimeout(() => {
      listReloadData()
    }, 2000)
  })
}

function claimAndClaim() {
  showConfirmDialog({
    title: '认领商机',
    message: `确定认领【${props.info.name}】商机吗？`,
  }).then(() => {
    requests.post(BUSINESS_OPPORTUNITY_TRANSFER, { ids: props.info.id, inchargerId: userInfo.userInfo.id }).then((res) => {
      toastSuccess('认领成功')
      listReloadData()
      props.info.inchargerName = userInfo.userInfo.name
      showDialog.value = false
    })
  })
}

function listReloadData() {
  router.navigateBack({
    success: () => {
      router.eventEmit('moduleListRefreshData', {})
    }
  })
}

function selectChange(value, label) {
  dialogSelection.value = {
    value, label
  }
  showSelect.value = false
  showContactSelect.value = false
}

function showDialogCli() {
  dialogSelection.value = {}
  showDialog.value = true
}

function dialogCloseBefo(val) {
  if (val == 'confirm' && showDialog.value) {
    return false
  }

  return true
}

function getAllContactsList() {
  requests.get(`${GET_CONTACTS_WITH_MORE_I_DS}?customerId=${props.info.customerId}`).then(({ data = [] }) => {
    let list = data.map(item => {
      return {
        label: item.name,
        value: item.id,
      }
    })
    if (!list.length) {
      list = [{}]
    }
    allContactsList.value = list
  })
}

useLifecycle({
  load: () => {
    getAllContactsList()
  },
  init: () => {
    getAllContactsList()
  }
});
</script>

<style lang='scss' scoped>
.bottomButton {
  margin: 0 14px;
  padding-bottom: 30px;

  :deep(.van-button) {
    margin-bottom: 20px;
  }
}

.info {
  margin: 8px 14px 30px 14px;
  padding: 14px;
}
</style>