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

<style scoped lang="scss">

</style>
<template>
  <div class="system-dialog-container">
    <el-drawer
        :title="state.dialog.title"
        v-model="state.dialog.isShowDialog"
        size="620px"
        class="pd8"
        append-to-body
        destroy-on-close
        :close-on-click-modal="false"
    >
      <el-form
          :model="state.ruleForm"
          :rules="state.rules"
          label-position="right"
          ref="formRef"
          size="default"
          label-width="180px"
          class="mt5">
        <el-form-item label="统计时间" prop="statMonth">
          <el-input
              v-model="state.ruleForm.statMonth"
              placeholder="统计时间"
              clearable
              disabled
              class="wd200">
          </el-input>
        </el-form-item>
        <el-form-item label="站点" prop="stationId">
<!--          <el-input
              v-model="state.ruleForm.stationId"
              placeholder="站点id"
              clearable
              class="wd200">
          </el-input>-->
          <ext-select
              v-model="state.ruleForm.stationId"
              placeholder="站点"
              clearable
              disabled
              url="station/listStation"
              urlMethod="get"
              data-key=""
              label-key="stationName"
              value-key="stationId"
              @on-change="loadData(true)"
              class="wd200 mr10">
          </ext-select>
        </el-form-item>



<!--        <el-form-item label="总电量" prop="totalPower">-->
<!--          <ext-input-number v-model="state.ruleForm.totalPower"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="总充电费用" prop="totalMoney">-->
<!--          <ext-input-number v-model="state.ruleForm.totalMoney"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="总电费" prop="elecMoney">-->
<!--          <ext-input-number v-model="state.ruleForm.elecMoney"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->

        <el-form-item label="实际抄表电费" prop="actualElecMoney">
          <ext-input-number v-model="state.ruleForm.actualElecMoney"  class="wd200"></ext-input-number>
        </el-form-item>
        <el-form-item label="实际抄表电量" prop="actualPower">
          <ext-input-number v-model="state.ruleForm.actualPower"  class="wd200"></ext-input-number>
        </el-form-item>


<!--        <el-form-item label="总服务费" prop="serviceMoney">-->
<!--          <ext-input-number v-model="state.ruleForm.serviceMoney"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->


<!--        <el-form-item label="服务费优惠金额" prop="serviceMoneyDiscount">-->
<!--          <ext-input-number v-model="state.ruleForm.serviceMoneyDiscount"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->


<!--        <el-form-item label="总优惠金额" prop="discountAmount">-->
<!--          <ext-input-number v-model="state.ruleForm.discountAmount"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="单枪平均日充电量" prop="avgConnectorElec">-->
<!--          <ext-input-number v-model="state.ruleForm.avgConnectorElec"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="订单平均充电量" prop="avgOrderElec">-->
<!--          <ext-input-number v-model="state.ruleForm.avgOrderElec"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="订单平均充电费用" prop="avgOrderMoney">-->
<!--          <ext-input-number v-model="state.ruleForm.avgOrderMoney"  class="wd200"></ext-input-number>-->
<!--        </el-form-item>-->


<!--        <el-form-item label="充电人数" prop="chargeUsers">-->
<!--          <el-input-->
<!--              type="number"-->
<!--              v-model="state.ruleForm.chargeUsers"-->
<!--              placeholder="充电人数"-->
<!--              clearable-->
<!--              class="wd200">-->
<!--          </el-input>-->
<!--        </el-form-item>-->



<!--        <el-form-item label="充电有效订单数" prop="validOrders">-->
<!--          <el-input-->
<!--              type="number"-->
<!--              v-model="state.ruleForm.validOrders"-->
<!--              placeholder="充电有效订单数"-->
<!--              clearable-->
<!--              class="wd200">-->
<!--          </el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="设备使用率" prop="connectorUsageRate">-->
<!--          <el-input-->
<!--              type="number"-->
<!--              v-model="state.ruleForm.connectorUsageRate"-->
<!--              placeholder="设备使用率"-->
<!--              clearable-->
<!--              class="wd200">-->
<!--          </el-input>-->
<!--        </el-form-item>-->
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onCancel" size="default">关  闭</el-button>
          <el-button v-if="state.action==='edit'"  :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

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

import ExtSelect from "/@/components/form/ExtSelect.vue";
import ExtInputNumber from "/@/components/form/ExtInputNumber.vue";

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

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


// 打开弹窗
const open = (action: string = 'add', row: any) => {
  state.action = action;
  state.dialog.title = u.dialog.actions[action].title + "『站点统计表-月』"
  state.dialog.submitTxt = u.dialog.actions[action].btn + "『站点统计表-月』"
  state.dialog.isShowDialog = true;
  if (action !== 'add') {
    loadData(row.id);
  }
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
// 提交
const onSubmit = () => {
  formRef.value.validate((valid, fields) => {
    // console.log('basic checkForm!', valid,fields)
    console.log(state.ruleForm)
    if (valid) {
      state.btnLoading = true;
      const url = state.ruleForm.id > 0 ? "/stat/modifyStationStatMonth" : "stationStatMonth/add"
      $body(url, state.ruleForm).then(() => {
        state.btnLoading = false;
        Msg.message('操作成功');
        console.log('submit!')
        onClose();
        emit('refresh');
      })
    } else {
      state.btnLoading = false;
      Msg.message('表单校验失败', 'error');
    }
  })

};

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

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


const formatMoney = (value:string|number) => {
  return u.fmt.fmtMoney(Number(value))
}

const parserMoney = (value:string) => {
  return (Number(value)*100)+""
}


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


</script>