zhxg_pc/src/views/index_v2.vue

<template>
  <div class="app-container home">
    <el-row style="position: relative;top: -20px;">

      <el-container>

        <!-- <el-col :span="12" style="margin: 0 auto;">
        <el-card>
          <div slot="header" class="clearfix">
            <span>新生报到系统</span>
          </div>

        </el-card>
      </el-col> -->
        <el-col :span="16">
          <el-main>
            <el-card>
              <div slot="header" class="clearfix">
                <span>学生综合素质测评系统</span>
              </div>
              <el-row>
                <el-col v-for="(v, i) in menus" :key="i" :span="8">
                  <div class="link-box" :style="getBackColor(i)">
                    <div class="head-box">
                      <div v-if="v.processing != null && v.processing != undefined" class="head-box-data">
                        <span>确认({{ v.confirm }})</span>|<span>上报({{ v.processing }})</span>
                      </div>
                    </div>
                    <div class="link-box-icon">
                      <span class="link-box-title">{{ v.title }}</span>
                      <el-button size="mini" class="link-box-button" style="font-weight: bolder;" icon="el-icon-right"
                                 circle @click="toMethod(v)"
                      />
                    </div>
                    <div class="bg">
                      <div class="bg-text">
                        <span>
                          {{ v.title.substring(0, 2) }}
                        </span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>

            <el-card v-show="false">
              <div slot="header" class="clearfix">
                <span>操作流程</span>
              </div>
              <el-row>
                <el-col :span="4">
                  <div class="stream">
                    <span class="stream-text">提交申请</span>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="arrow" />
                </el-col>
                <el-col :span="4">
                  <div class="stream">
                    <span class="stream-text">一级审核</span>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="arrow" />
                </el-col>
                <el-col :span="4">
                  <div class="stream">
                    <span class="stream-text">二级审核</span>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="arrow" />
                </el-col>
                <el-col :span="4">
                  <div class="stream">
                    <span class="stream-text">系统公示</span>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="arrow" />
                </el-col>
                <el-col :span="4">
                  <div class="stream">
                    <span class="stream-text">加分完成</span>
                  </div>
                </el-col>
              </el-row>

            </el-card>

          </el-main>
        </el-col>

        <el-main style="position: relative;left: -40px;">
          <el-card style="padding-bottom: 20px;">
            <el-col v-for="(v, i) in side" :key="i" :span="24">
              <div class="link-box" :style="getBackColor(i)">
                <div class="head-box">
                  <div v-if="v.processing != null && v.processing != undefined" class="head-box-data">
                    <span>确认({{ v.confirm }})</span>|<span>上报({{ v.processing }})</span>
                  </div>
                </div>
                <div class="link-box-icon">
                  <span class="link-box-title">{{ v.title }}</span>
                  <el-button size="mini" class="link-box-button" style="font-weight: bolder;" icon="el-icon-right" circle
                             @click="toMethod(v.url)"
                  />
                </div>
                <div class="bg">
                  <div class="bg-text">
                    <span>
                      {{ v.title.substring(0, 2) }}
                    </span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-card>
        </el-main>

      </el-container>
    </el-row>


    <!-- 第二课堂提交申请 -->
    <el-dialog title="第二课堂提交申请" :visible.sync="classtwoV" width="600px" append-to-body>
      <el-form ref="classtwoForm" :model="classtwoForm" label-width="100px">

        <el-form-item label="学年" prop="stuYearId">
          <el-select v-model="classtwoForm.stuYearId" style="width: 400px;" placeholder="请选择学年">
            <el-option v-for="(v, i) in stu_year_list" :value="v.id" :label="v.stuYearName" />
          </el-select>
        </el-form-item>

        <el-form-item label="加分项" prop="childType">
          <el-select v-model="classtwoChildType" style="width: 400px;" placeholder="请选择加分项">
            <el-option v-for="(v, i) in classtwo_child_list" :key="i" :value="v.ruleId" :label="v.ruleName" />
          </el-select>
        </el-form-item>

        <el-form-item label="分值" prop="description">
          <el-input v-model="classtwo_add_record" style="width: 400px;" type="number" disabled placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="佐证材料" prop="material">

          <image-upload v-model="classtwoForm.material" />

        </el-form-item>

        <el-form-item label="备注" prop="description">
          <el-input v-model="classtwoForm.description" type="textarea" placeholder="请输入内容" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClasstwoForm">确 定</el-button>
        <el-button @click="cancelClasstwo">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 思想品德提交申请 -->
    <el-dialog title="思想品德加分" :visible.sync="iamV" width="600px" append-to-body>
      <el-form ref="iamForm" :model="iamForm" label-width="100px">

        <el-form-item label="学年" prop="stuYearId">
          <el-select v-model="iamForm.stuYearId" style="width: 400px;" placeholder="请选择学年">
            <el-option v-for="(v, i) in stu_year_list" :value="v.id" :label="v.stuYearName" />
          </el-select>
        </el-form-item>

        <el-form-item label="加分项" prop="childType">
          <el-select v-model="iamChildType" style="width: 400px;" placeholder="请选择加分项">
            <el-option v-for="(v, i) in child_list" :key="i" :value="v.ruleId" :label="v.ruleName" />
          </el-select>
        </el-form-item>

        <el-form-item label="分值" prop="description">
          <el-input v-model="iam_add_record" style="width: 400px;" type="number" disabled placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="佐证材料" prop="material">
          <image-upload v-model="iamForm.material" />
        </el-form-item>

        <el-form-item label="备注" prop="description">
          <el-input v-model="iamForm.description" type="textarea" placeholder="请输入内容" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitIamForm">确 定</el-button>
        <el-button fit="contain" @click="cancelIam">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import store from '@/store'
import { listYear } from '@/api/stuCQS/basedata/year'
import { listIamChild } from '@/api/stuCQS/basedata/cphRules'
import { stuAdd } from '@/api/stuCQS/info-fill/iam'
import { stuAdd as classtwoStuAdd } from '@/api/stuCQS/info-fill/classtwo'
import { listClassTwoChild } from '@/api/stuCQS/basedata/cphRules'

export default {
  name: 'Index',
  data() {
    return {


      //第二课堂表单
      classtwoForm: {},
      classtwo_child_list: [],
      classtwoChildType: null,
      classtwoV: false,
      classtwo_add_record: 0,

      //判断是否是学生
      isStu: false,
      //思想品德表单
      iamForm: {},
      //学年列表
      stu_year_list: [],
      //选择的加分项
      iamChildType: null,
      //加分项列表
      child_list: [],
      //加分分值
      iam_add_record: 0,
      //思想品德视图
      iamV: false,


      // 版本号
      version: '3.8.5',
      menus: [
        {
          type: 1,
          title: '思想品德',
          url: '/stuCQS/infofill/iam',
          confirm: 0,
          processing: 0
        },
        {
          type: 3,
          title: '第二课堂',
          url: '/stuCQS/infofill/classtwo',
          confirm: 0,
          processing: 0
        },
        {
          title: '课程学习',
          url: '/stuCQS/infofill/course',
          confirm: 0,
          processing: 0
        },
        {
          title: '体能测试',
          url: '/stuCQS/infofill/sport',
          confirm: 0,
          processing: 0
        },
        {
          title: '综合评价',
          url: '/stuCQS/infofill/ce',
          confirm: 0,
          processing: 0
        },
        {
          title: '加分项审核',
          url: '/stuCQS/process/TODoList',
          confirm: 0,
          processing: 0
        },
      ],
      colors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#9C27B0', '#FF9800', '#009688'],
      side: [
        {
          title: '提醒消息',
          url: '/',
        },
        {
          title: '公示栏',
          url: '/',
        },
        {
          title: '操作手册',
          url: '/'
        }
      ]

    }
  },
  watch: {
    'iamChildType'(newVal, oldVal) {
      this.child_list.map((v) => {
        if (v.ruleId == newVal) {
          this.iam_add_record = v.maxScore
        }
      })
    },
    'classtwoChildType'(newVal, oldVal) {
      this.classtwo_child_list.map((v) => {
        if (v.ruleId == newVal) {
          this.classtwo_add_record = v.maxScore
        }
      })
    }
  },
  created() {
    this.isStu = false
    let temp = store.getters.roles
    temp.map(x => {
      if (x == 'teststu') {
        this.getStuYear()
        this.listIamChild()
        this.listClassTwoChild()
        this.isStu = true
      }
    })


  },
  methods: {

    /** 提交思想品德 */
    submitClasstwoForm() {
      this.$refs['classtwoForm'].validate(valid => {
        if (valid) {
          let sdata = {
            stuYearId: this.classtwoForm.stuYearId,
            material: this.classtwoForm.material,
            description: this.classtwoForm.description,
            ruleId: this.classtwoChildType
          }
          classtwoStuAdd(sdata).then(response => {
            this.$modal.msgSuccess('新增成功')
            this.classtwoV = false
          })
        }

      })
    },

    //列出第二课堂子类型
    async listClassTwoChild() {
      let res = await listClassTwoChild()
      this.classtwo_child_list = [...res.data]
    },


    /** 提交思想品德 */
    submitIamForm() {
      this.$refs['iamForm'].validate(valid => {
        if (valid) {
          let sdata = {
            stuYearId: this.iamForm.stuYearId,
            material: this.iamForm.material,
            description: this.iamForm.description,
            ruleId: this.iamChildType,
          }
          stuAdd(sdata).then(response => {
            this.$modal.msgSuccess('新增成功')
            this.iamV = false
          })
        }

      })
    },
    cancelIam() {
      this.iamV = false
      this.reset()
    },
    cancelClasstwo() {
      this.classtwoV = false
      this.reset()
    },
    reset() {
      this.resetForm('iamForm')
      this.resetForm('classtwoForm')
    },
    //列出思想品德子类
    async listIamChild() {
      let res = await listIamChild()
      this.child_list = [...res.data]
    },
    //列出学年信息
    async getStuYear() {
      let res = await listYear()
      this.stu_year_list = [...res.rows]
    },

    goTarget(href) {
      window.open(href, '_blank')
    },
    getBackColor(i) {
      let color = this.colors[i % 7]
      return { 'background-color': color }

    },
    toMethod(v) {
      this.reset()
      if (this.isStu) {
        let type = v.type
        if (type == 1) {
          this.iamV = true
        }
        if (type == 3) {
          this.classtwoV = true
        }
      } else {
        this.$router.push(v.url)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.arrow {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(255, 0, 0, 0.5);
  position: relative;
  top: 40px
}

.stream {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 1px solid rgb(64, 158, 255);

  .stream-text {
    text-align: center;
    line-height: 100px;
    display: block;
    font-size: large;
  }
}

.home {
  .link-box {
    width: 90%;
    height: 140px;
    margin: 1%;
    border-radius: 20px;
    background-size: cover;
    background-color: rgb(97, 165, 255);
    color: white;
    position: relative;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      z-index: 0;

      .bg-text {
        color: rgba(255, 255, 255, 0.3);
        text-align: right;
        font-size: 110px;

      }

    }

    .head-box {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 75%;
      z-index: 1;
    }

    .head-box-data {
      height: 75%;
      margin: 2%;
      font-size: large;
    }

    .link-box-button {
      float: right;
      margin-right: 10px;
    }

    .link-box-icon {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 25%;
      z-index: 1;
      font-size: x-large;
    }

    .link-box-title {
      font-size: 18px;
      margin-left: 10px;
      margin-bottom: 20px;
    }
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>