FE-V2-PC/src/views/comprehensive/laboratoryManagement/subject/instrument.vue

<template>
  <div class="instrument scrollbar-box">
    <div class="title-box">
      <p></p>
      <p class="reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="for-max-box" v-for="(item,index) in instrumentList" :key="index">
      <p class="for-name-p">{{item.equipmentName}}</p>
      <div class="for-big-box">
        <p class="for-img el-icon-data-line"></p>
        <div class="for-right-box">
          <div class="for-text-box">
            <p>负责人：</p>
            <p>{{item.userName}}</p>
          </div>
          <div class="for-text-box">
            <p>仪器编号：</p>
            <p>{{item.equipmentNum}}</p>
          </div>
          <div class="for-text-box">
            <p>仪器型号：</p>
            <p>{{item.modelNumber}}</p>
          </div>
        </div>
      </div>
      <div class="for-button-box">
        <p @click="clickButton(2,item,index)">编辑</p>
        <p @click="clickButton(3,item,index)">查看</p>
        <p @click="clickButton(4,item,index)">删除</p>
      </div>
    </div>
    <div class="add-max-box" @click="clickButton(1)">
      <i class="el-icon-plus"></i> 添加仪器
    </div>
    <el-dialog :title="dialogTitle" v-if="dialogType" :visible.sync="dialogType" @close="cancel" width="600px"
               append-to-body class="instrument-dialog-box">
      <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="rules" label-width="120px">
        <el-form-item label="仪器名称：" prop="equipmentName">
          <el-input
            :disabled="dialogLook"
            maxlength="20"
            style="width:400px;"
            v-model="dialogForm.equipmentName"
            placeholder="请输入仪器名称"/>
        </el-form-item>
        <el-form-item label="负责人：" prop="userName">
          <el-input
            :disabled="dialogLook"
            maxlength="10"
            style="width:400px;"
            v-model="dialogForm.userName"
            placeholder="请输入设备名称"/>
        </el-form-item>
        <el-form-item label="仪器类型：" prop="instrumentClass">
          <el-select v-model="dialogForm.instrumentClass"
                     :disabled="dialogLook"
                     placeholder="请选择仪器类型"
                     style="width:400px;">
            <el-option
              v-for="dict in instrumentClassOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仪器编号：" prop="equipmentNum">
          <el-input
            :disabled="dialogLook"
            maxlength="20"
            style="width:400px;"
            v-model="dialogForm.equipmentNum"
            placeholder="请输入仪器编号"/>
        </el-form-item>
        <el-form-item label="仪器型号：" prop="modelNumber">
          <el-input
            :disabled="dialogLook"
            maxlength="20"
            style="width:400px;"
            v-model="dialogForm.modelNumber"
            placeholder="请输入仪器型号"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="cancel">{{dialogLook?'关 闭':'取 消'}}</el-button>
        <el-button v-if="!dialogLook" type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'instrument',
    props:{
      newData:{},
    },
    data(){
      return{
        // 仪器类型
        instrumentClassOptions:[
          { id:1, name:"化学分析仪器" },
          { id:2, name:"电子显微镜" },
          { id:3, name:"扫描电镜" },
          { id:4, name:"光学仪器及设备" },
          { id:5, name:"光学显微镜及成像系统" },
          { id:6, name:"激光共聚焦显微镜" },
          { id:7, name:"物理性能测试仪器" },
          { id:8, name:"试验仪器及环境试验箱" },
          { id:9, name:"其它试验仪器及环境试验箱" },
          { id:10, name:"光学仪器及设备" },
          { id:11, name:"其他设备" },
        ],
        //数据
        instrumentList:[
          {
            equipmentName:"激光共聚焦显微镜",
            userName:"赵晨博",
            equipmentNum:"jggz003513211",
            modelNumber:"LSM700",
            instrumentClass:6,
          },
          {
            equipmentName:"扫描电镜",
            userName:"梁建成",
            equipmentNum:"smdj004687231",
            modelNumber:"Helios Nanolab 600i",
            instrumentClass:3,
          },
        ],
        //弹窗
        dialogType:false,
        dialogForm:{},
        dialogLook:false,
        dialogIndex:null,
        dialogTitle:"",
        // 表单校验
        rules: {
          equipmentName: [
            { required: true, message: "请输入仪器名称", trigger: "blur" },
            { required: true, message: "请输入仪器名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          userName: [
            { required: true, message: "请选择负责人", trigger: "blur" },
            { required: true, message: "请选择负责人", validator: this.spaceJudgment, trigger: "blur" }
          ],
          equipmentNum: [
            { required: true, message: "请输入仪器编号", trigger: "blur" },
            { required: true, message: "请输入仪器编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          modelNumber: [
            { required: true, message: "请输入仪器型号", trigger: "blur" },
            { required: true, message: "请输入仪器型号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          instrumentClass: [
            { required: true, message: "请选择仪器类型", trigger: "blur" },
            { required: true, message: "请选择仪器类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //vuex数据
        dataVUEX:[],
      }
    },
    created(){

    },
    mounted(){
      this.getVUEX();
    },
    methods:{
      clickButton(type,item,index){
        let self = this;
        if(type == 1){
          this.$set(this,'dialogLook',false);
          this.$set(this,'dialogIndex',null);
          this.$set(this,'dialogTitle','添加仪器');
          this.$set(this,'dialogForm',{
            equipmentName:"",
            userName:"",
            equipmentNum:"",
            modelNumber:"",
            instrumentClass:"",
          });
          this.$set(this,'dialogType',true);
        }else if (type == 2){
          this.$set(this,'dialogTitle','编辑仪器');
          this.$set(this,'dialogLook',false);
          this.$set(this,'dialogIndex',index);
          this.$set(this,'dialogForm',JSON.parse(JSON.stringify(item)));
          this.$set(this,'dialogType',true);
        }else if(type == 3){
          this.$set(this,'dialogTitle','查看仪器');
          this.$set(this,'dialogLook',true);
          this.$set(this,'dialogIndex',null);
          this.$set(this,'dialogForm',item);
          this.$set(this,'dialogType',true);
        }else if(type == 4){
          this.$confirm('确认要删除该设备?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            self.instrumentList.splice(index, 1);
            self.setVUEX();
          }).catch(function() {
            //  取消
          });
        }
      },
      //本地数据存储
      setVUEX(){
        let self = this;
        let num = 0;
        for(let i=0;i<self.dataVUEX.length;i++){
          if(self.newData.id == self.dataVUEX[i].id){
            self.dataVUEX[i] = {
              id:self.newData.id,
              list:self.instrumentList
            }
            num++
          }
        }
        if(num == 0){
          this.dataVUEX.push({
            id:self.newData.id,
            list:self.instrumentList
          })
        }
        this.$store.dispatch("setInstrument", this.dataVUEX);
      },
      //本地数据读取
      getVUEX(){
        let self = this;
        let list = this.$store.getters.instrument;
        for(let i=0;i<list.length;i++){
          this.$set(self,'instrumentList',this.instrumentList.concat(list[i].list));
        }
        this.$set(this,'dataVUEX',list);

      },
      //返回上一页
      backPage(){
        this.$parent.clickPage(1);
      },
      //关闭
      cancel(){
        this.$set(this,'dialogType',false);
      },
      //提交
      submitForm(){
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            if(this.dialogIndex){
              this.instrumentList[this.dialogIndex] = this.dialogForm;
            }else{
              this.instrumentList.push(this.dialogForm);
            }
            this.setVUEX();
            this.msgSuccess('操作成功')
            this.$set(this,'dialogType',false);
          }
        })
      },
    },

  }
</script>
<style scoped lang="scss">
  .instrument{
    flex:1;
    border-radius:10px!important;
    margin:5px 20px 20px 10px!important;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
    padding:20px;
    font-weight:500;
    .title-box{
      display: flex;
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        margin:0 0 20px 0;
      }
    }
    .for-max-box{
      width:350px;
      height:190px;
      border:1px solid #dedede;
      border-radius:4px;
      margin:0 20px 20px 0;
      display: inline-block;
      overflow: hidden;
      .for-name-p{
        font-size:16px;
        padding:0 20px;
        height:40px;
        line-height:40px;
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        border-bottom:1px solid #dedede;
      }
      .for-big-box{
        display: flex;
        .for-img{
          width:70px;
          height:70px;
          line-height:70px;
          text-align: center;
          font-size:60px;
          color:#666;
          margin:20px 30px;
        }
        .for-right-box{
          padding-top:15px;
          .for-text-box{
            display: flex;
            p{
              font-size:14px;
              line-height:25px;
            }
            p:nth-child(1){
              width:80px;
              text-align: right;
            }
            p:nth-child(2){
              width:130px;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
        }
      }
      .for-button-box{
        border-top:1px solid #dedede;
        display: flex;
        p{
          line-height:37px;
          font-size:14px;
          flex:1;
          text-align: center;
          cursor: pointer;
        }
        p:hover{
          color:#fff;
          background-color: #00a0e9;
        }
      }
    }
    .add-max-box{
      display: inline-block;
      overflow: hidden;
      margin:0 20px 20px 0;
      width:350px;
      height:190px;
      line-height: 190px;
      text-align: center;
      border:1px solid #dedede;
      cursor: pointer;
      border-radius:4px;
    }
  }
</style>