提交商机管理

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

@@ -0,0 +1,4 @@
+export const MOD = '/business'
+export const prefix = '/clue'
+export const GETSYSFILED = '/sys-dict/getListByCode'
+export const GETPERSONNEL = '/user/getSimpleActiveUserList'

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

@@ -1,11 +1,183 @@
 <template>
-  <div>
-    business
+  <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>