FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/CabinetManagement/index.vue

<!--化学品柜管理-->
<template>
  <div class="app-container CabinetManagement">
    <div class="CabinetManagement-page" v-if="pageType == 1">
      <el-form :model="queryParamsData" ref="queryForm" :inline="true">
        <el-form-item label="关键字" prop="searchValue">
          <el-input
            maxlength="20"
            v-model="queryParamsData.searchValue"
            placeholder="化学品柜/编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="学院" prop="deptId">
          <el-select v-model="queryParamsData.deptId" clearable placeholder="请选择学院">
            <el-option
              v-for="item in optionsListOne"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="cabinetStatus">
          <el-select v-model="queryParamsData.cabinetStatus" clearable placeholder="请选择状态">
            <el-option
              v-for="item in optionsListTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-col :span="1.5">
            <p class="add-button-one-90"
               @click="pageToggle(2)"
               v-hasPermi="['chemical:hxpCabinet:add']"
            >新增</p>
          </el-col>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="tableList">
        <el-table-column label="化学品柜编号" align="center" prop="cabinetNum" show-overflow-tooltip/>
        <el-table-column label="化学品柜" align="center" prop="cabinetName" show-overflow-tooltip/>
        <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip/>
        <el-table-column label="化学品柜位置" align="center" prop="posi" show-overflow-tooltip/>
        <el-table-column label="状态" align="center" prop="cabinetStatus" width="120" v-hasPermi="['chemical:hxpCabinet:edit']">
          <template slot-scope="scope">
            <el-switch
              @click.native="changeIsNeedCaptcha(scope.row)"
              class="switch captcha-img"
              :active-value="1"
              :inactive-value="0"
              active-color="#0183FA"
              inactive-color="#999"
              v-model="scope.row.cabinetStatus"
              active-text="启用"
              inactive-text="停用"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="创建人" align="center" prop="createBy" />
        <el-table-column label="负责人" align="center" prop="safeUserName"  show-overflow-tooltip/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240" v-if="tableButtonType">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p" v-show="scope.row.cabinetLockList[0]&&$store.state.settings.smartAlarmType == 1" v-hasPermi="['chemical:locklog2:list']" @click="pageToggle(4,scope.row)">智能锁</p>
              <p class="table-button-p" v-hasPermi="['chemical:hxpCabinet:joinList']" @click="pageToggle(3,scope.row)">化学品</p>
              <el-dropdown @command="moreClick" v-hasPermi="['chemical:hxpCabinet:query','chemical:hxpCabinet:edit','chemical:hxpCabinet:remove']">
                <p class="table-button-p">更多>></p>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:1}" v-hasPermiAnd="['chemical:hxpCabinet:query','chemical:hxpCabinet:edit']">编辑</el-dropdown-item>
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:2}" v-hasPermi="['chemical:hxpCabinet:remove']">删除</el-dropdown-item>
                  <el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:3}">二维码</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!--新增/编辑-->
    <add-page v-if="pageType == 2" :addPropsData="addPropsData"></add-page>
    <!--化学品详情-->
    <list-page v-if="pageType == 3" :listPropsData="listPropsData"></list-page>
    <!--智能锁-->
    <smart-lock v-if="pageType == 4" :smartLockPropsData="smartLockPropsData"></smart-lock>
    <qr-code-dialog v-if="qrCodeDialogType" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>
  </div>
</template>

<script>
  import { hxpCabinetList,getHxpCabinetInfo,putHxpCabinet,delHxpCabinet } from "@/api/medicUniversity-3_1/index";
  import { listDepartments } from "@/api/system/dept";
  import addPage from "./addPage.vue"
  import listPage from "./listPage.vue"
  import smartLock from "./smartLock.vue"
  import qrCodeDialog from "@/components/qrCodeDialog/index.vue"
  export default {
    name: "CabinetManagement",
    components: {
      addPage,
      listPage,
      smartLock,
      qrCodeDialog
    },
    data() {
      return {
        // table操作按钮校验
        tableButtonType:this.hasPermiDom(['chemical:hxpCabinet:joinList','chemical:hxpCabinet:query','chemical:hxpCabinet:edit','chemical:hxpCabinet:remove']),
        pageType:1,
        loading:false,
        //学院列表
        optionsListOne:[],
        //状态列表
        optionsListTwo:[
          {id:"1",name:"启用"},{id:"0",name:"停用"},
        ],
        // 搜索数据
        queryParamsData:{
          pageNum:1,
          pageSize:20,
        },
        // 搜索实际发送数据
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        //数据数量
        total:0,
        tableList:[],
        //编辑页面传参
        addPropsData:{},
        //化学品页面传参
        listPropsData:{},
        //智能锁页面传参
        smartLockPropsData:{},
        //二维码组件参数
        qrCodeDialogType:false,
        qrCodeDialogData:{},
      };
    },
    created() {

    },
    mounted(){
      this.listDepartments();
      this.getList();
    },
    methods: {
      //更多选项
      moreClick(data){
        let self = this;
        if(data.command == 1){
          //编辑
          getHxpCabinetInfo(data.row.id).then(response => {
            this.addPropsData = response.data;
            this.pageType = 2;
          });
        }else if(data.command == 2){
          if(data.row.cabinetLockList[0]){
            this.msgError('已关联柜锁,无法删除')
            return
          }
          // this.msgError('该化学试剂有存放库存,无法删除,请先操作出库.');
          this.$confirm('确认要删除吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            delHxpCabinet(data.row.id).then(response => {
              self.msgSuccess(response.msg);
              self.pageToggle(1,'get');
            });
          }).then(() => {
          }).catch(() => {});
        }else if(data.command == 3){
          console.log('二维码')
          this.qrCodeDialogButton(1,data.row.id,data.row.cabinetName)
        }
      },
      //二维码组件开关
      qrCodeDialogButton(type,id,name){
        if(type == 1){
          this.$set(this,'qrCodeDialogData',{
            type:'chemicalsCabinet',          //二维码类型 用于区分二维码功能类型
            parameter:id,                     //二维码参数
            name:name,                        //二维码名称用于下载时命名
          });
          this.$set(this,'qrCodeDialogType',true);
        }else{
          this.$set(this,'qrCodeDialogType',false);
        }
      },
      //启用/停用
      changeIsNeedCaptcha(item){
        let obj = {
          id:item.id,
        }
        if(item.cabinetStatus == 1){
          obj.cabinetStatus = 0;
        }else{
          obj.cabinetStatus = 1;
        }
        putHxpCabinet(obj).then(response => {
          this.msgSuccess(response.msg)
          this.pageToggle(1,'get');
        });
      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          this.optionsListOne = response.data;
        });
      },
      pageToggle(type,item){
        if(type == 1){
          this.pageType = 1;
          if(item == 'refresh'){
            this.resetQuery();
          }else if(item == 'get'){
            this.getList();
          }
        }else if(type == 2){
          //新增
          this.addPropsData = {};
          this.pageType = 2;
        }else if(type == 3){
          //化学品详情
          this.listPropsData = item;
          this.pageType = 3;
        }else if(type == 4){
          //智能锁
          this.smartLockPropsData = item;
          this.pageType = 4;
        }
      },
      //获取数据列表
      getList(){
        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
        hxpCabinetList(this.queryParamsData).then(response => {
          this.tableList = response.rows;
          this.total = response.total
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParamsData.pageNum = 1;
        this.queryParamsData.pageSize = 20;
        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParamsData',{});
        this.$set(this,'queryParams',{});
        this.handleQuery();
      },
    }
  }
</script>

<style scoped lang="scss">
  .CabinetManagement{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    p{
      margin:0;
      padding:0;
    }
    .CabinetManagement-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
      .button-box{
        display: flex;
      }
    }
  }
</style>
<style lang="scss">
  .CabinetManagement-page{
    .switch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    .switch .el-switch__label--right {
      z-index: 1;
    }
    .switch .el-switch__label--right span{
      margin-left:10px;
    }
    .switch .el-switch__label--left {
      z-index: 1;
    }
    .switch .el-switch__label--left span{
      margin-left: 24px;
    }
    .switch .el-switch__label.is-active {
      display: block;
    }
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 64px !important;
      margin: 0;
    }
  }
</style>