FE-V2-PC/src/views/safetyInfo/infoConfig.vue

<!--信息牌配置-->
<template>
  <div class="creditScoreList">
    <div class="title-box">
      <p>信息牌配置</p>
      <p class="reset-button-one" @click="handleClick('','','back')"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="rewardPointsListPage">
      <el-table v-loading="loading" border :data="tableData" style="margin-top:20px;">
        <el-table-column label="类目名称" align="left" prop="classifyName"/>
        <el-table-column label="内容类型" align="left" prop="classifyType">
          <template slot-scope="scope">
            <span v-if="scope.row.classifyType==1">文字</span>
            <span v-if="scope.row.classifyType==2">图片</span>
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="left" prop="showColour">
          <template slot-scope="scope">
            <p :style="'width:40px;height:23px;margin:0;background:'+scope.row.showColour"></p>
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="left" prop="createBy"/>
        <el-table-column label="创建时间" align="left" prop="createTime"/>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p">
                <el-switch
                  @click.native="categoryShow(scope.row)"
                  class="category-switch captcha-img"
                  :active-value="1"
                  :inactive-value="2"
                  active-color="#FF9900"
                  inactive-color="#999"
                  v-model="scope.row.isShow"
                  active-text="启用"
                  inactive-text="停用"
                  disabled
                ></el-switch>
              </p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="" align="left" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <el-input
              onkeyup="value=value.replace(/[^\d]/g,'')"
              :disabled="scope.row.isSpecial==2"
              class="serial"
              v-model="scope.row.sort"
              @change="categorySort(scope.row)"
              maxLength="3"
              placeholder="序号">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="margin-top:20px;"
        v-show="total>0"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { creditScoreList } from "@/api/exam/record";
import { infoCategoryAdd, infoCategoryDelete, infoCategoryList, infoCategoryPut } from '@/api/laboratory/safetyInfo'
export default {
  name: "creditScoreList",
  props: {
    propsData:{},
  },
  data() {
    return {
      //加载状态
      loading:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        remark:'sort'
      },
      //列表数据
      tableData:[],
      total:0,

    }
  },
  created(){
    this.getList()
  },
  methods:{
    //返回上级页面
    backPage(){
      this.$parent.goPage(1);
    },
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='add'){//添加
        this.open = true;
      }else if(doType=='back'){//返回
        this.$parent.handleClick('','','back');
      }
    },
    categoryShow(row){
      let _this=this;
      let num=0;
      for(let i=0;i< this.tableData.length;i++){
        if(this.tableData[i].isShow==1){
          num++
        }
      }
      if(num>=8 && row.isShow==2){
        this.msgError("信息牌启用个数不能超过8个!");
      }else{
        let obj={
          id:row.id,
          isShow:row.isShow==1?2:1,
          sort:row.sort,
        }
        infoCategoryPut(obj).then( response => {
          this.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      }

    },
    categorySort(row){
      let obj={
        id:row.id,
        sort:row.sort,
      }
      infoCategoryPut(obj).then( response => {
        this.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    /** 查询数据 */
    getList() {
      this.loading = true;
      infoCategoryList(this.queryParams).then( response => {
        this.tableData =  response.rows;
        this.total =  response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
      this.handleQuery();
    },
  },
}
</script>

<style lang="scss">
.serial{
  width: 60px;
}
.category-show{
  width: 80px;
  .category-switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
  }


  .category-switch .el-switch__label--right span {
    margin-left: 10px;
  }

  .category-switch .el-switch__label--left {
    z-index: 1;
  }

  .category-switch .el-switch__label--left span {
    margin-left: 24px;
  }

  .category-switch .el-switch__label.is-active {
    display: block;
  }

  .category-switch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 72px !important;
    margin: 0;
  }
}
</style>

<style scoped lang="scss">
.creditScoreList {
  flex:1;
  display: flex!important;
  flex-direction: column;
  overflow: hidden;
  *{
    margin:0;
  }
  .title-box{
    display: flex;
    border-bottom: 1px solid #E0E0E0;
    p:nth-child(1){
      flex:1;
      line-height:80px;
      color:#0045AF;
      font-size:18px;
      margin-left:20px;
    }
    p:nth-child(2){
      margin:20px;
    }
  }
  .rewardPointsListPage{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    padding:20px;
  }
}
</style>