提交客户管理

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/api.ts

@@ -0,0 +1,3 @@
+export const MOD = '/customer'
+export const GETSYSFILED = '/sys-dict/getListByCode'
+export const GETPERSONNEL = '/user/getSimpleActiveUserList'

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/index.vue

@@ -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>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/thread/index.vue

@@ -52,10 +52,10 @@
     <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" @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>