xzlz_JczWeb/src/views/backOfficeSystem/peopleManag/checkpoint/components/editAddForm.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ pageInfo[pageType].title }}</span>
      <div>
        <el-button size="small" type="primary" v-if="['add', 'edit'].includes(pageType)" @click="_onSave">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <el-form ref="formRef" :model="listQuery" :rules="rules" :inline="true" label-position="top">
        <el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
          <MOSTY.Department width="100%" clearable :disabled="forbidden" v-model="listQuery.ssbmdm"
            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'" />
        </el-form-item>
        <el-form-item style="width: 40%" prop="jczmc" label="环林卡口名称">
          <el-input :disabled="forbidden" v-model="listQuery.jczmc" placeholder="请输入环林卡口名称" style="width: 100%"
            clearable />
        </el-form-item>

        <el-form-item style="width: 40%" prop="zqlx" label="执勤类型">
          <el-select :disabled="forbidden" v-model="listQuery.zqlx" placeholder="请选择执勤类型">
            <el-option v-for="dict in dict.D_BZ_ZQLX" :key="dict.value" :value="dict.value"
              :label="dict.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 40%" prop="jczlx" label="环林卡口类型">
          <el-select :disabled="forbidden" v-model="listQuery.jczlx" placeholder="请选择环林卡口类型">
            <el-option v-for="dict in dict.D_BZ_JCZLX" :key="dict.value" :value="dict.value"
              :label="dict.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 40%" prop="jczjb" label="环林卡口级别">
          <el-select :disabled="forbidden" v-model="listQuery.jczjb" placeholder="请选择环林卡口级别">
            <el-option v-for="dict in dict.D_BZ_JCZJB" :key="dict.value" :value="dict.value"
              :label="dict.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 40%" prop="fzr" label="负责人">
          <el-input :disabled="forbidden" v-model="listQuery.fzr" placeholder="请输入负责人" style="width: 100%" clearable />
        </el-form-item>
        <el-form-item style="width: 40%" prop="lxdh" label="联系电话">
          <el-input :disabled="forbidden" v-model="listQuery.lxdh" placeholder="请输入联系电话" style="width: 100%"
            clearable />
        </el-form-item>
        <el-form-item style="width: 40%" prop="dllx" label="道路类型">
          <el-select :disabled="forbidden" v-model="listQuery.dllx" placeholder="请选择道路类型">
            <el-option v-for="dict in dict.D_BZ_DLLX" :key="dict.value" :value="dict.value"
              :label="dict.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 40%" prop="xxdz" label="环林卡口地址">
          <el-input :disabled="forbidden" v-model="listQuery.xxdz" placeholder="请输入环林卡口地址" style="width: 100%"
            clearable />
        </el-form-item>
        <el-form-item label="示意图(最多3张)" prop="fjid" style="width: 40%">
          <MOSTY.Upload :disableds="forbidden" :isImg="true" width="100%" :limit="3" v-model="listQuery.fjid">
          </MOSTY.Upload>
        </el-form-item>
        <el-form-item label="全景图(正面、侧面、俯视共3张)" prop="qjfjid" style="width: 48%">
          <MOSTY.Upload :disableds="forbidden" width="100%" :isImg="true" :limit="3" v-model="listQuery.qjfjid">
          </MOSTY.Upload>
        </el-form-item>
        <el-form-item style="width: 85%" prop="jd" label="坐标位置">
          <div class="latlng flex">
            <el-input :disabled="true" v-model="listQuery.jd" clearable placeholder="请选择坐标"
              style="width: 42%"></el-input>
            <el-input :disabled="true" v-model="listQuery.wd" clearable placeholder="请选择坐标"
              style="width: 42%; margin-left: 1%"></el-input>

            <el-button @click="selectLocation" :disabled="forbidden">选择定位</el-button>
          </div>
        </el-form-item>
        <el-form-item style="width: 100%">
          <div class="mapbox">
            <GdMap />
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { JczaddJcz, JczupdateJcz } from "@/api/mosty-jcz.js";
import * as MOSTY from "@/components/MyComponents/index";
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/GdMap/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  dict: {
    type: Object,
    default: () => { }
  }
});
const rules = reactive({
  jczmc: [
    {
      required: true,
      message: "请输入检查站名称"
    }
  ],
  zqlx: [
    {
      required: true,
      message: "请选择执勤类型",
      trigger: "change"
    }
  ],
  jczlx: [
    {
      required: true,
      message: "请选择环林卡口类型",
      trigger: "change"
    }
  ], jczjb: [
    {
      required: true,
      message: "请选择环林卡口级别",
      trigger: "change"
    }
  ],
  wd: [
    {
      required: true,
      message: "请输入维度"
    }
  ],
  jd: [
    {
      required: true,
      message: "请输入经度"
    }
  ]
});
const formRef = ref(null);
const emit = defineEmits(["getjczgetXfllList"]);
const dialogForm = ref(false);
const listQuery = ref({ fl: "02" });
const pageInfo = {
  edit: {
    title: "编辑",
    url: ""
  },
  add: {
    title: "新增",
    url: ""
  },
  detail: {
    title: "详情"
  }
};
onMounted(() => {
  emitter.on("coordString", (res) => {
    if (res.type === "point") {
      listQuery.value.jd = res.coord[0];
      listQuery.value.wd = res.coord[1];
      chackLat();
    }
  });
});
let pageType = ref("add");
const forbidden = ref(false)
// 初始化数据
const init = (type, row) => {
  pageType.value = type;
  dialogForm.value = true;
  // 根据type和row初始化表单数据
  tabHeightFn();
  if (type == "edit" || type == "detail") {
    listQuery.value = { ...row };
    if (type == "detail") {
      forbidden.value = true
    }
    chackLat();
  } else {
    listQuery.value = {};
  }
};
//保存
const _onSave = () => {
  if (!formRef) return;
  formRef.value.validate((valid, fields) => {
    if (valid) {
      if (pageType.value == "add") {
        JczaddJcz(listQuery.value).then((res) => {
          ElMessage({ message: "新增成功", type: "success" });
          emit("getjczgetXfllList");
          close();
        });
      } else {
        JczupdateJcz(listQuery.value).then((res) => {
          ElMessage({ message: "修改成功", type: "success" });
          emit("getjczgetXfllList");
          close();
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
  console.log();
};
//选择定位地图
const selectLocation = () => {
  emitter.emit("drawShape", {
    flag: "select_point",
    type: "point",
    isclear: true
  });
};
//获取经纬度
const chackLat = () => {
  const { jd, wd } = listQuery.value;
  console.log(jd, wd);

  emitter.emit("deletePointArea", "jczMap_Gzy");
  if (jd && wd) {
    setTimeout(() => {
      emitter.emit("addPointArea", {
        coords: [{ jd, wd }],
        icon: require("@/assets/images/bi/gzy.png"),
        flag: "jczMap_Gzy"
      });
    }, 1000);
  }
};
// 初始化时展示地图图标
const mapIcon = (val) => {
  console.log(val);

}
//页面关闭
const close = () => {
  dialogForm.value = false;
  forbidden.value = false
  listQuery.value = {};
};
// 表格高度计算
const tableHeight1 = ref();
const tabHeightFn = () => {
  tableHeight1.value = window.innerHeight - 450;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;

  .head_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .cntinfo {
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
  }
}

.my_transfer {
  height: calc(100% - 50px);
  display: flex;

  .btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
  }

  .left {
    margin: 12px;
    flex: 1;
    position: relative;

    .tableBox {
      position: absolute;
      width: 100%;
    }

    .serch {
      position: relative;
      width: 100%;

      // height: 96px;
      >.el-form--inline {
        display: block;
        width: 100%;
        padding: 0;

        >.el-form-item--default {
          width: 31%;
        }
      }
    }

    .tableBox {
      width: 100%;
    }
  }

  .right {
    width: 380px;
    margin: 12px;
  }
}

.phone {
  width: 95px;
  height: 120px;

  .el-image {
    width: 95px;
    max-height: 120px;
  }
}

::v-deep .el-upload {
  width: 90px;
  height: 100px;
  border: 1px dashed #000000;
  margin-bottom: 14px;

  .el-icon {
    margin-top: 34px;
    font-size: 26px;
  }

  .el-image {
    width: 100%;
    height: 100%;
  }
}

.mapbox {
  width: 1000px;
  padding: 0 10px;
  height: 400px;
  box-sizing: border-box;
  background: #000;
}
</style>