前端金额转换2位小数输入

admin-web/src/components/form/ExtInputNumber.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-input-number
+      :disabled="disabled"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      v-model.trim="state.convertValue"
+      controls-position="right"
+      :precision="percions"/>
+</template>
+
+<script setup lang="ts" name="ExtInputNumber">
+import {reactive, onMounted, nextTick, watch,computed} from 'vue';
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, String]
+  },
+  ratio: {
+    type: Number,
+    default: 100
+  },
+  digit: {
+    type: Number,
+    default: 2
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  placeholder: {
+    type: String
+  }
+})
+
+const state = reactive({
+  convertValue:0
+})
+
+const percions = computed(()=>{
+  return Number(props.digit || 2);
+})
+
+watch(()=>state.convertValue,(nv,ov)=>{
+  emit('update:modelValue', Number(((nv||0) * Number(props.ratio || 1)).toFixed(0)))
+})
+
+watch(()=>props.modelValue,(val,ov)=>{
+  state.convertValue = Number((val||0) )/ (props.ratio || 1)
+},{immediate:true})
+
+</script>

admin-web/src/components/form/ExtSelect.vue

@@ -88,7 +88,7 @@ const state = reactive({
 watch(() => props.modelValue, (val) => {
   console.log("watch>>>", val)
   state.modelVal = val;
-})
+},{immediate:true})
 
 
 watch(() => props.dataList, (val) => {

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

@@ -6,7 +6,8 @@
     <el-drawer
         :title="state.dialog.title"
         v-model="state.dialog.isShowDialog"
-        width="820px"
+        size="620px"
+        class="pd8"
         append-to-body
         destroy-on-close
         :close-on-click-modal="false"
@@ -14,135 +15,116 @@
       <el-form
           :model="state.ruleForm"
           :rules="state.rules"
-          label-position="left"
+          label-position="right"
           ref="formRef"
           size="default"
-          label-width="100px"
+          label-width="180px"
           class="mt5">
-        <el-form-item label="实际抄表电费金额（分）" prop="actualElecMoney">
-          <el-input
-              v-model="state.ruleForm.actualElecMoney"
-              placeholder="实际抄表电费金额（分）"
-              clearable
-              class="wd200">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="实际抄表电量" prop="actualPower">
-          <el-input
-              v-model="state.ruleForm.actualPower"
-              placeholder="实际抄表电量"
-              clearable
-              class="wd200">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="单枪平均日充电量" prop="avgConnectorElec">
+        <el-form-item label="统计时间" prop="statMonth">
           <el-input
-              v-model="state.ruleForm.avgConnectorElec"
-              placeholder="单枪平均日充电量"
+              v-model="state.ruleForm.statMonth"
+              placeholder="统计时间"
               clearable
+              disabled
               class="wd200">
           </el-input>
         </el-form-item>
-        <el-form-item label="订单平均充电量" prop="avgOrderElec">
-          <el-input
-              v-model="state.ruleForm.avgOrderElec"
-              placeholder="订单平均充电量"
+        <el-form-item label="站点" prop="stationId">
+<!--          <el-input
+              v-model="state.ruleForm.stationId"
+              placeholder="站点id"
               clearable
               class="wd200">
-          </el-input>
+          </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="avgOrderMoney">
-          <el-input
-              v-model="state.ruleForm.avgOrderMoney"
-              placeholder="订单平均充电费用"
-              clearable
-              class="wd200">
-          </el-input>
+
+
+
+        <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="chargeUsers">
-          <el-input
-              v-model="state.ruleForm.chargeUsers"
-              placeholder="充电人数"
-              clearable
-              class="wd200">
-          </el-input>
+
+        <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="connectorUsageRate">
-          <el-input
-              v-model="state.ruleForm.connectorUsageRate"
-              placeholder="设备使用率"
-              clearable
-              class="wd200">
-          </el-input>
+
+        <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="discountAmount">
-          <el-input
-              v-model="state.ruleForm.discountAmount"
-              placeholder="总优惠金额"
-              clearable
-              class="wd200">
-          </el-input>
+
+        <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="elecMoney">
-          <el-input
-              v-model="state.ruleForm.elecMoney"
-              placeholder="总电费"
-              clearable
-              class="wd200">
-          </el-input>
+        <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">
-          <el-input
-              v-model="state.ruleForm.serviceMoney"
-              placeholder="总服务费"
-              clearable
-              class="wd200">
-          </el-input>
+          <ext-input-number v-model="state.ruleForm.serviceMoney"  class="wd200"></ext-input-number>
         </el-form-item>
+
+
         <el-form-item label="服务费优惠金额" prop="serviceMoneyDiscount">
-          <el-input
-              v-model="state.ruleForm.serviceMoneyDiscount"
-              placeholder="服务费优惠金额"
-              clearable
-              class="wd200">
-          </el-input>
+          <ext-input-number v-model="state.ruleForm.serviceMoneyDiscount"  class="wd200"></ext-input-number>
         </el-form-item>
-        <el-form-item label="统计时间" prop="statMonth">
-          <el-input
-              v-model="state.ruleForm.statMonth"
-              placeholder="统计时间"
-              clearable
-              class="wd200">
-          </el-input>
+
+
+        <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="站点id" prop="stationId">
-          <el-input
-              v-model="state.ruleForm.stationId"
-              placeholder="站点id"
-              clearable
-              class="wd200">
-          </el-input>
+
+        <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="totalMoney">
+        <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
-              v-model="state.ruleForm.totalMoney"
-              placeholder="总充电费用"
+              type="number"
+              v-model="state.ruleForm.chargeUsers"
+              placeholder="充电人数"
               clearable
               class="wd200">
           </el-input>
         </el-form-item>
-        <el-form-item label="总电量" prop="totalPower">
+
+
+
+        <el-form-item label="充电有效订单数" prop="validOrders">
           <el-input
-              v-model="state.ruleForm.totalPower"
-              placeholder="总电量"
+              type="number"
+              v-model="state.ruleForm.validOrders"
+              placeholder="充电有效订单数"
               clearable
               class="wd200">
           </el-input>
         </el-form-item>
-        <el-form-item label="充电有效订单数" prop="validOrders">
+
+        <el-form-item label="设备使用率" prop="connectorUsageRate">
           <el-input
-              v-model="state.ruleForm.validOrders"
-              placeholder="充电有效订单数"
+              type="number"
+              v-model="state.ruleForm.connectorUsageRate"
+              placeholder="设备使用率"
               clearable
               class="wd200">
           </el-input>
@@ -151,8 +133,8 @@
 
       <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>
+          <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>
@@ -165,6 +147,9 @@ 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();
@@ -181,6 +166,7 @@ const initState = () => ({
     submitTxt: '',
   },
   rules: {},
+  action:''
 })
 
 // 定义变量内容
@@ -189,6 +175,7 @@ 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;
@@ -209,6 +196,7 @@ const onCancel = () => {
 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"
@@ -238,6 +226,16 @@ const loadData = (id: any) => {
   })
 }
 
+
+const formatMoney = (value:string|number) => {
+  return u.fmt.fmtMoney(Number(value))
+}
+
+const parserMoney = (value:string) => {
+  return (Number(value)*100)+""
+}
+
+
 // 暴露变量
 defineExpose({
   open

admin-web/src/views/admin/station/stat/index.vue

@@ -87,7 +87,7 @@
         >
           <template #default="{row}">
             <template v-if="field.prop==='action'">
-              <el-button v-auth="'stationStatMonth.modify'" size="small" plain type="warning" @click="onRowClick('view',row)">编辑</el-button>
+              <el-button v-auth="'stationStatMonth.modify'" size="small" plain type="warning" @click="onRowClick('edit',row)">编辑</el-button>
               <el-button v-auth="'stationStatMonth.list'" size="small" plain type="primary" @click="onRowClick('view',row)">查看</el-button>
               <el-button v-auth="'statement.add'" size="small" plain type="success" @click="handleCreateStatements(row)">生成对账单</el-button>
             </template>
@@ -98,7 +98,7 @@
                 {{row.stationName}}
               </div>
             </template>
-            <template v-else-if="['totalMoney','elecMoney','actualElecMoney','serviceMoney','serviceMoneyDiscount','discountAmount','avgOrderMoney'].includes(field.prop)">
+            <template v-else-if="['totalMoney','elecMoney','actualElecMoney','serviceMoney','serviceMoneyDiscount','discountAmount','avgOrderMoney','actualPower'].includes(field.prop)">
               {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else>
@@ -151,6 +151,7 @@ const state = reactive({
       {label: '订单金额', prop: 'totalMoney', resizable: true,width:100},
       {label: '订单电费', prop: 'elecMoney', resizable: true,width:100},
       {label: '实际抄表电费', prop: 'actualElecMoney', resizable: true,width:120},
+      {label: '实际抄表电量', prop: 'actualPower', resizable: true,width:120},
       {label: '订单服务费', prop: 'serviceMoney', resizable: true,width:110},
       {label: '服务费优惠金额', prop: 'serviceMoneyDiscount', resizable: true,width:135},
       {label: '总优惠金额', prop: 'discountAmount', resizable: true,width:110},