From 77ede824c07be49546d94f1054f07e65c2b1c833 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Sat, 27 Sep 2025 13:29:48 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AB=99=E5=86=85=E7=9B=B4=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/materialsStation/index.js             |   73 +-
 .../straight/straightTransfer/index.vue       | 1503 +++++++++++++++++
 .../components/title-tip.vue                  |   37 +
 .../straight/straightTransferReview/index.vue |  267 +++
 .../straightTransferReview/reviewDetails.vue  |  477 ++++++
 5 files changed, 2356 insertions(+), 1 deletion(-)
 create mode 100644 src/views/materialsStation/straight/straightTransfer/index.vue
 create mode 100644 src/views/materialsStation/straight/straightTransferReview/components/title-tip.vue
 create mode 100644 src/views/materialsStation/straight/straightTransferReview/index.vue
 create mode 100644 src/views/materialsStation/straight/straightTransferReview/reviewDetails.vue

diff --git a/src/api/materialsStation/index.js b/src/api/materialsStation/index.js
index ce77bef1..d3163d26 100644
--- a/src/api/materialsStation/index.js
+++ b/src/api/materialsStation/index.js
@@ -302,7 +302,7 @@ export function equipmentTypeTree(data) {
 }
 
 // 领料申请租赁工程下拉框
-export function getListProject(data) {
+export function getListProject(data = {}) {
   return request({
     url: '/material/select/getProjectInfo',
     method: 'post',
@@ -846,3 +846,74 @@ export function getLeaseDataByCode(data) {
   })
 }
 
+// 站内直转-列表
+export function getUseDataApi(data) {
+  return request({
+    url: '/material/material_direct/getUseData',
+    method: 'post',
+    data
+  })
+}
+
+// 站内直转-设备树
+export function getUseThreeTreeApi(data) {
+  return request({
+    url: '/material/material_direct/getUseThreeTree',
+    method: 'post',
+    data
+  })
+}
+
+// 站内直转-新增
+export function addUseApi(data) {
+  return request({
+    url: '/material/material_direct/add',
+    method: 'post',
+    data
+  })
+}
+
+// 站内直转审核
+export function getUseListApi(data) {
+  return request({
+    url: '/material/material_direct/list',
+    method: 'get',
+    params: data
+  })
+}
+
+// 站内直转-编辑详情
+export function getInfoApi(query) {
+  return request({
+    url: '/material/material_direct/getInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 站内直转-编辑
+export function editUseApi(data) {
+  return request({
+    url: '/material/material_direct/edit',
+    method: 'post',
+    data
+  })
+}
+
+// 站内直转-删除
+export function deleteUseApi(data) {
+  return request({
+    url: '/material/material_direct/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 站内直转-审核
+export function directUpdateApi(data) {
+  return request({
+    url: '/material/material_direct/directUpdate',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/views/materialsStation/straight/straightTransfer/index.vue b/src/views/materialsStation/straight/straightTransfer/index.vue
new file mode 100644
index 00000000..dade6856
--- /dev/null
+++ b/src/views/materialsStation/straight/straightTransfer/index.vue
@@ -0,0 +1,1503 @@
+<template>
+  <div class="app-container">
+    <el-form :model="maForm" ref="maForm" size="small" :rules="rules" label-width="100px" :disabled="isDetail">
+      <el-row :gutter="20" class="cont-center" style="margin-bottom: 20px">
+        <el-col :span="7" :offset="0">
+          <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px; overflow-y: auto">
+            <!-- card body -->
+            <el-form-item label="转出工程" prop="backProId">
+              <!-- <treeselect
+                v-model="maForm.backProId"
+                :disabled="isEdit || isDetail"
+                :options="projectList"
+                :normalizer="normalizer"
+                :show-count="true"
+                style="width: 240px"
+                :disable-branch-nodes="true"
+                noChildrenText="没有数据了"
+                noOptionsText="没有数据"
+                noResultsText="没有搜索结果"
+                placeholder="请选择转出工程"
+                @select="projectChange"
+              /> -->
+              <!-- 下拉 -->
+              <el-select
+                v-model="maForm.backProId"
+                placeholder="请选择"
+                clearable
+                filterable
+                @change="projectChange"
+                style="width: 240px"
+              >
+                <el-option v-for="item in projectList" :key="item.proId" :label="item.proName" :value="item.proId" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="转出班组" prop="backTeamId">
+              <!-- <treeselect
+                v-model="maForm.backTeamId"
+                :disabled="isEdit || isDetail"
+                :options="uniteList"
+                :normalizer="normalizer"
+                :show-count="true"
+                style="width: 240px"
+                :disable-branch-nodes="true"
+                noChildrenText="没有数据了"
+                noOptionsText="没有数据"
+                noResultsText="没有搜索结果"
+                placeholder="请选择转出单位"
+                @select="uniteChange"
+              /> -->
+              <el-select
+                v-model="maForm.backTeamId"
+                placeholder="请选择"
+                clearable
+                filterable
+                @change="uniteChange"
+                style="width: 240px"
+              >
+                <el-option v-for="item in uniteList" :key="item.id" :label="item.teamName" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="转出人" prop="backMan">
+              <el-input
+                v-model="maForm.backMan"
+                placeholder="请输入转出人"
+                clearable
+                maxlength="50"
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="联系电话" prop="backPhone">
+              <el-input
+                v-model="maForm.backPhone"
+                placeholder="请输入联系电话"
+                clearable
+                maxlength="11"
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+          </el-card>
+        </el-col>
+        <el-col :span="2" :offset="0">
+          <div class="cont-center">
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="require('@/assets/img/transform.png')"
+              fit="fit"
+            ></el-image>
+          </div>
+        </el-col>
+        <el-col :span="7" :offset="0">
+          <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px; overflow-y: auto">
+            <!-- card body -->
+            <el-form-item label="转入工程" prop="leaseProId">
+              <el-select
+                v-model="maForm.leaseProId"
+                placeholder="请选择"
+                clearable
+                filterable
+                @change="leaseProjectChange"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in leaseProjectList"
+                  :key="item.proId"
+                  :label="item.proName"
+                  :value="item.proId"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="转入班组" prop="leaseTeamName">
+              <el-select
+                v-model="maForm.leaseTeamName"
+                placeholder="请选择"
+                clearable
+                filterable
+                @change="leaseUniteChange"
+                style="width: 240px"
+              >
+                <el-option v-for="item in lessUniteList" :key="item.id" :label="item.teamName" :value="item.teamName" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="转入人" prop="leaseMan">
+              <el-input
+                v-model="maForm.leaseMan"
+                placeholder="请输入转入人"
+                clearable
+                maxlength="50"
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="联系电话" prop="leasePhone">
+              <el-input
+                v-model="maForm.leasePhone"
+                placeholder="请输入联系电话"
+                clearable
+                maxlength="11"
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+          </el-card>
+        </el-col>
+
+        <el-col :span="8" :offset="0">
+          <el-form-item label="" prop="dirUrls">
+            <el-upload
+              :action="uploadUrl"
+              :file-list="maForm.dirUrls"
+              :show-file-list="true"
+              :auto-upload="true"
+              :headers="headers"
+              :key="uploadKey"
+              :limit="3"
+              list-type="picture-card"
+              accept=".png, .jpg, .jpeg, .pdf"
+              :before-upload="beforeUpload"
+              :on-change="handleChangeBusinessList"
+              :class="{ disabledFbs: uploadDisabled }"
+              :on-preview="picturePreviewFbs"
+              :on-remove="handleRemoveElectricianImgList"
+              :disabled="isDetail"
+            >
+              <!-- 文件格式下载，图片格式预览 -->
+              <div slot="file" slot-scope="{ file }">
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+
+                <span class="el-upload-list__item-actions">
+                  <span class="el-upload-list__item-preview" @click="picturePreviewFbs(file)">
+                    <i class="el-icon-zoom-in" />
+                  </span>
+                  <span
+                    v-if="!isDetail"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemoveElectricianImgList(file)"
+                  >
+                    <i class="el-icon-delete" />
+                  </span>
+                </span>
+              </div>
+              <i class="el-icon-plus avatar-uploader-icon">
+                <div style="font-size: 14px; margin-top: 10px">上传图片</div>
+              </i>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10" class="mb8">
+        <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
+          <el-form-item label="物资类型" prop="maId">
+            <treeselect
+              v-model="queryParams.maId"
+              :options="materialTypeOpts"
+              :normalizer="normalizer2"
+              :show-count="true"
+              style="width: 240px"
+              :disable-branch-nodes="true"
+              noChildrenText="没有数据了"
+              noOptionsText="没有数据"
+              noResultsText="没有搜索结果"
+              placeholder="请选择物资类型"
+              @select="selectMaType"
+            />
+          </el-form-item>
+
+          <el-form-item label="规格型号" prop="typeId">
+            <el-select v-model="queryParams.typeId" placeholder="请选择规格型号" clearable filterable>
+              <el-option v-for="item in typeModelNameOpts" :key="item.typeId" :label="item.name" :value="item.typeId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关键字" prop="keyWord">
+            <el-input
+              v-model="queryParams.keyWord"
+              placeholder="请输入关键字"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <!-- 表单按钮 -->
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleSave" v-if="!isDetail">
+              {{ isEdit ? '保存' : '发起提交' }}
+            </el-button>
+            <!-- <el-button
+                            type="primary"
+                            plain
+                            icon="el-icon-arrow-left"
+                            size="mini"
+                            @click="handleApplyRecord"
+                        >
+                            直转记录查看
+                        </el-button> -->
+          </el-form-item>
+        </el-form>
+      </el-row>
+    </el-form>
+
+    <!-- 数据状态提示 -->
+    <div
+      class="data-status-info"
+      style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center"
+    >
+      <!-- 分页状态 -->
+      <div
+        style="
+          padding: 8px 12px;
+          background-color: #f8fafc;
+          border: 1px solid #e2e8f0;
+          border-radius: 4px;
+          color: #475569;
+          font-size: 14px;
+        "
+      >
+        <i class="el-icon-info"></i>
+        总共
+        <strong>{{ total }}</strong>
+        条数据，当前显示第
+        <strong>{{ queryParams.pageNum }}</strong>
+        页，每页
+        <strong>{{ queryParams.pageSize }}</strong>
+        条
+      </div>
+
+      <!-- 选中数量提示 -->
+      <div
+        v-if="multipleSelection.length > 0"
+        style="
+          padding: 8px 12px;
+          background-color: #f0f9ff;
+          border: 1px solid #bfdbfe;
+          border-radius: 4px;
+          color: #1e40af;
+        "
+      >
+        <i class="el-icon-info"></i>
+        已选中
+        <strong>{{ multipleSelection.length }}</strong>
+        条数据
+        <span style="margin-left: 10px; font-size: 12px; color: #64748b"></span>
+        <el-button type="text" size="mini" style="margin-left: 10px; color: #ef4444" @click="clearCrossPageSelection">
+          清空选择
+        </el-button>
+      </div>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      ref="equipmentList"
+      :data="equipmentList"
+      :row-key="getRowKey"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column align="center" label="序号" width="55">
+        <template slot-scope="scope">
+          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="(column, index) in tableColumns"
+        :key="column.prop"
+        :label="column.label"
+        :prop="column.prop"
+        align="center"
+        show-overflow-tooltip
+      >
+        <template v-slot="scope" v-if="column.prop == 'directNum'">
+          <el-input-number
+            v-model="scope.row.directNum"
+            :value="scope.row.directNum || ''"
+            controls-position="right"
+            :precision="scope.row.unitValue == 1 ? 3 : 0"
+            style="width: 100%"
+            :disabled="isDetail || !scope.row.isActive"
+            :min="scope.row.unitValue == 1 ? 0.001 : 1"
+            @change="directNumChange(scope.row)"
+          ></el-input-number>
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column label="操作" align="center" v-if="!isDetail">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-delete" style="color: red" @click="handleDelete(scope.row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 图片查看弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" width="600px" height="600px">
+      <img width="100%" height="500px" :src="dialogImageUrl" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getMaTypeOpt } from '@/api/ma/base'
+import { downloadFile, downloadFileData } from '@/utils/download'
+import {
+  getListProject,
+  getTeamListApi,
+  getBmTeamApi,
+  getAgreementInfoByIdBackApi,
+  getUseDataApi,
+  getUseThreeTreeApi,
+  addUseApi,
+  editUseApi,
+  getInfoApi
+} from '@/api/materialsStation/index'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getToken } from '@/utils/auth'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'GroundDirect',
+  dicts: ['purchase_task_status'],
+  components: { Treeselect, Pagination },
+  data() {
+    return {
+      id: '',
+      isEdit: false, // 是否编辑
+      isDetail: false, // 是否查看
+      // 遮罩层
+      loading: false,
+      loadingTwo: false,
+      // 选中数组
+      multipleSelection: [],
+      // 回显选中数据
+      multipleSelectionTemp: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      selectTreeProps: {
+        children: 'children',
+        label: 'name',
+        // multiple: false,
+        value: 'id'
+        // multiple: true,
+      },
+      //租赁单位
+      uniteList: [],
+      lessUniteList: [],
+      //租赁工程
+      projectList: [],
+      leaseProjectList: [],
+      // 物资类型
+      materialTypeOpts: [],
+      // 类型规格
+      typeModelNameOpts: [],
+      // 表格数据
+      equipmentList: [],
+      // 表头
+      tableColumns: [
+        { label: '直转数量', prop: 'directNum' },
+        { label: '类型名称', prop: 'typeName' },
+        { label: '规格型号', prop: 'typeModelName' },
+        { label: '设备编码', prop: 'maCode' },
+        { label: '计量单位', prop: 'unitName' },
+        { label: '在用数量', prop: 'useNum' },
+        { label: '领料人', prop: 'leasePerson' },
+        { label: '领料日期', prop: 'startTime' }
+      ],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      rowData: {},
+      unitId: null,
+      projectId: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1, // 当前页码
+        pageSize: 20, // 每页显示数量
+        maId: undefined, // 物资类型
+        typeId: '', // 类型规格
+        keyWord: ''
+      },
+      // 前端分页数据
+      allData: [], // 存储所有数据
+      // 跨页勾选数据专用数组
+      selectedDataArray: [], // 专门存储所有选中的完整数据
+      // 防止事件循环的标志位
+      isRestoringSelection: false, // 正在恢复选中状态时为true
+      maForm: {
+        backTeamId: undefined,
+        backProId: undefined,
+        backMan: '', // 转出人
+        backPhone: '', // 联系电话
+        backAgreementId: '', // 转出协议id
+        backAgreementCode: '', // 转出协议编号
+        leaseTeamName: undefined, // 转入单位
+        leaseProId: undefined, // 转入工程
+        leaseMan: '', // 转入人
+        leasePhone: '', // 联系电话
+        leaseAgreementId: '', // 转入协议id
+        leaseAgreementCode: '', // 转入协议编号
+        dirUrls: [] // 附件
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 表单校验
+      rules: {
+        backTeamId: [
+          {
+            required: true,
+            message: '请选择转出单位',
+            trigger: 'blur'
+          }
+        ],
+        backProId: [
+          {
+            required: true,
+            message: '请选择转出工程',
+            trigger: 'blur'
+          }
+        ],
+        backMan: [
+          {
+            required: true,
+            message: '请输入转出人',
+            trigger: 'blur'
+          }
+        ],
+        backPhone: [
+          { required: true, message: '联系电话不能为空', trigger: 'blur' },
+          {
+            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+          }
+        ],
+        leaseTeamName: [
+          {
+            required: true,
+            message: '请选择转入单位',
+            trigger: 'blur'
+          }
+        ],
+        leaseProId: [
+          {
+            required: true,
+            message: '请选择转入工程',
+            trigger: 'blur'
+          }
+        ],
+        leaseMan: [
+          {
+            required: true,
+            message: '请输入转入人',
+            trigger: 'blur'
+          }
+        ],
+        leasePhone: [
+          { required: true, message: '联系电话不能为空', trigger: 'blur' },
+          {
+            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+          }
+        ],
+        dirUrls: [
+          {
+            required: true, // 是否分包商(是：合同编号必填)
+            message: '请上传图片',
+            trigger: 'change'
+          }
+        ]
+      },
+      urlTemp: '',
+      delBusinessFileIdList: [],
+      //图片查看弹窗
+      dialogImageUrl: '',
+      dialogVisible: false,
+      uploadKey: Date.now(),
+      uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
+      headers: { Authorization: 'Bearer ' + getToken() }
+    }
+  },
+  computed: {
+    //图片上传1张后，隐藏上传框
+    uploadDisabled() {
+      return this.maForm.dirUrls && this.maForm.dirUrls.length == 3
+    }
+  },
+  created() {
+    // 初始化标志位
+    this.isRestoringSelection = false
+
+    if (this.$route.query.type == 'edit') {
+      this.isEdit = true
+      this.isDetail = false
+      this.id = this.$route.query.id
+      const obj = Object.assign({}, this.$route, { title: '直转申请编辑' })
+      this.$tab.updatePage(obj)
+    } else {
+      this.isEdit = false
+      this.isDetail = false
+      this.id = ''
+    }
+    if (this.isEdit || this.isDetail) {
+      console.log('isEdit', this.isEdit)
+      this.getTaskInfo()
+    }
+    this.projectInfoList() // 单位工程下拉选
+    console.log(this.$store, 'this.$store.getters')
+    console.log(this.$route.query, 'this.$route.query')
+  },
+  watch: {
+    // this.maForm.backAgreementId 变化时执行
+    'maForm.backAgreementId': {
+      handler: function (val, oldVal) {
+        if (val && val !== oldVal) {
+          this.getMaTypeOpt()
+          // 协议变化时清空数据
+          this.allData = []
+          this.clearCrossPageSelection()
+          this.queryParams.pageNum = 1
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 查询
+    handleQuery() {
+      // 重置分页到第一页
+      this.queryParams.pageNum = 1
+      // 清空缓存数据，强制重新获取
+      this.allData = []
+      this.getList()
+    },
+    // 重置
+    handleReset() {
+      this.$refs.queryForm.resetFields()
+      // 重置分页
+      this.queryParams.pageNum = 1
+      // 清空缓存数据，强制重新获取
+      this.allData = []
+      // 清空跨页选中状态
+      this.clearCrossPageSelection()
+      this.getList()
+    },
+
+    // 清空跨页选中状态
+    clearCrossPageSelection() {
+      console.log('=== 清空所有选中状态 ===')
+
+      // 清空数据
+      this.selectedDataArray = []
+      this.multipleSelection = []
+
+      // 清空当前页表格的选中样式
+      if (this.$refs.equipmentList) {
+        // 设置标志位防止触发selection-change事件
+        this.isRestoringSelection = true
+        this.$refs.equipmentList.clearSelection()
+
+        // 清空当前页数据的isActive状态
+        this.equipmentList.forEach(item => {
+          item.isActive = false
+          if (!this.isEdit && !this.isDetail) {
+            item.directNum = undefined
+          }
+        })
+
+        // 重置标志位
+        this.$nextTick(() => {
+          this.isRestoringSelection = false
+          console.log('清空选中状态完成')
+        })
+      } else {
+        this.isRestoringSelection = false // 重置标志位
+      }
+    },
+
+    // 清空所有状态
+    clearAllStates() {
+      this.allData = []
+      this.equipmentList = []
+      this.total = 0
+      this.clearCrossPageSelection()
+      this.queryParams.pageNum = 1
+    },
+    // 获取列表
+    async getList() {
+      this.loading = true
+      try {
+        // 只在第一次查询或者查询条件变化时重新获取数据
+        const needRefreshData = this.queryParams.pageNum === 1 || this.allData.length === 0
+
+        if (needRefreshData) {
+          const params = {
+            agreementIds: this.maForm.backAgreementId,
+            parentId: this.queryParams.maId,
+            typeId: this.queryParams.typeId,
+            keyWord: this.queryParams.keyWord
+            // 不传递分页参数，获取全量数据
+          }
+          const res = await getUseDataApi(params)
+          console.log('🚀 ~ 获取列表 ~ res:', res)
+
+          // 存储全量数据
+          if (res.data && res.data.records) {
+            this.allData = res.data.records
+          } else if (Array.isArray(res.data)) {
+            this.allData = res.data
+          } else {
+            this.allData = []
+          }
+        }
+
+        // 前端分页处理
+        this.total = this.allData.length
+        const startIndex = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+        const endIndex = startIndex + this.queryParams.pageSize
+
+        // 设置标志位，防止更新equipmentList时触发selection-change事件
+        this.isRestoringSelection = true
+        this.equipmentList = this.allData.slice(startIndex, endIndex)
+
+        console.log(
+          `🚀 ~ 分页信息 ~ 总数据:${this.total}, 当前页:${this.queryParams.pageNum}, 每页:${this.queryParams.pageSize}, 当前页数据:${this.equipmentList.length}`
+        )
+
+        // 编辑模式下的回显数据处理（只在第一次加载时执行）
+        if ((this.isEdit || this.isDetail) && this.multipleSelectionTemp.length > 0 && needRefreshData) {
+          console.log('编辑模式初始化选中数据:', this.multipleSelectionTemp.length)
+          // 将编辑数据添加到选中数据数组中
+          this.selectedDataArray = [
+            ...this.multipleSelectionTemp.map(row => ({
+              ...row,
+              isActive: true
+            }))
+          ]
+          this.updateCrossPageSelection()
+          console.log('编辑模式回显选中数据已添加到selectedDataArray:', this.selectedDataArray.length)
+        }
+
+        // 恢复当前页的勾选状态
+        this.$nextTick(() => {
+          this.restoreCurrentPageSelection()
+        })
+      } catch (error) {
+        console.log('🚀 ~ 获取列表 ~ error:', error)
+        this.allData = []
+        this.equipmentList = []
+        this.total = 0
+      } finally {
+        this.loading = false
+      }
+    },
+    // 获取物资类型
+    async getMaTypeOpt() {
+      try {
+        const params = {
+          agreementIds: this.maForm.backAgreementId
+        }
+        console.log('🚀 ~ getMaTypeOpt ~ params:', params)
+        const res = await getUseThreeTreeApi(params)
+        console.log('🚀 ~ getMaTypeOpt ~ res:', res)
+        this.materialTypeOpts = res.data
+      } catch (error) {
+        console.log('🚀 ~ getMaTypeOpt ~ error:', error)
+      }
+    },
+    // 获取规格型号
+    async getTypeModelNameOpt(type) {
+      try {
+        const params = {
+          typeId: type.typeId
+        }
+        const res = await getMaTypeOpt(params)
+        console.log('🚀 ~ getTypeModelNameOpt ~ res:', res)
+        this.typeModelNameOpts = res.data
+      } catch (error) {
+        console.log('🚀 ~ getTypeModelNameOpt ~ error:', error)
+      }
+    },
+    // 获取协议id
+    async getAgreementId() {
+      try {
+        const params = {
+          teamId: this.maForm.backTeamId,
+          projectId: this.maForm.backProId
+        }
+        const res = await getAgreementInfoByIdBackApi(params)
+        console.log('🚀 ~ getAgreementId ~ res:', res)
+        if (!res.data || res.data.length == 0) return
+        this.maForm.backAgreementId = res.data.map(item => item.agreementId)
+        console.log('🚀 ~ getAgreementId ~ this.maForm.backAgreementId:', this.maForm.backAgreementId)
+        if (this.isEdit) {
+          this.getMaTypeOpt()
+        }
+        // 协议变化时清空缓存数据和选中状态
+        this.allData = []
+        this.clearCrossPageSelection()
+        this.queryParams.pageNum = 1
+        this.getList()
+      } catch (error) {
+        console.log('🚀 ~ getAgreementId ~ error:', error)
+      }
+    },
+    // async getLeaseAgreementId() {
+    //   try {
+    //     const params = {
+    //       teamId: this.maForm.leaseTeamId,
+    //       projectId: this.maForm.leaseProId
+    //     }
+    //     const res = await getAgreementInfoByIdBackApi(params)
+    //     console.log('🚀 ~ getAgreementId ~ res:', res)
+    //     if (!res.data || res.data.length == 0) return
+    //     this.maForm.leaseAgreementId = res.data.map(item => item.agreementId)
+    //   } catch (error) {
+    //     console.log('🚀 ~ getAgreementId ~ error:', error)
+    //   }
+    // },
+    // 查看领料记录
+    handleApplyRecord() {
+      // this.$router.push({ path: '/business/businessHandlingRecord/directApplyRecord' })
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    },
+    normalizer2(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.typeId,
+        label: node.typeName,
+        children: node.children
+      }
+    },
+    selectMaType(val) {
+      console.log('val', val)
+      this.queryParams.typeModelName = ''
+      this.typeModelNameOpts = []
+      this.getTypeModelNameOpt(val)
+    },
+    uniteChange(val) {
+      if (!val) return
+      this.maForm.backTeamName = this.uniteList.find(item => item.id === val).teamName
+      this.getAgreementId()
+    },
+    projectChange(val) {
+      const obj = this.projectList.find(item => item.proId === val)
+      if (!val) {
+        this.maForm.backTeamId = ''
+        this.uniteList = []
+        return
+      }
+      setTimeout(() => {
+        getTeamListApi({ isAll: 0, proId: obj.proId }).then(response => {
+          this.uniteList = response.data
+        })
+      }, 500)
+    },
+    leaseUniteChange(val) {
+      console.log('🚀 ~ leaseUniteChange ~ val:', val)
+      if (!val) return
+      const obj = this.lessUniteList.find(item => item.teamName == val)
+      console.log('🚀 ~ leaseUniteChange ~ obj:', obj)
+      this.maForm.relName = obj.relName
+      this.maForm.teamLeaderIdCard = obj.teamLeaderIdCard
+      this.maForm.projectId = obj.projectId
+      this.maForm.relPhone = obj.relPhone
+    },
+    leaseProjectChange(val) {
+      const obj = this.leaseProjectList.find(item => item.proId === val)
+      console.log('🚀 ~ leaseProjectChange ~ obj:', obj)
+      if (!val) {
+        this.maForm.leaseTeamName = ''
+        this.lessUniteList = []
+        return
+      }
+      setTimeout(() => {
+        getBmTeamApi({ isAll: 0, projectId: obj.projectId }).then(res => {
+          this.lessUniteList = res.data
+        })
+      }, 500)
+    },
+    /** 租赁单位和工程-下拉选 */
+    projectInfoList() {
+      if (!this.isEdit) {
+        getListProject({ isApp: true }).then(response => {
+          this.projectList = response.data
+          this.leaseProjectList = response.data
+        })
+      } else {
+        getListProject({ isApp: true }).then(response => {
+          this.projectList = response.data
+          this.leaseProjectList = response.data
+        })
+        setTimeout(() => {
+          console.log('🚀 ~ projectInfoList ~ this.maForm:', this.maForm)
+          getTeamListApi({ isAll: 0, proId: this.maForm.backProId }).then(response => {
+            this.uniteList = response.data
+            this.getAgreementId()
+          })
+          getBmTeamApi({ isAll: 0, projectId: this.maForm.projectId }).then(res => {
+            this.lessUniteList = res.data
+          })
+        }, 300)
+      }
+    },
+    //获取任务详情--- 编辑回显数据
+    async getTaskInfo() {
+      const loading = this.$loading()
+      try {
+        const res = await getInfoApi({ id: this.id })
+        console.log('🚀 ~ getTaskInfo ~ res:', res)
+        this.maForm = res.data.directApplyInfo
+        this.multipleSelectionTemp = res.data.directApplyInfoDetails
+        this.maForm.backProId = Number(this.maForm.backProId)
+        this.maForm.backTeamId = Number(this.maForm.backTeamId)
+        this.maForm.leaseProId = Number(this.maForm.leaseProId)
+        // this.getList()
+        console.log('🚀 ~ getTaskInfo ~ this.equipmentList:', this.equipmentList)
+        loading.close()
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+        loading.close()
+      }
+    },
+    // 多选框选中数据
+    handleSelectionChange(currentPageSelectedRows) {
+      // 如果正在恢复选中状态，忽略此事件
+      if (this.isRestoringSelection) return
+
+      // 获取当前页所有数据的rowKey
+      const currentPageRowKeys = this.equipmentList.map(item => this.getRowKey(item))
+
+      // 从selectedDataArray中移除属于当前页的数据（不影响其他页面的数据）
+      const beforeCount = this.selectedDataArray.length
+      this.selectedDataArray = this.selectedDataArray.filter(item => !currentPageRowKeys.includes(this.getRowKey(item)))
+      const afterCount = this.selectedDataArray.length
+      console.log(`移除当前页数据：${beforeCount} -> ${afterCount}，移除了 ${beforeCount - afterCount} 条`)
+
+      // 添加当前页新选中的数据到数组中
+      currentPageSelectedRows.forEach(row => {
+        const completeRow = {
+          ...row,
+          directNum: row.directNum || row.useNum,
+          isActive: true
+        }
+        this.selectedDataArray.push(completeRow)
+      })
+      console.log(`添加当前页选中数据：${currentPageSelectedRows.length} 条`)
+
+      // 更新当前页的isActive状态
+      this.equipmentList.forEach(item => {
+        const isSelected = currentPageSelectedRows.some(
+          selectedRow => this.getRowKey(selectedRow) === this.getRowKey(item)
+        )
+        item.isActive = isSelected
+        if (isSelected && !item.directNum && item.useNum) {
+          item.directNum = item.useNum
+        } else if (!isSelected && !this.isEdit && !this.isDetail) {
+          item.directNum = undefined
+        }
+      })
+
+      // 更新multipleSelection
+      this.multipleSelection = [...this.selectedDataArray]
+    },
+
+    // 数量变更
+    directNumChange(row) {
+      if (row.unitValue == 1) {
+        row.directNum = Number(String(row.directNum).replace(/[^\d.]/g, ''))
+      } else {
+        row.directNum = Number(String(row.directNum).replace(/[^\d]/g, ''))
+      }
+      if (row.directNum > row.useNum) {
+        this.$message.error('直转数量不能大于领料数量')
+        this.$nextTick(() => {
+          row.directNum = row.useNum
+        })
+      }
+
+      // 如果行被选中，同步更新跨页选中数据数组
+      const rowKey = this.getRowKey(row)
+      const selectedIndex = this.selectedDataArray.findIndex(item => this.getRowKey(item) === rowKey)
+
+      if (selectedIndex !== -1) {
+        // 更新数组中对应的数据
+        this.selectedDataArray[selectedIndex] = {
+          ...this.selectedDataArray[selectedIndex],
+          ...row,
+          directNum: row.directNum,
+          isActive: true
+        }
+        // 同步更新multipleSelection
+        this.multipleSelection = [...this.selectedDataArray]
+        console.log('数量变更后跨页选中总数:', this.selectedDataArray.length)
+      }
+    },
+
+    // 获取行的唯一标识
+    getRowKey(row) {
+      // 使用最核心的字段确保唯一性，避免编辑数据和实际数据的字段差异
+      const key = `${row.typeId || row.id || 'unknown'}_${row.maCode || ''}_${row.typeModelName || ''}`
+      // 在调试模式下记录 rowKey 生成
+      // console.log('生成rowKey:', key, 'for:', row.typeModelName)
+      return key
+    },
+
+    // 恢复当前页的勾选状态
+    restoreCurrentPageSelection() {
+      // 如果标志位未设置，则设置它
+      if (!this.isRestoringSelection) {
+        this.isRestoringSelection = true
+      }
+
+      this.$nextTick(() => {
+        if (!this.$refs.equipmentList) {
+          this.isRestoringSelection = false // 确保标志位重置
+          return
+        }
+
+        console.log('=== 开始恢复选中状态 ===')
+        console.log('标志位状态:', this.isRestoringSelection)
+        console.log('全局选中数量:', this.selectedDataArray.length)
+        console.log('当前页数据数量:', this.equipmentList.length)
+        console.log('当前页码:', this.queryParams.pageNum)
+        console.log('是否编辑模式:', this.isEdit || this.isDetail)
+        if (this.selectedDataArray.length > 0) {
+          console.log(
+            '全局选中数据的前3个rowKey:',
+            this.selectedDataArray.slice(0, 3).map(item => this.getRowKey(item))
+          )
+          console.log(
+            '当前页数据的前3个rowKey:',
+            this.equipmentList.slice(0, 3).map(item => this.getRowKey(item))
+          )
+        }
+
+        try {
+          // 先清除所有选中状态（此时标志位已设置）
+          this.$refs.equipmentList.clearSelection()
+
+          // 遍历当前页数据，检查是否在选中数组中
+          let matchedCount = 0
+          this.equipmentList.forEach(row => {
+            const rowKey = this.getRowKey(row)
+            // 在选中数组中查找对应的数据
+            const selectedData = this.selectedDataArray.find(item => this.getRowKey(item) === rowKey)
+
+            if (selectedData) {
+              matchedCount++
+              // 恢复保存的数据
+              row.directNum = selectedData.directNum
+              row.isActive = true
+              // 恢复表格选中状态
+              this.$refs.equipmentList.toggleRowSelection(row, true)
+              console.log(`恢复选中: ${rowKey}`)
+            } else {
+              row.isActive = false
+              if (!this.isEdit && !this.isDetail) {
+                row.directNum = undefined
+              }
+            }
+          })
+          console.log(`当前页匹配到 ${matchedCount} 条选中数据`)
+
+          // 如果是编辑模式且匹配数量为0，显示详细的调试信息
+          if ((this.isEdit || this.isDetail) && matchedCount === 0 && this.selectedDataArray.length > 0) {
+            console.warn('编辑模式下当前页没有匹配到任何选中数据，检查rowKey匹配:')
+            console.log(
+              '当前页所有rowKey:',
+              this.equipmentList.map(item => this.getRowKey(item))
+            )
+            console.log(
+              '全局选中所有rowKey:',
+              this.selectedDataArray.map(item => this.getRowKey(item))
+            )
+          }
+
+          const restoredCount = this.equipmentList.filter(row => row.isActive).length
+          console.log('恢复选中状态完成，当前页选中数量:', this.$refs.equipmentList.selection?.length || 0)
+          console.log('恢复选中状态完成，当前页isActive数量:', restoredCount)
+          console.log('全局选中数量:', this.selectedDataArray.length)
+          console.log(
+            '当前页应该恢复的rowKey:',
+            this.equipmentList
+              .filter(row => {
+                const rowKey = this.getRowKey(row)
+                return this.selectedDataArray.some(item => this.getRowKey(item) === rowKey)
+              })
+              .map(row => this.getRowKey(row))
+          )
+          console.log('=== 恢复选中状态结束 ===')
+          console.log('')
+        } catch (error) {
+          console.error('恢复选中状态时出错:', error)
+        } finally {
+          // 无论如何都要清除标志位
+          this.isRestoringSelection = false
+          console.log('标志位已重置为:', this.isRestoringSelection)
+        }
+      })
+    },
+
+    // 更新跨页选中状态
+    updateCrossPageSelection() {
+      // 直接使用选中数据数组
+      this.multipleSelection = [...this.selectedDataArray]
+    },
+    /** 保存按钮操作 */
+    handleSave() {
+      // 确保使用最新的跨页选中数据
+      this.updateCrossPageSelection()
+      console.log('=== 保存操作开始 ===')
+      console.log('maForm', this.maForm)
+      console.log('selectedDataArray:', this.selectedDataArray)
+      console.log('multipleSelection:', this.multipleSelection)
+      console.log('选中数据总数:', this.selectedDataArray.length)
+      console.log('=====================')
+
+      if (this.selectedDataArray.length > 0) {
+        this.$refs['maForm'].validate(valid => {
+          if (valid) {
+            this.$modal.confirm('是否确认提交').then(async () => {
+              const isPass = this.multipleSelection.every(item => {
+                return item.directNum
+              })
+              if (!isPass) {
+                this.$message.error('请填写直转数量且不能为0')
+                return
+              }
+
+              const loading = this.$loading()
+              try {
+                let backAgreementIds = ''
+                let leaseAgreementIds = ''
+                if (this.maForm.backAgreementId && this.maForm.backAgreementId.length > 0) {
+                  backAgreementIds = this.maForm.backAgreementId.join(',')
+                }
+                if (this.maForm.leaseAgreementId && this.maForm.leaseAgreementId.length > 0) {
+                  leaseAgreementIds = this.maForm.leaseAgreementId.join(',')
+                }
+                const params = {
+                  directApplyInfo: { ...this.maForm, isSubmit: 1, backAgreementIds, leaseAgreementIds },
+                  directApplyInfoDetails: this.multipleSelection
+                }
+                let fileList = []
+
+                if (params.directApplyInfo.dirUrls.length > 0) {
+                  fileList = params.directApplyInfo.dirUrls.map(e => {
+                    if (e.response && e.response.code === 200) {
+                      return {
+                        name: e.response.data.name,
+                        url: e.response.data.url,
+                        type: e.response.data.url.substring(e.response.data.url.lastIndexOf('.') + 1)
+                      }
+                    } else {
+                      return {
+                        name: null,
+                        url: e.url
+                      }
+                    }
+                  })
+                }
+
+                params.directApplyInfo.dirUrls = fileList
+                console.log('🚀 ~ 提交 ~ params:', params)
+
+                delete params.directApplyInfo.backAgreementId
+                delete params.directApplyInfo.leaseAgreementId
+                if (this.isEdit) {
+                  delete params.directApplyInfo.directApplyDetails
+                  console.log('🚀 ~ this.$modal.confirm ~ params:', params)
+                  const res = await editUseApi(params)
+                  console.log('🚀 ~ handleSave ~ res:', res)
+                } else {
+                  const res = await addUseApi(params)
+                  console.log('🚀 ~ handleSave ~ res:', res)
+                }
+                this.$message.success('操作成功')
+                this.$refs['maForm'].resetFields()
+                // 清空所有状态
+                this.clearAllStates()
+                this.delBusinessFileIdList = []
+                loading.close()
+              } catch (error) {
+                console.log('🚀 ~ handleSave ~ error:', error)
+                loading.close()
+              }
+            })
+          }
+        })
+      } else {
+        this.$modal.msgError('请先选择转出数据')
+      }
+    },
+    // 上传图片
+    handleChangeBusinessList(file, fileList) {
+      console.log('iiiiiiiiiiiiiiiiii', file)
+      console.log('ppppppppp', fileList)
+      const fileListTemp = fileList.filter(item => {
+        return item.uid != file.uid
+      })
+      const parts = file.name?.split('.')
+      const extension = parts?.pop().toLowerCase()
+      if (fileList.length > 3) {
+        this.$message.warning('最多上传3张附件')
+        fileList = fileList.filter(item => {
+          return item.uid != file.uid
+        })
+      } else if (!(extension === 'png' || extension === 'jpg' || extension === 'jpeg' || extension === 'pdf')) {
+        this.$message.warning('文件格式不正确')
+        fileList = fileList.filter(item => {
+          return item.uid != file.uid
+        })
+      } else if (file.size > 1024 * 1024 * 10) {
+        this.$message.warning('文件大小不能超过10Mb')
+        fileList = fileList.filter(item => {
+          return item.uid != file.uid
+        })
+      } else if (file.name.length > 40) {
+        this.$message.warning('文件名长度不能超过40个字符')
+        fileList = fileList.filter(item => {
+          return item.uid != file.uid
+        })
+      } else if (fileListTemp.some(item => item.name === file.name)) {
+        this.$message.warning('文件名重复')
+        fileList = fileList.filter(item => {
+          return item.uid != file.uid
+        })
+      }
+      fileList.forEach(file => {
+        if (extension === 'pdf') {
+          this.urlTemp = require('@/assets/file.png')
+        }
+      })
+      this.maForm.dirUrls = fileList
+      console.log('🚀 ~ handleChangeBusinessList ~ this.dirUrls:', this.dirUrls)
+      // 手动触发表单验证
+      this.$refs.maForm.validateField('dirUrls')
+    },
+    // 判断文件类型
+    isImage(file) {
+      this.urlTemp = require('@/assets/file.png')
+      if (this.updataIf(file)) {
+        return false
+      } else {
+        return true
+      }
+    },
+    // 判断文件类型,图片预览，文件下载
+    updataIf(e) {
+      if (e.fileName) {
+        const parts = e.fileName?.split('.')
+        const extension = parts?.pop().toLowerCase()
+        if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        const parts = e.url?.split('.')
+        const extension = parts?.pop().toLowerCase()
+        if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
+          return false
+        } else {
+          return true
+        }
+      }
+    },
+    beforeUpload(file) {
+      const validExtensions = ['.png', '.jpg', '.jpeg', '.pdf']
+      const fileName = file.name.toLowerCase()
+      const hasValidExtension = validExtensions.some(ext => fileName.endsWith(ext))
+
+      if (!hasValidExtension) {
+        this.$message.error('仅支持上传 .png, .jpg, .jpeg, .pdf 格式的文件')
+        return false
+      }
+
+      // 检查文件大小是否超过 10MB
+      const isLt10M = file.size / 1024 / 1024 < 10
+      if (!isLt10M) {
+        this.$message.error('文件大小不能超过 10MB')
+        return false
+      }
+
+      // 检查文件名长度是否超过 40 个字符
+      if (file.name.length > 40) {
+        this.$message.error('文件名长度不能超过 40 个字符')
+        return false
+      }
+
+      return true
+    },
+    //上传组件-图片查看
+    picturePreviewFbs(file) {
+      console.log('xxxxxxxxxxxx', file)
+      this.dialogImageUrl = file.response ? file.response.data.url : file.url.replaceAll('#', '%23')
+      console.log('zzzzzzzzzz', this.dialogImageUrl)
+      // const parts = file.name ? file.name:file.url.split('.')
+      // console.log("yyyyyyyyy",parts)
+      // const extension = parts?.pop()
+      // if (extension === 'pdf') {
+      //     const windowName = file.name ? file.name : file.url
+      //     window.open(file.url, windowName)
+      // } else {
+      this.dialogVisible = true
+      // }
+    },
+    //上传组件-图片删除
+    handleRemoveElectricianImgList(file, fileList) {
+      let sum = 0
+      this.maForm.dirUrls.forEach((item, index) => {
+        if (item.uid == file.uid) {
+          sum = index
+        }
+      })
+      this.maForm.dirUrls.splice(sum, 1)
+      if (file.status == 'success') {
+        this.delBusinessFileIdList.push(file.url)
+      }
+      console.log('delBusinessFileIdList', this.delBusinessFileIdList)
+    },
+    handleDownload(file) {
+      console.log(file)
+      if (file.status === 'ready') {
+        downloadFile({
+          fileName: file.name ? file.name : file.url,
+          fileData: file.raw,
+          fileType: 'application/vnd.ms-excel;charset=utf-8'
+        })
+      } else if (file.status === 'success') {
+        downloadFileData({ fileName: file.url, fileUrl: file.url })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+//隐藏图片上传框的css
+::v-deep .disabledFbs {
+  .el-upload--picture-card {
+    display: none;
+    width: 100px;
+    height: 100px;
+  }
+}
+::v-deep .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+}
+
+::v-deep .el-upload-list__item {
+  margin-bottom: 20px;
+  overflow: unset !important;
+  width: 103px;
+  height: 103px;
+}
+::v-deep .el-upload-list__item-actions {
+  overflow: unset !important;
+  width: 100px;
+  height: 100px;
+}
+
+.popper-select {
+  .el-cascader-panel .el-scrollbar .el-checkbox {
+    display: none;
+  }
+
+  .el-cascader-panel .el-scrollbar:nth-child(4) .el-checkbox {
+    display: block !important;
+  }
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.el-icon-arrow-down.is-reverse {
+  transform: rotateZ(180deg);
+}
+
+// .el-tree {
+//   max-height: 300px;
+//   overflow-y: auto;
+// }
+
+::v-deep .highlight-text {
+  background-color: #ffd04b;
+  color: #000;
+}
+
+::v-deep .el-input-group__append {
+  padding: 0;
+  .el-button {
+    padding: 0 10px;
+    border: none;
+    height: 100%;
+    &:first-child {
+      border-right: 1px solid #dcdfe6;
+    }
+    &[disabled] {
+      color: #c0c4cc;
+    }
+  }
+}
+
+.type-select-dropdown {
+  .el-select-dropdown__wrap {
+    max-height: 400px !important;
+  }
+
+  .el-select-dropdown__item {
+    height: auto;
+    padding: 8px 20px;
+    white-space: normal;
+    word-break: break-all;
+  }
+}
+
+.el-input-group__append {
+  padding: 0;
+  .el-button {
+    padding: 0 10px;
+    border: none;
+    height: 100%;
+    &:first-child {
+      border-right: 1px solid #dcdfe6;
+    }
+    &[disabled] {
+      color: #c0c4cc;
+    }
+  }
+}
+
+.el-upload-list__item-thumbnail {
+  /* height: 145px !important; */
+  width: 100px;
+  height: 100px;
+}
+
+.picture-card-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.picture-card {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  justify-content: center;
+
+  // border: 1px solid  #ddd;
+  // border-radius: 4px;
+}
+
+.file-name {
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: absolute;
+  bottom: -35px;
+  margin-top: 8px;
+  text-align: center;
+  font-size: 12px;
+  color: #333;
+  z-index: 999999;
+}
+
+.file-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+}
+
+// 居中
+.cont-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// 数据状态提示样式
+.data-status-info {
+  font-size: 14px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch !important;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  .el-button--text {
+    padding: 0;
+    margin-left: 15px;
+
+    &:hover {
+      color: #dc2626 !important;
+    }
+  }
+
+  .el-icon-info {
+    margin-right: 5px;
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/src/views/materialsStation/straight/straightTransferReview/components/title-tip.vue b/src/views/materialsStation/straight/straightTransferReview/components/title-tip.vue
new file mode 100644
index 00000000..2970e850
--- /dev/null
+++ b/src/views/materialsStation/straight/straightTransferReview/components/title-tip.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="title-tip">
+        <div class="is-green"></div>
+        <div class="title-child">{{ title }}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            default: () => '基本信息'
+        }
+    }
+}
+</script>
+
+<style scoped>
+.title-tip {
+    display: flex;
+    align-items: center;
+    background-color: #ebeaea;
+}
+
+.is-green {
+    margin: 0 6px;
+    width: 5px;
+    height: 20px;
+    background-color: #19a4a0;
+}
+.title-child {
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 18px;
+}
+</style>
diff --git a/src/views/materialsStation/straight/straightTransferReview/index.vue b/src/views/materialsStation/straight/straightTransferReview/index.vue
new file mode 100644
index 00000000..2d9fa3be
--- /dev/null
+++ b/src/views/materialsStation/straight/straightTransferReview/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <!-- 直转审核页面 -->
+  <div class="app-container">
+    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
+      <el-form-item label="申请日期" prop="timeRange">
+        <el-date-picker
+          clearable
+          type="daterange"
+          v-model="timeRange"
+          range-separator="至"
+          format="yyyy-MM-dd"
+          style="width: 240px"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+        />
+      </el-form-item>
+      <el-form-item label="关键字" prop="keyWord">
+        <el-input
+          clearable
+          placeholder="请输入关键字"
+          v-model="queryParams.keyWord"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="审核状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择审核状态" clearable>
+          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+
+      <!-- 表单按钮 -->
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
+    </el-row>
+    <el-table :data="tableList" fit highlight-current-row style="width: 100%" :max-height="650" v-loading="isLoading">
+      <!-- 多选 -->
+      <el-table-column
+        type="index"
+        width="55"
+        label="序号"
+        align="center"
+        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
+      />
+      <el-table-column
+        v-for="column in tableColumns"
+        :show-overflow-tooltip="column.showTooltip"
+        :key="column.prop"
+        :label="column.label"
+        :prop="column.prop"
+        :width="column.width"
+        align="center"
+      >
+        <!-- 插槽 -->
+        <template v-slot="scope" v-if="column.prop == 'status'">
+          <el-tag v-if="scope.row.status == '0'" type="warning" size="mini">待审核</el-tag>
+          <el-tag v-else-if="scope.row.status == '1'" size="mini">审核中</el-tag>
+          <el-tag v-else-if="scope.row.status == '2'" type="success" size="mini">已通过</el-tag>
+          <el-tag v-else-if="scope.row.status == '3'" type="danger" size="mini">已驳回</el-tag>
+        </template>
+      </el-table-column>
+      <!-- 操作 -->
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-edit"
+            v-if="auditingShow(scope.row)"
+            @click="handleReview(scope.row, 2)"
+          >
+            审核
+          </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-edit"
+            v-if="scope.row.status == 0 || scope.row.status == 3"
+            @click="handleEdit(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-delete"
+            v-if="scope.row.status == 0 || scope.row.status == 3"
+            @click="handleDelete(scope.row)"
+            style="color: red"
+          >
+            删除
+          </el-button>
+          <el-button type="text" size="mini" icon="el-icon-search" @click="handleReview(scope.row, 1)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination
+      :total="total"
+      v-show="total > 0"
+      @pagination="getList"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+    />
+  </div>
+</template>
+
+<script>
+import { getUseListApi, deleteUseApi } from '@/api/materialsStation'
+import { formatTime } from '@/utils/bonus.js'
+
+export default {
+  name: 'straightTransferReview',
+  data() {
+    return {
+      isLoading: false,
+      showSearch: true,
+      userId: '',
+      timeRange: [],
+      // 表格数据
+      tableList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyWord: '', // 关键字
+        status: '' // 审核状态
+      },
+      // 状态
+      statusOptions: [
+        { label: '待审核', value: '0' },
+        { label: '审核中', value: '1' },
+        { label: '已完成', value: '2' },
+        { label: '已驳回', value: '3' }
+      ],
+      total: 0, // 总条数
+      // 表头
+      tableColumns: [
+        { label: '直转单号', prop: 'code' },
+        { label: '申请时间', prop: 'createTime', showToolTip: true, width: '100' },
+        { label: '申请人', prop: 'createBy', showToolTip: true, width: '80' },
+        { label: '转出工程', prop: 'backProName', showToolTip: false },
+        { label: '转出班组', prop: 'backTeamName', showToolTip: false },
+        { label: '转入工程', prop: 'leaseProName', showToolTip: false },
+        { label: '转入班组', prop: 'leaseTeamName', showToolTip: false },
+        { label: '状态', prop: 'status', showToolTip: true, width: '80' }
+      ]
+    }
+  },
+  created() {
+    this.userId = sessionStorage.getItem('userId')
+    console.log('🚀 ~ created ~ this.userId:', this.userId)
+    this.getList()
+  },
+  methods: {
+    // 查询
+    handleQuery() {
+      this.getList()
+    },
+    // 重置
+    handleReset() {
+      this.timeRange = []
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = 10
+      this.$refs.queryForm.resetFields()
+      this.getList()
+    },
+    // 获取列表
+    async getList() {
+      try {
+        this.isLoading = true
+        const params = {
+          ...this.queryParams,
+          startTime: this.timeRange ? this.timeRange[0] : '',
+          endTime: this.timeRange ? this.timeRange[1] : ''
+        }
+        const res = await getUseListApi(params)
+        this.tableList = res.data.rows
+        this.total = res.data.total || 0
+      } catch (error) {
+        this.tableList = []
+        this.total = 0
+      } finally {
+        this.isLoading = false
+      }
+    },
+    // 审核/详情
+    handleReview(row, type) {
+      // ----type---- 1. 查看 2. 审核
+      // 跳转审核详情页面
+      this.$router.push({
+        path: '/materialsStation/straight/reviewDetails',
+        query: {
+          ...row,
+          taskId: row.id,
+          type: type === 1 ? 'detail' : 'edit',
+        }
+      })
+    },
+    // 编辑
+    handleEdit(row, type) {
+      this.$router.push({
+        path: '/materialsStation/straight/straightTransfer',
+        query: {
+          id: row.id,
+          type: 'edit'
+        }
+      })
+    },
+    // 删除
+    handleDelete(row) {
+      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          this.isLoading = true
+          await deleteUseApi({ id: row.id })
+          this.$message({
+            type: 'success',
+            message: '删除成功'
+          })
+        } catch (error) {
+          console.log('🚀 ~ handleDelete ~ error:', error)
+        } finally {
+          this.isLoading = false
+          this.getList()
+        }
+      })
+    },
+    // 判断审核按钮显示隐藏
+    auditingShow(row) {
+      if (row.directUserIds) {
+        const directUserIds = row.directUserIds.split(',')
+        return (row.status == 1 || row.status == 0) && directUserIds.includes(this.userId)
+      }
+    },
+    // 导出数据
+    handleExport() {
+      // 提示
+      this.$message({
+        type: 'warning',
+        message: '导出功能开发中，敬请期待！'
+      })
+      try {
+        let fileName = `导出_${formatTime(new Date())}.xLsx`
+        let url = '/material/material_direct/export'
+        const params = { ...this.queryParams }
+        console.log('🚀 ~ 导出 ~ params:', params)
+        this.download(url, params, fileName)
+      } catch (error) {
+        console.log('导出数据失败', error)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/materialsStation/straight/straightTransferReview/reviewDetails.vue b/src/views/materialsStation/straight/straightTransferReview/reviewDetails.vue
new file mode 100644
index 00000000..f8fc5cc5
--- /dev/null
+++ b/src/views/materialsStation/straight/straightTransferReview/reviewDetails.vue
@@ -0,0 +1,477 @@
+<template>
+  <div class="business-details-container">
+    <el-row>
+      <el-col :span="18">
+        <div class="left-container">
+          <div class="pages-title">直转申请详情</div>
+          <TitleTip :title="`基本信息`" />
+
+          <el-form :model="maForm" ref="maForm" size="small" label-width="100px" disabled style="margin-top: 20px">
+            <el-row :gutter="20" class="cont-center" style="margin-bottom: 20px">
+              <el-col :span="10" :offset="0">
+                <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px">
+                  <!-- card body -->
+                  <el-form-item label="转出工程" prop="backProId">
+                    <el-input
+                      v-model="maForm.backProName"
+                      placeholder="请输入转出工程"
+                      clearable
+                      maxlength="50"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="转出班组" prop="backTeamName">
+                    <el-input
+                      v-model="maForm.backTeamName"
+                      placeholder="请输入转出班组"
+                      clearable
+                      maxlength="50"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="转出人" prop="backMan">
+                    <el-input
+                      v-model="maForm.backMan"
+                      placeholder="请输入转出人"
+                      clearable
+                      maxlength="50"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="backPhone">
+                    <el-input
+                      v-model="maForm.backPhone"
+                      placeholder="请输入联系电话"
+                      clearable
+                      maxlength="11"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                </el-card>
+              </el-col>
+              <el-col :span="3" :offset="0">
+                <div class="cont-center">
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="require('@/assets/img/transform.png')"
+                    fit="fit"
+                  ></el-image>
+                </div>
+              </el-col>
+              <el-col :span="10" :offset="0">
+                <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px">
+                  <!-- card body -->
+                  <el-form-item label="转入工程" prop="leaseProId">
+                    <el-input
+                      v-model="maForm.leaseProName"
+                      placeholder="请输入转入工程"
+                      clearable
+                      maxlength="50"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="转入班组" prop="leaseTeamName">
+                    <el-input
+                      v-model="maForm.leaseTeamName"
+                      placeholder="请输入转入班组"
+                      clearable
+                      maxlength="50"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="转入人" prop="leaseMan">
+                    <el-input
+                      v-model="maForm.leaseMan"
+                      placeholder="请输入转入人"
+                      clearable
+                      maxlength="50"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="leasePhone">
+                    <el-input
+                      v-model="maForm.leasePhone"
+                      placeholder="请输入联系电话"
+                      clearable
+                      maxlength="11"
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+                </el-card>
+              </el-col>
+            </el-row>
+          </el-form>
+          <TitleTip :title="`明细信息`" />
+
+          <el-table ref="equipmentList" :data="equipmentList">
+            <el-table-column align="center" label="序号" type="index" width="55" />
+            <el-table-column
+              v-for="(column, index) in tableColumns"
+              :key="column.prop"
+              :label="column.label"
+              :prop="column.prop"
+              align="center"
+              show-overflow-tooltip
+            ></el-table-column>
+          </el-table>
+          <TitleTip :title="`附件信息`" />
+
+          <div class="file-box">
+            <div v-for="(file, index) in fileList" :key="index">
+              <div v-if="file.type === 'pdf'" style="margin: 10px">
+                <a :href="file.url" target="_blank">
+                  <el-image :src="require('@/assets/file.png')" fit="file" style="width: 100px; height: 100px" />
+                </a>
+              </div>
+              <div v-else-if="file.type === 'image'" style="margin: 10px">
+                <el-image
+                  :src="file.url"
+                  fit="file"
+                  :preview-src-list="previewList"
+                  @click="handleImg(file)"
+                  style="width: 100px; height: 100px"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="right-container">
+          <div class="right-title">
+            <div></div>
+            <div></div>
+            <div>流程记录</div>
+          </div>
+
+          <div class="process-record">
+            <el-steps :space="120" direction="vertical">
+              <el-step v-for="(step, index) in auditingList" :key="index" :title="step.nodeName">
+                <template slot="description">
+                  <div class="custom-description">
+                    审核结果:
+                    <el-tag size="mini" type="primary" v-if="step.isAccept === 0">待审批</el-tag>
+                    <el-tag size="mini" type="success" v-if="step.isAccept === 1">已通过</el-tag>
+                    <el-tag size="mini" type="danger" v-if="step.isAccept === 2">已驳回</el-tag>
+                  </div>
+
+                  <div class="node-info" v-if="step.auditBy">
+                    审核人:
+                    {{ step.auditBy }}
+                  </div>
+
+                  <div class="node-info" v-if="step.createTime">
+                    审核时间:
+                    {{ step.createTime }}
+                  </div>
+
+                  <div class="node-info" v-if="step.remark">
+                    审核意见:
+                    {{ step.remark }}
+                  </div>
+                </template>
+              </el-step>
+            </el-steps>
+          </div>
+
+          <div class="auditing-container" v-if="isEdit && auditingList.length > 0">
+            <el-input
+              type="textarea"
+              v-model="auditingParams.remark"
+              placeholder="请输入审核意见"
+              :autosize="{ minRows: 2, maxRows: 6 }"
+            />
+
+            <el-row class="btn-container">
+              <el-button type="success" size="mini" @click="onSubmitPass">通过</el-button>
+              <el-button type="danger" size="mini" @click="onSubmitReject">驳回</el-button>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import TitleTip from './components/title-tip.vue'
+import { getAuditingDetailsApi } from '@/api/receive-apply/index.js'
+import { getInfoApi, directUpdateApi } from '@/api/materialsStation/index'
+
+export default {
+  components: {
+    TitleTip
+  },
+  name: '',
+  data() {
+    return {
+      id: '',
+      flowId: '',
+      isEdit: false, // 是否编辑
+      isDetail: false, // 是否查看
+      isAccept: '',
+      remark: '',
+      maForm: {},
+      auditingList: [], // 流程记录
+      equipmentList: [], // 设备列表
+      // 表头
+      tableColumns: [
+        { label: '直转数量', prop: 'directNum' },
+        { label: '类型名称', prop: 'typeName' },
+        { label: '规格型号', prop: 'typeModelName' },
+        { label: '机具编号', prop: 'maCode' },
+        { label: '计量单位', prop: 'unitName' },
+        { label: '领料人', prop: 'leasePerson' },
+        { label: '领料日期', prop: 'startTime' }
+      ],
+      fileList: [],
+      previewList: [],
+      auditingParams: {
+        nodeId: '', // 当前审核记录的id
+        remark: '', // 审核意见
+        typeId: '', // 当前审核记录中的 typeId
+        taskId: '', // 外层列表的taskId
+        isAccept: '', // 审批结果 1. 通过 2. 驳回
+        recordId: '',
+        nextNodeId: '' // 下个流程节点ID
+      },
+      currentRow: {}
+    }
+  },
+  created() {
+    // 判断当前路由页面是否有查询参数
+    this.currentRow = this.$route.query
+    console.log('🚀 ~ created ~ this.currentRow:', this.currentRow)
+    if (this.$route.query.type == 'edit') {
+      this.isEdit = true
+      this.isDetail = false
+      this.id = this.$route.query.id
+      this.flowId = this.$route.query.flowId
+    } else if (this.$route.query.type == 'detail') {
+      this.isEdit = false
+      this.isDetail = true
+      this.id = this.$route.query.id
+      this.flowId = this.$route.query.flowId
+    }
+
+    this.getTaskInfo()
+    if (this.$route.query) {
+      const { nodeId, flowId, taskId } = this.$route.query
+      this.auditingParams.taskId = flowId
+      this.currentNodeId = nodeId
+      this.getLeaseTaskDetailFun(flowId || taskId)
+    }
+  },
+  methods: {
+    // 通过
+    onSubmitPass() {
+      // 弹框提示
+      this.$confirm('是否确认通过审核？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.currentRow.isAccept = 1
+          this.submitAuditing()
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 驳回
+    onSubmitReject() {
+      // 弹框提示
+      this.$confirm('是否确认驳回审核？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.currentRow.isAccept = 2
+          this.submitAuditing()
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 提交审核
+    async submitAuditing() {
+      // 组装参数
+
+      // const currentAuditing = this.auditingList.filter(e => e.nodeId === this.currentNodeId) // 获取当前审核的节点
+      // const currentIndex = this.auditingList.findIndex(e => e.nodeId === this.currentNodeId) // 获取当前的索引
+
+      // const { recordId, id, typeId, isAccept } = currentAuditing[0]
+
+      // // if (isAccept !== 0) {
+      // //     this.$modal.msgError('当前已审核，不可重复审核')
+      // //     return
+      // // }
+      // Object.assign(this.auditingParams, {
+      //   typeId,
+      //   recordId,
+      //   nodeId: id
+      // })
+      // if (currentIndex !== this.auditingList.length - 1) {
+      //   this.auditingParams.nextNodeId = this.auditingList[currentIndex + 1].id
+      // }
+
+      // this.auditingParams.taskTypeId = 16
+
+      this.currentRow.remark = this.auditingParams.remark
+      const loading = this.$loading()
+      try {
+        await directUpdateApi(this.currentRow)
+        this.$message.success('审核成功')
+        this.$tab.closePage()
+      } catch (error) {
+        console.log('🚀 ~ submitAuditing ~ error:', error)
+      } finally {
+        loading.close()
+      }
+    },
+    // 获取详情
+    async getTaskInfo() {
+      const loading = this.$loading()
+      try {
+        const res = await getInfoApi({ id: this.id })
+        console.log('🚀 ~ getTaskInfo ~ res:', res)
+        this.maForm = res.data.directApplyInfo || {}
+        this.equipmentList = res.data.directApplyInfoDetails || []
+        this.fileList = res.data.directApplyInfo.dirUrls || []
+        if (this.fileList.length > 0) {
+          this.fileList.forEach(item => {
+            // 如果url 是 .pdf 结尾 添加 type= pdf
+            if (item.url.includes('.pdf')) {
+              item.type = 'pdf'
+            } else {
+              item.type = 'image'
+            }
+          })
+        }
+        console.log('🚀 ~ getTaskInfo ~ fileList:', this.fileList)
+        console.log('🚀 ~ getTaskInfo ~ this.equipmentList:', this.equipmentList)
+        loading.close()
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+        loading.close()
+      }
+    },
+    handleImg(img) {
+      console.log('🚀 ~ handleImg ~ img:', img)
+      this.previewList = this.fileList.filter(file => file.type === 'image').map(file => file.url)
+    },
+    // 获取数据详情 和 审核记录详情
+    async getLeaseTaskDetailFun(taskId) {
+      const taskType = 25
+      const result = await getAuditingDetailsApi({ taskId, taskType })
+      console.log('result', result)
+      this.auditingList = result.rows
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.business-details-container {
+  padding: 20px;
+}
+
+.pages-title {
+  padding: 10px 0 30px 0;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  text-align: center;
+  color: #19a4a0;
+}
+
+.file-box {
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  /* div {
+    width: calc((100% - 110px) / 12);
+    height: 60px;
+    margin-right: 10px;
+    margin-top: 10px;
+    text-align: center;
+    line-height: 60px;
+    background-color: #19a4a0;
+  }
+
+  & div:nth-child(12n) {
+    margin-right: 0;
+  } */
+}
+
+.right-container {
+  padding: 0 20px;
+}
+
+.right-title {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  & div:first-child {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #19a4a0;
+    z-index: 9;
+  }
+  & div:nth-child(2) {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #b2e1e0;
+    transform: translateX(-50%);
+  }
+}
+
+.process-record {
+  margin-top: 20px;
+  //   height: 60vh;
+}
+
+.btn-container {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-around;
+}
+
+::v-deep .el-step__icon.is-text {
+  background-color: #19a4a0;
+  color: #19a4a0;
+  border: none;
+  width: 16px;
+  height: 16px;
+}
+
+::v-deep .el-step.is-vertical .el-step__line {
+  width: 2px;
+  top: 26px;
+  bottom: 8px;
+  left: 7px;
+}
+
+::v-deep .el-step__title.is-finish {
+  font-weight: bold;
+  color: #303133;
+  font-size: 16px;
+}
+
+::v-deep .el-step__title.is-wait {
+  font-weight: bold;
+  color: #303133;
+  font-size: 16px;
+}
+// 居中
+.cont-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>