<template>
|
<div class="updateUser">
|
<main>
|
<div class="mainContent">
|
<el-form
|
label-position="right"
|
label-width="150px"
|
:model="imagedata"
|
:rules="rules"
|
:disabled="isDisabled"
|
ref="user"
|
style="width: 100%"
|
>
|
<!-- <el-form-item prop="belongToId" label="所属事件编号" v-if="true">
|
<el-input v-model="imagedata.code"></el-input>
|
</el-form-item>
|
<el-form-item prop="eventSource" label="事件来源">
|
<el-input
|
v-model="getEventSource(imagedata.eventSource).label"
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="category" label="问题类别">
|
<el-input
|
v-model="getCategory(imagedata.category).label"
|
></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="type" label="类型" v-show="false">
|
<el-select v-model="imagedata.type">
|
<el-option
|
v-for="item in getResourceType()"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item prop="url" label="图片:" min-width="8">
|
<my-upload
|
:picture-list="imageList"
|
:is-show-upload="dialogType !== 'view'"
|
@setPictureUrl="setPictureUrl"
|
@delPictureUrl="delPictureUrl"
|
></my-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,
|
RESOURCE_TYPE,
|
CATEGOTY,
|
EVENT_SOURCE,
|
} from "@/utils/helper";
|
import imageManagement from "@/api/operate/imageManagement";
|
import { FILE_ORIGINAL_URL } from "@/utils";
|
import MyUpload from "@/components/myUpload";
|
|
export default {
|
components: { MyUpload },
|
data() {
|
const validateImageUrl = (rule, value, callback) => {
|
if (this.imagedata.url) {
|
callback();
|
} else {
|
callback(new Error("请上传图片"));
|
}
|
};
|
return {
|
imagedata: {
|
belongToId: "",
|
eventSource: 1,
|
regionName: "",
|
category: 1,
|
id: "",
|
url: "",
|
type: "",
|
},
|
rules: {
|
// belongToId: [
|
// { required: true, trigger: "blur", message: "请输入所属事件编号" },
|
// ],
|
// eventSource: [
|
// { required: true, trigger: "blur", message: "请输入事件来源" },
|
// ],
|
// regionName: [
|
// { required: true, trigger: "blur", message: "请输入社区名称" },
|
// ],
|
// id: [{ required: true, trigger: "blur", message: "请输入图片Id" }],
|
// category: [
|
// { required: true, trigger: "blue", message: "请输入问题类型" },
|
// ],
|
url: [{ required: true, validator: validateImageUrl }],
|
// type: [
|
// {
|
// required: true,
|
// trigger: ["blur", "change"],
|
// message: "请选择类型",
|
// },
|
// ],
|
},
|
isDisabled: false,
|
imageList: [],
|
};
|
},
|
|
created() {
|
if (this.originalData) {
|
this.imagedata = deepClone(this.originalData);
|
}
|
if (this.dialogType !== "create") {
|
this.imageList = this.imagedata.url.split(",");
|
}
|
this.isDisabled = this.dialogType === "view";
|
},
|
methods: {
|
onSubmit() {
|
this.$refs.user.validate((valid) => {
|
if (valid) {
|
this.imagedata.type="03";
|
const params = Object.assign({}, this.imagedata);
|
delete params.regionName;
|
delete params.category;
|
delete params.eventSource;
|
delete params.id;
|
params.belongToId = +params.belongToId;
|
if (this.dialogType === "create") {
|
imageManagement
|
.addImageResource(params)
|
.then(() => {
|
this.$message.success("操作成功");
|
this.$emit("closeDialog");
|
})
|
.catch((err) => this.$message.error(`${err}`));
|
} else {
|
imageManagement
|
.updateImageResource(params)
|
.then(() => {
|
this.$message.success("操作成功");
|
this.$emit("closeDialog");
|
})
|
.catch((err) => this.$message.error(`${err}`));
|
}
|
} else {
|
this.$message.warning("请检查必填项");
|
}
|
});
|
},
|
setPictureUrl({ url }) {
|
this.imageList.push(`${FILE_ORIGINAL_URL}${url}`);
|
this.imagedata.url = this.imageList.join(",");
|
},
|
delPictureUrl({ url }) {
|
this.imageList = this.imageList.filter((item) => item !== url);
|
this.imagedata.url = this.imageList.join(",");
|
},
|
getCategory(value) {
|
return CATEGOTY.find((item) => item.value === value);
|
},
|
|
getEventSource(value) {
|
return EVENT_SOURCE.find((item) => item.value === value);
|
},
|
getResourceType(value) {
|
return value
|
? RESOURCE_TYPE.find((item) => item.value === value)
|
: RESOURCE_TYPE;
|
},
|
},
|
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;
|
|
.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,
|
.el-select {
|
width: 280px !important;
|
}
|
</style>
|
