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'; |
|||
import { rules} from '/@/utils/helper/validator'; |
|||
/* |
|||
* @Author: Fuyuu 1805498209@qq.com |
|||
* @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'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '数据协议类型编号', |
|||
align:"center", |
|||
dataIndex: 'protocolType' |
|||
}, |
|||
{ |
|||
{ |
|||
title: '类型编号', |
|||
align: 'center', |
|||
dataIndex: 'protocolType', |
|||
}, |
|||
{ |
|||
title: '协议名称', |
|||
align:"center", |
|||
dataIndex: 'protocolName' |
|||
}, |
|||
{ |
|||
align: 'center', |
|||
dataIndex: 'protocolName', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align:"center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
align:"center", |
|||
dataIndex: 'sysAreaCode' |
|||
}, |
|||
align: 'center', |
|||
dataIndex: 'remark', |
|||
}, |
|||
// {
|
|||
// title: '所属区域',
|
|||
// align: 'center',
|
|||
// dataIndex: 'sysAreaCode',
|
|||
// },
|
|||
]; |
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "数据协议类型编号", |
|||
field: 'protocolType', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "协议名称", |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "所属区域", |
|||
field: 'sysAreaCode', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: '类型编号', |
|||
field: 'protocolType', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: '协议名称', |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
// {
|
|||
// label: '所属区域',
|
|||
// field: 'sysAreaCode',
|
|||
// component: 'Input',
|
|||
// colProps: { span: 6 },
|
|||
// },
|
|||
]; |
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '数据协议类型编号', |
|||
label: '类型编号', |
|||
field: 'protocolType', |
|||
component: 'Input', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入数据协议类型编号!'}, |
|||
]; |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [{ required: true, message: '请输入类型编号!' }]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '协议名称', |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入协议名称!'}, |
|||
]; |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [{ required: true, message: '请输入协议名称!' }]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
// {
|
|||
// label: '所属区域',
|
|||
// field: 'sysAreaCode',
|
|||
// component: 'Input',
|
|||
// },
|
|||
// TODO 主键隐藏字段,目前写死为ID
|
|||
{ |
|||
label: '所属区域', |
|||
field: 'sysAreaCode', |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
// TODO 主键隐藏字段,目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false |
|||
}, |
|||
]; |
|||
|
|||
|
|||
|
|||
/** |
|||
* 流程表单调用这个方法获取formSchema |
|||
* @param param |
|||
*/ |
|||
export function getBpmFormSchema(_formData): FormSchema[]{ |
|||
* 流程表单调用这个方法获取formSchema |
|||
* @param param |
|||
*/ |
|||
export function getBpmFormSchema(_formData): FormSchema[] { |
|||
// 默认和原始表单保持一致 如果流程中配置了权限数据,这里需要单独处理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> |
|||
<div style="min-height: 400px"> |
|||
<BasicForm @register="registerForm"></BasicForm> |
|||
<div style="width: 100%;text-align: center" v-if="!formDisabled"> |
|||
<a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button> |
|||
</div> |
|||
<div style="min-height: 400px"> |
|||
<BasicForm @register="registerForm"></BasicForm> |
|||
<div style="width: 100%; text-align: center" v-if="!formDisabled"> |
|||
<a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import {BasicForm, useForm} from '/@/components/Form/index'; |
|||
import {computed, defineComponent} from 'vue'; |
|||
import {defHttp} from '/@/utils/http/axios'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import {getBpmFormSchema} from '../DtDeviceDataProtocol.data'; |
|||
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} |
|||
}); |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { computed, defineComponent } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { getBpmFormSchema } from '../DtDeviceDataProtocol.data'; |
|||
import { saveOrUpdate } from '../DtDeviceDataProtocol.api'; |
|||
|
|||
const formDisabled = computed(()=>{ |
|||
if(props.formData.disabled === false){ |
|||
return false; |
|||
} |
|||
return true; |
|||
}); |
|||
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 }, |
|||
}); |
|||
|
|||
let formData = {}; |
|||
const queryByIdUrl = '/device/dtDeviceDataProtocol/queryById'; |
|||
async function initFormData(){ |
|||
let params = {id: props.formData.dataId}; |
|||
const data = await defHttp.get({url: queryByIdUrl, params}); |
|||
formData = {...data} |
|||
//设置表单的值 |
|||
await setFieldsValue(formData); |
|||
//默认是禁用 |
|||
await setProps({disabled: formDisabled.value}) |
|||
} |
|||
const formDisabled = computed(() => { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} |
|||
return true; |
|||
}); |
|||
|
|||
async function submitForm() { |
|||
let data = getFieldsValue(); |
|||
let params = Object.assign({}, formData, data); |
|||
console.log('表单数据', params) |
|||
await saveOrUpdate(params, true) |
|||
} |
|||
let formData = {}; |
|||
const queryByIdUrl = '/device/dtDeviceDataProtocol/queryById'; |
|||
async function initFormData() { |
|||
let params = { id: props.formData.dataId }; |
|||
const data = await defHttp.get({ url: queryByIdUrl, params }); |
|||
formData = { ...data }; |
|||
//设置表单的值 |
|||
await setFieldsValue(formData); |
|||
//默认是禁用 |
|||
await setProps({ disabled: formDisabled.value }); |
|||
} |
|||
|
|||
initFormData(); |
|||
|
|||
return { |
|||
registerForm, |
|||
formDisabled, |
|||
submitForm, |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
async function submitForm() { |
|||
let data = getFieldsValue(); |
|||
let params = Object.assign({}, formData, data); |
|||
console.log('表单数据', params); |
|||
await saveOrUpdate(params, true); |
|||
} |
|||
|
|||
initFormData(); |
|||
|
|||
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> |
|||
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="896" @ok="handleSubmit"> |
|||
<BasicForm @register="registerForm"/> |
|||
<BasicForm @register="registerForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {ref, computed, unref} from 'vue'; |
|||
import {BasicModal, useModalInner} from '/@/components/Modal'; |
|||
import {BasicForm, useForm} from '/@/components/Form/index'; |
|||
import {formSchema} from '../DtDeviceDataProtocol.data'; |
|||
import {saveOrUpdate} from '../DtDeviceDataProtocol.api'; |
|||
// Emits声明 |
|||
const emit = defineEmits(['register','success']); |
|||
const isUpdate = ref(true); |
|||
//表单配置 |
|||
const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({ |
|||
//labelWidth: 150, |
|||
schemas: formSchema, |
|||
showActionButtonGroup: false, |
|||
baseColProps: {span: 12} |
|||
}); |
|||
//表单赋值 |
|||
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => { |
|||
//重置表单 |
|||
await resetFields(); |
|||
setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter}); |
|||
isUpdate.value = !!data?.isUpdate; |
|||
if (unref(isUpdate)) { |
|||
//表单赋值 |
|||
await setFieldsValue({ |
|||
...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}); |
|||
} |
|||
import { ref, computed, unref } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { formSchema } from '../DtDeviceDataProtocol.data'; |
|||
import { saveOrUpdate } from '../DtDeviceDataProtocol.api'; |
|||
// Emits声明 |
|||
const emit = defineEmits(['register', 'success']); |
|||
const isUpdate = ref(true); |
|||
//表单配置 |
|||
const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({ |
|||
//labelWidth: 150, |
|||
schemas: formSchema, |
|||
showActionButtonGroup: false, |
|||
baseColProps: { span: 12 }, |
|||
}); |
|||
//表单赋值 |
|||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|||
//重置表单 |
|||
await resetFields(); |
|||
setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter }); |
|||
isUpdate.value = !!data?.isUpdate; |
|||
if (unref(isUpdate)) { |
|||
//表单赋值 |
|||
await setFieldsValue({ |
|||
...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 }); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
/** 时间和数字输入框样式 */ |
|||
:deep(.ant-input-number){ |
|||
width: 100% |
|||
} |
|||
/** 时间和数字输入框样式 */ |
|||
:deep(.ant-input-number) { |
|||
width: 100%; |
|||
} |
|||
|
|||
:deep(.ant-calendar-picker){ |
|||
width: 100% |
|||
} |
|||
</style> |
|||
:deep(.ant-calendar-picker) { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
@ -1,99 +1,93 @@ |
|||
import {BasicColumn} from '/@/components/Table'; |
|||
import {FormSchema} from '/@/components/Table'; |
|||
import { rules} from '/@/utils/helper/validator'; |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { rules } from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '网络协议类型编号', |
|||
align:"center", |
|||
dataIndex: 'protocolType' |
|||
}, |
|||
{ |
|||
{ |
|||
title: '类型编号', |
|||
align: 'center', |
|||
dataIndex: 'protocolType', |
|||
}, |
|||
{ |
|||
title: '协议名称', |
|||
align:"center", |
|||
dataIndex: 'protocolName' |
|||
}, |
|||
{ |
|||
align: 'center', |
|||
dataIndex: 'protocolName', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align:"center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
align:"center", |
|||
dataIndex: 'sysAreaCode' |
|||
}, |
|||
align: 'center', |
|||
dataIndex: 'remark', |
|||
}, |
|||
// {
|
|||
// title: '所属区域',
|
|||
// align: 'center',
|
|||
// dataIndex: 'sysAreaCode',
|
|||
// },
|
|||
]; |
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "网络协议类型编号", |
|||
field: 'protocolType', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "协议名称", |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "所属区域", |
|||
field: 'sysAreaCode', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: '类型编号', |
|||
field: 'protocolType', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: '协议名称', |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
// {
|
|||
// label: '所属区域',
|
|||
// field: 'sysAreaCode',
|
|||
// component: 'Input',
|
|||
// colProps: { span: 6 },
|
|||
// },
|
|||
]; |
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '网络协议类型编号', |
|||
label: '类型编号', |
|||
field: 'protocolType', |
|||
component: 'Input', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入网络协议类型编号!'}, |
|||
]; |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [{ required: true, message: '请输入类型编号!' }]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '协议名称', |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入协议名称!'}, |
|||
]; |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [{ required: true, message: '请输入协议名称!' }]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
// {
|
|||
// label: '所属区域',
|
|||
// field: 'sysAreaCode',
|
|||
// component: 'Input',
|
|||
// },
|
|||
// TODO 主键隐藏字段,目前写死为ID
|
|||
{ |
|||
label: '所属区域', |
|||
field: 'sysAreaCode', |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
// TODO 主键隐藏字段,目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false |
|||
}, |
|||
]; |
|||
|
|||
|
|||
|
|||
/** |
|||
* 流程表单调用这个方法获取formSchema |
|||
* @param param |
|||
*/ |
|||
export function getBpmFormSchema(_formData): FormSchema[]{ |
|||
* 流程表单调用这个方法获取formSchema |
|||
* @param param |
|||
*/ |
|||
export function getBpmFormSchema(_formData): FormSchema[] { |
|||
// 默认和原始表单保持一致 如果流程中配置了权限数据,这里需要单独处理formSchema
|
|||
return formSchema; |
|||
} |
|||
} |
|||
|
Loading…
Reference in new issue