✨ CRM：完善合同的新增、修改需求

(cherry picked from commit 9d44b9acaa)

src/views/crm/contract/ContractForm.vue

@@ -1,40 +1,58 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="820">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1280">
     <el-form
       ref="formRef"
       v-loading="formLoading"
       :model="formData"
       :rules="formRules"
-      label-width="110px"
+      label-width="120px"
     >
-      <el-row :gutter="20">
-        <el-col :span="12">
+      <el-row>
+        <el-col :span="8">
           <el-form-item label="合同编号" prop="no">
-            <el-input v-model="formData.no" placeholder="请输入合同编号" />
+            <el-input disabled v-model="formData.no" placeholder="保存时自动生成" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="合同名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入合同名称" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
+          <el-form-item label="负责人" prop="ownerUserId">
+            <el-select
+              v-model="formData.ownerUserId"
+              :disabled="formType !== 'create'"
+              class="w-1/1"
+            >
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
           <el-form-item label="客户名称" prop="customerId">
-            <el-select v-model="formData.customerId">
+            <el-select v-model="formData.customerId" placeholder="请选择客户" class="w-1/1">
               <el-option
                 v-for="item in customerList"
                 :key="item.id"
                 :label="item.name"
-                :value="item.id!"
+                :value="item.id"
               />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="商机名称" prop="businessId">
-            <el-select v-model="formData.businessId">
+            <el-select :disabled="!formData.customerId" v-model="formData.businessId" class="w-1/1">
               <el-option
-                v-for="item in businessList"
+                v-for="item in getBusinessOptions"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id!"
@@ -42,46 +60,48 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+      </el-row>
+      <el-row>
+        <el-col :span="8">
           <el-form-item label="下单日期" prop="orderDate">
             <el-date-picker
               v-model="formData.orderDate"
               placeholder="选择下单日期"
               type="date"
               value-format="x"
+              class="!w-1/1"
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="合同金额" prop="price">
-            <el-input v-model="formData.price" placeholder="请输入合同金额" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="开始时间" prop="startTime">
             <el-date-picker
               v-model="formData.startTime"
               placeholder="选择开始时间"
               type="date"
               value-format="x"
+              class="!w-1/1"
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="结束时间" prop="endTime">
             <el-date-picker
               v-model="formData.endTime"
               placeholder="选择结束时间"
               type="date"
               value-format="x"
+              class="!w-1/1"
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+      </el-row>
+      <el-row>
+        <el-col :span="8">
           <el-form-item label="公司签约人" prop="signUserId">
-            <el-select v-model="formData.signUserId">
+            <el-select v-model="formData.signUserId" class="w-1/1">
               <el-option
-                v-for="item in userList"
+                v-for="item in userOptions"
                 :key="item.id"
                 :label="item.nickname"
                 :value="item.id!"
@@ -89,61 +109,70 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="客户签约人" prop="contactId">
-            <el-select v-model="formData.contactId" :disabled="!formData.customerId">
+        <el-col :span="8">
+          <el-form-item label="客户签约人" prop="signContactId">
+            <el-select
+              v-model="formData.signContactId"
+              :disabled="!formData.customerId"
+              class="w-1/1"
+            >
               <el-option
                 v-for="item in getContactOptions"
                 :key="item.id"
                 :label="item.name"
-                :value="item.id!"
+                :value="item.id"
               />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="负责人" prop="ownerUserId">
-            <el-select v-model="formData.ownerUserId">
-              <el-option
-                v-for="item in userList"
-                :key="item.id"
-                :label="item.nickname"
-                :value="item.id!"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
+        <el-col :span="8">
           <el-form-item label="备注" prop="remark">
+            <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <!-- 子表的表单 -->
+      <ContentWrap>
+        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <el-tab-pane label="产品清单" name="product">
+            <ContractProductForm
+              ref="productFormRef"
+              :products="formData.products"
+              :disabled="disabled"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </ContentWrap>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="产品总金额" prop="totalProductPrice">
             <el-input
-              v-model="formData.remark"
-              :rows="3"
-              placeholder="请输入备注"
-              type="textarea"
+              disabled
+              v-model="formData.totalProductPrice"
+              :formatter="erpPriceInputFormatter"
             />
           </el-form-item>
         </el-col>
-        <!-- TODO @puhui999：productItems 改成 products 会更好点；因为它不是 item 哈 -->
-        <el-col :span="24">
-          <el-form-item label="产品列表" prop="productList">
-            <ProductList v-model="formData.productItems" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="整单折扣(%)" prop="discountPercent">
+        <el-col :span="8">
+          <el-form-item label="整单折扣（%）" prop="discountPercent">
             <el-input-number
               v-model="formData.discountPercent"
-              :min="0"
-              :max="100"
-              :precision="0"
               placeholder="请输入整单折扣"
-              class="!w-100%"
+              controls-position="right"
+              :min="0"
+              :precision="2"
+              class="!w-1/1"
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="产品总金额(元)" prop="productPrice">
-            {{ fenToYuan(formData.productPrice) }}
+        <el-col :span="8">
+          <el-form-item label="折扣后金额" prop="price">
+            <el-input
+              disabled
+              v-model="formData.totalPrice"
+              placeholder="请输入商机金额"
+              :formatter="erpPriceInputFormatter"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -160,8 +189,9 @@ import * as ContractApi from '@/api/crm/contract'
 import * as UserApi from '@/api/system/user'
 import * as ContactApi from '@/api/crm/contact'
 import * as BusinessApi from '@/api/crm/business'
-import ProductList from './components/ProductList.vue'
-import { fenToYuan } from '@/utils'
+import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
+import { useUserStore } from '@/store/modules/user'
+import ContractProductForm from '@/views/crm/contract/components/ContractProductForm.vue'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -170,30 +200,56 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref<ContractApi.ContractVO>({} as ContractApi.ContractVO)
+const formData = ref({
+  id: undefined,
+  no: undefined,
+  name: undefined,
+  customerId: undefined,
+  businessId: undefined,
+  orderDate: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  signUserId: undefined,
+  signContactId: undefined,
+  ownerUserId: undefined,
+  discountPercent: 0,
+  totalProductPrice: undefined,
+  remark: undefined,
+  products: []
+})
 const formRules = reactive({
   name: [{ required: true, message: '合同名称不能为空', trigger: 'blur' }],
   customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }],
   orderDate: [{ required: true, message: '下单日期不能为空', trigger: 'blur' }],
-  ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
-  no: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }]
+  ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+// TODO 芋艿：统一的客户选择面板
+const customerList = ref([]) // 客户列表的数据
+const businessList = ref<BusinessApi.BusinessVO[]>([])
+const contactList = ref<ContactApi.ContactVO[]>([])
 
-/** 监听合同产品变化，计算合同产品总价 */
+/** 子表的表单 */
+const subTabsName = ref('product')
+const productFormRef = ref()
+
+/** 计算 discountPrice、totalPrice 价格 */
 watch(
-  () => formData.value.productItems,
+  () => formData.value,
   (val) => {
-    if (!val || val.length === 0) {
-      formData.value.productPrice = 0
+    if (!val) {
       return
     }
-    // 使用 reduce 函数进行累加
-    formData.value.productPrice = val.reduce(
-      (accumulator, currentValue) =>
-        isNaN(accumulator + currentValue.totalPrice) ? 0 : accumulator + currentValue.totalPrice,
-      0
-    )
+    const totalProductPrice = val.products.reduce((prev, curr) => prev + curr.totalPrice, 0)
+    const discountPrice =
+      val.discountPercent != null
+        ? erpPriceMultiply(totalProductPrice, val.discountPercent / 100.0)
+        : 0
+    const totalPrice = totalProductPrice - discountPrice
+    // 赋值
+    formData.value.totalProductPrice = totalProductPrice
+    formData.value.totalPrice = totalPrice
   },
   { deep: true }
 )
@@ -213,7 +269,18 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
-  await getAllApi()
+  // 获得客户列表
+  customerList.value = await CustomerApi.getCustomerSimpleList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 默认新建时选中自己
+  if (formType.value === 'create') {
+    formData.value.ownerUserId = useUserStore().getUser.id
+  }
+  // 获取联系人
+  contactList.value = await ContactApi.getSimpleContactList()
+  // 获得商机列表
+  businessList.value = await BusinessApi.getSimpleBusinessList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -226,6 +293,7 @@ const submitForm = async () => {
   if (!valid) return
   // 提交请求
   formLoading.value = true
+  productFormRef.value.validate()
   try {
     const data = unref(formData.value) as unknown as ContractApi.ContractVO
     if (formType.value === 'create') {
@@ -245,39 +313,35 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = () => {
-  formData.value = {} as ContractApi.ContractVO
+  formData.value = {
+    id: undefined,
+    no: undefined,
+    name: undefined,
+    customerId: undefined,
+    businessId: undefined,
+    orderDate: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    signUserId: undefined,
+    signContactId: undefined,
+    ownerUserId: undefined,
+    discountPercent: 0,
+    totalProductPrice: undefined,
+    remark: undefined,
+    products: []
+  }
   formRef.value?.resetFields()
 }
 
-/** 获取其它相关数据 */
-const getAllApi = async () => {
-  await Promise.all([getCustomerList(), getUserList(), getContactListList(), getBusinessList()])
-}
-
-/** 获取客户 */
-const customerList = ref<CustomerApi.CustomerVO[]>([])
-const getCustomerList = async () => {
-  customerList.value = await CustomerApi.getCustomerSimpleList()
-}
+// TODO 芋艿：切换客户时，需要 reset 关联的几个字段
+// TODO 芋艿：选择商机时，需要自动设置
 
 /** 动态获取客户联系人 */
-const contactList = ref<ContactApi.ContactVO[]>([])
 const getContactOptions = computed(() =>
   contactList.value.filter((item) => item.customerId === formData.value.customerId)
 )
-const getContactListList = async () => {
-  contactList.value = await ContactApi.getSimpleContactList()
-}
-
-/** 获取用户列表 */
-const userList = ref<UserApi.UserVO[]>([])
-const getUserList = async () => {
-  userList.value = await UserApi.getSimpleUserList()
-}
-
-/** 获取商机 */
-const businessList = ref<BusinessApi.BusinessVO[]>([])
-const getBusinessList = async () => {
-  businessList.value = await BusinessApi.getSimpleBusinessList()
-}
+/** 动态获取商机 */
+const getBusinessOptions = computed(() =>
+  businessList.value.filter((item) => item.customerId === formData.value.customerId)
+)
 </script>