270 lines
10 KiB
Vue
270 lines
10 KiB
Vue
<template>
|
|
<div class="mag_detail_drawer">
|
|
<el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="60%" style="padding-left: 20px">
|
|
<template slot="title">
|
|
<div>期刊内容管理</div>
|
|
</template>
|
|
<div>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="期刊名称" prop="magid">
|
|
<el-select v-model="form.magid" filterable placeholder="请选择期刊">
|
|
<el-option v-for="it in magList" :key="it.id" :label="it.name" :value="it.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="栏目" prop="topic">
|
|
<el-select v-model="form.topic" filterable placeholder="请选择栏目" clearable>
|
|
<el-option v-for="dict in dict.type.base_mag_topic" :key="dict.value"
|
|
:label="dict.label" :value="dict.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="单位" prop="deptid">
|
|
<el-select v-model="form.deptid" filterable placeholder="请选择单位" style="width: 100%;"
|
|
@change="doDeptChange()">
|
|
<el-option v-for="it in deptList" :key="it.deptId" :label="it.deptName"
|
|
:value="it.deptId" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="作者" prop="authorPhone">
|
|
<el-select v-model="form.authorPhone" filterable placeholder="请选择作者">
|
|
<el-option v-for="it in userList" :key="it.phonenumber" :label="it.nickName"
|
|
:value="it.phonenumber" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="序号" prop="ord">
|
|
<el-input-number v-model="form.ord" controls-position="right" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="标题" prop="title">
|
|
<el-input v-model="form.title" maxlength="500"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="期刊主图" ref="fiImage" prop="imageUrl" class="fi-imgs"
|
|
:class="'form-img-' + (form.imageUrl ? form.imageUrl.length : 0)">
|
|
<el-image :src="$basepath + form.imageUrl[0].url"
|
|
:preview-src-list="[$basepath + form.imageUrl[0].url]"
|
|
v-if="form.imageUrl && form.imageUrl.length > 0"></el-image>
|
|
<FileUpload @input="doImageInput" v-model="form.imageUrl" :fileSize="5" :limit="1"
|
|
:fileType="['png', 'jpg', 'jpeg']" />
|
|
</el-form-item>
|
|
<el-form-item label="" prop="content" class="fi-editor">
|
|
<editor v-model="form.content"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="dialog-footer" style="text-align: center;">
|
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
|
<el-button @click="doCancel">取 消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listMagDetail, getMagDetail, delMagDetail, addMagDetail, updateMagDetail } from "@/api/base/magDetail";
|
|
import { listMag } from "@/api/base/mag";
|
|
export default {
|
|
name: 'RuoyiUiMagDetailDrawer',
|
|
dicts: ['base_mag_topic'],
|
|
data() {
|
|
return {
|
|
isOpen: false,
|
|
oldData: null,
|
|
magList: [],
|
|
deptList: [],
|
|
userList: [],
|
|
form: {
|
|
title: "",
|
|
ord: 0,
|
|
magid: 0,
|
|
topic: "1",
|
|
authorPhone: '',
|
|
authorName: '',
|
|
deptid: null,
|
|
imageUrl: [],
|
|
content: '',
|
|
images: ""
|
|
},
|
|
rules: {
|
|
magid: [{ required: true, message: "请选择期刊", trigger: "blur" }],
|
|
topic: [{ required: true, message: "请选择栏目", trigger: "blur" }],
|
|
deptid: [{ required: true, message: "请选择单位", trigger: "blur" }],
|
|
authorPhone: [{ required: true, message: "请选择作者", trigger: "blur" }],
|
|
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
|
imageUrl: [{ required: true, trigger: "change", message: "请上传图片" }],
|
|
content: [{ required: true, message: "请输入正文", trigger: "blur" }],
|
|
}
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
methods: {
|
|
doImageInput() {
|
|
this.$refs.fiImage.clearValidate()
|
|
},
|
|
doDeptChange(init) {
|
|
let param = {
|
|
deptId: this.form.deptid
|
|
}
|
|
//获取人员列表的接口
|
|
this.$api.publics.getUserList(param).then(d => {
|
|
this.userList = d.rows || [];
|
|
if (init) {
|
|
if (this.oldData && this.userList.length > 0) {
|
|
this.form.authorPhone = this.oldData.authorPhone;
|
|
this.form.authorName = this.oldData.authorName;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
loadDepts(init) {
|
|
this.$api.publics.getMyDeptList().then(d => {
|
|
let tmps = d.data || [];
|
|
let finds = tmps.filter(it => it.deptName == "总包单位");
|
|
this.deptList = [];
|
|
if (finds.length > 0) {
|
|
let dept = finds[0];
|
|
this.deptList = tmps.filter(it => it.parentId == dept.deptId);
|
|
if (this.oldData) {
|
|
this.form.deptid = this.oldData.deptid;
|
|
this.doDeptChange(init);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
loadMag() {
|
|
listMag({ pageNum: 1, pageSize: 1000 }).then(d => {
|
|
this.magList = d.rows || [];
|
|
if (this.magList.length > 0) {
|
|
if (this.oldData == null) {
|
|
this.form.magid = this.magList[0].id;
|
|
} else {
|
|
this.form.magid = this.oldData.magid;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
show(row, ord) {
|
|
this.oldData = row;
|
|
this.form.ord = ord;
|
|
this.isOpen = true;
|
|
this.loadMag(true);
|
|
this.loadDepts(true);
|
|
if (row) {
|
|
this.form.title = row.title;
|
|
this.form.ord = row.ord;
|
|
this.form.topic = row.topic;
|
|
this.form.imageUrl = this.$tryToJson(row.images).map(d => {
|
|
return { name: d, url: d };
|
|
})
|
|
this.form.content = row.content;
|
|
}else{
|
|
this.form.title="";
|
|
this.form.magid=0;
|
|
this.form.topic="1";
|
|
this.form.authorPhone="";
|
|
this.form.authorName="";
|
|
this.form.deptId=null;
|
|
this.form.imageUrl=[];
|
|
this.form.content="";
|
|
this.form.images="";
|
|
}
|
|
},
|
|
submitForm() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
this.doSubmit();
|
|
}
|
|
});
|
|
},
|
|
doSubmit() {
|
|
this.form.images = JSON.stringify(this.form.imageUrl.map(d => d.url));
|
|
let tmps = this.userList.filter(d => d.phonenumber == this.form.authorPhone);
|
|
this.form.authorName = tmps.length > 0 ? tmps[0].nickName : "";
|
|
if (this.oldData && this.oldData.id) {
|
|
this.oldData.magid = this.form.magid;
|
|
this.oldData.topic = this.form.topic;
|
|
this.oldData.deptid = this.form.deptid;
|
|
this.oldData.title = this.form.title;
|
|
this.oldData.authorPhone = this.form.authorPhone;
|
|
this.oldData.authorName = this.form.authorName;
|
|
this.oldData.content = this.form.content;
|
|
this.oldData.images = this.form.images;
|
|
this.oldData.ord = this.form.ord;
|
|
updateMagDetail(this.oldData).then(response => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.isOpen = false;
|
|
this.$emit("success");
|
|
});
|
|
} else {
|
|
addMagDetail(this.form).then(response => {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.isOpen = false;
|
|
this.$emit("success");
|
|
});
|
|
}
|
|
},
|
|
doCancel() {
|
|
this.isOpen = false;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.mag_detail_drawer {
|
|
.el-drawer__header {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.el-drawer__body {
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
.el-drawer {
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.fi-imgs {
|
|
.el-image__inner {
|
|
width: 100px;
|
|
}
|
|
|
|
.upload-file {
|
|
.el-upload__tip {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.upload-file-uploader {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
&.form-img-1 {
|
|
.upload-file-uploader {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.fi-editor{
|
|
.editor.ql-container{
|
|
height: 52vh !important;
|
|
}
|
|
}
|
|
}
|
|
</style> |