From cce1fadc33ea9731990d8f15b290681e9d5407d0 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 24 Mar 2024 22:22:09 +0800
Subject: [PATCH 1/2] =?UTF-8?q?CRM:=20=E6=96=B0=E5=A2=9E=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E8=A1=8C=E4=B8=9A=E3=80=81=E6=9D=A5=E6=BA=90=E3=80=81=E7=BA=A7?=
 =?UTF-8?q?=E5=88=AB=E7=BB=9F=E8=AE=A1=E3=80=81=E5=8C=BA=E5=9F=9F=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/statistics/customer.ts            |  58 ++++++
 src/api/mall/statistics/member.ts             |   2 +-
 .../customer/components/CustomerAddress.vue   | 150 +++++++++++++++
 .../customer/components/CustomerIndustry.vue  | 171 ++++++++++++++++++
 .../customer/components/CustomerLevel.vue     | 171 ++++++++++++++++++
 .../customer/components/CustomerSource.vue    | 171 ++++++++++++++++++
 src/views/crm/statistics/customer/index.vue   |  82 +++++++--
 7 files changed, 785 insertions(+), 20 deletions(-)
 create mode 100644 src/views/crm/statistics/customer/components/CustomerAddress.vue
 create mode 100644 src/views/crm/statistics/customer/components/CustomerIndustry.vue
 create mode 100644 src/views/crm/statistics/customer/components/CustomerLevel.vue
 create mode 100644 src/views/crm/statistics/customer/components/CustomerSource.vue

diff --git a/src/api/crm/statistics/customer.ts b/src/api/crm/statistics/customer.ts
index 4358db77..aeb3b3a2 100644
--- a/src/api/crm/statistics/customer.ts
+++ b/src/api/crm/statistics/customer.ts
@@ -49,6 +49,36 @@ export interface CrmStatisticsCustomerDealCycleByDateRespVO {
   customerDealCycle: number
 }
 
+export interface CrmStatisticCustomerBaseRespVO {
+  customerCount: number
+  dealCount: number
+  dealPortion: number
+}
+
+export interface CrmStatisticCustomerIndustryRespVO extends CrmStatisticCustomerBaseRespVO {
+  industryId: number
+  industryName: string
+  industryPortion: number
+}
+
+export interface CrmStatisticCustomerSourceRespVO extends CrmStatisticCustomerBaseRespVO {
+  source: number
+  sourceName: string
+  sourcePortion: number
+}
+
+export interface CrmStatisticCustomerLevelRespVO extends CrmStatisticCustomerBaseRespVO {
+  level: number
+  levelName: string
+  levelPortion: number
+}
+
+export interface CrmStatisticCustomerAreaRespVO extends CrmStatisticCustomerBaseRespVO {
+  areaId: number
+  areaName: string
+  areaPortion: number
+}
+
 export interface CrmStatisticsCustomerDealCycleByUserRespVO {
   ownerUserName: string
   customerDealCycle: number
@@ -112,5 +142,33 @@ export const StatisticsCustomerApi = {
       url: '/crm/statistics-customer/get-customer-deal-cycle-by-user',
       params
     })
+  },
+  // 6.1 获取客户行业统计数据
+  getCustomerIndustry: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-industry-summary',
+      params
+    })
+  },
+  // 6.1 获取客户来源统计数据
+  getCustomerSource: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-source-summary',
+      params
+    })
+  },
+  // 6.1 获取客户行业统计数据
+  getCustomerLevel: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-level-summary',
+      params
+    })
+  },
+  // 6.1 获取客户行业统计数据
+  getCustomerArea: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-area-summary',
+      params
+    })
   }
 }
diff --git a/src/api/mall/statistics/member.ts b/src/api/mall/statistics/member.ts
index 92af031e..d9accf92 100644
--- a/src/api/mall/statistics/member.ts
+++ b/src/api/mall/statistics/member.ts
@@ -5,7 +5,7 @@ import { formatDate } from '@/utils/formatTime'
 
 /** 会员分析 Request VO */
 export interface MemberAnalyseReqVO {
-  times: [dayjs.ConfigType, dayjs.ConfigType]
+  times: dayjs.ConfigType[]
 }
 
 /** 会员分析 Response VO */
diff --git a/src/views/crm/statistics/customer/components/CustomerAddress.vue b/src/views/crm/statistics/customer/components/CustomerAddress.vue
new file mode 100644
index 00000000..c35638a6
--- /dev/null
+++ b/src/views/crm/statistics/customer/components/CustomerAddress.vue
@@ -0,0 +1,150 @@
+<!-- 客户城市分布 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption" />
+        </el-skeleton>
+      </el-col>
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption2" />
+        </el-skeleton>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import { EChartsOption } from 'echarts'
+import china from '@/assets/map/json/china.json'
+import echarts from '@/plugins/echarts'
+import {
+  CrmStatisticCustomerAreaRespVO,
+  StatisticsCustomerApi
+} from '@/api/crm/statistics/customer'
+
+defineOptions({ name: 'CustomerAddress' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+// 注册地图
+echarts?.registerMap('china', china as any)
+
+const loading = ref(false) // 加载中
+const areaStatisticsList = ref<CrmStatisticCustomerAreaRespVO[]>([]) // 列表的数据
+
+/** 地图配置 */
+const echartsOption = reactive<EChartsOption>({
+  title: {
+    text: '全部客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    showDelay: 0,
+    transitionDuration: 0.2
+  },
+  visualMap: {
+    text: ['高', '低'],
+    realtime: false,
+    calculable: true,
+    top: 'middle',
+    inRange: {
+      color: ['#fff', '#3b82f6']
+    }
+  },
+  series: [
+    {
+      name: '客户地域分布',
+      type: 'map',
+      map: 'china',
+      roam: false,
+      selectedMode: false,
+      data: []
+    }
+  ]
+}) as EChartsOption
+
+/** 地图配置 */
+const echartsOption2 = reactive<EChartsOption>({
+  title: {
+    text: '成交客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    showDelay: 0,
+    transitionDuration: 0.2
+  },
+  visualMap: {
+    text: ['高', '低'],
+    realtime: false,
+    calculable: true,
+    top: 'middle',
+    inRange: {
+      color: ['#fff', '#3b82f6']
+    }
+  },
+  series: [
+    {
+      name: '客户地域分布',
+      type: 'map',
+      map: 'china',
+      roam: false,
+      selectedMode: false,
+      data: []
+    }
+  ]
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const areaList = await StatisticsCustomerApi.getCustomerArea(props.queryParams)
+  areaStatisticsList.value = areaList.map((item: CrmStatisticCustomerAreaRespVO) => {
+    return {
+      ...item,
+      areaName: item.areaName
+        .replace('维吾尔自治区', '')
+        .replace('壮族自治区', '')
+        .replace('回族自治区', '')
+        .replace('自治区', '')
+        .replace('省', '')
+    }
+  })
+  builderLeftMap()
+  builderRightMap()
+  loading.value = false
+}
+defineExpose({ loadData })
+
+const builderLeftMap = () => {
+  let min = 0
+  let max = 0
+  echartsOption.series![0].data = areaStatisticsList.value.map((item) => {
+    min = Math.min(min, item.customerCount || 0)
+    max = Math.max(max, item.customerCount || 0)
+    return { ...item, name: item.areaName, value: item.customerCount || 0 }
+  })
+  echartsOption.visualMap!['min'] = min
+  echartsOption.visualMap!['max'] = max
+}
+
+const builderRightMap = () => {
+  let min = 0
+  let max = 0
+  echartsOption2.series![0].data = areaStatisticsList.value.map((item) => {
+    min = Math.min(min, item.dealCount || 0)
+    max = Math.max(max, item.dealCount || 0)
+    return { ...item, name: item.areaName, value: item.dealCount || 0 }
+  })
+  echartsOption2.visualMap!['min'] = min
+  echartsOption2.visualMap!['max'] = max
+}
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>
diff --git a/src/views/crm/statistics/customer/components/CustomerIndustry.vue b/src/views/crm/statistics/customer/components/CustomerIndustry.vue
new file mode 100644
index 00000000..d505a41b
--- /dev/null
+++ b/src/views/crm/statistics/customer/components/CustomerIndustry.vue
@@ -0,0 +1,171 @@
+<!-- 客户行业分析 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption" />
+        </el-skeleton>
+      </el-col>
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption2" />
+        </el-skeleton>
+      </el-col>
+    </el-row>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card class="mt-16px" shadow="never">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="序号" type="index" width="80" />
+      <el-table-column align="center" label="客户行业" min-width="200" prop="industryName" />
+      <el-table-column align="center" label="客户个数" min-width="200" prop="customerCount" />
+      <el-table-column align="center" label="成交个数" min-width="200" prop="dealCount" />
+      <el-table-column align="center" label="行业占比(%)" min-width="200" prop="industryPortion" />
+      <el-table-column align="center" label="成交占比(%)" min-width="200" prop="dealPortion" />
+    </el-table>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import {
+  CrmStatisticCustomerIndustryRespVO,
+  StatisticsCustomerApi
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+
+defineOptions({ name: 'CustomerIndustry' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticCustomerIndustryRespVO[]>([]) // 列表的数据
+
+/** 饼图配置 */
+const echartsOption = reactive<EChartsOption>({
+  title: {
+    text: '全部客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: '全部客户' } // 保存为图片
+    }
+  },
+  series: [
+    {
+      name: '全部客户',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}) as EChartsOption
+/** 饼图配置 */
+const echartsOption2 = reactive<EChartsOption>({
+  title: {
+    text: '成交客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: '成交客户' } // 保存为图片
+    }
+  },
+  series: [
+    {
+      name: '成交客户',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const industryList = await StatisticsCustomerApi.getCustomerIndustry(props.queryParams)
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = industryList.map((r: CrmStatisticCustomerIndustryRespVO) => {
+      return {
+        name: r.industryName,
+        value: r.customerCount
+      }
+    })
+  }
+  // 2.2 更新 Echarts2 数据
+  if (echartsOption2.series && echartsOption2.series[0] && echartsOption2.series[0]['data']) {
+    echartsOption2.series[0]['data'] = industryList.map((r: CrmStatisticCustomerIndustryRespVO) => {
+      return {
+        name: r.industryName,
+        value: r.dealCount
+      }
+    })
+  }
+  list.value = industryList
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>
diff --git a/src/views/crm/statistics/customer/components/CustomerLevel.vue b/src/views/crm/statistics/customer/components/CustomerLevel.vue
new file mode 100644
index 00000000..6afd5647
--- /dev/null
+++ b/src/views/crm/statistics/customer/components/CustomerLevel.vue
@@ -0,0 +1,171 @@
+<!-- 客户来源分析 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption" />
+        </el-skeleton>
+      </el-col>
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption2" />
+        </el-skeleton>
+      </el-col>
+    </el-row>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card class="mt-16px" shadow="never">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="序号" type="index" width="80" />
+      <el-table-column align="center" label="客户来源" min-width="200" prop="levelName" />
+      <el-table-column align="center" label="客户个数" min-width="200" prop="customerCount" />
+      <el-table-column align="center" label="成交个数" min-width="200" prop="dealCount" />
+      <el-table-column align="center" label="级别占比(%)" min-width="200" prop="levelPortion" />
+      <el-table-column align="center" label="成交占比(%)" min-width="200" prop="dealPortion" />
+    </el-table>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import {
+  CrmStatisticCustomerLevelRespVO,
+  StatisticsCustomerApi
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+
+defineOptions({ name: 'CustomerSource' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticCustomerLevelRespVO[]>([]) // 列表的数据
+
+/** 饼图配置 */
+const echartsOption = reactive<EChartsOption>({
+  title: {
+    text: '全部客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: '全部客户' } // 保存为图片
+    }
+  },
+  series: [
+    {
+      name: '全部客户',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}) as EChartsOption
+/** 饼图配置 */
+const echartsOption2 = reactive<EChartsOption>({
+  title: {
+    text: '成交客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: '成交客户' } // 保存为图片
+    }
+  },
+  series: [
+    {
+      name: '成交客户',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const levelList = await StatisticsCustomerApi.getCustomerLevel(props.queryParams)
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = levelList.map((r: CrmStatisticCustomerLevelRespVO) => {
+      return {
+        name: r.levelName,
+        value: r.customerCount
+      }
+    })
+  }
+  // 2.2 更新 Echarts2 数据
+  if (echartsOption2.series && echartsOption2.series[0] && echartsOption2.series[0]['data']) {
+    echartsOption2.series[0]['data'] = levelList.map((r: CrmStatisticCustomerLevelRespVO) => {
+      return {
+        name: r.levelName,
+        value: r.dealCount
+      }
+    })
+  }
+  list.value = levelList
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>
diff --git a/src/views/crm/statistics/customer/components/CustomerSource.vue b/src/views/crm/statistics/customer/components/CustomerSource.vue
new file mode 100644
index 00000000..11a5c68f
--- /dev/null
+++ b/src/views/crm/statistics/customer/components/CustomerSource.vue
@@ -0,0 +1,171 @@
+<!-- 客户来源分析 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption" />
+        </el-skeleton>
+      </el-col>
+      <el-col :span="12">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="500" :options="echartsOption2" />
+        </el-skeleton>
+      </el-col>
+    </el-row>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card class="mt-16px" shadow="never">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="序号" type="index" width="80" />
+      <el-table-column align="center" label="客户来源" min-width="200" prop="sourceName" />
+      <el-table-column align="center" label="客户个数" min-width="200" prop="customerCount" />
+      <el-table-column align="center" label="成交个数" min-width="200" prop="dealCount" />
+      <el-table-column align="center" label="来源占比(%)" min-width="200" prop="sourcePortion" />
+      <el-table-column align="center" label="成交占比(%)" min-width="200" prop="dealPortion" />
+    </el-table>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import {
+  CrmStatisticCustomerSourceRespVO,
+  StatisticsCustomerApi
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+
+defineOptions({ name: 'CustomerSource' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticCustomerSourceRespVO[]>([]) // 列表的数据
+
+/** 饼图配置 */
+const echartsOption = reactive<EChartsOption>({
+  title: {
+    text: '全部客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: '全部客户' } // 保存为图片
+    }
+  },
+  series: [
+    {
+      name: '全部客户',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}) as EChartsOption
+/** 饼图配置 */
+const echartsOption2 = reactive<EChartsOption>({
+  title: {
+    text: '成交客户',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: '成交客户' } // 保存为图片
+    }
+  },
+  series: [
+    {
+      name: '成交客户',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const sourceList = await StatisticsCustomerApi.getCustomerSource(props.queryParams)
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = sourceList.map((r: CrmStatisticCustomerSourceRespVO) => {
+      return {
+        name: r.sourceName,
+        value: r.customerCount
+      }
+    })
+  }
+  // 2.2 更新 Echarts2 数据
+  if (echartsOption2.series && echartsOption2.series[0] && echartsOption2.series[0]['data']) {
+    echartsOption2.series[0]['data'] = sourceList.map((r: CrmStatisticCustomerSourceRespVO) => {
+      return {
+        name: r.sourceName,
+        value: r.dealCount
+      }
+    })
+  }
+  list.value = sourceList
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>
diff --git a/src/views/crm/statistics/customer/index.vue b/src/views/crm/statistics/customer/index.vue
index 9d804e31..37a9e999 100644
--- a/src/views/crm/statistics/customer/index.vue
+++ b/src/views/crm/statistics/customer/index.vue
@@ -3,49 +3,55 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="时间范围" prop="orderDate">
         <el-date-picker
           v-model="queryParams.times"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           :shortcuts="defaultShortcuts"
           class="!w-240px"
           end-placeholder="结束日期"
           start-placeholder="开始日期"
           type="daterange"
           value-format="YYYY-MM-DD HH:mm:ss"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
         />
       </el-form-item>
       <el-form-item label="归属部门" prop="deptId">
         <el-tree-select
           v-model="queryParams.deptId"
-          class="!w-240px"
           :data="deptList"
           :props="defaultProps"
           check-strictly
+          class="!w-240px"
           node-key="id"
           placeholder="请选择归属部门"
           @change="queryParams.userId = undefined"
         />
       </el-form-item>
       <el-form-item label="员工" prop="userId">
-        <el-select v-model="queryParams.userId" class="!w-240px" placeholder="员工" clearable>
+        <el-select v-model="queryParams.userId" class="!w-240px" clearable placeholder="员工">
           <el-option
             v-for="(user, index) in userListByDeptId"
+            :key="index"
             :label="user.nickname"
             :value="user.id"
-            :key="index"
           />
         </el-select>
       </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 @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-form-item>
     </el-form>
   </ContentWrap>
@@ -54,24 +60,40 @@
   <el-col>
     <el-tabs v-model="activeTab">
       <!-- 客户总量分析 -->
-      <el-tab-pane label="客户总量分析" name="customerSummary" lazy>
-        <CustomerSummary :query-params="queryParams" ref="customerSummaryRef" />
+      <el-tab-pane label="客户总量分析" lazy name="customerSummary">
+        <CustomerSummary ref="customerSummaryRef" :query-params="queryParams" />
       </el-tab-pane>
       <!-- 客户跟进次数分析 -->
-      <el-tab-pane label="客户跟进次数分析" name="followupSummary" lazy>
-        <CustomerFollowupSummary :query-params="queryParams" ref="followupSummaryRef" />
+      <el-tab-pane label="客户跟进次数分析" lazy name="followupSummary">
+        <CustomerFollowupSummary ref="followupSummaryRef" :query-params="queryParams" />
       </el-tab-pane>
       <!-- 客户跟进方式分析 -->
-      <el-tab-pane label="客户跟进方式分析" name="followupType" lazy>
-        <CustomerFollowupType :query-params="queryParams" ref="followupTypeRef" />
+      <el-tab-pane label="客户跟进方式分析" lazy name="followupType">
+        <CustomerFollowupType ref="followupTypeRef" :query-params="queryParams" />
       </el-tab-pane>
       <!-- 客户转化率分析 -->
-      <el-tab-pane label="客户转化率分析" name="conversionStat" lazy>
-        <CustomerConversionStat :query-params="queryParams" ref="conversionStatRef" />
+      <el-tab-pane label="客户转化率分析" lazy name="conversionStat">
+        <CustomerConversionStat ref="conversionStatRef" :query-params="queryParams" />
       </el-tab-pane>
       <!-- 成交周期分析 -->
-      <el-tab-pane label="成交周期分析" name="dealCycle" lazy>
-        <CustomerDealCycle :query-params="queryParams" ref="dealCycleRef" />
+      <el-tab-pane label="成交周期分析" lazy name="dealCycle">
+        <CustomerDealCycle ref="dealCycleRef" :query-params="queryParams" />
+      </el-tab-pane>
+      <!-- 城市分布分析 -->
+      <el-tab-pane label="城市分布分析" lazy name="addressRef">
+        <CustomerAddress ref="addressRef" :query-params="queryParams" />
+      </el-tab-pane>
+      <!-- 客户级别分析 -->
+      <el-tab-pane label="客户级别分析" lazy name="levelRef">
+        <CustomerLevel ref="levelRef" :query-params="queryParams" />
+      </el-tab-pane>
+      <!-- 客户来源分析 -->
+      <el-tab-pane label="客户来源分析" lazy name="sourceRef">
+        <CustomerSource ref="sourceRef" :query-params="queryParams" />
+      </el-tab-pane>
+      <!-- 客户行业分析 -->
+      <el-tab-pane label="客户行业分析" lazy name="industryRef">
+        <CustomerIndustry ref="industryRef" :query-params="queryParams" />
       </el-tab-pane>
     </el-tabs>
   </el-col>
@@ -88,6 +110,10 @@ import CustomerFollowupSummary from './components/CustomerFollowupSummary.vue'
 import CustomerFollowupType from './components/CustomerFollowupType.vue'
 import CustomerConversionStat from './components/CustomerConversionStat.vue'
 import CustomerDealCycle from './components/CustomerDealCycle.vue'
+import CustomerAddress from './components/CustomerAddress.vue'
+import CustomerIndustry from './components/CustomerIndustry.vue'
+import CustomerSource from './components/CustomerSource.vue'
+import CustomerLevel from './components/CustomerLevel.vue'
 
 defineOptions({ name: 'CrmStatisticsCustomer' })
 
@@ -125,7 +151,13 @@ const conversionStatRef = ref()
 // 缺 crm_owner_record 表
 // 6.成交周期分析
 const dealCycleRef = ref()
-
+const addressRef = ref()
+// 客户级别
+const levelRef = ref()
+// 客户来源
+const sourceRef = ref()
+// 客户行业
+const industryRef = ref()
 /** 搜索按钮操作 */
 const handleQuery = () => {
   switch (activeTab.value) {
@@ -144,6 +176,18 @@ const handleQuery = () => {
     case 'dealCycle':
       dealCycleRef.value?.loadData?.()
       break
+    case 'addressRef':
+      addressRef.value?.loadData?.()
+      break
+    case 'levelRef':
+      levelRef.value?.loadData?.()
+      break
+    case 'sourceRef':
+      sourceRef.value?.loadData?.()
+      break
+    case 'industryRef':
+      industryRef.value?.loadData?.()
+      break
   }
 }
 

From 3820710c561240bfdbdd1884dea5aa7dc0b30e96 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 26 Mar 2024 10:59:03 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BA=8C=E6=AC=A1=E5=B0=81=E8=A3=85=20form?=
 =?UTF-8?q?-create=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=87=8D=E6=96=B0=E5=B0=81=E8=A3=85=E7=9A=84?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E6=96=87=E4=BB=B6=E4=B8=8A=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormCreate/index.ts            |   3 +
 .../FormCreate/src/MyFormCreate.vue           |  54 ++++++++++
 src/components/UploadFile/src/UploadFile.vue  |  10 +-
 src/components/UploadFile/src/UploadImg.vue   |  11 +-
 src/components/UploadFile/src/UploadImgs.vue  |   3 +-
 src/utils/formCreate.ts                       |   2 +-
 src/views/bpm/definition/index.vue            |  48 ++++-----
 src/views/bpm/form/index.vue                  |   2 +-
 src/views/bpm/model/index.vue                 | 102 ++++++++++--------
 .../bpm/processInstance/create/index.vue      |  22 ++--
 .../bpm/processInstance/detail/index.vue      |  10 +-
 src/views/infra/build/index.vue               |   9 +-
 12 files changed, 172 insertions(+), 104 deletions(-)
 create mode 100644 src/components/FormCreate/index.ts
 create mode 100644 src/components/FormCreate/src/MyFormCreate.vue

diff --git a/src/components/FormCreate/index.ts b/src/components/FormCreate/index.ts
new file mode 100644
index 00000000..df750822
--- /dev/null
+++ b/src/components/FormCreate/index.ts
@@ -0,0 +1,3 @@
+import MyFormCreate from './src/MyFormCreate.vue'
+
+export { MyFormCreate }
diff --git a/src/components/FormCreate/src/MyFormCreate.vue b/src/components/FormCreate/src/MyFormCreate.vue
new file mode 100644
index 00000000..e72144b6
--- /dev/null
+++ b/src/components/FormCreate/src/MyFormCreate.vue
@@ -0,0 +1,54 @@
+<template>
+  <form-create v-bind="attrs">
+    <!-- 保障 form-create 的原始插槽 -->
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData || {}"></slot>
+    </template>
+    <!--  使用项目重新封装的文件上传组件实现文件上载  -->
+    <template #type-upload="scope">
+      <!--      {{ logC(scope) }}-->
+      <template v-if="scope.prop.props.uploadType === 'file'">
+        <!-- TODO puhui999: 考虑是否使用属性透传直接把整个 scope.prop.props 传递给组件 -->
+        <UploadFile
+          :disabled="scope.prop.props.disabled"
+          :limit="scope.prop.props.limit"
+          :modelValue="scope.model.value || scope.prop.value"
+          @update:modelValue="(val) => setValue(scope, val)"
+        />
+      </template>
+      <template v-if="scope.prop.props.uploadType === 'image' && scope.prop.props.limit === 1">
+        <UploadImg
+          :disabled="scope.prop.props.disabled"
+          :modelValue="scope.model.value || scope.prop.value"
+          @update:modelValue="(val) => setValue(scope, val)"
+        />
+      </template>
+      <template v-if="scope.prop.props.uploadType === 'image' && scope.prop.props.limit > 1">
+        <UploadImgs
+          :disabled="scope.prop.props.disabled"
+          :limit="scope.prop.props.limit"
+          :modelValue="scope.model.value || scope.prop.value"
+          @update:modelValue="(val) => setValue(scope, val)"
+        />
+      </template>
+    </template>
+  </form-create>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'MyFormCreate' })
+const attrs = useAttrs()
+const slots = useSlots()
+
+// 测试使用，查看组件 scope 值
+// const logC = (s) => {
+//   console.log(s)
+// }
+
+// 设置表单值
+const setValue = (scope: any, value: any) => {
+  const obj = {}
+  obj[scope.prop.field] = value
+  scope.api.setValue(obj)
+}
+</script>
diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index c91f977a..71f944ed 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -6,7 +6,9 @@
       :action="uploadUrl"
       :auto-upload="autoUpload"
       :before-upload="beforeUpload"
+      :disabled="disabled"
       :drag="drag"
+      :http-request="httpRequest"
       :limit="props.limit"
       :multiple="props.limit > 1"
       :on-error="excelUploadError"
@@ -15,15 +17,14 @@
       :on-remove="handleRemove"
       :on-success="handleFileSuccess"
       :show-file-list="true"
-      :http-request="httpRequest"
       class="upload-file-uploader"
       name="file"
     >
-      <el-button type="primary">
+      <el-button v-if="!disabled" type="primary">
         <Icon icon="ep:upload-filled" />
         选取文件
       </el-button>
-      <template v-if="isShowTip" #tip>
+      <template v-if="isShowTip && !disabled" #tip>
         <div style="font-size: 8px">
           大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
         </div>
@@ -54,7 +55,8 @@ const props = defineProps({
   limit: propTypes.number.def(5), // 数量限制
   autoUpload: propTypes.bool.def(true), // 自动上传
   drag: propTypes.bool.def(false), // 拖拽上传
-  isShowTip: propTypes.bool.def(true) // 是否显示提示
+  isShowTip: propTypes.bool.def(true), // 是否显示提示
+  disabled: propTypes.bool.def(false) // 是否禁用上传组件 ==> 非必传（默认为 false）
 })
 
 // ========== 上传相关 ==========
diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue
index 34566dda..ac0c162d 100644
--- a/src/components/UploadFile/src/UploadImg.vue
+++ b/src/components/UploadFile/src/UploadImg.vue
@@ -6,17 +6,18 @@
       :action="uploadUrl"
       :before-upload="beforeUpload"
       :class="['upload', drag ? 'no-border' : '']"
+      :disabled="disabled"
       :drag="drag"
+      :http-request="httpRequest"
       :multiple="false"
       :on-error="uploadError"
       :on-success="uploadSuccess"
       :show-file-list="false"
-      :http-request="httpRequest"
     >
       <template v-if="modelValue">
         <img :src="modelValue" class="upload-image" />
         <div class="upload-handle" @click.stop>
-          <div class="handle-icon" @click="editImg" v-if="!disabled">
+          <div v-if="!disabled" class="handle-icon" @click="editImg">
             <Icon icon="ep:edit" />
             <span v-if="showBtnText">{{ t('action.edit') }}</span>
           </div>
@@ -77,10 +78,8 @@ const props = defineProps({
   height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
   borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
-  // 是否显示删除按钮
-  showDelete: propTypes.bool.def(true),
-  // 是否显示按钮文字
-  showBtnText: propTypes.bool.def(true)
+  showDelete: propTypes.bool.def(true), // 是否显示删除按钮
+  showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
 })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue
index bd19ebbe..85da64c0 100644
--- a/src/components/UploadFile/src/UploadImgs.vue
+++ b/src/components/UploadFile/src/UploadImgs.vue
@@ -6,13 +6,14 @@
       :action="uploadUrl"
       :before-upload="beforeUpload"
       :class="['upload', drag ? 'no-border' : '']"
+      :disabled="disabled"
       :drag="drag"
+      :http-request="httpRequest"
       :limit="limit"
       :multiple="true"
       :on-error="uploadError"
       :on-exceed="handleExceed"
       :on-success="uploadSuccess"
-      :http-request="httpRequest"
       list-type="picture-card"
     >
       <div class="upload-empty">
diff --git a/src/utils/formCreate.ts b/src/utils/formCreate.ts
index 6d7dbc7f..c4899d7d 100644
--- a/src/utils/formCreate.ts
+++ b/src/utils/formCreate.ts
@@ -40,7 +40,7 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
 export const setConfAndFields2 = (
   detailPreview: object,
   conf: string,
-  fields: string,
+  fields: string[],
   value?: object
 ) => {
   // @ts-ignore
diff --git a/src/views/bpm/definition/index.vue b/src/views/bpm/definition/index.vue
index 31ed8413..dcaa10d3 100644
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@@ -3,67 +3,67 @@
 
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="定义编号" align="center" prop="id" width="400" />
-      <el-table-column label="流程名称" align="center" prop="name" width="200">
+      <el-table-column align="center" label="定义编号" prop="id" width="400" />
+      <el-table-column align="center" label="流程名称" prop="name" width="200">
         <template #default="scope">
-          <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
+          <el-button link type="primary" @click="handleBpmnDetail(scope.row)">
             <span>{{ scope.row.name }}</span>
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="定义分类" align="center" prop="category" width="100">
+      <el-table-column align="center" label="定义分类" prop="category" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
         </template>
       </el-table-column>
-      <el-table-column label="表单信息" align="center" prop="formType" width="200">
+      <el-table-column align="center" label="表单信息" prop="formType" width="200">
         <template #default="scope">
           <el-button
             v-if="scope.row.formType === 10"
-            type="primary"
             link
+            type="primary"
             @click="handleFormDetail(scope.row)"
           >
             <span>{{ scope.row.formName }}</span>
           </el-button>
-          <el-button v-else type="primary" link @click="handleFormDetail(scope.row)">
+          <el-button v-else link type="primary" @click="handleFormDetail(scope.row)">
             <span>{{ scope.row.formCustomCreatePath }}</span>
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
+      <el-table-column align="center" label="流程版本" prop="processDefinition.version" width="80">
         <template #default="scope">
           <el-tag v-if="scope.row">v{{ scope.row.version }}</el-tag>
-          <el-tag type="warning" v-else>未部署</el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="version" width="80">
+      <el-table-column align="center" label="状态" prop="version" width="80">
         <template #default="scope">
-          <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
-          <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
+          <el-tag v-if="scope.row.suspensionState === 1" type="success">激活</el-tag>
+          <el-tag v-if="scope.row.suspensionState === 2" type="warning">挂起</el-tag>
         </template>
       </el-table-column>
       <el-table-column
-        label="部署时间"
+        :formatter="dateFormatter"
         align="center"
+        label="部署时间"
         prop="deploymentTime"
         width="180"
-        :formatter="dateFormatter"
       />
       <el-table-column
-        label="定义描述"
         align="center"
+        label="定义描述"
         prop="description"
-        width="300"
         show-overflow-tooltip
+        width="300"
       />
-      <el-table-column label="操作" align="center" width="150" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" width="150">
         <template #default="scope">
           <el-button
+            v-hasPermi="['bpm:task-assign-rule:query']"
             link
             type="primary"
             @click="handleAssignRule(scope.row)"
-            v-hasPermi="['bpm:task-assign-rule:query']"
           >
             分配规则
           </el-button>
@@ -72,26 +72,26 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
 
   <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  <Dialog v-model="formDetailVisible" title="表单详情" width="800">
+    <my-form-create :option="formDetailPreview.option" :rule="formDetailPreview.rule" />
   </Dialog>
 
   <!-- 弹窗：流程模型图的预览 -->
-  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
+  <Dialog v-model="bpmnDetailVisible" title="流程图" width="800">
     <MyProcessViewer
       key="designer"
       v-model="bpmnXML"
+      :prefix="bpmnControlForm.prefix"
       :value="bpmnXML as any"
       v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
     />
   </Dialog>
 </template>
diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index 4cf37777..e1bef7a5 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -88,7 +88,7 @@
 
   <!-- 表单详情的弹窗 -->
   <Dialog v-model="detailVisible" title="表单详情" width="800">
-    <form-create :option="detailData.option" :rule="detailData.rule" />
+    <my-form-create :option="detailData.option" :rule="detailData.rule" />
   </Dialog>
 </template>
 
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index c7318891..72e3f6b9 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -4,36 +4,36 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="流程标识" prop="key">
         <el-input
           v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
+          clearable
+          placeholder="请输入流程标识"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="流程名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
+          clearable
+          placeholder="请输入流程名称"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="流程分类" prop="category">
         <el-select
           v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择流程分类"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
@@ -44,18 +44,26 @@
         </el-select>
       </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"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
         </el-button>
-        <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
-          <Icon icon="ep:upload" class="mr-5px" /> 导入流程
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button
+          v-hasPermi="['bpm:model:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新建流程
+        </el-button>
+        <el-button v-hasPermi="['bpm:model:import']" plain type="success" @click="openImportForm">
+          <Icon class="mr-5px" icon="ep:upload" />
+          导入流程
         </el-button>
       </el-form-item>
     </el-form>
@@ -64,33 +72,33 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程标识" align="center" prop="key" width="200" />
-      <el-table-column label="流程名称" align="center" prop="name" width="200">
+      <el-table-column align="center" label="流程标识" prop="key" width="200" />
+      <el-table-column align="center" label="流程名称" prop="name" width="200">
         <template #default="scope">
-          <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
+          <el-button link type="primary" @click="handleBpmnDetail(scope.row)">
             <span>{{ scope.row.name }}</span>
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="category" width="100">
+      <el-table-column align="center" label="流程分类" prop="category" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
         </template>
       </el-table-column>
-      <el-table-column label="表单信息" align="center" prop="formType" width="200">
+      <el-table-column align="center" label="表单信息" prop="formType" width="200">
         <template #default="scope">
           <el-button
             v-if="scope.row.formType === 10"
-            type="primary"
             link
+            type="primary"
             @click="handleFormDetail(scope.row)"
           >
             <span>{{ scope.row.formName }}</span>
           </el-button>
           <el-button
             v-else-if="scope.row.formType === 20"
-            type="primary"
             link
+            type="primary"
             @click="handleFormDetail(scope.row)"
           >
             <span>{{ scope.row.formCustomCreatePath }}</span>
@@ -99,16 +107,16 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
         align="center"
+        label="创建时间"
         prop="createTime"
         width="180"
-        :formatter="dateFormatter"
       />
-      <el-table-column label="最新部署的流程定义" align="center">
+      <el-table-column align="center" label="最新部署的流程定义">
         <el-table-column
-          label="流程版本"
           align="center"
+          label="流程版本"
           prop="processDefinition.version"
           width="100"
         >
@@ -120,8 +128,8 @@
           </template>
         </el-table-column>
         <el-table-column
-          label="激活状态"
           align="center"
+          label="激活状态"
           prop="processDefinition.version"
           width="85"
         >
@@ -135,7 +143,7 @@
             />
           </template>
         </el-table-column>
-        <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
+        <el-table-column align="center" label="部署时间" prop="deploymentTime" width="180">
           <template #default="scope">
             <span v-if="scope.row.processDefinition">
               {{ formatDate(scope.row.processDefinition.deploymentTime) }}
@@ -143,53 +151,53 @@
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="240" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" width="240">
         <template #default="scope">
           <el-button
+            v-hasPermi="['bpm:model:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
           >
             修改流程
           </el-button>
           <el-button
+            v-hasPermi="['bpm:model:update']"
             link
             type="primary"
             @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
           >
             设计流程
           </el-button>
           <el-button
+            v-hasPermi="['bpm:task-assign-rule:query']"
             link
             type="primary"
             @click="handleAssignRule(scope.row)"
-            v-hasPermi="['bpm:task-assign-rule:query']"
           >
             分配规则
           </el-button>
           <el-button
+            v-hasPermi="['bpm:model:deploy']"
             link
             type="primary"
             @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
           >
             发布流程
           </el-button>
           <el-button
+            v-hasPermi="['bpm:process-definition:query']"
             link
             type="primary"
-            v-hasPermi="['bpm:process-definition:query']"
             @click="handleDefinitionList(scope.row)"
           >
             流程定义
           </el-button>
           <el-button
+            v-hasPermi="['bpm:model:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['bpm:model:delete']"
           >
             删除
           </el-button>
@@ -198,9 +206,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -212,18 +220,18 @@
   <ModelImportForm ref="importFormRef" @success="getList" />
 
   <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  <Dialog v-model="formDetailVisible" title="表单详情" width="800">
+    <my-form-create :option="formDetailPreview.option" :rule="formDetailPreview.rule" />
   </Dialog>
 
   <!-- 弹窗：流程模型图的预览 -->
-  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
+  <Dialog v-model="bpmnDetailVisible" title="流程图" width="800">
     <MyProcessViewer
       key="designer"
       v-model="bpmnXML"
+      :prefix="bpmnControlForm.prefix"
       :value="bpmnXML as any"
       v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
     />
   </Dialog>
 </template>
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index a10e0208..988004c4 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -2,22 +2,23 @@
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
   <ContentWrap v-if="!selectProcessInstance">
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" />
-      <el-table-column label="流程分类" align="center" prop="category">
+      <el-table-column align="center" label="流程名称" prop="name" />
+      <el-table-column align="center" label="流程分类" prop="category">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
         </template>
       </el-table-column>
-      <el-table-column label="流程版本" align="center" prop="version">
+      <el-table-column align="center" label="流程版本" prop="version">
         <template #default="scope">
           <el-tag>v{{ scope.row.version }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="流程描述" align="center" prop="description" />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="流程描述" prop="description" />
+      <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button link type="primary" @click="handleSelect(scope.row)">
-            <Icon icon="ep:plus" /> 选择
+            <Icon icon="ep:plus" />
+            选择
           </el-button>
         </template>
       </el-table-column>
@@ -30,14 +31,15 @@
       <div class="clearfix">
         <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
         <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined">
-          <Icon icon="ep:delete" /> 选择其它流程
+          <Icon icon="ep:delete" />
+          选择其它流程
         </el-button>
       </div>
-      <el-col :span="16" :offset="6" style="margin-top: 20px">
-        <form-create
-          :rule="detailForm.rule"
+      <el-col :offset="6" :span="16" style="margin-top: 20px">
+        <my-form-create
           v-model:api="fApi"
           :option="detailForm.option"
+          :rule="detailForm.rule"
           @submit="submitForm"
         />
       </el-col>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 074d1329..5b16a558 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -68,9 +68,9 @@
       </template>
       <!-- 情况一：流程表单 -->
       <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
-        <form-create
-          ref="fApi"
+        <my-form-create
           v-model="detailForm.value"
+          v-model:api="fApi"
           :option="detailForm.option"
           :rule="detailForm.rule"
         />
@@ -229,9 +229,9 @@ const getProcessInstance = async () => {
         data.formVariables
       )
       nextTick().then(() => {
-        fApi.value?.fapi?.btn.show(false)
-        fApi.value?.fapi?.resetBtn.show(false)
-        fApi.value?.fapi?.disabled(true)
+        fApi.value?.btn.show(false)
+        fApi.value?.resetBtn.show(false)
+        fApi.value?.disabled(true)
       })
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index 11bfc999..4f509986 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -23,7 +23,7 @@
       </el-button>
       <el-scrollbar height="580">
         <div>
-          <pre><code class="hljs" v-dompurify-html="highlightedCode(formData)"></code></pre>
+          <pre><code v-dompurify-html="highlightedCode(formData)" class="hljs"></code></pre>
         </div>
       </el-scrollbar>
     </div>
@@ -81,15 +81,14 @@ const makeTemplate = () => {
   const rule = designer.value.getRule()
   const opt = designer.value.getOption()
   return `<template>
-    <form-create
-      v-model="fapi"
+    <my-form-create
+      v-model:api="fApi"
       :rule="rule"
       :option="option"
       @submit="onSubmit"
-    ></form-create>
+    ></my-form-create>
   </template>
   <script setup lang=ts>
-    import formCreate from "@form-create/element-ui";
     const faps = ref(null)
     const rule = ref('')
     const option = ref('')