feat: 光源配置弹框

src/renderer/src/views/Design/FlowImagesCapture/lightNodeModel.vue

@@ -6,11 +6,30 @@
     class="settings-dialog ds-dialog"
     title="光源"
   >
-    <div>1111</div>
+    <template #default>
+      <div class="lightNodeModel-form-container">
+        <t-module-form ref="lightForm" titleBold :formOpts="formOpts" :submit="submit">
+          <template #radioInputType>
+            <el-radio-group v-model="formOpts.inputType.opts.formData.inputType">
+              <el-radio value="1">输入</el-radio>
+              <el-radio value="2">订阅</el-radio>
+            </el-radio-group>
+          </template>
+          <template #footer>
+            <div class="ds-dialog-form-footer">
+              <t-button type="primary" size="default" :time="config.buttonTimeOut">
+                <span class="px-[8px]" @click="save"> 确定 </span>
+              </t-button>
+            </div>
+          </template>
+        </t-module-form>
+      </div>
+    </template>
   </DSDialog>
 </template>
 <script setup lang="tsx">
 import { DSDialog } from '@/components/Dialog'
+import { config } from '@/config'
 defineOptions({
   name: 'FlowLightNodeModel'
 })
@@ -40,4 +59,263 @@ const show = computed({
     emit('update:value', val)
   }
 })
+// 获取ref
+const lightForm: any = ref<HTMLElement | null>(null)
+// 获取最终form表单数据
+const submit = (form) => {
+  console.log('最终提交数据', form)
+}
+const save = () => {
+  lightForm.value.saveHandle()
+}
+// 主表单
+const formOpts: any = reactive({
+  inputConfig: {
+    name: 'inputConfig',
+    disabled: true, // 表单禁用收缩
+    ref: null,
+    widthSize: 2, // 表单每行占据数量 默认为3
+    opts: {
+      labelPosition: 'top', // 标签对齐方式
+      formData: {
+        inputSource: '' // *输入源
+      },
+      fieldList: [
+        /**基础参数-表单项**/
+        // 通用字段
+        {
+          labelRender: () => {
+            return (
+              <div>
+                <span>输入源</span>
+                <span className="ds-form-des-text">
+                  (请先在<span className="ds-form-normal-text">控制器管理</span>中配置
+                  <span className="ds-form-normal-text">光源</span>设备)
+                </span>
+              </div>
+            )
+          },
+          value: 'inputSource',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'inputSourceList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_inputSource')
+            }
+          },
+          bind: { clearable: false }
+        }
+      ]
+    }
+  },
+  channelParameter: {
+    title: '通用参数',
+    name: 'channelParameter',
+    disabled: true, // 表单禁用收缩
+    ref: null,
+    widthSize: 2, // 表单每行占据数量 默认为3
+    opts: {
+      labelPosition: 'top', // 标签对齐方式
+      formData: {
+        inputType: '', // 输出类型
+        triggerCharacter: '', // 触发字符
+        triggerTime: '' // 触发时间
+      },
+      fieldList: [
+        /**基础参数-表单项**/
+        // 通用字段
+        {
+          label: '输出类型',
+          value: 'inputType',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'inputTypeList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_inputType')
+            }
+          },
+          bind: { clearable: false }
+        },
+        {
+          label: '触发字符',
+          value: 'triggerCharacter',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'triggerCharacterList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_triggerCharacter')
+            }
+          },
+          bind: { clearable: false }
+        },
+        {
+          label: '触发时间',
+          value: 'triggerTime',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'triggerTimeList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_triggerTime')
+            }
+          },
+          bind: { clearable: false }
+        }
+      ]
+    }
+  },
+  inputType: {
+    title: '输入类型',
+    name: 'inputType',
+    disabled: true, // 表单禁用收缩
+    ref: null,
+    widthSize: 2, // 表单每行占据数量 默认为3
+    opts: {
+      labelPosition: 'top', // 标签对齐方式
+      formData: {
+        inputType: null, // 输入类型
+        channelEnable1: false,
+        channelEnableSelect1: '',
+        channelEnable2: false,
+        channelEnableSelect2: '',
+        channelEnable3: false,
+        channelEnableSelect3: '',
+        channelEnable4: false,
+        channelEnableSelect4: ''
+      },
+      fieldList: [
+        {
+          label: '输入类型',
+          value: 'inputType',
+          slotName: 'radioInputType'
+        },
+        {
+          value: 'channelEnable1',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '通道1使能'
+          }
+        },
+        {
+          label: '通道1使能',
+          value: 'channelEnableSelect1',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'channelEnableSelectList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_channelEnableSelect')
+            }
+          },
+          bind: { clearable: false }
+        },
+        {
+          value: 'channelEnable2',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '通道2使能'
+          }
+        },
+        {
+          label: '通道2使能',
+          value: 'channelEnableSelect2',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'channelEnableSelectList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_channelEnableSelect')
+            }
+          },
+          bind: { clearable: false }
+        },
+        {
+          value: 'channelEnable3',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '通道3使能'
+          }
+        },
+        {
+          label: '通道3使能',
+          value: 'channelEnableSelect2',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'channelEnableSelectList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_channelEnableSelect')
+            }
+          },
+          bind: { clearable: false }
+        },
+        {
+          value: 'channelEnable4',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '通道4使能'
+          }
+        },
+        {
+          label: '通道4使能',
+          value: 'channelEnableSelect2',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'channelEnableSelectList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_channelEnableSelect')
+            }
+          },
+          bind: { clearable: false }
+        }
+      ]
+    }
+  }
+})
 </script>
+<style scoped lang="scss">
+.lightNodeModel-form-container {
+  box-sizing: border-box;
+  padding: 16px 12px 24px 24px;
+  height: 800px;
+  :deep(.t_module_form .scroll_wrap) {
+    overflow: auto !important;
+  }
+}
+</style>