1666 lines
55 KiB
Vue
1666 lines
55 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
|
||
<el-form-item label="申请时间" prop="startTime">
|
||
<el-date-picker
|
||
v-model="queryParams.startTime"
|
||
type="date"
|
||
placeholder="开始日期"
|
||
clearable
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
style="width: 130px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="">-</el-form-item>
|
||
<el-form-item label="" prop="endTime">
|
||
<el-date-picker
|
||
v-model="queryParams.endTime"
|
||
type="date"
|
||
placeholder="结束日期"
|
||
clearable
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
style="width: 130px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="关键字" prop="keyWord">
|
||
<el-input
|
||
v-model="queryParams.keyWord"
|
||
placeholder="请输入关键字"
|
||
clearable
|
||
maxlength="50"
|
||
style="width: 240px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="授权状态" prop="bindStatus">
|
||
<el-select v-model="queryParams.taskStatus" placeholder="请选择状态" clearable filterable style="width: 240px">
|
||
<el-option label="全部" value=""></el-option>
|
||
<el-option label="未授权" value="0"></el-option>
|
||
<el-option label="已授权" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAdd"
|
||
:disabled="selectList.length === 0"
|
||
>
|
||
批量授权
|
||
<span v-if="selectList.length > 0" style="margin-left: 5px">({{ selectList.length }})</span>
|
||
</el-button>
|
||
<span v-if="selectList.length > 0" style="margin-left: 10px; color: #67c23a">
|
||
已选择 {{ selectList.length }} 条未授权记录
|
||
</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table
|
||
border
|
||
:data="tableList"
|
||
v-loading="loading"
|
||
ref="multipleTable"
|
||
@selection-change="handleSelectionChange"
|
||
row-key="id"
|
||
:max-height="650"
|
||
>
|
||
<el-table-column type="selection" align="center" :selectable="selectable" />
|
||
<el-table-column label="序号" align="center" type="index">
|
||
<template slot-scope="scope">
|
||
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="申请时间" align="center" prop="createTime" width="100" />
|
||
<el-table-column label="申请人" align="center" prop="createBy" show-overflow-tooltip />
|
||
<el-table-column label="领用单位" align="center" prop="leaseUnit" width="200" />
|
||
<el-table-column label="领用工程" align="center" prop="leaseProject" width="200" />
|
||
<el-table-column label="领用物资类型" align="center" prop="maTypeNames" show-overflow-tooltip />
|
||
<el-table-column label="业务单号" align="center" prop="code" show-overflow-tooltip />
|
||
<el-table-column label="领料人" align="center" prop="leasePerson" show-overflow-tooltip />
|
||
<el-table-column label="领料人电话" align="center" prop="phone" width="110" />
|
||
<el-table-column label="授权状态" align="center" prop="status" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.authId == null">未授权</span>
|
||
<span v-if="scope.row.authId != null">已授权</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="270">
|
||
<template slot-scope="{ row }">
|
||
<el-button v-if="row.authId === null" size="mini" type="danger" @click="handleAuth(row)">授权</el-button>
|
||
<el-button size="mini" v-if="row.authId !== null" type="success" @click="handleView(row)">查看</el-button>
|
||
<el-button size="mini" v-if="row.authId !== null" type="warning" @click="handleEdit(row)">编辑</el-button>
|
||
<el-button size="mini" v-if="row.authId !== null" type="primary" @click="handleAuthorize(row)">
|
||
项目部委托书
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
:total="total"
|
||
v-show="total > 0"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<el-dialog :title="dialogTitle" :visible.sync="authDialogVisible" width="60%" append-to-body>
|
||
<el-form :model="authForm" ref="authFormRef" label-width="110px" class="auth-dialog-form" :rules="authFormRules">
|
||
<el-form-item label="选择单位：" prop="teamId">
|
||
<el-popover
|
||
placement="bottom-start"
|
||
width="400"
|
||
trigger="click"
|
||
v-model="teamSelectVisible"
|
||
>
|
||
<div class="tree-container">
|
||
<el-input
|
||
v-model="treeFilterText"
|
||
placeholder="搜索单位"
|
||
size="small"
|
||
clearable
|
||
style="margin-bottom: 10px"
|
||
/>
|
||
<el-tree
|
||
:data="teamTreeData"
|
||
:props="treeProps"
|
||
node-key="id"
|
||
:highlight-current="true"
|
||
:expand-on-click-node="false"
|
||
:filter-node-method="filterTeamNode"
|
||
:default-expand-all="false"
|
||
:show-checkbox="false"
|
||
ref="teamTree"
|
||
@node-click="handleTeamNodeClick"
|
||
class="team-tree"
|
||
>
|
||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||
<span
|
||
:class="{
|
||
'selectable-node': isSelectableNode(data),
|
||
'disabled-node': !isSelectableNode(data)
|
||
}"
|
||
>
|
||
{{ data.name }}
|
||
<!-- <span v-if="data.level" class="node-level">({{ getLevelText(data.level) }})</span>-->
|
||
</span>
|
||
</span>
|
||
</el-tree>
|
||
</div>
|
||
<el-input
|
||
slot="reference"
|
||
v-model="authForm.teamName"
|
||
placeholder="请选择单位"
|
||
readonly
|
||
clearable
|
||
style="width: 50%"
|
||
:disabled="isEditMode"
|
||
@clear="handleTeamClear"
|
||
>
|
||
<i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
|
||
</el-input>
|
||
</el-popover>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="授权委托书：" prop="authorizationFile" required>
|
||
<div style="display: inline-flex; align-items: center; gap: 10px;">
|
||
<el-upload
|
||
:action="uploadParseUrl"
|
||
:headers="upload.headers"
|
||
:file-list="fileList"
|
||
:on-success="handleParseSuccess"
|
||
:on-error="handleError"
|
||
:on-remove="handleFileRemove"
|
||
accept=".docx, .pdf, image/*"
|
||
:before-upload="beforeUploadDocx"
|
||
:disabled="isEditMode"
|
||
style="margin-right: 10px"
|
||
>
|
||
<el-button size="small" type="primary" :disabled="isEditMode">点击上传</el-button>
|
||
</el-upload>
|
||
|
||
|
||
<el-button v-if="dialogTitle!='编辑授权'" size="small" type="warning" @click="downloadTemplate">下载委托书模版</el-button>
|
||
|
||
<el-button
|
||
v-if="fileList.length > 0 && isEditMode"
|
||
size="small"
|
||
type="text"
|
||
@click="previewFile(authForm.authorizationFile)"
|
||
>
|
||
</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="领料人信息：" required>
|
||
<el-table :data="materialReceivers" border style="width: 100%">
|
||
<!-- <template>-->
|
||
<!-- <div class="id-card-upload-demo">-->
|
||
<!-- <!– 身份证上传表格部分 –>-->
|
||
<!-- <el-table :data="materialReceivers" border style="width: 100%">-->
|
||
<el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
|
||
<el-table-column label="姓名" prop="name" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.name" placeholder="请上传身份证识别" maxlength="30"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="身份证号码" prop="idNumber" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.idNumber"
|
||
placeholder="请上传身份证识别"
|
||
maxlength="18"
|
||
@blur="handleIdCard(scope.row)"
|
||
></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="手机号" prop="phone" align="center">
|
||
<template slot-scope="scope">
|
||
<div style="display: flex">
|
||
<!-- <span style="color: red">*</span>-->
|
||
<el-input
|
||
v-model="scope.row.phone"
|
||
placeholder="请输入手机号"
|
||
maxlength="11"
|
||
@blur="handlePhone(scope.row)"
|
||
></el-input>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="身份证照片" prop="idPhotos" align="center" width="280">
|
||
<template slot-scope="scope">
|
||
<div style="display:flex; align-items:center; justify-content:center; gap:10px">
|
||
<!-- 正面 -->
|
||
<el-upload
|
||
:action="uploadUrl"
|
||
:headers="uploadHeaders"
|
||
:data="{ type: 1 }"
|
||
:show-file-list="false"
|
||
accept="image/*"
|
||
:on-success="(res, file) => handleIdPhotoSuccess(res, file, scope.$index, 'front')"
|
||
>
|
||
<img
|
||
v-if="scope.row.idFrontPhoto"
|
||
:src="scope.row.idFrontPhoto"
|
||
style="width:120px; height:80px; cursor:pointer; border:1px solid #eee; border-radius:4px; object-fit:cover"
|
||
/>
|
||
<div v-else style="width:120px; height:80px; border:1px dashed #d9d9d9; display:flex; justify-content:center; align-items:center; cursor:pointer">
|
||
<i class="el-icon-plus"></i>
|
||
</div>
|
||
</el-upload>
|
||
|
||
<!-- 背面 -->
|
||
<el-upload
|
||
:action="uploadUrl"
|
||
:headers="uploadHeaders"
|
||
:data="{ type: 2 }"
|
||
:show-file-list="false"
|
||
accept="image/*"
|
||
:on-success="(res, file) => handleIdPhotoSuccess(res, file, scope.$index, 'back')"
|
||
>
|
||
<img
|
||
v-if="scope.row.idBackPhoto"
|
||
:src="scope.row.idBackPhoto"
|
||
style="width:120px; height:80px; cursor:pointer; border:1px solid #eee; border-radius:4px; object-fit:cover"
|
||
/>
|
||
<div v-else style="width:120px; height:80px; border:1px dashed #d9d9d9; display:flex; justify-content:center; align-items:center; cursor:pointer">
|
||
<i class="el-icon-plus"></i>
|
||
</div>
|
||
</el-upload>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="80" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="danger" @click="removeReceiver(scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div style="margin-top: 10px">
|
||
<el-button type="primary" @click="addReceiver">新增领料人</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!-- 批量授权时才显示的已选申请单 -->
|
||
<el-form-item v-if="isBatchMode" label="已选申请单：">
|
||
<el-tag
|
||
v-for="item in selectedItems"
|
||
:key="item.id"
|
||
closable
|
||
@close="removeSelectedItem(item)"
|
||
style="margin-right: 10px; margin-bottom: 5px"
|
||
>
|
||
{{ item.code }} ({{ item.leasePerson }})
|
||
</el-tag>
|
||
<div v-if="selectedItems.length === 0" style="color: #999">无已选申请单</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="authDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="submitAuthorization">{{ isBatchMode ? '批量授权' : '保存' }}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 查看对话框 -->
|
||
<el-dialog title="授权详情" :visible.sync="viewDialogVisible" width="800px" append-to-body>
|
||
<el-form :model="viewForm" label-width="110px" class="view-dialog-form">
|
||
<el-form-item label="班组名称：">
|
||
<el-input v-model="viewForm.teamName" :disabled="true"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="授权委托书：">
|
||
<div v-if="viewForm.authorizationFile">
|
||
<el-button type="text" @click="previewFile(viewForm.authorizationFile)">
|
||
{{ viewForm.authorizationFile.name }}
|
||
</el-button>
|
||
<span class="file-size" v-if="viewForm.authorizationFile.size">
|
||
({{ formatFileSize(viewForm.authorizationFile.size) }})
|
||
</span>
|
||
</div>
|
||
<span v-else>无</span>
|
||
</el-form-item>
|
||
|
||
|
||
<el-form-item label="领料人信息：">
|
||
<el-table :data="viewForm.detailsList" border style="width: 100%">
|
||
<el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
|
||
<el-table-column label="姓名" prop="name" align="center"></el-table-column>
|
||
<el-table-column label="身份证号" prop="idNumber" align="center"></el-table-column>
|
||
<el-table-column label="身份证照片" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="id-photo-view">
|
||
<el-image
|
||
v-if="scope.row.frontUrl"
|
||
:src="scope.row.frontUrl"
|
||
:preview-src-list="getPreviewList(scope.row)"
|
||
style="width: 100px; height: 60px; margin-right: 10px"
|
||
></el-image>
|
||
<el-image
|
||
v-if="scope.row.backUrl"
|
||
:src="scope.row.backUrl"
|
||
:preview-src-list="getPreviewList(scope.row)"
|
||
style="width: 100px; height: 60px"
|
||
></el-image>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="viewDialogVisible = false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
:title="previewTitle"
|
||
:visible.sync="previewVisible"
|
||
width="90%"
|
||
top="5vh"
|
||
class="file-preview-dialog"
|
||
>
|
||
<div v-if="previewType === 'pdf'" class="preview-content">
|
||
<iframe :src="previewUrl" width="100%" height="600px" frameborder="0"></iframe>
|
||
</div>
|
||
|
||
<div v-else-if="previewType === 'office'" class="preview-content">
|
||
<iframe :src="previewUrl" width="100%" height="600px" frameborder="0"></iframe>
|
||
</div>
|
||
|
||
<div v-else-if="previewType === 'image'" class="preview-content">
|
||
<img :src="previewUrl" style="max-width: 100%; max-height: 70vh; display: block; margin: 0 auto;" />
|
||
</div>
|
||
|
||
<div slot="footer">
|
||
<el-button @click="previewVisible = false">关闭</el-button>
|
||
<el-button type="primary" @click="downloadFile(previewUrl)">下载</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 项目部授权委托书 -->
|
||
<el-dialog :visible.sync="authorizeVisible" width="50%" append-to-body>
|
||
<div style="font-size: 16px; padding: 0 20px">
|
||
<vue-easy-print tableShow ref="remarksPrintRef" class="print">
|
||
<div style="line-height: 1.9">
|
||
<h2 style="text-align: center">委托书</h2>
|
||
<div style="text-indent: 2em">
|
||
滋有
|
||
<span style="text-decoration: underline">（{{ authorizeData.projectDept }}）</span>
|
||
授权委托:
|
||
<span v-for="(item, index) in authorizeData.detailsList" :key="index">
|
||
<span style="text-decoration: underline">（{{authorizeData.teamName }}）（{{ item.name }}）</span>
|
||
身份证号
|
||
<span style="text-decoration: underline">{{ item.idNumber }}</span>
|
||
，
|
||
</span>
|
||
前往贵单位办理
|
||
<span style="text-decoration: underline"> {{ authorizeData.leaseProject }} </span>
|
||
工器具、安全文明用品领退料事宜。委托人在贵单位领、退过程中所签署的一切文件和处理与之相关的一切事务，我均予以认可。委托人不得再次委托他人。
|
||
</div>
|
||
<div>特此委托证明！</div>
|
||
<div>
|
||
<span>受托人：</span>
|
||
<span v-if="authorizeData.detailsList && authorizeData.detailsList.length > 0">
|
||
<img
|
||
v-if="authorizeData.detailsList[0].signName"
|
||
:src="authorizeData.detailsList[0].signName"
|
||
alt=""
|
||
width="120px"
|
||
height="120px"
|
||
style="vertical-align: middle;"
|
||
:style="{ transform: authorizeData.detailsList[0].signType == 0 ? 'rotate(-90deg)' : 'none' }"
|
||
/>
|
||
</span>
|
||
</div>
|
||
|
||
<div style="margin-left: 62%; margin-bottom: 20px">
|
||
<div>委托单位：{{ authorizeData.leaseUnit }}</div>
|
||
<div>授权人：{{ authorizeData.userName }}</div>
|
||
<div>授权时间：{{ authorizeData.createTime }}</div>
|
||
</div>
|
||
|
||
<div
|
||
v-for="(item, index) in authorizeData.detailsList"
|
||
:key="index"
|
||
style="display: flex; justify-content: space-around; margin-bottom: 20px"
|
||
>
|
||
<img :src="item.frontUrl" alt="" width="300" height="150px;" />
|
||
<img :src="item.backUrl" alt="" width="300" height="150px;" />
|
||
</div>
|
||
</div>
|
||
<div id="print-content" style="padding: 30px 30px">
|
||
<span>附件：业务联系单</span>
|
||
<!-- 标题 -->
|
||
<div style="text-align: center; font-size: 16px">
|
||
<h3 style="font-size: 25px">{{ dialogForm.impUnitName }}</h3>
|
||
<h2 style="font-size: 35px; margin: 0 20%; display: flex; justify-content: space-around; align-items: center">
|
||
<span>业</span>
|
||
<span>务</span>
|
||
<span>联</span>
|
||
<span>系</span>
|
||
<span>单</span>
|
||
</h2>
|
||
</div>
|
||
<div
|
||
style="display: flex; justify-content: space-between; align-items: center; line-height: 1.9; padding: 0 15px"
|
||
>
|
||
<span style="text-decoration: underline">{{ dialogForm.leaseProject }}</span>
|
||
<span>
|
||
<span style="text-decoration: underline">{{ dialogForm.code }}</span>
|
||
号
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div style="border: 3px solid #000; min-height: 800px; line-height: 1.9; position: relative">
|
||
<div style="font-weight: 800; border-bottom: 1px solid #888; display: flex">
|
||
<div style="width: 50%; padding-left: 10px">主送单位：{{ '技术质量科' }}</div>
|
||
<div style="width: 50%; padding-left: 10px; border-left: 1px solid #888">
|
||
抄送单位：{{ '物资管理中心' }}
|
||
</div>
|
||
</div>
|
||
<!-- 内容 -->
|
||
<div style="padding-left: 10px; min-height: 300px">
|
||
<div>联系内容：</div>
|
||
<div style="text-indent: 2em">
|
||
因在
|
||
<span style="font-weight: 800">
|
||
{{ dialogForm.leaseProject }}
|
||
</span>
|
||
进行架线施工需要，现需领用以下工具器，详见附件一：
|
||
<!-- dialogForm.maTypeNames -->
|
||
<div>{{ dialogForm.maTypeNames }}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 说明 -->
|
||
<div style="padding-left: 10px; min-height: 200px">
|
||
<div>说明：</div>
|
||
<div>领料单位：{{ dialogForm.leaseUnit }}</div>
|
||
<!-- <div>项目部材料站站长联系人：{{ '徐青松' }} {{ '15234213324' }}</div> -->
|
||
<div>项目部技术联系人：{{ dialogForm.createBy }}：{{ dialogForm.phone }}</div>
|
||
<div>领取人员：{{ dialogForm.leasePerson }}：{{ dialogForm.phone }}</div>
|
||
</div>
|
||
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
border-top: 1px solid #888;
|
||
border-bottom: 1px solid #888;
|
||
position: absolute;
|
||
bottom: 90px;
|
||
right: 0;
|
||
"
|
||
>
|
||
<div style="width: 35%; padding-left: 10px">主管：{{ '' }}</div>
|
||
<div style="width: 43%; padding-left: 10px; border-left: 1px solid #888">
|
||
联系：{{ dialogForm.leasePerson }} {{ dialogForm.phone }}
|
||
</div>
|
||
<div style="width: 22%; padding-left: 10px; border-left: 1px solid #888">
|
||
{{ handleTimeFormat(dialogForm.supplierTime) }}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
border-top: 1px solid #888;
|
||
border-bottom: 1px solid #888;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
"
|
||
>
|
||
<div style="width: 50%; padding-left: 10px">签复：</div>
|
||
<div
|
||
style="
|
||
width: 50%;
|
||
padding-left: 100px;
|
||
border-left: 1px solid #888;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<span>年</span>
|
||
<span>月</span>
|
||
<span>日</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 附件 -->
|
||
<div style="margin-top: 100px">
|
||
<div style="font-size: 20px; padding-left: 40px; line-height: 1.9">
|
||
附件一：{{ dialogForm.leaseProject }}
|
||
<span style="margin-left: 20px">{{ dialogForm.code }}</span>
|
||
号附件
|
||
</div>
|
||
<div></div>
|
||
</div>
|
||
<table border="1" style="width: 100%; border-collapse: collapse">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 55px; text-align: center">序号</th>
|
||
<th
|
||
v-for="(column, index) in dialogColumns"
|
||
:key="column.prop"
|
||
:style="{ width: column.width, textAlign: 'center' }"
|
||
>
|
||
{{ column.label }}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(row, rowIndex) in dialogList" :key="rowIndex">
|
||
<td style="text-align: center">{{ rowIndex + 1 }}</td>
|
||
<td v-for="(column, colIndex) in dialogColumns" :key="colIndex" :style="{ textAlign: 'center' }">
|
||
{{ row[column.prop] }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</vue-easy-print>
|
||
</div>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="authorizePrint">打印</el-button>
|
||
<el-button @click="authorizeVisible = false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||
import {
|
||
getAuthDetail,
|
||
getLeasePublishAuthList,
|
||
getTeamList,
|
||
sumbitAuthData,
|
||
uploadIdCard,
|
||
getAuthInfo, getBusinessFormByCode
|
||
} from '@/api/materialsStation/auth'
|
||
import { getToken } from '@/utils/auth'
|
||
import { validateIdCard } from '@/utils/bonus'
|
||
import vueEasyPrint from 'vue-easy-print'
|
||
import {getLeaseTask} from "@/api/business";
|
||
export default {
|
||
components: { vueEasyPrint },
|
||
name: 'IdCardUploadComponent',
|
||
data() {
|
||
return {
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
statusList: [
|
||
{ id: '', name: '全部' },
|
||
{ id: '1', name: '已授权' },
|
||
{ id: '0', name: '未授权' }
|
||
],
|
||
total: 0, // 总条数
|
||
loading: false, // 遮罩层
|
||
showSearch: true, // 显示搜索条件
|
||
tableList: [], // 列表数据源
|
||
queryTime: [], // 日期数据源
|
||
selectList: [], // 列表选中数据
|
||
url: null,
|
||
fileName: null,
|
||
// 列表查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
startTime: null,
|
||
endTime: null,
|
||
keyWord: '',
|
||
taskStatus: ''
|
||
},
|
||
//新增弹窗
|
||
open: false,
|
||
previewVisible: false,
|
||
previewUrl: '',
|
||
previewTitle: '',
|
||
previewType: '', // 'image', 'pdf', 'office'
|
||
fileList: [],
|
||
uploadList: [],
|
||
// 上传参数
|
||
upload: {
|
||
// 是否显示弹出层（上传导入）
|
||
open: false,
|
||
// 弹出层标题（上传导入）
|
||
title: '上传文件',
|
||
// 设置上传的请求头部
|
||
headers: { Authorization: 'Bearer ' + getToken() },
|
||
// 上传的地址
|
||
url: process.env.VUE_APP_BASE_API + '/file/upload'
|
||
},
|
||
|
||
titles: '',
|
||
authDialogVisible: false,
|
||
teamList: [], // 班组列表
|
||
authFormRules: {
|
||
teamId: [{ required: true, message: '请选择班组', trigger: 'change' }]
|
||
},
|
||
authForm: {
|
||
teamId: '',
|
||
teamName: '',
|
||
authorizationFile: null,
|
||
materialReceivers: [] // 初始化为空，后面统一处理
|
||
},
|
||
currentRow: null, // 当前操作的行数据
|
||
|
||
materialReceivers: [],
|
||
// uploadUrl: process.env.VUE_APP_BASE_API + '/material/authorize/uploadPhoto',
|
||
uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
|
||
uploadHeaders: {
|
||
Authorization: 'Bearer ' + getToken()
|
||
},
|
||
viewDialogVisible: false,
|
||
viewForm: {
|
||
teamName: '',
|
||
authorizationFile: null,
|
||
detailsList: []
|
||
},
|
||
pdfPreviewVisible: false,
|
||
pdfViewerUrl: '',
|
||
pdfJsPath: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js',
|
||
pdfWorkerPath: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js',
|
||
isEditMode: false, // 是否处于编辑模式
|
||
dialogTitle: '新增授权', // 弹窗标题
|
||
isBatchMode: false, // 是否批量模式
|
||
selectedItems: [], // 批量授权时选择的申请单
|
||
authorizeVisible: false, // 授权委托书
|
||
authorizeData: {
|
||
leaseUnit: '',
|
||
leaseProject: '',
|
||
detailsList: [],
|
||
userName: '',
|
||
createTime: ''
|
||
},
|
||
// 新增数据属性
|
||
teamSelectVisible: false,
|
||
teamTreeData: [],
|
||
treeFilterText: '', // 树形搜索文本
|
||
treeProps: {
|
||
label: 'name',
|
||
children: 'children'
|
||
},
|
||
uploadParseUrl: process.env.VUE_APP_BASE_API + '/material/authorize/parseWord',
|
||
//业务联系单
|
||
dialogForm: {
|
||
proName: '', // 项目名称
|
||
code: '' // 业务单号
|
||
},
|
||
dialogColumns: [
|
||
{ label: '名称', prop: 'maTypeName', width: '150px' },
|
||
{ label: '规格', prop: 'typeName', width: '150px' },
|
||
{ label: '单位', prop: 'unitName', width: '60px' },
|
||
{ label: '数量', prop: 'preNum', width: '60px' },
|
||
{ label: '备注', prop: 'remark', width: '' }
|
||
],
|
||
dialogList: []
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
},
|
||
watch: {
|
||
// 监听弹框显示状态
|
||
authDialogVisible(newVal) {
|
||
if (!newVal) {
|
||
// 弹框关闭时重置上传相关状态
|
||
this.resetUploadState()
|
||
this.$refs.authFormRef.resetFields() // 重置表单
|
||
}
|
||
},
|
||
// 监听搜索文本变化
|
||
treeFilterText(val) {
|
||
this.$refs.teamTree.filter(val)
|
||
}
|
||
},
|
||
methods: {
|
||
beforeUploadDocx(file) {
|
||
const isDocx = file.name.toLowerCase().endsWith('.docx')
|
||
const isWordMime =
|
||
file.type ===
|
||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||
|
||
// if (!isDocx || !isWordMime) {
|
||
// this.$message.error('只能上传.docx格式的文件！')
|
||
// return false // 阻止上传
|
||
// }
|
||
|
||
// 限制大小，例如 10MB
|
||
const isLt10M = file.size / 1024 / 1024 < 10
|
||
if (!isLt10M) {
|
||
this.$message.error('文件大小不能超过 10MB！')
|
||
return false
|
||
}
|
||
|
||
return true
|
||
},
|
||
// 判断节点是否可选择（只有第三级或没有层级的数据可选择）
|
||
isSelectableNode(node) {
|
||
// 第三级数据：level为"3"
|
||
// 没有层级的数据：没有parentId或parentId为null
|
||
return node.level === '3' || (!node.parentId || node.parentId === null)
|
||
},
|
||
|
||
// 获取层级文本
|
||
getLevelText(level) {
|
||
const levelMap = {
|
||
'1': '一级',
|
||
'2': '二级',
|
||
'3': '三级'
|
||
}
|
||
return levelMap[level] || ''
|
||
},
|
||
|
||
// 处理节点点击
|
||
handleTeamNodeClick(node) {
|
||
// 只有可选择的节点才能被选中
|
||
if (!this.isSelectableNode(node)) {
|
||
// this.$message.warning('只能选择具体的班组（第三级）或独立班组')
|
||
return
|
||
}
|
||
|
||
this.authForm.teamId = node.id
|
||
this.authForm.teamName = node.name
|
||
this.teamSelectVisible = false
|
||
|
||
// 清除表单验证错误
|
||
this.$refs.authFormRef.clearValidate(['teamId'])
|
||
},
|
||
|
||
// 清除选择
|
||
handleTeamClear() {
|
||
this.authForm.teamId = ''
|
||
this.authForm.teamName = ''
|
||
},
|
||
|
||
// 过滤节点方法
|
||
filterTeamNode(value, data) {
|
||
if (!value) return true
|
||
return data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
|
||
},
|
||
|
||
// 处理树形数据（适配已经是树形结构的数据）
|
||
processTreeData(data) {
|
||
if (!Array.isArray(data)) return []
|
||
|
||
return data.map(item => {
|
||
const processedItem = {
|
||
...item,
|
||
// 确保children存在
|
||
children: item.children ? this.processTreeData(item.children) : []
|
||
}
|
||
return processedItem
|
||
})
|
||
},
|
||
// 是否可用勾选框
|
||
selectable(row) {
|
||
return row.authId === null
|
||
},
|
||
// 身份证号码校验
|
||
handleIdCard(row) {
|
||
const idCard = row.idNumber
|
||
const isValid = validateIdCard(idCard)
|
||
if (!isValid) {
|
||
this.$message.error('身份证号码格式不正确')
|
||
}
|
||
},
|
||
// 手机号验证
|
||
handlePhone(row) {
|
||
// 正则校验手机号 /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
|
||
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
|
||
if (!reg.test(row.phone)) {
|
||
this.$message.error('手机号格式不正确')
|
||
row.phone = ''
|
||
}
|
||
},
|
||
// 上传前验证
|
||
beforeIdPhotoUpload(file) {
|
||
const isImage = file.type.startsWith('image/')
|
||
const isLt5M = file.size / 1024 / 1024 < 5
|
||
|
||
if (!isImage) {
|
||
this.$message.error('只能上传图片文件!')
|
||
return false
|
||
}
|
||
if (!isLt5M) {
|
||
this.$message.error('上传图片大小不能超过 5MB!')
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
// 身份证照片上传成功处理
|
||
handleIdPhotoSuccess(response, file, index, type) {
|
||
if (type === 'front') {
|
||
this.materialReceivers[index].frontUploading = false
|
||
} else {
|
||
this.materialReceivers[index].backUploading = false
|
||
}
|
||
|
||
if (response.code === 200) {
|
||
const data = response.data
|
||
if (type === 'front') {
|
||
this.materialReceivers[index].idFrontPhoto = data.url
|
||
// this.materialReceivers[index].idFrontPhoto = data.frontUrl;
|
||
// if (data.name) {
|
||
// this.materialReceivers[index].name = data.name;
|
||
// }
|
||
// if (data.idNumber) {
|
||
// this.materialReceivers[index].idNumber = data.idNumber;
|
||
// }
|
||
} else {
|
||
this.materialReceivers[index].idBackPhoto = data.url
|
||
// this.materialReceivers[index].idBackPhoto = data.backUrl;
|
||
}
|
||
|
||
// 同步到 authForm
|
||
this.authForm.materialReceivers = [...this.materialReceivers]
|
||
// this.$message.success('身份证上传识别成功');
|
||
} else {
|
||
this.$message.error(response.msg || '上传失败')
|
||
}
|
||
},
|
||
|
||
// 上传失败处理
|
||
handleUploadError(error, file, fileList) {
|
||
console.error('上传失败:', error)
|
||
this.$message.error('上传失败，请重试')
|
||
},
|
||
// 获取列表
|
||
getList() {
|
||
this.loading = true
|
||
const params = {
|
||
keyWord: this.queryParams.keyWord,
|
||
taskStatus: this.queryParams.taskStatus,
|
||
startTime: this.queryParams.startTime,
|
||
endTime: this.queryParams.endTime,
|
||
pageSize: this.queryParams.pageSize,
|
||
pageNum: this.queryParams.pageNum
|
||
}
|
||
getLeasePublishAuthList(params).then(response => {
|
||
this.tableList = response.data.rows
|
||
this.total = response.data.total
|
||
this.loading = false
|
||
|
||
// 重置选择状态 - 确保清理干净
|
||
this.$nextTick(() => {
|
||
this.selectList = []
|
||
this.selectedItems = [] // 确保清空
|
||
this.$refs.multipleTable.clearSelection()
|
||
})
|
||
})
|
||
},
|
||
// 搜索按钮
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
},
|
||
// 重置按钮
|
||
resetQuery() {
|
||
this.queryParams.time = []
|
||
this.resetForm('queryForm')
|
||
this.queryParams.keyWord = ''
|
||
this.queryParams.taskStatus = ''
|
||
this.handleQuery()
|
||
},
|
||
// 列表复选框
|
||
handleSelectionChange(validSelection) {
|
||
// 只存储未授权项目的ID
|
||
this.selectList = validSelection.filter(item => item.authId === null).map(item => item.id)
|
||
|
||
// 更新 selectedItems 为当前表格中匹配的未授权项
|
||
this.selectedItems = this.tableList.filter(item => this.selectList.includes(item.id) && item.authId === null)
|
||
|
||
this.single = validSelection.length !== 1
|
||
this.multiple = !validSelection.length
|
||
},
|
||
|
||
// 单条授权
|
||
handleAuth(row) {
|
||
this.currentRow = row
|
||
this.authDialogVisible = true
|
||
this.isEditMode = false
|
||
this.isBatchMode = false
|
||
this.dialogTitle = '新增授权'
|
||
this.resetAuthForm()
|
||
this.getTeamList(row.externalId)
|
||
|
||
// 初始化领料人数据
|
||
this.materialReceivers = [
|
||
{
|
||
name: '',
|
||
idNumber: '',
|
||
phone:'',
|
||
idFrontPhoto: null,
|
||
idBackPhoto: null,
|
||
frontUploading: false,
|
||
backUploading: false
|
||
}
|
||
]
|
||
this.authForm.materialReceivers = [...this.materialReceivers]
|
||
},
|
||
// 批量授权
|
||
handleAdd() {
|
||
if (this.selectList.length === 0) {
|
||
this.$message.warning('请至少选择一条未授权的记录')
|
||
return
|
||
}
|
||
// 修正：只获取selectList中指定的项目
|
||
this.selectedItems = this.tableList.filter(item => this.selectList.includes(item.id))
|
||
|
||
if (this.selectedItems.length === 0) {
|
||
this.$message.warning('所选记录中没有未授权的申请单')
|
||
return
|
||
}
|
||
|
||
// 检查所有选中的申请单是否属于同一个班组
|
||
const firstTeamId = this.selectedItems[0].externalId
|
||
const allSameTeam = this.selectedItems.every(item => item.externalId === firstTeamId)
|
||
|
||
if (!allSameTeam) {
|
||
this.$message.error('批量授权只能选择相同班组的申请单')
|
||
return
|
||
}
|
||
|
||
this.authDialogVisible = true
|
||
this.isEditMode = false
|
||
this.isBatchMode = true
|
||
this.dialogTitle = `批量授权 (${this.selectedItems.length}条)`
|
||
this.resetAuthForm()
|
||
this.getTeamList(firstTeamId)
|
||
|
||
// 初始化领料人数据
|
||
this.materialReceivers = [
|
||
{
|
||
name: '',
|
||
idNumber: '',
|
||
phone:'',
|
||
idFrontPhoto: null,
|
||
idBackPhoto: null,
|
||
frontUploading: false,
|
||
backUploading: false
|
||
}
|
||
]
|
||
},
|
||
// 移除已选申请单
|
||
removeSelectedItem(item) {
|
||
this.selectedItems = this.selectedItems.filter(i => i.id !== item.id)
|
||
this.selectList = this.selectList.filter(id => id !== item.id)
|
||
this.dialogTitle = `批量授权 (${this.selectedItems.length}条)`
|
||
|
||
// 更新表格选中状态
|
||
this.$nextTick(() => {
|
||
this.tableList.forEach(row => {
|
||
if (row.id === item.id) {
|
||
this.$refs.multipleTable.toggleRowSelection(row, false)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
|
||
// 重置授权表单
|
||
resetAuthForm() {
|
||
this.authForm = {
|
||
teamId: '',
|
||
teamName: '',
|
||
authorizationFile: null,
|
||
materialReceivers: []
|
||
}
|
||
this.materialReceivers = []
|
||
this.fileList = []
|
||
this.url = null
|
||
this.fileName = null
|
||
|
||
// 重置表单验证
|
||
if (this.$refs.authFormRef) {
|
||
this.$refs.authFormRef.clearValidate()
|
||
}
|
||
},
|
||
// 获取班组列表
|
||
getTeamList(externalId) {
|
||
const params = {
|
||
externalId: externalId
|
||
}
|
||
getTeamList(params).then(response => {
|
||
this.teamList = response.data
|
||
// 处理树形数据
|
||
this.teamTreeData = this.processTreeData(response.data)
|
||
})
|
||
},
|
||
// 重置上传状态
|
||
resetUploadState() {
|
||
this.fileList = []
|
||
this.uploadList = []
|
||
this.url = null
|
||
},
|
||
|
||
//文件上传-成功
|
||
handleSuccess(response, file, fileList) {
|
||
if (response.code == 200) {
|
||
console.log(response.data)
|
||
console.log('路径：', response.data.url)
|
||
this.url = response.data.url
|
||
this.fileName = response.data.name
|
||
this.$message.success('文件上传成功')
|
||
// 更新fileList显示
|
||
this.fileList = [
|
||
{
|
||
name: file.name,
|
||
url: response.data.url
|
||
}
|
||
]
|
||
} else {
|
||
this.$message.error(response.msg || '文件上传失败')
|
||
}
|
||
},
|
||
|
||
// 新增领料人
|
||
addReceiver() {
|
||
this.materialReceivers.push({
|
||
name: '',
|
||
idNumber: '',
|
||
phone:'',
|
||
idFrontPhoto: null,
|
||
idBackPhoto: null,
|
||
frontUploading: false,
|
||
backUploading: false
|
||
})
|
||
},
|
||
|
||
// 删除领料人
|
||
removeReceiver(index) {
|
||
if (this.materialReceivers.length <= 1) {
|
||
this.$message.warning('至少需要保留一个领料人')
|
||
return
|
||
}
|
||
this.materialReceivers.splice(index, 1)
|
||
},
|
||
// 表单验证（统一验证）
|
||
validateForm() {
|
||
if (!this.authForm.teamId) {
|
||
this.$message.error('请选择班组')
|
||
return false
|
||
}
|
||
|
||
if (!this.url) {
|
||
this.$message.error('请上传授权委托书')
|
||
return false
|
||
}
|
||
|
||
if (this.materialReceivers.length === 0) {
|
||
this.$message.error('请至少添加一个领料人')
|
||
return false
|
||
}
|
||
|
||
for (let i = 0; i < this.materialReceivers.length; i++) {
|
||
const receiver = this.materialReceivers[i]
|
||
|
||
if (!receiver.name || !receiver.idNumber) {
|
||
this.$message.error(`第 ${i + 1} 个领料人身份证信息不完整`)
|
||
return false
|
||
}
|
||
|
||
if (!receiver.idFrontPhoto || !receiver.idBackPhoto) {
|
||
this.$message.error(`第 ${i + 1} 个领料人请上传身份证正反面照片`)
|
||
return false
|
||
}
|
||
|
||
// 身份证号码格式验证
|
||
if (!validateIdCard(receiver.idNumber)) {
|
||
this.$message.error(`第 ${i + 1} 个领料人身份证号码格式不正确`)
|
||
return false
|
||
}
|
||
}
|
||
|
||
// 批量模式下额外验证
|
||
if (this.isBatchMode && this.selectedItems.length === 0) {
|
||
this.$message.error('请至少选择一条申请单')
|
||
return false
|
||
}
|
||
|
||
return true
|
||
},
|
||
// 查看授权详情
|
||
handleView(row) {
|
||
this.viewDialogVisible = true
|
||
this.loading = true
|
||
|
||
// 这里替换为实际的API调用
|
||
const params = {
|
||
leaseId: row.id
|
||
}
|
||
getAuthDetail(params)
|
||
.then(response => {
|
||
console.log(response.data)
|
||
this.viewForm = response.data
|
||
this.viewForm = {
|
||
teamName: response.data.teamName,
|
||
authorizationFile: {
|
||
name: response.data.fileName,
|
||
url: response.data.url
|
||
},
|
||
detailsList: response.data.detailsList
|
||
}
|
||
this.loading = false
|
||
})
|
||
.catch(error => {
|
||
this.loading = false
|
||
this.$message.error('获取详情失败')
|
||
})
|
||
},
|
||
// 获取预览列表
|
||
getPreviewList(row) {
|
||
const list = []
|
||
if (row.frontUrl) list.push(row.frontUrl)
|
||
if (row.backUrl) list.push(row.backUrl)
|
||
return list
|
||
},
|
||
// 预览文件
|
||
previewFile(file) {
|
||
if (!file || !file.url) return;
|
||
|
||
const ext = file.name.split('.').pop().toLowerCase();
|
||
console.log(ext);
|
||
|
||
if (ext === 'pdf') {
|
||
this.previewPDF(file.url);
|
||
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
|
||
// 图片预览
|
||
this.previewImage(file.url);
|
||
} else if (ext === 'docx') {
|
||
// 直接下载 DOCX 文件
|
||
this.downloadFile(file.url);
|
||
} else {
|
||
this.$message.warning('不支持预览此文件类型');
|
||
}
|
||
},
|
||
previewPDF(url) {
|
||
// 打开 PDF 文件
|
||
window.open(url, '_blank');
|
||
},
|
||
previewImage(url) {
|
||
// 创建新窗口
|
||
const imgWindow = window.open('', '_blank');
|
||
|
||
// 设置新窗口内容
|
||
imgWindow.document.write(`
|
||
<html>
|
||
<head>
|
||
<title>图片预览</title>
|
||
<style>
|
||
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
|
||
img { max-width: 90%; max-height: 90%; object-fit: contain; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<img src="${url}" alt="图片预览" />
|
||
</body>
|
||
</html>
|
||
`);
|
||
},
|
||
downloadFile(url) {
|
||
// 直接下载 DOCX 文件
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = url.split('/').pop(); // 自动获取文件名
|
||
link.click();
|
||
},
|
||
// 格式化文件大小
|
||
formatFileSize(bytes) {
|
||
if (!bytes) return '0 Bytes'
|
||
const k = 1024
|
||
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i])
|
||
},
|
||
// 编辑授权
|
||
handleEdit(row) {
|
||
this.currentRow = row
|
||
this.authDialogVisible = true
|
||
this.isEditMode = true
|
||
this.isBatchMode = false
|
||
this.dialogTitle = '编辑授权'
|
||
this.getTeamList(row.externalId)
|
||
|
||
// 重置表单状态
|
||
this.resetAuthForm()
|
||
|
||
// 加载授权详情数据
|
||
this.loading = true
|
||
const params = {
|
||
leaseId: row.id
|
||
}
|
||
|
||
getAuthDetail(params)
|
||
.then(response => {
|
||
if (response.code === 200) {
|
||
const data = response.data
|
||
|
||
// 填充表单数据
|
||
this.authForm.teamId = data.teamId
|
||
this.authForm.teamName = data.teamName
|
||
this.url = data.url
|
||
this.fileName = data.fileName
|
||
|
||
// 设置文件列表
|
||
if (data.url && data.fileName) {
|
||
this.fileList = [
|
||
{
|
||
name: data.fileName,
|
||
url: data.url
|
||
}
|
||
]
|
||
this.authForm.authorizationFile = {
|
||
name: data.fileName,
|
||
url: data.url
|
||
}
|
||
}
|
||
|
||
// 设置领料人信息
|
||
this.materialReceivers = data.detailsList.map(item => ({
|
||
name: item.name,
|
||
idNumber: item.idNumber,
|
||
idFrontPhoto: item.frontUrl,
|
||
idBackPhoto: item.backUrl,
|
||
phone:item.phone,
|
||
frontUploading: false,
|
||
backUploading: false
|
||
}))
|
||
|
||
// 同步到authForm
|
||
this.authForm.materialReceivers = [...this.materialReceivers]
|
||
} else {
|
||
this.$message.error(response.msg || '获取授权详情失败')
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('获取授权详情失败:', error)
|
||
this.$message.error('获取授权详情失败')
|
||
})
|
||
.finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 项目部委托书
|
||
async handleAuthorize(row) {
|
||
try {
|
||
const params = {
|
||
leaseId: row.id
|
||
}
|
||
const res = await getAuthInfo(params)
|
||
this.authorizeData = res.data
|
||
const date = new Date()
|
||
const time = `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
|
||
this.authorizeData.createTime = res.data.createTime ? this.formatTime(res.data.createTime) : time
|
||
|
||
const params2 = {
|
||
businessCode: row.code
|
||
}
|
||
const res2 = await getBusinessFormByCode(params2)
|
||
this.dialogForm = {
|
||
...res2.data.leaseApplyInfo,
|
||
}
|
||
this.dialogList = res2.data.leaseApplyDetailsList
|
||
|
||
this.authorizeVisible = true
|
||
} catch (error) {
|
||
console.log('🚀 ~ handleAuthorize ~ error:', error)
|
||
}
|
||
},
|
||
// 转换时间格式
|
||
formatTime(time) {
|
||
const date = new Date(time)
|
||
const year = date.getFullYear()
|
||
const month = date.getMonth() + 1
|
||
const day = date.getDate()
|
||
return `${year} 年 ${month} 月 ${day} 日`
|
||
},
|
||
// 打印
|
||
authorizePrint() {
|
||
this.$refs.remarksPrintRef.print()
|
||
},
|
||
// 提交授权（统一处理单条和批量）
|
||
async submitAuthorization() {
|
||
// 1. 验证身份证号码是否唯一
|
||
const idNumbers = this.materialReceivers.map(receiver => receiver.idNumber)
|
||
const uniqueIdNumbers = [...new Set(idNumbers)]
|
||
|
||
if (idNumbers.length !== uniqueIdNumbers.length) {
|
||
this.$message.error('存在重复的身份证号码，请确保每个领料人的身份证号码唯一')
|
||
return
|
||
}
|
||
|
||
if (!this.validateForm()) return
|
||
|
||
try {
|
||
this.$loading({
|
||
text: this.isBatchMode ? '批量授权中...' : '提交中...',
|
||
lock: true
|
||
})
|
||
|
||
// 获取选中的班组名称
|
||
// const selectedTeam = this.teamList.find(team => team.id === this.authForm.teamId);
|
||
// const teamName = selectedTeam ? selectedTeam.name : '';
|
||
const teamName = this.authForm.teamName;
|
||
console.log("teamName", teamName)
|
||
|
||
const requestData = {
|
||
teamId: this.authForm.teamId,
|
||
teamName: teamName,
|
||
url: this.url,
|
||
fileName: this.fileName,
|
||
detailsList: this.materialReceivers.map(receiver => ({
|
||
name: receiver.name,
|
||
idNumber: receiver.idNumber,
|
||
frontUrl: receiver.idFrontPhoto,
|
||
backUrl: receiver.idBackPhoto,
|
||
phone:receiver.phone
|
||
}))
|
||
}
|
||
|
||
// 根据模式添加不同字段
|
||
if (this.isBatchMode) {
|
||
requestData.leaseIds = this.selectedItems.map(item => item.id)
|
||
} else {
|
||
requestData.leaseIds = [this.currentRow.id]
|
||
// requestData.leaseId = this.currentRow.id;
|
||
requestData.authId = this.isEditMode ? this.currentRow.authId : null
|
||
}
|
||
|
||
const response = await sumbitAuthData(requestData)
|
||
if (response.code === 200) {
|
||
this.$message.success(
|
||
this.isBatchMode
|
||
? `成功批量授权 ${this.selectedItems.length} 条记录`
|
||
: `${this.isEditMode ? '编辑' : '授权'}成功`
|
||
)
|
||
|
||
// 刷新列表数据
|
||
await this.getList()
|
||
|
||
// 重置选择状态
|
||
if (this.isBatchMode) {
|
||
this.selectList = []
|
||
this.selectedItems = []
|
||
this.$refs.multipleTable.clearSelection()
|
||
}
|
||
|
||
this.authDialogVisible = false
|
||
} else {
|
||
throw new Error(response.msg || `${this.isEditMode ? '编辑' : '授权'}失败`)
|
||
}
|
||
} catch (error) {
|
||
console.error('提交失败:', error)
|
||
this.$message.error(error.message || `${this.isEditMode ? '编辑' : '授权'}失败`)
|
||
} finally {
|
||
this.$loading().close()
|
||
}
|
||
},
|
||
/** 下载模板方法 */
|
||
async downloadTemplate() {
|
||
try {
|
||
// 使用统一的下载方法，确保路径正确
|
||
await this.download("/material/authorize/downLoad", {}, "授权委托书模版.docx");
|
||
this.$message.success("模板下载成功");
|
||
} catch (error) {
|
||
console.error("模版下载失败:", error);
|
||
this.$message.error("模板下载失败，请稍后重试");
|
||
} finally {
|
||
}
|
||
},
|
||
handleParseSuccess(response, file, fileList) {
|
||
// 后端返回结构：{ code:200, data: { receivers: [...], filePath: "xxx" } }
|
||
const data = (response && response.code === 200) ? response.data : null;
|
||
const list = data ? data.receivers : null;
|
||
|
||
if (!list || list.length === 0) {
|
||
this.$message.warning('未识别到委托人信息，请手动填写');
|
||
// 设置 fileList 显示上传的文件名
|
||
this.fileList = [{ name: file.name, url: data ? data.filePath : '' }];
|
||
// 同时保存文件路径（即使没有识别成功）
|
||
this.authForm.filePath = data ? data.filePath : '';
|
||
this.url=data ? data.filePath : '';
|
||
this.fileName=data ? data.fileName : '';
|
||
return;
|
||
}
|
||
|
||
// 把识别到的结果赋值给 materialReceivers
|
||
this.materialReceivers = list.map(item => ({
|
||
name: item.name || '',
|
||
idNumber: item.idNumber || '',
|
||
phone: item.phone || '',
|
||
idFrontPhoto: item.frontUrl || item.idFrontPhoto || item.fronturl || null,
|
||
idBackPhoto: item.backUrl || item.idBackPhoto || item.backurl || null,
|
||
frontUploading: false,
|
||
backUploading: false
|
||
}));
|
||
|
||
// 同步到表单
|
||
this.authForm.materialReceivers = [...this.materialReceivers];
|
||
// 保存文件路径
|
||
this.authForm.filePath = data.filePath;
|
||
|
||
// 更新 fileList 显示
|
||
this.fileList = [{ name: file.name, url: data.filePath }];
|
||
this.url=data.filePath;
|
||
this.fileName=data.fileName;
|
||
|
||
this.$message.success(`识别成功，共提取 ${this.materialReceivers.length} 个委托人`);
|
||
},
|
||
|
||
|
||
handleError(err) {
|
||
console.error('上传/解析失败', err);
|
||
this.$message.error('文件上传或解析失败');
|
||
},
|
||
|
||
handleFileRemove(file, fileList) {
|
||
this.fileList = fileList;
|
||
// 清空识别结果（可选）
|
||
// this.materialReceivers = [];
|
||
},
|
||
// 处理时间格式 2021-09-01 转换为 2021年09月01日
|
||
handleTimeFormat(time) {
|
||
if (time) {
|
||
return time.replace(/-/g, '年').replace(/-/g, '月') + '日'
|
||
}
|
||
return ''
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
/* 树形容器样式 */
|
||
.tree-container {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 自定义树节点样式 */
|
||
.custom-tree-node {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
/* 可选择节点样式 */
|
||
.selectable-node {
|
||
color: #333;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
|
||
/* 不可选择节点样式 */
|
||
.disabled-node {
|
||
//color: #c0c4cc;
|
||
cursor: not-allowed;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 层级标识样式 */
|
||
.node-level {
|
||
font-size: 12px;
|
||
//color: #909399;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* 树形组件样式调整 */
|
||
.team-tree {
|
||
.el-tree-node__content {
|
||
height: 32px;
|
||
|
||
&:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
}
|
||
|
||
.el-tree-node.is-current > .el-tree-node__content {
|
||
background-color: #e6f7ff;
|
||
color: #409eff;
|
||
}
|
||
}
|
||
/* 批量授权标签容器 */
|
||
.selected-items-container {
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
border: 1px solid #ebeef5;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* 批量授权标签 */
|
||
.selected-item-tag {
|
||
margin-right: 10px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
/* 批量授权标题 */
|
||
.batch-title {
|
||
font-size: 16px;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
}
|
||
.el-upload.is-disabled {
|
||
opacity: 0.7;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 弹窗标题样式 */
|
||
.el-dialog__header {
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
/* 查看对话框样式 */
|
||
.view-dialog-form {
|
||
margin-left: 0px;
|
||
}
|
||
|
||
.id-photo-view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.file-size {
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* 图片预览模态框样式 */
|
||
.image-preview-modal {
|
||
width: 80%;
|
||
max-width: 800px;
|
||
}
|
||
|
||
.image-preview-modal .el-message-box__content {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* PDF预览对话框样式 */
|
||
.pdf-preview-dialog .el-dialog__body {
|
||
padding: 10px;
|
||
}
|
||
|
||
/* 调整表单整体左移 */
|
||
.auth-dialog-form {
|
||
margin-left: 0px;
|
||
}
|
||
|
||
/* 调整领料人列表标签位置 */
|
||
.receiver-list-label {
|
||
margin-left: -10px;
|
||
}
|
||
|
||
/* 调整表格位置 */
|
||
.receiver-table-item {
|
||
margin-left: -30px;
|
||
}
|
||
|
||
/* 表格样式调整 */
|
||
.receiver-table {
|
||
margin-left: -30px;
|
||
width: calc(100% + 30px);
|
||
}
|
||
|
||
.id-photo-upload {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
gap: 10px;
|
||
}
|
||
|
||
.upload-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.upload-status {
|
||
color: #67c23a;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
.uploadImg {
|
||
padding-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.boxCode {
|
||
margin-top: 10px;
|
||
padding-bottom: 20px;
|
||
font-size: 18px;
|
||
}
|
||
::v-deep.el-table .fixed-width .el-button--mini {
|
||
width: 60px !important;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|