1128 lines
44 KiB
Vue
1128 lines
44 KiB
Vue
<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="backUnitId">
|
||
<treeselect
|
||
v-model="maForm.backUnitId"
|
||
:disabled="isEdit || isDetail"
|
||
:options="uniteList"
|
||
:normalizer="normalizer"
|
||
:show-count="true"
|
||
style="width: 240px"
|
||
:disable-branch-nodes="true"
|
||
noChildrenText="没有数据了"
|
||
noOptionsText="没有数据"
|
||
noResultsText="没有搜索结果"
|
||
placeholder="请选择转出单位"
|
||
@select="uniteChange"
|
||
/>
|
||
</el-form-item>
|
||
<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-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="leaseUnitId">
|
||
<treeselect
|
||
v-model="maForm.leaseUnitId"
|
||
:disabled="isDetail"
|
||
:options="lessUniteList"
|
||
:normalizer="normalizer"
|
||
:show-count="true"
|
||
style="width: 240px"
|
||
:disable-branch-nodes="true"
|
||
noChildrenText="没有数据了"
|
||
noOptionsText="没有数据"
|
||
noResultsText="没有搜索结果"
|
||
placeholder="请选择转入单位"
|
||
@select="leaseUniteChange"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="转入工程" prop="leaseProId">
|
||
<treeselect
|
||
v-model="maForm.leaseProId"
|
||
:disabled="isDetail"
|
||
:options="leaseProjectList"
|
||
:normalizer="normalizer"
|
||
:show-count="true"
|
||
style="width: 240px"
|
||
:disable-branch-nodes="true"
|
||
noChildrenText="没有数据了"
|
||
noOptionsText="没有数据"
|
||
noResultsText="没有搜索结果"
|
||
placeholder="请选择转入工程"
|
||
@select="leaseProjectChange"
|
||
/>
|
||
</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=""
|
||
/>
|
||
<!-- <div v-else class="picture-card-container">
|
||
<img class="picture-card" :src="urlTemp" alt="" />
|
||
<p class="file-name">{{ file.name }}</p>
|
||
</div> -->
|
||
<span class="el-upload-list__item-actions">
|
||
<!-- <span
|
||
v-if="updataIf(file)"
|
||
class="el-upload-list__item-delete"
|
||
@click="handleDownload(file)"
|
||
>
|
||
<i class="el-icon-download" />
|
||
</span> -->
|
||
<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>
|
||
|
||
<el-table
|
||
v-loading="loading"
|
||
ref="equipmentList"
|
||
:data="equipmentList"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<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
|
||
>
|
||
<template v-slot="scope" v-if="column.prop == 'directNum'">
|
||
<el-input-number
|
||
v-model="scope.row.directNum"
|
||
controls-position="right"
|
||
:precision="0"
|
||
style="width: 100%"
|
||
:disabled="isDetail || !scope.row.isActive"
|
||
:min="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>
|
||
|
||
<!-- 图片查看弹窗 -->
|
||
<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 { getListProject, getListUnite, getAgreement } from '@/api/lease/apply'
|
||
import { downloadFile, downloadFileData } from '@/utils/download'
|
||
import { getUseringData, receiveSubmit, receiveEdit, receiveDetail, getEquipmentThreeTypes } from '@/api/business/index'
|
||
import Treeselect from '@riophae/vue-treeselect'
|
||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||
import { getToken } from '@/utils/auth'
|
||
|
||
export default {
|
||
dicts: ['purchase_task_status'],
|
||
components: { Treeselect },
|
||
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: {
|
||
maId: undefined, // 物资类型
|
||
typeId: '', // 类型规格
|
||
keyWord: ''
|
||
},
|
||
maForm: {
|
||
backUnitId: undefined,
|
||
backProId: undefined,
|
||
backMan: '', // 转出人
|
||
backPhone: '', // 联系电话
|
||
backAgreementId: '', // 转出协议id
|
||
backAgreementCode: '', // 转出协议编号
|
||
leaseUnitId: undefined, // 转入单位
|
||
leaseProId: undefined, // 转入工程
|
||
leaseMan: '', // 转入人
|
||
leasePhone: '', // 联系电话
|
||
leaseAgreementId: '', // 转入协议id
|
||
leaseAgreementCode: '', // 转入协议编号
|
||
dirUrls: [] // 附件
|
||
},
|
||
// 表单参数
|
||
form: {},
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'label'
|
||
},
|
||
// 表单校验
|
||
rules: {
|
||
backUnitId: [
|
||
{
|
||
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'
|
||
}
|
||
],
|
||
leaseUnitId: [
|
||
{
|
||
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() {
|
||
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 if (this.$route.query.type == 'detail') {
|
||
this.isEdit = false
|
||
this.isDetail = true
|
||
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 = ''
|
||
const obj = Object.assign({}, this.$route, { title: '直转申请' })
|
||
this.$tab.updatePage(obj)
|
||
}
|
||
this.projectInfoList() // 单位工程下拉选
|
||
if (this.isEdit || this.isDetail) {
|
||
console.log('isEdit', this.isEdit)
|
||
this.getTaskInfo()
|
||
}
|
||
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) {
|
||
this.getMaTypeOpt()
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
// 查询
|
||
handleQuery() {
|
||
this.getList()
|
||
},
|
||
// 重置
|
||
handleReset() {
|
||
this.$refs.queryForm.resetFields()
|
||
this.getList()
|
||
},
|
||
// 获取列表
|
||
async getList() {
|
||
try {
|
||
const params = {
|
||
agreementId: this.maForm.backAgreementId,
|
||
...this.queryParams
|
||
}
|
||
const res = await getUseringData(params)
|
||
console.log('🚀 ~ 获取列表 ~ res:', res)
|
||
this.equipmentList = res.data
|
||
if (this.isEdit || this.isDetail) {
|
||
this.$nextTick(() => {
|
||
this.multipleSelection = this.multipleSelectionTemp
|
||
console.log('🚀 ~ 获取列表 ~ this.equipmentList:', this.multipleSelection)
|
||
this.multipleSelection.forEach(row => {
|
||
const foundRow = this.equipmentList.find(item => item.typeId === row.typeId)
|
||
console.log('🚀 ~ getList ~ foundRow:', foundRow)
|
||
if (foundRow) {
|
||
// 将 directNum 赋值给 foundRow
|
||
foundRow.directNum = row.directNum
|
||
// 调用 toggleRowSelection 方法选中行
|
||
this.$refs.equipmentList.toggleRowSelection(foundRow)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.log('🚀 ~ 获取列表 ~ error:', error)
|
||
this.tableList = []
|
||
}
|
||
},
|
||
// 获取物资类型
|
||
async getMaTypeOpt() {
|
||
try {
|
||
const params = {
|
||
agreementId: this.maForm.backAgreementId
|
||
}
|
||
console.log('🚀 ~ getMaTypeOpt ~ params:', params)
|
||
const res = await getEquipmentThreeTypes(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 = {
|
||
unitId: this.maForm.backUnitId,
|
||
projectId: this.maForm.backProId
|
||
}
|
||
const res = await getAgreement(params)
|
||
console.log('🚀 ~ getAgreementId ~ res:', res)
|
||
this.maForm.backAgreementId = res.data.agreementId
|
||
this.maForm.backAgreementCode = res.data.agreementCode
|
||
this.getList()
|
||
} catch (error) {
|
||
console.log('🚀 ~ getAgreementId ~ error:', error)
|
||
}
|
||
},
|
||
async getLeaseAgreementId() {
|
||
try {
|
||
const params = {
|
||
unitId: this.maForm.leaseUnitId,
|
||
projectId: this.maForm.leaseProId
|
||
}
|
||
const res = await getAgreement(params)
|
||
console.log('🚀 ~ getAgreementId ~ res:', res)
|
||
this.maForm.leaseAgreementId = res.data.agreementId
|
||
this.maForm.leaseAgreementCode = res.data.agreementCode
|
||
} 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) {
|
||
setTimeout(() => {
|
||
getListProject({ unitId: this.maForm.backUnitId }).then(response => {
|
||
this.projectList = response.data
|
||
this.maForm.backProId = null
|
||
})
|
||
}, 500)
|
||
},
|
||
projectChange(val) {
|
||
setTimeout(() => {
|
||
getListUnite({}).then(response => {
|
||
this.uniteList = response.data
|
||
})
|
||
this.getAgreementId()
|
||
}, 500)
|
||
},
|
||
leaseUniteChange(val) {
|
||
setTimeout(() => {
|
||
getListProject({ unitId: this.maForm.leaseUnitId }).then(res => {
|
||
this.leaseProjectList = res.data
|
||
this.maForm.leaseProId = null
|
||
})
|
||
}, 500)
|
||
},
|
||
leaseProjectChange(val) {
|
||
setTimeout(() => {
|
||
getListUnite({}).then(res => {
|
||
this.leaseUniteList = res.data
|
||
})
|
||
this.getLeaseAgreementId()
|
||
}, 500)
|
||
},
|
||
/** 租赁单位和工程-下拉选 */
|
||
projectInfoList() {
|
||
if (!this.isEdit) {
|
||
getListUnite({ projectId: null }).then(response => {
|
||
this.uniteList = response.data
|
||
this.lessUniteList = response.data
|
||
})
|
||
getListProject({ unitId: null }).then(response => {
|
||
this.projectList = response.data
|
||
this.leaseProjectList = response.data
|
||
})
|
||
} else {
|
||
getListUnite({ projectId: null }).then(response => {
|
||
this.uniteList = response.data
|
||
this.lessUniteList = response.data
|
||
})
|
||
getListProject({ unitId: this.maForm.backUnitId }).then(response => {
|
||
this.projectList = response.data
|
||
})
|
||
getListProject({ unitId: this.maForm.leaseUnitId }).then(response => {
|
||
this.leaseProjectList = response.data
|
||
})
|
||
}
|
||
},
|
||
//获取任务详情--- 编辑回显数据
|
||
async getTaskInfo() {
|
||
const loading = this.$loading()
|
||
try {
|
||
const res = await receiveDetail({ id: this.id })
|
||
console.log('🚀 ~ getTaskInfo ~ res:', res)
|
||
this.maForm = res.data
|
||
this.multipleSelectionTemp = res.data.directApplyDetails
|
||
this.getList()
|
||
console.log('🚀 ~ getTaskInfo ~ this.equipmentList:', this.equipmentList)
|
||
loading.close()
|
||
} catch (error) {
|
||
console.log('🚀 ~ error:', error)
|
||
loading.close()
|
||
}
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(row) {
|
||
console.log('选中了~', row)
|
||
this.multipleSelection = row
|
||
this.equipmentList.forEach(item => {
|
||
if (this.multipleSelection.some(val => val.id === item.id)) {
|
||
item.isActive = true
|
||
} else {
|
||
item.isActive = false
|
||
}
|
||
})
|
||
},
|
||
// 数量变更
|
||
directNumChange(row) {
|
||
if (row.directNum > row.useNum) {
|
||
this.$message.error('直转数量不能大于领料数量')
|
||
this.$nextTick(() => {
|
||
row.directNum = row.useNum
|
||
})
|
||
}
|
||
},
|
||
/** 保存按钮操作 */
|
||
handleSave() {
|
||
console.log('maForm', this.maForm)
|
||
console.log('选中数据', this.multipleSelection)
|
||
if (this.multipleSelection.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 {
|
||
const params = {
|
||
directApplyInfo: this.maForm,
|
||
directApplyInfoDetails: this.multipleSelection
|
||
}
|
||
let fileList = []
|
||
console.log('params2222222222', params)
|
||
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,
|
||
}
|
||
}
|
||
// console.log("11111111111",e.response)
|
||
// if (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
|
||
// )
|
||
// }
|
||
// }
|
||
})
|
||
|
||
}
|
||
|
||
params.directApplyInfo.dirUrls = fileList
|
||
|
||
if (this.isEdit) {
|
||
delete params.directApplyInfo.directApplyDetails
|
||
console.log('🚀 ~ this.$modal.confirm ~ params:', params)
|
||
const res = await receiveEdit(params)
|
||
console.log('🚀 ~ handleSave ~ res:', res)
|
||
} else {
|
||
const res = await receiveSubmit(params)
|
||
console.log('🚀 ~ handleSave ~ res:', res)
|
||
}
|
||
this.$message.success('操作成功')
|
||
this.$refs['maForm'].resetFields()
|
||
this.equipmentList = []
|
||
this.multipleSelection = []
|
||
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;
|
||
// }
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.highlight-text {
|
||
background-color: #ffd04b;
|
||
color: #000;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|