1、我的待办页面 设备维修 分类审批弹窗功能逻辑开发 2、设备台帐页面设备履历功能开发 3、故障报修页面调整上传图片功能逻辑

zhaowei

2025-04-22 b4feac3bad1287c19ccaf78d11bb312daa09689e

1、我的待办页面 设备维修 分类审批弹窗功能逻辑开发
2、设备台帐页面设备履历功能开发
3、故障报修页面调整上传图片功能逻辑

 src/views/eam/equipment/EamEquipmentList.vue

@@ -168,13 +168,13 @@

    <a-tabs v-model="activeTabKey" @change="handleTabChange">
      <a-tab-pane tab="设备文档" :key="1">
        <eam-equipment-attachment-list ref="tabPaneTableListRef1" />
        <eam-equipment-attachment-list ref="tabPaneTableListRef1"/>
      </a-tab-pane>
      <a-tab-pane tab="点检工单" :key="2">
        <eam-inspection-order-list ref="tabPaneTableListRef2" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane tab="周保工单" :key="3">
        <eam-week-maintenance-order-list ref="tabPaneTableListRef3" :isDisplayOperation="false" />
        <eam-week-maintenance-order-list ref="tabPaneTableListRef3" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane tab="维修工单" :key="4">
        <eam-repair-order-list ref="tabPaneTableListRef4" :isDisplayOperation="false"/>
@@ -189,7 +189,7 @@
    <!--铭牌弹窗-->
    <nameplate-modal ref="nameplateModalRef" :printedRows="printedRows"/>
    <!--履历弹窗-->
    <resume-drawer ref="resumeDrawerRef"/>
    <resume-drawer ref="resumeDrawerRef" :currentTableRowRecord="currentTableRowRecord"/>
  </a-card>
</template>

@@ -479,7 +479,8 @@
        treeData: [],
        printedRows: [],
        activeTabKey: 1,
        appHomeUrl: ''
        appHomeUrl: '',
        currentTableRowRecord: {}
      }
    },
    computed: {
@@ -518,7 +519,11 @@
       * @param record 表格行信息
       */
      handleOpenResumeDrawer(record) {
        this.currentTableRowRecord = Object.assign({}, record)
        this.$refs.resumeDrawerRef.title = '设备履历' + `（${record.equipmentCode}）`
        this.$refs.resumeDrawerRef.dataSource = []
        this.$refs.resumeDrawerRef.visible = true
        this.$nextTick(() => this.$refs.resumeDrawerRef.getEquipmentResumeByApi())
      },

      /**
@@ -565,7 +570,7 @@
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
        this.$refs['tabPaneTableListRef' + this.activeTabKey].queryParam.equipmentId = null;
        this.$refs['tabPaneTableListRef' + this.activeTabKey].queryParam.equipmentId = null
        this.$refs['tabPaneTableListRef' + this.activeTabKey].dataSource = []
        this.$refs['tabPaneTableListRef' + this.activeTabKey].onClearSelected()
        if (selectedRowKeys.length === 1) this.loadTabPaneTableData(selectedRowKeys[0])

 src/views/eam/equipment/modules/ResumeDrawer.vue

@@ -1,98 +1,124 @@
<template>
  <a-drawer title="设备履历" placement="right" :width="500" :closable="false" :visible="visible" @close="onClose">
    <a-timeline mode="alternate">
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item color="green">
        Solve initial network problems 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item color="red">
        Network problems being solved 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item color="green">
        Solve initial network problems 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item color="red">
        Network problems being solved 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item color="green">
        Solve initial network problems 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item color="red">
        Network problems being solved 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Technical testing 2015-09-01
      </a-timeline-item>
    </a-timeline>
  <a-drawer :title="title" placement="right" :width="600" :closable="false" :visible="visible" @close="onClose">
    <a-spin :spinning="spinning">
      <a-skeleton :title="false" :paragraph="{ rows: 30}" v-if="spinning&&dataSource.length===0"/>

      <template v-if="dataSource.length>0">
        <a-timeline mode="alternate">
          <a-timeline-item v-for="item in dataSource" :key="item.id">
            <span>操作人：{{item.operator_dictText}}</span><br/>
            <span>操作：{{item.operationTag_dictText}}</span><br/>
            <!--<span>描述：{{item.description}}</span>-->
            <span>操作时间：{{item.createTime}}</span>
          </a-timeline-item>
        </a-timeline>

        <div style="text-align: center">
          <a v-if="dataSource.length>0&&pageConfig.pageNo===1&&pageConfig.pageNo!==pageConfig.totalPage"
             @click="loadNextPageData">
            点击加载更多
            <a-icon type="down"/>
          </a>

          <span v-if="isNoMoreData">- 已经到底了 -</span>

          <a-empty v-if="dataSource.length===0"/>
        </div>
      </template>
    </a-spin>
  </a-drawer>
</template>

<script>
export default {
  name: 'ResumeDrawer',
  data() {
    return {
      visible: false
    }
  },
  methods: {
    getEquipmentResumeByApi() {
  import { getAction } from '@/api/manage'

  export default {
    name: 'ResumeDrawer',
    props: {
      currentTableRowRecord: {
        type: Object
      }
    },
    data() {
      return {
        title: '设备履历',
        visible: false,
        spinning: false,
        dataSource: [],
        url: {
          list: '/eam/equipmentHistoryLog/list'
        },
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          totalPage: 0
        },
        drawerBodyElement: null,
        isNoMoreData: false
      }
    },
    methods: {
      getEquipmentResumeByApi(pageNo = 1) {
        this.pageConfig.pageNo = pageNo
        const params = Object.assign({}, this.pageConfig, { equipmentId: this.currentTableRowRecord.id })
        const that = this
        this.spinning = true
        getAction(this.url.list, params)
          .then(res => {
            if (res.success) {
              console.log('res.result', res.result)
              if (!this.pageConfig.totalPage) this.pageConfig.totalPage = res.result.pages
              res.result.records.forEach(item => that.dataSource.push(item))
              if (this.pageConfig.totalPage !== this.pageConfig.pageNo) {
                if (res.result.current === 2) {
                  if (!this.drawerBodyElement) this.drawerBodyElement = document.querySelector('.ant-drawer-body')
                  this.drawerBodyElement.addEventListener('scroll', this.handleDrawerBodyScroll)
                }
              } else this.isNoMoreData = true
            }
          })
          .finally(() => {
            that.spinning = false
          })
      },

    onClose() {
      this.visible = false
      // 加载下一页数据
      loadNextPageData() {
        const current = this.pageConfig.pageNo + 1
        this.getEquipmentResumeByApi(current)
      },

      // 抽屉元素滚动事件
      handleDrawerBodyScroll() {
        if (this.pageConfig.totalPage === this.pageConfig.pageNo) return
        const { scrollTop, clientHeight, scrollHeight } = this.drawerBodyElement
        if (scrollTop + clientHeight + 1 >= scrollHeight) this.loadNextPageData()
      },

      onClose() {
        this.visible = false
        this.pageConfig.totalPage = 0
        this.isNoMoreData = false
        if (this.drawerBodyElement) this.drawerBodyElement.removeEventListener('scroll', this.handleDrawerBodyScroll)
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .ant-drawer-wrapper-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /deep/ .ant-drawer-wrapper-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

  .ant-drawer-body {
    flex: 1;
    overflow: auto;
    .ant-drawer-body {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>

 src/views/flowable/workflow/FlowCompleted.vue

@@ -27,7 +27,7 @@
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>

 src/views/flowable/workflow/FlowLedger.vue

@@ -37,7 +37,7 @@
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>

 src/views/flowable/workflow/FlowTodo.vue

@@ -37,7 +37,7 @@
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>

 src/views/flowable/workflow/InspectionOrder/InspectionOrderHandle.vue

@@ -475,11 +475,6 @@
  }
</script>
<style scoped>
  .btn-custom {
    background-color: #4CAF50; /* 绿色背景 */
    color: #fff; /* 白色文字 */
  }

  /deep/ .ant-select-dropdown-menu {
    text-align: left;
  }

 src/views/flowable/workflow/repairOrder/RepairOrderApprovalModal.vue

@@ -9,7 +9,7 @@
    centered
  >
    <a-spin :spinning="spinning">
      <a-form-model :model='tableRowRecord' :rules='validatorRules' :labelCol='labelCol'
      <a-form-model ref="form" :model='tableRowRecord' :rules='validatorRules' :labelCol='labelCol'
                    :wrapperCol='wrapperCol'>
        <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;">报修基础信息</a-divider>

@@ -25,18 +25,13 @@
            </a-form-model-item>
          </a-col>
          <a-col :span='threeColSpan'>
            <a-form-model-item label='单据状态'>
              <a-input :readOnly='inputReadOnly' v-model='tableRowRecord.repairStatus_dictText'/>
            <a-form-model-item label='维修负责人'>
              <a-input :readOnly='inputReadOnly' v-model='tableRowRecord.repairer'/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span='threeColSpan'>
            <a-form-model-item label='维修负责人'>
              <a-input :readOnly='inputReadOnly' v-model='tableRowRecord.repairer'/>
            </a-form-model-item>
          </a-col>
          <a-col :span="threeColSpan">
            <a-form-model-item label="故障开始时间">
              <a-input :readOnly='inputReadOnly' v-model="tableRowRecord.faultStartTime"/>
@@ -54,7 +49,8 @@
        <a-row>
          <a-col :span='threeColSpan*3'>
            <a-form-model-item label='报修图片' :labelCol='labelColLong' :wrapperCol='wrapperColLong'>
              <j-image-upload v-model="tableRowRecord.imageFiles" disabled :is-multiple="true" :number="3"/>
              <lx-upload :returnUrl="false" :isMultiple="true" file-type="image" disabled :number="3"
                         v-model="tableRowRecord.reportImageFiles"/>
            </a-form-model-item>
          </a-col>
        </a-row>
@@ -63,37 +59,40 @@

        <a-tabs v-model="activeTabKey">
          <a-tab-pane key="1" tab="领用备件">
            <a-form-model ref="form" :model="approveData" :rules="validatorRules" :labelCol='labelCol'
                          :wrapperCol='wrapperCol'>
              <a-row>
            <a-row>
              <a-col :span="twoColSpan*2">
                <a-form-model-item label="是否需要领用备件" prop="isUseSpare">
                  <a-radio-group v-model="tableRowRecord.isUseSpare">
                    <a-radio :value="1">是</a-radio>
                    <a-radio :value="0">否</a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>

              <template v-if="tableRowRecord.isUseSpare===0">
                <a-col :span="twoColSpan*2">
                  <a-form-model-item label="是否需要领用备件" prop="status">
                    <a-radio-group v-model="approveData.status">
                      <a-radio :value="1">是</a-radio>
                      <a-radio :value="0">否</a-radio>
                    </a-radio-group>
                  <a-form-model-item label="故障原因" prop="faultReason">
                    <a-input :readOnly="disableSubmit||tableRowRecord.repairStatus!=='UNDER_REPAIR'"
                             v-model="tableRowRecord.faultReason" rows="4"
                             placeholder="请输入故障原因"/>
                  </a-form-model-item>
                </a-col>

                <template v-if="approveData.status===0">
                  <a-col :span="twoColSpan*2">
                    <a-form-model-item label="故障原因" prop="faultReason">
                      <a-input v-model="approveData.faultReason" rows="4" placeholder="请输入故障原因"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="twoColSpan*2">
                    <a-form-model-item label="维修结果描述" prop="repairResultDescription">
                      <a-textarea v-model="approveData.repairResultDescription" placeholder="请输入维修结果描述"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="twoColSpan*2">
                    <a-form-model-item label="维修图片">
                      <j-image-upload v-model="approveData.imageFiles" :is-multiple="true" :number="3"/>
                    </a-form-model-item>
                  </a-col>
                </template>
              </a-row>
            </a-form-model>
                <a-col :span="twoColSpan*2">
                  <a-form-model-item label="维修结果描述" prop="repairDescription">
                    <a-textarea :readOnly="disableSubmit||tableRowRecord.repairStatus!=='UNDER_REPAIR'"
                                v-model="tableRowRecord.repairDescription"
                                placeholder="请输入维修结果描述"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="twoColSpan*2">
                  <a-form-model-item label="维修图片">
                    <lx-upload :returnUrl="false" :isMultiple="true" file-type="image" :number="3"
                               :disabled="disableSubmit||tableRowRecord.repairStatus!=='UNDER_REPAIR'"
                               v-model="tableRowRecord.imageFiles"/>
                  </a-form-model-item>
                </a-col>
              </template>
            </a-row>
          </a-tab-pane>

          <a-tab-pane key='2' tab='流程节点'>
@@ -113,33 +112,55 @@
          </a-tab-pane>

          <a-tab-pane key='3' tab='流程图'>
            <img :src="imageSrc" alt="Fetched Image"/>-->
            <img :src="imageSrc" alt="Fetched Image"/>
          </a-tab-pane>
        </a-tabs>

        <template>
        <template v-if="isDisplayConfirmSpare">
          <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;">管理员领用备件
          </a-divider>

          <a-row>
            <a-col :span="twoColSpan">
              <a-form-model-item prop="confirmDealType" label="处理类型">
                <j-dict-select-tag type='radio' v-model='tableRowRecord.confirmDealType' dictCode='approved_rejected'
                                   :disabled="disableSubmit||tableRowRecord.inspectionStatus!=='WAIT_CONFIRM'"
                                   placeholder="请选择处理类型"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="twoColSpan">
              <a-form-model-item prop="confirmComment" label="处理意见">
                <a-textarea placeholder="请输入处理意见"
                            :disabled="disableSubmit||tableRowRecord.inspectionStatus!=='WAIT_CONFIRM'"
                            v-model="tableRowRecord.confirmComment"/>
            <a-col :span="twoColSpan*2">
              <a-form-model-item prop="sparePartDescription" label="备件描述">
                <a-textarea :readOnly="disableSubmit||tableRowRecord.repairStatus!=='WAIT_SPARES'"
                            v-model="tableRowRecord.sparePartDescription"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </template>

        <template v-if="tableRowRecord.sparePartDescription">
          <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;">维修结果上报</a-divider>
          <a-row>
            <a-col :span="twoColSpan*2">
              <a-form-model-item label="故障原因" prop="faultReason">
                <a-input :readOnly="disableSubmit||isDisableSubmitRepairResult" v-model="tableRowRecord.faultReason"
                         rows="4" placeholder="请输入故障原因"/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="twoColSpan*2">
              <a-form-model-item label="维修结果描述" prop="repairDescription">
                <a-textarea :readOnly="disableSubmit||isDisableSubmitRepairResult"
                            v-model="tableRowRecord.repairDescription"
                            placeholder="请输入维修结果描述"/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="twoColSpan*2">
              <a-form-model-item label="维修图片">
                <lx-upload :disabled="disableSubmit||isDisableSubmitRepairResult" :returnUrl="false" :isMultiple="true"
                           file-type="image" :number="3"
                           v-model="tableRowRecord.imageFiles"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </template>
      </a-form-model>
    </a-spin>
  </a-modal>
@@ -162,7 +183,6 @@
    data() {
      return {
        title: '',
        form: this.$form.createForm(this),
        threeColSpan: 8,
        twoColSpan: 12,
        inputReadOnly: true,
@@ -189,13 +209,16 @@
          sm: { span: 20 }
        },
        validatorRules: {
          status: [
          isUseSpare: [
            { required: true, message: '请选择是否需要领用备件' }
          ],
          sparePartDescription: [
            { required: true, message: '请输入备件描述' }
          ],
          faultReason: [
            { required: true, message: '请输入故障原因' }
          ],
          repairResultDescription: [
          repairDescription: [
            { required: true, message: '请输入维修结果描述' }
          ]
        },
@@ -206,8 +229,16 @@
          queryBomDataById: '/eam/eamRepairOrder/queryById',
          diagramView: '/assign/flow/diagramView',
          queryHisTaskList: '/assign/flow/queryHisTaskList',
          approve: '/activit/assign/file/approve'
          approve: '/eam/eamRepairOrder/perform'
        }
      }
    },
    computed: {
      isDisplayConfirmSpare() {
        return ['WAIT_SPARES', 'WAIT_CONFIRM', 'COMPLETE'].includes(this.tableRowRecord.repairStatus)
      },
      isDisableSubmitRepairResult() {
        return ['WAIT_CONFIRM', 'COMPLETE'].includes(this.tableRowRecord.repairStatus)
      }
    },
    methods: {
@@ -249,12 +280,15 @@
        const that = this
        const param = { id: record.dataId }
        this.tableRowRecord = {}
        this.approveData = { status: 0 }
        this.activeTabKey = '1'
        getAction(this.url.queryBomDataById, param)
          .then((res => {
            if (res.success) {
              that.tableRowRecord = res.result
              that.tableRowRecord = Object.assign({}, res.result, {
                isUseSpare: res.result.isUseSpare === null ? 0 : res.result.isUseSpare,
                imageFiles: JSON.parse(res.result.imageFiles),
                reportImageFiles: JSON.parse(res.result.reportImageFiles)
              })
              console.log('this.tableRowRecord----->', that.tableRowRecord)
            }
          }))
@@ -269,27 +303,34 @@
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            const { isUseSpare, faultReason, repairDescription, sparePartDescription, imageFiles, equipmentId } = that.tableRowRecord
            const { dataId, id, procInstId, taskDefKey, variables } = that.selectShenpiData

            const flowTaskVo = {}
            flowTaskVo.status = that.approveData.status
            flowTaskVo.approveContent = flowTaskVo.comment = that.approveData.approveContent
            flowTaskVo.dataId = this.selectShenpiData.dataId
            flowTaskVo.taskId = this.selectShenpiData.id
            flowTaskVo.userId = flowTaskVo.assignee = this.selectShenpiData.assignee
            flowTaskVo.instanceId = this.selectShenpiData.procInstId
            flowTaskVo.targetKey = this.selectShenpiData.taskDefKey
            flowTaskVo.values = this.selectShenpiData.variables
            flowTaskVo.isUseSpare = isUseSpare
            flowTaskVo.faultReason = faultReason
            flowTaskVo.repairDescription = repairDescription
            flowTaskVo.sparePartDescription = sparePartDescription
            flowTaskVo.imageFilesResult = imageFiles
            flowTaskVo.equipmentId = equipmentId
            flowTaskVo.id = dataId
            flowTaskVo.dataId = dataId
            flowTaskVo.taskId = id
            flowTaskVo.instanceId = procInstId
            flowTaskVo.targetKey = taskDefKey
            flowTaskVo.values = variables
            console.log('表单提交数据', flowTaskVo)
            // httpAction(this.url.approve, flowTaskVo, 'post')
            //   .then((res) => {
            //     if (res.success) {
            //       that.$message.success(res.message)
            //       that.$emit('ok')
            //     } else {
            //       that.$message.warning(res.message)
            //     }
            //   }).finally(() => {
            //   that.confirmLoading = false
            // })
            httpAction(this.url.approve, flowTaskVo, 'post')
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              }).finally(() => {
              that.confirmLoading = false
            })
          } else {
            return false
          }
@@ -298,44 +339,8 @@

      handCancel() {
        this.visible = false
        this.$refs.form.clearValidate()
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }
  }
</script>
<style scoped>
  .btn-custom {
    background-color: #4CAF50; /* 绿色背景 */
    color: #fff; /* 白色文字 */
  }

  .left_qiu {
    position: absolute;
    left: -74px;
    top: 0;
    width: 54px;
    border-radius: 50%;
    height: 54px;
    font-size: 13px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #0099ff;
    transform: translate(0, 0);
  }

  /deep/ .ant-timeline-item-tail {
    left: -29px !important;
  }

  .left_qiu span {
    width: 3em;
    display: block;
    color: #fff;
    text-align: center;
  }

  @import '~@assets/less/common.less';
</style>
</script>