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">重置</El-Button>
          <El-button type="primary" class="w-full">搜索</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">新建商机</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">{{
                  scope.row.name
                }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="clueSourceId" label="客户名称" width="180"></el-table-column>
            <el-table-column prop="phone" label="联系人" width="180">
              <template #default="scope">
                <el-button link type="primary" size="large">{{
                  scope.row.phone
                }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="email" label="商机金额" width="180"></el-table-column>
            <el-table-column prop="customerIndustryId" label="商机阶段" width="180"></el-table-column>
            <el-table-column prop="customerLevelId" label="预计成交" width="180"></el-table-column>
            <el-table-column prop="inchargerId" label="负责人" width="180"></el-table-column>
            <el-table-column prop="createName" 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">编辑</el-button>
                <el-button link type="primary" size="large">新建任务</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>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
import { GETSYSFILED, MOD, GETPERSONNEL } from './api'
import { post, get } from "@/utils/request";
import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate } from '@/utils/tools'

// 定义类型
interface businessOpportunityFormType { // 线索筛选条件类型
  name: string,
  stageId: string | number,
  customerName: string,
  contactPerson: string,
  product: string | number,
  inchargerId: string | number,
  startTime: string | number,
  endTime: string | number,
  pageIndex: string | number,
  pageFrom: string | number
}

interface fixedDataInterface {
  id: string | number,
  companyId: string | number,
  code: string,
  name: string,
  seq: string | number,
}

interface personnelInterface {
  id: string | number,
  name: string,
  phone: string,
  jobNumber: string
}

const businessTotalTable = ref(0)
const businessTable = ref([
  {name: '商机040101',phone: '张山'}
])
const allLoading = reactive({
  businessTableLading: false
})
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[]
})

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
    }
  })
}

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

<style lang="scss" scoped></style>