update
This commit is contained in:
Jane
294
src/views/document/editDocument.vue
Normal file
294
src/views/document/editDocument.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="el-form-border">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<!--<el-form-item label="文档类别" required>
|
||||
<el-select placeholder="请选择">
|
||||
<el-option label="管理手册" value=""></el-option>
|
||||
<el-option label="操作手册" value=""></el-option>
|
||||
<el-option label="程序文件" value=""></el-option>
|
||||
<el-option label="需求文档" value=""></el-option>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item label="文档类别" prop="docType">
|
||||
<el-input v-model="form.docType" placeholder="请输入文档类别" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文档来源" prop="docSource">
|
||||
<el-input v-model="form.docSource" placeholder="请输入文档来源" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="关联工具" prop="toolId">
|
||||
<el-input v-model="form.toolId" placeholder="请选择关联工具" @focus="drawer1 = true"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="负责人" prop="docPrincipals">
|
||||
<el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="归属部门" prop="docRespDept">
|
||||
<el-input v-model="form.docRespDept" placeholder="请输入归属部门" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文件" required>
|
||||
<el-upload
|
||||
class="upload-component"
|
||||
ref="upload"
|
||||
:auto-upload="false"
|
||||
:file-list="fileList"
|
||||
:on-change="onChange"
|
||||
:on-remove="onRemove"
|
||||
:multiple="true"
|
||||
action=""
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
<div slot="tip" class="el-upload__tip"><el-progress :percentage="progress"></el-progress></div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form><!--el-form-->
|
||||
|
||||
<el-dialog title="选择关联工具" :visible.sync="drawer1" width="75%" append-to-body>
|
||||
<div>
|
||||
<el-table :data="tableData2" @row-click="singleElection" highlight-current-row style="width: 100%">
|
||||
<!--<el-table-column label="选择" align="center" width="65">
|
||||
<template slot-scope="scope">
|
||||
<el-radio :label="scope.row.prop1" v-model="radio" @change.native="getCurrentRow(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column align="center" width="55">
|
||||
<template slot-scope="scope">
|
||||
<el-radio v-model="templateSelection" :label="scope.row.prop1"> </el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="prop1" label="工具编号"></el-table-column>
|
||||
<el-table-column prop="prop2" label="工具名称"></el-table-column>
|
||||
<el-table-column prop="prop5" label="工具类别" ></el-table-column>
|
||||
<el-table-column prop="prop3" label="归属单位" width="180"> </el-table-column>
|
||||
<el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
|
||||
</el-table><!--el-table-->
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="chooseToolConfirm()">确 定</el-button>
|
||||
<el-button @click="cancel()">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog><!--el-drawer 流程监控-抽屉-->
|
||||
</div><!--el-form-border 表单-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDocument, updateDocument } from "@/api/document/document";
|
||||
import axios from 'axios';
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
name: 'editDocument',
|
||||
props: {
|
||||
tooId: {
|
||||
type: String,
|
||||
default: "",
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
templateSelection: '',
|
||||
drawer1: false,
|
||||
checkList: [],
|
||||
tableData2: [
|
||||
{
|
||||
prop1: 'GDL-987',
|
||||
prop2: 'GDL工具',
|
||||
prop3: '检测型 ',
|
||||
prop4: '研发部门',
|
||||
prop5: '韩健'
|
||||
},
|
||||
{
|
||||
prop1: 'GDL-988',
|
||||
prop2: 'GDL工具',
|
||||
prop3: '检测型 ',
|
||||
prop4: '研发部门',
|
||||
prop5: '韩健'
|
||||
}
|
||||
],
|
||||
// 表单参数
|
||||
form: {
|
||||
docName: '',
|
||||
docType: '',
|
||||
docPrincipals: '',
|
||||
docRespDept: '',
|
||||
docSource: '',
|
||||
toolId: ''
|
||||
},
|
||||
fileList: [],
|
||||
progress: 0,
|
||||
// 表单校验
|
||||
rules: {
|
||||
docType: [
|
||||
{ required: true, message: "类别不能为空", trigger: "blur" }
|
||||
],
|
||||
docSource: [
|
||||
{ required: true, message: "文档来源不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
},
|
||||
mounted(){
|
||||
/* this.$nextTick(() => {
|
||||
document.querySelector('.el-upload__input').webkitdirectory = true
|
||||
})*/
|
||||
},
|
||||
methods:{
|
||||
chooseToolConfirm(){
|
||||
this.form.toolId = this.templateSelection
|
||||
},
|
||||
singleElection(row) {
|
||||
this.templateSelection = row.prop1
|
||||
this.checkList = this.tableData2.filter((item) => item.prop1 === row.prop1)
|
||||
console.log(`该行的编号为${row.prop1}`)
|
||||
},
|
||||
getCurrentRow(row){
|
||||
// 获取选中数据 row表示选中这一行的数据，可以从里面提取所需要的值
|
||||
},
|
||||
showOpenHandle(){
|
||||
this.reset();
|
||||
this.title = "上传文档";
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
docName: '',
|
||||
docType: '',
|
||||
docPrincipals: '',
|
||||
docRespDept: '',
|
||||
docSource: '',
|
||||
toolId: ''
|
||||
};
|
||||
this.fileList = []
|
||||
this.resetForm("form");
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
onChange(file, fileList) {
|
||||
// valid the suffix of file
|
||||
/*let validSuffix = ['pdf', 'docx', 'doc', 'txt', 'eml', 'mp4']
|
||||
let splits = file.name.split('.')
|
||||
let suffix = splits[splits.length - 1]
|
||||
if (!validSuffix.includes(suffix)) {
|
||||
this.$message.error(`只能上传 ${validSuffix.join(',')} 类型的文件！`)
|
||||
this.fileList = fileList.filter(item => item.uid !== file.uid)
|
||||
return
|
||||
}*/
|
||||
this.fileList = fileList
|
||||
},
|
||||
onRemove(file, fileList) {
|
||||
this.fileList = fileList.filter(item => item.uid !== file.uid)
|
||||
},
|
||||
generateUniqueID() {
|
||||
// 使用时间戳来生成唯一ID
|
||||
const timestamp = new Date().getTime();
|
||||
// 在ID前面添加一个前缀，以防止与其他ID冲突
|
||||
const uniqueID = 'file_' + timestamp;
|
||||
return uniqueID;
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
//判断是否有文件再上传
|
||||
if (this.fileList.length === 0) {
|
||||
return this.$message.warning('请选取文件后再上传')
|
||||
}
|
||||
this.fileList.map(file =>{
|
||||
this.form.docName = file.name
|
||||
})
|
||||
this.form.toolId = this.toolId
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != undefined) {
|
||||
updateDocument(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.$emit("submit");
|
||||
});
|
||||
} else {
|
||||
addDocument(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.confirmSubmit(response.data);
|
||||
this.$emit("submit");
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
testUpdate(docId){
|
||||
// 创建 formData 对象
|
||||
const formData = new FormData()
|
||||
// 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
|
||||
this.fileList.forEach((file) => {
|
||||
formData.append('folder', file.raw)
|
||||
})
|
||||
formData.append('docId', '')
|
||||
formData.append('requestId', this.generateUniqueID())
|
||||
axios.post(process.env.VUE_APP_BASE_API + '/document/upload/folder', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
}
|
||||
}).then((response) => {
|
||||
if(response.data.code===200){
|
||||
this.$emit("submit");
|
||||
}else{
|
||||
// 弹框报错 response.data.message
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error('Failed to upload file:', error);
|
||||
});
|
||||
},
|
||||
confirmSubmit(docId) {
|
||||
// 创建 formData 对象
|
||||
const formData = new FormData()
|
||||
// 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
|
||||
this.fileList.forEach((file) => {
|
||||
formData.append('files', file.raw)
|
||||
})
|
||||
formData.append('docId', docId)
|
||||
formData.append('requestId', this.generateUniqueID())
|
||||
//自定义的接口也可以用ajax或者自己封装的接口
|
||||
axios.post(process.env.VUE_APP_BASE_API + '/document/upload', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
}
|
||||
}).then((response) => {
|
||||
if(response.data.code===200){
|
||||
this.$emit("submit");
|
||||
}else{
|
||||
// 弹框报错 response.data.message
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error('Failed to upload file:', error);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user