Compare commits
2 Commits
bc3d9007fb
...
53361c7f01
| Author | SHA1 | Date |
|---|---|---|
BianLzhaoMin
|
53361c7f01 | |
|
BianLzhaoMin
|
37bed594d4 |
|
|
@ -86,6 +86,32 @@ export const configReturn = {
|
|||
routerParams: ''
|
||||
}
|
||||
|
||||
export const dialogConfigReturn = {
|
||||
outerWidth: '80%',
|
||||
outerTitle: '',
|
||||
outerVisible: false,
|
||||
innerWidth: '30%',
|
||||
innerTitle: '报废信息填写',
|
||||
innerVisible: false,
|
||||
handleColShow: true, // 是否显示操作列
|
||||
pageShow: true, // 是否显示分页组件
|
||||
isSelShow: false,// 表格是否需要复选框
|
||||
isFormShow: true, // 是否显示表单查询组件
|
||||
handleWidth: '', // 操作列宽度
|
||||
formLabel: [
|
||||
{ f_label: '设备编码', f_model: 'keywords', f_type: 'ipt' },
|
||||
],
|
||||
columnsList: [
|
||||
// { t_width: '55px', t_props: '', t_label: '序号' },
|
||||
{ t_width: '', t_props: 'machineTypeName', t_label: '设备类型' },
|
||||
{ t_width: '', t_props: 'specificationType', t_label: '规格型号' },
|
||||
{ t_width: '', t_props: 'maCode', t_label: '设备编码' },
|
||||
{ t_width: '', t_props: 'scrapNum', t_label: '退料状态' },
|
||||
],
|
||||
|
||||
}
|
||||
|
||||
|
||||
export const getSelList = () => {
|
||||
new Promise(async (resolve) => {
|
||||
const { data: unitRes } = await getUnitInfoSelectApi()
|
||||
|
|
|
|||
|
|
@ -5,13 +5,7 @@
|
|||
<TableModel :config="configReturn">
|
||||
<template slot="export">
|
||||
<el-row class="mb8">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
>完成退料</el-button
|
||||
>
|
||||
<el-button type="primary" size="mini">完成退料</el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
|
|
@ -23,7 +17,7 @@
|
|||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleEditReturn(data)"
|
||||
@click="handleEditReturn(0, data)"
|
||||
>
|
||||
编辑退料
|
||||
</el-button>
|
||||
|
|
@ -32,6 +26,238 @@
|
|||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfigReturn"
|
||||
@closeDialogOuter="closeDialogOuter"
|
||||
@closeDialogInner="closeDialogInner"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<template v-if="dialogConfigReturn.outerTitle !== '数量退料'">
|
||||
<TableModel
|
||||
:config="dialogConfigReturn"
|
||||
@getTableSelectionChange="getTableSelList"
|
||||
>
|
||||
<template
|
||||
slot="export"
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle === '编码退料' ||
|
||||
dialogConfigReturn.outerTitle === '退料撤回'
|
||||
"
|
||||
><el-row
|
||||
class="mb8"
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle === '编码退料'
|
||||
"
|
||||
>
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="handleBatch(1)"
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle ===
|
||||
'编码退料'
|
||||
"
|
||||
>批量合格</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleBatch(2)"
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle ===
|
||||
'编码退料'
|
||||
"
|
||||
>批量维修</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
size="mini"
|
||||
@click="handleBatch(3)"
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle ===
|
||||
'编码退料'
|
||||
"
|
||||
>批量报废</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="batchRevoke()"
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle ===
|
||||
'退料撤回'
|
||||
"
|
||||
>批量撤回</el-button
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<!-- 列表操作栏 -->
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<template
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle === '编辑退料'
|
||||
"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="handleSingle(1, data)"
|
||||
>
|
||||
合格
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleSingle(2, data)"
|
||||
>
|
||||
待维修
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="warning"
|
||||
@click="handleSingle(3, data)"
|
||||
>
|
||||
预报废
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
dialogConfigReturn.outerTitle === '退料撤回'
|
||||
"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="revokeSingle(data)"
|
||||
>
|
||||
撤回
|
||||
</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</TableModel>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-row class="mb8">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleSave(data)"
|
||||
>
|
||||
保存
|
||||
</el-button></el-row
|
||||
>
|
||||
<el-table :data="numReturnList" border>
|
||||
<el-table-column align="center" label="类型名称" />
|
||||
<el-table-column align="center" label="规格型号" />
|
||||
<el-table-column align="center" label="退料数量" />
|
||||
<el-table-column align="center" label="合格数量">
|
||||
<template slot-scope="{ row }">
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
placeholder="请输入数量"
|
||||
v-model="row.hgNum"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="待维修数量">
|
||||
<template slot-scope="{ row }">
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
placeholder="请输入数量"
|
||||
v-model="row.wxNum"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="预报废数量">
|
||||
<template slot-scope="{ row }">
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
placeholder="请输入数量"
|
||||
v-model="row.bfNum"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="报废信息">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="editScrapInfo(row)"
|
||||
>编 辑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 弹框内层内容 -->
|
||||
<template slot="innerContent">
|
||||
<el-form :model="scrapInfoParams">
|
||||
<el-form-item label="报废原因：">
|
||||
<el-input
|
||||
v-model="scrapInfoParams.scrapReason"
|
||||
placeholder="请输入报废原因"
|
||||
size="small"
|
||||
maxlength="50"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="损坏原因：">
|
||||
<el-radio-group
|
||||
style="width: 350px"
|
||||
v-model="scrapInfoParams.scrapType"
|
||||
>
|
||||
<el-radio :label="1">人为</el-radio>
|
||||
<el-radio :label="0">自然</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="损坏照片：" class="upload-box">
|
||||
<!-- 报废图片 -->
|
||||
<Upload
|
||||
style="width: 350px"
|
||||
:file-list="fileList"
|
||||
:action-url="actionUrl"
|
||||
:limit="3"
|
||||
:multiple="true"
|
||||
@remove="handleRemove"
|
||||
@success="handleSuccess"
|
||||
>
|
||||
<template>
|
||||
<el-row class="Upload-tip">
|
||||
<el-button size="small" type="primary"
|
||||
>点击上传</el-button
|
||||
>
|
||||
</el-row>
|
||||
<el-row class="upload-tip">
|
||||
<span class="tip-text"
|
||||
>请上传jpg、jpeg、png格式的图片，单张图片大小不可超过5M，最多可上传3张</span
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
</Upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row class="dialog-common-btn">
|
||||
<el-button size="mini" plain @click="handleCancelInner"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="warning"
|
||||
@click="handleSubmitInner"
|
||||
>保 存</el-button
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -39,23 +265,181 @@
|
|||
import PageHeader from '@/components/pageHeader'
|
||||
import TableModel from '@/components/TableModel'
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
import { configReturn } from './config.js'
|
||||
import Upload from './upload.vue'
|
||||
import { configReturn, dialogConfigReturn } from './config.js'
|
||||
export default {
|
||||
components: {
|
||||
PageHeader,
|
||||
TableModel,
|
||||
DialogModel,
|
||||
Upload,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageContent: '驳回退料',
|
||||
configReturn,
|
||||
dialogConfigReturn,
|
||||
taSelList: [],
|
||||
// 报废信息参数
|
||||
scrapInfoParams: {
|
||||
scrapReason: '', // 报废原因
|
||||
scrapType: '', // 损坏原因
|
||||
fileUrl: '',
|
||||
},
|
||||
fileList: [],
|
||||
imgUrlList: [],
|
||||
actionUrl: process.env.VUE_APP_BASE_API + '/system/sys/file/upload',
|
||||
numReturnList: [{ hgNum: '', wxNum: '', bfNum: '' }],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查看
|
||||
handlePreview() {
|
||||
this.dialogConfigReturn.outerTitle = '退料详情'
|
||||
this.dialogConfigReturn.handleColShow = false
|
||||
this.dialogConfigReturn.isSelShow = false
|
||||
this.dialogConfigReturn.outerVisible = true
|
||||
},
|
||||
// 编辑退料
|
||||
handleEditReturn(type) {
|
||||
if (type === 1) {
|
||||
this.dialogConfigReturn.outerTitle = '编码退料'
|
||||
this.dialogConfigReturn.handleColShow = true
|
||||
} else {
|
||||
this.dialogConfigReturn.outerTitle = '数量退料'
|
||||
this.dialogConfigReturn.handleColShow = false
|
||||
}
|
||||
|
||||
this.dialogConfigReturn.outerVisible = true
|
||||
this.dialogConfigReturn.isSelShow = true
|
||||
this.dialogConfigReturn.handleWidth = '240px'
|
||||
},
|
||||
// 撤回
|
||||
handleRevoke() {
|
||||
this.dialogConfigReturn.outerTitle = '退料撤回'
|
||||
this.dialogConfigReturn.handleColShow = true
|
||||
this.dialogConfigReturn.outerVisible = true
|
||||
this.dialogConfigReturn.isSelShow = true
|
||||
this.dialogConfigReturn.handleWidth = '120px'
|
||||
},
|
||||
// 弹框内列表复选框
|
||||
getTableSelList(list) {
|
||||
this.taSelList = list
|
||||
},
|
||||
// 批量操作
|
||||
handleBatch(type) {
|
||||
if (this.taSelList.length < 1) {
|
||||
this.$message.error('请勾选列表数据！')
|
||||
return
|
||||
}
|
||||
switch (type) {
|
||||
case 1:
|
||||
break
|
||||
case 2:
|
||||
break
|
||||
case 3:
|
||||
this.dialogConfigReturn.innerVisible = true
|
||||
break
|
||||
}
|
||||
},
|
||||
// 单个操作
|
||||
handleSingle(type, data) {
|
||||
console.log(data, '当前行数据')
|
||||
switch (type) {
|
||||
case 1:
|
||||
break
|
||||
case 2:
|
||||
break
|
||||
case 3:
|
||||
this.dialogConfigReturn.innerVisible = true
|
||||
break
|
||||
}
|
||||
},
|
||||
// 数量退料时保存按钮
|
||||
handleSave() {
|
||||
console.log('数量退料时保存按钮！')
|
||||
},
|
||||
// 数量退料时报废信息编辑按钮
|
||||
editScrapInfo() {
|
||||
this.dialogConfigReturn.innerVisible = true
|
||||
},
|
||||
// 批量撤回
|
||||
batchRevoke() {
|
||||
if (this.taSelList.length < 1) {
|
||||
this.$message.error('请勾选列表数据！')
|
||||
return
|
||||
}
|
||||
},
|
||||
// 单个撤回
|
||||
revokeSingle(data) {
|
||||
console.log(data, '撤回--')
|
||||
},
|
||||
// 移除报废图片
|
||||
handleRemove(file) {
|
||||
this.imgUrlList = this.imgUrlList.filter(
|
||||
(e) => e !== file.response.data.fileUrl,
|
||||
)
|
||||
},
|
||||
// 图片上传成功
|
||||
handleSuccess(res) {
|
||||
if (res.code == 200) {
|
||||
this.imgUrlList.push(res.data.fileUrl)
|
||||
}
|
||||
},
|
||||
// 取消
|
||||
handleCancelInner() {
|
||||
this.dialogConfigReturn.innerVisible = false
|
||||
},
|
||||
// 保存
|
||||
handleSubmitInner() {
|
||||
this.dialogConfigReturn.innerVisible = false
|
||||
},
|
||||
/* 外层弹框关闭 */
|
||||
closeDialogOuter() {
|
||||
this.dialogConfigReturn.outerVisible = false
|
||||
},
|
||||
/* 内层弹框关闭 */
|
||||
closeDialogInner() {
|
||||
this.dialogConfigReturn.innerVisible = false
|
||||
},
|
||||
goBack() {
|
||||
this.$emit('closeReturnPage')
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialogConfigReturn: {
|
||||
handler(newVal) {
|
||||
/* 监听外层弹框关闭 清空勾选的数据 */
|
||||
if (!newVal.outerVisible) {
|
||||
this.taSelList = []
|
||||
}
|
||||
if (!newVal.innerVisible) {
|
||||
this.imgUrlList = []
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-box {
|
||||
display: flex;
|
||||
|
||||
.Upload-tip {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
text-align: left;
|
||||
|
||||
.tip-text {
|
||||
font-size: 13px;
|
||||
color: red;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="actionUrl"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<slot name="default">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</slot>
|
||||
<!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
name: 'UploadFile',
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
actionUrl: {
|
||||
type: String,
|
||||
default: 'https://jsonplaceholder.typicode.com/posts/',
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
// uploadTip: {
|
||||
// type: String,
|
||||
// default: '只能上传jpg/png文件，且不超过500kb'
|
||||
// },
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadImgUrl:
|
||||
process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + getToken(),
|
||||
},
|
||||
uploadData: {
|
||||
fileType: 'sx',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
this.$emit('remove', file, fileList)
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.$emit('success', response, fileList)
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.$emit('preview', file)
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 ${this.limit} 个文件，本次选择了 ${
|
||||
files.length
|
||||
} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
|
||||
)
|
||||
this.$emit('exceed', files, fileList)
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
// return this.$confirm(`确定移除 ${file.name} ？`)
|
||||
// .then(() => {
|
||||
// this.$emit('before-remove', file, fileList)
|
||||
// })
|
||||
// .catch(() => {})
|
||||
},
|
||||
beforeUpload(file) {
|
||||
console.log('file', file)
|
||||
const isJPGorPNG =
|
||||
file.type == 'image/png' ||
|
||||
file.type == 'image/jpg' ||
|
||||
file.type == 'image/jpeg'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
|
||||
if (!isJPGorPNG) {
|
||||
this.$message.error('只能上传 jpg、jpeg、png 格式的图片')
|
||||
}
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传图片大小不能超过 5MB')
|
||||
}
|
||||
return isJPGorPNG && isLt5M
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-demo .el-upload__tip {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -66,8 +66,8 @@ export const dialogConfig = {
|
|||
{ t_width: '', t_props: 'specificationType', t_label: '规格型号' },
|
||||
{ t_width: '', t_props: 'maCode', t_label: '设备编码' },
|
||||
{ t_width: '', t_props: 'scrapNum', t_label: '设备数量' },
|
||||
{ t_width: '', t_props: 'remark', t_label: '报废原因' },
|
||||
{ t_width: '', t_props: 'fileUrl', t_label: '报废图片', t_slot: 'imgPreview' },
|
||||
{ t_width: '', t_props: 'remark', t_label: '审批状态' },
|
||||
{ t_width: '', t_props: 'fileUrl', t_label: '驳回原因', t_slot: 'imgPreview' },
|
||||
],
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,682 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
v-loading.fullscreen.lock="fullscreenLoading"
|
||||
:before-close="cancel"
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogShowFlag"
|
||||
append-to-body
|
||||
width="600px"
|
||||
>
|
||||
<div class="form_box_one">
|
||||
<el-form
|
||||
ref="dynamicValidateForm"
|
||||
:model="dynamicValidateForm"
|
||||
class="demo-dynamic"
|
||||
label-width="90px"
|
||||
>
|
||||
<div
|
||||
v-for="(domain, index) in dynamicValidateForm.premiumList"
|
||||
:key="domain.key"
|
||||
class="bor_box"
|
||||
>
|
||||
<p class="form_box_title">编码管理设备</p>
|
||||
<div class="form_box_line"></div>
|
||||
<div class="form_box_item">
|
||||
<el-form-item
|
||||
:prop="'premiumList.' + index + '.partId'"
|
||||
label="选择配件："
|
||||
>
|
||||
<treeselect
|
||||
v-model="domain.partId"
|
||||
style="width: 350px"
|
||||
:options="deptList"
|
||||
:normalizer="normalizer"
|
||||
noChildrenText="没有数据了"
|
||||
noOptionsText="没有数据"
|
||||
noResultsText="没有搜索结果"
|
||||
placeholder="请选择配件"
|
||||
:disable-branch-nodes="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="index == 0"
|
||||
:prop="'premiumListTwo.' + index + '.repairer'"
|
||||
label="维修人："
|
||||
>
|
||||
<el-select
|
||||
v-model="domain.repairer"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
filterable
|
||||
style="width: 350px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in userSelectList"
|
||||
:key="dict.userId"
|
||||
:label="dict.userName"
|
||||
:value="dict.userId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumList.' + index + '.partType'"
|
||||
label="是否收费："
|
||||
required
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择是否收费',
|
||||
trigger: 'blur',
|
||||
}"
|
||||
>
|
||||
<el-radio-group
|
||||
style="width: 350px"
|
||||
v-model="domain.partType"
|
||||
>
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- { required: true, message: '配件数量不能为空', trigger: 'blur' }, -->
|
||||
<el-form-item
|
||||
:prop="'premiumList.' + index + '.partNum'"
|
||||
label="配件数量："
|
||||
>
|
||||
<el-input
|
||||
v-model="domain.partNum"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="10"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumList.' + index + '.partCost'"
|
||||
label="配件费用："
|
||||
:rules="{
|
||||
required: false,
|
||||
validator: meneyIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
v-model="domain.partCost"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="10"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumList.' + index + '.repairContent'"
|
||||
label="维修内容："
|
||||
>
|
||||
<el-input
|
||||
v-model="domain.repairContent"
|
||||
maxlength="100"
|
||||
placeholder="请输入"
|
||||
show-word-limit
|
||||
size="small"
|
||||
style="width: 350px"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="add_box">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="addDomainOne"
|
||||
>添加配件
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="delDomain(domain, 1)"
|
||||
v-show="index > 0"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
v-if="rowObj.code !== null && rowObj.code !== ''"
|
||||
>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_box_two">
|
||||
<el-form
|
||||
ref="dynamicValidateFormTwo"
|
||||
:model="dynamicValidateFormTwo"
|
||||
class="demo-dynamic"
|
||||
label-width="100px"
|
||||
>
|
||||
<div
|
||||
v-for="(
|
||||
domain, index
|
||||
) in dynamicValidateFormTwo.premiumListTwo"
|
||||
:key="domain.key"
|
||||
class="bor_box"
|
||||
>
|
||||
<p class="form_box_title">数量管理设备</p>
|
||||
<div class="form_box_line"></div>
|
||||
<div class="form_box_item">
|
||||
<el-form-item
|
||||
v-if="index == 0"
|
||||
:prop="'premiumListTwo.' + index + '.repairNum'"
|
||||
label="维修数量："
|
||||
:rules="{
|
||||
required: true,
|
||||
validator: numberIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
v-model="domain.repairNum"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="10"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="index == 0"
|
||||
:prop="'premiumListTwo.' + index + '.repairer'"
|
||||
label="维修人："
|
||||
>
|
||||
<el-select
|
||||
v-model="domain.repairer"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
filterable
|
||||
style="width: 350px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in userSelectList"
|
||||
:key="dict.userId"
|
||||
:label="dict.userName"
|
||||
:value="dict.userId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumList.' + index + '.partId'"
|
||||
label="选择配件："
|
||||
>
|
||||
<treeselect
|
||||
style="width: 350px"
|
||||
v-model="domain.partId"
|
||||
:options="deptList"
|
||||
:normalizer="normalizer"
|
||||
noChildrenText="没有数据了"
|
||||
noOptionsText="没有数据"
|
||||
noResultsText="没有搜索结果"
|
||||
placeholder="请选择配件"
|
||||
:disable-branch-nodes="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumListTwo.' + index + '.partType'"
|
||||
label="是否收费："
|
||||
required
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择是否收费',
|
||||
trigger: 'blur',
|
||||
}"
|
||||
>
|
||||
<el-radio-group
|
||||
style="width: 350px"
|
||||
v-model="domain.partType"
|
||||
>
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumListTwo.' + index + '.partNum'"
|
||||
label="配件数量："
|
||||
>
|
||||
<el-input
|
||||
v-model="domain.partNum"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="10"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumListTwo.' + index + '.partCost'"
|
||||
label="配件费用："
|
||||
:rules="{
|
||||
required: false,
|
||||
validator: meneyIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
v-model="domain.partCost"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="10"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:prop="'premiumListTwo.' + index + '.repairContent'"
|
||||
label="维修内容："
|
||||
>
|
||||
<el-input
|
||||
v-model="domain.repairContent"
|
||||
maxlength="100"
|
||||
placeholder="请输入"
|
||||
show-word-limit
|
||||
size="small"
|
||||
style="width: 350px"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="add_box">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="addDomainTwo"
|
||||
>添加配件
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="delDomain(domain, 2)"
|
||||
v-show="index > 0"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
v-if="rowObj.code == null || rowObj.code == ''"
|
||||
>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitTwo">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
submitRepairApplyApi,
|
||||
getRepairMaTypeListApi,
|
||||
listPartType,
|
||||
} from '@/api/repairTest/repair'
|
||||
import { getUserByRoleList } from '@/api/system/user'
|
||||
// import { listPartType, } from "@/api/store/tools";
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { getInfo } from '@/api/login'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
// 弹窗是否显示
|
||||
isShowFlag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 对应操作数据键值
|
||||
priKey: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
//弹窗标题
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//弹窗标题
|
||||
rowObj: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isShowFlag(val) {
|
||||
if (val) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
dialogShowFlag: {
|
||||
get() {
|
||||
return this.isShowFlag
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('update:isShowFlag', v)
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullscreenLoading: false,
|
||||
dynamicValidateForm: {
|
||||
premiumList: [
|
||||
{
|
||||
selected: 'Y',
|
||||
premium: undefined,
|
||||
rate: undefined,
|
||||
feeRate: undefined,
|
||||
fee: undefined,
|
||||
baofei1_unit: '',
|
||||
shangyoufeiyonge_unit: '',
|
||||
downRate: undefined,
|
||||
downFee: undefined,
|
||||
xiayoufeiyonge_unit: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
dynamicValidateFormTwo: {
|
||||
premiumListTwo: [
|
||||
{
|
||||
selected: 'Y',
|
||||
premium: undefined,
|
||||
rate: undefined,
|
||||
feeRate: undefined,
|
||||
fee: undefined,
|
||||
baofei1_unit: '',
|
||||
shangyoufeiyonge_unit: '',
|
||||
downRate: undefined,
|
||||
downFee: undefined,
|
||||
xiayoufeiyonge_unit: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
deptList: [],
|
||||
userSelectList: [],
|
||||
companyId: '',
|
||||
taskId: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('taskId', (taskId) => {
|
||||
this.taskId = taskId
|
||||
})
|
||||
this.getTree()
|
||||
},
|
||||
methods: {
|
||||
//正则校验配件费用
|
||||
meneyIntegerValidator(rule, value, callback) {
|
||||
const reg =
|
||||
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
|
||||
if (value === '' || reg.test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('请输入大于0的数,最多2为小数'))
|
||||
}
|
||||
},
|
||||
//正则校验配件数量--维修数量
|
||||
numberIntegerValidator(rule, value, callback) {
|
||||
const reg = /^\+?[1-9][0-9]*$/
|
||||
if ((value || reg.test(value)) && value <= this.rowObj.repairNum) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('请输入大于0的并且小于维修总量的正整数'))
|
||||
}
|
||||
},
|
||||
getTree() {
|
||||
listPartType().then((response) => {
|
||||
this.deptList = this.handleTree(response.data, 'paId')
|
||||
})
|
||||
},
|
||||
/** 转换部门数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children
|
||||
}
|
||||
return {
|
||||
id: node.paId,
|
||||
label: node.paName,
|
||||
children: node.children,
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
let params = {
|
||||
taskId: this.taskId,
|
||||
}
|
||||
this.loading = true
|
||||
getRepairMaTypeListApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.repairList = res.rows
|
||||
this.total = res.total
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
if (this.rowObj.code !== null && this.rowObj.code !== '') {
|
||||
this.dynamicValidateForm.premiumList = []
|
||||
this.dynamicValidateFormTwo.premiumListTwo = []
|
||||
this.addDomainOne()
|
||||
} else {
|
||||
this.dynamicValidateForm.premiumList = []
|
||||
this.dynamicValidateFormTwo.premiumListTwo = []
|
||||
this.addDomainTwo()
|
||||
}
|
||||
getUserByRoleList().then((response) => {
|
||||
this.userSelectList = response.data
|
||||
})
|
||||
getInfo().then((res) => {
|
||||
this.companyId = res.user.companyId
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.dialogShowFlag = false
|
||||
// this.$refs["form"].resetFields();
|
||||
// this.dynamicValidateForm.premiumList = [];
|
||||
},
|
||||
addDomainOne() {
|
||||
// 选择配件 partId
|
||||
// 是否收费 partType
|
||||
// 配件数量 partNum
|
||||
// 配件费用 partCost
|
||||
// 维修内容 repairContent
|
||||
// 维修数量 repairNum
|
||||
this.dynamicValidateForm.premiumList.push({
|
||||
selected: 'N',
|
||||
// partId: '',
|
||||
repairer: '',
|
||||
partType: '',
|
||||
partNum: '',
|
||||
partCost: '',
|
||||
repairContent: '',
|
||||
repairNum: 1,
|
||||
key: Date.now(),
|
||||
})
|
||||
},
|
||||
delDomain(domain, type) {
|
||||
if (type == 1) {
|
||||
this.dynamicValidateForm.premiumList =
|
||||
this.dynamicValidateForm.premiumList.filter(
|
||||
(item) => item.key != domain.key,
|
||||
)
|
||||
} else {
|
||||
this.dynamicValidateFormTwo.premiumListTwo =
|
||||
this.dynamicValidateFormTwo.premiumListTwo.filter(
|
||||
(item) => item.key != domain.key,
|
||||
)
|
||||
}
|
||||
},
|
||||
addDomainTwo() {
|
||||
this.dynamicValidateFormTwo.premiumListTwo.push({
|
||||
selected: 'N',
|
||||
// partId: '',
|
||||
repairer: '',
|
||||
partType: '',
|
||||
partNum: '',
|
||||
partCost: '',
|
||||
repairContent: '',
|
||||
repairNum: '',
|
||||
key: Date.now(),
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.$refs['dynamicValidateForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
// 编码管理传递参数
|
||||
console.log(
|
||||
'this.dynamicValidateForm.premiumList1111)',
|
||||
this.dynamicValidateForm.premiumList,
|
||||
)
|
||||
let params = {
|
||||
taskId: this.rowObj.taskId,
|
||||
maId: this.rowObj.maId,
|
||||
typeId: this.rowObj.typeId,
|
||||
id: this.rowObj.id,
|
||||
repairType: 1,
|
||||
companyId: this.companyId,
|
||||
partStrList: JSON.stringify(
|
||||
this.dynamicValidateForm.premiumList,
|
||||
),
|
||||
}
|
||||
this.fullscreenLoading = true
|
||||
submitRepairApplyApi(params)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList()
|
||||
this.fullscreenLoading = false
|
||||
this.dialogShowFlag = false
|
||||
this.index = null
|
||||
this.$message.success('操作成功!')
|
||||
this.$emit('domainChange', res.code)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.index = null
|
||||
this.fullscreenLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
submitTwo() {
|
||||
this.$refs['dynamicValidateFormTwo'].validate((valid) => {
|
||||
if (valid) {
|
||||
// 数量管理传递参数
|
||||
let params = {
|
||||
taskId: this.rowObj.taskId,
|
||||
maId: this.rowObj.maId,
|
||||
typeId: this.rowObj.typeId,
|
||||
id: this.rowObj.id,
|
||||
companyId: this.companyId,
|
||||
repairType: 1,
|
||||
partStrList: JSON.stringify(
|
||||
this.dynamicValidateFormTwo.premiumListTwo,
|
||||
),
|
||||
}
|
||||
this.fullscreenLoading = true
|
||||
submitRepairApplyApi(params)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList()
|
||||
this.fullscreenLoading = false
|
||||
this.dialogShowFlag = false
|
||||
this.index = null
|
||||
this.$message.success('操作成功!')
|
||||
this.$emit('domainChange', res.code)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.index = null
|
||||
this.fullscreenLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form_box_one {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form_box_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form_box_line {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #1a1c22;
|
||||
}
|
||||
|
||||
.form_box_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add_box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.form_box_two {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form_box_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form_box_line {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #1a1c22;
|
||||
}
|
||||
|
||||
.form_box_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add_box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 3%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,514 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
v-loading.fullscreen.lock="fullscreenLoading"
|
||||
:before-close="cancel"
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogShowFlag"
|
||||
append-to-body
|
||||
width="600px"
|
||||
>
|
||||
<div class="form_box_one" v-if="!isShow">
|
||||
<el-form
|
||||
ref="dynamicValidateForm"
|
||||
:model="dynamicValidateForm"
|
||||
class="demo-dynamic"
|
||||
label-width="90px"
|
||||
>
|
||||
<div class="bor_box">
|
||||
<p class="form_box_title">编码管理设备</p>
|
||||
<div class="form_box_line"></div>
|
||||
<div class="form_box_item">
|
||||
<el-form-item label="报废原因：">
|
||||
<el-input
|
||||
v-model="dynamicValidateForm.scrapReason"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="50"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="损坏原因：">
|
||||
<el-radio-group
|
||||
style="width: 350px"
|
||||
v-model="dynamicValidateForm.scrapType"
|
||||
>
|
||||
<el-radio :label="1">人为</el-radio>
|
||||
<el-radio :label="0">自然</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="损坏照片：">
|
||||
<!-- <uploadImage
|
||||
style="width: 250px"
|
||||
:value="fileList"
|
||||
:limit="limit"
|
||||
:fileSize="fileSize"
|
||||
:fileType="fileType"
|
||||
:isShowTip="isShowTip"
|
||||
@fileListChange="fileListChange"
|
||||
></uploadImage> -->
|
||||
<upload
|
||||
style="width: 350px"
|
||||
:file-list="fileList"
|
||||
:action-url="actionUrl"
|
||||
:limit="3"
|
||||
:multiple="true"
|
||||
@remove="handleRemove"
|
||||
@preview="handlePreview"
|
||||
@before-remove="beforeRemove"
|
||||
@success="handleSuccess"
|
||||
>
|
||||
<template>
|
||||
<el-row class="upload-tip">
|
||||
<el-button size="small" type="primary"
|
||||
>点击上传</el-button
|
||||
>
|
||||
</el-row>
|
||||
<el-row class="upload-tip">
|
||||
<span class="tip-text"
|
||||
>请上传jpg、jpeg、png格式的图片，单张图片大小不可超过5M，最多可上传3张</span
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
</upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_box_two" v-if="isShow">
|
||||
<el-form
|
||||
ref="dynamicValidateFormTwo"
|
||||
:model="dynamicValidateFormTwo"
|
||||
class="demo-dynamic"
|
||||
label-width="100px"
|
||||
>
|
||||
<p class="form_box_title">数量管理设备</p>
|
||||
<div class="form_box_line"></div>
|
||||
<div class="form_box_item">
|
||||
<el-form-item
|
||||
label="报废数量："
|
||||
prop="scrapNum"
|
||||
:rules="{
|
||||
required: true,
|
||||
validator: numberIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
v-model="dynamicValidateFormTwo.scrapNum"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="10"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="报废原因：">
|
||||
<el-input
|
||||
v-model="dynamicValidateFormTwo.scrapReason"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
maxlength="50"
|
||||
style="width: 350px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="损坏原因：">
|
||||
<el-radio-group
|
||||
style="width: 350px"
|
||||
v-model="dynamicValidateFormTwo.scrapType"
|
||||
>
|
||||
<el-radio :label="1">人为</el-radio>
|
||||
<el-radio :label="0">自然</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="损坏照片：">
|
||||
<!-- <uploadImage
|
||||
style="width: 250px"
|
||||
:value="fileList"
|
||||
:limit="limit"
|
||||
:fileSize="fileSize"
|
||||
:fileType="fileType"
|
||||
:isShowTip="isShowTip"
|
||||
@fileListChange="fileListChange"
|
||||
></uploadImage> -->
|
||||
<upload
|
||||
style="width: 350px"
|
||||
:file-list="fileList"
|
||||
:action-url="actionUrl"
|
||||
:limit="3"
|
||||
:multiple="true"
|
||||
@remove="handleRemove"
|
||||
@preview="handlePreview"
|
||||
@before-remove="beforeRemove"
|
||||
@success="handleSuccess"
|
||||
>
|
||||
<template>
|
||||
<el-row class="upload-tip">
|
||||
<el-button size="small" type="primary"
|
||||
>点击上传</el-button
|
||||
>
|
||||
</el-row>
|
||||
<el-row class="upload-tip">
|
||||
<span class="tip-text"
|
||||
>请上传jpg、jpeg、png格式的图片，单张图片大小不可超过5M，最多可上传3张</span
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
</upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitTwo">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import uploadImage from './uploadImage.vue'
|
||||
import upload from './upload.vue'
|
||||
import {
|
||||
submitRepairApplyApi,
|
||||
getRepairMaTypeListApi,
|
||||
} from '@/api/repairTest/repair'
|
||||
import { getInfo } from '@/api/login'
|
||||
export default {
|
||||
components: {
|
||||
uploadImage,
|
||||
upload,
|
||||
},
|
||||
props: {
|
||||
// 弹窗是否显示
|
||||
isShowFlag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 对应操作数据键值
|
||||
priKey: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
//弹窗标题
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
rowObj: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isShowFlag(val) {
|
||||
if (val) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
dialogShowFlag: {
|
||||
get() {
|
||||
return this.isShowFlag
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('update:isShowFlag', v)
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// actionUrl: process.env.VUE_APP_BASE_API + '/sgzb-system/sys/file/upload',
|
||||
actionUrl: process.env.VUE_APP_BASE_API + '/system/sys/file/upload',
|
||||
// uploadTip: '只能上传jpg/png文件，且不超过500kb',
|
||||
fileIds: [],
|
||||
fileList: [],
|
||||
limit: 3,
|
||||
fileSize: 5,
|
||||
fileType: ['png', 'jpg', 'jpeg'],
|
||||
isShowTip: true,
|
||||
fullscreenLoading: false,
|
||||
dynamicValidateForm: {},
|
||||
dynamicValidateFormTwo: {},
|
||||
taskId: '',
|
||||
companyId: '',
|
||||
isShow: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('taskId', (taskId) => {
|
||||
this.taskId = taskId
|
||||
})
|
||||
getInfo().then((res) => {
|
||||
this.companyId = res.user.companyId
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
this.fileList = fileList
|
||||
console.log('fileListRemove', fileList)
|
||||
fileList.map((item) => {
|
||||
this.fileIds = fileList
|
||||
.map((item) => item.response.data.id)
|
||||
.join(',')
|
||||
})
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log('file')
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
// return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
handleSuccess(response, fileList) {
|
||||
this.fileList = fileList
|
||||
fileList.map((item) => {
|
||||
this.fileIds = fileList
|
||||
.map((item) => item.response.data.id)
|
||||
.join(',')
|
||||
})
|
||||
},
|
||||
//正则校验配件数量--维修数量
|
||||
numberIntegerValidator(rule, value, callback) {
|
||||
const reg = /^\+?[1-9][0-9]*$/
|
||||
if (value && reg.test(value) && value <= this.rowObj.repairNum) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('请输入大于0并且小于维修总量的正整数'))
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
let params = {
|
||||
taskId: this.taskId,
|
||||
}
|
||||
this.loading = true
|
||||
getRepairMaTypeListApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.repairList = res.rows
|
||||
this.total = res.total
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.$refs['dynamicValidateForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
// 编码管理传递参数
|
||||
let params = {
|
||||
taskId: this.rowObj.taskId,
|
||||
maId: this.rowObj.maId,
|
||||
typeId: this.rowObj.typeId,
|
||||
id: this.rowObj.id,
|
||||
repairType: 3,
|
||||
companyId: this.companyId,
|
||||
scrapReason: this.dynamicValidateForm.scrapReason,
|
||||
scrapType: this.dynamicValidateForm.scrapType,
|
||||
fileIds: this.fileIds.length > 0 ? this.fileIds : '',
|
||||
scrapNum: 1,
|
||||
}
|
||||
this.fullscreenLoading = true
|
||||
submitRepairApplyApi(params)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.fileList = []
|
||||
this.fileIds = []
|
||||
this.getList()
|
||||
this.$message.success('操作成功!')
|
||||
this.fullscreenLoading = false
|
||||
this.dialogShowFlag = false
|
||||
this.$emit('domainChange', res.code)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.fullscreenLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
submitTwo() {
|
||||
this.$refs['dynamicValidateFormTwo'].validate((valid) => {
|
||||
if (valid) {
|
||||
// 数量管理传递参数
|
||||
let params = {
|
||||
taskId: this.rowObj.taskId,
|
||||
maId: this.rowObj.maId,
|
||||
typeId: this.rowObj.typeId,
|
||||
id: this.rowObj.id,
|
||||
companyId: this.companyId,
|
||||
repairType: 3,
|
||||
companyId: this.companyId,
|
||||
scrapReason: this.dynamicValidateFormTwo.scrapReason,
|
||||
scrapType: this.dynamicValidateFormTwo.scrapType,
|
||||
fileIds: this.fileIds.length > 0 ? this.fileIds : '',
|
||||
scrapNum: this.dynamicValidateFormTwo.scrapNum,
|
||||
}
|
||||
this.fullscreenLoading = true
|
||||
submitRepairApplyApi(params)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$refs.dynamicValidateFormTwo.clearValidate()
|
||||
this.fileList = []
|
||||
this.fileIds = []
|
||||
this.getList()
|
||||
this.$message.success('操作成功!')
|
||||
this.fullscreenLoading = false
|
||||
this.dialogShowFlag = false
|
||||
this.$emit('domainChange', res.code)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$refs.dynamicValidateFormTwo.clearValidate()
|
||||
this.fullscreenLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
fileListChange(data) {
|
||||
data.map((item) => {
|
||||
this.fileIds = data.map((item) => item.id).join(',')
|
||||
})
|
||||
},
|
||||
init() {
|
||||
if (this.rowObj.code !== null && this.rowObj.code !== '') {
|
||||
this.dynamicValidateForm = {}
|
||||
this.dynamicValidateFormTwo = {}
|
||||
this.isShow = false
|
||||
} else {
|
||||
this.dynamicValidateForm = {}
|
||||
this.dynamicValidateFormTwo = {}
|
||||
this.isShow = true
|
||||
}
|
||||
getInfo().then((res) => {
|
||||
this.companyId = res.user.companyId
|
||||
})
|
||||
this.fileList = []
|
||||
this.fileIds = []
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
// this.$refs.dynamicValidateFormTwo.clearValidate()
|
||||
this.dialogShowFlag = false
|
||||
this.fileList = []
|
||||
},
|
||||
addDomainOne() {
|
||||
this.dynamicValidateForm.premiumList.push({
|
||||
selected: 'N',
|
||||
premium: undefined,
|
||||
rate: undefined,
|
||||
feeRate: undefined,
|
||||
fee: undefined,
|
||||
baofei1_unit: '',
|
||||
shangyoufeiyonge_unit: '',
|
||||
downRate: undefined,
|
||||
downFee: undefined,
|
||||
xiayoufeiyonge_unit: '',
|
||||
key: Date.now(),
|
||||
})
|
||||
},
|
||||
addDomainTwo() {
|
||||
this.dynamicValidateForm.premiumListTwo.push({
|
||||
selected: 'N',
|
||||
premium: undefined,
|
||||
rate: undefined,
|
||||
feeRate: undefined,
|
||||
fee: undefined,
|
||||
baofei1_unit: '',
|
||||
shangyoufeiyonge_unit: '',
|
||||
downRate: undefined,
|
||||
downFee: undefined,
|
||||
xiayoufeiyonge_unit: '',
|
||||
key: Date.now(),
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form_box_one {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form_box_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form_box_line {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #1a1c22;
|
||||
}
|
||||
|
||||
.form_box_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add_box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.form_box_two {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form_box_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form_box_line {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #1a1c22;
|
||||
}
|
||||
|
||||
.form_box_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add_box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
text-align: left;
|
||||
|
||||
.tip-text {
|
||||
font-size: 13px;
|
||||
color: red;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,514 @@
|
|||
<template>
|
||||
<el-dialog v-dialogDrag v-loading.fullscreen.lock="fullscreenLoading" :before-close="cancel" :title="dialogTitle"
|
||||
:visible.sync="dialogShowFlag" append-to-body width="600px">
|
||||
<div class="form_box_one">
|
||||
<el-form ref="dynamicValidateForm" :model="dynamicValidateForm" class="demo-dynamic" label-width="100px">
|
||||
<div v-for="(domain, index) in dynamicValidateForm.premiumList" :key="domain.key" class="bor_box">
|
||||
<p class="form_box_title">编码管理设备</p>
|
||||
<div class="form_box_line"></div>
|
||||
<div class="form_box_item">
|
||||
<!-- :rules="{
|
||||
required: true,
|
||||
message: '保费不能为空',
|
||||
trigger: 'blur',
|
||||
}"
|
||||
label="选择配件：" -->
|
||||
<el-form-item :prop="'premiumList.' + index + '.partName'" label="配件名称：">
|
||||
<el-input v-model="domain.partName" placeholder="请输入" size="small" maxlength="50"
|
||||
style="width: 350px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :prop="'premiumList.' + index + '.partType'" label="是否收费：" required
|
||||
:rules="{ required: true, message: '请选择是否收费', trigger: 'blur', }">
|
||||
<el-radio-group style="width: 350px" v-model="domain.partType">
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="index == 0" :prop="'premiumList.' + index + '.supplierId'" label="选择厂家：" :rules="{
|
||||
message: '请选择厂家',
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
}">
|
||||
<el-select v-model="domain.supplierId" placeholder="请选择" size="small" filterable style="width: 350px">
|
||||
<el-option v-for="dict in supplierSelectList" :key="dict.supplierId" :label="dict.supplier"
|
||||
:value="dict.supplierId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item
|
||||
:prop="'premiumList.' + index + '.partPrice'"
|
||||
label="配件单价(元)："
|
||||
label-width="120px"
|
||||
:rules="{
|
||||
required: false,
|
||||
validator: meneyIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}"
|
||||
> -->
|
||||
<el-form-item :prop="'premiumList.' + index + '.partPrice'" label="配件单价(元)：" label-width="120px">
|
||||
<el-input v-model="domain.partPrice" placeholder="请输入" size="small" maxlength="10"
|
||||
style="width: 330px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :prop="'premiumList.' + index + '.partNum'" label="配件数量：" :rules="{
|
||||
required: false,
|
||||
validator: numberIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}">
|
||||
<el-input v-model="domain.partNum" placeholder="请输入" size="small" maxlength="10"
|
||||
style="width: 350px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :prop="'premiumList.' + index + '.repairContent'" label="维修内容：">
|
||||
<el-input v-model="domain.repairContent" maxlength="100" placeholder="请输入" show-word-limit size="small"
|
||||
style="width: 350px" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer" v-if="rowObj.code !== null && rowObj.code !== ''">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_box_two">
|
||||
<el-form ref="dynamicValidateFormTwo" :model="dynamicValidateFormTwo" class="demo-dynamic" label-width="100px">
|
||||
<div v-for="(domain, index) in dynamicValidateFormTwo.premiumListTwo" :key="domain.key" class="bor_box">
|
||||
<p class="form_box_title">数量管理设备</p>
|
||||
<div class="form_box_line"></div>
|
||||
<div class="form_box_item">
|
||||
<!-- :rules="{
|
||||
required: true,
|
||||
message: '保费不能为空',
|
||||
trigger: 'blur',
|
||||
}"
|
||||
label="选择配件：" -->
|
||||
<el-form-item :prop="'premiumListTwo.' + index + '.repairNum'" label="维修数量：" :rules="{
|
||||
required: true,
|
||||
validator: numberIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}">
|
||||
<el-input v-model="domain.repairNum" placeholder="请输入" size="small" maxlength="10"
|
||||
style="width: 350px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="配件名称：">
|
||||
<el-input v-model="domain.partName" placeholder="请输入" size="small" maxlength="50"
|
||||
style="width: 350px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否收费：" required :rules="{ required: true, message: '请选择是否收费', trigger: 'blur', }">
|
||||
<el-radio-group style="width: 350px" v-model="domain.partType">
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="index == 0" :prop="'premiumListTwo.' + index + '.supplierId'" label="选择厂家：" :rules="{
|
||||
message: '请选择厂家',
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
}">
|
||||
<el-select v-model="domain.supplierId" placeholder="请选择" size="small" filterable style="width: 350px">
|
||||
<el-option v-for="dict in supplierSelectList" :key="dict.supplierId" :label="dict.supplier"
|
||||
:value="dict.supplierId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item
|
||||
:prop="'premiumListTwo.' + index + '.partPrice'"
|
||||
label="配件单价(元)："
|
||||
label-width="120px"
|
||||
:rules="{
|
||||
required: false,
|
||||
validator: meneyIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}"
|
||||
> -->
|
||||
<el-form-item label="配件单价(元)：" label-width="120px">
|
||||
<el-input v-model="domain.partPrice" placeholder="请输入" size="small" maxlength="10"
|
||||
style="width: 330px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="配件数量：" :rules="{
|
||||
required: false,
|
||||
validator: numberIntegerValidator,
|
||||
trigger: 'blur',
|
||||
}">
|
||||
<el-input v-model="domain.partNum" placeholder="请输入" size="small" maxlength="10"
|
||||
style="width: 350px"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="维修内容：">
|
||||
<el-input v-model="domain.repairContent" maxlength="100" placeholder="请输入" show-word-limit size="small"
|
||||
style="width: 350px" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- <el-button @click.prevent="removeDomain(domain, index)"-->
|
||||
<!-- >删除-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <div class="add_box">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="addDomainTwo"
|
||||
>添加配件
|
||||
</el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer" v-if="rowObj.code == null || rowObj.code == ''">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitTwo">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
submitRepairApplyApi, getUserSelectApi,
|
||||
getRepairMaTypeListApi, listPartType, getSupplierSelectApi
|
||||
} from "@/api/repairTest/repair";
|
||||
// import { listPartType, } from "@/api/store/tools";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {
|
||||
getInfo,
|
||||
} from "@/api/login";;
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
// 弹窗是否显示
|
||||
isShowFlag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 对应操作数据键值
|
||||
priKey: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
//弹窗标题
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//弹窗标题
|
||||
rowObj: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isShowFlag(val) {
|
||||
if (val) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogShowFlag: {
|
||||
get() {
|
||||
return this.isShowFlag;
|
||||
},
|
||||
set(v) {
|
||||
this.$emit("update:isShowFlag", v);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
supplierSelectList: [],
|
||||
fullscreenLoading: false,
|
||||
dynamicValidateForm: {
|
||||
premiumList: [
|
||||
{
|
||||
selected: "Y",
|
||||
premium: undefined,
|
||||
rate: undefined,
|
||||
feeRate: undefined,
|
||||
fee: undefined,
|
||||
baofei1_unit: "",
|
||||
shangyoufeiyonge_unit: "",
|
||||
downRate: undefined,
|
||||
downFee: undefined,
|
||||
xiayoufeiyonge_unit: ""
|
||||
}
|
||||
],
|
||||
},
|
||||
dynamicValidateFormTwo: {
|
||||
premiumListTwo: [
|
||||
{
|
||||
selected: "Y",
|
||||
premium: undefined,
|
||||
rate: undefined,
|
||||
feeRate: undefined,
|
||||
fee: undefined,
|
||||
baofei1_unit: "",
|
||||
shangyoufeiyonge_unit: "",
|
||||
downRate: undefined,
|
||||
downFee: undefined,
|
||||
xiayoufeiyonge_unit: ""
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
userSelectList: [],
|
||||
companyId: '',
|
||||
taskId: ""
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('taskId', (taskId) => {
|
||||
this.taskId = taskId
|
||||
})
|
||||
this.getTree()
|
||||
},
|
||||
methods: {
|
||||
//正则校验配件费用
|
||||
meneyIntegerValidator(rule, value, callback) {
|
||||
const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
|
||||
if (value === '' || reg.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请输入大于0的数'));
|
||||
}
|
||||
},
|
||||
//正则校验配件数量--维修数量
|
||||
numberIntegerValidator(rule, value, callback) {
|
||||
const reg = /^\+?[1-9][0-9]*$/;
|
||||
if (reg.test(value) && value <= this.rowObj.repairNum) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请输入大于0的并且小于维修总量的正整数'));
|
||||
}
|
||||
},
|
||||
getTree() {
|
||||
listPartType().then(response => {
|
||||
this.deptList = this.handleTree(response.data, "paId");
|
||||
});
|
||||
},
|
||||
/** 转换部门数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.paId,
|
||||
label: node.paName,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
getList() {
|
||||
let params = {
|
||||
taskId: this.taskId
|
||||
}
|
||||
this.loading = true;
|
||||
getRepairMaTypeListApi(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.repairList = res.rows;
|
||||
this.total = res.total;
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
if (this.rowObj.code !== null && this.rowObj.code !== '') {
|
||||
this.dynamicValidateForm.premiumList = [];
|
||||
this.dynamicValidateFormTwo.premiumListTwo = [];
|
||||
this.addDomainOne();
|
||||
} else {
|
||||
this.dynamicValidateForm.premiumList = [];
|
||||
this.dynamicValidateFormTwo.premiumListTwo = [];
|
||||
this.addDomainTwo();
|
||||
}
|
||||
getSupplierSelectApi().then(res => {
|
||||
this.supplierSelectList = res.data
|
||||
})
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.dialogShowFlag = false;
|
||||
// this.$refs["form"].resetFields();
|
||||
// this.dynamicValidateForm.premiumList = [];
|
||||
},
|
||||
addDomainOne() {
|
||||
// 选择配件 partId
|
||||
// 是否收费 partType
|
||||
// 配件数量 partNum
|
||||
// 配件费用 partCost
|
||||
// 维修内容 repairContent
|
||||
// 维修数量 repairNum
|
||||
this.dynamicValidateForm.premiumList.push({
|
||||
selected: "N",
|
||||
partName: '',
|
||||
repairer: '',
|
||||
partType: '',
|
||||
partNum: '',
|
||||
partCost: '',
|
||||
repairContent: '',
|
||||
supplierId: '',
|
||||
partPrice: '',
|
||||
repairNum: 1,
|
||||
key: Date.now()
|
||||
});
|
||||
},
|
||||
addDomainTwo() {
|
||||
this.dynamicValidateFormTwo.premiumListTwo.push({
|
||||
selected: "N",
|
||||
partName: '',
|
||||
repairer: '',
|
||||
partType: '',
|
||||
partNum: '',
|
||||
partCost: '',
|
||||
repairContent: '',
|
||||
repairNum: '',
|
||||
key: Date.now()
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
this.$refs["dynamicValidateForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.dynamicValidateForm.premiumList.forEach(item => {
|
||||
item.partCost = item.partPrice;
|
||||
})
|
||||
// this.dynamicValidateForm.premiumList[0].partCost = this.dynamicValidateForm.premiumList[0].partPrice;
|
||||
// 编码管理传递参数
|
||||
console.log('this.dynamicValidateForm.premiumList1111)', this.dynamicValidateForm.premiumList);
|
||||
|
||||
let params = {
|
||||
taskId: this.rowObj.taskId,
|
||||
maId: this.rowObj.maId,
|
||||
typeId: this.rowObj.typeId,
|
||||
id: this.rowObj.id,
|
||||
repairType: 2,
|
||||
companyId: this.companyId,
|
||||
repairNum: 1,
|
||||
partStrList: JSON.stringify(this.dynamicValidateForm.premiumList)
|
||||
}
|
||||
this.fullscreenLoading = true
|
||||
submitRepairApplyApi(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.getList()
|
||||
this.fullscreenLoading = false
|
||||
this.dialogShowFlag = false
|
||||
this.$message.success('操作成功!')
|
||||
this.$emit('domainChange', res.code)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.fullscreenLoading = false
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
submitTwo() {
|
||||
this.$refs["dynamicValidateFormTwo"].validate(valid => {
|
||||
if (valid) {
|
||||
// this.dynamicValidateFormTwo.premiumListTwo[0].partCost = this.dynamicValidateFormTwo.premiumListTwo[0].partPrice;
|
||||
this.dynamicValidateFormTwo.premiumListTwo.forEach(item => {
|
||||
item.partCost = item.partPrice;
|
||||
})
|
||||
|
||||
console.log('this.dynamicValidateFormTwo.premiumListTwo2222', this.dynamicValidateFormTwo.premiumListTwo);
|
||||
// 数量管理传递参数
|
||||
let params = {
|
||||
taskId: this.rowObj.taskId,
|
||||
maId: this.rowObj.maId,
|
||||
typeId: this.rowObj.typeId,
|
||||
id: this.rowObj.id,
|
||||
repairType: 2,
|
||||
companyId: this.companyId,
|
||||
repairNum: 1,
|
||||
partStrList: JSON.stringify(this.dynamicValidateFormTwo.premiumListTwo)
|
||||
}
|
||||
this.fullscreenLoading = true
|
||||
submitRepairApplyApi(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.getList()
|
||||
this.fullscreenLoading = false
|
||||
this.dialogShowFlag = false
|
||||
this.$message.success('操作成功!')
|
||||
this.$emit('domainChange', res.code)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.fullscreenLoading = false
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form_box_one {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form_box_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form_box_line {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #1a1c22;
|
||||
}
|
||||
|
||||
.form_box_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add_box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.form_box_two {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form_box_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form_box_line {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #1a1c22;
|
||||
}
|
||||
|
||||
.form_box_item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add_box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 3%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<!-- 维修报废页面 -->
|
||||
<div class="app-container">
|
||||
<TableModel :config="config">
|
||||
<template slot="export">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
>导出数据</el-button
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<!-- 列表操作栏 -->
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button size="mini" type="text" @click="handlePreview(data)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button size="mini" type="text" @click="handleRepair(data)">
|
||||
维修
|
||||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="closeDialogOuter"
|
||||
@closeDialogInner="closeDialogInner"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<TableModel :config="dialogConfig"></TableModel>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableModel from '@/components/TableModel'
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
import { config, dialogConfig, getSelList } from './config.js'
|
||||
export default {
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
dialogConfig,
|
||||
getSelList,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getSelList()
|
||||
},
|
||||
methods: {
|
||||
/* 查看 */
|
||||
handlePreview() {
|
||||
console.log('查看')
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
/* 维修 */
|
||||
handleRepair() {
|
||||
console.log('维修')
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
/* 外层弹框关闭 */
|
||||
closeDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
/* 内层弹框关闭 */
|
||||
closeDialogInner() {
|
||||
this.dialogConfig.innerVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<el-select
|
||||
class="user-select-tree"
|
||||
v-model="textStr"
|
||||
:placeholder="placeholder"
|
||||
ref="select"
|
||||
:filterable="true"
|
||||
:remote="true"
|
||||
:remote-method="remoteMethod"
|
||||
:clearable="clearable"
|
||||
@clear="clearSelect"
|
||||
@visible-change="visibleChange"
|
||||
:popper-append-to-body="false"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-model="value"
|
||||
style="
|
||||
height: 100%;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
background-color: #ffffff;
|
||||
"
|
||||
>
|
||||
<el-tree
|
||||
:data="treeList"
|
||||
:props="treeProps"
|
||||
:filter-node-method="filterNode"
|
||||
:current-node-key="currentKey"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
:node-key="nodeKey"
|
||||
ref="selectTree"
|
||||
:check-strictly="true"
|
||||
@node-click="handleTreeClick"
|
||||
>
|
||||
<span
|
||||
slot-scope="{ data }"
|
||||
:title="data[treeProps.label]"
|
||||
class="ellipsis"
|
||||
>
|
||||
{{ data[treeProps.label] }}
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'index',
|
||||
props: {
|
||||
treeList: {
|
||||
type: Array
|
||||
}, //树形原始数据
|
||||
treeProps: Object, //树形配置
|
||||
nodeKey: String, //树形唯一键值
|
||||
defaultSelect: {
|
||||
//默认选择
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
defaultData: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
clearable: { type: Boolean, default: false },
|
||||
placeholder: { type: String, default: '请选择' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textStr: '',
|
||||
value: '',
|
||||
filterText: '',
|
||||
currentKey: '',
|
||||
highlightNode: -1
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// clearable(val) {
|
||||
// console.log('val-----', val);
|
||||
// },
|
||||
clearable: {
|
||||
handler: function(val,old) {
|
||||
},
|
||||
// 立即以obj.name的当前值触发回调
|
||||
immediate: true
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs.selectTree.filter(val)
|
||||
},
|
||||
defaultData(val) {
|
||||
if (this.highlightNode === -1) {
|
||||
this.setEdit(val)
|
||||
}
|
||||
},
|
||||
treeList(val) {
|
||||
if (val.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.defaultSelect) {
|
||||
this.value = val[0][this.treeProps.children][0][this.nodeKey]
|
||||
this.textStr =
|
||||
val[0][this.treeProps.children][0][this.treeProps.label]
|
||||
this.highlightNode = this.value
|
||||
this.currentKey = this.value
|
||||
this.$refs.selectTree.setCurrentKey(this.highlightNode)
|
||||
this.$emit('handleNodeClick', this.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setEdit(obj) {
|
||||
if (obj.name !== '' && obj.value !== '') {
|
||||
this.value = obj.value
|
||||
this.textStr = obj.name
|
||||
this.$nextTick(() => {
|
||||
this.highlightNode = this.value
|
||||
this.currentKey = this.value
|
||||
this.$refs.selectTree.setCurrentKey(this.highlightNode)
|
||||
})
|
||||
}
|
||||
},
|
||||
visibleChange() {
|
||||
this.filterText = ''
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data[this.treeProps.label].indexOf(value) !== -1
|
||||
},
|
||||
remoteMethod(query) {
|
||||
setTimeout(() => {
|
||||
this.filterText = query
|
||||
}, 100)
|
||||
},
|
||||
// 设备类型点击赋值
|
||||
handleTreeClick(data, checked) {
|
||||
this.filterText = ''
|
||||
if (checked) {
|
||||
// //判断是否是父子
|
||||
if (
|
||||
data[this.treeProps.children] !== undefined &&
|
||||
data[this.treeProps.children].length !== 0
|
||||
) {
|
||||
this.$refs.selectTree.setCurrentKey(this.highlightNode)
|
||||
} else {
|
||||
this.value = data[this.nodeKey]
|
||||
this.textStr = data[this.treeProps.label]
|
||||
this.$forceUpdate()
|
||||
this.currentKey = this.value
|
||||
this.highlightNode = data[this.nodeKey]
|
||||
this.$emit('handleNodeClick', this.value)
|
||||
this.$refs.selectTree.setCheckedKeys([this.highlightNode])
|
||||
this.$refs.select.blur()
|
||||
}
|
||||
}
|
||||
},
|
||||
clearFun() {
|
||||
this.value = null
|
||||
this.textStr = null
|
||||
this.currentKey = undefined
|
||||
this.highlightNode = undefined
|
||||
this.$refs.selectTree.setCurrentKey(this.highlightNode)
|
||||
this.$refs.select.clearSingleSelect()
|
||||
// this.value = ''
|
||||
// this.textStr = ''
|
||||
// this.currentKey = undefined
|
||||
// this.highlightNode = undefined
|
||||
// this.$refs.selectTree.setCurrentKey(this.highlightNode)
|
||||
},
|
||||
clearSelect() {
|
||||
this.value = ''
|
||||
this.textStr = ''
|
||||
this.$refs.selectTree.setCurrentKey()
|
||||
this.$emit('handleNodeClick', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-select-tree {
|
||||
::v-deep {
|
||||
.el-icon-::before {
|
||||
content: '\ea1b';
|
||||
font-family: 'icomoon' !important;
|
||||
display: inline-block;
|
||||
-webkit-transform: scale(0.83);
|
||||
font-size: 10px;
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
color: #666666;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.el-input.is-focus {
|
||||
.el-icon- {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.el-input__icon {
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-clickoutside="closeTree">
|
||||
<div @click="inputFocus">
|
||||
<el-input
|
||||
v-model="inputValue"
|
||||
:style="'width:' + width + 'px'"
|
||||
placeholder="请选择工机具类型"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="treeModule">
|
||||
<el-tree
|
||||
class="ORGTree"
|
||||
v-show="ishowTree"
|
||||
ref="tree"
|
||||
:data="dataList"
|
||||
key="id"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
:props="defaultProps"
|
||||
:filter-node-method="filterNode"
|
||||
>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Clickoutside from "element-ui/src/utils/clickoutside";
|
||||
export default {
|
||||
directives: { Clickoutside },
|
||||
props: {
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// name: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
width: {
|
||||
type: Number,
|
||||
default: 300
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mineStatusValue: [],
|
||||
inputValue: '',
|
||||
dataLists: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
},
|
||||
ishowTree: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
watch: {
|
||||
// name: function () {
|
||||
// this.inputValue = this.name
|
||||
// }
|
||||
inputValue(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inputFocus() {
|
||||
if (this.ishowTree == true) {
|
||||
this.ishowTree = false
|
||||
} else {
|
||||
this.ishowTree = true
|
||||
}
|
||||
|
||||
},
|
||||
// 关闭树形控件
|
||||
closeTree() {
|
||||
this.ishowTree = false
|
||||
},
|
||||
handleNodeClick(e) {
|
||||
this.inputValue = e.label
|
||||
this.$emit('changeId', e.id)
|
||||
this.ishowTree = false
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeModule {
|
||||
position: absolute; /*这里一定要设置*/
|
||||
z-index: 999999; /*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/
|
||||
}
|
||||
.ORGTree {
|
||||
width: 240px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
border: 1px solid #ccc7c7;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="actionUrl"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<slot name="default">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</slot>
|
||||
<!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
name: 'UploadFile',
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
actionUrl: {
|
||||
type: String,
|
||||
default: 'https://jsonplaceholder.typicode.com/posts/',
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
// uploadTip: {
|
||||
// type: String,
|
||||
// default: '只能上传jpg/png文件，且不超过500kb'
|
||||
// },
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadImgUrl:
|
||||
process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + getToken(),
|
||||
},
|
||||
uploadData: {
|
||||
fileType: 'sx',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
this.$emit('remove', file, fileList)
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.$emit('success', response, fileList)
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.$emit('preview', file)
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 ${this.limit} 个文件，本次选择了 ${
|
||||
files.length
|
||||
} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
|
||||
)
|
||||
this.$emit('exceed', files, fileList)
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
// return this.$confirm(`确定移除 ${file.name} ？`)
|
||||
// .then(() => {
|
||||
// this.$emit('before-remove', file, fileList)
|
||||
// })
|
||||
// .catch(() => {})
|
||||
},
|
||||
beforeUpload(file) {
|
||||
console.log('file', file)
|
||||
const isJPGorPNG =
|
||||
file.type == 'image/png' ||
|
||||
file.type == 'image/jpg' ||
|
||||
file.type == 'image/jpeg'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
|
||||
if (!isJPGorPNG) {
|
||||
this.$message.error('只能上传 jpg、jpeg、png 格式的图片')
|
||||
}
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传图片大小不能超过 5MB')
|
||||
}
|
||||
return isJPGorPNG && isLt5M
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-demo .el-upload__tip {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
multiple
|
||||
:action="uploadImgUrl"
|
||||
list-type="picture-card"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
ref="imageUpload"
|
||||
:on-remove="handleDelete"
|
||||
:show-file-list="true"
|
||||
:headers="headers"
|
||||
:file-list="fileList"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:class="{ hide: this.fileList.length >= this.limit }"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||
请上传
|
||||
<template v-if="fileSize">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</template>
|
||||
<template v-if="fileType">
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
|
||||
</template>
|
||||
的文件
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
title="预览"
|
||||
width="800"
|
||||
append-to-body
|
||||
>
|
||||
<img
|
||||
:src="dialogImageUrl"
|
||||
style="display: block; max-width: 100%; margin: 0 auto"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
props: {
|
||||
value: [String, Object, Array],
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ["png", "jpg", "jpeg"],
|
||||
},
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: 0,
|
||||
uploadList: [],
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
hideUpload: false,
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken(),
|
||||
},
|
||||
fileList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : this.value.split(',');
|
||||
// 然后将数组转为对象数组
|
||||
this.fileList = list.map(item => {
|
||||
if (typeof item === "string") {
|
||||
item = { name: item, url: item };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.fileList = [];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('this.limit', this.limit);
|
||||
console.log('this.fileSize', this.fileSize);
|
||||
console.log('this.fileType', this.fileType);
|
||||
console.log('this.isShowTip', this.isShowTip);
|
||||
console.log('this.fileList', this.fileList);
|
||||
},
|
||||
computed: {
|
||||
// 是否显示提示
|
||||
showTip() {
|
||||
return this.isShowTip && (this.fileType || this.fileSize);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 上传前loading加载
|
||||
handleBeforeUpload(file) {
|
||||
let isImg = false;
|
||||
if (this.fileType.length) {
|
||||
let fileExtension = "";
|
||||
if (file.name.lastIndexOf(".") > -1) {
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||
}
|
||||
isImg = this.fileType.some(type => {
|
||||
if (file.type.indexOf(type) > -1) return true;
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
isImg = file.type.indexOf("image") > -1;
|
||||
}
|
||||
|
||||
if (!isImg) {
|
||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
|
||||
return false;
|
||||
}
|
||||
if (this.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||
if (!isLt) {
|
||||
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
this.$modal.loading("正在上传图片，请稍候...");
|
||||
this.number++;
|
||||
},
|
||||
// 文件个数超出
|
||||
handleExceed() {
|
||||
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||
},
|
||||
// 上传成功回调
|
||||
handleUploadSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
this.uploadList.push({ name: res.data.fileName, url: res.data.fileUrl, id: res.data.id });
|
||||
this.uploadedSuccessfully();
|
||||
} else {
|
||||
this.number--;
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError(res.msg);
|
||||
this.$refs.imageUpload.handleRemove(file);
|
||||
this.uploadedSuccessfully();
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
handleDelete(file) {
|
||||
const findex = this.fileList.map(f => f.name).indexOf(file.name);
|
||||
if (findex > -1) {
|
||||
this.fileList.splice(findex, 1);
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
this.$emit("fileListChange", this.fileList);
|
||||
}
|
||||
},
|
||||
// 上传失败
|
||||
handleUploadError() {
|
||||
this.$modal.msgError("上传图片失败，请重试");
|
||||
this.$modal.closeLoading();
|
||||
},
|
||||
// 上传结束处理
|
||||
uploadedSuccessfully() {
|
||||
if (this.number > 0 && this.uploadList.length === this.number) {
|
||||
this.fileList = this.fileList.concat(this.uploadList);
|
||||
this.uploadList = [];
|
||||
this.number = 0;
|
||||
console.log('this.fileList===', this.fileList);
|
||||
this.$emit("input", this.listToString(this.fileList));
|
||||
this.$emit("fileListChange", this.fileList);
|
||||
this.$modal.closeLoading();
|
||||
}
|
||||
},
|
||||
// 预览
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 对象转成指定字符串分隔
|
||||
listToString(list, separator) {
|
||||
let strs = "";
|
||||
separator = separator || ",";
|
||||
for (let i in list) {
|
||||
if (list[i].url) {
|
||||
strs += list[i].url.replace(this.baseUrl, "") + separator;
|
||||
}
|
||||
}
|
||||
return strs != '' ? strs.substr(0, strs.length - 1) : '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
// .el-upload--picture-card 控制加号部分
|
||||
::v-deep.hide .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
// 去掉动画效果
|
||||
::v-deep .el-list-enter-active,
|
||||
::v-deep .el-list-leave-active {
|
||||
transition: all 0s;
|
||||
}
|
||||
|
||||
::v-deep .el-list-enter,
|
||||
.el-list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -43,15 +43,18 @@
|
|||
size="mini"
|
||||
>审核中</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-if="data.taskStatus === 123" size="mini"
|
||||
>已驳回</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="success"
|
||||
v-if="data.taskStatus === 123 || data.taskStatus === 122"
|
||||
size="mini"
|
||||
>已完成</el-tag
|
||||
>
|
||||
<!-- <el-tag
|
||||
type="success"
|
||||
v-if="data.taskStatus === 122"
|
||||
size="mini"
|
||||
>已通过</el-tag
|
||||
>
|
||||
> -->
|
||||
</template>
|
||||
<!-- 列表操作栏 -->
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
|
|
@ -105,7 +108,7 @@
|
|||
>通过</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="warning"
|
||||
type="danger"
|
||||
v-if="data.status == 2"
|
||||
size="mini"
|
||||
>驳回</el-tag
|
||||
|
|
|
|||
Loading…
Reference in New Issue