【新增】前端代码第一次提交

src/views/crm/business/BusinessForm.vue

@@ -0,0 +1,287 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1280">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <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="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-col :span="8">
+          <el-form-item label="客户名称" prop="customerId">
+            <el-select
+              :disabled="formData.customerDefault"
+              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"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="商机状态组" prop="statusTypeId">
+            <el-select
+              v-model="formData.statusTypeId"
+              placeholder="请选择商机状态组"
+              clearable
+              class="w-1/1"
+              :disabled="formType !== 'create'"
+            >
+              <el-option
+                v-for="item in statusTypeList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="预计成交日期" prop="dealTime">
+            <el-date-picker
+              v-model="formData.dealTime"
+              type="date"
+              value-format="x"
+              placeholder="选择预计成交日期"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <!-- 子表的表单 -->
+      <ContentWrap>
+        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <el-tab-pane label="产品清单" name="product">
+            <BusinessProductForm
+              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
+              disabled
+              v-model="formData.totalProductPrice"
+              :formatter="erpPriceInputFormatter"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="整单折扣（%）" prop="discountPercent">
+            <el-input-number
+              v-model="formData.discountPercent"
+              placeholder="请输入整单折扣"
+              controls-position="right"
+              :min="0"
+              :precision="2"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <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>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import * as BusinessStatusApi from '@/api/crm/business/status'
+import * as CustomerApi from '@/api/crm/customer'
+import * as UserApi from '@/api/system/user'
+import { useUserStore } from '@/store/modules/user'
+import BusinessProductForm from './components/BusinessProductForm.vue'
+import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  customerId: undefined,
+  ownerUserId: undefined,
+  statusTypeId: undefined,
+  dealTime: undefined,
+  discountPercent: 0,
+  totalProductPrice: undefined,
+  totalPrice: undefined,
+  remark: undefined,
+  products: [],
+  contactId: undefined,
+  customerDefault: false
+})
+const formRules = reactive({
+  name: [{ required: true, message: '商机名称不能为空', trigger: 'blur' }],
+  customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }],
+  ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  statusTypeId: [{ required: true, message: '商机状态组不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const statusTypeList = ref([]) // 商机状态类型列表
+const customerList = ref([]) // 客户列表的数据
+
+/** 子表的表单 */
+const subTabsName = ref('product')
+const productFormRef = ref()
+
+/** 计算 discountPrice、totalPrice 价格 */
+watch(
+  () => formData.value,
+  (val) => {
+    if (!val) {
+      return
+    }
+    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 }
+)
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, customerId?: number, contactId?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await BusinessApi.getBusiness(id)
+    } finally {
+      formLoading.value = false
+    }
+  } else {
+    if (customerId) {
+      formData.value.customerId = customerId
+      formData.value.customerDefault = true // 默认客户的选择，不允许变
+    }
+    // 自动关联 contactId 联系人编号
+    if (contactId) {
+      formData.value.contactId = contactId
+    }
+  }
+  // 获得客户列表
+  customerList.value = await CustomerApi.getCustomerSimpleList()
+  // 加载商机状态类型列表
+  statusTypeList.value = await BusinessStatusApi.getBusinessStatusTypeSimpleList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 默认新建时选中自己
+  if (formType.value === 'create') {
+    formData.value.ownerUserId = useUserStore().getUser.id
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  await productFormRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as BusinessApi.BusinessVO
+    if (formType.value === 'create') {
+      await BusinessApi.createBusiness(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await BusinessApi.updateBusiness(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    customerId: undefined,
+    ownerUserId: undefined,
+    statusTypeId: undefined,
+    dealTime: undefined,
+    discountPercent: 0,
+    totalProductPrice: undefined,
+    totalPrice: undefined,
+    remark: undefined,
+    products: [],
+    contactId: undefined,
+    customerDefault: false
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/crm/business/BusinessUpdateStatusForm.vue

@@ -0,0 +1,108 @@
+<template>
+  <Dialog title="变更商机状态" v-model="dialogVisible" width="400">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="商机阶段" prop="status">
+        <el-select v-model="formData.status" placeholder="请选择商机阶段" class="w-1/1">
+          <el-option
+            v-for="item in statusList"
+            :key="item.id"
+            :label="item.name + '(赢单率：' + item.percent + '%)'"
+            :value="item.id"
+          />
+          <el-option
+            v-for="item in BusinessStatusApi.DEFAULT_STATUSES"
+            :key="item.endStatus"
+            :label="item.name + '(赢单率：' + item.percent + '%)'"
+            :value="-item.endStatus"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import * as BusinessStatusApi from '@/api/crm/business/status'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: undefined,
+  statusId: undefined,
+  endStatus: undefined,
+  status: undefined
+})
+const formRules = reactive({
+  status: [{ required: true, message: '商机阶段不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const statusList = ref([]) // 商机状态列表
+
+/** 打开弹窗 */
+const open = async (business: BusinessApi.BusinessVO) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value = {
+    id: business.id,
+    statusId: business.statusId,
+    endStatus: business.endStatus,
+    status: business.endStatus != null ? -business.endStatus : business.statusId
+  }
+  // 加载状态列表
+  formLoading.value = true
+  try {
+    statusList.value = await BusinessStatusApi.getBusinessStatusSimpleList(business.statusTypeId)
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await BusinessApi.updateBusinessStatus({
+      id: formData.value.id,
+      statusId: formData.value.status > 0 ? formData.value.status : undefined,
+      endStatus: formData.value.status < 0 ? -formData.value.status : undefined
+    })
+    message.success('更新商机状态成功')
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    statusId: undefined,
+    endStatus: undefined,
+    status: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/crm/business/components/BusinessList.vue

@@ -0,0 +1,186 @@
+<template>
+  <!-- 操作栏 -->
+  <el-row justify="end">
+    <el-button @click="openForm">
+      <Icon class="mr-5px" icon="ep:opportunity" />
+      创建商机
+    </el-button>
+    <el-button
+      @click="openBusinessModal"
+      v-hasPermi="['crm:contact:create-business']"
+      v-if="queryParams.contactId"
+    >
+      <Icon class="mr-5px" icon="ep:circle-plus" />关联
+    </el-button>
+    <el-button
+      @click="deleteContactBusinessList"
+      v-hasPermi="['crm:contact:delete-business']"
+      v-if="queryParams.contactId"
+    >
+      <Icon class="mr-5px" icon="ep:remove" />解除关联
+    </el-button>
+  </el-row>
+
+  <!-- 列表 -->
+  <ContentWrap class="mt-10px">
+    <el-table
+      ref="businessRef"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+    >
+      <el-table-column type="selection" width="55" v-if="queryParams.contactId" />
+      <el-table-column label="商机名称" fixed="left" align="center" prop="name">
+        <template #default="scope">
+          <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
+            {{ scope.row.name }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="商机金额"
+        align="center"
+        prop="price"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column label="客户名称" align="center" prop="customerName" />
+      <el-table-column label="商机组" align="center" prop="statusTypeName" />
+      <el-table-column label="商机阶段" align="center" prop="statusName" />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加 -->
+  <BusinessForm ref="formRef" @success="getList" />
+  <!-- 关联商机选择弹框 -->
+  <BusinessListModal
+    ref="businessModalRef"
+    :customer-id="props.customerId"
+    @success="createContactBusinessList"
+  />
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import * as ContactApi from '@/api/crm/contact'
+import BusinessForm from './../BusinessForm.vue'
+import { BizTypeEnum } from '@/api/crm/permission'
+import BusinessListModal from './BusinessListModal.vue'
+import { erpPriceTableColumnFormatter } from '@/utils'
+
+const message = useMessage() // 消息
+
+defineOptions({ name: 'CrmBusinessList' })
+const props = defineProps<{
+  bizType: number // 业务类型
+  bizId: number // 业务编号
+  customerId?: number // 关联联系人与商机时，需要传入 customerId 进行筛选
+  contactId?: number // 特殊：联系人编号；在【联系人】详情中，可以传递联系人编号，默认新建的商机关联到该联系人
+}>()
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  customerId: undefined as unknown, // 允许 undefined + number
+  contactId: undefined as unknown // 允许 undefined + number
+})
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 置空参数
+    queryParams.customerId = undefined
+    queryParams.contactId = undefined
+    // 执行查询
+    let data = { list: [], total: 0 }
+    switch (props.bizType) {
+      case BizTypeEnum.CRM_CUSTOMER:
+        queryParams.customerId = props.bizId
+        data = await BusinessApi.getBusinessPageByCustomer(queryParams)
+        break
+      case BizTypeEnum.CRM_CONTACT:
+        queryParams.contactId = props.bizId
+        data = await BusinessApi.getBusinessPageByContact(queryParams)
+        break
+      default:
+        return
+    }
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 添加操作 */
+const formRef = ref()
+const openForm = () => {
+  formRef.value.open('create', null, props.customerId, props.contactId)
+}
+
+/** 打开联系人详情 */
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'CrmBusinessDetail', params: { id } })
+}
+
+/** 打开联系人与商机的关联弹窗 */
+const businessModalRef = ref()
+const openBusinessModal = () => {
+  businessModalRef.value.open()
+}
+const createContactBusinessList = async (businessIds: number[]) => {
+  const data = {
+    contactId: props.bizId,
+    businessIds: businessIds
+  } as ContactApi.ContactBusinessReqVO
+  businessRef.value.getSelectionRows().forEach((row: BusinessApi.BusinessVO) => {
+    data.businessIds.push(row.id)
+  })
+  await ContactApi.createContactBusinessList(data)
+  // 刷新列表
+  message.success('关联商机成功')
+  handleQuery()
+}
+
+/** 解除联系人与商机的关联 */
+const businessRef = ref()
+const deleteContactBusinessList = async () => {
+  const data = {
+    contactId: props.bizId,
+    businessIds: businessRef.value.getSelectionRows().map((row: BusinessApi.BusinessVO) => row.id)
+  } as ContactApi.ContactBusinessReqVO
+  if (data.businessIds.length === 0) {
+    return message.error('未选择商机')
+  }
+  await ContactApi.deleteContactBusinessList(data)
+  // 刷新列表
+  message.success('取关商机成功')
+  handleQuery()
+}
+
+/** 监听打开的 bizId + bizType，从而加载最新的列表 */
+watch(
+  () => [props.bizId, props.bizType],
+  () => {
+    handleQuery()
+  },
+  { immediate: true, deep: true }
+)
+</script>

src/views/crm/business/components/BusinessListModal.vue

@@ -0,0 +1,156 @@
+<template>
+  <Dialog title="关联商机" v-model="dialogVisible">
+    <!-- 搜索工作栏 -->
+    <ContentWrap>
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="商机名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入商机名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button type="primary" @click="openForm()" v-hasPermi="['crm:business:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新增
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap class="mt-10px">
+      <el-table
+        v-loading="loading"
+        ref="businessRef"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="商机名称" fixed="left" align="center" prop="name">
+          <template #default="scope">
+            <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
+              {{ scope.row.name }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="商机金额"
+          align="center"
+          prop="totalPrice"
+          :formatter="erpPriceTableColumnFormatter"
+        />
+        <el-table-column label="客户名称" align="center" prop="customerName" />
+        <el-table-column label="商机组" align="center" prop="statusTypeName" />
+        <el-table-column label="商机阶段" align="center" prop="statusName" />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+
+    <!-- 表单弹窗：添加 -->
+    <BusinessForm ref="formRef" @success="getList" />
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import BusinessForm from '../BusinessForm.vue'
+import { erpPriceTableColumnFormatter } from '@/utils'
+
+const message = useMessage() // 消息弹窗
+const props = defineProps<{
+  customerId: number
+}>()
+defineOptions({ name: 'BusinessListModal' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryFormRef = ref() // 搜索的表单
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  customerId: props.customerId
+})
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  queryParams.customerId = props.customerId // 解决 props.customerId 没更新到 queryParams 上的问题
+  await getList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BusinessApi.getBusinessPageByCustomer(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加操作 */
+const formRef = ref()
+const openForm = () => {
+  formRef.value.open('create')
+}
+
+/** 关联商机提交 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const businessRef = ref()
+const submitForm = async () => {
+  const businessIds = businessRef.value
+    .getSelectionRows()
+    .map((row: BusinessApi.BusinessVO) => row.id)
+  if (businessIds.length === 0) {
+    return message.error('未选择商机')
+  }
+  dialogVisible.value = false
+  emit('success', businessIds, businessRef.value.getSelectionRows())
+}
+
+/** 打开商机详情 */
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'CrmBusinessDetail', params: { id } })
+}
+</script>

src/views/crm/business/components/BusinessProductForm.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    v-loading="formLoading"
+    label-width="0px"
+    :inline-message="true"
+    :disabled="disabled"
+  >
+    <el-table :data="formData" class="-mt-10px">
+      <el-table-column label="序号" type="index" align="center" width="60" />
+      <el-table-column label="产品名称" min-width="180">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
+            <el-select
+              v-model="row.productId"
+              clearable
+              filterable
+              @change="onChangeProduct($event, row)"
+              placeholder="请选择产品"
+            >
+              <el-option
+                v-for="item in productList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="条码" min-width="150">
+        <template #default="{ row }">
+          <el-form-item class="mb-0px!">
+            <el-input disabled v-model="row.productNo" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="单位" min-width="80">
+        <template #default="{ row }">
+          <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.productUnit" />
+        </template>
+      </el-table-column>
+      <el-table-column label="价格（元）" min-width="120">
+        <template #default="{ row }">
+          <el-form-item class="mb-0px!">
+            <el-input disabled v-model="row.productPrice" :formatter="erpPriceInputFormatter" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="售价（元）" fixed="right" min-width="140">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.businessPrice`" class="mb-0px!">
+            <el-input-number
+              v-model="row.businessPrice"
+              controls-position="right"
+              :min="0.001"
+              :precision="2"
+              class="!w-100%"
+            />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="数量" prop="count" fixed="right" min-width="120">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.count`" :rules="formRules.count" class="mb-0px!">
+            <el-input-number
+              v-model="row.count"
+              controls-position="right"
+              :min="0.001"
+              :precision="3"
+              class="!w-100%"
+            />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="合计" prop="totalPrice" fixed="right" min-width="140">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!">
+            <el-input disabled v-model="row.totalPrice" :formatter="erpPriceInputFormatter" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="60">
+        <template #default="{ $index }">
+          <el-button @click="handleDelete($index)" link>—</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-form>
+  <el-row justify="center" class="mt-3" v-if="!disabled">
+    <el-button @click="handleAdd" round>+ 添加产品</el-button>
+  </el-row>
+</template>
+<script setup lang="ts">
+import * as ProductApi from '@/api/crm/product'
+import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
+import { DICT_TYPE } from '@/utils/dict'
+
+const props = defineProps<{
+  products: undefined
+  disabled: false
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
+const formRules = reactive({
+  productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
+  businessPrice: [{ required: true, message: '合同价格不能为空', trigger: 'blur' }],
+  count: [{ required: true, message: '产品数量不能为空', trigger: 'blur' }]
+})
+const formRef = ref([]) // 表单 Ref
+const productList = ref<ProductApi.ProductVO[]>([]) // 产品列表
+
+/** 初始化设置产品项 */
+watch(
+  () => props.products,
+  async (val) => {
+    formData.value = val
+  },
+  { immediate: true }
+)
+
+/** 监听合同产品变化，计算合同产品总价 */
+watch(
+  () => formData.value,
+  (val) => {
+    if (!val || val.length === 0) {
+      return
+    }
+    // 循环处理
+    val.forEach((item) => {
+      if (item.businessPrice != null && item.count != null) {
+        item.totalPrice = erpPriceMultiply(item.businessPrice, item.count)
+      } else {
+        item.totalPrice = undefined
+      }
+    })
+  },
+  { deep: true }
+)
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  const row = {
+    id: undefined,
+    productId: undefined,
+    productUnit: undefined, // 产品单位
+    productNo: undefined, // 产品条码
+    productPrice: undefined, // 产品价格
+    businessPrice: undefined,
+    count: 1
+  }
+  formData.value.push(row)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (index: number) => {
+  formData.value.splice(index, 1)
+}
+
+/** 处理产品变更 */
+const onChangeProduct = (productId, row) => {
+  const product = productList.value.find((item) => item.id === productId)
+  if (product) {
+    row.productUnit = product.unit
+    row.productNo = product.no
+    row.productPrice = product.price
+    row.businessPrice = product.price
+  }
+}
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+defineExpose({ validate })
+
+/** 初始化 */
+onMounted(async () => {
+  productList.value = await ProductApi.getProductSimpleList()
+})
+</script>

src/views/crm/business/detail/BusinessDetailsHeader.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="flex items-start justify-between">
+      <div>
+        <el-col>
+          <el-row>
+            <span class="text-xl font-bold">{{ business.name }}</span>
+          </el-row>
+        </el-col>
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="vertical">
+      <el-descriptions-item label="客户名称">{{ business.customerName }}</el-descriptions-item>
+      <el-descriptions-item label="商机金额（元）">
+        {{ erpPriceInputFormatter(business.totalPrice) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="商机组">{{ business.statusTypeName }}</el-descriptions-item>
+      <el-descriptions-item label="负责人">{{ business.ownerUserName }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(business.createTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as BusinessApi from '@/api/crm/business'
+import { formatDate } from '@/utils/formatTime'
+import { erpPriceInputFormatter } from '@/utils'
+
+const { business } = defineProps<{ business: BusinessApi.BusinessVO }>()
+</script>

src/views/crm/business/detail/BusinessDetailsInfo.vue

@@ -0,0 +1,61 @@
+<template>
+  <ContentWrap>
+    <el-collapse v-model="activeNames">
+      <el-collapse-item name="basicInfo">
+        <template #title>
+          <span class="text-base font-bold">基本信息</span>
+        </template>
+        <el-descriptions :column="4">
+          <el-descriptions-item label="商机姓名">{{ business.name }}</el-descriptions-item>
+          <el-descriptions-item label="客户名称">{{ business.customerName }}</el-descriptions-item>
+          <el-descriptions-item label="商机金额（元）">
+            {{ erpPriceInputFormatter(business.totalPrice) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="预计成交日期">
+            {{ formatDate(business.dealTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="下次联系时间">
+            {{ formatDate(business.contactNextTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="商机状态组">
+            {{ business.statusTypeName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="商机阶段">{{ business.statusName }}</el-descriptions-item>
+          <el-descriptions-item label="备注">{{ business.remark }}</el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+      <el-collapse-item name="systemInfo">
+        <template #title>
+          <span class="text-base font-bold">系统信息</span>
+        </template>
+        <el-descriptions :column="4">
+          <el-descriptions-item label="负责人">{{ business.ownerUserName }}</el-descriptions-item>
+          <el-descriptions-item label="最后跟进时间">
+            {{ formatDate(business.contactLastTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="">&nbsp;</el-descriptions-item>
+          <el-descriptions-item label="">&nbsp;</el-descriptions-item>
+          <el-descriptions-item label="创建人">{{ business.creatorName }}</el-descriptions-item>
+          <el-descriptions-item label="创建时间">
+            {{ formatDate(business.createTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间">
+            {{ formatDate(business.updateTime) }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+    </el-collapse>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import { formatDate } from '@/utils/formatTime'
+import { erpPriceInputFormatter } from '@/utils'
+
+const { business } = defineProps<{
+  business: BusinessApi.BusinessVO
+}>()
+
+// 展示的折叠面板
+const activeNames = ref(['basicInfo', 'systemInfo'])
+</script>

src/views/crm/business/detail/BusinessProductList.vue

@@ -0,0 +1,66 @@
+<template>
+  <ContentWrap>
+    <el-table :data="business.products" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column
+        align="center"
+        label="产品名称"
+        fixed="left"
+        prop="productName"
+        min-width="160"
+      >
+        <template #default="scope">
+          {{ scope.row.productName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="产品条码" align="center" prop="productNo" min-width="120" />
+      <el-table-column align="center" label="产品单位" prop="productUnit" min-width="160">
+        <template #default="{ row }">
+          <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.productUnit" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="产品价格（元）"
+        align="center"
+        prop="productPrice"
+        min-width="140"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column
+        label="商机价格（元）"
+        align="center"
+        prop="businessPrice"
+        min-width="140"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column
+        align="center"
+        label="数量"
+        prop="count"
+        min-width="100px"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column
+        label="合计金额（元）"
+        align="center"
+        prop="totalPrice"
+        min-width="140"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+    </el-table>
+    <el-row class="mt-10px" justify="end">
+      <el-col :span="3"> 整单折扣：{{ erpPriceInputFormatter(business.discountPercent) }}% </el-col>
+      <el-col :span="4">
+        产品总金额：{{ erpPriceInputFormatter(business.totalProductPrice) }} 元
+      </el-col>
+    </el-row>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import { erpPriceInputFormatter, erpPriceTableColumnFormatter } from '@/utils'
+import { DICT_TYPE } from '@/utils/dict'
+
+const { business } = defineProps<{
+  business: BusinessApi.BusinessVO
+}>()
+</script>

src/views/crm/business/detail/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <BusinessDetailsHeader v-loading="loading" :business="business">
+    <el-button v-if="permissionListRef?.validateWrite" @click="openForm('update', business.id)">
+      编辑
+    </el-button>
+    <el-button
+      v-if="permissionListRef?.validateWrite"
+      :disabled="business.endStatus"
+      type="success"
+      @click="openStatusForm()"
+    >
+      变更商机状态
+    </el-button>
+    <el-button v-if="permissionListRef?.validateOwnerUser" type="primary" @click="transfer">
+      转移
+    </el-button>
+  </BusinessDetailsHeader>
+  <el-col>
+    <el-tabs>
+      <el-tab-pane label="跟进记录">
+        <FollowUpList :biz-id="businessId" :biz-type="BizTypeEnum.CRM_BUSINESS" />
+      </el-tab-pane>
+      <el-tab-pane label="详细资料">
+        <BusinessDetailsInfo :business="business" />
+      </el-tab-pane>
+      <el-tab-pane label="联系人" lazy>
+        <ContactList
+          :biz-id="business.id!"
+          :biz-type="BizTypeEnum.CRM_BUSINESS"
+          :business-id="business.id"
+          :customer-id="business.customerId"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="产品">
+        <BusinessProductList :business="business" />
+      </el-tab-pane>
+      <el-tab-pane label="合同" lazy>
+        <ContractList :biz-id="business.id!" :biz-type="BizTypeEnum.CRM_BUSINESS" />
+      </el-tab-pane>
+      <el-tab-pane label="操作日志">
+        <OperateLogV2 :log-list="logList" />
+      </el-tab-pane>
+      <el-tab-pane label="团队成员">
+        <PermissionList
+          ref="permissionListRef"
+          :biz-id="business.id!"
+          :biz-type="BizTypeEnum.CRM_BUSINESS"
+          :show-action="true"
+          @quit-team="close"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </el-col>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <BusinessForm ref="formRef" @success="getBusiness" />
+  <BusinessUpdateStatusForm ref="statusFormRef" @success="getBusiness" />
+  <CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_BUSINESS" @success="close" />
+</template>
+<script lang="ts" setup>
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as BusinessApi from '@/api/crm/business'
+import BusinessDetailsHeader from './BusinessDetailsHeader.vue'
+import BusinessDetailsInfo from './BusinessDetailsInfo.vue'
+import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
+import { BizTypeEnum } from '@/api/crm/permission'
+import { OperateLogVO } from '@/api/system/operatelog'
+import { getOperateLogPage } from '@/api/crm/operateLog'
+import BusinessForm from '@/views/crm/business/BusinessForm.vue'
+import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
+import FollowUpList from '@/views/crm/followup/index.vue'
+import ContactList from '@/views/crm/contact/components/ContactList.vue'
+import BusinessUpdateStatusForm from '@/views/crm/business/BusinessUpdateStatusForm.vue'
+import ContractList from '@/views/crm/contract/components/ContractList.vue'
+import BusinessProductList from '@/views/crm/business/detail/BusinessProductList.vue'
+
+defineOptions({ name: 'CrmBusinessDetail' })
+
+const message = useMessage()
+
+const businessId = ref(0) // 线索编号
+const loading = ref(true) // 加载中
+const business = ref<BusinessApi.BusinessVO>({} as BusinessApi.BusinessVO) // 商机详情
+const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
+
+/** 获取详情 */
+const getBusiness = async () => {
+  loading.value = true
+  try {
+    business.value = await BusinessApi.getBusiness(businessId.value)
+    await getOperateLog(businessId.value)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 编辑 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 变更商机状态 */
+const statusFormRef = ref()
+const openStatusForm = () => {
+  statusFormRef.value.open(business.value)
+}
+
+/** 联系人转移 */
+const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 联系人转移表单 ref
+const transfer = () => {
+  transferFormRef.value?.open(business.value.id)
+}
+
+/** 获取操作日志 */
+const logList = ref<OperateLogVO[]>([]) // 操作日志列表
+const getOperateLog = async (contactId: number) => {
+  if (!contactId) {
+    return
+  }
+  const data = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_BUSINESS,
+    bizId: contactId
+  })
+  logList.value = data.list
+}
+
+/** 关闭窗口 */
+const { delView } = useTagsViewStore() // 视图操作
+const { currentRoute } = useRouter() // 路由
+const close = () => {
+  delView(unref(currentRoute))
+}
+
+/** 初始化 */
+const { params } = useRoute()
+onMounted(async () => {
+  if (!params.id) {
+    message.warning('参数错误，商机不能为空！')
+    close()
+    return
+  }
+  businessId.value = params.id as unknown as number
+  await getBusiness()
+})
+</script>

src/views/crm/business/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <doc-alert title="【商机】商机管理、商机状态" url="https://doc.iocoder.cn/crm/business/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="商机名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入商机名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button v-hasPermi="['crm:business:create']" type="primary" @click="openForm('create')">
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['crm:business:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-tabs v-model="activeName" @tab-click="handleTabClick">
+      <el-tab-pane label="我负责的" name="1" />
+      <el-tab-pane label="我参与的" name="2" />
+      <el-tab-pane label="下属负责的" name="3" />
+    </el-tabs>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" fixed="left" label="商机名称" prop="name" width="160">
+        <template #default="scope">
+          <el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
+            {{ scope.row.name }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="left" label="客户名称" prop="customerName" width="120">
+        <template #default="scope">
+          <el-link
+            :underline="false"
+            type="primary"
+            @click="openCustomerDetail(scope.row.customerId)"
+          >
+            {{ scope.row.customerName }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="erpPriceTableColumnFormatter"
+        align="center"
+        label="商机金额（元）"
+        prop="totalPrice"
+        width="140"
+      />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="预计成交日期"
+        prop="dealTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="备注" prop="remark" width="200" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="下次联系时间"
+        prop="contactNextTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="负责人" prop="ownerUserName" width="100px" />
+      <el-table-column align="center" label="所属部门" prop="ownerUserDeptName" width="100px" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="最后跟进时间"
+        prop="contactLastTime"
+        width="180px"
+      />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="更新时间"
+        prop="updateTime"
+        width="180px"
+      />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="创建人" prop="creatorName" width="100px" />
+      <el-table-column
+        align="center"
+        fixed="right"
+        label="商机状态组"
+        prop="statusTypeName"
+        width="140"
+      />
+      <el-table-column
+        align="center"
+        fixed="right"
+        label="商机阶段"
+        prop="statusName"
+        width="120"
+      />
+      <el-table-column align="center" fixed="right" label="操作" width="130px">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['crm:business:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['crm:business:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <BusinessForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as BusinessApi from '@/api/crm/business'
+import BusinessForm from './BusinessForm.vue'
+import { erpPriceTableColumnFormatter } from '@/utils'
+import { TabsPaneContext } from 'element-plus'
+
+defineOptions({ name: 'CrmBusiness' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  sceneType: '1', // 默认和 activeName 相等
+  name: null
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const activeName = ref('1') // 列表 tab
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BusinessApi.getBusinessPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** tab 切换 */
+const handleTabClick = (tab: TabsPaneContext) => {
+  queryParams.sceneType = tab.paneName
+  handleQuery()
+}
+
+/** 打开客户详情 */
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'CrmBusinessDetail', params: { id } })
+}
+
+/** 打开客户详情 */
+const openCustomerDetail = (id: number) => {
+  push({ name: 'CrmCustomerDetail', params: { id } })
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await BusinessApi.deleteBusiness(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await BusinessApi.exportBusiness(queryParams)
+    download.excel(data, '商机.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/crm/business/status/BusinessStatusForm.vue

@@ -0,0 +1,194 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="状态组名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入状态组名" />
+      </el-form-item>
+      <el-form-item label="应用部门" prop="deptIds">
+        <template #label>
+          <Tooltip message="不选择部门时，默认全公司生效" title="应用部门" />
+        </template>
+        <el-tree
+          ref="treeRef"
+          :data="deptList"
+          :props="defaultProps"
+          :check-strictly="!checkStrictly"
+          node-key="id"
+          placeholder="请选择归属部门"
+          show-checkbox
+        />
+      </el-form-item>
+      <el-form-item label="阶段设置" prop="statuses">
+        <el-table
+          border
+          style="width: 100%"
+          :data="formData.statuses.concat(BusinessStatusApi.DEFAULT_STATUSES)"
+        >
+          <el-table-column align="center" label="阶段" width="70">
+            <template #default="scope">
+              <el-text v-if="!scope.row.defaultStatus">阶段 {{ scope.$index + 1 }}</el-text>
+              <el-text v-else>结束</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="阶段名称" width="160" prop="name">
+            <template #default="{ row }">
+              <el-input v-if="!row.endStatus" v-model="row.name" placeholder="请输入状态名称" />
+              <el-text v-else>{{ row.name }}</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column width="140" align="center" label="赢单率（%）" prop="percent">
+            <template #default="{ row }">
+              <el-input-number
+                v-if="!row.endStatus"
+                v-model="row.percent"
+                placeholder="请输入赢单率"
+                controls-position="right"
+                :min="0"
+                :max="100"
+                :precision="2"
+                class="!w-1/1"
+              />
+              <el-text v-else>{{ row.percent }}</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="110" align="center">
+            <template #default="scope">
+              <el-button
+                v-if="!scope.row.endStatus"
+                link
+                type="primary"
+                @click="addStatus(scope.$index)"
+              >
+                添加
+              </el-button>
+              <el-button
+                v-if="!scope.row.endStatus"
+                link
+                type="danger"
+                @click="deleteStatusArea(scope.$index)"
+                :disabled="formData.statuses.length <= 1"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as BusinessStatusApi from '@/api/crm/business/status'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的组：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: '',
+  deptIds: [],
+  statuses: []
+})
+const formRules = reactive({
+  name: [{ required: true, message: '状态组名不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref() // 菜单树组件 Ref
+const checkStrictly = ref(true) // 是否严格模式，即父子不关联
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await BusinessStatusApi.getBusinessStatus(id)
+      treeRef.value.setCheckedKeys(formData.value.deptIds)
+      if (formData.value.statuses.length == 0) {
+        addStatus()
+      }
+    } finally {
+      formLoading.value = false
+    }
+  } else {
+    addStatus()
+  }
+  // 加载部门树
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as BusinessStatusApi.BusinessStatusTypeVO
+    data.deptIds = treeRef.value.getCheckedKeys(false)
+    if (formType.value === 'create') {
+      await BusinessStatusApi.createBusinessStatus(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await BusinessStatusApi.updateBusinessStatus(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  checkStrictly.value = true
+  formData.value = {
+    id: undefined,
+    name: '',
+    deptIds: [],
+    statuses: []
+  }
+  treeRef.value?.setCheckedNodes([])
+  formRef.value?.resetFields()
+}
+
+/** 添加状态 */
+const addStatus = () => {
+  const data = formData.value
+  data.statuses.push({
+    name: '',
+    percent: undefined
+  })
+}
+
+/** 删除状态 */
+const deleteStatusArea = (index: number) => {
+  const data = formData.value
+  data.statuses.splice(index, 1)
+}
+</script>

src/views/crm/business/status/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <doc-alert title="【商机】商机管理、商机状态" url="https://doc.iocoder.cn/crm/business/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['crm:business-status:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="状态组名" align="center" prop="name" />
+      <el-table-column label="应用部门" align="center" prop="deptNames">
+        <template #default="scope">
+          <span v-if="scope.row?.deptNames?.length > 0">
+            {{ scope.row.deptNames.join(' ') }}
+          </span>
+          <span v-else>全公司</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人" align="center" prop="creator" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['crm:business-status:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['crm:business-status:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <BusinessStatusForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as BusinessStatusApi from '@/api/crm/business/status'
+import BusinessStatusForm from './BusinessStatusForm.vue'
+import { deleteBusinessStatus } from '@/api/crm/business/status'
+
+defineOptions({ name: 'CrmBusinessStatus' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BusinessStatusApi.getBusinessStatusPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await BusinessStatusApi.deleteBusinessStatus(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>