Vue_New/src/xt_pages/device/airDisinfect.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
    </div>
    <div class="app-container">
        <div style="float:right;margin-bottom:10px;">
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
            <!-- <el-button type="danger">删除</el-button> -->
        </div>
        <el-table :data="tableData" border style="width: 100%" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="时间" width="120">
               <template slot-scope="scope">
                   {{getTime(scope.row.start_time)}}
               </template>
            </el-table-column>
            <el-table-column label="班次" width="120">
                <template slot-scope="scope">
                   <span v-if="scope.row.class == 1">上午</span>
                   <span v-if="scope.row.class == 2">中午</span>
                   <span v-if="scope.row.class == 3">下午</span>
                </template>
            </el-table-column>
            <el-table-column label="创建日期" width="120">
                <template slot-scope="scope">
                  {{getTime(scope.row.created_ime)}}
                </template>
            </el-table-column>
            <el-table-column label="消毒方式" width="120">
                <template slot-scope="scope">
                  {{scope.row.disinfection_methods}}
                </template>
            </el-table-column>
            <el-table-column label="消毒液" width="120">
                <template slot-scope="scope">
                   {{scope.row.disinfection_fluid}}
                </template>
            </el-table-column>
            <el-table-column label="顺序号" width="80">
               <template slot-scope="scope">
                  {{scope.row.sort}}
                </template>
            </el-table-column>
            <el-table-column label="创建人" width="80">
               <template slot-scope="scope">
                  {{getName(scope.row.creator)}}
                </template>
            </el-table-column>
            <el-table-column label="检查结果" width="180">
                <template slot-scope="scope">
                   {{scope.row.detection_result}}
                </template>
            </el-table-column>
            <el-table-column label="检查时间" width="120">
                <template slot-scope="scope">
                   {{getTime(scope.row.detection_time)}}
                </template>
            </el-table-column>
            <el-table-column label="数据上传时间" width="120">
                <template slot-scope="scope">
                   {{getTime(scope.row.upload_time)}}
                </template>
            </el-table-column>
            <el-table-column label="修改标志" width="90">
               <template slot-scope="scope">
                   <span v-if="scope.row.modifications == 1">正常</span>
                   <span v-if="scope.row.modifications == 2">撤消</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            background
            style="margin-top:20px;float: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>

        <el-dialog
        class="centerDialog"
        width="1000px"
        title="新增空气消毒表"
        :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form" class="airForm" :rules="airRules">
                <el-form-item label="时间" label-width="110px" required prop="start_time">
                    <el-date-picker
                     value-format="yyyy-MM-dd"
                    v-model="form.start_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="班次" label-width="110px" required prop="class">
                    <el-select v-model="form.class" placeholder="请选择活动区域">
                        <el-option label="上午" value="1"></el-option>
                        <el-option label="下午" value="2"></el-option>
                        <el-option label="晚上" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建日期" label-width="110px" required prop="created_time">
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="form.created_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="消毒方式" label-width="110px">
                    <el-input v-model="form.disinfection_methods"></el-input>
                </el-form-item>
                <el-form-item label="消毒液" label-width="110px">
                    <el-input v-model="form.disinfection_fluid"></el-input>
                </el-form-item>
                <el-form-item label="顺序号" label-width="110px" required prop="sort">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="创建人" label-width="110px" required prop="creator">
                    <el-select v-model="form.creator" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in docList"
                        :key="index"
                        :label="item.user_name"
                        :value="item.admin_user_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="检测时间" label-width="110px" required prop="detection_time">
                   <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="form.detection_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="检测结果" label-width="110px">
                    <el-input v-model="form.detection_result"></el-input>
                </el-form-item>
                <el-form-item label="上传时间" label-width="110px">
                    <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="form.upload_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="检测合格" label-width="110px" required prop="check_out">
                    <div>
                        <el-radio v-model="form.check_out" label="1">是</el-radio>
                        <el-radio v-model="form.check_out" label="2">否</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="修改标志" label-width="110px" required prop="modifications">
                    <el-select v-model="form.modifications" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in options"
                        :key="index"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAirDisinfect('form')">保 存</el-button>
            </div>
        </el-dialog>

       
      <el-dialog
        class="centerDialog"
        width="1000px"
        title="编辑空气消毒表"
        :visible.sync="editDialogFormVisible">
            <el-form :model="form" ref="form" class="airForm" :rules="airRules">
                <el-form-item label="时间" label-width="110px" required prop="start_time">
                    <el-date-picker
                     value-format="yyyy-MM-dd"
                    v-model="form.start_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="班次" label-width="110px" required prop="class">
                    <el-select v-model="form.class" placeholder="请选择活动区域">
                        <el-option label="上午" value="1"></el-option>
                        <el-option label="下午" value="2"></el-option>
                        <el-option label="晚上" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建日期" label-width="110px" required prop="created_time">
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="form.created_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="消毒方式" label-width="110px">
                    <el-input v-model="form.disinfection_methods"></el-input>
                </el-form-item>
                <el-form-item label="消毒液" label-width="110px">
                    <el-input v-model="form.disinfection_fluid"></el-input>
                </el-form-item>
                <el-form-item label="顺序号" label-width="110px" required prop="sort">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="创建人" label-width="110px" required prop="creator">
                    <el-select v-model="form.creator" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in docList"
                        :key="index"
                        :label="item.user_name"
                        :value="item.admin_user_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="检测时间" label-width="110px" required prop="detection_time">
                   <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="form.detection_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="检测结果" label-width="110px">
                    <el-input v-model="form.detection_result"></el-input>
                </el-form-item>
                <el-form-item label="上传时间" label-width="110px">
                    <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="form.upload_time"
                    type="date"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="检测合格" label-width="110px" required prop="check_out">
                    <div>
                        <el-radio v-model="form.check_out" label="1">是</el-radio>
                        <el-radio v-model="form.check_out" label="2">否</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="修改标志" label-width="110px" required prop="modifications">
                    <el-select v-model="form.modifications" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in options"
                        :key="index"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateAirDisinfect('form')">保 存</el-button>
            </div>
        </el-dialog>
       
    </div>
  </div>

</template>

<script>
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import { getAllDoctorList,saveAirDisinfect,getAirList,getAirDisinfectDetail,updateAirDisinfect,deleteAirDisinfect } from "@/api/device"
  import { uParseTime } from '@/utils/tools'
  export default {
    name: 'airDisinfect',
    components: {
      BreadCrumb
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '院感管理' },
          { path: false, name: '透析室空气消毒记录表' }
        ],
        dialogFormVisible:false,
        editDialogFormVisible:false,
        tableData: [],
        form: {
          id:0,
          start_time:"", 
          created_time:"",
          class:"",
          disinfection_methods:"",
          disinfection_fluid:"",
          sort:"",
          creator:"",
          detection_time:"",
          detection_result:"",
          upload_time:"",
          check_out:"1",
          modifications:"",  
        },
        value1:'',
        docList:[],
        options:[
          {id:1,name:"正常"},
          {id:2,name:"撤销"}  
        ],
       airRules: {
        start_time: [{ required: true, message: "请选择时间", trigger: "blur" }],
        class:[{required:true,message:"请选择班次",trigger:"blur"}],
        created_time:[{required:true,message:"请选择创建时间",trigger:"blur"}],
        sort:[{required:true,message:"请填写顺序号",trigger:"blur"}],
        detection_time:[{required:true,message:"请选择检测时间",trigger:"blur"}],
        check_out:[{required:true,message:"请选择检验合格",trigger:"blur"}],
        modifications:[{required:true,message:"请选择修改标志",trigger:"blur"}],
        creator:[{required:true,message:"请选择创建人",trigger:"blur"}]
       },
       limit:20,
       page:1,
       total:0,

      }
    },
    created(){
      this.getlist()
      this.getAirList()
    },
    methods: {
      
        getlist(){
          getAllDoctorList().then(response=>{
            if(response.data.state == 1){
               var list = response.data.data.list
               console.log("list222222",list)
               this.docList = list
            }
          })  
        },
        saveAirDisinfect(formName){
           this.$refs[formName].validate(valid=>{
             if(valid){
                 var params = {
                   start_time:this.form.start_time,
                   class:parseInt(this.form.class),
                   created_time:this.form.created_time,
                   disinfection_methods:this.form.disinfection_methods,
                   disinfection_fluid:this.form.disinfection_fluid,
                   sort:this.form.sort,
                   creator:this.form.creator,
                   detection_time:this.form.detection_time,
                   detection_result:this.form.detection_result,
                   upload_time:this.form.upload_time,
                   check_out:parseInt(this.form.check_out),
                   modifications:parseInt(this.form.modifications),
                 }
                 console.log("params",params)
               saveAirDisinfect(params).then(response=>{
                  if(response.data.state == 1){
                     var list = response.data.data.list
                     console.log("list",list)
                     this.$message.success("保存成功!")
                     this.dialogFormVisible = false
                     this.getAirList()
                     this.form.class = ""
                     this.form.start_time = ""
                     this.form.created_ime = ""
                     this.form.disinfection_fluid = ""
                     this.form.disinfection_methods = ""
                     this.form.sort = ""
                     this.form.creator = ""
                     this.form.detection_time = ""
                     this.form.detection_result = ""
                     this.form.upload_time = ""
                  }
               })
             }
           })  
        },

        getAirList(){
            var params = {
               limit:this.limit,
               page:this.page,
            }
          getAirList(params).then(response=>{
             if(response.data.state == 1){
               var list = response.data.data.list
               var total = response.data.data.total
               this.tableData = list
               this.total = total
               console.log("list222",list)
               console.log("total",total)
             }
          })
        },
      getTime(val) {
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },
      getName(id){
        var name = ""
        for(let i=0;i<this.docList.length;i++){
           if(id == this.docList[i].admin_user_id){
               name = this.docList[i].user_name
           }
        }
        return name
      },
     handleCurrentChange(val) {
       this.page = val
       this.getAirList()
     },
     handleSizeChange(val){
        this.limit =val
        this.getAirList()
     },
     
     handleEdit(id){
       this.editDialogFormVisible = true
        getAirDisinfectDetail(id).then(response=>{
            if(response.data.state ==1){
               var detail =  response.data.data.detail
               console.log("detail",detail)
               this.form.id = detail.id
               this.form.start_time = this.getTime(detail.start_time)
               this.form.class = detail.class.toString()
               this.form.created_ime = this.getTime(detail.created_time)
               this.form.disinfection_methods = detail.disinfection_methods
               this.form.disinfection_fluid = detail.disinfection_fluid
               this.form.sort = detail.sort
               this.form.creator = detail.creator
               this.form.detection_time = this.getTime(detail.detection_time)
               this.form.detection_result = detail.detection_result
               this.form.upload_time = this.getTime(detail.upload_time)
               this.form.check_out = detail.check_out.toString()
               this.form.modifications = detail.modifications

            }
        })
      },

      updateAirDisinfect(formName){
          
        this.$refs[formName].validate(valid=>{
          if(valid){
                var params = {
                   id:this.form.id,
                   start_time:this.form.start_time,
                   class:parseInt(this.form.class),
                   created_time:this.form.created_time,
                   disinfection_methods:this.form.disinfection_methods,
                   disinfection_fluid:this.form.disinfection_fluid,
                   sort:this.form.sort,
                   creator:this.form.creator,
                   detection_time:this.form.detection_time,
                   detection_result:this.form.detection_result,
                   upload_time:this.form.upload_time,
                   check_out:parseInt(this.form.check_out),
                   modifications:parseInt(this.form.modifications),
                 }
               console.log("params",params)
              updateAirDisinfect(params).then(response=>{
                  if(response.data.state ==1){
                    var detection = response.data.data.detection
                    this.editDialogFormVisible = false
                    this.$message.success("修改成功!")
                    this.getAirList()
                  }
              })
            }
        })
      },

       handleDelete(id,index) {
        this.$confirm('确认删除这条记录?', '删除记录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteAirDisinfect(id).then(response => {
              if (response.data.state == 0) {
                this.$message.error(response.data.msg)
                return false
              } else {
                this.tableData.splice(index, 1)
                this.$message.success('厂家已经删除')
              }
            })
          })
          .catch(() => {
          })
      },
    }
  }
</script>


<style lang="scss" scoped>
.airForm{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .el-form-item{
        width:33%;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 200px;
    }
    .el-input{
        width: 200px;
    }
    .el-select{
        width: 200px;
    }
}
</style>