msyj-admin-org/src/modules/grading/marker/MarkerHeader.vue

<template>
  <div class="marker-header">
    <div class="header-group">
      <div class="header-part">
        <Dropdown
          v-if="areas.length > 1"
          placement="bottom"
          transfer
          trigger="click"
          transfer-class-name="marker-dropdown"
          @on-click="areaClick"
        >
          <span class="el-dropdown-link">
            {{ curArea.areaName }} <Icon type="ios-arrow-down"></Icon>
          </span>
          <DropdownMenu slot="list">
            <DropdownItem
              v-for="area in areas"
              :key="area.id"
              :name="area.id"
              >{{ area.areaName }}</DropdownItem
            >
          </DropdownMenu>
        </Dropdown>
        <p v-else>{{ curArea.areaName }}</p>
      </div>
      <div v-if="showStatistics" class="header-part" @click="toStatistics">
        <p>统计分析 <Icon type="ios-arrow-down"></Icon></p>
      </div>
      <div class="header-part">
        <Poptip
          popper-class="marker-popper"
          placement="bottom"
          width="312"
          transfer
          v-model="pageVisible"
        >
          <p v-if="showPaperRelateCount">
            当前页：<span>{{ page.current }}</span
            >/<span>{{ page.totalPage }} </span>
            <Icon type="ios-arrow-down"></Icon>
          </p>
          <p v-else>
            <span>翻页操作</span>
            <Icon type="ios-arrow-down"></Icon>
          </p>

          <div class="marker-page" slot="content">
            <div class="marker-page-shortcut">
              <div class="shortcut-item" @click="toFirstPage">首页</div>
              <div class="shortcut-item" @click="toPrevPage">上一页</div>
              <div class="shortcut-item" @click="toNextPage">下一页</div>
              <div class="shortcut-item" @click="toLastPage">尾页</div>
            </div>
            <div class="marker-page-size">
              <h4>每页张数：</h4>
              <div class="page-size-list">
                <div
                  :class="[
                    'page-size-item',
                    { 'page-size-item-act': page.size === item }
                  ]"
                  v-for="item in pageSizeList"
                  :key="item"
                  @click="pageSizeChange(item)"
                >
                  {{ item }}
                </div>
              </div>
            </div>
            <div v-if="showPaperRelateCount" class="marker-page-set">
              <span>当前页：</span>
              <p>
                <span>{{ page.current }}</span
                >/<span>{{ page.totalPage }} </span>
              </p>
            </div>
            <div v-if="showPaperRelateCount" class="marker-page-set">
              <span>总张数：</span>
              <p>
                <span>{{ page.total }}</span>
              </p>
            </div>
            <div class="marker-page-set">
              <span>页面跳转：</span>
              <InputNumber
                size="small"
                :min="1"
                :max="page.totalPage"
                :step="1"
                :precision="0"
                v-model="pageNo"
              ></InputNumber>
              <div class="marker-page-btn" @click="pageNoSet">跳转</div>
            </div>
          </div>
        </Poptip>
      </div>
    </div>
    <div class="header-group">
      <div class="header-part header-step">
        <Dropdown
          placement="bottom"
          transfer
          trigger="click"
          transfer-class-name="marker-dropdown header-step-dropdown"
          @on-click="stepClick"
        >
          <span class="el-dropdown-link">
            <i>{{ curStep.name }}</i>
            <i v-if="showPaperRelateCount">：{{ curStep.count }} </i>
            <Icon type="ios-arrow-down"></Icon>
          </span>
          <DropdownMenu slot="list">
            <DropdownItem
              class="header-step-item"
              v-for="step in steps.otherStep"
              :key="step.type"
              :name="step.name"
            >
              <i>{{ step.name }}</i>
              <i v-if="showPaperRelateCount">（{{ step.count }}）</i>
            </DropdownItem>
            <DropdownItem
              class="header-step-item"
              v-for="step in steps.levelStep"
              :key="step.name"
              :name="step.name"
            >
              <i>{{ step.name }}</i>
              <i v-if="showPaperRelateCount"
                >（{{ step.count }} / {{ step.gcount }}）</i
              >
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div v-if="IS_MARK_LEADER" class="header-part" @click="toProgress">
        <p>{{ stageName }}进度 <Icon type="ios-arrow-down"></Icon></p>
      </div>
      <div v-if="showStandard" class="header-part" @click="toStandard">
        <p>标准卷 <Icon type="ios-arrow-down"></Icon></p>
      </div>
      <div class="header-part header-history" @click="toHistory">
        <p>操作记录 <Icon type="ios-arrow-down"></Icon></p>
      </div>
      <div class="header-user">
        <Dropdown
          placement="bottom"
          transfer
          trigger="click"
          transfer-class-name="marker-dropdown"
          @on-click="userClick"
        >
          <div class="user-name">
            <Icon type="md-person" size="16" /> {{ username }}
            <Icon type="ios-arrow-down"></Icon>
          </div>
          <DropdownMenu slot="list">
            <DropdownItem class="color-default-hover" name="toResetPwd"
              >修改密码</DropdownItem
            >
            <DropdownItem class="color-error-hover" name="logout">
              退出登录
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>

    <!-- ResetPwd -->
    <reset-pwd ref="ResetPwd"></reset-pwd>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { areaList, logout } from "@/api";
import ResetPwd from "@/modules/login/ResetPwd";

export default {
  name: "marker-header",
  components: { ResetPwd },
  props: {
    showStandard: {
      type: Boolean,
      default: true
    },
    showStatistics: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      filter: {
        workId: "",
        subject: ""
      },
      curUserRoleType: "",
      username: this.$ls.get("user", { loginName: "" }).loginName,
      pageVisible: false,
      pageSizeList: [2, 3, 4, 6, 8, 9, 10, 12, 15, 16, 20, 24],
      pageNo: 1
    };
  },
  computed: {
    ...mapState("marker", [
      "paramsSet",
      "page",
      "curStep",
      "steps",
      "curArea",
      "curSubject",
      "areas"
    ]),
    IS_MARK_LEADER() {
      return this.curUserRoleType === "MARK_LEADER";
    },
    stageName() {
      return this.curSubject.stage === "LEVEL" ? "分档" : "打分";
    },
    showPaperRelateCount() {
      return !!this.paramsSet["showPaperCount"];
    }
  },
  mounted() {
    const subjectId = this.$route.params.subjectId.split("-");
    this.filter.workId = subjectId[0];
    this.filter.subject = subjectId[1];
    this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
    this.getAreaList();
  },
  methods: {
    ...mapMutations("marker", ["setPage", "setAreas"]),
    async getAreaList() {
      const data = await areaList(this.filter);
      const areas = data.map(item => {
        return {
          id: item.id,
          areaName: item.areaName,
          areaCode: item.areaCode
        };
      });
      this.setAreas(areas);

      if (!this.curArea.id) {
        this.$emit("area-change", areas[0]);
      }
    },
    areaClick(val) {
      if (this.curArea.id === val) return;
      const curArea = this.areas.find(item => item.id === val);
      this.$emit("area-change", curArea);
    },
    stepClick(val) {
      const curStep = [...this.steps.levelStep, ...this.steps.otherStep].find(
        item => item.name === val
      );
      this.$emit("step-change", curStep);
    },
    toProgress() {
      this.$emit("to-progress");
    },
    toHistory() {
      this.$emit("to-history");
    },
    toStandard() {
      this.$emit("to-standard");
    },
    toStatistics() {
      this.$emit("to-statistics");
    },
    pageNoSet() {
      this.setPage({ current: this.pageNo });
      this.pageSetChange();
    },
    toFirstPage() {
      this.setPage({ current: 1 });
      this.pageSetChange();
    },
    toLastPage() {
      this.setPage({ current: this.page.totalPage });
      this.pageSetChange();
    },
    toPrevPage() {
      if (this.page.current === 1) return;
      this.setPage({ current: this.page.current - 1 });
      this.pageSetChange();
    },
    toNextPage() {
      if (this.page.current === this.page.totalPage) return;
      this.setPage({ current: this.page.current + 1 });
      this.pageSetChange();
    },
    pageSizeChange(size) {
      this.setPage({ size });
      this.pageSetChange();
    },
    pageSetChange() {
      this.pageVisible = false;
      this.$emit("page-set-change", this.page);
    },
    userClick(name) {
      if (!name) return;
      this[name]();
    },
    toResetPwd() {
      this.$refs.ResetPwd.open();
    },
    async logout() {
      await logout();
      this.$ls.clear();
      this.$router.push({ name: "Login" });
    }
  }
};
</script>