From 0cad5cc74b6193b2bae79f894e5e1067f1c70883 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Wed, 5 Nov 2025 16:30:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=90=8C=E6=AD=A5=E4=B8=AD?=
 =?UTF-8?q?=20=E6=97=A5=E5=BF=97=20=E8=AF=A6=E6=83=85=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/IotDeviceContentForm.vue       | 298 +++++++++---------
 .../components/IotDeviceContentModal.vue      | 135 ++++----
 2 files changed, 225 insertions(+), 208 deletions(-)

diff --git a/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentForm.vue b/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentForm.vue
index c08e78e..821c206 100644
--- a/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentForm.vue
+++ b/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentForm.vue
@@ -2,28 +2,31 @@
   <a-spin :spinning="confirmLoading">
     <JFormContainer :disabled="disabled">
       <template #detail>
-        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="IotDeviceContentForm">
-          <a-row>
-						<a-col :span="24" hidden>
-							<a-form-item label="机构编码" v-bind="validateInfos.orgCode" id="IotDeviceContentForm-orgCode" name="orgCode">
-								<a-input v-model:value="formData.orgCode" placeholder="请输入机构编码"  allow-clear ></a-input>
-							</a-form-item>
-						</a-col>
-						<a-col :span="24">
-							<a-form-item label="备注信息" v-bind="validateInfos.content" id="IotDeviceContentForm-content" name="content">
-                <a-textarea v-model:value="formData.content"  :rows="4" placeholder="请输入备注信息" maxlength="100" :showCount="true" allow-clear ></a-textarea>
-							</a-form-item>
-						</a-col>
-						<a-col :span="24" hidden>
-							<a-form-item label="附件信息" v-bind="validateInfos.filePath" id="IotDeviceContentForm-filePath" name="filePath">
-								<a-input v-model:value="formData.filePath" placeholder="请输入附件信息"  allow-clear ></a-input>
-							</a-form-item>
-						</a-col>
-						<a-col :span="24" hidden>
-							<a-form-item label="NUID" v-bind="validateInfos.nuId" id="IotDeviceContentForm-nuId" name="nuId">
-								<a-input v-model:value="formData.nuId" placeholder="请输入NUID"  allow-clear ></a-input>
-							</a-form-item>
-						</a-col>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
+          name="IotDeviceContentForm">
+          <a-row class="card-class">
+            <a-col :span="24" hidden>
+              <a-form-item label="机构编码" v-bind="validateInfos.orgCode" id="IotDeviceContentForm-orgCode" name="orgCode">
+                <a-input v-model:value="formData.orgCode" placeholder="请输入机构编码" allow-clear></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="备注信息" v-bind="validateInfos.content" id="IotDeviceContentForm-content" name="content">
+                <a-textarea v-model:value="formData.content" :rows="4" placeholder="请输入备注信息" maxlength="100"
+                  :showCount="true" allow-clear></a-textarea>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24" hidden>
+              <a-form-item label="附件信息" v-bind="validateInfos.filePath" id="IotDeviceContentForm-filePath"
+                name="filePath">
+                <a-input v-model:value="formData.filePath" placeholder="请输入附件信息" allow-clear></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24" hidden>
+              <a-form-item label="NUID" v-bind="validateInfos.nuId" id="IotDeviceContentForm-nuId" name="nuId">
+                <a-input v-model:value="formData.nuId" placeholder="请输入NUID" allow-clear></a-input>
+              </a-form-item>
+            </a-col>
           </a-row>
         </a-form>
       </template>
@@ -32,133 +35,146 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { getValueType } from '/@/utils';
-  import { saveOrUpdate } from '../IotDeviceContent.api';
-  import { Form } from 'ant-design-vue';
-  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
-  const props = defineProps({
-    formDisabled: { type: Boolean, default: false },
-    formData: { type: Object, default: () => ({})},
-    formBpm: { type: Boolean, default: true }
-  });
-  const formRef = ref();
-  const useForm = Form.useForm;
-  const emit = defineEmits(['register', 'ok']);
-  const formData = reactive<Record<string, any>>({
-    id: '',
-    orgCode: '',   
-    content: '',   
-    filePath: '',   
-    nuId: '',   
-  });
-  const { createMessage } = useMessage();
-  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
-  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
-  const confirmLoading = ref<boolean>(false);
-  //表单验证
-  const validatorRules = reactive({
-    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
-  });
-  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getValueType } from '/@/utils';
+import { saveOrUpdate } from '../IotDeviceContent.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => ({}) },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  orgCode: '',
+  content: '',
+  filePath: '',
+  nuId: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = reactive({
+  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
+});
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
 
-  // 表单禁用
-  const disabled = computed(()=>{
-    if(props.formBpm === true){
-      if(props.formData.disabled === false){
-        return false;
-      }else{
-        return true;
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add(record) {
+  edit(record);
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if (record.hasOwnProperty(key)) {
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
       }
     }
-    return props.formDisabled;
-  });
-
-  
-  /**
-   * 新增
-   */
-  function add(record) {
-    edit(record);
+    return Promise.reject(errorFields);
   }
-
-  /**
-   * 编辑
-   */
-  function edit(record) {
-    nextTick(() => {
-      resetFields();
-      const tmpData = {};
-      Object.keys(formData).forEach((key) => {
-        if(record.hasOwnProperty(key)){
-          tmpData[key] = record[key]
-        }
-      })
-      //赋值
-      Object.assign(formData, tmpData);
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  await saveOrUpdate(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
     });
-  }
-
-  /**
-   * 提交数据
-   */
-  async function submitForm() {
-    try {
-      // 触发表单验证
-      await validate();
-    } catch ({ errorFields }) {
-      if (errorFields) {
-        const firstField = errorFields[0];
-        if (firstField) {
-          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
-        }
-      }
-      return Promise.reject(errorFields);
-    }
-    confirmLoading.value = true;
-    const isUpdate = ref<boolean>(false);
-    //时间格式化
-    let model = formData;
-    if (model.id) {
-      isUpdate.value = true;
-    }
-    //循环数据
-    for (let data in model) {
-      //如果该数据是数组并且是字符串类型
-      if (model[data] instanceof Array) {
-        let valueType = getValueType(formRef.value.getProps, data);
-        //如果是字符串类型的需要变成以逗号分割的字符串
-        if (valueType === 'string') {
-          model[data] = model[data].join(',');
-        }
-      }
-    }
-    await saveOrUpdate(model, isUpdate.value)
-      .then((res) => {
-        if (res.success) {
-          createMessage.success(res.message);
-          emit('ok');
-        } else {
-          createMessage.warning(res.message);
-        }
-      })
-      .finally(() => {
-        confirmLoading.value = false;
-      });
-  }
+}
 
 
-  defineExpose({
-    add,
-    edit,
-    submitForm,
-  });
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
 </script>
 
 <style lang="less" scoped>
-  .antd-modal-form {
-    padding: 14px;
-  }
+.antd-modal-form {
+  // padding: 14px;
+}
+
+.card-class {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 14px;
+  padding-right: 14px;
+  // background-color: rgba(255, 255, 255, 0.9);
+  background-color: #fcfdff;
+  border-radius: 10px;
+  // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
+  margin-bottom: 14px;
+
+}
 </style>
diff --git a/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentModal.vue b/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentModal.vue
index c962ffa..a018232 100644
--- a/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentModal.vue
+++ b/src/views/deviceSync/IotDeviceContent/components/IotDeviceContentModal.vue
@@ -1,9 +1,10 @@
 <template>
-  
-  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
-    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
-    <IotDeviceContentForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></IotDeviceContentForm>
-  <template #footer>
+
+  <a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
+    <IotDeviceContentForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
+    </IotDeviceContentForm>
+    <template #footer>
       <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
       <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
     </template>
@@ -11,73 +12,73 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, nextTick, defineExpose } from 'vue';
-  import IotDeviceContentForm from './IotDeviceContentForm.vue'
-  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
-  
-  const title = ref<string>('');
-  const width = ref<number>(800);
-  const visible = ref<boolean>(false);
-  const disableSubmit = ref<boolean>(false);
-  const registerForm = ref();
-  const emit = defineEmits(['register', 'success']);
+import { ref, nextTick, defineExpose } from 'vue';
+import IotDeviceContentForm from './IotDeviceContentForm.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
 
-  /**
-   * 新增
-   */
-  function add(record) {
-    title.value = '新增';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.add(record);
-    });
-  }
-  
-  /**
-   * 编辑
-   * @param record
-   */
-  function edit(record) {
-    title.value = disableSubmit.value ? '详情' : '编辑';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.edit(record);
-    });
-  }
-  
-  /**
-   * 确定按钮点击事件
-   */
-  function handleOk() {
-    registerForm.value.submitForm();
-  }
+const title = ref<string>('');
+const width = ref<number>(800);
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const registerForm = ref();
+const emit = defineEmits(['register', 'success']);
 
-  /**
-   * form保存回调事件
-   */
-  function submitCallback() {
-    handleCancel();
-    emit('success');
-  }
-
-  /**
-   * 取消按钮回调事件
-   */
-  function handleCancel() {
-    visible.value = false;
-  }
-
-  defineExpose({
-    add,
-    edit,
-    disableSubmit,
+/**
+ * 新增
+ */
+function add(record) {
+  title.value = '新增';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.add(record);
   });
+}
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.edit(record);
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  registerForm.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  add,
+  edit,
+  disableSubmit,
+});
 </script>
 
 <style lang="less">
-  /**隐藏样式-modal确定按钮 */
-  .jee-hidden {
-    display: none !important;
-  }
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
 </style>
 <style lang="less" scoped></style>