新建项目页面

This commit is contained in:
cwchen 2025-11-05 11:22:39 +08:00
parent 5927f460d9
commit 74e46fe54b
4 changed files with 154 additions and 127 deletions

View File

@ -5,152 +5,167 @@
<div> <div>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px"> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
<el-form-item label="选择模板" prop="templateId"> <el-form-item label="选择模板" prop="templateId">
<el-select v-model="form.templateId" placeholder="请选择模板" class="form-item"> <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> @change="handleTemplateChange">
<el-option v-for="item in modelList" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="文件上传" prop="fileList">
<UploadMoreFile :fileList="form.fileList" @file-change="handleFileChange" @del-file="handleDelFile" <el-form-item v-for="(item, index) in uploadType" :key="index" :label="item"
type="analysis_database" :uploadType="uploadType" :maxFileTips="maxFileTips" :disabled="disabled" :prop="`fileList${index + 1}`">
:fileUploadRule="fileUploadRule" :limitUploadNum="limitUploadNum" /> <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-item>
</el-form> </el-form>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" class="confirm-btn" <el-button type="primary" class="confirm-btn" @click="submitForm('ruleForm')">确认</el-button>
@click="submitForm('ruleForm')">确认</el-button>
<el-button class="cancel-btn" @click="handleClose">取消</el-button> <el-button class="cancel-btn" @click="handleClose">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import UploadMoreFile from '@/views/common/UploadMoreFile.vue'; import UploadMoreFile from '@/views/common/UploadMoreFile.vue'
// //
const defaultParams = { const defaultParams = {
fileUploadRule: { fileUploadRule: {
fileUploadType: 'analysis_database', fileUploadType: 'bidding',
fields_json: '', fields_json: '',
suffix: 'analysis_database' suffix: 'analysis_database',
}, },
uploadType: 'pdf、doc、docx', uploadType: 'pdf、doc、docx',
maxFileTips: '500MB', maxFileTips: '500MB',
limitUploadNum: 5, limitUploadNum: 1,
disabled: false, }
};
export default { export default {
name: "AnalysisForm", name: 'AnalysisForm',
components: { components: {
UploadMoreFile, UploadMoreFile,
}, },
props: ["width", "rowData", "title", "isAdd"], props: ['width', 'rowData', 'title'],
data() { data() {
return { return {
lDialog: this.width > 500 ? "w700" : "w500", lDialog: this.width > 500 ? 'w700' : 'w500',
dialogVisible: true, dialogVisible: true,
defaultParams, defaultParams,
modelList:[ uploadType: [],
{id:1,name:'南网工程类模板'}, modelList: [
{id:2,name:'南网服务类模板'}, {
id: 1,
name: '南网工程类模板',
uploadType: '招标文件,招标公告',
},
{
id: 2,
name: '南网服务类模板',
uploadType: '评标文件',
},
], ],
form: { form: {
id: null,
templateId: null, templateId: null,
delFileList: [],
}, },
rules: { rules: {
templateId: [ templateId: [
{ required: true, message: '请选择模板', trigger: 'change' } {
required: true,
message: '请选择模板',
trigger: 'change',
},
], ],
}, },
}; }
}, },
watch: { watch: {
isAdd: { uploadType: {
handler(newVal) { handler(newVal, oldVal) {
if (newVal === 'edit' || newVal === 'detail') { if (newVal && newVal.length > 0) {
this.initFormData(); //
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, immediate: true,
}, },
}, },
methods: {
/** 初始化表单数据 */
async initFormData() {
if (!this.rowData) return;
const files = await this.getDetail();
//
this.form = {
toolId: this.rowData.toolId,
}; methods: {
}, /* 模板变化选择对应的需要上传的文件 */
async getDetail() { handleTemplateChange(val) {
try { const uploadType = this.modelList.find(
const res = await getDetailDataAPI({ toolId: this.rowData.toolId, enterpriseId: this.rowData.enterpriseId }); (item) => item.id === val,
if (res && res.code === 200) { ).uploadType
return this.getFileList(res.data); this.uploadType = uploadType.split(',')
}
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
};
});
}, },
// //
handleFileChange(file) { handleFileChange(file, fileName) {
console.log(file); console.log(file)
this.form.fileList = file; this.form[fileName] = file
this.$refs.ruleForm && this.$refs.ruleForm.clearValidate([fileName])
}, },
// //
handleDelFile(file) { handleDelFile(file) {
console.log(file); console.log(file)
const delPath = file?.response?.fileRes?.filePath || file?.filePath || null; const delPath =
file?.response?.fileRes?.filePath || file?.filePath || null
if (delPath) { if (delPath) {
this.form.delFileList.push(delPath); this.form.delFileList.push(delPath)
} }
}, },
/*关闭弹窗 */ /*关闭弹窗 */
handleClose() { handleClose() {
this.dialogVisible = false; this.dialogVisible = false
this.$emit("closeDialog"); this.$emit('closeDialog')
}, },
/**确认弹窗 */ /**确认弹窗 */
sureBtnClick() { sureBtnClick() {
this.dialogVisible = false; this.dialogVisible = false
this.$emit("closeDialog"); this.$emit('closeDialog')
}, },
/**重置表单*/ /**重置表单*/
reset() { reset() {
this.form = { this.form = {
id: null, id: null,
pid: null, pid: null,
dataTypeName: '', templateId: null,
fileList: [],
delFileList: [],
remark: '', remark: '',
}; }
this.resetForm("ruleForm"); this.resetForm('ruleForm')
}, },
handleReuslt(res) { handleReuslt(res) {
this.$modal.msgSuccess(res.msg); this.$modal.msgSuccess(res.msg)
this.reset(); this.reset()
this.$emit('handleQuery'); this.$emit('handleQuery')
this.handleClose(); this.handleClose()
}, },
validate(formName) { validate(formName) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -166,69 +181,80 @@ export default {
/**验证 */ /**验证 */
async submitForm(formName) { async submitForm(formName) {
try { try {
const data = await this.validate(formName); const data = await this.validate(formName)
// //
let formData = { let formData = {
...data, ...data,
allFiles: [ allFiles: [
...data.fileList.map(file => JSON.parse(JSON.stringify(file))), ...data.fileList.map((file) =>
JSON.parse(JSON.stringify(file)),
),
], ],
delFiles: [ delFiles: [...data.delFileList],
...data.delFileList
]
} }
let allFiles = formData.allFiles.map(file => { let allFiles = formData.allFiles
return file?.response?.fileRes ? { .map((file) => {
...file.response.fileRes, return file?.response?.fileRes
} : null; ? {
}).filter(item => item !== null); ...file.response.fileRes,
formData.files = allFiles; }
delete formData.fileList; : null
delete formData.delFileList; })
delete formData.allFiles; .filter((item) => item !== null)
formData.files = allFiles
delete formData.fileList
delete formData.delFileList
delete formData.allFiles
// //
this.loading = this.$loading({ this.loading = this.$loading({
lock: true, lock: true,
text: "数据提交中,请稍候...", text: '数据提交中,请稍候...',
background: 'rgba(0,0,0,0.5)', 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) console.log('所有表单校验通过,完整数据:', formData)
const res = await this.saveData(formData) /* const res = await this.saveData(formData)
if (res.code === 200) { if (res.code === 200) {
this.handleReuslt(res); this.handleReuslt(res)
} else { } else {
this.$modal.msgError(res.msg); this.$modal.msgError(res.msg)
} } */
} catch (error) { } catch (error) {
} finally { } finally {
this.loading.close(); if (this.loading) {
this.loading.close()
}
} }
}, },
// //
async saveData(formData) { async saveData(formData) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (this.isAdd === 'add') { // if (this.isAdd === 'add') {
addDataAPI(formData).then(res => { //
resolve(res) addDataAPI(formData)
}).catch(error => { .then((res) => {
reject(error) resolve(res)
}) })
} else { // .catch((error) => {
editDataAPI(formData).then(res => { reject(error)
resolve(res) })
}).catch(error => { } else {
reject(error) //
}) editDataAPI(formData)
.then((res) => {
resolve(res)
})
.catch((error) => {
reject(error)
})
} }
}) })
}, },
} },
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.w700 ::v-deep .el-dialog { .w700 ::v-deep .el-dialog {
@ -268,7 +294,7 @@ export default {
.confirm-btn { .confirm-btn {
width: 98px; width: 98px;
height: 36px; height: 36px;
background: #1F72EA; background: #1f72ea;
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5); box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
color: #fff; color: #fff;
@ -277,7 +303,7 @@ export default {
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
background: #4A8BFF; background: #4a8bff;
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6); box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
} }
} }
@ -285,7 +311,7 @@ export default {
.cancel-btn { .cancel-btn {
width: 98px; width: 98px;
height: 36px; height: 36px;
background: #E5E5E5; background: #e5e5e5;
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2); box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
color: #333; color: #333;

View File

@ -35,7 +35,7 @@
@download-success="onDownloadSuccess" /> @download-success="onDownloadSuccess" />
</el-dialog> </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"/> @closeDialog="showAnalysisForm = false" :width="600"/>
</el-card> </el-card>
</template> </template>
@ -63,7 +63,6 @@ export default {
documentName: 'technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx', documentName: 'technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx',
showAnalysisForm: false, showAnalysisForm: false,
title: '', title: '',
isAdd: '',
row: {}, row: {},
} }
}, },
@ -85,7 +84,6 @@ export default {
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.title = "新建项目"; this.title = "新建项目";
this.isAdd = 'add';
this.showAnalysisForm = true; this.showAnalysisForm = true;
}, },

View File

@ -10,7 +10,7 @@
<div class="upload-text"> <div class="upload-text">
<div class="main-text"> + 点击或将文件拖拽到这里上传</div> <div class="main-text"> + 点击或将文件拖拽到这里上传</div>
<div class="tip-text"> <div class="tip-text">
<div>最多可上传 {{ limitUploadNum }} 个文件</div> <div v-if="limitUploadNum > 1">最多可上传 {{ limitUploadNum }} 个文件</div>
<div>单份文件大小上限 {{ maxFileTips }}</div> <div>单份文件大小上限 {{ maxFileTips }}</div>
<div>支持文件类型{{ uploadType }}</div> <div>支持文件类型{{ uploadType }}</div>
</div> </div>
@ -111,6 +111,7 @@ export default {
watch: { watch: {
fileList: { fileList: {
handler(newVal) { handler(newVal) {
if (this.files.length === 0 && newVal.length > 0) { if (this.files.length === 0 && newVal.length > 0) {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.upload) { if (this.$refs.upload) {
@ -141,7 +142,7 @@ export default {
return false return false
} }
if (this.files.length >= this.limitUploadNum) { if (this.files.length > this.limitUploadNum) {
this.$message.error(`最多只能上传 ${this.limitUploadNum} 个文件!`) this.$message.error(`最多只能上传 ${this.limitUploadNum} 个文件!`)
return false return false
} }

View File

@ -257,7 +257,9 @@ export default {
} catch (error) { } catch (error) {
} finally { } finally {
this.loading.close(); if(this.loading){
this.loading.close()
}
} }
}, },