变频器台账信息

frontend/src/views/machine/freqConverter/components/freqConverterPopup.vue

@@ -0,0 +1,192 @@
+<template>
+  <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" align-center>
+    <div>
+      <el-form :model="formContent" ref='dialogFormRef' :rules='baseRules' class="form-two">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model='formContent.name' placeholder="请输入变频器名称" maxlength="32" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="串口名称" prop="portName">
+          <el-input v-model='formContent.portName' placeholder="请输入串口名称" maxlength="32" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="从机地址" prop="slaveAddress">
+          <el-input v-model='formContent.slaveAddress' placeholder="请输入从机地址" maxlength="32" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="波特率" prop="baudRate">
+          <el-select v-model="formContent.baudRate" clearable placeholder="请选择波特率">
+            <el-option
+                v-for="item in baudRateList"
+                :key="item"
+                :label="item"
+                :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="奇偶校验类型" prop="parity">
+          <el-select v-model="formContent.parity" clearable placeholder="请选择奇偶校验类型">
+            <el-option key="None" label="None" :value="'None'"/>
+            <el-option key="Even" label="Even" :value="'Even'"/>
+            <el-option key="Odd" label="Odd" :value="'Odd'"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="数据位" prop="dataBits">
+          <el-select v-model="formContent.dataBits" clearable placeholder="请选择数据位">
+            <el-option key="4" label="4" :value="4"/>
+            <el-option key="5" label="5" :value="5"/>
+            <el-option key="6" label="6" :value="6"/>
+            <el-option key="7" label="7" :value="7"/>
+            <el-option key="8" label="8" :value="8"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="停止位" prop="stopBits">
+          <el-select v-model="formContent.stopBits" clearable placeholder="请选择停止位">
+            <el-option key="1" label="1" :value="1"/>
+            <el-option key="2" label="2" :value="2"/>
+          </el-select>
+        </el-form-item>
+
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="save()">
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+</template>
+
+<script lang="ts" setup>
+import {ElMessage, type FormItemRule} from 'element-plus'
+import {computed, ref} from 'vue'
+import {type FreqConverter} from '@/api/device/interface/freqConverter'
+import {dialogMiddle} from '@/utils/elementBind'
+import {addFreqConverter, updateFreqConverter} from '@/api/device/freqConverter/index.ts'
+
+// 定义弹出组件元信息
+const dialogFormRef = ref()
+
+function useMetaInfo() {
+  const dialogVisible = ref(false)
+  const titleType = ref('add')
+  const formContent = ref<FreqConverter.ResFreqConverter>({
+    id: '',
+    name: '',   //名称
+    portName: '',//串口名称
+    slaveAddress: 1, //从机地址
+    baudRate: 9600, //波特率
+    parity: 'None', //奇偶校验类型
+    dataBits: 8, //数据位
+    stopBits: 1, //停止位
+    timeoutMs: 500, //超时时间（毫秒）
+  })
+  const baudRateList = [75, 110, 134, 150, 300, 600, 1200, 1800, 2400, 4800, 7200, 9600, 14400, 19200, 38400, 57600, 115200, 128000]
+  return {dialogVisible, titleType, formContent, baudRateList}
+}
+
+const {dialogVisible, titleType, formContent, baudRateList} = useMetaInfo()
+
+
+// 清空formContent
+const resetFormContent = () => {
+  formContent.value = {
+    id: '',
+    name: '',   //名称
+    portName: '',//串口名称
+    slaveAddress: 1, //从机地址
+    baudRate: 9600, //波特率
+    parity: 'None', //奇偶校验类型
+    dataBits: 8, //数据位
+    stopBits: 1, //停止位
+    timeoutMs: 500, //超时时间（毫秒）
+  }
+}
+
+let dialogTitle = computed(() => {
+  return titleType.value === 'add' ? '新增变频器' : '编辑变频器'
+})
+
+
+//定义校验规则
+const baseRules: Record<string, Array<FormItemRule>> = {
+  name: [{required: true, message: '名称必填！', trigger: 'blur'}],
+  portName: [
+    {required: true, message: '串口名称必填！', trigger: 'blur'}
+  ],
+  slaveAddress: [
+    {required: true, message: '从机地址必填！', trigger: 'blur'}
+  ],
+  baudRate: [
+    {required: true, message: '波特率必填！', trigger: 'blur'}
+  ],
+  parity: [
+    {required: true, message: '奇偶校验类型必选！', trigger: 'change'}
+  ],
+  dataBits: [
+    {required: true, message: '数据位必填！', trigger: 'blur'}
+  ],
+  stopBits: [
+    {required: true, message: '停止位必填！', trigger: 'blur'}
+  ],
+  timeoutMs: [
+    {required: true, message: '超时时间必填！', trigger: 'blur'}
+  ]
+};
+
+
+// 关闭弹窗
+const close = () => {
+  dialogVisible.value = false
+  // 清空dialogForm中的值
+  resetFormContent()
+  // 重置表单
+  dialogFormRef.value?.resetFields()
+}
+
+// 保存数据
+const save = () => {
+  try {
+    dialogFormRef.value?.validate(async (valid: boolean) => {
+      if (valid) {
+        if (formContent.value.id) {
+          debugger;;
+          await updateFreqConverter(formContent.value);
+        } else {
+          await addFreqConverter(formContent.value);
+        }
+        ElMessage.success({message: `${dialogTitle.value}成功！`})
+        close()
+        // 刷新表格
+        await props.refreshTable!()
+      }
+    })
+  } catch (err) {
+    //error('验证过程中出现错误', err)
+  }
+}
+
+// 打开弹窗，可能是新增，也可能是编辑
+const open = async (sign: string, data: FreqConverter.ResFreqConverter) => {
+  // 重置表单
+  dialogFormRef.value?.resetFields()
+  titleType.value = sign
+  dialogVisible.value = true
+
+  if (data.id) {
+    formContent.value = {...data}
+  } else {
+    resetFormContent()
+  }
+}
+
+// 对外映射
+defineExpose({open})
+const props = defineProps<{
+  refreshTable: (() => Promise<void>) | undefined;
+}>()
+
+</script>