2
This commit is contained in:
yanran200730
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="attachment-material">
|
||||
<ai-card title="附件材料">
|
||||
<template #right>
|
||||
<span class="iconfont iconAdd rightBtn"></span>
|
||||
<span class="rightBtn" style="margin-left: 8px;" @click="dialog=true">新增行数</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-table
|
||||
:data="materialList"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table-header"
|
||||
align="center"
|
||||
empty-text="材料列表信息为空，点击标题右侧添加按钮进行添加"
|
||||
>
|
||||
<el-table-column align="left" prop="annexName" label="材料名称" width="280">
|
||||
<template slot-scope="scope">
|
||||
<div class="table-border">{{ scope.row.annexName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="exampleFileId" label="样例">
|
||||
<template slot-scope="{row}">
|
||||
<el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.exampleFileId=v)"
|
||||
:http-request="args=>handleUpload(args).then(v=>row.exampleFileId=v)" :limit="1" accept=".jpg,.png">
|
||||
<el-button style="width: 102px">{{ row.exampleFileId ? '重新选择图片' : '选择图片文件' }}</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="emptyFileId" label="空表">
|
||||
<template slot-scope="{row}">
|
||||
<el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.emptyFileId=v)"
|
||||
:http-request="args=>handleUpload(args).then(v=>row.emptyFileId=v)" :limit="1" accept=".doc,.docx">
|
||||
<el-button style="width: 102px">{{ row.emptyFileId ? '重新选择word' : '选择word文件' }}</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="name" label="是否必填">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.mustFill"
|
||||
active-value="1" inactive-value="0"
|
||||
active-color="#5088FF"
|
||||
inactive-color="#D0D4DC">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<span class="iconfont iconEdit icon-color89B" title="编辑" @click="editInfo(scope.$index)" style="margin-right: 10px;"/>
|
||||
<span class="iconfont iconDelete icon-color89B" title="删除" @click="deleteInfo(scope.$index)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-dialog
|
||||
title="添加附件材料"
|
||||
:visible.sync="dialog"
|
||||
@closed="form.annexName='',idAdd=true,index=null"
|
||||
@onConfirm="onConfirm"
|
||||
@onCancel="dialog=false"
|
||||
width="720px">
|
||||
<el-form :rules="rules" ref="materialForm" label-width="100px" :model="form">
|
||||
<el-form-item label="材料名称：" prop="annexName">
|
||||
<el-input v-model.trim="form.annexName" size="small" placeholder="请输入材料名称" show-word-limit :maxlength="32"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "attachmentMaterial",
|
||||
inject: ['config'],
|
||||
props: {
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
materialList: [],
|
||||
dialog: false,
|
||||
idAdd: true,
|
||||
index: null,
|
||||
form: {
|
||||
annexName: ""
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
annexName: [{required: true, message: '请输入材料名称', trigger: 'blur'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAttachmentMaterial() {
|
||||
return Promise.resolve(this.materialList)
|
||||
},
|
||||
handleUpload(file) {
|
||||
let formData = new FormData()
|
||||
formData.append('file', file.file)
|
||||
return this.instance.post(`/admin/file/add`, formData).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success('上传成功')
|
||||
let data = res.data[0].split(';')
|
||||
return data[1]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加附件材料
|
||||
* */
|
||||
onConfirm() {
|
||||
this.$refs['materialForm'].validate(valid => {
|
||||
if (valid) {
|
||||
if(this.idAdd){
|
||||
this.materialList.push({
|
||||
annexName: this.form.annexName,
|
||||
mustFill: "1",
|
||||
exampleFileId: "",
|
||||
emptyFileId: "",
|
||||
})
|
||||
}else {
|
||||
this.materialList[this.index].annexName = this.form.annexName
|
||||
}
|
||||
this.dialog = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
deleteInfo(index) {
|
||||
this.$confirm("是否删除？").then(res => {
|
||||
this.materialList.splice(index, 1)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑标题
|
||||
*/
|
||||
editInfo(index) {
|
||||
this.dialog = true
|
||||
this.idAdd = false
|
||||
this.index = index
|
||||
this.form.annexName = JSON.parse(JSON.stringify(this.materialList[index].annexName))
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.config.detailObj?.id) {
|
||||
this.materialList = JSON.parse(JSON.stringify(this.config.detailObj?.processAnnexDefs))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.attachment-material {
|
||||
.rightBtn {
|
||||
font-size: 14px;
|
||||
color: #5088FF;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-border {
|
||||
width: 260px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #D0D4DC;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconDelete {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user