|
|
@@ -1,11 +1,224 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- customer
|
|
|
+ <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.clueName" clearable placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户来源">
|
|
|
+ <el-select v-model="customerCriteriaForm.clueSourceId" placeholder="请选择">
|
|
|
+ <el-option v-for="item in fixedData.CustomSources" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电话号码">
|
|
|
+ <el-input v-model="customerCriteriaForm.phone" 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">新建客户</el-button>
|
|
|
+ <el-button type="primary" @click="batchTransfer()">批量转移</el-button>
|
|
|
+ <el-button type="primary" @clicl="batchDelete()">批量删除</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="clueTable" border v-loading="allLoading.clueTableLading"
|
|
|
+ style="width: 100%;height: 100%;">
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column prop="clueName" label="客户名称" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" size="large" @click.prevent="toClueTableDetail(scope.row)">{{ scope.row.clueName
|
|
|
+ }}</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"></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="190"></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" @click.prevent="deleteRow(scope.$index)">删除</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="clueTotalTable" :hide-on-single-page="true" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+import { ref, reactive, onMounted, inject } from "vue";
|
|
|
+import { MOD, GETSYSFILED, GETPERSONNEL } from './api.ts'
|
|
|
+import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate } from '@/utils/tools'
|
|
|
+import { post, get } from "@/utils/request";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+
|
|
|
+// 定义类型
|
|
|
+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 { // 线索筛选条件类型
|
|
|
+ clueName: string,
|
|
|
+ clueSourceId: string | number,
|
|
|
+ phone: 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 route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
+const globalPopup = inject<GlobalPopup>('globalPopup')
|
|
|
+const customerCriteriaForm = reactive<customerCriteriaFormType>({ // 筛选条件form
|
|
|
+ clueName: '',
|
|
|
+ clueSourceId: '',
|
|
|
+ phone: '',
|
|
|
+ email: '',
|
|
|
+ customerIndustryId: '',
|
|
|
+ customerLevelId: '',
|
|
|
+ inchargerId: '',
|
|
|
+ startTime: getFirstDayOfMonth(new Date()),
|
|
|
+ endTime: formatDate(new Date()),
|
|
|
+ pageIndex: 1,
|
|
|
+ pageFrom: 10
|
|
|
+})
|
|
|
+const allLoading = reactive({
|
|
|
+ clueTableLading: false,
|
|
|
+})
|
|
|
+const fixedData = reactive({
|
|
|
+ CustomSources: [] as fixedDataInterface[],
|
|
|
+ CustomIndustry: [] as fixedDataInterface[],
|
|
|
+ CustomLevel: [] as fixedDataInterface[],
|
|
|
+ Personnel: [] as personnelInterface[]
|
|
|
+})
|
|
|
+const clueTable = ref([{ clueName: '客户名称', clueSourceId: '客户来源', id: 123456789 }]) // 线索table数据
|
|
|
+const clueTotalTable = ref(0) // 线索 table 数据总数
|
|
|
+
|
|
|
+// 定义方法
|
|
|
+function searchTable() {
|
|
|
+ getClueTable()
|
|
|
+}
|
|
|
+
|
|
|
+function resetTable() {
|
|
|
+ let newResetForm = resetFromValue(customerCriteriaForm, { startTime: getFirstDayOfMonth(new Date()), endTime: formatDate(new Date()), pageIndex: 1, pageFrom: 10 })
|
|
|
+ Object.assign(customerCriteriaForm, newResetForm)
|
|
|
+ getClueTable()
|
|
|
+}
|
|
|
+
|
|
|
+function deleteRow(_row: any) {
|
|
|
+ console.log('点击了删除')
|
|
|
+}
|
|
|
+
|
|
|
+function batchTransfer() {
|
|
|
+ console.log('点击了批量转移')
|
|
|
+}
|
|
|
+
|
|
|
+function batchDelete() {
|
|
|
+ console.log('批量删除')
|
|
|
+}
|
|
|
+
|
|
|
+function toClueTableDetail(_row: any) {
|
|
|
+ console.log('点击跳转详情')
|
|
|
+}
|
|
|
+
|
|
|
+function getClueTable() {
|
|
|
+ let valueForm = getFromValue(customerCriteriaForm)
|
|
|
+ console.log(valueForm, '<=== valueForm')
|
|
|
+}
|
|
|
+
|
|
|
+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()
|
|
|
+ getClueTable()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
Lijy