yrxzy/src/views/journalQun/CASCI.vue

<style lang="scss" scoped>
</style>
<template>
  <section>
    <p>CASCI数据统计</p>
    <div class="content">
      <div class="filter">
        <el-form
          size="small"
          label-width="70px"
          :inline="true"
          label-position="left"
        >
          <el-form-item label="">
            <el-input
              clearable
              placeholder="请输入信息标题"
              v-model="form.name"
              @clear="getData"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="form.timerange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button
              @click="download"
              plain
              icon="el-icon-download"
              type="primary"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        class="table"
        :data="list"
        height="57vh"
        border
        v-loading="loading"
        default-expand-all
        row-key="id"
        style="width: 100%"
        @sort-change="changeTableSort"
      >
        <el-table-column prop="rank" width="80" label="排名"> </el-table-column>
        <el-table-column prop="journal_img" label="期刊封面" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.journal_img" alt="" width="80" style="margin: 5px" />
          </template>
        </el-table-column>
        <el-table-column prop="journal_name" label="期刊名称"> </el-table-column>
        <el-table-column prop="article_count" label="统计资源数量(总)" sortable="custom">
        </el-table-column>
        <el-table-column
          prop="article_count_mp"
          label="统计资源数量(公众号)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="article_count_xcx"
          label="统计资源数量(小程序)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column prop="read_num" label="总阅读量(次))" sortable="custom">
        </el-table-column>
        <el-table-column
          prop="read_num_mp"
          label="公众号阅读量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="read_num_xcx"
          label="小程序阅读量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column prop="zhuanfa_num" label="总转发量量(次)" sortable="custom">
        </el-table-column>
        <el-table-column
          prop="zhuanfa_num_mp"
          label="公众号转发量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="zhuanfa_num_xcx"
          label="小程序转发量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column prop="casci" label="CASCI" sortable="custom">
        </el-table-column>
        <el-table-column
          prop="zip"
          width="150"
          align="center"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="showCASCI(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Page
        ref="pageButton"
        :current="form.page"
        :page_size="form.page_size"
        :total="total"
        @pageChange="gopage"
      />
      <!--二维码上传-->
      <el-dialog
        class="fu-dialog"
        :title="dialogTitle"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
      >
        <el-form
          size="small"
          class="preview"
          :inline="false"
          label-width="100px"
          :model="form1"
          ref="form1"
        >
          <el-form-item label="上传二维码：" prop="img">
            <el-upload
              class="avatar-uploader"
              action="/api/admin/uploadfile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="form1.qrcode" :src="form1.qrcode" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <p v-if="form1.qrcode" class="del" @click="delImg">删除</p>
            <!-- <span style="font-size: 12px; color: #999999"
              >建议图片尺寸为：210*160</span
            > -->
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            size="small"
            type="normal"
            @click="(dialogVisible = false), (form1 = {})"
            >取消</el-button
          >
          <el-button size="small" type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        class="fu-dialog"
        title="导入期刊"
        width="400px"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible1"
      >
        <el-upload
          class="upload-demo"
          action="/api/admin/uploadfile"
          :show-file-list="false"
          :on-success="handleAvatarSuccess1"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传.xls/.xlsx文件，且不超过500M
          </div>
        </el-upload>
        <div>{{ file }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="normal" @click="dialogVisible1 = false"
            >取消</el-button
          >
          <el-button size="small" type="primary" @click="upload"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </section>
</template>
<script>
import Page from "../../components/Page";
export default {
  components: {
    Page,
  },
  data() {
    return {
      //   edit:0,
      form: {
        name: "",
        page: 1,
        page_size: 20,
        date: "day",
        timerange: [
          new Date(new Date()-1000*60*60*24).toLocaleDateString().split("/").join("-"),
          new Date(new Date()-1000*60*60*24).toLocaleDateString().split("/").join("-"),
        ],
      },
      total: 1,
      list: [{ name: "2333" }],
      loading: false,
      input: "",
      dialogVisible: false,
      dialogTitle: "",
      dialogVisible1: false,
      form1: { qrcode: "" },
      file: "",
      pickerOptions:{
        disabledDate:(time)=>{
          return time.getTime() > new Date()-1000*60*60*24;
        }
      }
    };
  },
  methods: {
    changeTableSort(e) {
      let parm = { order_by: e.prop, order: e.order };
      console.log(parm);
    },
    delImg() {
      this.$set(this.form1, "qrcode", null);
      this.$forceUpdate();
    },
    save() {
      this.$refs["form1"].validate((valid) => {
        if (valid) {
          let parm = this.form1;
          let id = this.form1.id;
          this.$api.updateJournal(parm).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "上传成功!",
              });
              this.dialogVisible = false;
              this.getData();
            } else {
              this.$message.error("上传失败!");
            }
          });
        }
      });
    },
    upload() {
      this.$api.upJournalData({ file: this.file }).then((res) => {
        this.dialogVisible1 = false;
        this.getData();
        this.$message({
          message: "上传成功",
          type: "success",
        });
      });
    },
    download() {
      this.$api.getJournalData().then((res) => {
        var elink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel,charset=UTF-8",
        });
        let objUrl = URL.createObjectURL(blob);
        let file_name = decodeURIComponent(
          res.headers["content-disposition"].split("=")[1]
        );
        console.log(file_name);
        elink.download = file_name;
        elink.style.display = "none";
        elink.href = objUrl;
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      });
    },
    showQrcode(row) {
      // this.form1.journal_id = row.id;
      this.form1.id = row.id;
      this.form1.qrcode = row.qrcode;
      this.dialogVisible = true;
    },
    showCASCI(row) {
      this.$router.push({
        path: "/journal/casci/detail",
        query: { id: row.journal_id },
      });
    },
    //封面
    handleAvatarSuccess(res, file) {
      // this.form1.qrcode=file.response.data
      this.$set(this.form1, "qrcode", file.response.data);
    },
    handleAvatarSuccess1(res, file) {
      this.file = file.response.data;
    },
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    edit(row) {
      this.$router.push({
        path: "/journal/journal/add",
        query: { id: row.id },
      });
    },
    add() {
      this.$router.push({ path: "/journal/journal/add" });
    },
    detail(id) {
      this.$router.push({
        path: "/company/detail",
        query: { id: id, page: this.form.page, page_size: this.form.page_size },
      });
    },
    search() {
      this.getData();
    },
    getData() {
      // var parm = this.form;
      var parm = {...this.form};
      parm.timerange = parm.timerange.join(",")
      this.loading = true;
      this.$api.getCASCIList(parm).then((res) => {
        this.list = res.data.data.list;
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    del(id) {
      this.$confirm("确定删除吗?关联数据都会被删除!", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.delJournal({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
      });
    },
  },
  created() {
    this.getData();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path.indexOf("add") >= 0) {
        vm.getData();
      }
    });
  },
};
</script>