diff --git a/.env.development b/.env.development
index cbb55fe5..57d32870 100644
--- a/.env.development
+++ b/.env.development
@@ -14,7 +14,7 @@ VITE_PUBLIC_PATH = /
 # Please note that no line breaks
 # VITE_PROXY = [["/basic-api","http://60.209.125.238"],["/upload","http://localhost:3300/upload"]]
 # VITE_PROXY=[["/api","http://60.209.125.238:3008"],["/stage-api","https://www.666cxf.com/stage-api"]]  # 开发 测试环境
-VITE_PROXY=[["/api","http://118.190.144.189:3008"],["/stage-api","https://www.666cxf.com/stage-api"]]  # 开发 测试环境
+VITE_PROXY=[["/api","http://60.209.125.238:3008"],["/stage-api","https://www.666cxf.com/stage-api"]]  # 开发 测试环境
 
 # Delete console
 VITE_DROP_CONSOLE = false
diff --git a/src/views/operation/seaexport/detail/modules/aiInfo.tsx b/src/views/operation/seaexport/detail/modules/aiInfo.tsx
new file mode 100644
index 00000000..18b9ee80
--- /dev/null
+++ b/src/views/operation/seaexport/detail/modules/aiInfo.tsx
@@ -0,0 +1,697 @@
+import { ref, unref } from 'vue'
+import { BasicColumn, FormSchema } from '/@/components/Table'
+import { getDictOption } from '/@/utils/dictUtil'
+// 下拉框数据接口
+import {
+    GetCarrierSelectList,
+    GetControllerClientList,
+    GetSupplierListByCode,
+} from '/@/api/common'
+import {
+    GetClientPortSelectList,
+    GetServiceSelectList,
+    GetVoynoSelectList,
+    GetVesselSelectList,
+    GetClientGoodsList,
+    GetCustomerServiceList,
+
+} from '/@/views/operation/seaexport/api/BookingLedger'
+// ai识别表单
+export const aiForm: FormSchema[] = [
+    {
+        label: '发货人',
+        field: 'shipperContent',
+        component: 'InputTextArea',
+        colProps: { span: 12 },
+    },
+    {
+        label: '收货人',
+        field: 'consigneeContent',
+        component: 'InputTextArea',
+        colProps: { span: 12 },
+    },
+    {
+        label: '通知人',
+        field: 'notifyPartyContent',
+        component: 'InputTextArea',
+        colProps: { span: 12 },
+    },
+    {
+        field: 'bookingRemark',
+        label: '订舱备注',
+        component: 'InputTextArea',
+        colProps: { span: 12 },
+    },
+    {
+      field: 'marks',
+      label: `唛头`,
+      component: 'InputTextArea',
+      colProps: {span: 12,},
+    },
+    {
+        field: 'goodsName',
+        label: '品名',
+        component: 'ApiSelect',
+        labelSlot: 'goodsName',
+        colProps: { span: 12 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetClientGoodsList,
+                labelField: 'pinYinCode',
+                valueField: 'pinYinCode',
+                showName: 'goodName',
+                immediate: false,
+                mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
+                resultField: 'data',
+                onChange: (v, obj) => {
+                    if (v && obj && obj.id) {
+                        setTimeout(() => {
+                            if (obj.goodName && obj.goodName.indexOf('(')) {
+                                formModel.goodsName = obj.goodName.split('(')[0]
+                            } else {
+                                formModel.goodsName = obj.goodName
+                            }
+                        }, 100)
+                        if (obj.hsCode) {
+                            formModel.hsCode = obj.hsCode
+                        }
+                    }
+                    if (!v && !obj?.id) {
+                        formModel.goodsId = null
+                        formModel.hsCode = null
+                    }
+                }
+            }
+        },
+    },
+    {
+        field: 'mblno',
+        label: '主提单号',
+        labelSlot: 'mblno',
+        component: 'Input',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                oninput: () => {
+                    formModel.mblno = formModel.mblno.replace(/[\u4e00-\u9fa5]/ig, '')
+                }
+            }
+        }
+    },
+    {
+        label: '',
+        field: 'vesselId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '船名',
+        field: 'vessel',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetVesselSelectList,
+                labelField: 'vesselName',
+                valueField: 'vesselName',
+                resultField: 'data',
+                immediate: false,
+                mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.vesselId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.vesselId = null
+                    }
+                },
+            }
+        },
+    },
+    {
+        label: '海关航次',
+        field: 'voyno',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: () => {
+            return {
+                api: GetVoynoSelectList,
+                labelField: 'voyNo',
+                valueField: 'voyNo',
+                resultField: 'data',
+                immediate: false,
+            }
+        },
+    },
+    {
+        label: '',
+        field: 'carrierId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '船公司',
+        field: 'carrier',
+        labelSlot: 'carrierId',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel, formActionType }) => {
+            return {
+                api: GetCarrierSelectList,
+                labelField: 'pinYinCode',
+                showName: 'description',
+                valueField: 'ediCode',
+                resultField: 'data',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.carrierId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.carrierId = ''
+                    }
+                },
+            }
+        },
+    },
+    {
+        field: 'service',
+        label: '运输条款',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetServiceSelectList,
+                allowClear: true,
+                showSearch: true,
+                labelField: 'cnName',
+                valueField: 'cnName',
+                resultField: 'data',
+                filterOption: (input: string, option: any) => {
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                },
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.serviceCode = obj.ediCode
+                    }
+                    if (!e && !obj) {
+                        formModel.serviceCode = null
+                    }
+                },
+            }
+        },
+    },
+    {
+        field: 'serviceCode',
+        label: '',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '',
+        field: 'customerId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '委托单位',
+        labelSlot: 'customerName',
+        field: 'customerName',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel, formActionType }) => {
+            return {
+                api: GetControllerClientList,
+                labelField: 'pinYinCode',
+                valueField: 'shortName',
+                showName: 'description',
+                resultField: 'data',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.customerId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.customerId = ''
+                    }
+                }
+            }
+        }
+    },
+    {
+        field: 'customerNum',
+        label: '客户编号',
+        component: 'Input',
+        required: false,
+        colProps: { span: 12 },
+    },
+    {
+        label: '',
+        field: 'goodsId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '',
+        field: 'ctnGoodsInfo',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '装货港',
+        field: 'loadPortCode',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel, formActionType }) => {
+            return {
+                api: GetClientPortSelectList,
+                resultField: 'data',
+                labelField: 'pinYinCode',
+                valueField: 'ediCode',
+                showName: 'ediCode',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.loadPortId = obj.id
+                        formModel.loadPort = obj.portName + ',' + obj.countryEnName
+                    }
+                    if (!e && !obj) {
+                        formModel.loadPortId = null
+                        formModel.loadPort = null
+                    }
+                }
+            }
+        }
+    },
+    {
+        label: '卸货港',
+        field: 'dischargePortCode',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel, formActionType }) => {
+            return {
+                api: GetClientPortSelectList,
+                resultField: 'data',
+                labelField: 'pinYinCode',
+                showName: 'ediCode',
+                valueField: 'ediCode',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.dischargePortId = obj.id
+                        formModel.dischargePort = obj.portName + ',' + obj.countryEnName
+                        // 带出交货地
+                        formModel.deliveryPlaceId = obj.id
+                        formModel.deliveryPlace = obj.portName + ',' + obj.countryEnName
+                        formModel.deliveryPlaceCode = e
+                    }
+                    if (!e && !obj) {
+                        formModel.dischargePortId = null
+                        formModel.dischargePort = null
+                    }
+                },
+            }
+        },
+    },
+    {
+        label: '交货地',
+        field: 'deliveryPlaceCode',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetClientPortSelectList,
+                resultField: 'data',
+                labelField: 'pinYinCode',
+                showName: 'ediCode',
+                valueField: 'ediCode',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.deliveryPlaceId = obj.id
+                        formModel.deliveryPlace = obj.portName + ',' + obj.countryEnName
+                    }
+                    if (!e && !obj) {
+                        formModel.deliveryPlaceId = null
+                        formModel.deliveryPlace = null
+                    }
+                },
+            }
+        },
+    },
+    {
+        label: '收货地',
+        field: 'receiptPlaceCode',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetClientPortSelectList,
+                resultField: 'data',
+                immediate: false,
+                labelField: 'pinYinCode',
+                valueField: 'ediCode',
+                showName: 'ediCode',
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.receiptPlace = obj.portName + ',' + obj.countryEnName
+                        formModel.receiptPlaceId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.receiptPlace = null
+                        formModel.receiptPlaceId = null
+                    }
+                },
+            }
+        },
+    },
+    {
+        label: '',
+        field: 'loadPort',
+        component: 'Input',
+        required: false,
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                oninput: () => {
+                    formModel.loadPort = formModel.loadPort.replace(/[\u4e00-\u9fa5]/ig, '')
+                }
+            }
+        }
+    },
+    {
+        label: '',
+        field: 'loadPortId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '',
+        field: 'dischargePort',
+        component: 'Input',
+        required: false,
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                oninput: () => {
+                    formModel.dischargePort = formModel.dischargePort.replace(/[\u4e00-\u9fa5]/ig, '')
+                }
+            }
+        }
+    },
+    {
+        label: '',
+        field: 'dischargePortId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '',
+        field: 'deliveryPlace',
+        component: 'Input',
+        required: false,
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                oninput: () => {
+                    formModel.deliveryPlace = formModel.deliveryPlace.replace(/[\u4e00-\u9fa5]/ig, '')
+                }
+            }
+        }
+    },
+    {
+        label: '',
+        field: 'deliveryPlaceId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '',
+        field: 'receiptPlace',
+        component: 'Input',
+        required: false,
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                oninput: () => {
+                    formModel.receiptPlace = formModel.receiptPlace.replace(/[\u4e00-\u9fa5]/ig, '')
+                }
+            }
+        }
+    },
+    {
+        label: '',
+        field: 'receiptPlaceId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        field: 'bookingNo',
+        label: '订舱编号',
+        labelSlot: 'bookingNo',
+        component: 'Input',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                oninput: () => {
+                    formModel.bookingNo = formModel.bookingNo.replace(/[\u4e00-\u9fa5]/ig, '')
+                }
+            }
+        }
+    },
+    {
+        field: 'etd',
+        label: '开船日期',
+        labelSlot: 'etd',
+        component: 'DatePicker',
+        colProps: { span: 6 },
+        componentProps: {
+            allowClear: true,
+            valueFormat: 'YYYY-MM-DD'
+        }
+    },
+    {
+        field: 'closingDate',
+        label: '截港时间',
+        component: 'DatePicker',
+        colProps: { span: 6 },
+        componentProps: {
+            showTime: true,
+            allowClear: true,
+            valueFormat: 'YYYY-MM-DD HH',
+        },
+    },
+    {
+        field: 'eta',
+        label: '预抵日期',
+        component: 'DatePicker',
+        colProps: { span: 6 },
+        componentProps: {
+            allowClear: true,
+            valueFormat: 'YYYY-MM-DD',
+        },
+    },
+    {
+        field: 'openPortDate',
+        label: '截VGM时间',
+        component: 'DatePicker',
+        colProps: { span: 6 },
+        componentProps: {
+            allowClear: true,
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm'
+        }
+    },
+    {
+        field: 'closeDocDate',
+        label: '截单时间',
+        component: 'DatePicker',
+        colProps: { span: 6 },
+        componentProps: {
+            showTime: true,
+            allowClear: true,
+            valueFormat: 'YYYY-MM-DD HH',
+        },
+    },
+    {
+        label: '签单地代码',
+        field: 'issuePlaceCode',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetClientPortSelectList,
+                resultField: 'data',
+                labelField: 'pinYinCode',
+                valueField: 'ediCode',
+                showName: 'ediCode',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.issuePlace = obj.portName
+                        formModel.issuePlaceId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.issuePlace = null
+                        formModel.issuePlaceId = null
+                    }
+                },
+            }
+        },
+    },
+    {
+        label: '签单地点',
+        field: 'issuePlace',
+        component: 'Input',
+        required: false,
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                oninput: () => {
+                    formModel.issuePlace = formModel.issuePlace.replace(/[\u4e00-\u9fa5]/ig, '')
+                }
+            }
+        }
+    },
+    {
+        label: '',
+        field: 'issuePlaceId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        field: 'serviceContractNo',
+        label: '服务合同号',
+        component: 'Input',
+        required: false,
+        dynamicDisabled: false,
+        colProps: { span: 6 },
+    },
+    {
+        label: '',
+        field: 'forwarderId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '订舱口',
+        field: 'forwarder',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetSupplierListByCode,
+                params: { code: 'booking' },
+                labelField: 'pinYinCode',
+                valueField: 'shortName',
+                showName: 'description',
+                resultField: 'data',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.forwarderId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.forwarderId = ''
+                    }
+                },
+            }
+        },
+    },
+    {
+        label: '',
+        field: 'shipAgencyId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '船代',
+        field: 'shipAgency',
+        component: 'ApiSelect',
+        labelSlot: 'shipAgencyId',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetSupplierListByCode,
+                params: { code: 'shipagency' },
+                labelField: 'pinYinCode',
+                showName: 'description',
+                valueField: 'shortName',
+                resultField: 'data',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.shipAgencyId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.shipAgencyId = ''
+                    }
+                },
+            }
+        },
+    },
+    {
+        label: '',
+        field: 'yardId',
+        component: 'Input',
+        show: false,
+    },
+    {
+        field: 'yard',
+        label: '场站',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetSupplierListByCode,
+                params: { code: 'yard' },
+                labelField: 'pinYinCode',
+                showName: 'description',
+                valueField: 'shortName',
+                resultField: 'data',
+                immediate: false,
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.yardId = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.yardId = ''
+                    }
+                }
+            }
+        }
+    },
+    {
+        field: 'customerService',
+        label: '',
+        component: 'Input',
+        show: false,
+    },
+    {
+        label: '客服',
+        field: 'customerServiceName',
+        component: 'ApiSelect',
+        colProps: { span: 6 },
+        componentProps: ({ formModel }) => {
+            return {
+                api: GetCustomerServiceList,
+                labelField: 'pinYinCode',
+                valueField: 'userName',
+                showName: 'userName',
+                allowClear: true,
+                showSearch: true,
+                immediate: false,
+                resultField: 'data',
+                onChange: (e, obj) => {
+                    if (e && obj) {
+                        formModel.customerService = obj.id
+                    }
+                    if (!e && !obj) {
+                        formModel.customerService = null
+                    }
+                }
+            }
+        }
+    }
+]
\ No newline at end of file
diff --git a/src/views/operation/seaexport/detail/modules/aiRecognition.vue b/src/views/operation/seaexport/detail/modules/aiRecognition.vue
index f017b4a2..a2c4355e 100644
--- a/src/views/operation/seaexport/detail/modules/aiRecognition.vue
+++ b/src/views/operation/seaexport/detail/modules/aiRecognition.vue
@@ -25,7 +25,11 @@
                             alt="" />
                     </hot-table>
                     <div class="footer">
-                        <a-button type="primary" @click="handleComplete">校验完成</a-button>
+                        <a-upload :file-list="fileList" accept=".pdf" :before-upload="beforeUpload" name="file"
+                            :customRequest="uploadFile">
+                            <a-button type="primary">重新识别</a-button>
+                        </a-upload>
+                        <a-button style="margin-left: 10px" type="primary" @click="handleComplete">校验完成</a-button>
                     </div>
                 </div>
             </div>
@@ -34,10 +38,10 @@
 </template>
 <script lang="ts" setup>
 import { ref, defineEmits, h, watch, nextTick } from 'vue'
-import { GetBookingAIResult, GetCtnSelectList } from '/@/views/operation/seaexport/api/BookingLedger'
+import { GetBookingAIResult, GetCtnSelectList,GetPackageSelectList } from '/@/views/operation/seaexport/api/BookingLedger'
 import { InboxOutlined } from '@ant-design/icons-vue';
 import { BasicForm, useForm } from '/@/components/Form/index'
-import { aiForm } from './baseInfo.tsx'
+import { aiForm } from './aiInfo.tsx'
 import { HotTable } from '@handsontable/vue3'
 import { AddMultiFiles } from '../../../../../components/File/api.js'
 import { useRouter, useRoute } from 'vue-router'
@@ -91,6 +95,7 @@ function uploadFile(file) {
     fileUrl.value = window.URL.createObjectURL(file.file)
     const formData = new FormData()
     formData.append('file', file.file)
+    resetFields()
     GetBookingAIResult(formData).then(res => {
         if (res.succeeded) {
             res.data.shipperContent = res.data.shipper
@@ -98,7 +103,7 @@ function uploadFile(file) {
             res.data.notifyPartyContent = res.data.notifyParty
             res.data.bookingRemark = res.data.remark
             setFieldsValue(res.data)
-            list.value = res.data.ctnInfo
+            list.value = res.data.ctnInfo ? res.data.ctnInfo : []
             hotmain.value.hotInstance.loadData(list.value)
         }
         uloading.value = false
@@ -129,14 +134,14 @@ const columns = [
     },
     {
         title: '件数',
-        width: 100,
+        width: 50,
         data: 'pkgs',
         type: 'numeric',
         format: '0',
     },
     {
         title: '箱量',
-        width: 80,
+        width: 70,
         data: 'ctnNum',
         type: 'numeric',
         format: '0',
@@ -149,15 +154,29 @@ const columns = [
         format: '0',
     },
     {
-        title: '尺码',
+        title: '包装',
         width: 100,
+        data: 'kindPkgsName',
+        type: 'dropdown',
+        // 下拉框数据，可以同步或者异步返回(异步需要process返回)
+        source: async (query, process) => {
+            const res = (await GetPackageSelectList({ queryKey: query }))?.data
+            const dict = res.map((res) => {
+                return res.packageName
+            })
+            process(dict)
+        },
+    },
+    {
+        title: '尺码',
+        width: 70,
         data: 'cbm',
         type: 'numeric',
         format: '0',
     },
     {
         title: '皮重',
-        width: 100,
+        width: 70,
         data: 'tareWeight',
         type: 'numeric',
         format: '0',
@@ -334,8 +353,10 @@ defineExpose({
     position: absolute; // 使按钮固定于可视窗口的底部
     bottom: -30px;
     width: 50%;
+    display: flex;
     height: 40px;
     background: rgba(255, 255, 255, 1);
+    justify-content: flex-end;
     box-shadow: 0px -3px 6px rgba(214, 214, 214, 1);
     padding-top: 10px;
     text-align: right;
@@ -346,19 +367,19 @@ defineExpose({
 :deep(.ant-drawer-body) {
     padding-bottom: 0px;
 }
-
 </style>
 <style lang='less'>
 .goods-table {
-  .handsontable {
-    .wtHider {
-      max-height: 240px!important;
-      min-height: 160px;
-    }
-    .htCheckboxRendererInput {
-      position: relative;
-      z-index: 999;
+    .handsontable {
+        .wtHider {
+            max-height: 240px !important;
+            min-height: 160px;
+        }
+
+        .htCheckboxRendererInput {
+            position: relative;
+            z-index: 999;
+        }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/operation/seaexport/detail/modules/baseInfo.tsx b/src/views/operation/seaexport/detail/modules/baseInfo.tsx
index e1334317..0bc7824c 100644
--- a/src/views/operation/seaexport/detail/modules/baseInfo.tsx
+++ b/src/views/operation/seaexport/detail/modules/baseInfo.tsx
@@ -3390,690 +3390,4 @@ export const returnCabinForm: FormSchema[] = [
       disTrans: true
     }
   }
-]
-
-// ai识别表单
-export const aiForm: FormSchema[] = [
-  {
-    label: '发货人',
-    field: 'shipperContent',
-    component: 'InputTextArea',
-    colProps: { span: 12 },
-  },
-  {
-    label: '收货人',
-    field: 'consigneeContent',
-    component: 'InputTextArea',
-    colProps: { span: 12 },
-  },
-  {
-    label: '通知人',
-    field: 'notifyPartyContent',
-    component: 'InputTextArea',
-    colProps: { span: 12 },
-  },
-  {
-    field: 'bookingRemark',
-    label: '订舱备注',
-    component: 'InputTextArea',
-    colProps: { span: 12 },
-  },
-  // {
-  //   field: 'marks',
-  //   label: `唛头`,
-  //   component: 'InputTextArea',
-  //   colProps: {span: 12,},
-  // },
-  // {
-  //   label: '货物描述',
-  //   field: 'description',
-  //   component: 'InputTextArea',
-  //   colProps: { span: 12 },
-  // },
-  {
-    field: 'mblno',
-    label: '主提单号',
-    labelSlot: 'mblno',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        oninput: () => {
-          formModel.mblno = formModel.mblno.replace(/[\u4e00-\u9fa5]/ig,'')
-        }
-      }
-    }
-  },
-  {
-    label: '',
-    field: 'vesselId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '船名',
-    field: 'vessel',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetVesselSelectList,
-        labelField: 'vesselName',
-        valueField: 'vesselName',
-        resultField: 'data',
-        immediate: false,
-        mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.vesselId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.vesselId = null
-          }
-        },
-      }
-    },
-  },
-  {
-    label: '海关航次',
-    field: 'voyno',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: () => {
-      return {
-        api: GetVoynoSelectList,
-        labelField: 'voyNo',
-        valueField: 'voyNo',
-        resultField: 'data',
-        immediate: false,
-      }
-    },
-  },
-  {
-    label: '',
-    field: 'carrierId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '船公司',
-    field: 'carrier',
-    labelSlot: 'carrierId',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel, formActionType }) => {
-      return {
-        api: GetCarrierSelectList,
-        labelField: 'pinYinCode',
-        showName: 'description',
-        valueField: 'ediCode',
-        resultField: 'data',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.carrierId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.carrierId = ''
-          }
-        },
-      }
-    },
-  },
-  {
-    field: 'service',
-    label: '运输条款',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetServiceSelectList,
-        allowClear: true,
-        showSearch: true,
-        labelField: 'cnName',
-        valueField: 'cnName',
-        resultField: 'data',
-        filterOption: (input: string, option: any) => {
-          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        },
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.serviceCode = obj.ediCode
-          }
-          if (!e && !obj) {
-            formModel.serviceCode = null
-          }
-        },
-      }
-    },
-  },
-  {
-    field: 'serviceCode',
-    label: '',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '',
-    field: 'customerId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '委托单位',
-    labelSlot: 'customerName',
-    field: 'customerName',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel, formActionType }) => {
-      return {
-        api: GetControllerClientList,
-        labelField: 'pinYinCode',
-        valueField: 'shortName',
-        showName: 'description',
-        resultField: 'data',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.customerId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.customerId = ''
-          }
-        }
-      }
-    }
-  },
-  {
-    field: 'customerNum',
-    label: '客户编号',
-    component: 'Input',
-    required: false,
-    colProps: { span: 6 },
-  },
-  {
-    label: '',
-    field: 'goodsId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '',
-    field: 'ctnGoodsInfo',
-    component: 'Input',
-    show: false,
-  },
-  {
-    field: 'goodsName',
-    label: '品名',
-    component: 'ApiSelect',
-    labelSlot: 'goodsName',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetClientGoodsList,
-        labelField: 'pinYinCode',
-        valueField: 'pinYinCode',
-        showName: 'goodName',
-        immediate: false,
-        mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
-        resultField: 'data',
-        onChange: (v, obj) => {
-          if (v && obj && obj.id) {
-            setTimeout(() => {
-              if (obj.goodName && obj.goodName.indexOf('(')) {
-                formModel.goodsName = obj.goodName.split('(')[0]
-              } else {
-                formModel.goodsName = obj.goodName
-              }
-            }, 100)
-            if (obj.hsCode) {
-              formModel.hsCode = obj.hsCode
-            }
-          }
-          if (!v && !obj?.id) {
-            formModel.goodsId = null
-            formModel.hsCode = null
-          }
-        }
-      }
-    },
-  },
-  {
-    label: '装货港',
-    field: 'loadPortCode',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel, formActionType }) => {
-      return {
-        api: GetClientPortSelectList,
-        resultField: 'data',
-        labelField: 'pinYinCode',
-        valueField: 'ediCode',
-        showName: 'ediCode',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.loadPortId = obj.id
-            formModel.loadPort = obj.portName + ',' + obj.countryEnName
-          }
-          if (!e && !obj) {
-            formModel.loadPortId = null
-            formModel.loadPort = null
-          }
-        }
-      }
-    }
-  },
-  {
-    label: '卸货港',
-    field: 'dischargePortCode',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel, formActionType }) => {
-      return {
-        api: GetClientPortSelectList,
-        resultField: 'data',
-        labelField: 'pinYinCode',
-        showName: 'ediCode',
-        valueField: 'ediCode',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.dischargePortId = obj.id
-            formModel.dischargePort = obj.portName + ',' + obj.countryEnName
-            // 带出交货地
-            formModel.deliveryPlaceId = obj.id
-            formModel.deliveryPlace = obj.portName + ',' + obj.countryEnName
-            formModel.deliveryPlaceCode = e
-          }
-          if (!e && !obj) {
-            formModel.dischargePortId = null
-            formModel.dischargePort = null
-          }
-        },
-      }
-    },
-  },
-  {
-    label: '交货地',
-    field: 'deliveryPlaceCode',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetClientPortSelectList,
-        resultField: 'data',
-        labelField: 'pinYinCode',
-        showName: 'ediCode',
-        valueField: 'ediCode',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.deliveryPlaceId = obj.id
-            formModel.deliveryPlace = obj.portName + ',' + obj.countryEnName
-          }
-          if (!e && !obj) {
-            formModel.deliveryPlaceId = null
-            formModel.deliveryPlace = null
-          }
-        },
-      }
-    },
-  },
-  {
-    label: '收货地',
-    field: 'receiptPlaceCode',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetClientPortSelectList,
-        resultField: 'data',
-        immediate: false,
-        labelField: 'pinYinCode',
-        valueField: 'ediCode',
-        showName: 'ediCode',
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.receiptPlace = obj.portName + ',' + obj.countryEnName
-            formModel.receiptPlaceId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.receiptPlace = null
-            formModel.receiptPlaceId = null
-          }
-        },
-      }
-    },
-  },
-  {
-    label: '',
-    field: 'loadPort',
-    component: 'Input',
-    required: false,
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        oninput: () => {
-          formModel.loadPort = formModel.loadPort.replace(/[\u4e00-\u9fa5]/ig,'')
-        }
-      }
-    }
-  },
-  {
-    label: '',
-    field: 'loadPortId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '',
-    field: 'dischargePort',
-    component: 'Input',
-    required: false,
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        oninput: () => {
-          formModel.dischargePort = formModel.dischargePort.replace(/[\u4e00-\u9fa5]/ig,'')
-        }
-      }
-    }
-  },
-  {
-    label: '',
-    field: 'dischargePortId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '',
-    field: 'deliveryPlace',
-    component: 'Input',
-    required: false,
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        oninput: () => {
-          formModel.deliveryPlace = formModel.deliveryPlace.replace(/[\u4e00-\u9fa5]/ig,'')
-        }
-      }
-    }
-  },
-  {
-    label: '',
-    field: 'deliveryPlaceId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '',
-    field: 'receiptPlace',
-    component: 'Input',
-    required: false,
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        oninput: () => {
-          formModel.receiptPlace = formModel.receiptPlace.replace(/[\u4e00-\u9fa5]/ig,'')
-        }
-      }
-    }
-  },
-  {
-    label: '',
-    field: 'receiptPlaceId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    field: 'bookingNo',
-    label: '订舱编号',
-    labelSlot: 'bookingNo',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        oninput: () => {
-          formModel.bookingNo = formModel.bookingNo.replace(/[\u4e00-\u9fa5]/ig,'')
-        }
-      }
-    }
-  },
-  {
-    field: 'etd',
-    label: '开船日期',
-    labelSlot: 'etd',
-    component: 'DatePicker',
-    colProps: { span: 6 },
-    componentProps: {
-      allowClear: true,
-      valueFormat: 'YYYY-MM-DD'
-    }
-  },
-  {
-    field: 'closingDate',
-    label: '截港时间',
-    component: 'DatePicker',
-    colProps: { span: 6 },
-    componentProps: {
-      showTime: true,
-      allowClear: true,
-      valueFormat: 'YYYY-MM-DD HH',
-    },
-  },
-  {
-    field: 'eta',
-    label: '预抵日期',
-    component: 'DatePicker',
-    colProps: { span: 6 },
-    componentProps: {
-      allowClear: true,
-      valueFormat: 'YYYY-MM-DD',
-    },
-  },
-  {
-    field: 'openPortDate',
-    label: '截VGM时间',
-    component: 'DatePicker',
-    colProps: { span: 6 },
-    componentProps: {
-      allowClear: true,
-      showTime: true,
-      valueFormat: 'YYYY-MM-DD HH:mm'
-    }
-  },
-  {
-    field: 'closeDocDate',
-    label: '截单时间',
-    component: 'DatePicker',
-    colProps: { span: 6 },
-    componentProps: {
-      showTime: true,
-      allowClear: true,
-      valueFormat: 'YYYY-MM-DD HH',
-    },
-  },
-  {
-    label: '签单地代码',
-    field: 'issuePlaceCode',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetClientPortSelectList,
-        resultField: 'data',
-        labelField: 'pinYinCode',
-        valueField: 'ediCode',
-        showName: 'ediCode',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.issuePlace = obj.portName
-            formModel.issuePlaceId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.issuePlace = null
-            formModel.issuePlaceId = null
-          }
-        },
-      }
-    },
-  },
-  {
-    label: '签单地点',
-    field: 'issuePlace',
-    component: 'Input',
-    required: false,
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        oninput: () => {
-          formModel.issuePlace = formModel.issuePlace.replace(/[\u4e00-\u9fa5]/ig,'')
-        }
-      }
-    }
-  },
-  {
-    label: '',
-    field: 'issuePlaceId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    field: 'serviceContractNo',
-    label: '服务合同号',
-    component: 'Input',
-    required: false,
-    dynamicDisabled: false,
-    colProps: { span: 6 },
-  },
-  {
-    label: '',
-    field: 'forwarderId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '订舱口',
-    field: 'forwarder',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetSupplierListByCode,
-        params: { code: 'booking' },
-        labelField: 'pinYinCode',
-        valueField: 'shortName',
-        showName: 'description',
-        resultField: 'data',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.forwarderId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.forwarderId = ''
-          }
-        },
-      }
-    },
-  },
-  {
-    label: '',
-    field: 'shipAgencyId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '船代',
-    field: 'shipAgency',
-    component: 'ApiSelect',
-    labelSlot: 'shipAgencyId',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetSupplierListByCode,
-        params: { code: 'shipagency' },
-        labelField: 'pinYinCode',
-        showName: 'description',
-        valueField: 'shortName',
-        resultField: 'data',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.shipAgencyId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.shipAgencyId = ''
-          }
-        },
-      }
-    },
-  },
-  {
-    label: '',
-    field: 'yardId',
-    component: 'Input',
-    show: false,
-  },
-  {
-    field: 'yard',
-    label: '场站',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetSupplierListByCode,
-        params: { code: 'yard' },
-        labelField: 'pinYinCode',
-        showName: 'description',
-        valueField: 'shortName',
-        resultField: 'data',
-        immediate: false,
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.yardId = obj.id
-          }
-          if (!e && !obj) {
-            formModel.yardId = ''
-          }
-        }
-      }
-    }
-  },
-  {
-    field: 'customerService',
-    label: '',
-    component: 'Input',
-    show: false,
-  },
-  {
-    label: '客服',
-    field: 'customerServiceName',
-    component: 'ApiSelect',
-    colProps: { span: 6 },
-    componentProps: ({ formModel }) => {
-      return {
-        api: GetCustomerServiceList,
-        labelField: 'pinYinCode',
-        valueField: 'userName',
-        showName: 'userName',
-        allowClear: true,
-        showSearch: true,
-        immediate: false,
-        resultField: 'data',
-        onChange: (e, obj) => {
-          if (e && obj) {
-            formModel.customerService = obj.id
-          }
-          if (!e && !obj) {
-            formModel.customerService = null
-          }
-        }
-      }
-    }
-  }
 ]
\ No newline at end of file
diff --git a/src/views/system/serviceFlow/api.js b/src/views/system/serviceFlow/api.js
new file mode 100644
index 00000000..7cdeff05
--- /dev/null
+++ b/src/views/system/serviceFlow/api.js
@@ -0,0 +1,106 @@
+import { request } from '/@/utils/request'
+
+// 获取列表 (Auth)
+export function GetList(parameter) {
+  return request({
+    url: '/opApi/ServiceWorkFlowBase/GetPage',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function Save(parameter) {
+  return request({
+    url: '/opApi/StatusSkuBaseManage/Save',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function SaveAndEnable(parameter) {
+  return request({
+    url: '/opApi/StatusSkuBaseManage/SaveAndEnable',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function SetEnable(parameter) {
+  return request({
+    url: '/opApi/StatusSkuBaseManage/SetEnable',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function SetUnEnable(parameter) {
+  return request({
+    url: '/opApi/StatusSkuBaseManage/SetUnEnable',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function Delete(parameter) {
+  return request({
+    url: '/opApi/StatusSkuBaseManage/Delete',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function projectQueryList(parameter) {
+  return request({
+    url: '/opApi/ServiceWorkFlowBase/GetEnableProjectList',
+    method: 'get',
+    params: parameter,
+  })
+}
+
+export function QueryActivitiesList(parameter) {
+  return request({
+    url: '/opApi/ServiceWorkFlowBase/QueryActivitiesList',
+    method: 'get',
+    params: parameter,
+  })
+}
+
+export function QueryListStatus(parameter) {
+  return request({
+    url: '/opApi/StatusSkuBase/QueryList',
+    method: 'get',
+    params: parameter,
+  })
+}
+
+export function workFlowSetUnEnable(parameter) {
+  return request({
+    url: '/opApi/StatusSkuBase/SetUnEnable',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function workFlowSaveAndEnable(parameter) {
+  return request({
+    url: '/opApi/ServiceWorkFlowBase/SaveAndEnable',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function workFlowSetUnPublishRelease(parameter) {
+  return request({
+    url: '/opApi/ServiceWorkFlowBase/PublishRelease',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+export function GetShowTimeLine(parameter) {
+  return request({
+    url: '/opApi/ServiceWorkFlowBase/GetShowTimeLine',
+    method: 'get',
+    params: parameter,
+  })
+}
\ No newline at end of file
diff --git a/src/views/system/serviceFlow/columns.tsx b/src/views/system/serviceFlow/columns.tsx
new file mode 100644
index 00000000..23b0c8cd
--- /dev/null
+++ b/src/views/system/serviceFlow/columns.tsx
@@ -0,0 +1,177 @@
+import { BasicColumn, FormSchema } from '/@/components/Table'
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'statusSKUName',
+    label: '状态名称',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'createdTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  {
+    field: 'isEnable',
+    label: '是否启用',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [{ label: '是', value: '1' }, { label: '否', value: '0' }],
+    },
+  },
+  {
+    field: 'createUser',
+    label: '创建人',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'statusSKUNote',
+    label: '状态说明',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'updatedTime',
+    label: '更新时间',
+    component: 'RangePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  {
+    field: 'updatedUserName',
+    label: '更新人',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+
+]
+
+//列表
+export const columns: BasicColumn[] = [
+  {
+    title: '状态名称',
+    dataIndex: 'statusSKUName',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '状态代码',
+    dataIndex: 'statusSKUCode',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '顺序号',
+    dataIndex: 'sortNo',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '说明',
+    dataIndex: 'statusSKUNote',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '显示颜色',
+    dataIndex: 'backgroundColor',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '是否启用',
+    dataIndex: 'isEnable',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'createdTime',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createdUserName',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '更新日期',
+    dataIndex: 'updatedTime',
+    width: 120,
+    align: 'left',
+  },
+  {
+    title: '更新人',
+    dataIndex: 'updatedUserName',
+    width: 120,
+    align: 'left',
+  },
+]
+
+export const detailForm: FormSchema[] = [
+  {
+    field: 'pkId',
+    label: '',
+    component: 'Input',
+    show: false,
+    colProps: { span: 24 },
+  },
+  {
+    field: 'statusSKUName',
+    label: '状态名称',
+    required: true,
+    rules: [{ message: '请输入状态名称' }],
+    component: 'Input',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'statusSKUCode',
+    label: '状态代码',
+    required: true,
+    rules: [{ message: '请输入状态代码' }],
+    component: 'Input',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'backgroundColor',
+    label: '显示颜色',
+    required: true,
+    rules: [{ message: '请选择颜色' }],
+    defaultValue: '#000000',
+    component: 'Input',
+    slot: 'color',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'sortNo',
+    label: '排序',
+    component: 'Input',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'statusSKUNote',
+    label: '状态说明',
+    required: true,
+    rules: [{ message: '请输入状态说明' }],
+    component: 'Input',
+    colProps: { span: 24 },
+  },
+
+
+]
+
+
diff --git a/src/views/system/serviceFlow/detail.vue b/src/views/system/serviceFlow/detail.vue
new file mode 100644
index 00000000..97d00937
--- /dev/null
+++ b/src/views/system/serviceFlow/detail.vue
@@ -0,0 +1,573 @@
+<template>
+    <a-modal class="addModel" title="服务流程编辑" :width="1200" :visible="visible" @cancel="handleCancel">
+        <a-spin :spinning="confirmLoading">
+            <a-form ref="form" :rules="formRule" class="main" :model="form">
+                <a-row>
+                    <a-col :span="8">
+                        <a-form-item name="serviceWorkflowName" label="服务流程名称" :wrapperCol="wrapperCol"
+                            :labelCol="labelCol">
+                            <a-input placeholder="服务流程名称" v-model:value="form.serviceWorkflowName" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item name="serviceWorkflowCode" label="服务流程代码" :labelCol="labelCol"
+                            :wrapperCol="wrapperCol">
+                            <a-input placeholder="服务流程代码" v-model:value="form.serviceWorkflowCode" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="所属租户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                            {{ form.belongTenantName }}
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row v-if="form.pkId">
+                    <a-col :span="8">
+                        <a-form-item label="发布版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                            {{ form.releaseVersion }}
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="最后发布日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="发布人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row v-if="form.pkId">
+                    <a-col :span="8">
+                        <a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                            {{ form.createdUserName }}
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                            {{ form.createdTime }}
+                        </a-form-item></a-col>
+                </a-row>
+                <a-row v-if="form.pkId">
+                    <a-col :span="8">
+                        <a-form-item label="流水号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                        </a-form-item></a-col>
+                    <a-col :span="8"> <a-form-item label="更新人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                            {{ form.updatedUserName }}
+                        </a-form-item></a-col>
+                    <a-col :span="8"> <a-form-item label="更新日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                            {{ form.updatedTime }}
+                        </a-form-item></a-col>
+                </a-row>
+                <div>
+                    <div class="title">
+                        <span>服务信息</span>
+                        <a v-if="!form.serviceProject.serviceProjectName" @click="addItemFlag = true">添加</a>
+                    </div>
+                    <div v-if="form.serviceProject.serviceProjectName">
+                        <span style="margin-right: 30px;">服务名称:{{ form.serviceProject.serviceProjectName }}</span>
+                        <span style="margin-right: 30px;">服务代码:{{ form.serviceProject.serviceProjectCode }}</span>
+                        <a @click="addItemFlag = true">修改</a>
+                    </div>
+                </div>
+                <div>
+                    <div class="title">
+                        <span>状态</span>
+                        <a @click="handleAddStatus">添加</a>
+                    </div>
+                    <div class="statBox" v-if="form.statusSkuList && form.statusSkuList.length > 0">
+                        <div class="status" v-for="(item, index) in form.statusSkuList" :key="item.sortNo">
+                            <span class="sort">{{ item.sortNo }}</span>
+                            <span class="name">{{ item.showName }}</span>
+                            <span class="action">
+                                <a-icon type="setting" @click="handleEditStatus(item, index)"
+                                    style="margin-right: 10px;cursor: pointer;" />
+                                <a-icon type="delete" @click="handleDelStatus(index)" style="cursor: pointer;" />
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </a-form>
+        </a-spin>
+        <template slot="footer">
+            <a-button @click="handleCancel">
+                关闭
+            </a-button>
+            <a-button @click="handleUnable" type="danger">
+                取消启用
+            </a-button>
+            <a-button @click="handleSubmit" type="primary">
+                保存并启用
+            </a-button>
+            <a-button @click="handlePub" type="primary">
+                发布
+            </a-button>
+            <a-button @click="handleTime" type="primary">
+                展示时间轴
+            </a-button>
+        </template>
+    </a-modal>
+    <a-modal title="服务项目" :width="800" :visible="addItemFlag" @cancel="addItemFlag = false">
+        <div>
+            <span>服务项目：</span>
+            <a-select show-search placeholder="请选择服务项目" v-model:value="serviceItem"
+                style="width: 300px;margin-right: 20px;" @search="projectSearch" :default-active-first-option="false"
+                :show-arrow="false" :filter-option="false" :not-found-content="null">
+                <a-select-option v-for="item in projectList" :key="item.pkId" :value="item.pkId">
+                    {{ item.serviceProjectName }}
+                </a-select-option>
+            </a-select>
+            <a @click="handleInto">引入</a>
+        </div>
+        <template slot="footer">
+            <a-button @click="addItemFlag = false">
+                关闭
+            </a-button>
+        </template>
+    </a-modal>
+    <a-modal title="流程活动引入" :width="800" :visible="activeFlag" @cancel="activeFlag = false">
+        <div>
+            <a-form ref="activeForm" :rules="activeRules" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }"
+                :model="activeForm">
+                <a-form-item name="pkId" style="margin-bottom: 10px;" label="流程活动">
+                    <a-select show-search placeholder="请选择流程活动" v-model:value="activeForm.pkId"
+                        style="width: 300px;margin-right: 20px;" @search="activeSearch"
+                        :default-active-first-option="false" :show-arrow="false" :filter-option="false"
+                        :not-found-content="null">
+                        <a-select-option v-for="item in activeList" :key="item.pkId" :value="item.pkId">
+                            {{ item.showName }}
+                        </a-select-option>
+                    </a-select>
+                    <a @click="addActiveFlag = true">添加</a>
+                </a-form-item>
+                <a-form-item name="sortNo" style="margin-bottom: 10px;" label="顺序号">
+                    <a-input-number :precision="0" v-model:value="activeForm.sortNo" :min="1" :max="100" />
+                </a-form-item>
+                <a-form-item name="valType" label="值类型">
+                    <a-select placeholder="请选择值类型" v-model:value="activeForm.valType"
+                        style="width: 300px;margin-right: 20px;">
+                        <a-select-option value="DATETIME">时间</a-select-option>
+                        <a-select-option value="STRING">字符串</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item style="margin-bottom: 10px;" label="包含子状态">
+                    <a-checkbox v-model:checked="activeForm.isContainsSubs"></a-checkbox>
+                    <a v-if="activeForm.isContainsSubs" style="margin-left: 10px;" @click="handlePushSub">添加子状态</a>
+                </a-form-item>
+                <p>说明：包含子状态，可指定多个子状态，启用一个状态触发后，当前状态触发</p>
+                <div class="statBox" v-if="activeForm.subList && activeForm.subList.length > 0">
+                    <div class="status" v-for="(item, index) in activeForm.subList" :key="item.sortNo">
+                        <span class="sort">{{ item.sortNo }}</span>
+                        <span class="name">{{ item.showName }}</span>
+                        <span class="action">
+                            <a-icon type="setting" @click="handleEditSub(item, index)"
+                                style="margin-right: 10px;cursor: pointer;" />
+                            <a-icon type="delete" @click="handleDelSub(index)" style="cursor: pointer;" />
+                        </span>
+                    </div>
+                </div>
+            </a-form>
+        </div>
+        <template slot="footer">
+            <a-button type="primary" @click="handleSaveActive">
+                确定
+            </a-button>
+            <a-button @click="activeFlag = false">
+                关闭
+            </a-button>
+        </template>
+    </a-modal>
+    <a-modal title="服务活动新增" :width="800" :visible="addActiveFlag" @cancel="addActiveFlag = false">
+        <div>
+            <a-form ref="addActiveForm" :rules="addRules" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }"
+                :model="addActiveForm">
+                <a-form-item name="statusSKUId" style="margin-bottom: 10px;" label="状态名称">
+                    <a-select show-search placeholder="请选择状态名称" v-model:value="addActiveForm.statusSKUId"
+                        style="width: 300px;margin-right: 20px;" @search="statusSearch" @change="handleChangeStatus"
+                        :default-active-first-option="false" :show-arrow="false" :filter-option="false"
+                        :not-found-content="null">
+                        <a-select-option v-for="item in statusList" :key="item.pkId" :value="item.pkId">
+                            {{ item.statusSKUName }}
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item style="margin-bottom: 10px;" label="状态代码">
+                    {{ statusSKUCode }}
+                </a-form-item>
+                <a-form-item name="showName" style="margin-bottom: 10px;" label="活动名称">
+                    <a-input v-model:value="addActiveForm.showName" />
+                </a-form-item>
+            </a-form>
+        </div>
+        <template slot="footer">
+            <a-button type="primary" @click="handleSaveAddActive">
+                确定
+            </a-button>
+            <a-button @click="addActiveFlag = false">
+                关闭
+            </a-button>
+        </template>
+    </a-modal>
+    <a-modal title="流程展示" :width="1400" :visible="timeFlag" @cancel="timeFlag = false">
+      <a-spin :spinning="timeLoading">
+        <div v-if="timeForm.activitiesList && timeForm.activitiesList.length > 0" class="time">
+          <div class="time-title">{{ timeForm.serviceProjectName }}</div>
+          <div class="item" v-for="(item, index) in timeForm.activitiesList" :key="item.actId">
+            <div class="top">
+              <div class="line" :class="{ active: item.isYield == 1 }"></div>
+              <div class="point" :class="{ active: item.isYield == 1 }"></div>
+              <div class="line" v-if="index != timeForm.activitiesList.length - 1" :class="{ active: item.isYield == 1 }">
+              </div>
+            </div>
+            <div class="bottom">
+              <div :title="item.showName + item.actDate">{{ item.showName }}</div>
+              <div v-if="item.isYield == 1">{{ item.actDate ? item.actDate.substring(0, 11) : '' }}</div>
+              <div class="subList">
+                <div class="sub" v-for="ite in item.subList" :key="ite.actId">
+                  <div :class="{ active: ite.isYield == 1 }" class="subPoint"></div>
+                  <div :title="ite.showName + ite.actDate" class="text">
+                    <span style="margin-right: 4px;">{{ ite.showName }}</span>
+                    <span>{{ ite.actDate ? ite.actDate.substring(0, 11) : '' }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else>暂无数据</div>
+      </a-spin>
+    </a-modal>
+
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import {
+    projectQueryList, QueryActivitiesList, QueryListStatus, workFlowSetUnPublishRelease,
+    workFlowSetUnEnable, workFlowSaveAndEnable,GetShowTimeLine
+} from './api'
+import { useMessage } from '/@/hooks/web/useMessage'
+const { createMessage } = useMessage()
+const visible = ref(false)
+const confirmLoading = ref(false)
+const addActiveForm = ref({}) as any
+const form = ref({
+    serviceProject: {}
+}) as any
+const labelCol = {
+    xs: { span: 24 },
+    sm: { span: 7 }
+}
+const wrapperCol = {
+    xs: { span: 24 },
+    sm: { span: 17 }
+}
+const statusList = ref([]) as any
+const addItemFlag = ref(false)
+const formRule = {
+    belongTenantId: [{ required: true, message: '请选择租户', trigger: 'change' }],
+    serviceWorkflowCode: [{ required: true, message: '请输入服务代码', trigger: 'blur' }],
+    serviceWorkflowName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }]
+}
+const addRules = {
+    statusSKUId: [{ required: true, message: '请选择状态名称', trigger: 'change' }],
+    showName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
+}
+const activeRules = {
+    valType: [{ required: true, message: '请选择值类型', trigger: 'change' }],
+    sortNo: [{ required: true, message: '请输入顺序号', trigger: 'blur' }],
+    pkId: [{ required: true, message: '请选择流程活动', trigger: 'change' }]
+}
+const serviceItem = ref('')
+const activeFlag = ref(false)
+const type = ref('')
+const activeForm = ref({}) as any
+const addActiveFlag = ref(false)
+const activeList = ref([]) as any
+function activeSearch(data) {
+    QueryActivitiesList({ queryItem: data }).then(res => {
+        activeList.value = res.data.ext
+    })
+}
+const SysTenantData = ref([]) as any
+function handleSubmit() {
+    confirmLoading.value = true
+    form.value.statusSkuList.forEach(item => {
+        if (item.isContainsSubs) {
+            item.isContainsSub = 1
+        } else {
+            item.isContainsSub = 0
+        }
+    })
+    SysTenantData.value.forEach(item => {
+        if (item.id === form.value.belongTenantId) {
+            form.value.belongTenantName = item.name
+        }
+    })
+    workFlowSaveAndEnable(form.value).then((res) => {
+        confirmLoading.value = false
+        if (res.data.succ) {
+            if (form.value.pkId) {
+                createMessage.success('修改成功')
+            } else {
+                createMessage.success('新增成功')
+            }
+            handleCancel()
+        } else {
+            createMessage.error(res.data.msg)
+        }
+    }).finally((res) => {
+        confirmLoading.value = false
+    })
+}
+function handlePub() {
+    workFlowSetUnPublishRelease([form.value.pkId]).then(res => {
+        if (res.data.ext[0].succ) {
+            createMessage.success('发布成功')
+            visible.value = false
+        } else {
+            createMessage.error(res.data.ext[0].msg)
+        }
+    })
+}
+function handleUnable() {
+    workFlowSetUnEnable([form.value.pkId]).then(res => {
+        if (res.data.ext[0].succ) {
+            createMessage.success('取消启用成功')
+            visible.value = false
+        } else {
+            createMessage.error(res.data.ext[0].msg)
+        }
+    })
+}
+const statusSKUCode = ref('')
+function handleChangeStatus(val) {
+    statusList.value.forEach(item => {
+        if (item.pkId === val) {
+            statusSKUCode.value = item.statusSKUCode
+        }
+    })
+}
+function handleAddStatus() {
+    activeFlag.value = true
+    type.value = 'add'
+    activeForm.value = {
+        sortNo: 1,
+        subList: [],
+        isContainsSubs: false,
+        statusTriggerList: []
+    }
+}
+function handleInto() {
+    if (!serviceItem.value) {
+        createMessage.warning('请先选择')
+        return false
+    } else {
+        projectList.value.forEach(item => {
+            if (item.pkId === serviceItem.value) {
+                form.value.serviceProject.serviceProjectCode = item.serviceProjectCode
+                form.value.serviceProject.serviceProjectName = item.serviceProjectName
+                form.value.serviceProject.pkId = item.pkId
+                addItemFlag.value = false
+            }
+        })
+    }
+}
+const projectList = ref([]) as any
+onMounted(() => {
+    projectSearch('')
+})
+function projectSearch(data) {
+    projectQueryList({ queryItem: data }).then(res => {
+        projectList.value = res.data.ext
+    })
+}
+
+function statusSearch(data) {
+    QueryListStatus({ queryItem: data }).then(res => {
+        statusList.value = res.data.ext
+    })
+}
+
+function handleDelSub(index) {
+    activeForm.value.subList.splice(index, 1)
+}
+
+
+function handleDelStatus(index) {
+    form.value.statusSkuList.splice(index, 1)
+}
+const subActiveFlag = ref(false)
+const subType = ref('')
+function handlePushSub() {
+    subActiveFlag.value = true
+    subType.value = 'add'
+}
+function handleEditStatus(item, index) {
+    const arr = []
+    activeList.value.forEach(ite => {
+        if (item == item.pkId) {
+            arr.push(1)
+        }
+    })
+    if (arr.length == 0) {
+        activeList.value.push({
+            pkId: item.pkId,
+            showName: item.showName
+        })
+    }
+    activeForm.value = JSON.parse(JSON.stringify(item))
+    type.value = 'edit'
+    activeFlag.value = true
+    index.value = index
+}
+const subActiveForm = ref({})
+const subIndex = ref(0)
+function handleEditSub(item, index) {
+    subActiveForm.value = JSON.parse(JSON.stringify(item))
+    subType.value = 'edit'
+    subActiveFlag.value = true
+    subIndex.value = index
+}
+function init() {
+    visible.value = true
+}
+const timeFlag = ref(false)
+const timeLoading = ref(false)
+const timeForm = ref({}) as any
+function handleTime() {
+      timeFlag.value = true
+      timeLoading.value = true
+      GetShowTimeLine({ pkId: form.value.pkId }).then(res => {
+        if (res.data.succ) {
+          timeForm.value = res.data.ext
+        } else {
+            createMessage.error(res.data.msg)
+        }
+        timeLoading.value = false
+      })
+    }
+defineExpose({ init })
+function handleCancel() {
+    visible.value = false
+}
+</script>
+<style scoped lang="less">
+.title {
+    border-bottom: 1px solid rgb(139, 137, 137);
+    padding-bottom: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 15px;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.statBox {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 20px;
+
+    .status {
+        border: 1px solid black;
+        margin-right: 15px;
+        margin-bottom: 10px;
+
+        .sort {
+            padding: 0 15px;
+            text-align: center;
+        }
+
+        .action {
+            padding: 0 5px;
+        }
+
+        .name {
+            display: inline-block;
+            padding: 5px 15px;
+            text-align: center;
+            background: rgb(184, 53, 137);
+            margin-right: 5px;
+            color: white;
+        }
+    }
+}
+
+.time {
+    display: flex;
+    align-items: flex-start;
+    padding-top: 10px;
+
+    .time-title {
+        padding: 10px;
+        background: rgb(215, 215, 215);
+        border-radius: 5px;
+        margin-top: -12px;
+    }
+
+    .active {
+        background: rgb(2, 167, 240) !important;
+    }
+
+    .item {
+        min-width: 120px;
+        margin-right: -3px;
+
+        .top {
+            display: flex;
+            align-items: center;
+
+            .line {
+                width: 45%;
+                height: 2px;
+                background: rgb(215, 215, 215);
+            }
+
+            .point {
+                width: 11px;
+                height: 11px;
+                border-radius: 50%;
+                background: rgb(215, 215, 215);
+                margin: 0 3px;
+            }
+        }
+
+        .bottom {
+            text-align: center;
+            margin-top: 10px;
+        }
+
+        .subList {
+            margin-top: 10px;
+            padding-left: 10px;
+        }
+
+        .sub {
+            margin-top: 4px;
+            display: flex;
+            align-items: center;
+
+            .subPoint {
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background: rgb(215, 215, 215);
+                margin-right: 3px;
+            }
+
+            .text {}
+        }
+    }
+
+}
+
+.conditRow {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.blur {
+    margin: 0 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/serviceFlow/index.vue b/src/views/system/serviceFlow/index.vue
new file mode 100644
index 00000000..9b65bfe9
--- /dev/null
+++ b/src/views/system/serviceFlow/index.vue
@@ -0,0 +1,243 @@
+<template>
+    <div>
+        <BasicTable class="ds-table" @register="registerTable" @row-dbClick="(e) => { GoDetailed(true, e) }
+            ">
+            <template #tableTitle>
+                <div class="buttonGroup ">
+                    <div class="ds-h-aciton-btns-fee">
+                        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+                            <template #title>
+                                <span>新建</span>
+                            </template>
+                            <span class="ds-action-svg-btn" @click="GoDetailed(false)">
+                                <img src="../../../assets/svg/infoclient/xinjian.svg" class="SvgImg" />
+                            </span>
+                        </a-tooltip>
+                        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+                            <template #title>
+                                <span>删除</span>
+                            </template>
+                            <span class="ds-action-svg-btn">
+                                <a-popconfirm title="确定删除当前选中数据？" @confirm="FnDel" ok-text="是" cancel-text="否">
+                                    <img src="../../../assets/svg/infoclient/shanchu.svg" class="SvgImg" />
+                                </a-popconfirm>
+                            </span>
+                        </a-tooltip>
+                        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+                            <template #title>
+                                <span>启用</span>
+                            </template>
+                            <span class="ds-action-svg-btn" @click="handleApply">
+                                <img src="../../../assets/svg/infoclient/tijiao.svg" class="SvgImg" />
+                            </span>
+                        </a-tooltip>
+                        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+                            <template #title>
+                                <span>取消启用</span>
+                            </template>
+                            <span class="ds-action-svg-btn" @click="handleWithdraw">
+                                <img src="../../../assets/svg/infoclient/chexiaotijiao.svg" class="SvgImg" />
+                            </span>
+                        </a-tooltip>
+                    </div>
+                </div>
+            </template>
+            <template v-slot:bodyCell="{ column, record }">
+                <template v-if="column.key === 'action'">
+                    <TableAction :actions="[
+                        {
+                            icon: 'clarity:note-edit-line',
+                            tooltip: '编辑',
+                            onClick: () => {
+                                GoDetailed(true, record)
+                            },
+                        },
+                    ]" />
+                </template>
+                <template v-if="column.key === 'isEnable'">
+                    <span v-if="record.isEnable == 1">是</span>
+                    <span v-if="record.isEnable == 0">否</span>
+                </template>
+            </template>
+        </BasicTable>
+        <editForm ref="editFormRef" ></editForm>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { GetList, Save, SaveAndEnable, SetUnEnable, SetEnable, Delete } from './api.js'
+import { BasicTable, useTable, TableAction } from '/@/components/Table'
+import { BasicForm, useForm } from '/@/components/Form/index'
+import { columns, searchFormSchema, detailForm } from './columns'
+import { useMessage } from '/@/hooks/web/useMessage'
+import editForm  from './detail.vue'
+const { createMessage } = useMessage()
+import { useGo } from '/@/hooks/web/usePage'
+const go = useGo()
+import { formatParams } from '/@/hooks/web/common'
+const [registerTable, { reload, clearSelectedRowKeys, getSelectRows, getRawDataSource }] = useTable({
+    api: async (p) => {
+        const res: API.DataResult = await GetList(p)
+        return new Promise((resolve) => {
+            resolve({ data: [...res.data], total: res.count })
+        })
+    },
+    beforeFetch: (p) => {
+        return formatParams(p)
+    },
+    columns,
+    formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+        useAdvancedSearch: true,
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    resizeHeightOffset: 15,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: true,
+    indexColumnProps: {
+        width: 60,
+    },
+    canResize: true,
+    immediate: true,
+    actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        fixed: 'right',
+    },
+})
+const editFormRef = ref()
+const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue, }] = useForm({
+    labelWidth: 100,
+    schemas: detailForm,
+    showActionButtonGroup: false,
+})
+function GoDetailed(type, row) {
+    if (!type) {
+        editFormRef.value.init()
+    } else {
+        // open.value = true
+        // const newRow = JSON.parse(JSON.stringify(row))
+        // setTimeout(() => {
+        //     setFieldsValue(newRow)
+        // }, 10)
+    }
+}
+
+const loading = ref(false)
+
+function FnDel() {
+    let ids = []
+    ids = getSelectRows().map((item) => {
+        return item.pkId
+    })
+    if (ids.length == 0) {
+        createMessage.error('请选择数据')
+        return false
+    }
+    Delete(ids).then(res => {
+        if (res.succeeded) {
+            createMessage.success('操作成功')
+            clearSelectedRowKeys()
+            reload()
+        }
+    })
+}
+function handleWithdraw() {
+    let ids = []
+    ids = getSelectRows().map((item) => {
+        return item.pkId
+    })
+    if (ids.length == 0) {
+        createMessage.error('请选择数据')
+        return false
+    }
+    SetUnEnable(ids).then(res => {
+        if (res.succeeded) {
+            createMessage.success('操作成功')
+            clearSelectedRowKeys()
+            reload()
+        }
+    })
+}
+function handleApply() {
+    let ids = []
+    ids = getSelectRows().map((item) => {
+        return item.pkId
+    })
+    if (ids.length == 0) {
+        createMessage.error('请选择数据')
+        return false
+    }
+    SetEnable(ids).then(res => {
+        if (res.succeeded) {
+            createMessage.success('操作成功')
+            clearSelectedRowKeys()
+            reload()
+        }
+    })
+}
+</script>
+<style lang="less" scoped>
+.topTable {
+    height: calc(100vh - 145px);
+}
+
+
+
+.tableTitleBox {
+    .ant-btn-link {
+        border-radius: 2px;
+        background: rgba(245, 249, 252, 1);
+        margin-left: 13px;
+        color: #000;
+        font-size: 16px;
+    }
+}
+
+.SvgImg {
+    width: 18px;
+    height: 18px;
+    margin: 6.8px;
+}
+
+.buttonGroup {
+    display: flex;
+    align-items: center;
+}
+
+
+
+.ds-h-aciton-btns-fee {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    padding-right: 10px;
+    border-right: 1px solid rgb(194, 188, 188);
+
+    .ds-action-svg-btn {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        border-radius: 2px;
+        margin-right: 8px;
+        cursor: pointer;
+
+        .next {
+            transform: rotate(180deg);
+        }
+    }
+
+    .ds-action-svg-btn:hover {
+        box-shadow: 0px 2px 4px #cad1db;
+    }
+
+    .vben-svg-icon {
+        margin: 6.8px;
+    }
+}
+</style>
\ No newline at end of file