charge-java/admin-web/src/views/admin/station/list/dialog.vue

<style scoped lang="scss">

</style>
<template>
  <div class="system-dialog-container">
    <el-dialog
        :title="state.dialog.title"
        v-model="state.dialog.isShowDialog"
        width="820px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        @close="onClose"
        align-center>
      <el-form
          inline
          :model="state.ruleForm"
          :rules="state.rules"
          ref="formRef"
          size="default"
          label-width="125px"
          class="mt5">
        <el-form-item label="站点名称" prop="stationName">

          <el-input
              v-model.trim="state.ruleForm.stationName"
              placeholder="站点名称"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="站点照片" prop="pictures">
          <ext-upload
              v-model="state.ruleForm.pictures"
              multiple :max="3"></ext-upload>
          <!--          <el-input
                        v-model.trim="state.ruleForm.pictures"
                        placeholder="站点照片"
                        clearable
                        class="wd200">
                    </el-input>-->
        </el-form-item>

        <el-form-item label="en+充电站id" prop="stationId">
          <el-input
              v-model.trim="state.ruleForm.stationId"
              placeholder="en+充电站id"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="en+运营商id" prop="operatorId">
          <el-input
              v-model.trim="state.ruleForm.operatorId"
              placeholder="en+运营商id"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="设备机构代码" prop="equipmentOwnerId">
          <el-input
              v-model.trim="state.ruleForm.equipmentOwnerId"
              placeholder="设备所属运营平台组织机构代码"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>

        <el-form-item label="充电中国家代码" prop="countryCode">
          <el-input
              v-model.trim="state.ruleForm.countryCode"
              placeholder="充电中国家代码：CN"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="省市辖区编码" prop="areaCode">
          <el-input
              v-model.trim="state.ruleForm.areaCode"
              placeholder="充电站省市辖区编码"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" class="w100">
          <el-input
              v-model.trim="state.ruleForm.address"
              placeholder="地址"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="站点电话" prop="stationTel">
          <el-input
              v-model.trim="state.ruleForm.stationTel"
              placeholder="站点电话"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="服务电话" prop="serviceTel">
          <el-input
              v-model.trim="state.ruleForm.serviceTel"
              placeholder="服务电话"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="站点类型" prop="stationType">
          <ext-d-select
              type="Station.type"
              v-model.trim="state.ruleForm.stationType"
              placeholder="站点类型"
              clearable
              class="wd200">
          </ext-d-select>
        </el-form-item>
        <el-form-item label="站点状态" prop="stationStatus">
          <ext-d-select
              v-model.trim="state.ruleForm.stationStatus"
              placeholder="站点状态"
              type="Station.status"
              clearable
              class="wd200">
          </ext-d-select>
        </el-form-item>
        <el-form-item label="充电车位数量" prop="parkingNum">
          <el-input
              v-model.trim="state.ruleForm.parkingNum"
              placeholder="充电车位数量"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="充电桩位置坐标" prop="location">
          <el-input
              v-model.trim="state.ruleForm.location"
              placeholder="充电桩位置坐标"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>

        <el-form-item label="建设场所" prop="construction">
          <ext-d-select
              type="Station.construction"
              v-model.trim="state.ruleForm.construction"
              placeholder="建设场所：1：居民区 2：公共机构 3：企事业单位 4：写字楼 5：工业园区 6：交通枢纽 7：大型文体设施 8：城市绿地 9：大型建筑配建停车场 10：路边停车位 11：城际高速服务区 255：其他"
              clearable
              class="wd200">
          </ext-d-select>
        </el-form-item>

        <el-form-item label="充电费描述" prop="electricityFee">
          <el-input
              v-model.trim="state.ruleForm.electricityFee"
              placeholder="充电费描述"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="服务费率描述" prop="serviceFee">
          <el-input
              v-model.trim="state.ruleForm.serviceFee"
              placeholder="服务费率描述"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>


        <el-form-item label="停车费" prop="parkFee">
          <el-input
              v-model.trim="state.ruleForm.parkFee"
              placeholder="停车费"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="payment">
          <el-input
              v-model.trim="state.ruleForm.payment"
              placeholder="支付方式：刷卡、线上、现金（电子钱包类卡为刷卡、身份鉴权卡、微信/支付宝、APP为线上）"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="是否支持预约" prop="supportOrder">
          <el-input
              v-model.trim="state.ruleForm.supportOrder"
              placeholder="是否支持预约：0：不支持 1：支持"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
              v-model.trim="state.ruleForm.remark"
              placeholder="备注"
              clearable
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="站点引导" prop="siteGuide" class="w100">
          <el-input
              v-model.trim="state.ruleForm.siteGuide"
              placeholder="站点引导"
              clearable
              type="textarea"
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="营业时间描述" prop="businessHours" class="w100">
          <el-input
              v-model.trim="state.ruleForm.businessHours"
              placeholder="营业时间描述"
              type="textarea"
              clearable
              class="w100">
          </el-input>
        </el-form-item>

        <el-form-item label="使用车型描述" prop="matchCars" class="w100">
          <el-input
              v-model.trim="state.ruleForm.matchCars"
              placeholder="使用车型描述"
              clearable
              type="textarea"
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="楼层及数量描述" prop="parkInfo" class="w100">
          <el-input
              v-model.trim="state.ruleForm.parkInfo"
              placeholder="车位楼层及数量描述"
              clearable
              type="textarea"
              class="w100">
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="StationDialog">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {Msg} from "/@/utils/message";
import {$body, $get} from "/@/utils/request";
import u from '/@/utils/u'
import ExtDSelect from "/@/components/form/ExtDSelect.vue";
import ExtUpload from "/@/components/form/ExtUpload.vue";

// 引入组件

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const formRef = ref();
//定义初始变量，重置使用
const initState = () => ({
  ruleForm: {
    id: 0
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  rules: {},
})

// 定义变量内容
const state = reactive(initState());


// 打开弹窗
const open = (action: string = 'add', row: any) => {
  state.dialog.title = u.dialog.actions[action].title + "『充电站信息』"
  state.dialog.submitTxt = u.dialog.actions[action].btn + "『充电站信息』"
  state.dialog.isShowDialog = true;
  state.ruleForm = Object.assign(state.ruleForm, row);
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
// 提交
const onSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      state.btnLoading = true;
      const url = state.ruleForm.id > 0 ? "station/modify" : "station/add"
      let params = {
        stationId: state.ruleForm.stationId,
        pictures: state.ruleForm.pictures
      }
      $body(url, params).then(() => {
        state.btnLoading = false;
        Msg.message('操作成功');
        console.log('submit!')
        onClose();
        emit('refresh');
      })
    }
  }).catch(() => {
    state.btnLoading = false;
    Msg.message('请先完整填写表单', 'error');
  })
};

const handleFormChange = (formData: any) => {
  console.log(formData)
}

// 初始化表格数据
/*const loadData = (id: number) => {
  $get(`station/detail/${id}`).then((res: any) => {
    state.ruleForm = res;
  })
}*/

// 暴露变量
defineExpose({
  open
});


</script>