<template>
|
<a-spin :spinning="confirmLoading">
|
<a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
|
<a-row>
|
<a-col :span="24">
|
<a-form-item label="文本" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.name">
|
<a-input v-model:value="formState.name" placeholder="请输入文本"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.miMa">
|
<a-input-password v-model:value="formState.miMa" placeholder="请输入密码" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="字典下拉" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.xiala">
|
<JDictSelectTag type="select" v-model:value="formState.xiala" dictCode="sex" placeholder="请选择字典下拉" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="字典单选" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.danxuan">
|
<JDictSelectTag type="radio" v-model:value="formState.danxuan" dictCode="sex" placeholder="请选择字典单选" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="字典多选" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.duoxuan">
|
<JCheckbox v-model:value="formState.duoxuan" dictCode="urgent_level" placeholder="请选择字典多选" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="开关" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.kaiguan">
|
<JSwitch v-model:value="formState.kaiguan" :options="['1', '0']"></JSwitch>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.riqi">
|
<a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model:value="formState.riqi" style="width: 100%" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="年月日时分秒" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.nyrsfm">
|
<a-date-picker show-time v-model:value="formState.nyrsfm" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.shijian">
|
<TimePicker placeholder="请选择时间" v-model:value="formState.shijian" style="width: 100%" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="文件" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.wenjian">
|
<JUpload v-model:value="formState.wenjian"></JUpload>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.tupian">
|
<JImageUpload :fileMax="2" v-model:value="formState.tupian"></JImageUpload>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="多行文本框" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.dhwb">
|
<a-textarea v-model:value="formState.dhwb" rows="4" placeholder="请输入多行文本框" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="字典表下拉搜索框" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.xlss">
|
<JSearchSelect v-model:value="formState.xlss" dict="sys_user,realname,username" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="popup弹窗" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.popup">
|
<JPopup
|
v-model:value="formState.popup"
|
:fieldConfig="[
|
{ source: 'name', target: 'popup' },
|
{ source: 'id', target: 'popback' },
|
]"
|
code="report_user"
|
:multi="true"
|
:setFieldsValue="setFieldsValue"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="popback" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.popback">
|
<a-input v-model:value="formState.popback" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="分类字典树" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.flzds">
|
<JCategorySelect
|
@change="(value) => handleFormChange('flzds', value)"
|
v-model:value="formState.flzds"
|
pcode="B02"
|
placeholder="请选择分类字典树"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="部门选择" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.bmxz">
|
<JSelectDept v-model:value="formState.bmxz" :multi="true" type="array" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="用户选择" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yhxz">
|
<JSelectUserByDept v-model:value="formState.yhxz" :multi="true" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="富文本" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.fwb">
|
<JEditor v-model:value="formState.fwb" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="markdown" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.markdownString">
|
<JMarkdownEditor v-model:value="formState.markdownString"></JMarkdownEditor>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="省市区JAreaSelect" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.shq">
|
<JAreaSelect v-model:value="formState.shq" placeholder="请输入省市区" />
|
</a-form-item>
|
</a-col>
|
|
<a-col :span="24">
|
<a-form-item label="省市区JAreaLinkage" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.jssq">
|
<JAreaLinkage v-model:value="formState.jssq" placeholder="请输入省市区" />
|
</a-form-item>
|
</a-col>
|
|
<a-col :span="24">
|
<a-form-item label="JInputPop" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.ldzje">
|
<JInputPop
|
v-model:value="formState.ldzje"
|
placeholder="请输入JInputPop"
|
@change="(value) => handleFormChange('ldzje', value)"
|
></JInputPop>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="JSelectInput" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.ldzjs">
|
<JSelectInput
|
v-model:value="formState.ldzjs"
|
placeholder="请选择JSelectInput"
|
:options="ldzjsOptions"
|
@change="(value) => handleFormChange('ldzjs', value)"
|
></JSelectInput>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="下拉多选" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zddtjxl">
|
<JSelectMultiple v-model:value="formState.zddtjxl" placeholder="请选择下拉多选" dictCode="sex"></JSelectMultiple>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="用户" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yongHu">
|
<JSelectUser v-model:value="formState.yongHu" placeholder="请选择用户"></JSelectUser>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zhiWu">
|
<JSelectPosition
|
v-model:value="formState.zhiWu"
|
placeholder="请选择职务"
|
@change="(value) => handleFormChange('zhiWu', value)"
|
></JSelectPosition>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="角色" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.jueSe">
|
<JSelectRole v-model:value="formState.jueSe" placeholder="请选择角色" @change="(value) => handleFormChange('jueSe', value)"></JSelectRole>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="自定义树" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zdys">
|
<JTreeSelect
|
ref="treeSelect"
|
placeholder="请选择自定义树"
|
v-model:value="formState.zdys"
|
dict="sys_category,name,id"
|
pidValue="0"
|
loadTriggleChange
|
>
|
</JTreeSelect>
|
</a-form-item>
|
</a-col>
|
|
<a-col :span="24">
|
<a-form-item label="数值" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yuanjia">
|
<a-input-number v-model:value="formState.yuanjia" placeholder="请输入double类型" style="width: 100%" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="输入2到10位的字母" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.ywzz">
|
<a-input v-model:value="formState.ywzz" placeholder="请输入2到10位的字母"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="JTreeDict" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zdbxl">
|
<JTreeDict
|
v-model:value="formState.zdbxl"
|
placeholder="请选择JTreeDict"
|
@change="(value) => handleFormChange('zdbxl', value)"
|
></JTreeDict>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="JCodeEditor" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zdmrz">
|
<JCodeEditor
|
v-model:value="formState.zdmrz"
|
placeholder="请输入JCodeEditor"
|
@change="(value) => handleFormChange('zdmrz', value)"
|
></JCodeEditor>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="参数" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.jsonParam">
|
<JAddInput v-model:value="formState.jsonParam" placeholder="参数"></JAddInput>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</a-spin>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, reactive, defineExpose, nextTick } from 'vue';
|
import { defHttp } from '/@/utils/http/axios';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
import dayjs from 'dayjs';
|
import { TimePicker, Form } from 'ant-design-vue';
|
import JCheckbox from '/@/components/Form/src/jeecg/components/JCheckbox.vue';
|
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
|
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
|
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
|
import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
|
import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
|
import JCategorySelect from '/@/components/Form/src/jeecg/components/JCategorySelect.vue';
|
import JSelectUserByDept from '/@/components/Form/src/jeecg/components/JSelectUserByDept.vue';
|
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
|
import JMarkdownEditor from '/@/components/Form/src/jeecg/components/JMarkdownEditor.vue';
|
import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue';
|
import JInputPop from '/@/components/Form/src/jeecg/components/JInputPop.vue';
|
import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
|
import JSelectPosition from '/@/components/Form/src/jeecg/components/JSelectPosition.vue';
|
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
|
import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
|
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
|
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
|
import JAreaSelect from '/@/components/Form/src/jeecg/components/JAreaSelect.vue';
|
import JAreaLinkage from '/@/components/Form/src/jeecg/components/JAreaLinkage.vue';
|
import JSelectRole from '/@/components/Form/src/jeecg/components/JSelectRole.vue';
|
import JTreeDict from '/@/components/Form/src/jeecg/components/JTreeDict.vue';
|
import JCodeEditor from '/@/components/Form/src/jeecg/components/JCodeEditor.vue';
|
import JAddInput from '/@/components/Form/src/jeecg/components/JAddInput.vue';
|
import { getValueType } from '/@/utils';
|
|
const emit = defineEmits(['register', 'ok']);
|
//update-begin---author:wangshuai ---date:20220616 for：报表示例验证修改--------------
|
const formState = reactive<Record<string, any>>({
|
name: '',
|
miMa: '',
|
ywzz: '',
|
xiala: '',
|
danxuan: '',
|
duoxuan: '',
|
riqi: '',
|
shijian: '',
|
wenjian: '',
|
tupian: '',
|
dhwb: '',
|
xlss: '',
|
popup: '',
|
flzds: '',
|
yhxz: '',
|
fwb: '',
|
shq: '',
|
ldzje: '',
|
ldzjs: '',
|
zddtjxl: '',
|
yongHu: '',
|
zhiWu: '',
|
jueSe: '',
|
zdys: '',
|
jssq: '',
|
zdbxl: '',
|
zdmrz: '',
|
jsonParam: '',
|
bmxz: '',
|
yuanjia: '',
|
nyrsfm: '',
|
});
|
//update-end---author:wangshuai ---date:20220616 for：报表示例验证修改--------------
|
const { createMessage } = useMessage();
|
const formRef = ref();
|
const useForm = Form.useForm;
|
const url = reactive<any>({
|
duplicateCheck: '/sys/duplicate/check',
|
add: '/test/jeecgDemo/oneNative/add',
|
edit: '/test/jeecgDemo/oneNative/edit',
|
});
|
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 = {
|
name: [{ required: false, message: '请输入文本!' }],
|
miMa: [{ required: false, message: '请输入密码!' }],
|
ywzz: [{ required: false }, { pattern: '^[a-z|A-Z]{2,10}$', message: '不符合校验规则!' }],
|
xiala: [{ required: false, message: '请选择下拉组件!' }],
|
danxuan: [{ required: false, message: '请选择单选组件!' }],
|
duoxuan: [{ required: false, message: '请选择多选组件!' }],
|
riqi: [{ required: false, message: '请选择日期!' }],
|
shijian: [{ required: false, message: '请选择时间!' }],
|
wenjian: [{ required: false, message: '请上传文件!' }],
|
tupian: [{ required: false, message: '请上传图片!' }],
|
dhwb: [{ required: false, message: '请填写多行文本!' }],
|
xlss: [{ required: false, message: '请选择字典下拉搜索!' }],
|
popup: [{ required: false, message: '请选择popup弹窗!' }],
|
flzds: [{ required: false, message: '请选择分类字典树!' }],
|
yhxz: [{ required: false, message: '请选择用户!' }],
|
fwb: [{ required: false, message: '请填写富文本!' }],
|
shq: [{ required: false, message: '请选择省市级!' }],
|
ldzje: [{ required: false, message: '请输入JInputPop!' }],
|
ldzjs: [{ required: false, message: '请选择下拉输入框!' }],
|
zddtjxl: [{ required: false, message: '请选择多选输入框!' }],
|
yongHu: [{ required: false, message: '请选择用户!' }],
|
zhiWu: [{ required: false, message: '请选择职务!' }],
|
jueSe: [{ required: false, message: '请选择角色!' }],
|
zdys: [{ required: false, message: '请选择自定义树!' }],
|
jssq: [{ required: false, message: '请选择三级联动!' }],
|
zdbxl: [{ required: false, message: '请选择JTreeDict!' }],
|
zdmrz: [{ required: false, message: '请输入JCodeEditor!' }],
|
jsonParam: [{ required: false, message: '请输入参数!' }],
|
bmxz: [{ required: false, message: '请选择部门!' }],
|
yuanjia: [{ required: false, message: '请输入数值!' }],
|
nyrsfm: [{ required: false, message: '请选择年月日时分秒!' }],
|
};
|
//update-begin---author:wangshuai ---date:20220616 for：报表示例验证修改------------
|
const { resetFields, validate, validateInfos } = useForm(formState, validatorRules, { immediate: false });
|
//update-end---author:wangshuai ---date:20220616 for：报表示例验证修改------------
|
const ldzjsOptions = ref([
|
{ label: '男', value: '1' },
|
{ label: '女', value: '2' },
|
]);
|
|
/**
|
* 新增
|
*/
|
function add() {
|
edit({});
|
}
|
|
/**
|
* 编辑
|
*/
|
function edit(record) {
|
nextTick(() => {
|
resetFields();
|
//赋值
|
Object.assign(formState, record);
|
});
|
}
|
|
/**
|
* 提交数据
|
*/
|
async function submitForm() {
|
// 触发表单验证
|
//update-begin---author:wangshuai ---date:20220616 for：报表示例验证修改------------
|
await validate();
|
confirmLoading.value = true;
|
let httpurl = '';
|
let method = '';
|
//时间格式化
|
let model = formState;
|
if (!model.id) {
|
httpurl += url.add;
|
method = 'post';
|
} else {
|
httpurl += url.edit;
|
method = 'put';
|
}
|
//循环数据如果是数组
|
for (let data in formState) {
|
//如果该数据是数组并且是字符串类型
|
if (formState[data] instanceof Array) {
|
let valueType = getValueType(formRef.value.getProps, data);
|
//如果是字符串类型的需要变成以逗号分割的字符串
|
if (valueType === 'string') {
|
formState[data] = formState[data].join(',');
|
}
|
}
|
}
|
defHttp
|
.request(
|
{
|
url: httpurl,
|
params: model,
|
method: method,
|
},
|
{ isTransformResponse: false }
|
)
|
.then((res) => {
|
if (res.success) {
|
createMessage.success(res.message);
|
emit('ok');
|
} else {
|
createMessage.warning(res.message);
|
}
|
})
|
.finally(() => {
|
confirmLoading.value = false;
|
});
|
//update-end---author:wangshuai ---date:20220616 for：报表示例验证修改--------------
|
}
|
|
/**
|
* popup成功回调事件
|
*/
|
function popupHandleSuccess(values) {
|
Object.assign(formState, values);
|
}
|
|
/**
|
* popup组件值改变事件
|
*/
|
function setFieldsValue(map) {
|
Object.keys(map).map((key) => {
|
formState[key] = map[key];
|
});
|
}
|
|
/**
|
* 值改变事件触发
|
* @param key
|
* @param value
|
*/
|
function handleFormChange(key, value) {
|
formState[key] = value;
|
}
|
|
defineExpose({
|
add,
|
edit,
|
submitForm,
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.antd-modal-form {
|
padding: 24px 24px 24px 24px;
|
}
|
</style>
|
