This commit is contained in:
linfeng 2022-12-19 10:55:47 +08:00
parent 8c3b88e27e
commit f720ccea0f

View File

@ -2,11 +2,18 @@
<el-dialog <el-dialog
:title="!dataForm.id ? '新增' : '修改'" :title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false" :close-on-click-modal="false"
:visible.sync="visible"> :visible.sync="visible"
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> >
<el-form-item label="标题" prop="title"> <el-form
<el-input v-model="dataForm.title" placeholder="标题"></el-input> :model="dataForm"
</el-form-item> :rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="80px"
>
<el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="标题"></el-input>
</el-form-item>
<el-form-item label="图片" prop="coverImage"> <el-form-item label="图片" prop="coverImage">
<el-upload <el-upload
class="avatar-uploader" class="avatar-uploader"
@ -14,11 +21,7 @@
:show-file-list="false" :show-file-list="false"
:on-success="handleIconSuccess" :on-success="handleIconSuccess"
> >
<img <img v-if="dataForm.img" :src="dataForm.img" class="avatar" />
v-if="dataForm.img"
:src="dataForm.img"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon" /> <i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload> </el-upload>
<p class="formInfo">建议尺寸500*250像素jpgpng图片类型</p> <p class="formInfo">建议尺寸500*250像素jpgpng图片类型</p>
@ -32,103 +35,99 @@
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
url: "",
visible: false,
dataForm: {
id: 0,
title: "",
url: "", url: "",
visible: false, img: "",
dataForm: { type: "",
id: 0, createTime: "",
title: '', },
url: '', dataRule: {
img: '', title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
type: '', url: [{ required: true, message: "路径不能为空", trigger: "blur" }],
createTime: '' img: [{ required: true, message: "图片不能为空", trigger: "blur" }],
}, type: [
dataRule: { { required: true, message: "3圈子页轮播图不能为空", trigger: "blur" },
title: [ ],
{ required: true, message: '标题不能为空', trigger: 'blur' } createTime: [
], { required: true, message: "创建时间不能为空", trigger: "blur" },
url: [ ],
{ required: true, message: '路径不能为空', trigger: 'blur' } },
], };
img: [ },
{ required: true, message: '图片不能为空', trigger: 'blur' } methods: {
], init(id) {
type: [ this.dataForm.id = id || 0;
{ required: true, message: '3圈子页轮播图不能为空', trigger: 'blur' } this.url = this.$http.adornUrl(
],
createTime: [
{ required: true, message: '创建时间不能为空', trigger: 'blur' }
]
}
}
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.url = this.$http.adornUrl(
`/sys/oss/upload?token=${this.$cookie.get("token")}` `/sys/oss/upload?token=${this.$cookie.get("token")}`
); );
this.visible = true this.visible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs["dataForm"].resetFields();
if (this.dataForm.id) { if (this.dataForm.id) {
this.$http({ this.$http({
url: this.$http.adornUrl(`/admin/link/info/${this.dataForm.id}`), url: this.$http.adornUrl(`/admin/link/info/${this.dataForm.id}`),
method: 'get', method: "get",
params: this.$http.adornParams() params: this.$http.adornParams(),
}).then(({data}) => { }).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataForm.title = data.link.title this.dataForm.title = data.link.title;
this.dataForm.url = data.link.url this.dataForm.url = data.link.url;
this.dataForm.img = data.link.img this.dataForm.img = data.link.img;
this.dataForm.type = data.link.type this.dataForm.type = data.link.type;
this.dataForm.createTime = data.link.createTime this.dataForm.createTime = data.link.createTime;
} }
}) });
} }
}) });
}, },
// //
dataFormSubmit () { dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => { this.$refs["dataForm"].validate((valid) => {
if (valid) { if (valid) {
this.$http({ this.$http({
url: this.$http.adornUrl(`/admin/link/${!this.dataForm.id ? 'save' : 'update'}`), url: this.$http.adornUrl(
method: 'post', `/admin/link/${!this.dataForm.id ? "save" : "update"}`
data: this.$http.adornData({ ),
'id': this.dataForm.id || undefined, method: "post",
'title': this.dataForm.title, data: this.$http.adornData({
'url': this.dataForm.url, id: this.dataForm.id || undefined,
'img': this.dataForm.img, title: this.dataForm.title,
'type': this.dataForm.type, url: this.dataForm.url,
'createTime': this.dataForm.createTime img: this.dataForm.img,
}) type: this.dataForm.type,
}).then(({data}) => { createTime: this.dataForm.createTime,
if (data && data.code === 0) { }),
this.$message({ }).then(({ data }) => {
message: '操作成功', if (data && data.code === 0) {
type: 'success', this.$message({
duration: 1500, message: "操作成功",
onClose: () => { type: "success",
this.visible = false duration: 1500,
this.$emit('refreshDataList') onClose: () => {
} this.visible = false;
}) this.$emit("refreshDataList");
} else { },
this.$message.error(data.msg) });
} } else {
}) this.$message.error(data.msg);
} }
}) });
}, }
});
},
handleIconSuccess(response) { handleIconSuccess(response) {
this.dataForm.img = response.url; this.dataForm.img = response.url;
this.$forceUpdate(); this.$forceUpdate();
}, },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.formInfo { .formInfo {