608 lines
21 KiB
Vue
608 lines
21 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
|
||
<el-card style="margin-bottom: 20px">
|
||
<el-form
|
||
v-if="dialogVisible"
|
||
ref="dialogForm"
|
||
:model="dialogForm"
|
||
:rules="rules"
|
||
size="small"
|
||
inline
|
||
@submit.native.prevent
|
||
style="height: 32px"
|
||
>
|
||
<el-form-item label="规格型号">
|
||
<el-cascader
|
||
v-model="typeIdList"
|
||
:options="options"
|
||
:props="{ value: 'typeId', label: 'typeName' }"
|
||
clearable
|
||
@change="handleChange"
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
<!-- 厂家 -->
|
||
<el-form-item label="生产厂家" prop="supplierId">
|
||
<div>
|
||
<i
|
||
class="el-icon-circle-plus-outline"
|
||
style="color: #13ce66; margin-right: 5px; cursor: pointer"
|
||
@click="openAddress"
|
||
/>
|
||
<el-select v-model="dialogForm.supplierId" placeholder="请选择厂家" clearable style="width: 240px">
|
||
<el-option
|
||
v-for="item in manufacturerSelect"
|
||
:key="item.id"
|
||
:label="item.label"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
<!-- 出厂日期 -->
|
||
<el-form-item label="出厂日期" prop="productionDate">
|
||
<el-date-picker
|
||
v-model="dialogForm.productionDate"
|
||
type="date"
|
||
clearable
|
||
placeholder="选择出厂日期"
|
||
value-format="yyyy-MM-dd"
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
<!-- 申请数量 -->
|
||
<el-form-item label="申请数量" prop="applyNum">
|
||
<el-input-number
|
||
v-model="dialogForm.applyNum"
|
||
:min="1"
|
||
:max="9999"
|
||
:controls="false"
|
||
placeholder="请输入申请数量"
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item style="float: right">
|
||
<el-button type="primary" icon="el-icon-plus" :disabled="typeIdList.length == 0" @click="handleAdd"
|
||
>点击填充</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card v-loading="isLoading">
|
||
<el-row :gutter="10" class="mb8" justify="end">
|
||
<el-col :span="24" style="display: flex; justify-content: flex-end">
|
||
<el-button type="primary" :disabled="dialogList.length == 0" @click="submit">确定</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-table :data="dialogList" border stripe highlight-current-row height="546" style="width: 100%">
|
||
<el-table-column type="index" width="55" label="序号" align="center" />
|
||
<el-table-column
|
||
v-for="(column, index) in dialogColumns"
|
||
:width="column.width"
|
||
:show-overflow-tooltip="!column.unShowTooltip"
|
||
:key="index"
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
align="center"
|
||
>
|
||
<!-- 插槽 -->
|
||
<template #header>
|
||
<span>
|
||
<span v-if="column.required" style="color: red">*</span>
|
||
{{ column.label }}
|
||
</span>
|
||
</template>
|
||
<template v-slot="{ row }">
|
||
<el-select
|
||
v-if="column.prop == 'supplierId'"
|
||
v-model="row.supplierId"
|
||
placeholder="请选择厂家"
|
||
style="width: 150px"
|
||
>
|
||
<el-option
|
||
v-for="item in manufacturerSelect"
|
||
:key="item.id"
|
||
:label="item.label"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
<el-date-picker
|
||
v-else-if="column.prop == 'productionDate'"
|
||
v-model="row.productionDate"
|
||
type="date"
|
||
clearable
|
||
placeholder="选择出厂日期"
|
||
value-format="yyyy-MM-dd"
|
||
style="width: 150px"
|
||
/>
|
||
<el-input
|
||
v-else-if="column.prop == 'toolPrice'"
|
||
v-model="row.toolPrice"
|
||
placeholder="请输入"
|
||
maxlength="9999"
|
||
@input="handlePriceInput(row)"
|
||
style="width: 120px"
|
||
/>
|
||
<el-input
|
||
v-else-if="column.prop == 'identifyCode'"
|
||
v-model="row.identifyCode"
|
||
placeholder="请输入"
|
||
maxlength="999"
|
||
style="width: 120px"
|
||
/>
|
||
<span v-else-if="column.prop == 'certificates'">
|
||
<span style="color: #00a288; cursor: pointer" @click="handleFileUpload(row, 2)">上传</span>
|
||
<span
|
||
v-if="row.certificates && row.certificates.length > 0"
|
||
style="color: #00a288; cursor: pointer; margin-left: 10px"
|
||
@click="handleView(row, 2)"
|
||
>查看</span
|
||
>
|
||
</span>
|
||
<span v-else-if="column.prop == 'inspectionReports'">
|
||
<span style="color: #00a288; cursor: pointer" @click="handleFileUpload(row, 3)">上传</span>
|
||
<span
|
||
v-if="row.inspectionReports && row.inspectionReports.length > 0"
|
||
style="color: #00a288; cursor: pointer; margin-left: 10px"
|
||
@click="handleView(row, 3)"
|
||
>查看</span
|
||
>
|
||
</span>
|
||
<span v-else-if="column.prop == 'purchaseInvoices'">
|
||
<span style="color: #00a288; cursor: pointer" @click="handleFileUpload(row, 4)">上传</span>
|
||
<span
|
||
v-if="row.purchaseInvoices && row.purchaseInvoices.length > 0"
|
||
style="color: #00a288; cursor: pointer; margin-left: 10px"
|
||
@click="handleView(row, 4)"
|
||
>查看</span
|
||
>
|
||
</span>
|
||
<!-- 其他列默认显示文本 -->
|
||
<span v-else>{{ row[column.prop] }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="{ row, $index }">
|
||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete($index)" style="color: red"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-dialog>
|
||
|
||
<!-- 上传 -->
|
||
<el-dialog :title="uploadTitle" :visible.sync="uploadVisible" width="40%">
|
||
<FileUpload
|
||
v-model="fileList"
|
||
:value="fileList"
|
||
:limit="3"
|
||
:fileSize="10"
|
||
:fileType="['jpg', 'png', 'pdf']"
|
||
@input="handleFileList"
|
||
/>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="uploadVisible = false">关 闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 查看 -->
|
||
<el-dialog :title="viewTitle" :visible.sync="viewVisible" width="40%">
|
||
<el-table :data="viewList" fit highlight-current-row style="width: 100%" height="546">
|
||
<el-table-column type="index" width="55" label="序号" align="center" />
|
||
<el-table-column label="附件名称" prop="fileName" align="center">
|
||
<!-- 插槽 -->
|
||
<template v-slot="{ row }">
|
||
<span style="color: #00a288; cursor: pointer" @click="handleFile(row)">{{ row.fileName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="viewVisible = false">关 闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 地址 -->
|
||
<el-dialog title="新增" v-if="showHouse" :visible.sync="showHouse" width="55%" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="135px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="统一社会信用代码" prop="supplierCode">
|
||
<el-input v-model="form.supplierCode" placeholder="请输入统一社会信用代码" maxlength="64" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="厂家名称" prop="supplierName">
|
||
<el-input v-model="form.supplierName" placeholder="请输入厂家名称" maxlength="128" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系人" prop="contactPerson">
|
||
<el-input v-model="form.contactPerson" placeholder="请输入联系人" maxlength="64" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系电话" prop="contactPhone">
|
||
<el-input v-model="form.contactPhone" placeholder="请输入联系电话" maxlength="11" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="厂家地址" prop="address">
|
||
<el-input v-model="form.address" placeholder="请输入厂家地址" maxlength="255" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="资质/执照编号" prop="qualification">
|
||
<el-input v-model="form.qualification" placeholder="请输入资质信息或执照编号" maxlength="255" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="状态" prop="status">
|
||
<el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
|
||
<el-option label="启用" :value="1" />
|
||
<el-option label="停用" :value="0" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input
|
||
type="textarea"
|
||
:rows="6"
|
||
placeholder="请输入备注"
|
||
v-model="form.remark"
|
||
maxlength="255"
|
||
show-word-limit
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="showHouse = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getTreeSelectApi, addApplyCodeApi, addToolApi } from '@/api/toolsManage'
|
||
import { getManufacturerSelectApi } from '@/api/EquipmentLedger'
|
||
import { addFacturer } from '@/api/ma/supplier'
|
||
import FileUpload from '@/components/FileImageUpload'
|
||
|
||
export default {
|
||
components: { FileUpload },
|
||
data() {
|
||
return {
|
||
isLoading: false,
|
||
dialogTitle: '新增编码工具',
|
||
dialogVisible: false,
|
||
dialogForm: {
|
||
applyId: null,
|
||
typeId: null,
|
||
supplierId: null,
|
||
supplierName: null,
|
||
productionDate: null,
|
||
applyNum: 1,
|
||
},
|
||
rules: {
|
||
applyNum: [{ required: true, message: '请输入申请数量', trigger: 'blur' }],
|
||
},
|
||
typeIdList: [],
|
||
dialogColumns: [
|
||
{ label: '工具专业', prop: 'fourthParentName' },
|
||
{ label: '施工类型', prop: 'greatGrandparentName' },
|
||
{ label: '工具类型', prop: 'grandparentTypeName' },
|
||
{ label: '工具名称', prop: 'parentTypeName' },
|
||
{ label: '规格型号', prop: 'typeName' },
|
||
{ label: '计量单位', prop: 'unitName' },
|
||
{ label: '生产厂家', prop: 'supplierId', width: 180, required: true },
|
||
{ label: '出厂日期', prop: 'productionDate', width: 180, required: true },
|
||
{ label: '资产原值(万元)', prop: 'toolPrice', width: 150, required: true },
|
||
{ label: '原始编码', prop: 'identifyCode', width: 150, required: true },
|
||
{ label: '合格证', prop: 'certificates', width: 100, required: true },
|
||
{ label: '检测证书', prop: 'inspectionReports', width: 100, required: true },
|
||
{ label: '发票', prop: 'purchaseInvoices', width: 100, required: true },
|
||
],
|
||
dialogList: [],
|
||
options: [],
|
||
activeLabels: [],
|
||
lastNode: null,
|
||
manufacturerSelect: [],
|
||
certificates: [], // 合格证
|
||
inspectionReports: [], // 检测证书
|
||
purchaseInvoices: [], // 采购发票
|
||
uploadType: '',
|
||
currentRow: null,
|
||
uploadTitle: '',
|
||
uploadVisible: false,
|
||
fileList: [],
|
||
viewVisible: false,
|
||
viewTitle: '',
|
||
viewList: [],
|
||
showHouse: false,
|
||
form: {},
|
||
// 表单校验
|
||
rules: {
|
||
supplierCode: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
|
||
supplierName: [{ required: true, message: '厂家名称不能为空', trigger: 'blur' }],
|
||
contactPhone: [
|
||
{ required: false, message: '请输入联系电话', trigger: 'blur' },
|
||
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
|
||
],
|
||
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
openDialog(applyId) {
|
||
this.dialogForm.applyId = applyId
|
||
this.dialogForm.supplierId = null
|
||
this.dialogForm.productionDate = null
|
||
this.dialogForm.applyNum = 1
|
||
this.typeIdList = []
|
||
this.dialogList = []
|
||
this.dialogVisible = true
|
||
this.getTreeSelect()
|
||
this.getManufacturerSelect()
|
||
},
|
||
async getTreeSelect() {
|
||
try {
|
||
const res = await getTreeSelectApi({ manageType: 0 })
|
||
this.options = res.data
|
||
this.handleTree(this.options)
|
||
} catch (error) {}
|
||
},
|
||
handleTree(tree) {
|
||
for (const node of tree) {
|
||
if (node.level === '5') {
|
||
// 删除 children
|
||
delete node.children
|
||
} else if (node.children && node.children.length > 0) {
|
||
// 继续递归下级
|
||
this.handleTree(node.children)
|
||
}
|
||
}
|
||
},
|
||
handleChange(val) {
|
||
this.dialogForm.typeId = val ? val[val.length - 1] : ''
|
||
this.activeLabels = this.getLabelsFromValuePath(val, this.options)
|
||
this.lastNode = this.findNodeById(this.options, val[val.length - 1])
|
||
console.log('选中的 labels:', this.activeLabels)
|
||
},
|
||
getLabelsFromValuePath(valuePath, options) {
|
||
let labels = []
|
||
let currentLevel = options
|
||
|
||
for (const val of valuePath) {
|
||
const node = currentLevel.find((item) => item.typeId === val)
|
||
if (node) {
|
||
labels.push(node.typeName)
|
||
currentLevel = node.children || []
|
||
} else {
|
||
break
|
||
}
|
||
}
|
||
return labels
|
||
},
|
||
findNodeById(tree, id) {
|
||
for (const node of tree) {
|
||
if (node.typeId === id) return node // 找到了就返回
|
||
if (node.children) {
|
||
const result = this.findNodeById(node.children, id)
|
||
if (result) return result // 子节点中找到了
|
||
}
|
||
}
|
||
return null // 没找到
|
||
},
|
||
handleAdd() {
|
||
const typeId = this.typeIdList[this.typeIdList.length - 1]
|
||
|
||
for (let i = 0; i < this.dialogForm.applyNum; i++) {
|
||
this.dialogList.unshift({
|
||
applyId: this.dialogForm.applyId,
|
||
typeId,
|
||
fourthParentName: this.activeLabels[0],
|
||
greatGrandparentName: this.activeLabels[1],
|
||
grandparentTypeName: this.activeLabels[2],
|
||
parentTypeName: this.activeLabels[3],
|
||
typeName: this.activeLabels[4],
|
||
unitName: this.lastNode.unitName,
|
||
applyNum: 1,
|
||
supplierId: this.dialogForm.supplierId,
|
||
supplierName: this.dialogForm.supplierName,
|
||
productionDate: this.dialogForm.productionDate,
|
||
toolPrice: null,
|
||
identifyCode: null,
|
||
certificates: [], // 合格证
|
||
inspectionReports: [], // 检测证书
|
||
purchaseInvoices: [], // 采购发票
|
||
})
|
||
}
|
||
},
|
||
handleDelete(index) {
|
||
this.dialogList.splice(index, 1)
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!',
|
||
})
|
||
},
|
||
// 获取厂家
|
||
async getManufacturerSelect() {
|
||
try {
|
||
const res = await getManufacturerSelectApi()
|
||
this.manufacturerSelect = res.data
|
||
} catch (error) {}
|
||
},
|
||
// 提交
|
||
async submit() {
|
||
try {
|
||
// 循环this.dialogList 校验 厂家 出厂日期 资产原值 原始编码 合格证 检测证书 发票 是否填写
|
||
for (let i = 0; i < this.dialogList.length; i++) {
|
||
const item = this.dialogList[i]
|
||
if (!item.supplierId) {
|
||
this.$message.error(`第${i + 1}行厂家不能为空`)
|
||
return
|
||
}
|
||
if (!item.productionDate) {
|
||
this.$message.error(`第${i + 1}行出厂日期不能为空`)
|
||
return
|
||
}
|
||
if (!item.toolPrice) {
|
||
this.$message.error(`第${i + 1}行资产原值不能为空`)
|
||
return
|
||
}
|
||
if (!item.identifyCode) {
|
||
this.$message.error(`第${i + 1}行原始编码不能为空`)
|
||
return
|
||
}
|
||
if (item.certificates.length == 0) {
|
||
this.$message.error(`第${i + 1}行合格证不能为空`)
|
||
return
|
||
}
|
||
if (item.inspectionReports.length == 0) {
|
||
this.$message.error(`第${i + 1}行检测证书不能为空`)
|
||
return
|
||
}
|
||
if (item.purchaseInvoices.length == 0) {
|
||
this.$message.error(`第${i + 1}行采购发票不能为空`)
|
||
return
|
||
}
|
||
}
|
||
this.isLoading = true
|
||
if (!this.dialogForm.applyId) {
|
||
const res = await addApplyCodeApi()
|
||
this.dialogForm.applyId = res.data.id
|
||
this.dialogList.forEach((item) => {
|
||
item.applyId = res.data.id
|
||
})
|
||
}
|
||
await addToolApi(this.dialogList)
|
||
this.$message({
|
||
type: 'success',
|
||
message: '操作成功!',
|
||
})
|
||
this.dialogVisible = false
|
||
this.$emit('getList', { applyId: this.dialogForm.applyId })
|
||
} catch (error) {
|
||
} finally {
|
||
this.isLoading = false
|
||
}
|
||
},
|
||
openAddress() {
|
||
this.showHouse = true
|
||
},
|
||
submitForm() {
|
||
this.$refs['form'].validate(async (valid) => {
|
||
if (valid) {
|
||
addFacturer(this.form).then((response) => {
|
||
this.$modal.msgSuccess('新增成功')
|
||
this.showHouse = false
|
||
this.getManufacturerSelect()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handlePriceInput(row) {
|
||
let val = String(row.toolPrice ?? '')
|
||
|
||
// 1️⃣ 只保留数字和 .
|
||
val = val.replace(/[^\d.]/g, '')
|
||
|
||
// 2️⃣ 只保留第一个小数点
|
||
const dotIndex = val.indexOf('.')
|
||
if (dotIndex !== -1) {
|
||
val = val.slice(0, dotIndex + 1) + val.slice(dotIndex + 1).replace(/\./g, '')
|
||
}
|
||
row.toolPrice = val
|
||
},
|
||
handleFile(row) {
|
||
// 打开文件预览
|
||
window.open(row.fileUrl, '_blank')
|
||
},
|
||
// 查看
|
||
handleView(row, type) {
|
||
if (type == 2) {
|
||
this.viewTitle = '合格证'
|
||
this.viewList = row.certificates || []
|
||
} else if (type == 3) {
|
||
this.viewTitle = '检测证书'
|
||
this.viewList = row.inspectionReports || []
|
||
} else if (type == 4) {
|
||
this.viewTitle = '采购发票'
|
||
this.viewList = row.purchaseInvoices || []
|
||
}
|
||
this.viewVisible = true
|
||
},
|
||
// 上传
|
||
handleFileUpload(row, type) {
|
||
this.uploadType = type
|
||
this.currentRow = row
|
||
if (type == 2) {
|
||
this.uploadTitle = '合格证'
|
||
this.fileList = row.fileList2
|
||
} else if (type == 3) {
|
||
this.uploadTitle = '定期检验报告'
|
||
this.fileList = row.fileList3
|
||
} else if (type == 4) {
|
||
this.uploadTitle = '采购发票'
|
||
this.fileList = row.fileList4
|
||
}
|
||
this.uploadVisible = true
|
||
},
|
||
handleFileList(file) {
|
||
console.log('🚀 ~ file:', file)
|
||
if (this.uploadType == 2) {
|
||
this.currentRow.fileList2 = file
|
||
if (!file) {
|
||
this.currentRow.certificates = []
|
||
return
|
||
}
|
||
this.currentRow.certificates = this.formatFileList(file)
|
||
} else if (this.uploadType == 3) {
|
||
this.currentRow.fileList3 = file
|
||
if (!file) {
|
||
this.currentRow.inspectionReports = []
|
||
return
|
||
}
|
||
this.currentRow.inspectionReports = this.formatFileList(file)
|
||
} else if (this.uploadType == 4) {
|
||
this.currentRow.fileList4 = file
|
||
if (!file) {
|
||
this.currentRow.purchaseInvoices = []
|
||
return
|
||
}
|
||
this.currentRow.purchaseInvoices = this.formatFileList(file)
|
||
}
|
||
},
|
||
formatFileList(file) {
|
||
const arr = file.split(',')
|
||
return arr.map((item) => {
|
||
const parts = item.split('/')
|
||
return {
|
||
fileName: parts[parts.length - 1],
|
||
fileUrl: item,
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|