Fuyuu
1 year ago
13 changed files with 896 additions and 747 deletions
@ -1,99 +1,101 @@ |
|||||
import {BasicColumn} from '/@/components/Table'; |
/* |
||||
import {FormSchema} from '/@/components/Table'; |
* @Author: Fuyuu 1805498209@qq.com |
||||
import { rules} from '/@/utils/helper/validator'; |
* @Date: 2023-12-20 15:41:22 |
||||
|
* @LastEditors: Fuyuu 1805498209@qq.com |
||||
|
* @LastEditTime: 2023-12-28 16:29:13 |
||||
|
* @FilePath: \dt-admin-pc-v2\src\views\military\modules\equipmentManage\protocolType\DtDeviceDataProtocol.data.ts |
||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
|
*/ |
||||
|
import { BasicColumn } from '/@/components/Table'; |
||||
|
import { FormSchema } from '/@/components/Table'; |
||||
|
import { rules } from '/@/utils/helper/validator'; |
||||
import { render } from '/@/utils/common/renderUtils'; |
import { render } from '/@/utils/common/renderUtils'; |
||||
//列表数据
|
//列表数据
|
||||
export const columns: BasicColumn[] = [ |
export const columns: BasicColumn[] = [ |
||||
{ |
{ |
||||
title: '数据协议类型编号', |
title: '类型编号', |
||||
align:"center", |
align: 'center', |
||||
dataIndex: 'protocolType' |
dataIndex: 'protocolType', |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '协议名称', |
title: '协议名称', |
||||
align:"center", |
align: 'center', |
||||
dataIndex: 'protocolName' |
dataIndex: 'protocolName', |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '备注', |
title: '备注', |
||||
align:"center", |
align: 'center', |
||||
dataIndex: 'remark' |
dataIndex: 'remark', |
||||
}, |
}, |
||||
{ |
// {
|
||||
title: '所属区域', |
// title: '所属区域',
|
||||
align:"center", |
// align: 'center',
|
||||
dataIndex: 'sysAreaCode' |
// dataIndex: 'sysAreaCode',
|
||||
}, |
// },
|
||||
]; |
]; |
||||
//查询数据
|
//查询数据
|
||||
export const searchFormSchema: FormSchema[] = [ |
export const searchFormSchema: FormSchema[] = [ |
||||
{ |
{ |
||||
label: "数据协议类型编号", |
label: '类型编号', |
||||
field: 'protocolType', |
field: 'protocolType', |
||||
component: 'Input', |
component: 'Input', |
||||
colProps: {span: 6}, |
colProps: { span: 6 }, |
||||
}, |
}, |
||||
{ |
{ |
||||
label: "协议名称", |
label: '协议名称', |
||||
field: 'protocolName', |
field: 'protocolName', |
||||
component: 'Input', |
component: 'Input', |
||||
colProps: {span: 6}, |
colProps: { span: 6 }, |
||||
}, |
}, |
||||
{ |
// {
|
||||
label: "所属区域", |
// label: '所属区域',
|
||||
field: 'sysAreaCode', |
// field: 'sysAreaCode',
|
||||
component: 'Input', |
// component: 'Input',
|
||||
colProps: {span: 6}, |
// colProps: { span: 6 },
|
||||
}, |
// },
|
||||
]; |
]; |
||||
//表单数据
|
//表单数据
|
||||
export const formSchema: FormSchema[] = [ |
export const formSchema: FormSchema[] = [ |
||||
{ |
{ |
||||
label: '数据协议类型编号', |
label: '类型编号', |
||||
field: 'protocolType', |
field: 'protocolType', |
||||
component: 'Input', |
component: 'Input', |
||||
dynamicRules: ({model,schema}) => { |
dynamicRules: ({ model, schema }) => { |
||||
return [ |
return [{ required: true, message: '请输入类型编号!' }]; |
||||
{ required: true, message: '请输入数据协议类型编号!'}, |
}, |
||||
]; |
|
||||
}, |
|
||||
}, |
}, |
||||
{ |
{ |
||||
label: '协议名称', |
label: '协议名称', |
||||
field: 'protocolName', |
field: 'protocolName', |
||||
component: 'Input', |
component: 'Input', |
||||
dynamicRules: ({model,schema}) => { |
dynamicRules: ({ model, schema }) => { |
||||
return [ |
return [{ required: true, message: '请输入协议名称!' }]; |
||||
{ required: true, message: '请输入协议名称!'}, |
}, |
||||
]; |
|
||||
}, |
|
||||
}, |
}, |
||||
{ |
{ |
||||
label: '备注', |
label: '备注', |
||||
field: 'remark', |
field: 'remark', |
||||
component: 'Input', |
component: 'Input', |
||||
}, |
}, |
||||
|
// {
|
||||
|
// label: '所属区域',
|
||||
|
// field: 'sysAreaCode',
|
||||
|
// component: 'Input',
|
||||
|
// },
|
||||
|
// TODO 主键隐藏字段,目前写死为ID
|
||||
{ |
{ |
||||
label: '所属区域', |
label: '', |
||||
field: 'sysAreaCode', |
field: 'id', |
||||
component: 'Input', |
component: 'Input', |
||||
|
show: false, |
||||
}, |
}, |
||||
// TODO 主键隐藏字段,目前写死为ID
|
|
||||
{ |
|
||||
label: '', |
|
||||
field: 'id', |
|
||||
component: 'Input', |
|
||||
show: false |
|
||||
}, |
|
||||
]; |
]; |
||||
|
|
||||
|
|
||||
|
|
||||
/** |
/** |
||||
* 流程表单调用这个方法获取formSchema |
* 流程表单调用这个方法获取formSchema |
||||
* @param param |
* @param param |
||||
*/ |
*/ |
||||
export function getBpmFormSchema(_formData): FormSchema[]{ |
export function getBpmFormSchema(_formData): FormSchema[] { |
||||
// 默认和原始表单保持一致 如果流程中配置了权限数据,这里需要单独处理formSchema
|
// 默认和原始表单保持一致 如果流程中配置了权限数据,这里需要单独处理formSchema
|
||||
return formSchema; |
return formSchema; |
||||
} |
} |
||||
|
@ -1,70 +1,78 @@ |
|||||
|
<!-- |
||||
|
* @Author: Fuyuu 1805498209@qq.com |
||||
|
* @Date: 2023-12-20 15:41:22 |
||||
|
* @LastEditors: Fuyuu 1805498209@qq.com |
||||
|
* @LastEditTime: 2023-12-28 15:36:46 |
||||
|
* @FilePath: \dt-admin-pc-v2\src\views\military\modules\equipmentManage\protocolType\components\DtDeviceDataProtocolForm.vue |
||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
||||
|
--> |
||||
<template> |
<template> |
||||
<div style="min-height: 400px"> |
<div style="min-height: 400px"> |
||||
<BasicForm @register="registerForm"></BasicForm> |
<BasicForm @register="registerForm"></BasicForm> |
||||
<div style="width: 100%;text-align: center" v-if="!formDisabled"> |
<div style="width: 100%; text-align: center" v-if="!formDisabled"> |
||||
<a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button> |
<a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button> |
||||
</div> |
|
||||
</div> |
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts"> |
<script lang="ts"> |
||||
import {BasicForm, useForm} from '/@/components/Form/index'; |
import { BasicForm, useForm } from '/@/components/Form/index'; |
||||
import {computed, defineComponent} from 'vue'; |
import { computed, defineComponent } from 'vue'; |
||||
import {defHttp} from '/@/utils/http/axios'; |
import { defHttp } from '/@/utils/http/axios'; |
||||
import { propTypes } from '/@/utils/propTypes'; |
import { propTypes } from '/@/utils/propTypes'; |
||||
import {getBpmFormSchema} from '../DtDeviceDataProtocol.data'; |
import { getBpmFormSchema } from '../DtDeviceDataProtocol.data'; |
||||
import {saveOrUpdate} from '../DtDeviceDataProtocol.api'; |
import { saveOrUpdate } from '../DtDeviceDataProtocol.api'; |
||||
|
|
||||
export default defineComponent({ |
|
||||
name: "DtDeviceDataProtocolForm", |
|
||||
components:{ |
|
||||
BasicForm |
|
||||
}, |
|
||||
props:{ |
|
||||
formData: propTypes.object.def({}), |
|
||||
formBpm: propTypes.bool.def(true), |
|
||||
}, |
|
||||
setup(props){ |
|
||||
const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({ |
|
||||
labelWidth: 150, |
|
||||
schemas: getBpmFormSchema(props.formData), |
|
||||
showActionButtonGroup: false, |
|
||||
baseColProps: {span: 12} |
|
||||
}); |
|
||||
|
|
||||
const formDisabled = computed(()=>{ |
export default defineComponent({ |
||||
if(props.formData.disabled === false){ |
name: 'DtDeviceDataProtocolForm', |
||||
return false; |
components: { |
||||
} |
BasicForm, |
||||
return true; |
}, |
||||
}); |
props: { |
||||
|
formData: propTypes.object.def({}), |
||||
|
formBpm: propTypes.bool.def(true), |
||||
|
}, |
||||
|
setup(props) { |
||||
|
const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({ |
||||
|
labelWidth: 150, |
||||
|
schemas: getBpmFormSchema(props.formData), |
||||
|
showActionButtonGroup: false, |
||||
|
baseColProps: { span: 12 }, |
||||
|
}); |
||||
|
|
||||
let formData = {}; |
const formDisabled = computed(() => { |
||||
const queryByIdUrl = '/device/dtDeviceDataProtocol/queryById'; |
if (props.formData.disabled === false) { |
||||
async function initFormData(){ |
return false; |
||||
let params = {id: props.formData.dataId}; |
} |
||||
const data = await defHttp.get({url: queryByIdUrl, params}); |
return true; |
||||
formData = {...data} |
}); |
||||
//设置表单的值 |
|
||||
await setFieldsValue(formData); |
|
||||
//默认是禁用 |
|
||||
await setProps({disabled: formDisabled.value}) |
|
||||
} |
|
||||
|
|
||||
async function submitForm() { |
let formData = {}; |
||||
let data = getFieldsValue(); |
const queryByIdUrl = '/device/dtDeviceDataProtocol/queryById'; |
||||
let params = Object.assign({}, formData, data); |
async function initFormData() { |
||||
console.log('表单数据', params) |
let params = { id: props.formData.dataId }; |
||||
await saveOrUpdate(params, true) |
const data = await defHttp.get({ url: queryByIdUrl, params }); |
||||
} |
formData = { ...data }; |
||||
|
//设置表单的值 |
||||
|
await setFieldsValue(formData); |
||||
|
//默认是禁用 |
||||
|
await setProps({ disabled: formDisabled.value }); |
||||
|
} |
||||
|
|
||||
initFormData(); |
async function submitForm() { |
||||
|
let data = getFieldsValue(); |
||||
return { |
let params = Object.assign({}, formData, data); |
||||
registerForm, |
console.log('表单数据', params); |
||||
formDisabled, |
await saveOrUpdate(params, true); |
||||
submitForm, |
} |
||||
} |
|
||||
} |
initFormData(); |
||||
}); |
|
||||
</script> |
return { |
||||
|
registerForm, |
||||
|
formDisabled, |
||||
|
submitForm, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
@ -1,66 +1,74 @@ |
|||||
|
<!-- |
||||
|
* @Author: Fuyuu 1805498209@qq.com |
||||
|
* @Date: 2023-12-20 15:41:22 |
||||
|
* @LastEditors: Fuyuu 1805498209@qq.com |
||||
|
* @LastEditTime: 2023-12-28 15:36:53 |
||||
|
* @FilePath: \dt-admin-pc-v2\src\views\military\modules\equipmentManage\protocolType\components\DtDeviceDataProtocolModal.vue |
||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
||||
|
--> |
||||
<template> |
<template> |
||||
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="896" @ok="handleSubmit"> |
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="896" @ok="handleSubmit"> |
||||
<BasicForm @register="registerForm"/> |
<BasicForm @register="registerForm" /> |
||||
</BasicModal> |
</BasicModal> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import {ref, computed, unref} from 'vue'; |
import { ref, computed, unref } from 'vue'; |
||||
import {BasicModal, useModalInner} from '/@/components/Modal'; |
import { BasicModal, useModalInner } from '/@/components/Modal'; |
||||
import {BasicForm, useForm} from '/@/components/Form/index'; |
import { BasicForm, useForm } from '/@/components/Form/index'; |
||||
import {formSchema} from '../DtDeviceDataProtocol.data'; |
import { formSchema } from '../DtDeviceDataProtocol.data'; |
||||
import {saveOrUpdate} from '../DtDeviceDataProtocol.api'; |
import { saveOrUpdate } from '../DtDeviceDataProtocol.api'; |
||||
// Emits声明 |
// Emits声明 |
||||
const emit = defineEmits(['register','success']); |
const emit = defineEmits(['register', 'success']); |
||||
const isUpdate = ref(true); |
const isUpdate = ref(true); |
||||
//表单配置 |
//表单配置 |
||||
const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({ |
const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({ |
||||
//labelWidth: 150, |
//labelWidth: 150, |
||||
schemas: formSchema, |
schemas: formSchema, |
||||
showActionButtonGroup: false, |
showActionButtonGroup: false, |
||||
baseColProps: {span: 12} |
baseColProps: { span: 12 }, |
||||
}); |
}); |
||||
//表单赋值 |
//表单赋值 |
||||
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => { |
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
||||
//重置表单 |
//重置表单 |
||||
await resetFields(); |
await resetFields(); |
||||
setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter}); |
setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter }); |
||||
isUpdate.value = !!data?.isUpdate; |
isUpdate.value = !!data?.isUpdate; |
||||
if (unref(isUpdate)) { |
if (unref(isUpdate)) { |
||||
//表单赋值 |
//表单赋值 |
||||
await setFieldsValue({ |
await setFieldsValue({ |
||||
...data.record, |
...data.record, |
||||
}); |
}); |
||||
} |
|
||||
// 隐藏底部时禁用整个表单 |
|
||||
setProps({ disabled: !data?.showFooter }) |
|
||||
}); |
|
||||
//设置标题 |
|
||||
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑')); |
|
||||
//表单提交事件 |
|
||||
async function handleSubmit(v) { |
|
||||
try { |
|
||||
let values = await validate(); |
|
||||
setModalProps({confirmLoading: true}); |
|
||||
//提交表单 |
|
||||
await saveOrUpdate(values, isUpdate.value); |
|
||||
//关闭弹窗 |
|
||||
closeModal(); |
|
||||
//刷新列表 |
|
||||
emit('success'); |
|
||||
} finally { |
|
||||
setModalProps({confirmLoading: false}); |
|
||||
} |
|
||||
} |
} |
||||
|
// 隐藏底部时禁用整个表单 |
||||
|
setProps({ disabled: !data?.showFooter }); |
||||
|
}); |
||||
|
//设置标题 |
||||
|
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑')); |
||||
|
//表单提交事件 |
||||
|
async function handleSubmit(v) { |
||||
|
try { |
||||
|
let values = await validate(); |
||||
|
setModalProps({ confirmLoading: true }); |
||||
|
//提交表单 |
||||
|
await saveOrUpdate(values, isUpdate.value); |
||||
|
//关闭弹窗 |
||||
|
closeModal(); |
||||
|
//刷新列表 |
||||
|
emit('success'); |
||||
|
} finally { |
||||
|
setModalProps({ confirmLoading: false }); |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
/** 时间和数字输入框样式 */ |
/** 时间和数字输入框样式 */ |
||||
:deep(.ant-input-number){ |
:deep(.ant-input-number) { |
||||
width: 100% |
width: 100%; |
||||
} |
} |
||||
|
|
||||
:deep(.ant-calendar-picker){ |
:deep(.ant-calendar-picker) { |
||||
width: 100% |
width: 100%; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
@ -1,99 +1,93 @@ |
|||||
import {BasicColumn} from '/@/components/Table'; |
import { BasicColumn } from '/@/components/Table'; |
||||
import {FormSchema} from '/@/components/Table'; |
import { FormSchema } from '/@/components/Table'; |
||||
import { rules} from '/@/utils/helper/validator'; |
import { rules } from '/@/utils/helper/validator'; |
||||
import { render } from '/@/utils/common/renderUtils'; |
import { render } from '/@/utils/common/renderUtils'; |
||||
//列表数据
|
//列表数据
|
||||
export const columns: BasicColumn[] = [ |
export const columns: BasicColumn[] = [ |
||||
{ |
{ |
||||
title: '网络协议类型编号', |
title: '类型编号', |
||||
align:"center", |
align: 'center', |
||||
dataIndex: 'protocolType' |
dataIndex: 'protocolType', |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '协议名称', |
title: '协议名称', |
||||
align:"center", |
align: 'center', |
||||
dataIndex: 'protocolName' |
dataIndex: 'protocolName', |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '备注', |
title: '备注', |
||||
align:"center", |
align: 'center', |
||||
dataIndex: 'remark' |
dataIndex: 'remark', |
||||
}, |
}, |
||||
{ |
// {
|
||||
title: '所属区域', |
// title: '所属区域',
|
||||
align:"center", |
// align: 'center',
|
||||
dataIndex: 'sysAreaCode' |
// dataIndex: 'sysAreaCode',
|
||||
}, |
// },
|
||||
]; |
]; |
||||
//查询数据
|
//查询数据
|
||||
export const searchFormSchema: FormSchema[] = [ |
export const searchFormSchema: FormSchema[] = [ |
||||
{ |
{ |
||||
label: "网络协议类型编号", |
label: '类型编号', |
||||
field: 'protocolType', |
field: 'protocolType', |
||||
component: 'Input', |
component: 'Input', |
||||
colProps: {span: 6}, |
colProps: { span: 6 }, |
||||
}, |
}, |
||||
{ |
{ |
||||
label: "协议名称", |
label: '协议名称', |
||||
field: 'protocolName', |
field: 'protocolName', |
||||
component: 'Input', |
component: 'Input', |
||||
colProps: {span: 6}, |
colProps: { span: 6 }, |
||||
}, |
}, |
||||
{ |
// {
|
||||
label: "所属区域", |
// label: '所属区域',
|
||||
field: 'sysAreaCode', |
// field: 'sysAreaCode',
|
||||
component: 'Input', |
// component: 'Input',
|
||||
colProps: {span: 6}, |
// colProps: { span: 6 },
|
||||
}, |
// },
|
||||
]; |
]; |
||||
//表单数据
|
//表单数据
|
||||
export const formSchema: FormSchema[] = [ |
export const formSchema: FormSchema[] = [ |
||||
{ |
{ |
||||
label: '网络协议类型编号', |
label: '类型编号', |
||||
field: 'protocolType', |
field: 'protocolType', |
||||
component: 'Input', |
component: 'Input', |
||||
dynamicRules: ({model,schema}) => { |
dynamicRules: ({ model, schema }) => { |
||||
return [ |
return [{ required: true, message: '请输入类型编号!' }]; |
||||
{ required: true, message: '请输入网络协议类型编号!'}, |
}, |
||||
]; |
|
||||
}, |
|
||||
}, |
}, |
||||
{ |
{ |
||||
label: '协议名称', |
label: '协议名称', |
||||
field: 'protocolName', |
field: 'protocolName', |
||||
component: 'Input', |
component: 'Input', |
||||
dynamicRules: ({model,schema}) => { |
dynamicRules: ({ model, schema }) => { |
||||
return [ |
return [{ required: true, message: '请输入协议名称!' }]; |
||||
{ required: true, message: '请输入协议名称!'}, |
}, |
||||
]; |
|
||||
}, |
|
||||
}, |
}, |
||||
{ |
{ |
||||
label: '备注', |
label: '备注', |
||||
field: 'remark', |
field: 'remark', |
||||
component: 'Input', |
component: 'Input', |
||||
}, |
}, |
||||
|
// {
|
||||
|
// label: '所属区域',
|
||||
|
// field: 'sysAreaCode',
|
||||
|
// component: 'Input',
|
||||
|
// },
|
||||
|
// TODO 主键隐藏字段,目前写死为ID
|
||||
{ |
{ |
||||
label: '所属区域', |
label: '', |
||||
field: 'sysAreaCode', |
field: 'id', |
||||
component: 'Input', |
component: 'Input', |
||||
|
show: false, |
||||
}, |
}, |
||||
// TODO 主键隐藏字段,目前写死为ID
|
|
||||
{ |
|
||||
label: '', |
|
||||
field: 'id', |
|
||||
component: 'Input', |
|
||||
show: false |
|
||||
}, |
|
||||
]; |
]; |
||||
|
|
||||
|
|
||||
|
|
||||
/** |
/** |
||||
* 流程表单调用这个方法获取formSchema |
* 流程表单调用这个方法获取formSchema |
||||
* @param param |
* @param param |
||||
*/ |
*/ |
||||
export function getBpmFormSchema(_formData): FormSchema[]{ |
export function getBpmFormSchema(_formData): FormSchema[] { |
||||
// 默认和原始表单保持一致 如果流程中配置了权限数据,这里需要单独处理formSchema
|
// 默认和原始表单保持一致 如果流程中配置了权限数据,这里需要单独处理formSchema
|
||||
return formSchema; |
return formSchema; |
||||
} |
} |
||||
|
Loading…
Reference in new issue