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

<!-- 仪器管理 -->
<template>
  <div class="app-container instrument">
    <div class="page-container instrumentPage" v-if="pageType === 1">
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="名称" prop="queryParamsData1" label-width="90px">
            <el-input
              maxLength="30"
              v-model="queryParams.queryParamsData1"
              placeholder="请输入仪器编号/仪器名称/仪器型号/仪器负责人"
              clearable
              style="width: 350px"
            />
          </el-form-item>
          <el-form-item label="分类" prop="queryParamsData2">
            <el-select v-model="queryParams.queryParamsData2" clearable placeholder="请选择分类" style="width: 200px">
              <el-option
                v-for="dict in instrumentClassOptions"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间" prop="state">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item >
            <p class="inquire-button-one" @click="handleQuery">查询</p>
            <p class="reset-button-one" @click="resetQuery">重置</p>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-col :span="1.5">
              <p class="add-button-one-120"
                 style="margin-right:20px;"
                 @click="clickButton(1)"
              ><i class="el-icon-plus"></i>新增</p>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="instrumentList">
          <el-table-column label="仪器编号" prop="equipmentNum"  show-overflow-tooltip/>
          <el-table-column label="仪器名称" prop="equipmentName" width="300" show-overflow-tooltip/>
          <el-table-column label="仪器型号" prop="modelNumber" width="240" show-overflow-tooltip/>
          <el-table-column label="仪器分类" prop="instrumentClass" width="400" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-for="(item,index) in instrumentClassOptions" :key="index" v-show="item.id == scope.row.instrumentClass">{{item.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="仪器负责人" prop="userName" width="140" show-overflow-tooltip/>
          <el-table-column label="操作" width="200" show-overflow-tooltip v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="clickButton(2,scope.row,scope.$index)"
                >编辑</p>
                <p class="table-button-p"
                   @click="clickButton(3,scope.row,scope.$index)"
                >查看</p>
                <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.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </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="id">
          <el-select v-model="dialogForm.id"
                     :disabled="dialogLook"
                     placeholder="请选择仪器类型"
                     style="width:400px;">
            <el-option
              v-for="dict in subList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </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>
    <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
  </div>
</template>
<script>
  import { authListSubject } from '@/api/laboratory/subject'
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  //import addPage from "./addPage.vue";
  export default {
    name: 'index',
    //components: {
    //  addPage
    //},
    data () {
      return {
        tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
        //页面状态
        pageType:1,
        //页面遮罩
        loading:false,
        //下拉列表数据
        optionList:[{value:true,label:'启用'},{value:false,label:'停用'}],
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          queryParamsData1:"",
          queryParamsData2 :null,
        },
        subList:[],
        //时间数据
        dateRange:[],
        // 仪器类型
        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,
          },
        ],
        //数据数量
        total:0,
        //组件传参
        propsData:{},
        //弹窗
        dialogType:false,
        dialogForm:{},
        dialogLook:false,
        dialogIndex:null,
        dialogTitle:"",
        // 表单校验
        rules: {
          id: [
            { required: true, message: "请选择实验室", trigger: "blur" },
            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
          ],
          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.getList();
      this.getSub();
    },
    methods: {
      //获取实验室
      getSub(){
        authListSubject({ pageNum: 1, pageSize:20 }).then(response => {
          this.subList = response.rows;
        });
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'dateRange',[])
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          queryParamsData1:"",
          queryParamsData2 :null,
        });
        this.getList();
      },
      //获取数据列表
      getList(){

      },
      //操作按钮
      tableButton(type,row){
        let self = this;
        if(type == 1){
          //新增
          this.$set(this,'pageType',2);
          this.$set(this,'propsData',{});
        }else if(type == 2){
          //详情
          this.$set(this,'pageType',2);
          let obj = JSON.parse(JSON.stringify(row))
          obj.showType = true;
          this.$set(this,'propsData',obj);
        }else if(type == 3){
          //编辑
          this.$set(this,'pageType',2);
          let obj = JSON.parse(JSON.stringify(row))
          obj.showType = false;
          this.$set(this,'propsData',obj);
        }else if(type == 4){
          //删除
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            deleteFunction({id:row.id}).then(response => {
              self.msgSuccess(response.message)
              self.getList();
            });
          }).catch(() => {});
        }else if(type == 5){
          //启用&停用
          let text = row.state  ? "停用" : "启用";
          this.$confirm('是否确认' + text + '?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            stateFunction({id:row.id,state:!row.state,}).then(response => {
              self.msgSuccess(response.message)
              self.getList();
            });
          }).catch(() => {});
        }else if(type == 6){
          //返回并刷新
          this.$set(this,'pageType',1);
          this.getList();
        }
      },
      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);
          }).catch(function() {
            //  取消
          });
        }
      },
      //关闭
      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.msgSuccess('操作成功')
            this.$set(this,'dialogType',false);
          }
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .instrument{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    .instrumentPage{
      flex:1;
      display: flex!important;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
      .page-content-box{
        flex:1;
        display: flex!important;
        flex-direction: column;
        overflow: hidden;
      }
    }
  }
</style>