FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/ChemicalInfo/listPage.vue

<!--关联化学品柜-->
<template>
  <div class="listPage">
    <div class="title-box">
      <p>关联化学品柜</p>
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="listPage-min">
      <el-form :model="queryParamsData" ref="queryForm" :inline="true" label-width="68px">
        <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="status">
          <el-select v-model="queryParamsData.status" 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="handleAdd"
            >化学品存放</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="joinNum"  show-overflow-tooltip/>
        <el-table-column label="容量规格" align="center" prop="chemicalAmountUnit"  show-overflow-tooltip/>
        <el-table-column label="容器规格" align="center" prop="tare"  show-overflow-tooltip/>
        <el-table-column label="过期时间" align="center" prop="expireTime"  show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.expireTime?scope.row.expireTime:'未设定'}}</template>
        </el-table-column>
        <el-table-column label="化学品柜" align="center" prop="cabinetName"  show-overflow-tooltip/>
        <el-table-column label="柜锁名称" align="center" prop="lockName"  show-overflow-tooltip v-if="$store.state.settings.smartAlarmType == 1"/>
        <el-table-column label="化学品柜位置" align="center" prop="posi"  show-overflow-tooltip/>
        <el-table-column label="化学品柜编号" align="center" prop="cabinetNum"  width="160px"/>
        <el-table-column label="入库状态" align="center" prop="cabinetStatus" width="100px" />
        <el-table-column label="关联时间" align="center" prop="createTime" width="180px"/>
        <el-table-column label="操作人" align="center" prop="createBy" width="120px"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="110" v-if="tableButtonType">
          <template slot-scope="scope">
            <p class="table-min-button"
               v-if="scope.row.status == 0"
               @click="delRow(scope.row)"
               v-hasPermi="['exam:el_classify:remove']"
            >删除</p>
          </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>
    <el-dialog title="化学品存放" :visible.sync="dialogType" v-if="dialogType" width="990px" append-to-body class="ChemicalInfo-listPage-dialog">
      <!--<p class="dialog-title">{{dialogDeptName}}</p>-->
      <el-form :model="dialogData" ref="dialogForm" :inline="true" :rules="rules" label-width="70px">
        <el-form-item label="实验室" prop="subId">
            <el-select
              style="width:485px;"
              v-model="dialogData.subId"
              filterable
              remote
              clearable
              @focus="selectFocus"
              reserve-keyword
              @change="selectClick"
              @clear="clearClick"
              placeholder="搜索选择实验室"
              :remote-method="getSelectList"
              :loading="loading">
              <el-option
                v-for="item in selectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        <p style="margin:0 0 20px 15px;font-weight:700;font-size:14px;" v-if="dialogData.maxList[0]&&dialogData.subId">设置要存放的化学品规格和数量</p>
        <p style="margin:0 0 0 70px;font-weight:700;font-size:14px;color:#FF6666;" v-if="!dialogData.maxList[0]&&dialogData.subId">该实验室未配置化学品柜</p>
        <div class="scrollbar-box" style="width:950px;margin:0 auto;max-height:500px;overflow-y: scroll" v-if="$store.state.settings.smartAlarmType == 1">
          <div class="for-max-big-box" v-for="(item,index) in dialogData.maxList">
            <div class="for-max-title-box">
              <p></p>
              <p>{{item.name}}</p>
              <p>{{listPropsData.chemicalName}}可存放量：{{item.maxNum}}{{listPropsData.chemicalUnit}}</p>
            </div>
            <div class="for-big-box" v-for="(bigItem,bigIndex) in item.chemicalJoinCabinetSonList">
              <p class="for-big-title-p">{{bigItem.lockName}}</p>
              <div class="for-big-for-max-box">
                <div class="for-big-for-max-title-box">
                  <p>化学品存放规格</p>
                  <p @click="addList(index,bigIndex)">+添加</p>
                </div>
                <div class="for-min-box" v-for="(minItem,minIndex) in bigItem.list">
                  <el-form-item class="num-input-item" label="容器容量规格" label-width="120px" :prop="'maxList.'+ index +'.chemicalJoinCabinetSonList.'+bigIndex+'.list.'+minIndex+'.chemicalAmount'" :rules="rules.chemicalAmount">
                    <div class="num-input-min-box">
                      <el-input-number
                        style="width:110px;"
                        :min="null"
                        :max="5000"
                        :precision="2"
                        :step="0.01"
                        v-model="minItem.chemicalAmount"
                        placeholder="请输入">
                      </el-input-number>
                      <p class="num-title-span">{{listPropsData.chemicalUnit}}</p>
                    </div>
                  </el-form-item>
                  <el-form-item class="num-input-item" label="容器重量规格" label-width="120px" :prop="'maxList.'+ index +'.chemicalJoinCabinetSonList.'+bigIndex+'.list.'+minIndex+'.tare'" :rules="rules.tare">
                    <div class="num-input-min-box">
                      <el-input-number
                        style="width:110px;"
                        :min="null"
                        :max="5000"
                        :precision="2"
                        :step="0.01"
                        v-model="minItem.tare"
                        placeholder="请输入">
                      </el-input-number>
                      <p class="num-title-span">g</p>
                    </div>
                  </el-form-item>
                  <el-form-item label="存放数量" label-width="90px" :prop="'maxList.'+ index +'.chemicalJoinCabinetSonList.'+bigIndex+'.list.'+minIndex+'.storageNum'" :rules="rules.storageNum" class="el-form-item-button-box">
                    <el-input-number
                      style="width:150px;"
                      :min="1"
                      :max="1000"
                      :step="1"
                      v-model="minItem.storageNum"
                      placeholder="请输入">
                    </el-input-number>
                  </el-form-item>
                  <span class="el-icon-delete" style="margin-left:30px;color:#999;line-height:40px;font-size:24px;cursor: pointer;" @click="delList(index,bigIndex,minIndex)"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="scrollbar-box" style="width:950px;margin:0 auto;max-height:500px;overflow-y: scroll" v-if="$store.state.settings.smartAlarmType == 0">
          <div class="for-max-big-box" v-for="(item,index) in dialogData.maxList">
            <div class="for-max-title-box">
              <p></p>
              <p>{{item.name}}</p>
              <p>{{listPropsData.chemicalName}}可存放量：{{item.maxNum}}{{listPropsData.chemicalUnit}}</p>
            </div>
            <div class="for-big-box">
              <div class="for-big-for-max-box">
                <div class="for-big-for-max-title-box">
                  <p>化学品存放规格</p>
                  <p @click="addList(index)">+添加</p>
                </div>
                <div class="for-min-box" v-for="(bigItem,bigIndex) in item.list">
                  <el-form-item class="num-input-item" label="容器容量规格" label-width="120px" :prop="'maxList.'+ index +'.list.'+ bigIndex+'.chemicalAmount'" :rules="rules.chemicalAmount">
                    <div class="num-input-min-box">
                      <el-input-number
                        style="width:110px;"
                        :min="null"
                        :max="5000"
                        :precision="2"
                        :step="0.01"
                        v-model="bigItem.chemicalAmount"
                        placeholder="请输入">
                      </el-input-number>
                      <p class="num-title-span">{{listPropsData.chemicalUnit}}</p>
                    </div>
                  </el-form-item>
                  <el-form-item class="num-input-item" label="容器重量规格" label-width="120px" :prop="'maxList.'+ index +'.list.'+ bigIndex+'.tare'" :rules="rules.tare">

                    <div class="num-input-min-box">
                      <el-input-number
                        style="width:110px;"
                        :min="null"
                        :max="5000"
                        :precision="2"
                        :step="0.01"
                        v-model="bigItem.tare"
                        placeholder="请输入">
                      </el-input-number>
                      <p class="num-title-span">g</p>
                    </div>
                  </el-form-item>
                  <el-form-item label="存放数量" label-width="90px" :prop="'maxList.'+ index +'.list.'+ bigIndex+'.storageNum'" :rules="rules.storageNum" class="el-form-item-button-box">
                    <el-input-number
                      style="width:150px;"
                      :min="1"
                      :max="1000"
                      :step="1"
                      v-model="bigItem.storageNum"
                      placeholder="请输入">
                    </el-input-number>
                  </el-form-item>
                  <span class="el-icon-delete" style="margin-left:30px;color:#999;line-height:40px;font-size:24px;cursor: pointer;" @click="delList(index,bigIndex)"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getHxpChemicalJoinCabinet,delHxpChemicalJoinCabinet,filterDept,getSubList,getCabinetBySubId,hxpChemicalJoinCabinet,getRestStockByManyCabinet } from "@/api/medicUniversity-3_1/index";
  import { getLogoInfo } from "@/api/system/publicConfig";
  export default {
    name: "listPage",
    props:{
      listPropsData:{},
    },
    data() {
      const computingCapacity = (rule, value, callback) => {
        console.log('rule',rule)
        const list = rule.field.split('.');
        let index = parseInt(list[1]);
        let max = parseInt(this.dialogData.maxList[index].maxNum);
        if(value>max){
            callback(new Error("超出该机柜可存放量"));
        }else{
          callback();
        }
      };
      return {
        //限制时间范围
        pickerBeginOption: {
          disabledDate: (time) => {
            return time.getTime() < Date.now()-1 * 24 * 60 * 60 * 1000
          }
        },
        // table操作按钮校验
        tableButtonType:this.hasPermiDom(['system:user_student:query','system:user_student:query','system:user_student:edit','system:user_student:remove','system:user_student:resetpwd']),
        loading:false,
        //数据数量
        total:0,
        tableList:[],
        //实验室列表
        optionsListOne:[],
        //状态列表
        optionsListTwo:[{id:"0",name:"未入库"},{id:"1",name:"已入库"},{id:"2",name:"已出库"}],
        // 搜索数据
        queryParamsData:{
          pageNum:1,
          pageSize:20,
        },
        // 搜索实际发送数据
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        dialogType:false,
        dialogData:{
          subId:"",
          chemicalId:"",
          maxList:[],
        },
        // 查询
        selectList:[],
        //校验
        rules:{
          subId:[
            { required: true, message: '请搜索选择实验室', trigger: 'blur' },
          ],
          chemicalAmount:[
            { required: true, message: '请输入容器容量', trigger: 'blur' },
            { required: true, message: "请输入容器容量", validator: this.spaceJudgment, trigger: "blur" },
            { required: true, message: "超出该机柜可存放量", validator: computingCapacity, trigger: "blur" },
          ],
          tare:[
            { required: true, message: '请输入容器自重', trigger: 'blur' },
            { required: true, message: "请输入容器自重", validator: this.spaceJudgment, trigger: "blur" }
          ],
          storageNum:[
            { required: true, message: '请输入存放数量', trigger: 'blur' },
            { required: true, message: "请输入存放数量", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //查询历史记录
        recordList:[],
        dialogDeptName:"",
        dialogDeptId:"",
      };
    },
    created() {

    },
    mounted(){
      this.getList();
      this.getRecord();
    },
    methods: {
      selectFocus(){
        if(!this.selectList[0]){
          this.getSubList();
        }
      },
      timeChange(){
        this.$forceUpdate();
      },
      //删除规格
      delList(index,bigIndex,minIndex){
        if(this.$store.state.settings.smartAlarmType == 1){
          this.dialogData.maxList[index].chemicalJoinCabinetSonList[bigIndex].list.splice(minIndex,1);
        }else{
          this.dialogData.maxList[index].list.splice(bigIndex,1);
        }
      },
      //新增规格
      addList(index,bigIndex){
        if(this.$store.state.settings.smartAlarmType == 1){
          this.dialogData.maxList[index].chemicalJoinCabinetSonList[bigIndex].list.push({chemicalAmount:"",tare:"",storageNum:1,})
        }else{
          this.dialogData.maxList[index].list.push({chemicalAmount:"",tare:"",storageNum:1,})
        }
      },
      // 提交
      submitForm(){
        let self = this;
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            if(this.$store.state.settings.smartAlarmType == 0){
              for(let i=0;i<self.dialogData.maxList.length;i++){
                let maxNum = parseFloat(self.dialogData.maxList[i].maxNum);
                let num = 0;
                for(let o=0;o<self.dialogData.maxList[i].list.length;o++){
                  num = num + parseFloat(self.dialogData.maxList[i].list[o].chemicalAmount)
                }
                if(num>maxNum){
                  this.msgError(self.dialogData.maxList[i].name+' 总容器容量大于可存放量');
                  return
                }
              }
            }else if(this.$store.state.settings.smartAlarmType == 1){
              for(let i=0;i<self.dialogData.maxList.length;i++){
                let maxNum = parseFloat(self.dialogData.maxList[i].maxNum);
                let num = 0;
                for(let o=0;o<self.dialogData.maxList[i].chemicalJoinCabinetSonList.length;o++){
                  for(let x=0;x<self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list.length;x++){
                    num = num + parseFloat(self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list[x].chemicalAmount)
                  }
                }
                if(num>maxNum){
                  this.msgError(self.dialogData.maxList[i].name+' 总容器容量大于可存放量');
                  return
                }
              }
            }
            let obj = {
              subId:this.dialogData.subId,
              chemicalId:this.listPropsData.id,
              chemicalJoinCabinetSonList:[],
            }
            if(this.$store.state.settings.smartAlarmType == 1){
              for(let i=0;i<self.dialogData.maxList.length;i++){
                for(let o=0;o<self.dialogData.maxList[i].chemicalJoinCabinetSonList.length;o++){
                  for(let x=0;x<self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list.length;x++){
                    let newObj = {
                      cabinetId:self.dialogData.maxList[i].cabinetId,
                      cabinetlockId:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].id,
                      chemicalAmount:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list[x].chemicalAmount,
                      chemicalAmountUnit:self.listPropsData.chemicalUnit,
                      storageNum:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list[x].storageNum,
                      tare:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list[x].tare,
                    }
                    obj.chemicalJoinCabinetSonList.push(newObj);
                  }
                }
              }
            }else{
              for(let i=0;i<self.dialogData.maxList.length;i++){
                for(let o=0;o<self.dialogData.maxList[i].list.length;o++){
                  console.log(self.dialogData.maxList[i].list[o]);
                  let newObj = {
                    cabinetId:self.dialogData.maxList[i].cabinetId,
                    chemicalAmount:self.dialogData.maxList[i].list[o].chemicalAmount,
                    chemicalAmountUnit:self.listPropsData.chemicalUnit,
                    storageNum:self.dialogData.maxList[i].list[o].storageNum,
                    tare:self.dialogData.maxList[i].list[o].tare,
                  }
                  obj.chemicalJoinCabinetSonList.push(newObj);
                }
              }
            }
            if(obj.chemicalJoinCabinetSonList[0]){
              hxpChemicalJoinCabinet(obj).then(response => {
                self.dialogType = false;
                self.msgSuccess(response.msg)
                self.resetQuery();
              });
            }else{
              self.msgError('请添加规格')
            }
          }
        })
      },
      //取消
      cancel(){
        this.dialogType = false;
      },
      //选中触发
      selectClick(data){
        let self = this;
        if(data){
          for(let i=0;i<self.selectList.length;i++){
            if(data == self.selectList[i].id){
              let num = 0;
              for(let o=0;o<self.recordList.length;o++){
                if(data == self.recordList[o].id){
                  num ++
                }
              }
              if(num == 0){
                if(self.recordList.length>9){
                  self.recordList.splice(0,1)
                }
                self.recordList.push(self.selectList[i])
                this.$forceUpdate();
                localStorage.setItem('subRecord',JSON.stringify(self.recordList))
                break
              }
            }
          }
          let obj ={
            subId:data,
            cabinetStatus:1
          }
          getCabinetBySubId(obj).then(response => {
            let list = [];
            for(let i=0;i<response.data.length;i++){
              if(self.$store.state.settings.smartAlarmType == 1){
                if(response.data[i].cabinetLockList[0]){
                  let obj ={
                    name:response.data[i].cabinetName,
                    cabinetId:response.data[i].id,
                    chemicalJoinCabinetSonList:response.data[i].cabinetLockList
                  };
                  for(let o=0;o<obj.chemicalJoinCabinetSonList.length;o++){
                    obj.chemicalJoinCabinetSonList[o].list = [];
                  }
                  list.push(obj);
                }
              }else{
                let obj ={
                  name:response.data[i].cabinetName,
                  cabinetId:response.data[i].id,
                  list:[]
                };
                list.push(obj);
              }
            }
            let newObj = {
              chemicalId:self.listPropsData.id,
              cabinetIds:"",
            }
            for(let i=0;i<list.length;i++){
              if(i==0){
                newObj.cabinetIds = list[i].cabinetId;
              }else{
                newObj.cabinetIds = newObj.cabinetIds +','+ list[i].cabinetId;
              }
            }
            if(list[0]){
              getRestStockByManyCabinet(newObj).then(response => {
                for(let i=0;i<response.data.length;i++){
                  for(let o=0;o<list.length;o++){
                    if(response.data[i].cabinetId == list[o].cabinetId){
                      list[o].maxNum = response.data[i].restStock;
                    }
                  }
                }
                this.$set(this.dialogData,"maxList",list);
              })
            }else{
              this.$set(this.dialogData,"maxList",list);
            }
          });
        }
      },
      //清空触发
      clearClick(){
        // this.optionsUser = [];
        // this.getList();
        this.getRecord();
        this.dialogData.maxList = [];
      },
      //查询
      getSelectList(val){
        let self = this;
        let list = [];
        for(let i=0;i<self.selectListData.length;i++){
          if(self.selectListData[i].name.indexOf(val) != -1){
            list.push(self.selectListData[i]);
          }
        }
        this.selectList = JSON.parse(JSON.stringify(list))
      },
      //化学品存放
      handleAdd(){
        //查询当前院系
        filterDept().then(response => {
          let text = "";
          let idText = "";
          for(let i=0;i<response.data.length;i++){
            if(i==0){
              text = text + response.data[i].deptName;
              idText = idText + response.data[i].deptId;
            }else{
              text = text +'-'+ response.data[i].deptName;
              idText = idText +','+ response.data[i].deptId;
            }
          }
          this.$set(this,'dialogDeptName',text);
          this.$set(this,'dialogDeptId',idText);
          this.getSubList();
        });
      },
      backPage(){
        this.$parent.pageToggle(1);
      },
      //获取数据列表
      getList(){
        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
        this.queryParamsData.chemicalId = this.listPropsData.id;
        getHxpChemicalJoinCabinet(this.queryParamsData).then(response => {
          this.tableList = response.rows;
          this.total = response.total
        });
      },
      //删除
      delRow(row){
        let self = this;
        this.$confirm('确认要删除吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          delHxpChemicalJoinCabinet(row.id).then(response => {
            if(response.code == 200){
              self.msgSuccess(response.msg)
              self.getList();
            }
          });
        }).then(() => {
        }).catch(() => {});
      },
      /** 搜索按钮操作 */
      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();
      },
      //获取选择记录
      getRecord(){
        if(localStorage.getItem('subRecord')){
          //历史记录
          this.recordList = JSON.parse(localStorage.getItem('subRecord'));
          //当前列表
          this.selectList = JSON.parse(localStorage.getItem('subRecord'));
        }else{
          this.recordList = [];
          this.selectList = [];
        }
      },
      //根据所属院系或多个院系获取实验室列表
      getSubList(){
        let ids = this.dialogDeptId+'';
        getSubList(ids).then(response => {
          this.$set(this,'dialogData',{
            subId:"",
            chemicalId:"",
            maxList:[],
          });
          //当前列表
          this.selectList = JSON.parse(JSON.stringify(response.data));
          //原始列表数据
          this.selectListData = JSON.parse(JSON.stringify(response.data));
          this.dialogType = true;
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .listPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-weight:500;
    p{
      margin:0;
      padding:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .listPage-min{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
    }
  }
</style>
<style lang="scss">
  .ChemicalInfo-listPage-dialog{
    p{
      margin:0;
    }
    .dialog-title{
      margin-left:10px;
      margin-bottom:20px;
      font-weight:700;
    }
    .for-max-big-box{
      padding:20px;
      background: #f5f5f5;
      margin-bottom:12px;
      .for-max-title-box{
        display: flex;
        p:nth-child(1){
          background: #0045AF;
          width: 3px;
          height: 16px;
        }
        p:nth-child(2){
          flex:1;
          height: 16px;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          margin-left:12px;
        }
        p:nth-child(3){
          font-size:16px;
          line-height: 16px;
          color:#0183FA;
        }
      }
      .for-big-box{
        margin-top:20px;
        .for-big-title-p{
          height:50px;
          line-height:50px;
          padding:0 22px;
          font-size: 16px;
          color:#333333;
          background: #CCE6FE;
        }
        .for-big-for-max-box{
          border:1px solid #E0E0E0;
          .for-big-for-max-title-box{
            height:60px;
            display: flex;
            p:nth-child(1){
              flex:1;
              font-size:14px;
              line-height:60px;
              margin-left:22px;
            }
            p:nth-child(2){
              width:80px;
              height: 30px;
              line-height:30px;
              border-radius: 6px;
              border: 1px solid #0045AF;
              text-align: center;
              margin:16px 14px;
              color:#0045AF;
              font-size:12px;
              cursor: pointer;
            }
          }
          .for-min-box{
            margin-bottom:10px;
          }
        }
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none!important;
      }
      /* 在Firefox浏览器下 */
      input[type="number"]{
        -moz-appearance: textfield!important;
      }
      .el-form-item__label{
        font-weight:400;
      }
      .el-form-item-button-box{
        .el-input-number__decrease{
          height:38px;
          width:38px;
          line-height:38px;
        }
        .el-input-number__increase{
          height:38px;
          width:38px;
          line-height:38px;
        }
      }
    }
  }
</style>