This commit is contained in:
glj 2023-11-17 17:18:05 +08:00
commit 2b8e2cf703
3 changed files with 97 additions and 11 deletions

14
src/api/file/file.js Normal file
View File

@ -0,0 +1,14 @@
import request from '/@/utils/request';
const moduleName = 'biz-vordm'
export const uploadFile = (row) => {
return request({
url: '/api/' + moduleName + '/ui/upload/uploadFile',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data: row,
})
}

View File

@ -3,12 +3,12 @@
<el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
<el-form-item prop="title" label="name">
<el-select v-model="state.ruleForm.title" class="m-2" placeholder="please enter name">
<el-option label="GDACS" value="GDACS"></el-option>
<el-option label="Charter" value="Charter"></el-option>
<el-option v-for="(item,index) in state.disasterReductionPartnersList" :key="index" :label="item.dictKey" :value="item.dictKey"></el-option>
<!-- <el-option label="Charter" value="Charter"></el-option>
<el-option label="USGS" value="USGS"></el-option>
<el-option label="INGV" value="INGV"></el-option>
<el-option label="UNITAR" value="UNITAR"></el-option>
<el-option label="Copernicus" value="Copernicus"></el-option>
<el-option label="Copernicus" value="Copernicus"></el-option> -->
</el-select>
</el-form-item>
<el-form-item prop="link" label="link">
@ -33,6 +33,9 @@
import { reactive, ref } from "vue";
import { saveWebsites } from '/@/api/websites/websites.js';
import { ElMessage } from "element-plus";
import { getDictionary } from '/@/api/system/dictbiz';
const upFileRef = ref();
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
@ -42,6 +45,7 @@ const state = reactive({
ruleForm: {
title: null,
},
disasterReductionPartnersList:[]
})
//
@ -66,6 +70,7 @@ const resetField = () => {
//
const openDialog = (row) => {
initDic()
state.isShowDialog = true;
state.ruleForm.disasterId = row;
};
@ -93,7 +98,12 @@ const onSubmit = () => {
}
})
};
const initDic = ()=>{
getDictionary({ code: 'DisasterReductionPartners' }).then((res) => {
state.disasterReductionPartnersList = res;
console.log(state.disasterReductionPartnersList)
});
}
//
defineExpose({

View File

@ -1,6 +1,6 @@
<template>
<div class="system-dic-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" destroy-on-close>
<!-- <el-alert title="半成品,交互过于复杂,请自行扩展!"
type="warning"
:closable="false"
@ -24,8 +24,8 @@
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-row :gutter="35" v-for="(v, k) in state.ruleForm.children" :key="k">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item :prop="`list[${k}].label`" label-width="240">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item :prop="`list[${k}].label`" label-width="205">
<template #label>
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === state.ruleForm.children.length-1">
<el-icon>
@ -37,12 +37,30 @@
<ele-Delete />
</el-icon>
</el-button>
<span class="ml10">Dictionary Name</span>
<span class="ml10" v-if="state.ruleForm.dictKey == 'DisasterReductionPartners'">Partners Name</span>
<span class="ml10" v-else>Dictionary Name</span>
</template>
<el-input v-model="v.dictValue" style="width: 100%" placeholder="Please enter a Dictionary Name"> </el-input>
<el-input v-if="state.ruleForm.dictKey == 'DisasterReductionPartners'" v-model="v.dictKey" style="width: 100%" placeholder="Please enter a Dictionary Name"> </el-input>
<el-input v-else v-model="v.dictValue" style="width: 100%" placeholder="Please enter a Disaster Reduction Partners Name"> </el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="state.ruleForm.dictKey == 'DisasterReductionPartners'">
<el-form-item label="Partners Logo" :prop="`list[${k}].value`" label-width="100">
<el-upload
class="avatar-uploader"
:show-file-list="false"
:auto-upload="true"
:http-request="upLoadImg"
:data="v"
accept="image/*"
>
<img v-if="v.dictValue" :src="v.dictValue" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
<el-input type="hidden" v-model="v.dictValue" style="width: 100%" placeholder="Please enter a Dictionary Value"> </el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-else>
<el-form-item label="Dictionary Value" :prop="`list[${k}].value`" label-width="180">
<el-input v-model="v.dictKey" style="width: 100%" placeholder="Please enter a Dictionary Value"> </el-input>
</el-form-item>
@ -70,7 +88,8 @@
import { RowAlign } from 'element-plus';
import { reactive, ref } from 'vue';
import { update } from '/@/api/system/dictbiz';
import { Plus } from '@element-plus/icons-vue'
import { uploadFile } from '/@/api/file/file'
// /
const emit = defineEmits(['refresh']);
@ -93,6 +112,14 @@ const state = reactive({
});
const upLoadImg = (d)=>{
uploadFile({file:d.file}).then(res =>{
d.data.dictValue = res.link
})
//d.data.dictValue = 44563
}
//
const openDialog = (type, row) => {
@ -108,6 +135,13 @@ const openDialog = (type, row) => {
} else {
state.dialog.title = 'Add';
state.dialog.submitTxt = 'Add';
state.ruleForm = {
dictValue: '', //
dictKey: '', //
children: [], // +
remark: '', //
status: false, //
}
if (!state.ruleForm.children || state.ruleForm.children.length === 0) {
state.ruleForm.children=[{ dictValue: '', dictKey: '' }];
}
@ -160,3 +194,31 @@ defineExpose({
openDialog,
});
</script>
<style scoped>
:deep(.avatar-uploader .avatar) {
width: 178px;
height: 178px;
display: block;
}
:deep(.avatar-uploader .el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
:deep(.avatar-uploader .el-upload:hover) {
border-color: var(--el-color-primary);
}
:deep(.el-icon.avatar-uploader-icon) {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
</style>