ebike-ui/ebike-operate/src/views/form/operateregion/OperateAddForm.vue

<template>
  <a-spin
    :spinning="spinning"
    :tip="tipContent"
  >
    <a-form
      :model="form"
      :label-col="{sm: { span: 6 } }"
      :wrapper-col="{ span:14}"
      ref="formRef"
    >
      <a-row :gutter="8">
        <a-col :xs="24">
          <a-form-item
            label="行政区划"
            required
            name="zoneId"
            :rules="[{ required: true, message: '请选择行政区划' }]"
          >
            <a-select v-model:value="form.zoneId" placeholder="请选择行政区划" style="width: 85%;">
              <a-select-option v-for="(item) in zoneList" :key="item.id" :value="item.zoneId">{{ item.zoneName }}</a-select-option>
            </a-select>
            <!-- <a-input
              style="display: none;"
              v-model:value="form.zoneId"
            />
            <a-cascader
              style="width: 85%;"
              :options="zoneOptions"
              :load-data="loadZoneData"
              change-on-select
              placeholder="请选择行政区划"
              @change="changeZone"
            /> -->
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :xs="24">
          <a-form-item
            label="区域名称"
            required
            name="regionName"
            :rules="[{ required: true, message: '请输入区域名称' }]"
          >
            <a-input
              style="width: 85%;"
              v-model:value="form.regionName"
              placeholder="请输入区域名称"
            />
          </a-form-item>
        </a-col>

      </a-row>
      <!-- <a-row :gutter="8">
        <a-col :xs="24">
          <a-form-item
            label="区域代码"
            required
            name="regionCode"
            :rules="[{ required: true, message: '请输入区域代码' }]"
          >
            <a-input
              style="width: 85%;"
              v-model:value="form.regionCode"
              placeholder="请输入区域代码"
            />
          </a-form-item>
        </a-col>
      </a-row> -->
      <a-row :gutter="8">
        <a-col :xs="24">
          <a-form-item
            label="区域简称"
            name="regionForShort"
          >
            <a-input
              style="width: 85%;"
              v-model:value="form.regionForShort"
              placeholder="请输入区域简称"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :xs="24">
          <a-form-item
            label="区域电子围栏"
            required
            name="points"
            :rules="[{ required: true, message: '请选择区域电子围栏' }]"
          >
            <div style="display: flex;">
              <a-input
                style="display: none;"
                v-model:value="form.points"
              />
              <div style="margin-left: 20px;"> <a @click="selectMap">编辑地图</a></div>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
  <operateRegionMap
    ref="editORMapModel"
    :onCallBack="onORMapCallBack"
    :openTitle="openORMapTitle"
  ></operateRegionMap>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue'
import operateRegionMap from '../../Urban/OperateRegion/operateRegionMap.vue'
import { callOperate } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import { getCache } from '@/utils/authority';


const props = defineProps({
  onCallBack: {
    type: Function,
    required: true
  }
});

const formRef = ref();
const spinning = ref(false);
const tipContent = ref("加载中...");
const editORMapModel = ref(null);
const openORMapTitle = ref("");

const zoneOptions = ref([])

const zoneList = ref([])

const form = ref({
  regionId: "",
  regionName: "",
  simpleName: "",
  zoneId: undefined,
  points: [],
  shapeType: 2,
  radius: 0
});


onMounted(() => {
  const userinfo = getCache('ebike-userinfo');
  callOperate("/ebikeOrgZone/list?orgId=" + userinfo.orgId, {}, "get").then((res) => {
    if (res.code!= 200) {
        message.error(res.message)
        return
    }
    if (res.data) {
      zoneList.value = res.data
    } 
  }) 

  // callOperate("/ebikeOperateSystem/ebikeAdministrationZone", {}, "get").then(res => {
  //   if (res.code == 200) {
  //     let opt = []
  //     res.data.map(item => {
  //       opt.push({ label: item['name'], value: item['id'], isLeaf: item['isLeaf'] })
  //     })
  //     zoneOptions.value = opt;
  //   }
  // })
})

const loadZoneData = (data) => {
  if (data) {
    let pindex = 0;
    let parentId = data[0].value;
    if (data.length > 0) {
      pindex = data.length - 1;
      parentId = data[pindex].value; 
    }
    callOperate("/ebikeOperateSystem/ebikeAdministrationZone?parent_id=" + parentId, {}, "get").then(res => {
      if (res.code == 200) {
        let opt = []
        res.data.map(item => {
          opt.push({ label: item['name'], value: item['id'], isLeaf: item['isLeaf'] })
        })
        setZoneData(zoneOptions.value,'value', parentId,'children',opt);
      }
    })
  }
}

const setZoneData = (arr,keyname,keyvalue,name,value) => {
  arr.map(item => {
    if (item[keyname] == keyvalue) {
      item[name] = value;
    }
    if (item['children']) {
      setZoneData(item['children'],keyname,keyvalue,name,value)
    }
  })
}

const changeZone = (data) => {
  if (data.length > 0) {
    form.value.zoneId = data[data.length - 1];
  } else {
    form.value.zoneId = "";
  }
}

const selectMap = () => {
  openORMapTitle.value = '绘制地图';
  editORMapModel.value.showModal();
}

const onORMapCallBack = (data) => {
  const { points, shapeType, radius } = data;
  form.value.points = points;
  form.value.shapeType = shapeType;
  form.value.radius = radius;
}

const formSave = (callBack) => {
  formRef.value.validate().then(() => {
    tipContent.value = "保存中..."
    spinning.value = true;
    callOperate("/ebikeRegion/saveOperation", form.value).then(res => {
      spinning.value = false;
      if (res.code != 200) {
        message.error(res.message);
        if (callBack) {
          callBack(false, res);
        }
        return;
      }
      if (callBack) {
        callBack(true, res);
      }
      formRef.value.resetFields()
    })
  }).catch(error => {
    if (callBack) {
        callBack(false, error);
      }
  });
};


defineExpose({ formSave });
</script>