mbWaterService/src/views/mbsys/watersupply/emergencymanage/emergencyplan/widget.vue

<template>
  <!-- 通讯管理 -->
  <div class="content-container">
    <div class="right-box">
      <div class="top">
        <el-form ref="form" :model="form" :inline="true" style="float: left; height: 45px">
          <el-form-item label="应急预案名称" label-width="auto">
            <el-input v-model="form.eventName" size="small" placeholder="请输入内容" style="width: 260px;" clearable></el-input>
          </el-form-item>
          <el-form-item label="事故类型" label-width="auto">
            <el-select v-model="form.eventType" placeholder="请选择事故类型" style="width:260px" size="small" clearable>
              <el-option v-for="item in eventTypes" :key="item.id" :label="item.typeName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="事故等级" label-width="auto">
            <el-select v-model="form.eventGrade" placeholder="请选择事故类型" style="width:260px" size="small" clearable>
              <el-option v-for="item in eventGrades" :key="item.id" :label="item.typeName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="auto">
            <el-button type="primary" icon="el-icon-search" @click="query" size="small" style="margin-top: 4px;">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-button type="primary" @click="opendialog(1)" size="small" style="margin-top: 4px;">新增</el-button>
        <el-button type="danger" @click="dialogFormVisible = true" size="small">删除</el-button>
      </div>
      <div class="table-div">
        <el-table :data="tableData" :style="{ width: '100%' }" height="100%" :header-cell-style="{background: 'rgba(250,250,250)',
                  color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" border>
          <template slot="empty">
            <img src="@/assets/icon/null.png" alt="" />
            <p class="empty-p">暂无数据</p>
          </template>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <el-table-column prop="name" label="预案编号" align="center"></el-table-column>
          <el-table-column prop="dept" label="应急预案名称" align="center"></el-table-column>
          <el-table-column prop="position" label="事故类型" align="center"></el-table-column>
          <el-table-column prop="prop" label="事故等级" align="center"></el-table-column>
          <el-table-column prop="phone" label="创建时间" align="center"></el-table-column>
          <el-table-column prop="email" label="创建人" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button @click="opendialog(2, row)" type="text" size="small">详细</el-button>
              <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination :current-page="pagination.current" :page-sizes="[20, 30, 40, 50, 100, 200]" :page-size="pagination.size"
                     :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>

    <!-- 新增通讯录 -->
    <el-dialog title="添加预案" :visible.sync="dialogFormVisible" label-width="auto" width="1200px">
      <div class="h-title">预案基本信息</div>
      <el-form :model="addForm" :rules="formRules" label-width="auto" size="small" ref="addForm">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="应急预案名称" prop="eventName">
              <el-input v-model="addForm.eventName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事故类型" prop="eventType">
              <el-select v-model="addForm.eventType" placeholder="请选择事故类型" style="width:100%">
                <el-option v-for="item in eventTypes" :key="item.id" :label="item.typeName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事故等级" prop="eventGrade">
              <el-select v-model="addForm.eventGrade" placeholder="请选择事故等级" style="width:100%">
                <el-option v-for="item in eventGrades" :key="item.id" :label="item.typeName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="应急处置及流程" prop="procedure">
              <el-input v-model="addForm.procedure" type="textarea" placeholder="请输入内容" :rows="3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联危险源">
              <el-input v-model="addForm.emergencyHazards" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记人">
              <el-input v-model="addForm.registerStaff" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记时间">
              <!-- <el-input v-model="addForm.registerTime" placeholder="请输入内容"></el-input> -->
              <el-date-picker v-model="addForm.registerTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="addForm.remark" type="textarea" placeholder="请输入内容" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="h-title" style="margin-top:20px">应急通讯录
        <el-button type="text" style="float:right" @click="addPerson()">添加人员信息</el-button>
      </div>
      <el-table :data="peopleData" :style="{ width: '100%' }" max-height="200px" :header-cell-style="{background: 'rgba(250,250,250)',
                  color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" border>
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt="" />
          <p class="empty-p">暂无数据</p>
        </template>
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column prop="name" label="部门" align="center"></el-table-column>
        <el-table-column prop="dept" label="姓名" align="center"></el-table-column>
        <el-table-column prop="position" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="prop" label="职务" align="center"></el-table-column>
        <el-table-column prop="phone" label="职责" align="center"></el-table-column>
        <el-table-column prop="email" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="{ row }">
            <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="h-title" style="margin-top:30px">应急物资
        <el-button type="text" style="float:right">添加物资类型</el-button>
      </div>
      <el-table :data="materialData" :style="{ width: '100%' }" max-height="200px" :header-cell-style="{background: 'rgba(250,250,250)',
                  color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" border>
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt="" />
          <p class="empty-p">暂无数据</p>
        </template>
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column prop="name" label="物资类别" align="center"></el-table-column>
        <el-table-column prop="dept" label="物资分类" align="center"></el-table-column>
        <el-table-column prop="position" label="物资类型" align="center"></el-table-column>
        <el-table-column prop="prop" label="规格型号" align="center"></el-table-column>
        <el-table-column prop="phone" label="单位" align="center"></el-table-column>
        <el-table-column prop="email" label="数量" align="center"></el-table-column>
        <el-table-column prop="email" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="{ row }">
            <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="h-title" style="margin-top:30px">应急设施
        <el-button type="text" style="float:right">添加应急设施</el-button>
      </div>
      <el-table :data="facilityData" :style="{ width: '100%' }" max-height="200px" :header-cell-style="{background: 'rgba(250,250,250)',
                  color: 'rgb(50,59,65)',height: '38px',textAlign: 'center'}" border>
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt="" />
          <p class="empty-p">暂无数据</p>
        </template>
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column prop="name" label="设施名称" align="center"></el-table-column>
        <el-table-column prop="dept" label="单位" align="center"></el-table-column>
        <el-table-column prop="position" label="数量" align="center"></el-table-column>
        <el-table-column prop="prop" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="{ row }">
            <el-button @click="deletePlan(row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="h-title" style="margin-top:30px">附件</div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addsubmit">确 定</el-button>
      </div>
      <addPerson ref="addPerson" :visible="addpersonVisible"></addPerson>
    </el-dialog>
  </div>
</template>

<script>
import { getaddressbook, addressbookApi, editaddressbook, deleteressbookApi } from '@/api/mbsys/collaborative.js'
import { getTypetree } from '@/api/mbsys/materialmanage'
import { addEmergency } from '@/api/mbsys/watersupply'

import addPerson from './children/addperson'
export default {
  components: {
    addPerson
  },
  data() {
    return {
      fileList: [],
      form: {},
      // 增加文档输入框
      input: "",
      // 新增表单
      addForm: {},
      type: 0,
      tableData: [],
      pagination: { current: 1, size: 40, total: 0 },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      deptoption: [
        {
          value: 0,
          label: "综合管理部",
        },
        {
          value: 1,
          label: "水务管理部",
        },
      ],
      addpersonVisible: false,
      eventGrades: [], // 事件等级
      eventTypes: [], // 事件类型
      options: [],
      value2: [],
      value1: "",
      peopleData: [],
      materialData: [],
      facilityData: [],
      formRules: {
        eventName: [
          { required: true, message: '请输入事故名称', trigger: 'blur' },
        ],
        eventType: [
          { required: true, message: '请选择事故类型', trigger: 'blur' },
        ],
        eventGrade: [
          { required: true, message: '请选择事故等级', trigger: 'blur' },
        ],
        procedure: [
          { required: true, message: '请输入处置及流程', trigger: 'blur' },
        ],
      }
    };
  },
  watch: {},
  mounted() {
    this.getaddressbook();
    this.getEventGrades()
    this.getEventTypes()
  },
  methods: {
    getEventGrades() {
      getTypetree({ datatypes: 165, type: 0 }).then(res => {
        if (res.result.length > 0)
          this.eventGrades = res.result[0].vos
      })
    },
    getEventTypes() {
      getTypetree({ datatypes: 160, type: 0 }).then(res => {
        if (res.result.length > 0)
          this.eventTypes = res.result[0].vos
      })
    },
    /* 
      点击打开对话框
    */
    opendialog(type, data = null) {
      console.log(data);
      let { name, dept, position, phone, email, id } = JSON.parse(JSON.stringify(data)) || {}
      // this.addForm = JSON.parse(JSON.stringify(data)) || {};
      //   this.addForm = { name, dept, position, phone, email, id }
      this.type = type;
      this.dialogFormVisible = true;
    },
    // 获取通讯录列表
    getaddressbook(params) {
      let params1 = params ? JSON.parse(JSON.stringify(params)) : "";
      let params2 = JSON.parse(JSON.stringify(this.pagination));
      let params3 = { ...params1, ...params2 };
      params3['isEmergency'] = 1
      getaddressbook(params3).then((res) => {
        if (res.code === 1) {
          //   this.tableData = res.result.records;
          //   this.pagination.total = res.result.total;
        }
      });
    },
    // 新增应急事件（处置预案、事件分析）
    addEmergency() {
      const formdata = new FormData()
      for (const key in this.addForm) {
        formdata.append(key, this.addForm[key])
      }
      addEmergency(formdata).then((res) => {
        if (res.code === 1) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          //   this.getaddressbook();
        }
      });
    },
    /* 
      修改会议室
    */
    editaddressbook() {
      editaddressbook(this.addForm).then((res) => {
        if (res.code === 1) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getaddressbook();
        }
      });
    },
    /* 
      删除会议室
    */
    deleteressbookApi(obj) {
      deleteressbookApi(obj).then((res) => {
        if (res.code === 1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getaddressbook();
        }
      });
    },
    // 点击新增对话框确定按钮
    addsubmit() {
      //   //   if (!this.addForm.name)
      //   //     return this.$message.error("请输入姓名");
      //   //   if (!this.addForm.phone) return this.$message.error("请输入手机号码");
      //   if (this.type == 1) {
      //     this.addEmergency();
      //   } else if (this.type == 3) {
      //     // this.editaddressbook();
      //   }
      //   this.dialogFormVisible = false;

      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addEmergency();
        } else {
          return false;
        }
      });
    },
    //删除
    deletePlan(data) {
      this.$confirm("删除该类型?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = data.id
          let strId = ids.toString();
          let arrId = strId.split('');
          this.deleteressbookApi(arrId);
        })
        .catch(() => { });
    },
    addPerson() {
      this.$refs.addPerson.open()
    },
    /* 
     搜索
   */
    query() {
      let obj = this.$refs.form.model;
      this.getaddressbook(obj);
    },
    handleSizeChange(size) {
      this.pagination.size = size;
      this.getaddressbook();
    },
    handleCurrentChange(current) {
      this.pagination.current = current;
      this.getaddressbook();
    },
  },
};
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  top: 0;
  bottom: 0;

  .right-box {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;

    .top {
      height: 33px;
      text-align: right;

      .upload-demo {
        display: inline-block;
      }
    }
    /deep/.el-form-item__content {
      display: flex;
      align-items: center;
    }

    .table-div {
      height: calc(100% - 81px);
    }

    .el-pagination {
      margin-top: 16px;
    }
  }
}
.h-title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 18px;
    vertical-align: sub;
    background-color: #2d74e7;
    margin-right: 5px;
  }
  >>> .el-button span {
    text-decoration: underline;
  }
}
</style>