manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/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="customerCriteriaForm" label-width="70px" style="max-width: 600px">
            <el-form-item label="客户名称">
              <el-input v-model="customerCriteriaForm.customName" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="客户来源">
              <el-select v-model="customerCriteriaForm.customSourceId" placeholder="请选择">
                <el-option v-for="item in fixedData.ClueSources" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="电话号码">
              <el-input v-model="customerCriteriaForm.telPhone" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="customerCriteriaForm.email" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="客户行业">
              <el-select v-model="customerCriteriaForm.customerIndustryId" placeholder="请选择">
                <el-option v-for="item in fixedData.CustomIndustry" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户级别">
              <el-select v-model="customerCriteriaForm.customerLevelId" placeholder="请选择">
                <el-option v-for="item in fixedData.CustomLevel" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="负责人">
              <el-select v-model="customerCriteriaForm.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="customerCriteriaForm.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="customerCriteriaForm.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="resetTable()">重置</El-Button>
          <El-button type="primary" class="w-full" @click="searchTable()">搜索</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="editCustomer(false)">新建客户</el-button>
          <el-button type="primary" @click="showVisible('batchTransferVisible')"
            :disabled="batchTableData.length <= 0">批量转移</el-button>
          <el-button type="primary" @click="batchDeteleItem()" :disabled="batchTableData.length <= 0">批量删除</el-button>
          <el-button type="primary" @click="showVisible('deteleCustomerVisible')">回收站</el-button>
          <el-button type="primary" @click="showVisible('importVisible')">导入</el-button>
          <el-button type="primary" @click="exportCustomerTableList()" :loading="allLoading.exoprtLoading">导出</el-button>
        </div>
        <div class="flex-1 w-full overflow-hidden">
          <el-table ref="customerTableRef" :data="customerTable" border v-loading="allLoading.customerTableLading"
            style="width: 100%;height: 100%;" @selection-change="changeBatch">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="customName" label="客户名称" width="180">
              <template #default="scope">
                <el-button link type="primary" size="large" @click.prevent="toCustomerTableDetail(scope.row)">{{
                  scope.row.customName
                }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="customSourceValue" label="客户来源" width="180"></el-table-column>
            <el-table-column prop="companyPhone" label="公司电话" width="180"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
            <el-table-column prop="customerIndustryValue" label="客户行业" width="180"></el-table-column>
            <el-table-column prop="customerLevelValue" label="客户级别" width="180"></el-table-column>
            <el-table-column prop="inchargerName" label="负责人" width="190"></el-table-column>
            <el-table-column prop="creatorName" label="创建人" width="180"></el-table-column>
            <el-table-column prop="newCreateTime" 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="editCustomer(scope.row)">编辑</el-button>
                <el-button link type="primary" size="large" @click="newTask(scope.row)">新建任务</el-button>
                <el-button link type="danger" size="large"
                  @click="customerDeteleItem(scope.row.id, scope.row.customName)">删除</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="customerTotalTable" :hide-on-single-page="true"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

    <!-- 新建客户 -->
    <el-dialog v-model="allVisible.editCustomerVisible" width="1000" :show-close="false" top="10vh">
      <template #header="{ close, titleId, titleClass }">
        <div class="flex justify-between items-center border-b pb-3 dialog-header">
          <h4 :id="titleId">{{ allText.editCustomerText }}</h4>
          <div>
            <el-button type="primary" :loading="allLoading.editCustomerSaveLoading"
              @click="editCustomerSave(true)">保存并新建</el-button>
            <el-button type="primary" :loading="allLoading.editCustomerSaveLoading"
              @click="editCustomerSave(false)">保存</el-button>
            <el-button @click="closeVisible('editCustomerVisible')">取消</el-button>
          </div>
        </div>
      </template>
      <div class="h-[60vh] overflow-y-auto scroll-bar pt-3">
        <div class="ml-4 mr-4">
          <GenerateForm ref="customerTemplateRef" :data="customerTemplate" :value="customerTemplateValue"
            :key="customerTemplateRefKey" v-loading="allLoading.customerTemplateRefLoading" />
        </div>
      </div>
    </el-dialog>

    <!-- 批量转移 -->
    <el-dialog v-model="allVisible.batchTransferVisible" width="600" :show-close="false" top="10vh">
      <template #header="{ close, titleId, titleClass }">
        <div class="flex justify-between items-center border-b pb-3 dialog-header">
          <h4 :id="titleId">{{ allText.transferText }}</h4>
          <div>
            <el-button type="primary" v-loading="allLoading.transferLoading" @click="transferBusiness()">转移</el-button>
            <el-button @click="allVisible.batchTransferVisible = false">取消</el-button>
          </div>
        </div>
      </template>
      <div class="scroll-bar m-6">
        <div class="flex mb-4">
          <div class="w-20 flex items-center justify-end pr-4">转移至:</div>
          <el-select v-model="transferPersonnel" placeholder="请选择" class="flex1">
            <el-option v-for="item in fixedData.Personnel" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div class="pl-3 text-[#e94a4a]">转移后，将看不到此客户</div>
      </div>
    </el-dialog>

    <el-dialog v-model="allVisible.importVisible" width="680" :show-close="false" top="10vh">
      <template #header="{ close, titleId, titleClass }">
        <div class="flex justify-between items-center border-b pb-3 dialog-header">
          <h4 :id="titleId">导入产品</h4>
          <div class="flex">
            <el-upload class="upload-demo mr-3" :limit="1" :show-file-list="false" accept=".xlsx"
              :http-request="importBusiness">
              <el-button type="primary" :loading="allLoading.importLoading">导入</el-button>
            </el-upload>
            <el-button @click="allVisible.importVisible = false">取消</el-button>
          </div>
        </div>
      </template>
      <div class="p-8">
        <div class="ml-4 mr-4">
          <div class="flex items-center">1、点击下载 <el-link type="primary"
              @click="downloadTemplate(IMPORTMOD, allText.importText)">{{ allText.importText }}</el-link></div>
          <div class="mt-4">2、填写excel文件、客户名称必填</div>
        </div>
      </div>
    </el-dialog>

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

    <!-- 回收站 -->
    <DeteleBusiness :visibles="allVisible.deteleCustomerVisible" @closeVisible="closeVisible" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
import { MOD, GETSYSFILED, GETPERSONNEL, URL_TABLELIST, URL_TEMPLALE, URL_EDITSAVE, URL_DETELER, URL_CLAIM, IMPORTMOD, GETALLCLUE } from './api.ts'
import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate, getTemplateKey, createTaskFromType, confirmAction, downloadFile, downloadTemplate } from '@/utils/tools'
import { post, get, uploadFile } from "@/utils/request";
import { useRouter, useRoute } from "vue-router";
import { GenerateForm } from '@zmjs/form-design';
import { createTask } from "@/components/TaskModal/taskFunction";
import { ElTable, UploadRequestOptions } from "element-plus";

import TaskModal from '@/components/TaskModal/index.vue'
import DeteleBusiness from './component/deteleTables.vue'

// 定义类型
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
}

interface customerCriteriaFormType { // 线索筛选条件类型
  customName: string,
  customSourceId: string | number,
  telPhone: string,
  email: string,
  customerIndustryId: string | number,
  customerLevelId: string | number,
  inchargerId: string | number,
  startTime: string | number,
  endTime: string | number,
  pageIndex: string | number,
  pageFrom: string | number
}

// 定义变量
const router = useRouter()
const globalPopup = inject<GlobalPopup>('globalPopup')
const customerCriteriaForm = reactive<customerCriteriaFormType>({ // 筛选条件form
  customName: '',
  customSourceId: '',
  telPhone: '',
  email: '',
  customerIndustryId: '',
  customerLevelId: '',
  inchargerId: '',
  startTime: getFirstDayOfMonth(new Date()),
  endTime: formatDate(new Date()),
  pageIndex: 1,
  pageFrom: 10
})
const customerTable = ref([]) // 线索table数据
const customerTotalTable = ref(0) // 线索 table 数据总数
const allLoading = reactive({
  customerTableLading: false,
  editCustomerSaveLoading: false,
  customerTemplateRefLoading: false,
  transferLoading: false,
  exoprtLoading: false,
  importLoading: false
})
const allVisible = reactive({
  editCustomerVisible: false,
  taskModalVisible: false,
  deteleCustomerVisible: false,
  batchTransferVisible: false,
  importVisible: false
})
const allText = reactive({
  editCustomerText: '新建客户',
  transferText: '批量转移',
  importText: '客户导入模板.xlsx',
  exportText: '客户表导出.xlsx'
})
const fixedData = reactive({
  ClueSources: [] as fixedDataInterface[],
  CustomIndustry: [] as fixedDataInterface[],
  CustomLevel: [] as fixedDataInterface[],
  Personnel: [] as personnelInterface[]
})

const customerTemplate = ref({
  list: [],
  config: {}
})
const customerTemplateRef = ref<typeof GenerateForm>() // 自定义表单dom
const customerTemplateValue = ref({})
const customerTemplateRefKey = ref(1)
const taskModalForm = ref({})
const taskLoading = ref<saveLoadingType>('1')
const batchTableData = ref<any>([])
const customerTableRef = ref<InstanceType<typeof ElTable>>()
const transferPersonnel = ref('')


// 定义方法
async function importBusiness(param: UploadRequestOptions) {
  allLoading.importLoading = true
  const formData = new FormData();
  formData.append('multipartFile', param.file)
  const res = await uploadFile('接口名称', formData).finally(() => {
    allLoading.importLoading = false
  })
  if (res.code == 'ok') {
    globalPopup?.showSuccess('导入成功' || '')
    getCustomerTable()
    return
  }
  globalPopup?.showError(res.msg || '')
}

function exportCustomerTableList() {
  allLoading.exoprtLoading = true
  let valueForm = getFromValue(customerCriteriaForm)
  post('接口名称', { ...valueForm }).then((res) => {
    downloadFile(res.data, allText.exportText)
  }).finally(() => {
    allLoading.exoprtLoading = false
  })
}

function transferBusiness() {
  const ids = batchTableData.value.map((item: any) => item.id).join(',')
  allLoading.transferLoading = true
  post(URL_CLAIM, { ids, inchargerId: transferPersonnel.value }).then(() => {
    transferPersonnel.value = ''
    globalPopup?.showSuccess('转移成功')
    closeVisible('batchTransferVisible')
    getCustomerTable()
  }).finally(() => {
    allLoading.transferLoading = false
  })
}

function batchDeteleItem() {
  const value = batchTableData.value.map((item: any) => item.id).join(',')
  const label = batchTableData.value.map((item: any) => item.customName).join(',')
  customerDeteleItem(value, label, true)
}

function customerDeteleItem(value: string | number, label: string, batch: boolean = false) {
  confirmAction(`确定${batch ? '批量' : ''}删除【${label}】客户吗？`).then(() => {
    post(URL_DETELER, { ids: value }).then(res => {
      if (res.code != 'ok') {
        globalPopup?.showError(res.msg)
        return
      }
      globalPopup?.showSuccess('删除成功')
      changeBatch(false)
      getCustomerTable()
    }).catch((err) => {
      globalPopup?.showError(err.message)
    })
  })
}

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?.showError(message)
  })
}

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

function editCustomerSave(flag: boolean) {
  customerTemplateRef.value?.getData().then((res: any) => {
    allLoading.editCustomerSaveLoading = true
    post(URL_EDITSAVE, { ...res }).then((_res) => {
      allVisible.editCustomerVisible = flag
      globalPopup?.showSuccess('保存成功')
      if (flag) {
        customerTemplateRef.value?.reset()
      }
      getCustomerTable()
    }).finally(() => {
      allLoading.editCustomerSaveLoading = false
    })
  }).catch((_err: any) => {
    console.log(_err)
    globalPopup?.showError('请填写完整')
  })
}

function editCustomer(row: any) { // row 有数据代表编辑
  if (row) {
    const { id, companyPhone, customName, inchargerId, createTime, customSourceId, customerIndustryId, customerLevelId, email, telPhone } = row
    const formVal = {
      id, customName, inchargerId, customerIndustryId, customerLevelId, email, customSourceId,
      createTime: formatDate(new Date(createTime)),
      telPhone, companyPhone
    }
    allLoading.customerTemplateRefLoading = true
    setTimeout(() => {
      customerTemplateRefKey.value++
      allLoading.customerTemplateRefLoading = false
    }, 1000);
    customerTemplateValue.value = formVal
    allText.editCustomerText = '编辑客户'
  } else { // 没有数据代表新建
    setTimeout(() => {
      console.log(customerTemplateRef.value)
      customerTemplateValue.value = {}
      customerTemplateRefKey.value++
    }, 200)
    allText.editCustomerText = '新增客户'
  }
  showVisible('editCustomerVisible')
}

function changeBatch(flag: boolean = true) {
  if (flag) {
    batchTableData.value = customerTableRef.value && customerTableRef.value.getSelectionRows()
  } else {
    batchTableData.value = []
    customerTableRef.value && customerTableRef.value.clearSelection()
  }
}

function toCustomerTableDetail(_row: any) {
  router.push({ path: `${MOD}/detail`, query: { id: _row.id } })
}

function searchTable() {
  getCustomerTable()
}

function resetTable() {
  let newResetForm = resetFromValue(customerCriteriaForm, { startTime: getFirstDayOfMonth(new Date()), endTime: formatDate(new Date()), pageIndex: 1, pageFrom: 10 })
  Object.assign(customerCriteriaForm, newResetForm)
  getCustomerTable()
}

function getCustomerTable() {
  let valueForm = getFromValue(customerCriteriaForm)
  allLoading.customerTableLading = true
  post(URL_TABLELIST, { ...valueForm }).then((res) => {
    const { data, total } = res.data
    customerTable.value = (data || []).map((item: any) => {
      return {
        ...item,
        newCreateTime: formatDate(new Date(item.createTime)),
      }
    })
    customerTotalTable.value = total
  }).finally(() => {
    allLoading.customerTableLading = false
  })
}

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(URL_TEMPLALE)
  customerTemplate.value = JSON.parse(res.data[0].config)
}

function showVisible(type: keyof typeof allVisible) {
  allVisible[type] = true
}

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

function handleSizeChange(val: number) {
  customerCriteriaForm.pageIndex = 1
  customerCriteriaForm.pageFrom = val
  getCustomerTable()
}

function handleCurrentChange(val: number) {
  customerCriteriaForm.pageIndex = val
  getCustomerTable()
}

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

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