考试申请查询，成绩修改，证书管理新增审核状态图例标识

Administrator

2021-12-22 f7a6d7f1b169ef835641d8027bc0b1b430cf8e3f

考试申请查询，成绩修改，证书管理新增审核状态图例标识

 src/components/liu-legend/Legend.vue

New file
@@ -0,0 +1,54 @@
<template>
  <span id="l-legendOur">
    <span v-for="(value,index) in datas" :key="index" class="l-l-o">
      <span class="l-l-Img" :style="{backgroundColor: value.color}"></span>
      <span class="l-l-Text">{{value.text}}</span>
    </span>
  </span>
</template>
<script>

export default ({
    props:['datas'],
    data(){
        return{
            datalist:[//示例数据格式
                {
                    color: 'rgb(236, 83, 37)',
                    text: '掉线'
                },
                {
                    color: 'rgb(49, 49, 49)',
                    text: '在线'
                }
            ]
        }
    }
})
</script>

<style lang="scss" >
#l-legendOur{
    position: absolute;
    right: 100px;
    top: 5px;
    .l-l-o{
        color: rgba($color: #000000, $alpha: .8);
        color: rgb(49, 49, 49);
        position: relative;
        right: 150px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol';
    }
    .l-l-Img{
        display: inline-block;
        width: 10px;
        height: 10px;
        // border: 1px solid rgb(17, 198, 253);
        border-radius: 3px;
        margin-right: 8px;
    }
}
</style>

 src/lang/zh.js

@@ -102,7 +102,7 @@
    notice: '消息通知',
    theme: '主题',
    userSManual: '用户手册',
    drive: '驱动',
        drive: '驱动下载',
    color: '换色'
  },
  tagsView: {

 src/router/views/index.js

@@ -1026,7 +1026,7 @@
    redirect: '/drive/index',
    children: [{
        path: 'index',
        name: '驱动',
            name: '驱动下载',
        meta: {
            i18n: 'index'
        },

 src/views/accreditationRecords/accreditationRecordsPaper.vue

@@ -27,6 +27,20 @@
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="{ row }" slot="auditStatus">
        <el-tag class="dtype">
          {{
            row.auditStatus == 1
              ? "审核通过"
              : row.auditStatus == 2
              ? "审核不通过"
              : "待审核"
          }}
          <i class="zc" v-if="row.auditStatus == 1"></i>
          <i class="yj" v-if="row.auditStatus == 2"></i>
          <i class="gz" v-if="row.auditStatus == 3"></i>
        </el-tag>
      </template>
      <template slot="menuLeft">
        <el-button
          style="display: none"
@@ -65,6 +79,10 @@
          @click="handleSecurityAudit"
          >批量审批
        </el-button>
        <!--图例 components-->
              <span>
                <Legend :datas="datalistLIU"></Legend>
              </span>
      </template>
      <template slot-scope="{ row }" slot="category">
        <el-tag>{{ row.categoryName }}</el-tag>
@@ -205,7 +223,11 @@
import { mapState } from "vuex";
import Qs from "qs";
import { getToken } from "@/util/auth";
import Legend from "@/components/liu-legend/Legend";
export default {
  components: {
    Legend,
  },
  data() {
    return {
      check: false,
@@ -218,7 +240,20 @@
        idCardNo: "",
        registered: "",
      },

      datalistLIU: [
        {
          color: "#29C093",
          text: "审核通过",
        },
        {
          color: "#F34A4A",
          text: "审核不通过",
        },
        {
          color: "#F48F57",
          text: "待审核",
        },
      ],
      Audit: {},
      dialogFormVisible: false,
      dialogBatchAudit: false,
@@ -377,6 +412,7 @@
        searchMenuSpan: 6,
        selection: true,
        reserveSelection: true,
        align: "center",
        tip: true,
        border: true,
        index: true,
@@ -480,6 +516,7 @@
            prop: "avatar",
            type: "upload",
            listType: "picture-img",
            width:60,
          },
          {
            label: "保安证编号",
@@ -508,7 +545,7 @@
            prop: "applyUnit",
            search: true,
            searchLabelWidth: 120,
            minWidth: 105,
            minWidth: 160,
            searchSpan: 5,
            addDisplay: false,
            editDisplay: false,
@@ -531,7 +568,7 @@
            type: "select",
            search: true,
            searchLabelWidth: 90,
            width: 90,
            width: 110,
            searchSpan: 4,
            addDisplay: false,
            editDisplay: false,
@@ -1318,4 +1355,51 @@
  line-height: 40px;
  letter-spacing: 2px;
}


.dtype {
  width: 100%;
  padding-left: 0px;
}

.dx {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #dfdfdf;
}
.zc {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #29c093;
}
.yj {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f34a4a;
}
.gz {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f48f57;
}
</style>

 src/views/trainExam/index.vue

@@ -34,28 +34,20 @@
            @row-update="questionBankRowUpdate"
            @row-del="questionBankRowDel"
          >
            <!-- 自定义按钮 -->
            <!-- <template slot="menuLeft">
                            <el-button type="danger"
                                       size="mini"
                                       icon="el-icon-delete"
                                       plain
                                       @click="handleDelete">新增
                            </el-button>
                            <el-button type="danger"
                                       size="mini"
                                       icon="el-icon-delete"
                                       plain
                                       @click="handleDelete">删除
                            </el-button>
                            <el-button type="danger"
                                       size="mini"
                                       icon="el-icon-delete"
                                       plain
                                       @click="handleDelete">导出
                            </el-button>
                        </template> -->

            <template slot-scope="{ row }" slot="auditStatus">
              <el-tag class="dtype">
                {{
                  row.auditStatus == 1
                    ? "审核通过"
                    : row.auditStatus == 2
                    ? "审核不通过"
                    : "待审核"
                }}
                <i class="zc" v-if="row.auditStatus == 1"></i>
                <i class="yj" v-if="row.auditStatus == 2"></i>
                <i class="gz" v-if="row.auditStatus == 3"></i>
              </el-tag>
            </template>
            <template slot="menuLeft">
              <el-button
                style="display: none"
@@ -65,6 +57,10 @@
                @click="questionBankHandleDelete"
                >删 除
              </el-button>
              <!--图例 components-->
              <span>
                <Legend :datas="datalistLIU"></Legend>
              </span>
            </template>

            <template slot-scope="{ row }" slot="examStatus">
@@ -140,7 +136,11 @@
} from "@/api/examapi/examination";
import { auditColumn } from "./data";
import { mapGetters } from "vuex";
import Legend from "@/components/liu-legend/Legend";
export default {
  components: {
    Legend,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      console.log(value);
@@ -158,6 +158,21 @@

    return {
      form: {},
      //legend-liu数据
      datalistLIU: [
        {
          color: "#29C093",
          text: "审核通过",
        },
        {
          color: "#F34A4A",
          text: "审核不通过",
        },
        {
          color: "#F48F57",
          text: "待审核",
        },
      ],
      Audit: {},
      dialogFormVisible: false,
      optionAudit: {
@@ -232,7 +247,7 @@
            ],
            span: 24,
            width: 200,
            overHidden:true
            overHidden: true,
          },
          {
            label: "考试时间",
@@ -487,7 +502,7 @@
                value: 3,
              },
            ],
            width: 80,
            width: 110,
          },
          {
            label: "审核明细",
@@ -495,7 +510,7 @@
            addDisplay: false,
            prop: "auditDetail",
            width:90,
            overHidden:true
            overHidden: true,
          },
          {
            label: "距考试开始时间",
@@ -503,7 +518,7 @@
            addDisplay: false,
            prop: "deadline",
            width:110,
            overHidden:true
            overHidden: true,
          },
           {
            label: "考试名单确认人",
@@ -783,4 +798,49 @@
</script>

<style lang="scss" scoped>
.dtype {
  width: 100%;
  padding-left: 0px;
}

.dx {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #dfdfdf;
}
.zc {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #29c093;
}
.yj {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f34a4a;
}
.gz {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f48f57;
}
</style>

 src/views/trainExam/modifiedGrades.vue

@@ -40,8 +40,21 @@
            @row-update="questionBankRowUpdate"
            @refresh-change="refreshChange"
          >
            <template slot-scope="{ row }" slot="status">
              <el-tag class="dtype">
                {{
                  row.status == 2
                    ? "审核通过"
                    : row.status == 3
                    ? "审核不通过"
                    : "待审核"
                }}
                <i class="zc" v-if="row.status == 2"></i>
                <i class="yj" v-if="row.status == 3"></i>
                <i class="gz" v-if="row.status == 1"></i>
              </el-tag>
            </template>
            <!-- 自定义按钮 -->

            <template slot="menuLeft">
              <el-button
                type="primary"
@@ -52,6 +65,10 @@
                @click="handleBatchAudit"
                >批量审批
              </el-button>
              <!--图例 components-->
              <span>
                <Legend :datas="datalistLIU"></Legend>
              </span>
            </template>

            <template slot-scope="{ type, size, row }" slot="menu">
@@ -111,9 +128,28 @@
} from "@/api/examapi/modifiedGrades";
import { mapGetters } from "vuex";
import { getRoleDetail } from "@/api/system/role";
import Legend from "@/components/liu-legend/Legend";
export default {
  components: {
    Legend,
  },
  data() {
    return {
      //legend-liu数据
      datalistLIU: [
        {
          color: "#29C093",
          text: "审核通过",
        },
        {
          color: "#F34A4A",
          text: "审核不通过",
        },
        {
          color: "#F48F57",
          text: "待审核",
        },
      ],
      Audit: {},
      dialogFormVisible: false,
      dialogBatchAudit: false,
@@ -259,7 +295,7 @@
        selection: true,
        reserveSelection: true,
        tip: false,
        viewBtn: true,
        viewBtn: false,
        // title: '成绩',
        align: "center",
        height: "auto",
@@ -272,7 +308,7 @@
        dialogClickModal: false,
        // 操作栏宽度
        menu: true,
        menuWidth: 220,
        menuWidth: 160,
        labelWidth: 120,
        ...this.$store.state.control.clearOtherBut,
        column: [
@@ -304,7 +340,7 @@
              },
            ],
            width: 210,
            // overHidden:true,
            overHidden:true,
          },

          {
@@ -368,7 +404,8 @@
                trigger: "blur",
              },
            ],
            width: 230,
            width: 200,
            overHidden:true
          },

          {
@@ -455,6 +492,7 @@
            // 表单编辑时是否可见
            editDisplay: true,
            // 表单编辑时是否为查看模式
            width:200,
            editDetail: false,
            overHidden: true,
          },
@@ -474,14 +512,16 @@
            editDisplay: true,
            // 表单编辑时是否为查看模式
            editDetail: false,
            minWidth:70,
            overHidden:true
          },

          {
            label: "修改申请时间",
            prop: "createTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd  HH:mm:ss",
            slot: true,
            searchSpan: 4,
            // 表单新增时是否禁止
@@ -497,15 +537,15 @@
            // 表单编辑时是否为查看模式
            editDetail: false,
            viewDisplay: false,
            width: 120,
            width: 130,
          },

          {
            label: "审核时间",
            prop: "auditTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd  HH:mm:ss",
            slot: true,
            searchSpan: 4,
            // 表单新增时是否禁止
@@ -521,7 +561,7 @@
            // 表单编辑时是否为查看模式
            editDetail: false,
            viewDisplay: false,
            width: 120,
            width: 130,
          },

          {
@@ -557,7 +597,7 @@
            editDisplay: true,
            // 表单编辑时是否为查看模式
            editDetail: false,
            width: 96,
            width: 110,
          },

          {
@@ -848,4 +888,50 @@
.morpheus-box {
  position: relative;
}

.dtype {
  width: 100%;
  padding-left: 0px;
}

.dx {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #dfdfdf;
}
.zc {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #29c093;
}
.yj {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f34a4a;
}
.gz {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f48f57;
}
</style>