商家管理优化

src/views/business_manage/addBusiness.vue

@@ -1,203 +1,149 @@
 <template>
+  <div class="add-business-box">
     <div class="add-business">
-        <!-- 自定义步骤条 -->
-        <div class="add-steps">
-          <Steps
-            :activeStep="currentStep "
-            :allowStepClick="currentRoute !== 'addBusiness'"
-             @changeActiveStep="changeActiveStep"
-            >
-          </Steps>
-        </div>
-        <template v-if="currentStep  === 1">
-            <div class="first-step-form-wrap">
-                <t-form 
-                    :data="firstFormData" 
-                    :rules="rules"
-                    ref="firstFormEl" 
-                    label-width="120px"
-                    inline
-                    class="first-step-form"
-                >
-                    <div class="form-line">
-                        <t-form-item label="所属区域" name="areaType">
-                            <t-radio-group v-model:modelValue="firstFormData.areaType" :disabled="currentRoute === 'businessDetail'">
-                              <t-radio label="国内" value="国内">国内</t-radio>
-                              <t-radio label="海外" value="海外">海外</t-radio>
-                            </t-radio-group>
-                        </t-form-item>
-                        <t-form-item label="商家名称" name="name">
-                          <t-select-input
-                            v-model:value="firstFormData.name"
-                            :popup-visible="popupVisible"
-                            :popup-props="{ overlayInnerStyle: { padding: '6px' } }"
-                            placeholder="请输入任意关键词"
-                            allow-input
-                            clearable
-                            style="width: 300px"
-                            @input-change="onInputChange"
-                            @popup-visible-change="onPopupVisibleChange"
-                          >
-                            <template #panel>
-                              <div class="tdesign-demo__select-input-ul-autocomplete" v-if="showPopup">
-                                <div v-for="item in options" :key="item" @click="() => onOptionClick(item)">
-                                  {{ item.Name }}
-                                </div>
-                              </div>
-                            </template>
-                            <template #suffix>
-                              <span 
-                                  v-if="showSearchBtn" 
-                                  style="color:#409EFF;cursor: pointer;" slot="suffix"  
-                                  @click="getBusinessNameSearch(firstFormData.name)"
-                              > 查询</span>
-                            </template>
-                          </t-select-input>
-                        </t-form-item>
-                    </div>
-                    <div class="form-line">
-                        <t-form-item label="社会信用码" name="creditCode">
-                            <t-input v-model:modelValue="firstFormData.creditCode" disabled placeholder="请输入社会信用码"/>
-                        </t-form-item>
-                        <t-form-item label="商家地址" name="address" v-if="firstFormData.areaType === '国内'">
-                            <t-cascader
-                            :disabled="currentRoute === 'businessDetail'"
-                            value-mode="all"
-                            @change="selectRegion"
-                            v-model:modelValue="firstFormData.address"
-                            :options="locationOptionsReactive"
-                            :keys="locationProps"
-                            clearable
-                            placeholder="请选择客户地址"
-                            />
-                        </t-form-item>
-                        <t-form-item label="所属国家" name="nation" v-else>
-                            <t-select v-model:modelValue="firstFormData.nation" filterable placeholder="请选择所属国家" :disabled="currentRoute === 'businessDetail'" style="width: 360px;">
-                            <t-option
-                                v-for="item in countryDataReactive"
-                                :key="item.code"
-                                :label="item.cnName"
-                                :value="item.cnName"
-                            >
-                                <div style="display: flex; justify-content: space-between;">
-                                <span>{{ item.cnName }}</span>
-                                <span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
-                                </div>
-                            </t-option>
-                            </t-select>
-                        </t-form-item>
-                    </div>
-                    <div class="form-line">
-                        <t-form-item label="决策人" name="decisionMaker">
-                            <t-input v-model:modelValue="firstFormData.decisionMaker" :disabled="currentRoute === 'businessDetail'" placeholder="请输入决策人"/>
-                        </t-form-item>
-                        <t-form-item label="研究团队规模" name="teamSize">
-                            <t-select 
-                            v-model:modelValue="firstFormData.teamSize" 
-                            placeholder="请选择研究团队规模"
-                            clearable
-                            :disabled="currentRoute === 'businessDetail'"
-                            >
-                            <t-option
-                                v-for="item in teamSizeOpts"
-                                :key="item.val"
-                                :label="item.label"
-                                :value="item.val"
-                            ></t-option>
-                            </t-select>
-                        </t-form-item>
-                    </div>
-                    <div class="form-line">
-                        <t-form-item label="资金规模" name="fundsize">
-                            <t-input v-model:modelValue="firstFormData.fundsize" :disabled="currentRoute === 'businessDetail'" placeholder="请输入资金规模"/>
-                        </t-form-item>
-                        <t-form-item label="所属行业" name="industry">
-                            <t-select 
-                            v-model:modelValue="firstFormData.industry" 
-                            placeholder="请选择行业" 
-                            :disabled="currentRoute === 'businessDetail'"
-                            clearable
-                            >
-                            <t-option
-                                v-for="item in tradeArr"
-                                :key="item.IndustryId"
-                                :label="item.IndustryName"
-                                :value="item.IndustryId"
-                            ></t-option>
-                            </t-select>
-                        </t-form-item>
+      <!-- 自定义步骤条 -->
+      <div class="add-steps">
+        <Steps :activeStep="currentStep" :allowStepClick="currentRoute !== 'addBusiness'"
+          @changeActiveStep="changeActiveStep">
+        </Steps>
+      </div>
+      <template v-if="currentStep === 1">
+        <div class="first-step-form-wrap">
+          <t-form :data="firstFormData" :rules="rules" ref="firstFormEl" label-width="120px" inline
+            class="first-step-form">
+            <div class="form-line">
+              <t-form-item label="所属区域" name="areaType">
+                <t-radio-group v-model:modelValue="firstFormData.areaType"
+                  :disabled="currentRoute !== 'businessDetail'">
+                  <t-radio label="国内" value="国内">国内</t-radio>
+                  <t-radio label="海外" value="海外">海外</t-radio>
+                </t-radio-group>
+              </t-form-item>
+              <t-form-item label="商家名称" name="name" >
+                <t-select-input v-model:value="firstFormData.name" :popup-visible="popupVisible"
+                :disabled="currentRoute !== 'addBusiness'" :popup-props="{ overlayInnerStyle: { padding: '6px' } }" placeholder="请输入任意关键词" allow-input clearable
+                  style="width: 300px" @input-change="onInputChange" @popup-visible-change="onPopupVisibleChange">
+                  <template #panel>
+                    <div class="tdesign-demo__select-input-ul-autocomplete" v-if="showPopup">
+                      <div v-for="item in options" :key="item" @click="() => onOptionClick(item)">
+                        {{ item.Name }}
+                      </div>
                     </div>
-                    <div class="form-line">
-                        <t-form-item label="用户上限" name="userMax">
-                            <t-input v-model:modelValue="firstFormData.userMax" :disabled="currentRoute === 'businessDetail'" type="number" placeholder="请输入用户上限"/>
-                        </t-form-item>
-                        <t-form-item label="所属销售" name="saller">
-                            <t-cascader
-                            :disabled="currentRoute === 'businessDetail'"
-                            v-model:modelValue="firstFormData.saller"
-                            :options="salesArr"
-                            :show-all-levels="false"
-                            :keys="cascaderProps"
-                            filterable
-                            @change="changeSaller"
-                            clearable
-                            placeholder="请选择销售"
-                            />
-                        </t-form-item>
+                  </template>
+                  <template #suffix>
+                    <span v-if="showSearchBtn" style="color:#409EFF;cursor: pointer;" slot="suffix"
+                      @click="getBusinessNameSearch(firstFormData.name)"> 查询</span>
+                  </template>
+                </t-select-input>
+              </t-form-item>
+            </div>
+            <div class="form-line">
+              <t-form-item label="社会信用码" name="creditCode">
+                <t-input v-model:modelValue="firstFormData.creditCode" disabled placeholder="请输入社会信用码" />
+              </t-form-item>
+              <t-form-item label="商家地址" name="address" v-if="firstFormData.areaType === '国内'">
+                <t-cascader :disabled="currentRoute === 'businessDetail'" value-mode="all" @change="selectRegion"
+                  v-model:modelValue="firstFormData.address" :options="locationOptionsReactive" :keys="locationProps"
+                  clearable placeholder="请选择客户地址" />
+              </t-form-item>
+              <t-form-item label="所属国家" name="nation" v-else>
+                <t-select v-model:modelValue="firstFormData.nation" filterable placeholder="请选择所属国家"
+                  :disabled="currentRoute === 'businessDetail'" style="width: 360px;">
+                  <t-option v-for="item in countryDataReactive" :key="item.code" :label="item.cnName"
+                    :value="item.cnName">
+                    <div style="display: flex; justify-content: space-between;">
+                      <span>{{ item.cnName }}</span>
+                      <span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
                     </div>
-                </t-form>
+                  </t-option>
+                </t-select>
+              </t-form-item>
+            </div>
+            <div class="form-line">
+              <t-form-item label="决策人" name="decisionMaker">
+                <t-input v-model:modelValue="firstFormData.decisionMaker" :disabled="currentRoute === 'businessDetail'"
+                  placeholder="请输入决策人" />
+              </t-form-item>
+              <t-form-item label="研究团队规模" name="teamSize">
+                <t-select v-model:modelValue="firstFormData.teamSize" placeholder="请选择研究团队规模" clearable
+                  :disabled="currentRoute === 'businessDetail'">
+                  <t-option v-for="item in teamSizeOpts" :key="item.val" :label="item.label"
+                    :value="item.val"></t-option>
+                </t-select>
+              </t-form-item>
+            </div>
+            <div class="form-line">
+              <t-form-item label="资金规模" name="fundsize">
+                <t-input v-model:modelValue="firstFormData.fundsize" :disabled="currentRoute === 'businessDetail'"
+                  placeholder="请输入资金规模" />
+              </t-form-item>
+              <t-form-item label="所属行业" name="industry">
+                <t-select v-model:modelValue="firstFormData.industry" placeholder="请选择行业"
+                  :disabled="currentRoute === 'businessDetail'" clearable>
+                  <t-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName"
+                    :value="item.IndustryId"></t-option>
+                </t-select>
+              </t-form-item>
+            </div>
+            <div class="form-line">
+              <t-form-item label="用户上限" name="userMax">
+                <t-input v-model:modelValue="firstFormData.userMax" :disabled="currentRoute === 'businessDetail'"
+                  type="number" placeholder="请输入用户上限" />
+              </t-form-item>
+              <t-form-item label="所属销售" name="saller">
+                <t-cascader :disabled="currentRoute === 'businessDetail'" v-model:modelValue="firstFormData.saller"
+                  :options="salesArr" :show-all-levels="false" :keys="cascaderProps" filterable @change="changeSaller"
+                  clearable placeholder="请选择销售" />
+              </t-form-item>
             </div>
-        </template>
-        <template v-if="currentStep  === 2">
-          <div class="second-step-form-wrap">
-            <t-form
-              :data="secondFormData"
-              :rules="rules"
-              ref="formRef"
-              label-width="120px"
-              inline
-              class="second-step-form"
-            >
-              <div class="form-line">
-                <t-form-item label="签约日期" name="signDate">
-                  <t-date-picker
-                    v-model="secondFormData.signDate"
-                    placeholder="选择日期"
-                  />
-                </t-form-item>
-                <t-form-item label="到期日期" name="expirationDate">
-                  <t-date-picker
-                    v-model="secondFormData.expirationDate"
-                    placeholder="选择日期"
-                  />
-                </t-form-item>
-              </div>
-            </t-form>
-          </div>
-        </template>
-        <template v-if="currentStep  === 3">
-          <div class="second-step-form-wrap tree">
-            <SetPermission 
-              :isShowFoot="false"
-              :PermissionList="PermissionList"
-              :allCheckedList="allCheckedList"
-              ref="permissionRef"/>
-          </div>
-        </template>
-
-        <div class="btns-box" v-if="currentRoute === 'addBusiness'">
-            <t-button style="width:80px" theme="primary" v-show="currentStep ===1" type="submit" @click="handleStepSecond('first')">下一步</t-button>
-            <t-button style="width:80px" theme="primary" v-show="currentStep ===1" plain @click="router.back()">取消</t-button>
-            <t-button style="width:80px" theme="primary" v-show="currentStep ===2 || currentStep ===3" plain @click="currentStep --">上一步</t-button>
-            <t-button style="width:80px" theme="primary" v-show="currentStep ===2" plain type="submit" @click="handleStepSecond">下一步</t-button>
-            <t-button style="width:80px" theme="primary" v-show="currentStep ===3" @click="handleAddBusiness">保存</t-button>
+          </t-form>
         </div>
+      </template>
+      <template v-if="currentStep === 2">
+        <div class="second-step-form-wrap">
+          <t-form :data="secondFormData" :rules="rules" ref="formRef" label-width="120px" inline
+            class="second-step-form">
+            <div class="form-line">
+              <t-form-item label="签约日期" name="signDate">
+                <t-date-picker v-model="secondFormData.signDate" placeholder="选择日期" />
+              </t-form-item>
+              <t-form-item label="到期日期" name="expirationDate">
+                <t-date-picker v-model="secondFormData.expirationDate" placeholder="选择日期" />
+              </t-form-item>
+            </div>
+          </t-form>
+        </div>
+      </template>
+      <template v-if="currentStep === 3">
+        <div class="second-step-form-wrap tree">
+          <SetPermission :isShowFoot="false" :PermissionList="PermissionList" :allCheckedList="allCheckedList"
+            ref="permissionRef" />
+        </div>
+      </template>
+      <!-- 底部按钮 -->
+      <div class="btns-box" v-if="currentRoute === 'addBusiness'">
+        <t-button style="width:80px" theme="primary" v-show="currentStep === 1" type="submit"
+          @click="handleStepSecond('first')">下一步</t-button>
+        <t-button style="width:80px" theme="primary" v-show="currentStep === 1" plain
+          @click="router.back()">取消</t-button>
+        <t-button style="width:80px" theme="primary" v-show="currentStep === 2 || currentStep === 3" plain
+          @click="currentStep--">上一步</t-button>
+        <t-button style="width:80px" theme="primary" v-show="currentStep === 2" plain type="submit"
+          @click="handleStepSecond">下一步</t-button>
+        <t-button style="width:80px" theme="primary" v-show="currentStep === 3" @click="handleAddBusiness">保存</t-button>
+      </div>
     </div>
+    <!-- 右上角编辑窗 -->
+    <template v-if="currentRoute === 'businessDetail' || currentRoute === 'editBusiness'">
+      <EditBox :EtaBusinessId="businessId" :currentRoute="currentRoute" @editEtaBusiness="editEtaBusiness" />
+    </template>
+  </div>
 </template>
 <script setup>
 import { ref, reactive, onMounted, useTemplateRef } from 'vue';
 import Steps from "./components/Steps.vue";
 import SetPermission from "./components/SetPermission.vue";
+import EditBox from "./components/EditBox.vue";
 import { customInterence, roadshowInterence, businessCustomInterence } from '@/api/api.js';
 import { locationOptions } from '@/utils/location';
 import countryData from "@/utils/countryData";
@@ -239,9 +185,9 @@ const secondFormData = reactive({
   expirationDate: ''
 });
 const locationProps = reactive({
-    value: 'name',
-    children: 'city',
-    label: 'name',
+  value: 'name',
+  children: 'city',
+  label: 'name',
 });
 const cascaderProps = reactive({
   expandTrigger: 'hover',
@@ -252,19 +198,19 @@ const cascaderProps = reactive({
   multiple: true,
 });
 const teamSizeOpts = reactive([
-    {
-        val:'50人及以下',
-        label:'50人及以下'
-    },
-    {
-        val:'200人及以下',
-        label:'200人及以下'
-    },
-    {
-        val:'超过200人',
-        label:'超过200人'
-    }
-]) 
+  {
+    val: '50人及以下',
+    label: '50人及以下'
+  },
+  {
+    val: '200人及以下',
+    label: '200人及以下'
+  },
+  {
+    val: '超过200人',
+    label: '超过200人'
+  }
+])
 const tradeArr = ref([]); // 需要在getIndustry方法中赋值
 const salesArr = ref([]); // 需要在getSale方法中赋值
 const rules = {
@@ -306,27 +252,28 @@ const onPopupVisibleChange = (val) => {
 };
 const getBusinessNameSearch = async (val) => {
   let res = await customInterence.companyQccSearch({ KeyWord: val });
-    if (res.Ret === 200) {
-      if (res.Data && res.Data.length > 0) {
-        options.value = res.Data.map(item => ({ value: item.Name, ...item }));
-        showPopup.value = true;
-      } else {
-      }
+  if (res.Ret === 200) {
+    if (res.Data && res.Data.length > 0) {
+      options.value = res.Data.map(item => ({ value: item.Name, ...item }));
+      showPopup.value = true;
+    } else {
     }
+  }
 };
 
+// 当路由变化时执行数据更新逻辑
+watch(
+  () => route.fullPath,
+  (newPath, oldPath) => {
+    currentRoute.value = route.name
+    businessId.value = Number(route.query.id || 0)
+    getCurrentState()
+  }
+);
+
 // 生命周期钩子
 onMounted(() => {
-  if (currentRoute.value === 'addBusiness') { // 添加
-    fetchChosenData()
-  } else if (currentRoute.value === 'editBusiness') { // 修改
-    fetchChosenData()
-    fetchBusinessData()
-    getChartPermission(businessId.value)
-  } else if (currentRoute.value === 'businessDetail') { // 查看详情
-    fetchBusinessData()
-    getChartPermission(businessId.value)
-  }
+  getCurrentState()
 });
 
 // 监听器
@@ -338,6 +285,20 @@ watchEffect(() => {
   }
 });
 
+// 手动更新数据
+const getCurrentState = () => {
+  if (currentRoute.value === 'addBusiness') { // 添加
+    fetchChosenData()
+  } else if (currentRoute.value === 'editBusiness') { // 修改
+    fetchChosenData()
+    fetchBusinessData()
+    getChartPermission(businessId.value)
+  } else if (currentRoute.value === 'businessDetail') { // 查看详情
+    fetchBusinessData()
+    getChartPermission(businessId.value)
+  }
+}
+
 const getChartPermission = async (EtaBusinessId) => {
   try {
     const res = await businessCustomInterence.getChartPermission({
@@ -362,7 +323,7 @@ const fetchBusinessData = async () => {
   try {
     const res = await businessCustomInterence.getBusinessDetail({ EtaBusinessId: businessId.value });
     if (res.Ret !== 200) return;
-    const { RegionType, BusinessName, CreditCode, Nation, Leader, ResearchTeamSize, CapitalScale, IndustryId, UserMax, SellerId } = res.Data;
+    const { RegionType, BusinessName, CreditCode, Nation, Leader, ResearchTeamSize, CapitalScale, IndustryId, UserMax, SellerId, SigningTime, ExpiredTime } = res.Data;
     Object.assign(firstFormData, {
       areaType: RegionType,
       name: BusinessName,
@@ -376,8 +337,13 @@ const fetchBusinessData = async () => {
       saller: SellerId,
       address: [res.Data.Province || '', res.Data.City || '']
     });
+    Object.assign(secondFormData, {
+      expirationDate: ExpiredTime,
+      signDate: SigningTime,
+    });
+    
     //获取签约详情
-    getTableData()  
+    getTableData()
     //获取操作日志列表
     getTimeLineData()
   } catch (error) {
@@ -388,7 +354,7 @@ const fetchBusinessData = async () => {
 //获取签约详情
 const getTableData = async () => {
   try {
-    const res = await businessCustomInterence.getContractList({ EtaBusinessId:businessId.value });
+    const res = await businessCustomInterence.getContractList({ EtaBusinessId: businessId.value });
     if (res.Ret !== 200) return;
     recordData.value = res.Data || [];
   } catch (error) {
@@ -397,7 +363,7 @@ const getTableData = async () => {
 };
 
 // 监听销售变化
-const changeSaller = (value, {node}) => {
+const changeSaller = (value, { node }) => {
   cascaderNode.value = {
     saller: value,
     sallerName: node ? node.label : ''
@@ -407,7 +373,7 @@ const changeSaller = (value, {node}) => {
 // 获取操作日志详情
 const getTimeLineData = async () => {
   try {
-    const res = await businessCustomInterence.getTimeLineList({ EtaBusinessId:businessId.value });
+    const res = await businessCustomInterence.getTimeLineList({ EtaBusinessId: businessId.value });
     if (res.Ret !== 200) return;
     activities.value = res.Data || [];
   } catch (error) {
@@ -446,16 +412,16 @@ const handleStepSecond = async (stepName) => {
 
   if (stepName === 'first') {
     validRes = await firstFormEl.value.validate();
-    params = normalizingParams({ IsCheck: true,  ...firstFormData });
+    params = normalizingParams({ IsCheck: true, ...firstFormData });
   } else {
-    params = normalizingParams({ IsCheck: false,  ...firstFormData, ...secondFormData });
+    params = normalizingParams({ IsCheck: false, ...firstFormData, ...secondFormData });
     validRes = await formRef.value.validate();
   }
 
   if (validRes !== true) return;
   businessCustomInterence.addBusiness(params).then(res => {
     if (res.Ret === 200) {
-      currentStep .value++;
+      currentStep.value++;
       handleEtaBusinessId.value = res.Data.EtaBusinessId
       if (params.IsCheck === false) {
         getChartPermission(res.Data.EtaBusinessId) // 获取图表权限列表
@@ -464,12 +430,13 @@ const handleStepSecond = async (stepName) => {
   });
 };
 
-const handleAddBusiness = async () => {
+const handleAddBusiness = async (isEdit = '') => {
   const res = await businessCustomInterence.addChartPermission({
-    ChartClassifyIdStr: permissionRef.value.allChecked.join(',')||'',
-    EtaBusinessId: handleEtaBusinessId.value  === 0 ? businessId.value : handleEtaBusinessId.value
+    ChartClassifyIdStr: permissionRef.value.allChecked.join(',') || '',
+    EtaBusinessId: handleEtaBusinessId.value === 0 ? businessId.value : handleEtaBusinessId.value
   });
   if (res.Ret !== 200) return;
+  if(isEdit === 'edit') return MessagePlugin.success('保存成功');
   MessagePlugin.success('添加成功');
   router.push('/customer/businessList');
 };
@@ -482,7 +449,7 @@ const selectRegion = (e, context) => {
     firstFormData.province = e
   }
   console.log('省份：', firstFormData.province, '城市：', firstFormData.city);
-  
+
 };
 
 const getIndustry = () => {
@@ -504,54 +471,87 @@ const getSale = async () => {
 };
 
 const changeActiveStep = (index) => {
-  currentStep .value = index + 1
+  currentStep.value = index + 1
 }
 
+// 编辑
+const editEtaBusiness = async () => {
+  const {creditCode, address,decisionMaker,industry,nation,teamSize,userMax} = firstFormData;
+  const IndustryName = tradeArr.value.find(item => item.IndustryId === industry)?.IndustryName || '';
+  console.log(firstFormData);
+  
+  const query = {
+    EtaBusinessId: businessId.value,
+    Leader: decisionMaker,
+    IndustryName,
+    CapitalScale:creditCode||'',
+    ResearchTeamSize: teamSize||'',
+    Nation: nation,
+    IndustryId:Number(industry),
+    UserMax:Number(userMax),
+    Province:address[0],
+    City:address[1]
+  }
+  const res = await businessCustomInterence.editBusiness(query);
+  if (res.Ret !== 200) return;
+  handleAddBusiness('edit')
+}
 
 </script>
 <style lang="scss" scoped>
-.add-business{
-    padding:30px;
-    box-sizing: border-box;
-    background-color: #fff;
-    min-width: 1100px;
-    height: calc(100vh - 120px);
-    .add-steps {
+.add-business-box {
+  display: flex;
+  background-color: #fff;
+  min-width: 1100px;
+  min-height: calc(100vh - 120px);
+  padding: 30px;
+  box-sizing: border-box;
+  gap: 10%;
+
+  .add-business {
+    width: 70%;
+
+    .first-step-form-wrap,
+    .second-step-form-wrap {
+      margin-top: 60px;
+      border-top: 1px solid #DCDCDC;
       width: 70%;
     }
-    .first-step-form-wrap,.second-step-form-wrap{
-        margin-top:60px;
-        border-top: 1px solid #DCDCDC;
-        width:70%;
-    }
-    .t-form{
-        .form-line{
-            display: flex;
-            justify-content: space-between;
-            margin:30px 0;
-            border-bottom: 1px solid #DCDCDC;
-            .t-form__item {
-                width:48%;
-                margin-right: 20px;
-            }
+
+    .t-form {
+      .form-line {
+        display: flex;
+        justify-content: space-between;
+        margin: 30px 0;
+        border-bottom: 1px solid #DCDCDC;
+
+        .t-form__item {
+          width: 48%;
+          margin-right: 20px;
         }
+      }
     }
+
     .tree {
       padding: 30px 0;
     }
+  }
 }
-.btns-box{
-    position: fixed;
-    display: flex;
-    justify-content: space-between;
-    left: 50%;
-    bottom: 100px;
-    transform: translateX(-50%);
-    width: 200px;
-    z-index: 99;
+
+.btns-box {
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  left: 50%;
+  bottom: 100px;
+  transform: translateX(-50%);
+  width: 200px;
+  z-index: 99;
 }
+
 .tdesign-demo__select-input-ul-autocomplete {
   padding: 10px 0;
+
   div {
     cursor: pointer;
     padding: 0 10px;

src/views/business_manage/components/EditBox.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="business-other">
+        <div class="btn-wrap">
+            <template v-if="currentRoute === 'businessDetail'">
+                <t-button block theme="primary" variant="base" @click="goEdit">编辑</t-button>
+            </template>
+            <template v-if="currentRoute === 'editBusiness'">
+                <t-button block theme="primary" variant="base" @click="edit">编辑</t-button>
+                <t-button block theme="default" @click="goList">取消</t-button>
+            </template>
+        </div>
+        <div class="time-line-wrap">
+            <t-timeline layout="vertical" labelAlign="left" mode="same">
+                <t-timeline-item v-for="(activity, index) in activities" :key="index" color="#409EFF"
+                    :label="activity.CreateTime">
+                    {{ activity.OperationRemark }}
+                </t-timeline-item>
+            </t-timeline>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, onMounted } from 'vue';
+import { businessCustomInterence } from '@/api/api.js';
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const props = defineProps({
+    EtaBusinessId: { // 是否允许点击切换步骤
+        type: Number,
+        default: 0
+    },
+    currentRoute: { // 当前路由
+        type: String,
+        default: ''
+    }
+});
+const emit = defineEmits(['editEtaBusiness']);
+
+const activities = ref([])
+
+onMounted(() => {
+    handleCheckChange()
+});
+
+
+// 去编辑页面
+const goEdit = () => {
+    router.push({
+        path: '/customer/editBusiness',
+        query: {
+            id: props.EtaBusinessId
+        }
+    })
+}
+
+// 取消编辑返回列表页
+const goList = () => {
+    router.push({
+        path: '/customer/businessList',
+    })
+}
+
+// 编辑按钮事件
+const edit = () => {
+    emit('editEtaBusiness', 1)
+}
+
+// 获取操作日志详情
+const handleCheckChange = async () => {
+    const res = await businessCustomInterence.getTimeLineList({
+        EtaBusinessId: props.EtaBusinessId,
+    })
+    if (res.Ret !== 200) return
+    activities.value = res.Data || []
+}
+
+</script>
+
+<style scoped lang="scss">
+.business-other {
+    flex: 1;
+
+    .btn-wrap {
+        display: flex;
+        gap: 30px;
+
+        .el-button {
+            flex: 1;
+        }
+    }
+
+    .time-line-wrap {
+        margin-top: 30px;
+        border: 1px solid #DCDFE6;
+        border-radius: 4px;
+        box-sizing: border-box;
+        padding: 30px;
+        max-height: calc(100vh - 250px);
+        overflow-y: auto;
+
+        .dot-wrap {
+            width: 12px;
+            height: 12px;
+            border: 6px solid #fff;
+            background-color: #3385FF;
+            position: absolute;
+            left: -6px;
+            top: 0;
+            border-radius: 50%;
+
+            .dot-inner {
+                position: absolute;
+                left: 3px;
+                top: 3px;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+    }
+}
+</style>