manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/business/index.vue

<template>
  <div class="h-full flex">
    <div class="p-5 w-80 pr-0">
      <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
        <div class="flex-1 p-3 overflow-y-auto">
          <el-form :model="businessOpportunityForm" label-width="70px" style="max-width: 600px">
            <el-form-item label="商机名称">
              <el-input v-model="businessOpportunityForm.name" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商机阶段">
              <el-select v-model="businessOpportunityForm.stageId" placeholder="请选择">
                <el-option v-for="item in fixedData.BusinessStage" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户名称">
              <el-input v-model="businessOpportunityForm.customerName" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="businessOpportunityForm.contactPerson" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="产品">
              <el-select v-model="businessOpportunityForm.product" placeholder="请选择">
                <el-option v-for="item in fixedData.Personnel" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="负责人">
              <el-select v-model="businessOpportunityForm.inchargerId" placeholder="请选择">
                <el-option v-for="item in fixedData.Personnel" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker v-model="businessOpportunityForm.startTime" type="date" placeholder="请选择" :clearable="false"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="">
              <el-date-picker v-model="businessOpportunityForm.endTime" type="date" placeholder="请选择" :clearable="false"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-form>
        </div>
        <div class="w-full flex p-3 shadow-[0_-3px_5px_0px_rgba(0,0,0,0.2)]">
          <El-button class="w-full" @click="resetForm()">重置</El-Button>
          <El-button type="primary" class="w-full" @click="getBusinessTableList()">搜索</El-Button>
        </div>
      </div>
    </div>
    <div class="flex-1 p-5 overflow-auto">
      <div class="bg-white w-full h-full p-3 shadow-md rounded-md flex flex-col">
        <div class="flex justify-end pb-3">
          <el-button type="primary" @click="showVisible('newBusinessisible')">新建商机</el-button>
          <el-button type="primary">批量转移</el-button>
          <el-button type="primary">批量删除</el-button>
          <el-button type="primary">阶段设置</el-button>
          <el-button type="primary">回收站</el-button>
          <el-button type="primary">导入</el-button>
          <el-button type="primary">导出</el-button>
        </div>
        <div class="flex-1 w-full overflow-hidden">
          <el-table ref="clueTableRef" :data="businessTable" border v-loading="allLoading.businessTableLading"
            style="width: 100%;height: 100%;">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="商机名称" width="180">
              <template #default="scope">
                <el-button link type="primary" size="large" @click="toBusinessTableDetail(scope.row)">{{
                  scope.row.name
                }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
            <el-table-column prop="contactsName" label="联系人" width="180">
              <template #default="scope">
                <el-button link type="primary" size="large">{{
                  scope.row.contactsName
                }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="amountOfMoney" label="商机金额" width="180"></el-table-column>
            <el-table-column prop="stageValue" label="商机阶段" width="180"></el-table-column>
            <el-table-column prop="expectedTransactionDate" label="预计成交" width="180"></el-table-column>
            <el-table-column prop="inchargerName" label="负责人" width="180"></el-table-column>
            <el-table-column prop="creatorName" label="创建人" width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
              <template #default="scope">
                <el-button link type="primary" size="large" @click="editShowVisible('newBusinessisible', scope.row)">编辑</el-button>
                <el-button link type="primary" size="large" @click="newTask(scope.row)">新建任务</el-button>
                <el-button link type="danger" size="large">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end pt-3">
          <el-pagination layout="total, prev, pager, next, sizes" :total="businessTotalTable"
            :hide-on-single-page="true" />
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="allVisible.newBusinessisible" width="1000" :show-close="false" top="10vh"
      :before-close="handleClose">
      <template #header="{ close, titleId, titleClass }">
        <div class="flex justify-between items-center border-b pb-3 dialog-header">
          <h4 :id="titleId">{{ allText.newBusinessisibleText }}</h4>
          <div>
            <el-button type="primary" :loading="allLoading.newBusinessSaveLading"
              :disabled="allLoading.businessSaveLading" @click="editBusiness(true)">保存并新建</el-button>
            <el-button type="primary" @click="editBusiness(false)" :loading="allLoading.businessSaveLading"
              :disabled="allLoading.newBusinessSaveLading">保存</el-button>
            <el-button @click="closeVisible('newBusinessisible')">取消</el-button>
          </div>
        </div>
      </template>
      <div class="h-[60vh] overflow-y-auto scroll-bar pt-3">
        <GenerateForm ref="generateForm" :data="generateFormData" />
        <div>相关产品</div>
        <RelatedProducts ref="relatedProductsRef" :productTableList="productTableList" />
      </div>
    </el-dialog>

    <!-- 新建任务 -->
    <TaskModal :visible="allVisible.taskModalVisible" :edit-form="taskModalForm" :save-loading="taskLoading"
      @close="closeVisible('taskModalVisible')" @submit="submitForm" :title="'新建任务'" :disabled-list="['taskType', 'businessOpportunityId']" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import { GETSYSFILED, MOD, GETPERSONNEL, GETGENERATEFOEM, GETBUSINESSLIST, UPDATEINSET } from './api'
import { GETTABLELIST } from '@/pages/product/api'
import { post, get } from "@/utils/request";
import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, createTaskFromType, formatDate } from '@/utils/tools'
import { createTask } from '@/components/TaskModal/taskFunction'
import { formatDateTime } from '@/utils/times'
import { GenerateForm } from '@zmjs/form-design';
import RelatedProducts from './component/relatedProducts.vue'
import TaskModal from '@/components/TaskModal/index.vue'

const route = useRoute()
const router = useRouter()
const globalPopup = inject<GlobalPopup>('globalPopup')
const businessTotalTable = ref(0)
const generateForm = ref<typeof GenerateForm>() // 自定义表单dom
const relatedProductsRef = ref<typeof RelatedProducts>()
const generateFormData = ref({
  config: {},
  list: []
}) // 自定义表单数据
const businessTable = ref([])
const allLoading = reactive({
  businessTableLading: false,
  businessSaveLading: false,
  newBusinessSaveLading: false,
})
const allVisible = reactive({
  newBusinessisible: false,
  recycleVisible: false,
  taskModalVisible: false
})
const allText = reactive({
  newBusinessisibleText: '新建商机'
}) // 所有文本

const taskModalForm = ref({}) // 任务弹窗表单
const taskLoading = ref<saveLoadingType>("1");

const businessOpportunityForm = reactive<businessOpportunityFormType>({
  name: '',
  stageId: '',
  customerName: '',
  contactPerson: '',
  product: '',
  inchargerId: '',
  startTime: getFirstDayOfMonth(new Date()),
  endTime: formatDate(new Date()),
  pageIndex: 1,
  pageFrom: 10
})
const fixedData = reactive({
  BusinessStage: [] as fixedDataInterface[],
  Personnel: [] as personnelInterface[]
})
const productTableList = ref([])


function editBusiness(visibles: boolean) {
  generateForm.value?.getData().then((res: any) => {
    let productTableListData = relatedProductsRef?.value?.returnData()
    let newForm = {
      ...res,
      expectedTransactionDate: res.expectedTransactionDate ? formatDateTime(new Date(res.expectedTransactionDate)) : '',
      businessItemProductList: productTableListData ? JSON.stringify(productTableListData) : []
    }
    allLoading.businessSaveLading = true
    post(UPDATEINSET, { ...newForm }).then((_res) => {
      allVisible.newBusinessisible = visibles
      globalPopup?.showSuccess('保存成功')
      getBusinessTableList()
    }).finally(() => {
      allLoading.businessSaveLading = false
    })
  }).catch((_err: any) => {
    console.log(_err)
    globalPopup?.showError('请填写完整')
  })
}

function editShowVisible(type: keyof typeof allVisible, item: any) {
  console.log(item, '选择数据')
  showVisible(type)
}

function newTask(item: any) {
  const { id } = item
  taskModalForm.value = { ...createTaskFromType(1), businessOpportunityId: id, }
  showVisible('taskModalVisible')
}

function submitForm(submitData: any, isClose: boolean) { // 任务提交
  taskLoading.value = '2'
  createTask(submitData, isClose).then((res) => {
    const { saveLoading, isClose } = res
    taskLoading.value = saveLoading
    allVisible.taskModalVisible = isClose
    globalPopup?.showSuccess('新增成功')
  }).catch((err) => {
    const { saveLoading, isClose, message } = err
    taskLoading.value = saveLoading
    allVisible.taskModalVisible = isClose
    globalPopup?.showSuccess(message)
  })
}

function showVisible(type: keyof typeof allVisible) { // 显示弹窗
  allVisible[type] = true
}

function closeVisible(type: keyof typeof allVisible) {
  allVisible[type] = false
}

function handleClose(done: () => void) {
  done()
}

function getBusinessTableList() {
  const formValue = getFromValue(businessOpportunityForm)
  post(GETBUSINESSLIST, { ...formValue }).then((res) => {
    const { data, total } = res.data
    businessTable.value = data.map((item: any) => {
      return {
        ...item,
        expectedTransactionDate: formatDate(new Date(item.expectedTransactionDate))
      }
    })
    businessTotalTable.value = total
  })
}

function resetForm() {
  let reset = {
    startTime: getFirstDayOfMonth(new Date()),
    endTime: formatDate(new Date()),
    pageIndex: 1,
    pageFrom: 10
  }
  let newBusinessOpportunityForm = resetFromValue(businessOpportunityForm, { ...reset })
  Object.assign(businessOpportunityForm, newBusinessOpportunityForm)
  getBusinessTableList()
}

async function getSystemField() {
  const systemField = getAllListByCode(['商机阶段'])
  for (let i in systemField) {
    const { data } = await get(`${GETSYSFILED}?code=${systemField[i]}`)
    for (let key of Object.keys(fixedData)) {
      if (systemField[i] == key) {
        Object.assign(fixedData, { [key]: data })
      }
    }
  }

  const { data } = await post(GETPERSONNEL, {})
  fixedData.Personnel = data.map((item: any) => {
    const { id, name, phone, jobNumber } = item
    return {
      id, name, phone, jobNumber
    }
  })

  const res = await get(GETGENERATEFOEM)
  generateFormData.value = JSON.parse(res.data[0].config)
}

function toBusinessTableDetail(row: any) {
  console.log('点击跳转详情')
  router.push({
    path: `${MOD}/detail`,
    query: { id: row.id }
  })
}

function getProductTableList() {
  post(GETTABLELIST, { pageIndex: -1, pageSize: -1 }).then((res) => {
    if (res.code == 'ok') {
      const { record, total } = res.data
      productTableList.value = record.map((item: any) => {
        const { id, productName, productCode, unit, unitName, typeName, type, price, inventory } = item
        return {
          id,
          productId: id,
          productName,
          productCode,
          unit,
          unitName,
          price,
          type,
          typeName,
          inventory,
          quantity: '',
          discount: '',
          totalPrice: ''
        }
      })
    }
  })
}

onMounted(() => {
  getSystemField()
  getProductTableList()
  getBusinessTableList()
})
</script>

<style lang="scss" scoped>
.dialog-header {
  h4 {
    font-size: 18px;
    line-height: 24px;
  }
}
</style>