dy_web/src/views/backOfficeSystem/service/taskPage/taskProgress/taskDetailsDialog.vue

<template>
  <div>
    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button
            v-if="!infoActive"
            type="primary"
            size="small"
            @click="submit"
            :loading="btnLoading"
          >保存</el-button
          >
          <el-button size="small" @click="close">关闭</el-button>
        </div>
      </div>

      <div class="dialogWrapper">
        <div class="tabsWrapper">
          <template v-for="(item, index) in form?.bddList" :key="index">
            <div :class="['item', { 'active': current === index }]" @click="handleItem(index)">{{ item?.bddMc }}</div>
          </template>
        </div>
        <Suspense>
          <template #default>
            <GbMap mapid="mapDetail" />
          </template>
        </Suspense>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, getCurrentInstance, computed, defineAsyncComponent, onUnmounted } from "vue";
import { fetchSelectListByBddxlrwId } from "@/api/service/taskProgress";
import emitter from "@/utils/eventBus";
const { proxy } = getCurrentInstance();
const btnLoading = ref(false); //按钮截流
const title = ref("修改");
const formRef = ref(null);
const infoActive = ref(true);
const current = ref(0)

const GbMap = ref(null);
//级联选择器配置
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:modelValue', 'ok']);

const formData = computed(() => form.value?.bddList[current.value])
const dialogFormVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    if (!val) {
      location.reload();
    }
    emits("update:modelValue", val);
  }
})

//表单数据
const form = ref({
  bddList: []
});

const getData = async () => {
  const { id = "" } = formData.value
  const res = await fetchSelectListByBddxlrwId({ bddxlrwId: id })
  if (res && res?.length > 0) {
    console.log(res);
    emitter.emit("deletePointArea", "fgxlrw")

    const { zxX, zxY, x1, x2, y1, y2, id, fgMc } = form.value
    let centerPoint = [zxX, zxY]
    let position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
    let text = fgMc
    let obj = [{ position: position, text, id: id ,userData: form.value}]
    // const list = data.list?.map((el, index) => {
    //   let centerPoint = [el.zxX,el.zxY]
    //   if(index == 0) cc = centerPoint;
    //   let position = [[Number(el.x1),Number(el.y1)],[Number(el.x2),Number(el.y2)]]
    //   let text = el.mc
    //   let obj = { position: position, text, id: el.id ,userData: el}
    //   return obj;
    // })

    emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'fgxlrw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
    emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
  }
}

const handleItem = (index) => {
  current.value = index;
  getData();
}

//新增
function open(row = {}, type) {
  GbMap.value = defineAsyncComponent(() => import("@/components/Map/GdMap/index.vue"))
  infoActive.value = !type;
  form.value = { ...row, bddList: row?.bddList ? JSON.parse(row?.bddList) : [] };
  title.value = "任务详情";
  getData()
  dialogFormVisible.value = true;
}

//关闭弹窗
function close() {
  formRef.value?.resetFields();
  dialogFormVisible.value = false;
}

//提交
const submit = async () => {
  try {
    await formRef.value.validate()

    await updateData(form.value)
    proxy.$message({
      type: "success",
      message: "修改成功"
    });
    dialogFormVisible.value = false;
    emits("ok")

  } catch (error) {
    console.log(error);
  }
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.dialog {
  .dialogWrapper {
    height: calc(100vh - 256px);
    margin: 20px 20px 0 20px;

    .el-form--inline {
      padding: 0 0 0rem 0;
    }

    .tabsWrapper {
      display: flex;
      margin-bottom: 0.53vw;
      overflow-x: auto;
      .item {
        cursor: pointer;
        padding: 0.27vw 0.53vw;
        width: fit-content;
        flex-shrink: 0;
        border: 1px solid #EDEDED;
        border-radius: 5px;
        margin-right: 0.53vw;

        &:last-child {
          margin-right: 0;
        }
      }

      .active {
        color: #24b6dd;
        border: 1px solid #24b6dd !important;
      }
    }
  }
}

.label {
  margin-bottom: 1rem;
}
</style>