feat: crm clue

apps/web-antd/src/views/crm/clue/modules/detail-info.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { CrmClueApi } from '#/api/crm/clue';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
+
+defineOptions({ name: 'CrmClueDetailsInfo' });
+
+const { clue } = defineProps<{
+  clue: CrmClueApi.Clue; // 线索信息
+}>();
+
+const [BaseDescription] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+  data: clue,
+});
+
+const [SystemDescription] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useDetailSystemSchema(),
+  data: clue,
+});
+</script>
+
+<template>
+  <div class="p-4">
+    <BaseDescription />
+    <Divider />
+    <SystemDescription />
+  </div>
+</template>

apps/web-antd/src/views/crm/clue/modules/detail.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { CrmClueApi } from '#/api/crm/clue';
+
+import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { ArrowLeft } from '@vben/icons';
+
+import { Button, Card, Modal, Tabs } from 'ant-design-vue';
+
+import { getClue, transformClue } from '#/api/crm/clue';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+import ClueForm from './form.vue';
+import TransferForm from './transfer.vue';
+
+const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+
+const clueId = ref(0);
+
+const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue);
+const permissionListRef = ref(); // 团队成员列表 Ref
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ClueForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+/** 加载线索详情 */
+async function loadClueDetail() {
+  loading.value = true;
+  clueId.value = Number(route.params.id);
+  const data = await getClue(clueId.value);
+  clue.value = data;
+  loading.value = false;
+}
+
+/** 返回列表页 */
+function onBack() {
+  router.push('/crm/clue');
+}
+
+/** 编辑线索 */
+function onEdit() {
+  formModalApi.setData({ id: clueId }).open();
+}
+
+/** 转移线索 */
+function onTransfer() {
+  transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 转化为客户 */
+async function onTransform() {
+  try {
+    await Modal.confirm({
+      title: '提示',
+      content: '确定将该线索转化为客户吗？',
+    });
+    await transformClue(clueId.value);
+    Modal.success({
+      title: '成功',
+      content: '转化客户成功',
+    });
+    await loadClueDetail();
+  } catch {
+    // 用户取消操作
+  }
+}
+
+// 加载数据
+onMounted(async () => {
+  await loadClueDetail();
+});
+</script>
+
+<template>
+  <Page auto-content-height :title="clue?.name" :loading="loading">
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="onBack">
+          <ArrowLeft class="size-5" />
+          返回
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          type="primary"
+          @click="onEdit"
+          v-access:code="['crm:clue:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          type="primary"
+          @click="onTransfer"
+          v-access:code="['crm:clue:update']"
+        >
+          转移
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
+          type="primary"
+          @click="onTransform"
+          v-access:code="['crm:clue:update']"
+        >
+          转化为客户
+        </Button>
+      </div>
+    </template>
+    <Card>
+      <Description :data="clue" />
+    </Card>
+    <Card class="mt-4">
+      <Tabs>
+        <Tabs.TabPane tab="线索跟进" key="1">
+          <div>线索跟进</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="基本信息" key="2">
+          <ClueDetailsInfo :clue="clue" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="3">
+          <div>团队成员</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="4">
+          <div>操作日志</div>
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+
+    <FormModal @success="loadClueDetail" />
+    <TransferModal @success="loadClueDetail" />
+  </Page>
+</template>

apps/web-antd/src/views/crm/clue/modules/form.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { CrmClueApi } from '#/api/crm/clue';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createClue, getClue, updateClue } from '#/api/crm/clue';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmClueApi.Clue>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['线索'])
+    : $t('ui.actionTitle.create', ['线索']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmClueApi.Clue;
+    try {
+      await (formData.value?.id ? updateClue(data) : createClue(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmClueApi.Clue>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getClue(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-antd/src/views/crm/clue/modules/transfer.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { transferClue } from '#/api/crm/clue';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<{ id: number }>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'Select',
+      componentProps: {
+        api: 'getSimpleUserList',
+      },
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
+    try {
+      await transferClue(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id: number }>();
+    if (!data || !data.id) {
+      return;
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.transfer')" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>