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: '请选择地图选点' }]"
          >
            <div style="display: flex;">
              <a-input
                style="width: 85%;"
                v-model:value="form.regionName"
                placeholder="请输入区域名称"
                type="number"
                :disabled="true"
              />
              <div style="margin-left: 20px;"> <a @click="selectMap">选择地图</a></div>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :xs="24">
          <a-form-item
            label="行政区划"
            required
            name="zoneId"
            :rules="[{ required: true, message: '请选择行政区划' }]"
          >
            <a-cascader
              style="width: 85%;"
              v-model:value="value"
              :options="options"
              :load-data="loadData"
              change-on-select
              placeholder="请选择行政区划"
            />
          </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-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'


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

const formRef = ref();
const formRefCity = ref();
const open = ref(false);
const spinning = ref(false);
const tipContent = ref("加载中...");
const editORMapModel = ref(null);
const openORMapTitle = ref("");
const options = ref([])


const form = ref({
  isOperate: "1",
  operateType: "1",
  outageNotice: "",
  accessChannel: "",
  operateTimeBytime: "",
  operateTimeByWeek: []
});

const formCity = ref({
  isOperate: "1",
  operateType: "1",
  outageNotice: "",
  accessChannel: "",
  operateTimeBytime: "",
  operateTimeByWeek: []
});

onMounted(() => {
  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'] })
      })
      options.value = opt;
    }
  })
})

const loadData = (data) => {
  if (data) {
    callOperate("/ebikeOperateSystem/ebikeAdministrationZone?parent_id=" + data[0].value, {}, "get").then(res => {
      if (res.code == 200) {
        let opt = []
        res.data.map(item => {
          opt.push({ label: item['name'], value: item['id'], isLeaf: item['isLeaf'] })
        })
        const index = options.value.findIndex(item => item['value'] == data[0].value);
        options.value[index]['children'] = opt;
      }
    })
  }
}

const selectMap = () => {
  openORMapTitle.value = '地图选点';
  editORMapModel.value.showModal();
}
const handleOkModal = () => {

}

const onORMapCallBack = (data) => {
  debugger
}

const formSave = (callBack) => {
  formRef.value.validate().then(() => {
    tipContent.value = "保存中..."
    spinning.value = true;
    const param = _.cloneDeep(form.value)
    callOperate("/ebikeRegion/saveOperation", param).then(res => {
      spinning.value = false;
      if (callBack) {
        res.data = param;
        callBack(res);
        formRef.value.resetFields()
      }
    })
  }).catch(error => {
    console.log('error', error);
  });
};


defineExpose({ formSave });
</script>