<template>
|
<div class="updateUser">
|
<main>
|
<div class="mainContent">
|
<el-form :disabled="isDisabled" ref="user" style="width: 100%;">
|
<el-form-item prop="baseId" label="所属事件编号">
|
<el-input v-model="imagedata.baseId"></el-input>
|
</el-form-item>
|
<el-form-item prop="eventSource" label="大类名称">
|
<el-input v-model="imagedata.eventSource"></el-input>
|
</el-form-item>
|
<el-form-item prop="regionName" label="小类名称">
|
<el-input v-model="imagedata.regionName"></el-input>
|
</el-form-item>
|
<el-form-item prop="id" label="图片Id">
|
<el-input v-model="imagedata.id"></el-input>
|
</el-form-item>
|
<el-form-item prop="createTime" label="上传时间">
|
<el-input v-model="imagedata.createTime"></el-input>
|
</el-form-item>
|
<el-form-item prop="eventSource" label="图片:" min-width="8">
|
<!-- <img style="width: 180px;height: 120px;" :src=imagedata.url>-->
|
<el-upload
|
action=""
|
:show-file-list="false"
|
:on-success="handleImageSuccess"
|
:before-upload="beforeImageUpload">
|
<img v-if="imagedata.url" :src="imagedata.url" class="avatar">
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</el-form-item>
|
<div v-if="!isDisabled" class="optionBtn">
|
<el-button type="primary" class="btn submit" @click.native.prevent="onSubmit">提交</el-button>
|
</div>
|
</el-form>
|
</div>
|
</main>
|
</div>
|
</template>
|
<script>
|
import { deepClone } from "@/utils/helper";
|
import imageManagement from "@/api/operate/imageManagement";
|
|
export default {
|
data() {
|
return {
|
imagedata: {
|
code: '',
|
eventSource: '',
|
regionName: '',
|
smallType: '',
|
id: '',
|
createTime: '',
|
url: ''
|
},
|
isDisabled: false
|
}
|
},
|
created() {
|
this.imagedata = deepClone(this.originalData);
|
this.isDisabled = this.dialogType === 'view';
|
},
|
methods: {
|
onSubmit() {
|
this.$refs.user.validate(valid => {
|
if (valid) {
|
if (this.dialogType === 'create') {
|
imageManagement.addImageResource(this.imagedata)
|
.then(() => {
|
this.$message.success('操作成功');
|
this.$emit('closeDialog');
|
})
|
.catch(err => this.$message.error(`${err}`))
|
} else {
|
imageManagement.updateImageResource(this.imagedata)
|
.then(() => {
|
this.$message.success('操作成功');
|
this.$emit('closeDialog');
|
})
|
.catch(err => this.$message.error(`${err}`))
|
}
|
} else {
|
this.$message.warning('请检查必填项');
|
}
|
})
|
},
|
handleImageSuccess() {},
|
beforeImageUpload(file) {
|
imageManagement.importImage(file)
|
.then(res => {
|
})
|
.catch(err => this.$message.error(`${err}`))
|
}
|
},
|
props: {
|
originalData: {
|
type: Object,
|
default: () => null
|
},
|
dialogType: {
|
type: String,
|
default: () => 'create'
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.updateUser {
|
border-radius: 1px;
|
background-color: #09152f;
|
|
main {
|
// border: 1px solid #fff;
|
text-align: left;
|
padding: 0 55px;
|
background-color: #09152f;
|
padding-bottom: 50px;
|
|
// .mainTitle {
|
// color: #4b9bb7;
|
// font-weight: 600;
|
// line-height: 100px;
|
// font-size: 14px;
|
// }
|
|
.mainContent {
|
display: flex;
|
justify-content: center;
|
padding-top: 50px;
|
|
.el-form-item__content {
|
width: 400px;
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
|
.optionHandleSp {
|
display: flex;
|
|
.areaNumber,
|
.moreNumber {
|
flex: 1;
|
}
|
|
.telNumber {
|
flex: 2;
|
}
|
}
|
|
.optionBtn {
|
display: flex;
|
margin-top: 20px;
|
justify-content: center;
|
|
.btn {
|
padding: 12px 50px;
|
}
|
}
|
}
|
}
|
}
|
|
.updateUser::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
|
.updateUser::v-deep .el-input__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
|
.addPerson {
|
display: flex;
|
list-style: none;
|
padding: 0;
|
flex-wrap: wrap;
|
max-width: 280px;
|
|
li {
|
color: #fff;
|
text-align: center;
|
font-size: 30px;
|
margin-left: 10px;
|
}
|
}
|
|
.li-icon {
|
background-color: #cccccc;
|
width: 36px;
|
height: 36px;
|
border-radius: 50%;
|
margin: 0 auto;
|
}
|
|
.li-btn {
|
background-color: #cccccc;
|
width: 36px;
|
height: 36px;
|
border-radius: 50%;
|
}
|
|
.card {
|
position: absolute;
|
z-index: 2000;
|
right: 0;
|
|
.box-card {
|
min-height: 240px;
|
max-height: 260px;
|
overflow: hidden;
|
background-color: #09152f;
|
position: relative;
|
max-width: 220px;
|
|
.scrollWrap {
|
overflow: scroll;
|
height: 180px;
|
position: relative;
|
color: #4b9bb7;
|
|
.el-checkbox-group {
|
display: flex;
|
flex-direction: column;
|
|
.el-checkbox {
|
line-height: 20px;
|
}
|
}
|
}
|
|
.myclear {
|
width: 100%;
|
line-height: 20px;
|
color: #4b9bb7;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.hidebar {
|
position: absolute;
|
top: 77px;
|
right: 20px;
|
width: 20px;
|
height: 180px;
|
background-color: #09152f;
|
}
|
|
.item {
|
line-height: 40px;
|
}
|
}
|
}
|
|
.leader {
|
color: red;
|
}
|
|
.el-input {
|
width: 280px !important;
|
}
|
</style>
|
