提交代码

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

@@ -1,4 +1,5 @@
-export const MOD = '/business'
-export const prefix = '/clue'
-export const GETSYSFILED = '/sys-dict/getListByCode'
-export const GETPERSONNEL = '/user/getSimpleActiveUserList'
+export const MOD = "/business";
+export const prefix = "/clue";
+export const GETSYSFILED = "/sys-dict/getListByCode";
+export const GETPERSONNEL = "/user/getSimpleActiveUserList";
+export const GETGENERATEFOEM = `sys-form/getListByCode${MOD}`

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/business/component/relatedProducts.vue

@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <el-table ref="productTableRef" :data="productTable" border :row-class-name="tableRowClassName"
+            @row-click="tableRowItem" style="width: 100%;height: 200px">
+            <el-table-column label="序号" width="80">
+                <template #default="scope">
+                    <span>{{ scope.$index + 1 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="productName" label="产品名称" width="180">
+                <template #default="scope">
+                    <el-select v-model="productTable[scope.$index].productName" placeholder="请选择"
+                        v-if="productTableIndex == scope.$index" clearable @clear="clearTableItem(scope.$index)"
+                        @change="selectChange(scope.$index, productTable[scope.$index].productName)">
+                        <el-option v-for="item in productArrar" :key="item.id" :label="item.productName" :value="item.id" />
+                    </el-select>
+                    <span v-else>{{ productTable[scope.$index].productName }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="productType" label="产品类型" width="180"></el-table-column>
+            <el-table-column prop="unit" label="单位" width="80"></el-table-column>
+            <el-table-column prop="price" label="标准价格" width="120"></el-table-column>
+            <el-table-column prop="stock" label="库存" width="80"></el-table-column>
+            <el-table-column prop="sellingPrice" label="售价" width="180">
+                <template #default="scope">
+                    <el-input-number v-model="productTable[scope.$index].sellingPrice" class="mx-4" :min="0" :max="100000000" controls-position="right" v-if="productTableIndex == scope.$index" />
+                    <span v-else>{{ productTable[scope.$index].sellingPrice }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="quantity" label="数量" width="180">
+                <template #default="scope">
+                    <el-input-number v-model="productTable[scope.$index].quantity" class="mx-4" :min="0" :max="100000000" controls-position="right" v-if="productTableIndex == scope.$index" />
+                    <span v-else>{{ productTable[scope.$index].quantity }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="discount" label="折扣(%)" width="180">
+                <template #default="scope">
+                    <el-input-number v-model="productTable[scope.$index].discount" class="mx-4" :min="0" :max="100" controls-position="right" v-if="productTableIndex == scope.$index" />
+                    <span v-else>{{ productTable[scope.$index].discount }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="total" label="合计" width="180"></el-table-column>
+            <el-table-column label="操作" fixed="right" width="120">
+                <template #default="scope">
+                    <el-button link type="primary" size="large" @click.stop="addTableItem(scope.$index)">添加</el-button>
+                    <el-button link type="danger" size="large" v-if="productTable.length > 1"
+                        @click.stop="deteleTableItem(scope.$index)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import { ref, reactive, onMounted, inject } from "vue";
+
+const productTable: any = ref([{}])
+const productTableIndex = ref(0) // 可以编辑索引
+const productArrar = ref([
+    { id: 1, productName: '产品1', productType: '类别1', unit: '台', price: '1122', stock: '100', sellingPrice: 0, quantity: 0, discount: 0, total: '' },
+    { id: 2, productName: '产品2', productType: '类别2', unit: '台', price: '2211', stock: '300', sellingPrice: 0, quantity: 0, discount: 0, total: '' },
+])
+
+function selectChange(index: number, val: number | string) {
+    let newObj = productArrar.value.find((item: any) => item.id == val)
+    console.log(newObj)
+    productTable.value.splice(index, 1, newObj)
+}
+
+function tableRowItem(row: any) {
+    productTableIndex.value = row.index
+}
+
+function tableRowClassName({ row, rowIndex, }: { row: any, rowIndex: number }) {
+    row.index = rowIndex
+    return ''
+}
+
+function addTableItem(index: number) {
+    productTable.value.splice(index + 1, 0, {})
+}
+
+function clearTableItem(index: number) {
+    productTable.value.splice(index, 0, {})
+}
+
+function deteleTableItem(index: number) {
+    productTable.value.splice(index, 1)
+}
+</script>
+  
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,30 @@
+<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">
+            
+          </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>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref, reactive, onMounted, inject } from "vue";
+  import type { FormInstance, FormRules } from 'element-plus'
+
+  </script>
+  
+  <style lang="scss" scoped>
+
+  </style>

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

@@ -47,9 +47,11 @@
     <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="showVisible('newBusinessisible')">新建商机</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>
           <el-button type="primary">导入</el-button>
           <el-button type="primary">导出</el-button>
         </div>
@@ -59,7 +61,7 @@
             <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">{{
+                <el-button link type="primary" size="large" @click="toBusinessTableDetail(scope.row)">{{
                   scope.row.name
                 }}</el-button>
               </template>
@@ -93,51 +95,61 @@
         </div>
       </div>
     </div>
+    <!-- 弹窗 -->
+    <el-dialog v-model="allVisible.newBusinessisible" width="1000" :show-close="false" top="10vh"
+      :before-close="handleClose">
+      <template #header="{ close, titleId, titleClass }">
+        <div class="flex justify-between items-center border-b pb-3 dialog-header">
+          <h4 :id="titleId">{{ allText.newBusinessisibleText }}</h4>
+          <div>
+            <el-button type="primary">保存并新建</el-button>
+            <el-button type="primary" @click="editBusiness()">保存</el-button>
+            <el-button @click="closeVisible('newBusinessisible')">取消</el-button>
+          </div>
+        </div>
+      </template>
+      <div class="h-[60vh] overflow-y-auto scroll-bar">
+        <GenerateForm ref="generateForm" :data="generateFormData" />
+        <div>相关产品</div>
+        <RelatedProducts />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, inject } from "vue";
-import { GETSYSFILED, MOD, GETPERSONNEL } from './api'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useRouter, useRoute } from "vue-router";
+import { GETSYSFILED, MOD, GETPERSONNEL, GETGENERATEFOEM } from './api'
 import { post, get } from "@/utils/request";
 import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate } from '@/utils/tools'
+import { GenerateForm } from '@zmjs/form-design';
+import RelatedProducts from './component/relatedProducts.vue'
 
-// 定义类型
-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 route = useRoute()
+const router = useRouter()
+const globalPopup = inject<GlobalPopup>('globalPopup')
 const businessTotalTable = ref(0)
+const generateForm = ref<typeof GenerateForm>() // 自定义表单dom
+const generateFormData = ref({
+  config: {},
+  list: []
+}) // 自定义表单数据
 const businessTable = ref([
-  {name: '商机040101',phone: '张山'}
+  { name: '商机040101', phone: '张山' }
 ])
-const allLoading = reactive({
+const allLoading = reactive<AllLoadingInterface>({
   businessTableLading: false
 })
+const allVisible = reactive<AllVisibleInterface>({
+  newBusinessisible: false,
+  recycleVisible: false,
+})
+const allText = reactive({
+  newBusinessisibleText: '新建商机'
+}) // 所有文本
+
 const businessOpportunityForm = reactive<businessOpportunityFormType>({
   name: '',
   stageId: '',
@@ -155,6 +167,28 @@ const fixedData = reactive({
   Personnel: [] as personnelInterface[]
 })
 
+
+function editBusiness() {
+  generateForm.value?.getData().then((res: any) => {
+    console.log('正确')
+    console.log(res)
+  }).catch( (_err: any) => {
+    globalPopup?.showError('请填写完整')
+  })
+}
+
+function showVisible(type: keyof AllVisibleInterface) { // 显示弹窗
+  allVisible[type] = true
+}
+
+function closeVisible(type: keyof AllVisibleInterface) {
+  allVisible[type] = false
+}
+
+function handleClose(done: () => void) {
+  done()
+}
+
 async function getSystemField() {
   const systemField = getAllListByCode(['商机阶段'])
   for (let i in systemField) {
@@ -173,6 +207,17 @@ async function getSystemField() {
       id, name, phone, jobNumber
     }
   })
+
+  const res = await get(GETGENERATEFOEM)
+  generateFormData.value = JSON.parse(res.data[0].config)
+}
+
+function toBusinessTableDetail(row: any) {
+  console.log('点击跳转详情')
+  router.push({ 
+    path: `${MOD}/detail`, 
+    query: { id: row.id } 
+  })
 }
 
 onMounted(() => {
@@ -180,4 +225,11 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.dialog-header {
+  h4 {
+    font-size: 18px;
+    line-height: 24px;
+  }
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/business/type.d.ts

@@ -0,0 +1,38 @@
+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;
+}
+
+type AllLoadingInterface = {
+  businessTableLading: boolean;
+}
+
+type AllVisibleInterface = {
+  newBusinessisible: boolean;
+  recycleVisible: boolean;
+}
+

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/system/customForm/index.vue

@@ -160,6 +160,8 @@ function showModel() {
   setTimeout(() => {
     designForm.value.setJson(JSON.parse(config))
     // designForm.value.setJson(JSON.parse(localStorage.getItem('threadDataJson') || ''))
+    // designForm.value.setJson(JSON.parse(localStorage.getItem('business') || ''))
+    // designForm.value.setJson(JSON.parse(localStorage.getItem('tasks') || ''))
   }, 500)
 }
 
@@ -173,7 +175,9 @@ function handleClose(done: any) {
 }
 
 function setData() {
-  let data = JSON.parse(localStorage.getItem('threadDataJson') || '')
+  // let data = JSON.parse(localStorage.getItem('threadDataJson') || '')
+  // let data = JSON.parse(localStorage.getItem('business') || '')
+  let data = JSON.parse(localStorage.getItem('tasks') || '')
   data.list.forEach((element: any) => {
     element.allDisable = true
   });