feat: form pro 应用（antd sb）

src/components/FormPro/index.vue

@@ -15,19 +15,20 @@
       <input-tsx v-if="item.type === 'input'"  v-model="modelRef[item.key]" />
       <select-tsx  v-else-if="item.type === 'select'"  :list="item.request!()" :value="modelRef[item.key]" :on-change="(e) => onChange(e, item.key)"  />
     </a-form-item>
-    <a-form-item>
+    <!-- <a-form-item>
       <slot name="reset" > <a-button @click="resetForm">重置</a-button></slot>
     </a-form-item>
     <a-form-item>
       <slot name="search" > <a-button type="primary">搜索</a-button></slot>
-    </a-form-item>
+    </a-form-item> -->
   </a-form>
+
 </template>
 
 <script lang='ts' setup >
-import { onMounted, reactive, toRaw, computed, ref } from 'vue'
+import { onMounted, reactive, toRaw } from 'vue'
 import { Form } from 'ant-design-vue'
-import { InputTsx } from './components/indext'
+import { InputTsx, SelectTsx } from './components/indext'
 
 /**
  * 将submit的提交抛出去
@@ -45,12 +46,23 @@ export interface FormItemProps {
   }[]
 }
 
+/**
+* 直接将table的columns传入时进行数据转化处理
+ */
+export interface ColumnsProps {
+  title: string,
+  dataIndex: string,
+  key?: string,
+  formProps?: FormItemProps
+}
+
 export interface FormProProps {
   reset: boolean // 是否开启一键reset表单
   search: boolean // 是否开启搜索功能
   validate: boolean // 是否开启验证功能
   layout: 'horizontal' | 'vertical' | 'inline', // 布局方式 默认横向布局
-  formProps: FormItemProps[] // 表单props
+  formProps?: FormItemProps[] // 表单props
+  columnsProps?: ColumnsProps[] // 与table表格一起传入的时候, 便于从table表格中筛选
   [key: string]: any
 }
 
@@ -59,50 +71,64 @@ enum ComponentTypeEnum {
   'select' = 'select'
 }
 
+const componentTypes: COMMON.COMPONENTS.ComType[] = ['input', 'select', 'datepick']
+
+const getLablePrefix = (key: COMMON.COMPONENTS.ComType) => {
+  switch (key) {
+    case 'input':
+      return '请填写'
+    case 'select':
+      return '请选择'
+    default:
+      return '请填写'
+  }
+}
+
 const useForm = Form.useForm
 
 const emit = defineEmits(['submit', 'reset', 'search'])
 
-const a = ref('')
-
-// const props = defineProps<FormProProps>()
-const props: FormProProps = {
-  layout: 'horizontal',
-  search: true,
-  reset: true,
-  formProps: [{
-    rules: {
-      required: true,
-      message: '此项为必填项'
-    },
-    type: 'input',
-    key: 'modelLabel',
-    label: '测试title'
-  }]
+const props = defineProps<FormProProps>()
+
+const initFormPro = () => {
+  console.log('form pro props:', props)
+
+  if (props.formProps) {
+    props.formProps.forEach((item: FormItemProps) => {
+      const key = item.key
+      rulesRef[key] = typeof item.rules === 'object' ? item.rules : [{ required: item.rules, message: getLablePrefix(item.type) + item.label }]
+      modelRef[key] = item.value || ''
+      formProps.push({ ...item })
+    })
+  } else {
+    props.columnsProps.forEach((item: ColumnsProps) => {
+      if (item.formProps) {
+        const key = item.formProps!.key ? item.formProps!.key : item.dataIndex
+        const rules = typeof item.formProps!.rules === 'object'
+          ? item.formProps!.rules
+          : [{ required: item.formProps!.rules, message: getLablePrefix(item.formProps.type) + item.title }]
+
+        rulesRef[key!] = rules
+        modelRef[item.formProps.key] = item.formProps.value || ''
+        formProps.push({ ...item.formProps })
+      }
+    })
+  }
+
+  console.log('formProps:', formProps)
 }
 
 const modelRef = reactive<Record<string, any>>({})
 
 const rulesRef = reactive<Record<string, any>>({})
 
-const formProps = reactive<FormItemProps[]>(props.formProps)
-
-const resetForm = () => {
-  resetFields([])
-}
+const formProps = reactive<FormItemProps[]>([])
 
 const onChange = (record: any, key: string) => {
   console.log('form pro item change:', record)
   modelRef[key] = record
 }
 
-props.formProps.forEach(item => {
-  rulesRef[item.key] = [item.rules]
-  modelRef[item.key] = item.value || ''
-
-  console.log(modelRef)
-})
-
 const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
   onValidate: (...args) => console.log(...args)
 })
@@ -122,9 +148,11 @@ defineExpose({
   onSubmit
 })
 
-const reset = () => {
-  // resetFields
-}
+onMounted(() => {
+  console.log('FormPro onMounted-----')
+
+  initFormPro()
+})
 
 </script>
 

src/components/ModalPro/index.vue

@@ -31,8 +31,8 @@ import { ref, watch, watchEffect, computed, CSSProperties, reactive, onMounted }
 
 export interface ModalProPorps extends ModalProps {
   label: string,
-  okRequest: () =>void,
-  openConfirmLoading: boolean,
+  okRequest?: () =>void,
+  openConfirmLoading?: boolean,
   cancel?: () => void
 }
 

src/pages/Iot/device/components/msgTrack.vue

@@ -38,7 +38,7 @@
 
     </a-table>
   </a-card>
-</template>
+</template>``
 
 <script lang="ts" setup >
 import { AlertTsx } from '@/components/MicroComponents/index'

src/pages/Iot/device/components/subDevice.vue

@@ -0,0 +1,127 @@
+<template>
+  <a-card>
+      <div class="subtitle" >
+        呈现通过网关方式接入到IoT的设备（传感器）。子设备的状态表示子设备接入网关的状态，由网关上报到IoT平台进行状态的刷新；如果网关不能正常上报子设备的状态信息到IoT平台，则展示的子设备状态不会刷新。
+      </div>
+      <a-row justify="space-between" style="margin: 20px 0;" >
+        <a-col></a-col>
+        <a-col>
+          <a-button type="primary" @click="state.visible = true">添加子设备</a-button>
+        </a-col>
+      </a-row>
+  </a-card>
+
+  <modal-pro
+    label="添加子设备"
+    style="width: 700px;"
+    :visible="state.visible"
+    @close="state.visible = false"
+    @ok="ok"
+  >
+      <form-proo
+        ref="formPro"
+        validate
+        :columnsProps="colums"
+      />
+  </modal-pro>
+</template>
+<script lang='ts' setup >
+import { DeviceContriller } from '@/controller'
+import { onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { Form } from 'ant-design-vue'
+import type { ColumnsProps } from '@/components/FormPro/index.vue'
+
+const useForm = Form.useForm
+
+const route = useRoute()
+
+const formPro = ref('')
+
+const deviceId = route.query.id as string
+
+const colums: ColumnsProps[] = [
+  {
+    title: '状态',
+    dataIndex: 'deviceStatus'
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'deviceLabel'
+  },
+  {
+    title: '设备标识码',
+    dataIndex: 'deviceLabel',
+    formProps: {
+      rules: true,
+      type: 'input',
+      value: null,
+      label: '设备标识码',
+      key: 'deviceLabel'
+    }
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'deviceLabel'
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'deviceLabel'
+  }
+]
+
+const state = reactive({
+  loading: false,
+  visible: false,
+  dataSource: [],
+  queryParams: {
+    page: 1,
+    pageSize: 10,
+    total: 0,
+    deviceStatus: '',
+    searchValue: ''
+  }
+})
+
+const subDeviceState = reactive({
+  gatewayId: '',
+  deviceLabel: '',
+  modelId: '',
+  deviceCode: ''
+})
+
+const { resetFields, validate, validateInfos } = useForm(subDeviceState, reactive({
+  gatewayId: [{ required: true, message: '请选择网关' }],
+  deviceCode: [{ required: true, message: '请填写设备标识码' }],
+  modelId: [{ required: true, message: '请选择所属产品' }]
+}))
+
+const ok = () => {
+  formPro.value.onSubmit()
+  // validate().then(async () => {
+  //   await DeviceContriller.postSub(subDeviceState)
+  //   getSubDevicePage()
+  // })
+}
+
+const getSubDevicePage = async () => {
+  state.loading = true
+  const { data, sum } = await DeviceContriller.pageSub(deviceId, state.queryParams)
+  state.loading = false
+  state.dataSource = data
+  state.queryParams.total = sum
+}
+
+onMounted(() => {
+  getSubDevicePage()
+})
+
+</script>
+
+<style lang='less' scoped >
+@import '~@/styles/theme.less';
+.subtitle {
+  color: @sublabel-color;
+  font-size: 14px;
+}
+</style>

src/pages/Iot/device/detail.vue

@@ -11,6 +11,7 @@
     <CloudView   v-else-if="state.tabsActive === '2'"/>
     <DeviceShadow v-else-if="state.tabsActive === '3'" />
     <MsgTrack v-else-if="state.tabsActive === '4'" />
+    <SubDevice v-else-if="state.tabsActive === '5'" />
   </a-card>
 </template>
 
@@ -20,6 +21,8 @@ import OverView from './components/overview.vue'
 import CloudView from './components/cloudview.vue'
 import DeviceShadow from './components/deviceShadow.vue'
 import MsgTrack from './components/msgTrack.vue'
+import SubDevice from './components/subDevice.vue'
+
 const tabs = [
   {
     name: '概述',
@@ -48,7 +51,7 @@ const tabs = [
 ]
 
 const state = reactive({
-  tabsActive: '4'
+  tabsActive: '5'
 })
 
 const domainCom = () => {

src/utils/UsePro.ts

@@ -10,7 +10,7 @@ export default function (app: App) {
   app.component('modal-pro', ModalPro)
   app.component('sider-pro', SiderPro)
   app.component('table-pro', TablePro)
-  app.component('form-pro', FormPro)
+  app.component('form-proo', FormPro) // 别问问什么是oo， 问就是这样比较帅
   app.component('l-row', RowPro)
   app.component('l-col', ColPro)
 }