Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
1f3bcdc6ba
|
|
@ -93,6 +93,9 @@
|
|||
:options="linkOptions"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="脚本" v-if="['Button'].includes(formConfig.currentItem.component)">
|
||||
<a-button type="primary" size="mini" @click="handleButtonClick"> 点击脚本 </a-button>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="选项"
|
||||
|
|
@ -123,6 +126,26 @@
|
|||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<BasicModal
|
||||
@register="buttonScriptModal"
|
||||
title="按钮点击脚本"
|
||||
:height="700"
|
||||
:width="1000"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<div style="display: flex">
|
||||
<div calss="propsScript" style="width: 50%">
|
||||
<a-textarea v-model:value="formContent" :rows="29" />
|
||||
</div>
|
||||
<div calss="propsScript" style="width: 50%">
|
||||
<a-alert message="脚本参数说明,只支持ES5语法（兼容小程序）" type="warning">
|
||||
<template #description>
|
||||
<div v-html="description"></div>
|
||||
</template>
|
||||
</a-alert>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {
|
||||
|
|
@ -137,6 +160,7 @@
|
|||
RadioGroup,
|
||||
Col,
|
||||
Row,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue';
|
||||
import { computed, defineComponent, ref, watch, inject } from 'vue';
|
||||
|
|
@ -153,6 +177,8 @@
|
|||
import { formItemsForEach, remove } from '../../../utils';
|
||||
import { IBaseFormAttrs } from '../config/formItemPropsConfig';
|
||||
import { getOutKeyList } from '@/api/formdesign/index';
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { formItemPropsScript } from '../../VFormDesign/config/formItemPropsScript';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ComponentProps',
|
||||
|
|
@ -170,6 +196,9 @@
|
|||
RadioButtonGroup,
|
||||
Col,
|
||||
Row,
|
||||
message,
|
||||
BasicModal,
|
||||
useModal,
|
||||
},
|
||||
setup() {
|
||||
let fieldTableValue = ref();
|
||||
|
|
@ -400,6 +429,26 @@
|
|||
.map(({ label, field }) => ({ label: label + '/' + field, value: field }))
|
||||
);
|
||||
});
|
||||
// 脚本
|
||||
const formContent: any = ref('');
|
||||
const description = ref(formItemPropsScript);
|
||||
// 脚本窗口
|
||||
const [buttonScriptModal, { openModal, closeModal }] = useModal();
|
||||
// 点击脚本按钮
|
||||
function handleButtonClick() {
|
||||
formContent.value = formConfig.value.currentItem.componentProps?.clickCode;
|
||||
openModal();
|
||||
}
|
||||
// 脚本窗口提交
|
||||
function handleSubmit() {
|
||||
if (formContent.value.indexOf('=>') != -1) {
|
||||
// 表示是老版本，提示其修改为新的版本
|
||||
message.warning('脚本没有更新为最新的版本！');
|
||||
return;
|
||||
}
|
||||
formConfig.value.currentItem.componentProps.clickCode = formContent.value;
|
||||
closeModal();
|
||||
}
|
||||
return {
|
||||
formConfig,
|
||||
showControlAttrs,
|
||||
|
|
@ -413,7 +462,23 @@
|
|||
ChlidTableOptions,
|
||||
handleFieldTableChange,
|
||||
fetch,
|
||||
BasicModal,
|
||||
formContent,
|
||||
description,
|
||||
buttonScriptModal,
|
||||
openModal,
|
||||
closeModal,
|
||||
handleButtonClick,
|
||||
handleSubmit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.propsScript {
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
height: calc(100%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -72,11 +72,70 @@
|
|||
<Col><Checkbox v-model:checked="formConfig.disabled">禁用</Checkbox></Col>
|
||||
<Col><Checkbox v-model:checked="formConfig.hideRequiredMark">隐藏必选标记</Checkbox></Col>
|
||||
</FormItem>
|
||||
<FormItem label="脚本">
|
||||
<a-space direction="vertical">
|
||||
<a-button
|
||||
v-model:value="formConfig.beforeSetData"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleBtnClick('beforeSetData')"
|
||||
>
|
||||
添加赋值前脚本
|
||||
</a-button>
|
||||
<a-button
|
||||
v-model:value="formConfig.afterValidateForm"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleBtnClick('afterValidateForm')"
|
||||
>
|
||||
添加校验后脚本
|
||||
</a-button>
|
||||
<a-button
|
||||
v-model:value="formConfig.afterSaveEvent"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleBtnClick('afterSaveEvent')"
|
||||
>
|
||||
添加保存后脚本
|
||||
</a-button>
|
||||
<a-button
|
||||
v-model:value="formConfig.changeDataEvent"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleBtnClick('changeDataEvent')"
|
||||
>
|
||||
添加数据改变脚本
|
||||
</a-button>
|
||||
</a-space>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<BasicModal
|
||||
@register="propsScriptModal"
|
||||
:title="formTitle"
|
||||
:height="700"
|
||||
:width="1000"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<div style="display: flex">
|
||||
<div calss="propsScript" style="width: 50%">
|
||||
<a-textarea v-model:value="formContent" :rows="29" />
|
||||
</div>
|
||||
<div calss="propsScript" style="width: 50%">
|
||||
<a-alert message="脚本参数说明,只支持ES5语法（兼容小程序）" type="warning">
|
||||
<template #description>
|
||||
<div v-html="formItemPropsScript"></div>
|
||||
</template>
|
||||
</a-alert>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup name="FormProps">
|
||||
import { computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { formItemPropsScript } from '../../VFormDesign/config/formItemPropsScript';
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
||||
import {
|
||||
InputNumber,
|
||||
|
|
@ -109,4 +168,72 @@
|
|||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
// 当前打开脚本
|
||||
let formTitle: any = ref('');
|
||||
let btnClickEvent_now = '';
|
||||
let formContent: any = ref('');
|
||||
let description = ref(formItemPropsScript);
|
||||
// 脚本窗口
|
||||
const [propsScriptModal, { openModal, closeModal }] = useModal();
|
||||
// 点击脚本按钮
|
||||
function handleBtnClick(btnClickEvent: string) {
|
||||
switch (btnClickEvent) {
|
||||
case 'beforeSetData':
|
||||
formTitle.value = '添加赋值前脚本';
|
||||
btnClickEvent_now = 'beforeSetData';
|
||||
formContent.value = formConfig.value?.beforeSetData;
|
||||
break;
|
||||
case 'afterValidateForm':
|
||||
formTitle.value = '添加校验后脚本';
|
||||
btnClickEvent_now = 'afterValidateForm';
|
||||
formContent.value = formConfig.value?.afterValidateForm;
|
||||
break;
|
||||
case 'afterSaveEvent':
|
||||
formTitle.value = '添加保存后脚本';
|
||||
btnClickEvent_now = 'afterSaveEvent';
|
||||
formContent.value = formConfig.value?.afterSaveEvent;
|
||||
break;
|
||||
case 'changeDataEvent':
|
||||
formTitle.value = '添加数据改变脚本';
|
||||
btnClickEvent_now = 'changeDataEvent';
|
||||
formContent.value = formConfig.value?.changeDataEvent;
|
||||
break;
|
||||
default:
|
||||
formTitle.value = '';
|
||||
break;
|
||||
}
|
||||
// console.log(formConfig.value);
|
||||
// console.log(description);
|
||||
openModal();
|
||||
}
|
||||
// 脚本窗口提交
|
||||
function handleSubmit() {
|
||||
if (formContent.value.indexOf('=>') != -1) {
|
||||
// 表示是老版本，提示其修改为新的版本
|
||||
message.warning('脚本没有更新为最新的版本！');
|
||||
return;
|
||||
// } else if() {
|
||||
}
|
||||
if (btnClickEvent_now) {
|
||||
if (btnClickEvent_now == 'beforeSetData') {
|
||||
formConfig.value.beforeSetData = formContent.value;
|
||||
} else if (btnClickEvent_now == 'afterValidateForm') {
|
||||
formConfig.value.afterValidateForm = formContent.value;
|
||||
} else if (btnClickEvent_now == 'afterSaveEvent') {
|
||||
formConfig.value.afterSaveEvent = formContent.value;
|
||||
} else if (btnClickEvent_now == 'changeDataEvent') {
|
||||
formConfig.value.changeDataEvent = formContent.value;
|
||||
}
|
||||
}
|
||||
closeModal();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.propsScript {
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
height: calc(100%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
export const formItemPropsScript = `
|
||||
prop:组件id;<br />
|
||||
data:组件改变数据;<br />
|
||||
isUpdate:表单状态,新增或更新;<br />
|
||||
get(path):获取数据方法, 如果想获取某一个组件值就设置path参数值为组件id, 如果是子表的一行数据值就设置子表id.行号, 如果是子表某一行某一列值就设置子表id.行号.子组件id;<br />
|
||||
set(path,value):设置值方法,path说明和get方法一致;<br />
|
||||
getLabel(prop):获取组件的显示值,prop为组件id;<br />
|
||||
setRequired(prop,isRequired):设置组件是否必填,prop为组件id,isRequired 默认值true,如果取消必填就设置成false<br />
|
||||
setDisabled(prop,isDisabled):设置组件是否只读,prop为组件id,isDisabled 默认值true,如果取消只读就设置成false<br />
|
||||
setHide(prop,isHide):设置组件是否隐藏,isHide 默认值true,如果取消隐藏就设置成false<br />
|
||||
httpGet(option):get请求方法<br />
|
||||
httpPost(option):post请求方法<br />
|
||||
httpDelete(option):delete请求方法<br />
|
||||
httpPut(option):put请求方法<br />
|
||||
option:上面四个请求方法参数描述:url:请求地址,data:提交数据(get方法不支持),params:url参数,errorTips:请求失败错误提示,callback请求回调方法 返回结果为请求数据<br />
|
||||
loading:显示加载状态<br />
|
||||
hideLoading:隐藏加载状态<br />
|
||||
message:显示提示消息<br />
|
||||
loginUser:当前登录者信息<br />
|
||||
callback:回调方法,在脚本里使用了http方法后才需要使用';<br />
|
||||
`;
|
||||
|
|
@ -473,6 +473,7 @@ export const baseComponents: IVFormComponent[] = [
|
|||
shape: 'default',
|
||||
size: 'middle',
|
||||
icon: '',
|
||||
clickCode: '',
|
||||
},
|
||||
},
|
||||
// {
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ export interface IFormConfig extends PickAntFormConfig {
|
|||
activeKey?: PropsTabKey;
|
||||
status?: string;
|
||||
defaultValue?: string;
|
||||
beforeSetData?: string;
|
||||
afterValidateForm?: string;
|
||||
afterSaveEvent?: string;
|
||||
changeDataEvent?: string;
|
||||
}
|
||||
|
||||
export interface AForm {
|
||||
|
|
|
|||
Loading…
Reference in New Issue