新建项目页面
This commit is contained in:
parent
5927f460d9
commit
74e46fe54b
|
|
@ -5,152 +5,167 @@
|
|||
<div>
|
||||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
|
||||
<el-form-item label="选择模板" prop="templateId">
|
||||
<el-select v-model="form.templateId" placeholder="请选择模板" class="form-item">
|
||||
<el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
<el-select v-model="form.templateId" placeholder="请选择模板" class="form-item"
|
||||
@change="handleTemplateChange">
|
||||
<el-option v-for="item in modelList" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传" prop="fileList">
|
||||
<UploadMoreFile :fileList="form.fileList" @file-change="handleFileChange" @del-file="handleDelFile"
|
||||
type="analysis_database" :uploadType="uploadType" :maxFileTips="maxFileTips" :disabled="disabled"
|
||||
:fileUploadRule="fileUploadRule" :limitUploadNum="limitUploadNum" />
|
||||
|
||||
<el-form-item v-for="(item, index) in uploadType" :key="index" :label="item"
|
||||
:prop="`fileList${index + 1}`">
|
||||
<UploadMoreFile :fileList="form[`fileList${index + 1}`]" @file-change="handleFileChange"
|
||||
@del-file="handleDelFile" :type="`fileList${index + 1}`" :uploadType="defaultParams.uploadType"
|
||||
:maxFileTips="defaultParams.maxFileTips" :fileUploadRule="defaultParams.fileUploadRule"
|
||||
:limitUploadNum="defaultParams.limitUploadNum" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" class="confirm-btn"
|
||||
@click="submitForm('ruleForm')">确认</el-button>
|
||||
<el-button type="primary" class="confirm-btn" @click="submitForm('ruleForm')">确认</el-button>
|
||||
<el-button class="cancel-btn" @click="handleClose">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import UploadMoreFile from '@/views/common/UploadMoreFile.vue';
|
||||
import UploadMoreFile from '@/views/common/UploadMoreFile.vue'
|
||||
// 默认参数
|
||||
const defaultParams = {
|
||||
fileUploadRule: {
|
||||
fileUploadType: 'analysis_database',
|
||||
fileUploadType: 'bidding',
|
||||
fields_json: '',
|
||||
suffix: 'analysis_database'
|
||||
suffix: 'analysis_database',
|
||||
},
|
||||
uploadType: 'pdf、doc、docx',
|
||||
maxFileTips: '500MB',
|
||||
limitUploadNum: 5,
|
||||
disabled: false,
|
||||
};
|
||||
limitUploadNum: 1,
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "AnalysisForm",
|
||||
name: 'AnalysisForm',
|
||||
components: {
|
||||
UploadMoreFile,
|
||||
},
|
||||
props: ["width", "rowData", "title", "isAdd"],
|
||||
props: ['width', 'rowData', 'title'],
|
||||
data() {
|
||||
return {
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
lDialog: this.width > 500 ? 'w700' : 'w500',
|
||||
dialogVisible: true,
|
||||
defaultParams,
|
||||
modelList:[
|
||||
{id:1,name:'南网工程类模板'},
|
||||
{id:2,name:'南网服务类模板'},
|
||||
uploadType: [],
|
||||
modelList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '南网工程类模板',
|
||||
uploadType: '招标文件,招标公告',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '南网服务类模板',
|
||||
uploadType: '评标文件',
|
||||
},
|
||||
],
|
||||
form: {
|
||||
id: null,
|
||||
templateId: null,
|
||||
|
||||
delFileList: [],
|
||||
},
|
||||
rules: {
|
||||
templateId: [
|
||||
{ required: true, message: '请选择模板', trigger: 'change' }
|
||||
],
|
||||
|
||||
{
|
||||
required: true,
|
||||
message: '请选择模板',
|
||||
trigger: 'change',
|
||||
},
|
||||
};
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isAdd: {
|
||||
handler(newVal) {
|
||||
if (newVal === 'edit' || newVal === 'detail') {
|
||||
this.initFormData();
|
||||
uploadType: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal && newVal.length > 0) {
|
||||
// 立即清除验证
|
||||
this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
|
||||
if (oldVal && oldVal.length > 0) {
|
||||
oldVal.forEach((item, index) => {
|
||||
this.$delete(this.form, `fileList${index + 1}`)
|
||||
this.$delete(this.rules, `fileList${index + 1}`)
|
||||
})
|
||||
}
|
||||
|
||||
newVal.forEach((item, index) => {
|
||||
this.$set(this.form, `fileList${index + 1}`, [])
|
||||
this.$set(this.rules, `fileList${index + 1}`, [
|
||||
{
|
||||
required: true,
|
||||
message: `请上传${item}`,
|
||||
trigger: ['change'],
|
||||
},
|
||||
])
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleForm &&
|
||||
this.$refs.ruleForm.clearValidate()
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
async initFormData() {
|
||||
if (!this.rowData) return;
|
||||
const files = await this.getDetail();
|
||||
// 编辑模式：填充表单数据
|
||||
this.form = {
|
||||
toolId: this.rowData.toolId,
|
||||
|
||||
};
|
||||
},
|
||||
async getDetail() {
|
||||
try {
|
||||
const res = await getDetailDataAPI({ toolId: this.rowData.toolId, enterpriseId: this.rowData.enterpriseId });
|
||||
if (res && res.code === 200) {
|
||||
return this.getFileList(res.data);
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
getFileList(detailData){
|
||||
const list = detailData && Array.isArray(detailData.resourceFileVoList)
|
||||
? detailData.resourceFileVoList
|
||||
: [];
|
||||
return list.map(item => {
|
||||
return {
|
||||
name: item.fileName,
|
||||
filePath: item.filePath,
|
||||
lsFilePath: item.lsFilePath,
|
||||
fileType: item.fileType
|
||||
};
|
||||
});
|
||||
methods: {
|
||||
/* 模板变化选择对应的需要上传的文件 */
|
||||
handleTemplateChange(val) {
|
||||
const uploadType = this.modelList.find(
|
||||
(item) => item.id === val,
|
||||
).uploadType
|
||||
this.uploadType = uploadType.split(',')
|
||||
},
|
||||
// 文件变化
|
||||
handleFileChange(file) {
|
||||
console.log(file);
|
||||
this.form.fileList = file;
|
||||
handleFileChange(file, fileName) {
|
||||
console.log(file)
|
||||
this.form[fileName] = file
|
||||
this.$refs.ruleForm && this.$refs.ruleForm.clearValidate([fileName])
|
||||
|
||||
},
|
||||
// 文件删除时触发
|
||||
handleDelFile(file) {
|
||||
console.log(file);
|
||||
const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
|
||||
console.log(file)
|
||||
const delPath =
|
||||
file?.response?.fileRes?.filePath || file?.filePath || null
|
||||
if (delPath) {
|
||||
this.form.delFileList.push(delPath);
|
||||
this.form.delFileList.push(delPath)
|
||||
}
|
||||
},
|
||||
/*关闭弹窗 */
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
this.dialogVisible = false
|
||||
this.$emit('closeDialog')
|
||||
},
|
||||
/**确认弹窗 */
|
||||
sureBtnClick() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
this.dialogVisible = false
|
||||
this.$emit('closeDialog')
|
||||
},
|
||||
/**重置表单*/
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
pid: null,
|
||||
dataTypeName: '',
|
||||
templateId: null,
|
||||
fileList: [],
|
||||
delFileList: [],
|
||||
remark: '',
|
||||
};
|
||||
this.resetForm("ruleForm");
|
||||
}
|
||||
this.resetForm('ruleForm')
|
||||
},
|
||||
handleReuslt(res) {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.reset();
|
||||
this.$emit('handleQuery');
|
||||
this.handleClose();
|
||||
this.$modal.msgSuccess(res.msg)
|
||||
this.reset()
|
||||
this.$emit('handleQuery')
|
||||
this.handleClose()
|
||||
},
|
||||
validate(formName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -166,69 +181,80 @@ export default {
|
|||
/**验证 */
|
||||
async submitForm(formName) {
|
||||
try {
|
||||
const data = await this.validate(formName);
|
||||
const data = await this.validate(formName)
|
||||
// 所有校验通过，组装完整数据
|
||||
let formData = {
|
||||
...data,
|
||||
allFiles: [
|
||||
...data.fileList.map(file => JSON.parse(JSON.stringify(file))),
|
||||
...data.fileList.map((file) =>
|
||||
JSON.parse(JSON.stringify(file)),
|
||||
),
|
||||
],
|
||||
delFiles: [
|
||||
...data.delFileList
|
||||
]
|
||||
delFiles: [...data.delFileList],
|
||||
}
|
||||
|
||||
let allFiles = formData.allFiles.map(file => {
|
||||
return file?.response?.fileRes ? {
|
||||
let allFiles = formData.allFiles
|
||||
.map((file) => {
|
||||
return file?.response?.fileRes
|
||||
? {
|
||||
...file.response.fileRes,
|
||||
} : null;
|
||||
}).filter(item => item !== null);
|
||||
formData.files = allFiles;
|
||||
delete formData.fileList;
|
||||
delete formData.delFileList;
|
||||
delete formData.allFiles;
|
||||
}
|
||||
: null
|
||||
})
|
||||
.filter((item) => item !== null)
|
||||
formData.files = allFiles
|
||||
delete formData.fileList
|
||||
delete formData.delFileList
|
||||
delete formData.allFiles
|
||||
// 显示遮罩层
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: "数据提交中，请稍候...",
|
||||
text: '数据提交中，请稍候...',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
target: this.$el.querySelector('.el-dialog') || document.body
|
||||
target:
|
||||
this.$el.querySelector('.el-dialog') || document.body,
|
||||
})
|
||||
console.log('所有表单校验通过，完整数据:', formData)
|
||||
const res = await this.saveData(formData)
|
||||
/* const res = await this.saveData(formData)
|
||||
if (res.code === 200) {
|
||||
this.handleReuslt(res);
|
||||
this.handleReuslt(res)
|
||||
} else {
|
||||
this.$modal.msgError(res.msg);
|
||||
}
|
||||
this.$modal.msgError(res.msg)
|
||||
} */
|
||||
} catch (error) {
|
||||
|
||||
} finally {
|
||||
this.loading.close();
|
||||
if (this.loading) {
|
||||
this.loading.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 保存接口
|
||||
async saveData(formData) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.isAdd === 'add') { // 新增
|
||||
addDataAPI(formData).then(res => {
|
||||
if (this.isAdd === 'add') {
|
||||
// 新增
|
||||
addDataAPI(formData)
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
} else { // 修改
|
||||
editDataAPI(formData).then(res => {
|
||||
} else {
|
||||
// 修改
|
||||
editDataAPI(formData)
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.w700 ::v-deep .el-dialog {
|
||||
|
|
@ -268,7 +294,7 @@ export default {
|
|||
.confirm-btn {
|
||||
width: 98px;
|
||||
height: 36px;
|
||||
background: #1F72EA;
|
||||
background: #1f72ea;
|
||||
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
color: #fff;
|
||||
|
|
@ -277,7 +303,7 @@ export default {
|
|||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #4A8BFF;
|
||||
background: #4a8bff;
|
||||
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
|
@ -285,7 +311,7 @@ export default {
|
|||
.cancel-btn {
|
||||
width: 98px;
|
||||
height: 36px;
|
||||
background: #E5E5E5;
|
||||
background: #e5e5e5;
|
||||
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
color: #333;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
@download-success="onDownloadSuccess" />
|
||||
</el-dialog>
|
||||
<!-- 新建项目 -->
|
||||
<AnalysisForm v-if="showAnalysisForm" :title="title" :isAdd="isAdd" :row="row"
|
||||
<AnalysisForm v-if="showAnalysisForm" :title="title" :row="row"
|
||||
@closeDialog="showAnalysisForm = false" :width="600"/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
|
@ -63,7 +63,6 @@ export default {
|
|||
documentName: 'technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx',
|
||||
showAnalysisForm: false,
|
||||
title: '',
|
||||
isAdd: '',
|
||||
row: {},
|
||||
}
|
||||
},
|
||||
|
|
@ -85,7 +84,6 @@ export default {
|
|||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.title = "新建项目";
|
||||
this.isAdd = 'add';
|
||||
this.showAnalysisForm = true;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="upload-text">
|
||||
<div class="main-text"> + 点击或将文件拖拽到这里上传</div>
|
||||
<div class="tip-text">
|
||||
<div>最多可上传 {{ limitUploadNum }} 个文件，</div>
|
||||
<div v-if="limitUploadNum > 1">最多可上传 {{ limitUploadNum }} 个文件，</div>
|
||||
<div>单份文件大小上限 {{ maxFileTips }}，</div>
|
||||
<div>支持文件类型：{{ uploadType }}</div>
|
||||
</div>
|
||||
|
|
@ -111,6 +111,7 @@ export default {
|
|||
watch: {
|
||||
fileList: {
|
||||
handler(newVal) {
|
||||
|
||||
if (this.files.length === 0 && newVal.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.upload) {
|
||||
|
|
@ -141,7 +142,7 @@ export default {
|
|||
return false
|
||||
}
|
||||
|
||||
if (this.files.length >= this.limitUploadNum) {
|
||||
if (this.files.length > this.limitUploadNum) {
|
||||
this.$message.error(`最多只能上传 ${this.limitUploadNum} 个文件!`)
|
||||
return false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -257,7 +257,9 @@ export default {
|
|||
} catch (error) {
|
||||
|
||||
} finally {
|
||||
this.loading.close();
|
||||
if(this.loading){
|
||||
this.loading.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue