code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div style="display: inline-block;position: relative;">
|
||||
<el-button
|
||||
@click="openNewDialog"
|
||||
id="question"
|
||||
class="btn"
|
||||
icon="icon-separate"
|
||||
>提交问题</el-button>
|
||||
<!-- 提交问题 -->
|
||||
<el-dialog :visible.sync="newDialogVisible" width="600px" destroy-on-close title="提交问题">
|
||||
<el-form ref="newDialogForm" :model="newDialogForm" :rules="newDialogFormRules" class="label-input-form">
|
||||
<el-formItem label="问题" prop="content" class="add-form-item" label-width="130px">
|
||||
<el-input v-model="newDialogForm.content" placeholder="请输入问题" style="width: 6rem"></el-input>
|
||||
</el-formItem>
|
||||
|
||||
<el-formItem label="附件" prop="files" class="add-form-item" label-width="130px">
|
||||
<el-upload
|
||||
drag
|
||||
:on-success="uploadFileSuccess"
|
||||
:action="uploadFileUrl"
|
||||
:before-upload="beforeUploadFile"
|
||||
:show-file-list="true"
|
||||
:on-format-error="handleFileFormatError"
|
||||
name="file"
|
||||
ref="uploadFileNewDialog"
|
||||
:limit="1"
|
||||
:on-exceed="onFileExceed"
|
||||
style="margin-top: 15px;"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">点击或拖拽上传文件</div>
|
||||
</el-upload>
|
||||
</el-formItem>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="demo-drawer-footer">
|
||||
<el-button type="primary" round class="common-button-primary" icon="el-icon-check" @click="confirmNewDialogBtnClick" :loading="submitLoading">确定</el-button>
|
||||
<el-button round class="common-button-default" icon="el-icon-close" @click="cancelNewDialogBtnClick">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PutQuestionButton',
|
||||
props: {
|
||||
resId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
resType: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
uploadFileUrl: 'api/att/attFile/upload',
|
||||
newDialogVisible: false,
|
||||
submitLoading: false,
|
||||
newDialogForm: {
|
||||
content: '',
|
||||
files: ''
|
||||
},
|
||||
newDialogFormForReset: {
|
||||
content: '',
|
||||
files: ''
|
||||
},
|
||||
newDialogFormRules: {
|
||||
content: [
|
||||
{required:true,message:'问题不能为空',trigger:'blur'},
|
||||
{validator: this.verify.remakeY, trigger: 'change'}
|
||||
],
|
||||
files: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openNewDialog () {
|
||||
this.newDialogForm = { ...this.newDialogFormForReset }
|
||||
this.newDialogVisible = true
|
||||
},
|
||||
/**
|
||||
* 新增弹框 取消按钮
|
||||
*/
|
||||
cancelNewDialogBtnClick () {
|
||||
this.newDialogVisible = false
|
||||
},
|
||||
/**
|
||||
* 新增弹框 提交按钮
|
||||
*/
|
||||
// confirmNewDialogBtnClick () {
|
||||
// const formData = {
|
||||
// resId: this.resId,
|
||||
// resType: this.resType,
|
||||
// qaMsgEOList: [
|
||||
// {
|
||||
// qaFile: this.newDialogForm.files,
|
||||
// qaText: this.newDialogForm.content,
|
||||
// qaType: 'QUE'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// this.$http.postData('lawss/sarQaInfo/sendSARQueInfo', formData, {
|
||||
// _this: this
|
||||
// }, res => {
|
||||
// if (res.ok) {
|
||||
// this.$message({
|
||||
// message: '操作成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
// console.log('success', res)
|
||||
// this.newDialogVisible = false
|
||||
// } else {
|
||||
//
|
||||
// throw new Error(res)
|
||||
// }
|
||||
// }, err => {
|
||||
// console.error(err)
|
||||
// })
|
||||
// },
|
||||
|
||||
confirmNewDialogBtnClick () {
|
||||
this.$refs['newDialogForm'].validate((valid) => {
|
||||
if(valid){
|
||||
const formData = {
|
||||
resId: this.resId,
|
||||
resType: this.resType,
|
||||
qaMsgEOList: [
|
||||
{
|
||||
qaFile: this.newDialogForm.files,
|
||||
qaText: this.newDialogForm.content,
|
||||
qaType: 'QUE'
|
||||
}
|
||||
]
|
||||
}
|
||||
this.submitLoading = true
|
||||
this.$http.postData('lawss/sarQaInfo/sendSARQueInfo', formData, {
|
||||
_this: this,
|
||||
submitLoading: 'loading'
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
console.log('success', res)
|
||||
this.newDialogVisible = false
|
||||
this.submitLoading = false
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
|
||||
throw new Error(res)
|
||||
}
|
||||
}, err => {
|
||||
console.error(err)
|
||||
})
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 上传文件成功
|
||||
* @param response
|
||||
* @param file
|
||||
*/
|
||||
uploadFileSuccess (response, file) {
|
||||
if (response.ok) {
|
||||
this.$message({
|
||||
message: response.message,
|
||||
type: 'success'
|
||||
})
|
||||
|
||||
this.newDialogForm['files'] += response.data.id + ','
|
||||
} else {
|
||||
this.$refs.uploadFileNewDialog.clearFiles()
|
||||
this.$message({
|
||||
message: response.message,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 上传文件之前的回调
|
||||
* @param file
|
||||
* @returns {boolean}
|
||||
*/
|
||||
beforeUploadFile (file) {
|
||||
// var filename = file.name
|
||||
// var index1 = filename.lastIndexOf('.')
|
||||
// var index2 = filename.length
|
||||
// var fileSuffix = filename.substring(index1, index2)
|
||||
// // const fileSuffix = file.name.split('.')[1] // 后缀名
|
||||
// // 判断上传文件格式
|
||||
// // if (fileSuffix === 'pdf' || fileSuffix === 'PDF' || fileSuffix === 'doc' || fileSuffix === 'docx' || fileSuffix === 'ppt' || fileSuffix === 'pptx') {
|
||||
// if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
|
||||
// return true
|
||||
// } else {
|
||||
// this.$message.error('文件' + file.name + '格式不正确,请上传xls、xlsx文件')
|
||||
// return false
|
||||
// }
|
||||
// 判断文件上传大小
|
||||
if (file.size / 1024 / 1024 <= 200) {
|
||||
return true
|
||||
} else {
|
||||
this.$message.error('文件' + file.name + '大小不超过200M')
|
||||
return false
|
||||
}
|
||||
},
|
||||
// 导入标准文件格式错误执行
|
||||
handleFileFormatError (file) {
|
||||
this.$message.error('文件格式不正确')
|
||||
},
|
||||
onFileExceed () {
|
||||
this.$message.error('最多上传一个文件')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.btn{
|
||||
//position: absolute;
|
||||
//top: 10px;
|
||||
//right: 0;
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
border-radius: 15px;
|
||||
color: #07C160;
|
||||
border: 1px solid #07C160;
|
||||
background: rgba(1, 193, 96, 0.1);
|
||||
.icon-separate{
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
vertical-align: sub;
|
||||
background-image: url("~assets/images/shangqi/standardDetails/separate.png");
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user