index.vue

<template>
  <div class="app-container">

    <!-- 添加或修改企业基础信息管理对话框 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="14">
        <el-form ref="form" :model="form" label-width="150px">
          <table>
          <tr>
            <th>
              企业名称
            </th>
            <td>
              <span>{{form.unitName}}</span>
            </td>
            <th>
              社会统一信用代码
            </th>
            <td>
              {{form.orgCode}}
            </td>
          </tr>
          <tr>
            <th>
              安全监管分类
            </th>
            <td>
              <span v-if="form.regulationType == '1'">危险化学品</span>
              <span v-if="form.regulationType == '2'">冶金</span>
              <span v-if="form.regulationType == '3'">建材</span>
              <span v-if="form.regulationType == '4'">有色</span>
              <span v-if="form.regulationType == '5'">机械</span>
              <span v-if="form.regulationType == '6'">其他</span>
            </td>
            <th>
              成立日期
            </th>
            <td>
              {{form.regDate}}
            </td>
          </tr>
          <tr>
            <th>
              经营范围
            </th>
            <td colspan="3">
              {{form.businessScope}}
            </td>
          </tr>
          <tr>
            <th>
              营业期限
            </th>
            <td>
              {{form.businessTerm}}
            </td>
            <th>
              值班电话
            </th>
            <td>
              {{form.dutyPhone}}
            </td>
          </tr>
          <tr>
            <th>
              法定代表人
            </th>
            <td>
              <span v-if="form.legalPerson != null && form.legalPerson != ''">{{form.legalPerson}}</span>
              <span v-else>-</span>
            </td>
            <th>
              法定代表人手机
            </th>
            <td>
              <span v-if="form.legalPersonPhone != null && form.legalPersonPhone != ''">{{form.legalPersonPhone}}</span>
              <span v-else>-</span>
            </td>
          </tr>
          <tr>
            <th>
              主要负责人
            </th>
            <td>
              <span v-if="form.keyPerson != null && form.keyPerson != ''">{{form.keyPerson}}</span>
              <span v-else>-</span>
            </td>
            <th>
              主要负责人手机
            </th>
            <td>
              <span v-if="form.keyPersonPhone != null && form.keyPersonPhone != ''">{{form.keyPersonPhone}}</span>
              <span v-else>-</span>
            </td>
          </tr>
          <tr>
            <th>
              安全负责人
            </th>
            <td>
              <span v-if="form.safetyPerson != null && form.safetyPerson != ''">{{form.safetyPerson}}</span>
              <span v-else>-</span>
            </td>
            <th>
              安全负责人手机
            </th>
            <td>
              <span v-if="form.safetyPersonPhone != null && form.safetyPersonPhone != ''">{{form.safetyPersonPhone}}</span>
              <span v-else>-</span>
            </td>
          </tr>
          <tr>
            <th>
              经度
            </th>
            <td>
              {{form.longitude}}
            </td>
            <th>
              纬度
            </th>
            <td>
              {{form.latitude}}
            </td>
          </tr>
          <tr>
            <th>
              生产经营地址
            </th>
            <td colspan="3">
              {{form.runAddress}}
            </td>
          </tr>
          <tr>
            <th>
              注册地址
            </th>
            <td colspan="3">
              {{form.regAddress}}
            </td>
          </tr>
          <tr>
            <th>
              备注信息
            </th>
            <td colspan="3">
              <span v-if="form.remarks != null && form.remarks != ''">{{form.remarks}}</span>
              <span v-else>-</span>
            </td>
          </tr>

          </table>
        </el-form>
      </el-col>

      <el-col :span="9">
        <div style="width: 100%;height: 480px; border: 1px solid rgb(218, 213, 213);margin-bottom: 10px;">
          <div style="width: 100%;height: 100%" id="enterpriseContainer"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" style="margin-left: 50%">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="normal"
          @click="handleUpdate(form)"
        >编辑</el-button>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="企业名称" prop="unitName">
              <el-input v-model="form.unitName" placeholder="请输入企业名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社会统一信用代码" prop="orgCode">
              <el-input v-model="form.orgCode" placeholder="请输入社会统一信用代码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="安全监管分类" prop="regulationType">
              <el-select v-model="form.regulationType" placeholder="请选择安全监管分类" style="width: 100%">
                <el-option v-for="dict in regulationOptions"
                           :key="dict.dictValue"
                           :label="dict.dictLabel"
                           :value="dict.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成立日期" prop="regDate">
              <el-date-picker clearable size="small"
                              v-model="form.regDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择成立日期"
                              style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="经营范围" prop="businessScope">
              <el-input v-model="form.businessScope" placeholder="请输入经营范围" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="营业期限" prop="businessTerm">
              <el-input v-model="form.businessTerm" placeholder="请输入营业期限" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="值班电话" prop="dutyPhone">
              <el-input v-model="form.dutyPhone" placeholder="请输入值班电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="生产经营地址" prop="runAddress">
              <el-input v-model="form.runAddress" placeholder="请输入生产经营地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="注册地址" prop="regAddress">
              <el-input v-model="form.regAddress" placeholder="请输入注册地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-col :span="23">
          <el-form-item label="经纬度坐标" prop="longitude">
            <el-col :span="9">
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-col>
            <el-col :span="9" style="margin-left: 15px">
              <el-input v-model="form.latitude" placeholder="请输入纬度"/>
            </el-col>
            <el-col :span="3" style="margin-left: 30px">
              <el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
            </el-col>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="11">
          <el-form-item label="法定代表人" prop="legalPerson">
            <el-input v-model="form.legalPerson" placeholder="请输入法定代表人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人手机" prop="legalPersonPhone">
            <el-input v-model="form.legalPersonPhone" placeholder="请输入法定代表人手机" />
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="11">
          <el-form-item label="主要负责人" prop="keyPerson">
            <el-input v-model="form.keyPerson" placeholder="请输入主要负责人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主要负责人手机" prop="keyPersonPhone">
            <el-input v-model="form.keyPersonPhone" placeholder="请输入主要负责人手机" />
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="11">
          <el-form-item label="安全负责人" prop="safetyPerson">
            <el-input v-model="form.safetyPerson" placeholder="请输入安全负责人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安全负责人手机" prop="safetyPersonPhone">
            <el-input v-model="form.safetyPersonPhone" placeholder="请输入安全负责人手机" />
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="23">
          <el-form-item label="备注信息" prop="remarks">
            <el-input v-model="form.remarks" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        </el-row>
      </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>

    <GetPos
      :dialogVisible.sync="dialogTableVisible"
      device=""
      :devicePos="devicePos"
      @close="dialogcancelFun"
      @getPath="getPath"
    />
  </div>
</template>

<script>
import { listEnterpriseInfo, getEnterpriseInfo, delEnterpriseInfo, addEnterpriseInfo, updateEnterpriseInfo, exportEnterpriseInfo } from "@/api/safetyManagement/enterpriseInfo";
import GetPos from '@/components/GetPos';
import { EditorMap } from "@/utils/mapClass/getPath.js";

export default {
  name: "EnterpriseInfo",
  components: {
    GetPos
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 企业基础信息管理表格数据
      enterpriseInfoList: [],
      regulationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 地图
      dialogTableVisible: false,
      devicePos: [],
      map: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        unitName: null,
        orgCode: null,
        runAddress: null,
        regAddress: null,
        regulationType: null,
        regDate: null,
        businessTerm: null,
        longitude: null,
        latitude: null,
        businessScope: null,
        employeeNum: null,
        legalPerson: null,
        legalPersonPhone: null,
        keyPerson: null,
        keyPersonPhone: null,
        safetyPerson: null,
        safetyPersonPhone: null,
        createUserId: null,
        updateUserId: null,
        remarks: null
      },
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        unitName: [
          { required: true, message: "请输入企业名称", trigger: "blur" }
        ],
        orgCode: [
          { required: true, message: "请输入社会统一信用代码", trigger: "blur" }
        ],
        regulationType: [
          { required: true, message: "请选择安全监管分类", trigger: "blur" }
        ],
        regDate: [
          { required: true, message: "请选择成立日期", trigger: "blur" }
        ],
        businessScope: [
          { required: true, message: "请输入经营范围", trigger: "blur" }
        ],
        businessTerm: [
          { required: true, message: "请输入营业期限", trigger: "blur" }
        ],
        dutyPhone: [
          { required: true, message: "请输入值班电话", trigger: "blur" }
        ],
        runAddress: [
          { required: true, message: "请输入生产经营地址", trigger: "blur" }
        ],
        regAddress: [
          { required: true, message: "请输入注册地址", trigger: "blur" }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        longitude: [
          { required: true, message: "请输入经纬度", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getDicts("t_regulation_type").then(response => {
      this.regulationOptions = response.data;
    });
  },
  methods: {
    /** 查询企业基础信息管理列表 */
    getList() {
      this.loading = true;
      listEnterpriseInfo(this.queryParams).then(response => {
        this.enterpriseInfoList = response.rows;
        this.form = this.enterpriseInfoList[0];
        console.log("this.form.longitude", this.form.longitude);
        this.total = response.total;
        this.loading = false;

        this.$nextTick(() => {
          const path = eval(this.$store.state.user.systemSetting.map_center);
          this.map = new EditorMap("enterpriseContainer", {center: path}, this);
          if(this.form.longitude != null){
            this.devicePos = [this.form.longitude, this.form.latitude];
            this.map.addDevice({ path: this.devicePos });
          }
          this.map.nowMouseTarget = null;
          this.map.mousetoolClose(false);
        });
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.getList();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        unitName: null,
        orgCode: null,
        runAddress: null,
        regAddress: null,
        regulationType: null,
        regDate: null,
        businessTerm: null,
        longitude: null,
        latitude: null,
        businessScope: null,
        employeeNum: null,
        legalPerson: null,
        legalPersonPhone: null,
        keyPerson: null,
        keyPersonPhone: null,
        safetyPerson: null,
        safetyPersonPhone: null,
        createUserId: null,
        updateUserId: null,
        updateTime: null,
        createTime: null,
        remarks: null
      };
      this.resetForm("form");
      this.devicePos = [];
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      if(row != null){
        getEnterpriseInfo(row.id).then(response => {
          this.form = response.data;
          if(this.form.longitude != null){
            this.devicePos = [this.form.longitude, this.form.latitude];
          }
          console.log("this.devicePos", this.devicePos)
        });
      }
      this.open = true;
      this.title = "编辑企业基础信息";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            console.log("longitude",this.form.longitude)
            updateEnterpriseInfo(this.form).then(response => {
              this.msgSuccess("编辑成功");
              this.open = false;
              this.getList();
            });
          } else {
            addEnterpriseInfo(this.form).then(response => {
              this.msgSuccess("编辑成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    MapdialogFun() {
      this.dialogTableVisible = true;
    },
    dialogcancelFun() {
      this.dialogTableVisible = false;
    },
    getPath(res){
      console.log("res", res);
      console.log(this.form.longitude, this.form.latitude);
      //确认选择经纬度
      this.form.longitude = res[0];
      this.form.latitude = res[1];
    }
  }
};
</script>
<style lang="scss" scoped>
  table {
    width: 100%;
    line-height: 30px;
    border-collapse: collapse;
  }
  table, table tr th, table tr td {
    border: solid 1px rgb(218, 213, 213) !important;
  }
  th {
    background-color: #e6ebf5;
    color: #515a6e;
    font-size: 15px;
    width: 100px;
    height: 50px;
    text-align: left;
    padding-left: 5px;
  }
  td {
    color: #606266;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    padding-left: 5px;
  }
</style>