yangjun
/
hldy_yunwei_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设备同步中 日志 详情样式优化

This commit is contained in:
1378012178@qq.com 2025-11-05 16:30:00 +08:00
parent fd6ffe94e3
commit 0cad5cc74b
2 changed files with 225 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/deviceSync/IotDeviceContent/components/IotDeviceContentForm.vue
View File

@ -2,26 +2,29 @@
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled"> <JFormContainer :disabled="disabled">
<template #detail> <template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="IotDeviceContentForm"> <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
<a-row> name="IotDeviceContentForm">
<a-row class="card-class">
<a-col :span="24" hidden> <a-col :span="24" hidden>
<a-form-item label="机构编码" v-bind="validateInfos.orgCode" id="IotDeviceContentForm-orgCode" name="orgCode"> <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-input v-model:value="formData.orgCode" placeholder="请输入机构编码" allow-clear></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="备注信息" v-bind="validateInfos.content" id="IotDeviceContentForm-content" name="content"> <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-textarea v-model:value="formData.content" :rows="4" placeholder="请输入备注信息" maxlength="100"
:showCount="true" allow-clear></a-textarea>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24" hidden> <a-col :span="24" hidden>
<a-form-item label="附件信息" v-bind="validateInfos.filePath" id="IotDeviceContentForm-filePath" name="filePath"> <a-form-item label="附件信息" v-bind="validateInfos.filePath" id="IotDeviceContentForm-filePath"
<a-input v-model:value="formData.filePath" placeholder="请输入附件信息" allow-clear ></a-input> name="filePath">
<a-input v-model:value="formData.filePath" placeholder="请输入附件信息" allow-clear></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24" hidden> <a-col :span="24" hidden>
<a-form-item label="NUID" v-bind="validateInfos.nuId" id="IotDeviceContentForm-nuId" name="nuId"> <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-input v-model:value="formData.nuId" placeholder="请输入NUID" allow-clear></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@ -32,79 +35,79 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue'; import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils'; import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../IotDeviceContent.api'; import { saveOrUpdate } from '../IotDeviceContent.api';
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue'; import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
const props = defineProps({ const props = defineProps({
formDisabled: { type: Boolean, default: false }, formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({})}, formData: { type: Object, default: () => ({}) },
formBpm: { type: Boolean, default: true } formBpm: { type: Boolean, default: true }
}); });
const formRef = ref(); const formRef = ref();
const useForm = Form.useForm; const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']); const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({ const formData = reactive<Record<string, any>>({
id: '', id: '',
orgCode: '', orgCode: '',
content: '', content: '',
filePath: '', filePath: '',
nuId: '', nuId: '',
}); });
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false); const confirmLoading = ref<boolean>(false);
//表单验证 //表单验证
const validatorRules = reactive({ const validatorRules = reactive({
content: [{ required: true, message: '请输入内容', trigger: 'blur' }], content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
}); });
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false }); const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
// 表单禁用 // 表单禁用
const disabled = computed(()=>{ const disabled = computed(() => {
if(props.formBpm === true){ if (props.formBpm === true) {
if(props.formData.disabled === false){ if (props.formData.disabled === false) {
return false; return false;
}else{ } else {
return true; return true;
} }
} }
return props.formDisabled; return props.formDisabled;
}); });
/** /**
* 新增 * 新增
*/ */
function add(record) { function add(record) {
edit(record); edit(record);
} }
/** /**
* 编辑 * 编辑
*/ */
function edit(record) { function edit(record) {
nextTick(() => { nextTick(() => {
resetFields(); resetFields();
const tmpData = {}; const tmpData = {};
Object.keys(formData).forEach((key) => { Object.keys(formData).forEach((key) => {
if(record.hasOwnProperty(key)){ if (record.hasOwnProperty(key)) {
tmpData[key] = record[key] tmpData[key] = record[key]
} }
}) })
//赋值 //赋值
Object.assign(formData, tmpData); Object.assign(formData, tmpData);
}); });
} }
/** /**
* 提交数据 * 提交数据
*/ */
async function submitForm() { async function submitForm() {
try { try {
// 触发表单验证 // 触发表单验证
await validate(); await validate();
@ -147,18 +150,31 @@
.finally(() => { .finally(() => {
confirmLoading.value = false; confirmLoading.value = false;
}); });
} }
defineExpose({ defineExpose({
add, add,
edit, edit,
submitForm, submitForm,
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.antd-modal-form { .antd-modal-form {
padding: 14px; // 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> </style>

63
src/views/deviceSync/IotDeviceContent/components/IotDeviceContentModal.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true" <a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
:footer-style="{ textAlign: 'right' }" @close="handleCancel"> :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
<IotDeviceContentForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></IotDeviceContentForm> <IotDeviceContentForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
</IotDeviceContentForm>
<template #footer> <template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button> <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button> <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
@ -11,73 +12,73 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue'; import { ref, nextTick, defineExpose } from 'vue';
import IotDeviceContentForm from './IotDeviceContentForm.vue' import IotDeviceContentForm from './IotDeviceContentForm.vue'
import JModal from '/@/components/Modal/src/JModal/JModal.vue'; import JModal from '/@/components/Modal/src/JModal/JModal.vue';
const title = ref<string>(''); const title = ref<string>('');
const width = ref<number>(800); const width = ref<number>(800);
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false); const disableSubmit = ref<boolean>(false);
const registerForm = ref(); const registerForm = ref();
const emit = defineEmits(['register', 'success']); const emit = defineEmits(['register', 'success']);
/** /**
* 新增 * 新增
*/ */
function add(record) { function add(record) {
title.value = '新增'; title.value = '新增';
visible.value = true; visible.value = true;
nextTick(() => { nextTick(() => {
registerForm.value.add(record); registerForm.value.add(record);
}); });
} }
/** /**
* 编辑 * 编辑
* @param record * @param record
*/ */
function edit(record) { function edit(record) {
title.value = disableSubmit.value ? '详情' : '编辑'; title.value = disableSubmit.value ? '详情' : '编辑';
visible.value = true; visible.value = true;
nextTick(() => { nextTick(() => {
registerForm.value.edit(record); registerForm.value.edit(record);
}); });
} }
/** /**
* 确定按钮点击事件 * 确定按钮点击事件
*/ */
function handleOk() { function handleOk() {
registerForm.value.submitForm(); registerForm.value.submitForm();
} }
/** /**
* form保存回调事件 * form保存回调事件
*/ */
function submitCallback() { function submitCallback() {
handleCancel(); handleCancel();
emit('success'); emit('success');
} }
/** /**
* 取消按钮回调事件 * 取消按钮回调事件
*/ */
function handleCancel() { function handleCancel() {
visible.value = false; visible.value = false;
} }
defineExpose({ defineExpose({
add, add,
edit, edit,
disableSubmit, disableSubmit,
}); });
</script> </script>
<style lang="less"> <style lang="less">
/**隐藏样式-modal确定按钮 */ /**隐藏样式-modal确定按钮 */
.jee-hidden { .jee-hidden {
display: none !important; display: none !important;
} }
</style> </style>
<style lang="less" scoped></style> <style lang="less" scoped></style>