zky-admin/src/views/journalQun/AddJournal.vue

<style lang="scss" scoped>
.preview {
  .aname{
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 16px;
  }
  .ainfo{
    display: flex;
    margin-bottom: 10px;
    p{
      width: 60%;
      margin-left: 15px;
      line-height: 26px;
    }
  }
  b{
    color: #333;
  }
  div{
    line-height: 26px;
    margin-bottom: 10px;
  }
}
.content .title {
  height: 32px;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  border-bottom: 1px solid #d8d8d8;
  margin-bottom: 25px;
}
.el-form {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  .el-select,
  .el-range-editor--small.el-input__inner {
    width: 100%;
  }
}
/deep/.el-tabs__header {
  margin: 0;
  .el-tabs__active-bar {
    height: 0px;
  }
  .el-tabs__item {
    width: 160px;
    height: 40px;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    color: #333333;
    background: #ececec;
    margin-right: 10px;
  }
  .el-tabs__item.is-active {
    background: #3895fe;

    color: #ffffff;
  }
}
.el-button {
  width: 120px;
  height: 36px;
}
// 上传

/deep/.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  line-height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .avatar {
    width: 100%;
    height: auto;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 68px;
  height: 68px;
  line-height: 68px;
  text-align: center;
}
.avatar {
  width: 68px;
  height: 68px;
  display: block;
}
/deep/.speaker_avatar .el-upload {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.hotel_imgs {
  /deep/.el-upload--picture-card {
    width: 79px;
    height: 79px;
    line-height: 79px;
  }
}
</style>
<template>
  <section>
    <p><span>刊群导览></span>新增期刊</p>
    <div class="content"  v-loading='loading' element-loading-background="rgba(0, 0, 0, 0)">
      <!-- <div class="title">新增会议</div> -->
      <el-form
        ref="form"
        size="small"
        label-width="140px"
        class="over_y"
        :model="form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
              <el-form-item label="期刊名称：" prop="name">
                <el-input
                  placeholder="请输入期刊名称"
                  v-model="form.name"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="微信号：" prop="wxcode">
                <el-input
                  placeholder="请输入微信号"
                  v-model="form.wxcode"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="中文名称：" prop="cname">
                <el-input
                  placeholder="请输入中文名称"
                  v-model="form.cname"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="外文名称：" prop="ename">
                <el-input
                  placeholder="请输入外文名称"
                  v-model="form.ename"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主办单位：" prop="organizer_id">
              <el-select
                placeholder="请选择"
                v-model="form.organizer_id"
                filterable
              >
                <el-option
                  v-for="(item, index) in organizerList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学科：" prop="subject_id">
              <el-select
                placeholder="请选择"
                v-model="form.subject_id"
                filterable
              >
                <el-option
                  v-for="(item, index) in subjectList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="语种：" prop="languages">
              <el-input placeholder="请输入语种" v-model="form.languages"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出版时间：" prop="publishingTime">
              <el-input v-model="form.publishingTime" placeholder="请输入出版时间"> </el-input>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="主编：" prop="editor">
                <el-input
                  placeholder="请输入主编"
                  v-model="form.editor"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="主管单位：" prop="corganizers">
                <el-input
                  placeholder="请输入主管单位"
                  v-model="form.corganizers"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="办刊单位：" prop="publishingUnit">
                <el-input
                  placeholder="请输入办刊单位"
                  v-model="form.publishingUnit"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="创刊时间：" prop="">
                <el-input
                  placeholder="请输入创刊时间"
                  v-model="form.publishingTime"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="出版周期：" prop="publishingCycle">
                <el-input
                  placeholder="请输入出版周期"
                  v-model="form.publishingCycle"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="国内刊号：" prop="domestic">
                <el-input
                  placeholder="请输入国内刊号"
                  v-model="form.domestic"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="国际刊号：" prop="issn">
                <el-input
                  placeholder="请输入国际刊号"
                  v-model="form.issn"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="期刊官网：" prop="website">
                <el-input
                  placeholder="请输入期刊官网"
                  v-model="form.website"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="编辑部地址：" prop="editorialAddress">
                <el-input
                  placeholder="请输入编辑部地址"
                  v-model="form.editorialAddress"
                  clearable
                ></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="期刊简介：">
          <el-input
            type="textarea"
            v-model="form.desc"
            :rows="3"
            placeholder="请输入期刊简介："
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图：" prop="img">
          <el-upload
            class="avatar-uploader"
            action="/api/admin/uploadfile"
            :show-file-list="false"
            :on-progress='handleAvatarProgress'
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.img" :src="form.img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span style="font-size: 12px; color: #999999"
            >建议图片尺寸为：210*160</span
          >
        </el-form-item>
        <el-form-item style="position: fixed; bottom: 20px; right: 60px">
          <el-button type="primary" @click="view">预览</el-button>
          <el-button type="success" @click="save">发布</el-button>
          <!-- <el-button type="default" @click="save">保存</el-button> -->
          <!-- <el-button type="danger" plain>删除</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title=""
      :visible.sync="open"
      width="414px">
      <div class="preview">
        <div class="ainfo">
          <img width="100" :src="form.img" alt="">
          <p>
            <b>{{form.name}}</b> <br>
            微信号：{{form.wxcode}} <br>
            主编：{{form.editor}} <br>
            主办单位：{{organizer_name}}
          </p>
        </div>
        <b>期刊简介</b>
        <div class="adesc">{{form.desc}}</div>
        <b>基本信息</b>
        <div>
          中文名称：{{form.name}} <br>
          外文名称：{{form.ename}} <br>
          语种：{{form.languages}} <br>
          主编：{{form.editor}} <br>
          主管单位：{{form.corganizers}} <br>
          办刊单位：{{form.publishingUnit}} <br>
          创刊时间：{{form.publishingTime}} <br>
          出版周期：{{form.publishingCycle}} <br>
          国内刊号：{{form.domestic}} <br>
          国际刊号：{{form.issn}} <br>
          期刊官网：{{form.website}} <br>
          编辑部地址：{{form.editorialAddress}} <br>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </section>
</template>
<script>
import fuEditor from "../../components/fuEditor";
export default {
  components: {
    fuEditor,
  },
  data() {
    return {
      loading:false,
      open:false,
      form: {},
      subjectList: [],
      organizerList:[],
      imageUrl: "",
      rules: {
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        // wxcode: [{ required: true, message: "请输入微信号", trigger: "blur" }],
        organizer_id: [{ required: true, message: "请选择主办单位", trigger: "blur" }],
        subject_id: [{ required: true, message: "请选择学科", trigger: "change" }],
        img: [{ required: true, message: "封面图", trigger: "blur" }],
      },
      organizer_name:''
    };
  },
  methods: {
    //封面
    handleAvatarProgress(){
        this.loading=true
    },
    handleAvatarSuccess(res, file) {
      this.$set(this.form,'img',file.response.data)
      this.loading=false
    },
    //主讲人
    handleAvatarSuccess1(index, res, file) {
      var speaker = this.form.speaker[index];
      speaker.img = file.response.data;
      this.$set(this.form.speaker, index, speaker);
      // console.log(this.form.img)
    },
    beforeAvatarUpload() {},
    handleClick() {},
    addSpeaker() {
      this.form.speaker.push({ name: "", intruduce: "" });
    },
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    getData() {
      
      this.$api.searchSubjectList().then((res) => {
        this.subjectList = res.data.data;
      });
      this.$api.searchOrganizerList().then((res) => {
        this.organizerList = res.data.data;
      });
      // 期刊详情
      let id = this.$route.query.id;
      if (id) {
        this.$api.getJournal({ id: id }).then((res) => {
          this.form = res.data.data;
        });
      }
    },
    /**预览 */
    view(){
      let org=this.organizerList.filter(item=>item.id == this.form.organizer_id)
      if(org.length>0){
        this.organizer_name=org[0].name
      }
      this.open=true;
    },
    save() {
      let id = this.$route.query.id;
      let parm = this.form;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (id) {
            parm.id = id;
            this.$api.updateJournal(parm).then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  type: "success",
                  message: "保存成功!",
                });
              } else {
                this.$message.error("保存失败!");
              }
            });
          } else {
            this.$api.addJournal(parm).then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  type: "success",
                  message: "保存成功!",
                });
              } else {
                this.$message.error("保存失败!");
              }
            });
          }
        } else {
            this.$message.error("有必填项没有填!");
        }
      });
    },
    del(id) {
      this.$confirm("确定删除吗", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.delJournal({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>