ljq / archives · Files

<!--库房安全-->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="3" :xs="24">
        <div class="head-container">
          <el-tree
            :data="options"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :default-expand-all=true
            node-key="id"
            ref="tree"
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24" >
        <el-tabs type="border-card" value="1" @tab-click="clickTab">
          <el-tab-pane label="库房安全检查"  name="1" ></el-tab-pane>
          <el-tab-pane label="档案安全检查"  name="2" ></el-tab-pane>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['server:safety:add']"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['server:safety:remove']"
            >删除</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="库房名称" align="center" key="depotName" prop="depotName"  :formatter="depotIdFormat"/>
          <el-table-column label="检查时间" align="center" key="checkTime" prop="checkTime"   />
          <el-table-column label="检查人" align="center" key="checkUser" prop="checkUser"   />
          <el-table-column label="检查描述" align="center" key="mark" prop="mark"   />
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope" >
              <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']" >修改</el-button>
              <el-button size="mini" type="text" @click="handlecheck(scope.row)" v-hasPermi="['system:user:edit']" v-if="type==1">检查</el-button>
              <el-button size="mini" type="text" @click="handleDetail(scope.row)" v-hasPermi="['system:user:edit']"  v-if="type==2">登记</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        </el-tabs>
      </el-col>
    </el-row>


    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="档案库" >
          <el-select v-model="form.depotId" placeholder="档案库" :disabled="edit">
            <el-option
              v-for="depot in depotList"
              :key="depot.id"
              :label="depot.depotName"
              :value="depot.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检查时间" prop="depotName">
          <el-date-picker
            v-model="form.checkTime" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检查人" prop="mark">
          <el-input v-model="form.checkUser"  maxlength="30" />
        </el-form-item>
        <el-form-item label="检查描述" prop="mark">
          <el-input v-model="form.mark"  maxlength="30" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 库房检查 -->
    <el-dialog :title="title" :visible.sync="open2" width="1300px" append-to-body>
      <el-form ref="form" :model="form2" :rules="rules" >
        <!-- 第一排-->
        <el-col :span="2"><el-form-item label="防光" ></el-form-item></el-col>
        <el-col :span="7" >
          <el-form-item label="是否采用遮光窗帘"  class="myClass">
            <el-radio-group v-model="r1">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="窗帘是否遮挡正常" class="myClass">
            <el-radio-group v-model="r2">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="库房是否采用适合纸质档案长期保存的灯具" class="myClass">
            <el-radio-group v-model="r3">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第二排-->
        <el-col :span="2"><el-form-item label="防尘" ></el-form-item></el-col>
        <el-col :span="7" >
          <el-form-item label="门窗密闭性是否完好"  class="myClass">
            <el-radio-group v-model="r4">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="15" >
          <el-form-item label="库房是否定期打扫" class="myClass">
            <el-radio-group v-model="r5">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第三排-->
        <el-col :span="2"><el-form-item label="防盗" ></el-form-item></el-col>
        <el-col :span="7" >
          <el-form-item label="防盗窗是否正常"  class="myClass">
            <el-radio-group v-model="r6">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="防盗门是否正常" class="myClass">
            <el-radio-group v-model="r7">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="库房钥匙保管是否违规" class="myClass">
            <el-radio-group v-model="r8">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第四排-->

        <el-col :span="24" push="2">
          <el-form-item label="防盜监控设备工作是否正常" class="myClass">
            <el-radio-group v-model="r9">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第五排-->
        <el-col :span="2"><el-form-item label="防火" ></el-form-item></el-col>
        <el-col :span="7" >
          <el-form-item label="灭火设备设施是否正常"  class="myClass">
            <el-radio-group v-model="r10">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="15" >
          <el-form-item label="库房内各类电源开关、保险装置是否正常" class="myClass">
            <el-radio-group v-model="r11">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第六排-->
        <el-col :span="2"><el-form-item label="防潮" ></el-form-item></el-col>
        <el-col :span="7" >
          <el-form-item label="除湿设备是否正常" class="myClass">
            <el-radio-group v-model="r12">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="库房湿度是否记录" class="myClass">
            <el-radio-group v-model="r13">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="档案是否做去湿处理" class="myClass">
            <el-radio-group v-model="r14">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第七排-->
        <el-col :span="2"><el-form-item label="防虫" ></el-form-item></el-col>
        <el-col :span="22" >
          <el-form-item label="是否定期使用杀虫药" class="myClass">
            <el-radio-group v-model="r15">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第八排-->
        <el-col :span="2"><el-form-item label="防鼠" ></el-form-item></el-col>
        <el-col :span="22" >
          <el-form-item label="是否定期投放鼠药等" class="myClass">
            <el-radio-group v-model="r16">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第九排-->
        <el-col :span="2"><el-form-item label="防鼠" ></el-form-item></el-col>
        <el-col :span="22" >
          <el-form-item label="是否定期投放鼠药等" class="myClass">
            <el-radio-group v-model="r17">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第十排-->
        <el-col :span="2"><el-form-item label="防霉" ></el-form-item></el-col>
        <el-col :span="22" >
          <el-form-item label="是否定期使用防霉药" class="myClass">
            <el-radio-group v-model="r18">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第十一排-->
        <el-col :span="2"><el-form-item label="防高温" ></el-form-item></el-col>
        <el-col :span="7" >
          <el-form-item label="空调是否正常" class="myClass">
            <el-radio-group v-model="r19">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="15" >
          <el-form-item label="是否记录库房温度" class="myClass">
            <el-radio-group v-model="r20">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 第十二排-->
        <el-col :span="2"><el-form-item label="防有害气体" ></el-form-item></el-col>
        <el-col :span="7" >
          <el-form-item label="是否做好密闭工作" class="myClass">
            <el-radio-group v-model="r21">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="是否有残留有害废物" class="myClass">
            <el-radio-group v-model="r22">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="空气净化设备是否正常" class="myClass">
            <el-radio-group v-model="r23">
              <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 档案检查新增 -->
    <el-dialog title="新增" :visible.sync="open3" width="500px" append-to-body>
      <el-form ref="form2" :model="form2" :rules="rules" label-width="100px">
        <el-form-item label="检查项" >
          <el-select v-model="form2.checkType" placeholder="检查项" >
            <el-option
              v-for="dict in dict.type.checkType"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检查情况" >
          <el-input-number v-model="form2.state" controls-position="right" :min="0"  />
        </el-form-item>
        <el-form-item label="措施" >
          <el-select v-model="form2.measures" placeholder="措施" >
            <el-option
              v-for="dict in dict.type.measures"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>

    <!--档案检查登记的查看 -->
    <el-dialog title="登记" :visible.sync="open4" width="1000px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddDetail()"
            v-hasPermi="['server:safety:add']"
          >新增</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="detailList" >
        <el-table-column label="检查项" align="center" key="checkType" prop="checkType" :formatter="checkTypeFormat" />
        <el-table-column label="检查情况" align="center" key="state" prop="state"   />
        <el-table-column label="措施" align="center" key="measures" prop="measures"   :formatter="measuresFormat"/>
        <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope" >
            <el-button
              size="mini"
              type="text"
            >明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


  </div>
</template>
<style lang="scss">
.myClass .el-form-item__label{
  font-size: 14px;
  font-weight:normal;
}
</style>
<script>

import {getDepots} from "@/api/service/depot";
import {treeselect, listPost, addPost, updatePost, delPost, detailList, addDetail} from "@/api/service/safety";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  dicts: ['checkType','measures','yes_no'],
  components: { Treeselect },
  data() {
    return {
      postList: null,
      detailList:null,
      id:undefined,
      edit:false,
      form: {},
      form2:{},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 部门树选项
      options: undefined,
      // 是否显示弹出层
      open: false,
      open2:false,
      open3:false,
      open4:false,
      // 表单参数
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        depotId:undefined
      },
      queryParams3: {
        safetyId:undefined
      },
      // 表单校验
      rules: {
      },
      depotList:[],
      safetyId:undefined,
      r1: '1',
      r2: '1',
      r3: '1',
      r4: '1',
      r5: '1',
      r6: '1',
      r7: '1',
      r8: '1',
      r9: '1',
      r10: '1',
      r11: '1',
      r12: '1',
      r13: '1',
      r14: '1',
      r15: '1',
      r16: '1',
      r17: '1',
      r18: '1',
      r19: '1',
      r20: '1',
      r21: '1',
      r22: '1',
      r23: '1',
      type:1
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getTreeselect();
    this.getDepots();
  },
  methods: {
    getList() {
      this.queryParams.type=this.type;
      this.loading = true;
      listPost(this.queryParams).then(response => {
        this.postList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getTreeselect() {
      treeselect().then(response => {
        this.options = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.depotId=undefined;
      if(data.level==1){
        this.queryParams.depotId=data.dbId;
      }
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancel2() {
      this.open3 = false;
    },
    // 表单重置
    reset() {
      this.form = {
        depotId: undefined,
        checkTime: undefined,
        checkUser: undefined,
        mark: undefined,
        type:undefined
      };
      this.resetForm("form");
    },
    reset2() {
      this.form2 = {
        id: undefined
      };
      this.r1='1';
      this.r2='1';
      this.r3='1';
      this.r4='1';
      this.r5='1';
      this.r6='1';
      this.r7='1';
      this.r8='1';
      this.r9='1';
      this.r10='1';
      this.r11='1';
      this.r12='1';
      this.r13='1';
      this.r14='1';
      this.r15='1';
      this.r16='1';
      this.r17='1';
      this.r18='1';
      this.r19='1';
      this.r20='1';
      this.r21='1';
      this.r22='1';
      this.r23='1';
      this.resetForm("form2");
    },
    reset3() {
      this.form3 = {
        safetyId: undefined,
        checkType: undefined,
        state: undefined,
        measures: undefined
      };
      this.resetForm("form3");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.edit = false;
      this.title = "创建";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = row;
      this.open = true;
      this.edit = true;
      this.title = "编辑";
    },
    /** 库房检查按钮操作 */
    handlecheck(row) {
      this.reset2();
      this.form2.id=row.id;
      let arr=row.radio.split(',');
      this.r1=arr[0];
      this.r1=arr[0];
      this.r2=arr[1];
      this.r3=arr[2];
      this.r4=arr[3];
      this.r5=arr[4];
      this.r6=arr[5];
      this.r7=arr[6];
      this.r8=arr[7];
      this.r9=arr[8];
      this.r10=arr[9];
      this.r11=arr[10];
      this.r12=arr[11];
      this.r13=arr[12];
      this.r14=arr[13];
      this.r15=arr[14];
      this.r16=arr[15];
      this.r17=arr[16];
      this.r18=arr[17];
      this.r19=arr[18];
      this.r20=arr[19];
      this.r21=arr[20];
      this.r22=arr[21];
      this.r23=arr[22];
      this.open2 = true;
      this.title = "检查登记";
    },
    /** 档案检查登记按钮操作 */
    handleDetail(row) {
      this.safetyId=row.id;
      this.getDetailList(row.id);
      this.open4 = true;
    },
    /** 档案检查新增按钮操作 */
    handleAddDetail() {
      this.reset3();
      this.form3.safetyId=this.safetyId;
      this.open3 = true;
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.edit) {
            updatePost(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.type=this.type;
            addPost(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 库房检查提交 */
    submitForm2: function() {
      let arr=new Array(23);
      arr[0]=this.r1;
      arr[1]=this.r2;
      arr[2]=this.r3;
      arr[3]=this.r4;
      arr[4]=this.r5;
      arr[5]=this.r6;
      arr[6]=this.r7;
      arr[7]=this.r8;
      arr[8]=this.r9;
      arr[9]=this.r10;
      arr[10]=this.r11;
      arr[11]=this.r12;
      arr[12]=this.r13;
      arr[13]=this.r14;
      arr[14]=this.r15;
      arr[15]=this.r16;
      arr[16]=this.r17;
      arr[17]=this.r18;
      arr[18]=this.r19;
      arr[19]=this.r20;
      arr[20]=this.r21;
      arr[21]=this.r22;
      arr[22]=this.r23;
      this.form2.radio=arr.toString();
      updatePost(this.form2).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open2 = false;
        this.getList();
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除').then(function() {
        return delPost(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
        this.getTreeselect();
      }).catch(() => {});
    },
    /** 获取档案库列表 */
    getDepots(){
      getDepots().then(response=>{
        this.depotList=response.depotList;
      })
    },
    depotIdFormat(row) {
      for(let i in this.depotList){
        let depot=this.depotList[i]
        if (depot.id == row.depotId) {
          return depot.depotName;
        }
      }
    },
    /** 档案检查登记的查询 */
    getDetailList(safetyId) {
      this.queryParams3.safetyId=safetyId;
      this.loading = true;
      detailList(this.queryParams3).then(response => {
        this.detailList = response.rows;
        this.loading = false;
      });
    },
    checkTypeFormat(row, column) {
      return this.selectDictLabel(this.dict.type.checkType, row.checkType);
    },
    measuresFormat(row, column) {
      return this.selectDictLabel(this.dict.type.measures, row.measures);
    },
    clickTab(tab, event) {
      this.type=tab.name;
      this.handleQuery();
    }
  }
};
</script>