新建项目页面
This commit is contained in:
parent
5927f460d9
commit
74e46fe54b
|
|
@ -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) => {
|
||||||
|
return file?.response?.fileRes
|
||||||
|
? {
|
||||||
...file.response.fileRes,
|
...file.response.fileRes,
|
||||||
} : null;
|
}
|
||||||
}).filter(item => item !== null);
|
: null
|
||||||
formData.files = allFiles;
|
})
|
||||||
delete formData.fileList;
|
.filter((item) => item !== null)
|
||||||
delete formData.delFileList;
|
formData.files = allFiles
|
||||||
delete formData.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 => {
|
// 新增
|
||||||
|
addDataAPI(formData)
|
||||||
|
.then((res) => {
|
||||||
resolve(res)
|
resolve(res)
|
||||||
}).catch(error => {
|
})
|
||||||
|
.catch((error) => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
} else { // 修改
|
} else {
|
||||||
editDataAPI(formData).then(res => {
|
// 修改
|
||||||
|
editDataAPI(formData)
|
||||||
|
.then((res) => {
|
||||||
resolve(res)
|
resolve(res)
|
||||||
}).catch(error => {
|
})
|
||||||
|
.catch((error) => {
|
||||||
reject(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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -257,7 +257,9 @@ export default {
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
||||||
} finally {
|
} finally {
|
||||||
this.loading.close();
|
if(this.loading){
|
||||||
|
this.loading.close()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue