car-wash-java/admin-web/src/views/admin/platform/deviceConfig/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"
        align-center>
      <el-form
          inline
          :model="state.ruleForm"
          :rules="state.rules"
          label-position="top"
          ref="formRef"
          size="default"
          label-width="100px"
          class="mt5">
        <div class="sub-group-bottom">基本参数</div>
        <el-form-item label="配置名称" prop="name" class="w100">
          <el-input
              v-model="state.ruleForm.name"
              placeholder="配置名称"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="配置备注" prop="remark" class="w100">
          <el-input
              v-model="state.ruleForm.remark"
              placeholder="配置备注"
              clearable
              type="textarea"
              :rows="3"
              maxlength="500"
              show-word-limit
              class="w100">
          </el-input>
        </el-form-item>

        <div class="sub-group-bottom">选项参数</div>
        <el-form-item label="灯光工作模式（ 0：全天暂停营业 1:全天营业 2:根据时间段开始营业）" prop="lightMode" class="w100">
          <el-input
              v-model="state.ruleForm.lightMode"
              placeholder="灯光工作模式 0：全天暂停营业 1:全天营业 2:根据时间段开始营业"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="维护模式（维护模式 0：未设置，1：已设置(屏幕显示设备维护界面)）" prop="maintenanceMode" class="w100">
          <el-input
              v-model="state.ruleForm.maintenanceMode"
              placeholder="维护模式 0：未设置，1：已设置(屏幕显示设备维护界面)"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="工作模式（工作模式 0：全天暂停营业 1:全天营业 2:根据时间段开始营业）" prop="workMode" class="w100">
          <el-input
              v-model="state.ruleForm.workMode"
              placeholder="工作模式 0：全天暂停营业 1:全天营业 2:根据时间段开始营业"
              clearable
              class="w100">
          </el-input>
        </el-form-item>

        <el-form-item label="屏幕类型（屏幕类型 0:不支持视频播放，1:支持视频播放,两种屏型号不同，填写错误会导致没有语音。）" prop="screenType" class="w100">
          <el-input
              v-model="state.ruleForm.screenType"
              placeholder="屏幕类型(0:不支持视频播放的屏幕，1:支持视频播放的屏幕,两种屏型号不同，填写错误会导致没有语音。)"
              clearable
              class="w100">
          </el-input>
        </el-form-item>

<!--实体类中无此属性
        <el-form-item label="是否安装了水流量传感器" prop="sensorWater" class="wd300">
          <ext-boolean
              v-model="state.ruleForm.sensorWater"
              placeholder="是否安装了水流量传感器"
              clearable
              class="w100"/>
        </el-form-item>
-->

        <el-form-item label="屏幕左下方文本" prop="userMessage1" class="wd300">
          <el-input
              v-model="state.ruleForm.userMessage1"
              placeholder="屏幕左下方文本"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="屏幕右下方文本" prop="userMessage2" class="wd300">
          <el-input
              v-model="state.ruleForm.userMessage2"
              placeholder="屏幕右下方文本"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <div class="sub-group-bottom">时间参数</div>

        <el-form-item label="自动启动（有流量的时候是否自动启动水泵，推荐关闭）" prop="motorFlowOn" class="wd300">
          <ext-boolean
              v-model="state.ruleForm.motorFlowOn"
              placeholder="自动启动，有流量的时候是否自动启动水泵，推荐关闭"
              clearable
              class="w100">
          </ext-boolean>
        </el-form-item>
        <el-form-item label="自动关闭（没有流量的时候是否自动关闭水泵，推荐开启)" prop="motorFlowOff" class="wd300">
          <ext-boolean
              v-model="state.ruleForm.motorFlowOff"
              placeholder="自动关闭，没有流量的时候是否自动关闭水泵，推荐开启"
              clearable
              class="w100">
          </ext-boolean>
        </el-form-item>

        <el-form-item label="启动延时，电机每次启动最少要开多少毫秒（推荐5000毫秒）" prop="motorOnDelay" class="w100">
          <el-input-number
              v-model="state.ruleForm.motorOnDelay"
              placeholder="启动延时，电机每次启动最少要开多少毫秒"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="关闭延时，电机每次关闭最少要关闭多少毫秒（推荐1000毫秒）" prop="motorOffDelay" class="w100">
          <el-input-number
              v-model="state.ruleForm.motorOffDelay"
              placeholder="关闭延时，电机每次关闭最少要关闭多少毫秒"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>

        <el-form-item label="关闭灵敏度（推荐10000毫秒）" prop="motorOnInterval" class="w100">
          <el-input-number
              v-model="state.ruleForm.motorOnInterval"
              placeholder="关闭灵敏度，多久收不到流量信号就关闭电机"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="空闲超时提示音倒计时" prop="noticeThresholdIdle" class="w100">
          <el-input-number
              v-model="state.ruleForm.noticeThresholdIdle"
              placeholder="空闲超时提示音倒计时，60表示当空闲超时倒计时不足60秒的时候发出提示音，提示用户按任意功能键阻止设备关闭"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="操作超时提示音倒计时" prop="noticeThresholdOperation" class="w100">
          <el-input-number
              v-model="state.ruleForm.noticeThresholdOperation"
              placeholder="操作超时提示音倒计时，300表示当剩余操作时间不足5分钟的时候发出提示音，提示用户合理安排剩余时间"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="操作超时关机" prop="operationTimeout" class="w100">
          <el-input-number
              v-model="state.ruleForm.operationTimeout"
              placeholder="操作超时关机，3600表示每次开机后有60分钟的操作时间，60分钟到了会强制结束订单。"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="洗车结束后" prop="billDelay" class="w100">
          <el-input-number
              v-model="state.ruleForm.billDelay"
              placeholder="洗车结束后，费用明细页面显示多久(单位秒)"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="空闲超时关" prop="idleTimeout" class="w100">
          <el-input-number
              v-model="state.ruleForm.idleTimeout"
              placeholder="空闲超时关，1200表示20分钟不操作机器自动结束订单，用户操作一次就重新开始倒计时一下"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>

        <el-form-item label='照明时间段1' prop="lightTimePeriod1" class="w100">
          <el-input
              v-model="state.ruleForm.lightTimePeriod1"
              placeholder='时间段1："18:00 - 22:00" 下午6点到晚上10点打开照明'
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label='照明时间段2' prop="lightTimePeriod2" class="w100">
          <el-input
              v-model="state.ruleForm.lightTimePeriod2"
              placeholder='时间段2："18:00 - 08:00" 下午6点到早上8点打开照明'
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label='营业时间段1' prop="workTimePeriod1" class="w100">
          <el-input
              v-model="state.ruleForm.workTimePeriod1"
              placeholder='时间段1："08:00 - 12:00" 上午8点到中午12点营业'
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label='营业间段2' prop="workTimePeriod2" class="w100">
          <el-input
              v-model="state.ruleForm.workTimePeriod2"
              placeholder='时间段2："14:00 - 21:00" 下午2点到晚上9点营业'
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="水龙头自动关闭延时" prop="tapOnDelay" class="w100">
          <el-input-number
              v-model="state.ruleForm.tapOnDelay"
              placeholder="水龙头自动关闭延时，30表示打开水龙头后30秒自动关闭水龙头，0表示不允许自动关闭水龙头"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>

        <el-form-item label="视频播放延时(单位秒)" prop="videoPlayDelay" class="w100">
          <el-input-number
              v-model="state.ruleForm.videoPlayDelay"
              placeholder="视频播放延时(单位秒)，设备空闲多久开始循环播放⼴告视频"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="视频源" prop="videoSource" class="w100">
          <el-input
              v-model="state.ruleForm.videoSource"
              placeholder="视频源(0:内置视频，1:TF卡内的视频，2:U盘内的视频)"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="工作指示灯(室内照明)关闭延时" prop="workLightDelay" class="w100">
          <el-input-number
              v-model="state.ruleForm.workLightDelay"
              placeholder="工作指示灯(室内照明)关闭延时，30表示洗车结束关机后延时30秒关闭工作指示灯，0表示立刻关闭指示灯"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <div class="sub-group-bottom">声音参数</div>
        <el-form-item label="提示音音量（0-100）" prop="soundVolume" class="wd300">
          <el-input-number
              :min="0"
              :max="100"
              v-model="state.ruleForm.soundVolume"
              placeholder="提示音音量（0-100）"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <div class="sub-group-bottom">价格参数</div>

        <el-form-item label="吹气单价(元/分钟)" prop="priceBlow" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceBlow"
              placeholder="吹气单价(元/分钟)"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="吸尘单价（元/分钟）" prop="priceCleaner" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceCleaner"
              placeholder="吸尘单价（元/分钟）"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="镀膜单价(元/分钟)" prop="priceCoat" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceCoat"
              placeholder="镀膜单价(元/分钟)"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="泡沫单价（元/分钟）" prop="priceFoam" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceFoam"
              placeholder="泡沫单价（元/分钟）"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="场地费单价（元/分钟）" prop="priceSpace" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceSpace"
              placeholder="场地费单价（元/分钟）"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="洗手单价（元/分钟）" prop="priceTap" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceTap"
              placeholder="洗手单价（元/分钟）"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="扩展项目单价（元/分钟）" prop="priceUserExt" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceUserExt"
              placeholder="扩展项目单价（元/分钟）"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="清水单价（元/分钟）" prop="priceWater" class="wd300">
          <el-input-number
              v-model="state.ruleForm.priceWater"
              placeholder="清水单价（元/分钟）"
              :min="0" :precision="2" :step="0.1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>
        <el-form-item label="快速开机金额(元)" prop="quickOpenMoney" class="w100">
          <el-input-number
              v-model="state.ruleForm.quickOpenMoney"
              placeholder="快速开机金额(元)，按机箱内部的维护按键直接开机(设置为0可以关闭这个功能)"
              :min="0" :precision="2" :step="1"
              clearable
              class="w100">
          </el-input-number>
        </el-form-item>





      </el-form>

      <template #footer>
				<span 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>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

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


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

// 定义变量内容
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;
  if (action !== 'add') {
    loadData(row.id);
  } else {
    state.ruleForm = Object.assign(state.ruleForm, row);
  }
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
const moneyFields = ['priceBlow', 'priceCleaner', 'priceCoat', 'priceFoam', 'priceSpace', 'priceTap', 'priceUserExt', 'priceWater', 'quickOpenMoney'];

// 提交
const onSubmit = () => {
  formRef.value.validate((v: boolean) => {
    if (v) {
      state.btnLoading = true;
      const ruleForm = { ...state.ruleForm };
      moneyFields.forEach(f => {
        if (ruleForm[f] != null && ruleForm[f] !== '') ruleForm[f] = Math.round(Number(ruleForm[f]) * 100);
      });
      const url = !!state.ruleForm.id ? "device-config/modify" : "device-config/add"
      $body(url, 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 = (shortId: string) => {
  $post(`device-config/${shortId}`).then((res: any) => {
    moneyFields.forEach(f => {
      if (res[f] != null) res[f] = (res[f] / 100).toFixed(2);
    });
    state.ruleForm = res;
  })
}

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


</script>