<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { MonacoEditor } from '@jnpf/ui';
|
|
interface State {
|
currentContent: string;
|
editorOptions: any;
|
editorHeight: string;
|
}
|
|
const props = defineProps({
|
type: {
|
type: String,
|
default: 'formField',
|
},
|
});
|
const state = reactive<State>({
|
currentContent: '',
|
editorOptions: {
|
readOnly: true,
|
lineNumbers: 'off',
|
minimap: { enabled: false },
|
},
|
editorHeight: '500px',
|
});
|
|
const { currentContent, editorOptions, editorHeight } = toRefs(state);
|
const commonContent = `\n// onlineUtils--在线js工具类\n// 获取用户信息\nconst userInfo = onlineUtils.getUserInfo()\n// 获取设备信息\nconst deviceInfo = onlineUtils.getDeviceInfo()\n// 请求接口(url,method='get',data,headers)\nonlineUtils.request('url', 'get', { param: '1' }, { header: '1' })\n// 获取低代码表单完整formData；列表按钮可直接传当前行data\nonlineUtils.requestFormData(data).then(formData => console.log(formData))\n// 也可以显式传模型和数据id\nonlineUtils.requestFormData({ modelId: 'modelId', id: data.id, menuId: 'menuId' }).then(formData => console.log(formData))\n// 获取当前 URL 或 openList 传入参数\nconst batchId = onlineUtils.getParam('batch_id')\n// 当前自定义视图弹窗的参数\nconst planId = onlineUtils.getViewParam('planId')\n// 在当前页签内容区域打开 src/views/x 下的自定义页面\nonlineUtils.openCustomView({ page: 'x/eln/demo', title: '业务演示', params: { planId: 'PLAN_001' } })\n// 路由跳转(url,options)；options.title 可指定页面标题和页签标题\nonlineUtils.route('url')\npc: onlineUtils.route('/sysData/icons', { title: '图标管理' })\npc: onlineUtils.route({ path: '/sysData/icons', query: { type: 'antd' }, title: '图标管理' })\napp: onlineUtils.route('/pages/message/message/index')\n// 消息提示(message,type='info',duration=3000)\nonlineUtils.toast('message', 'info', 3000) \n`;
|
const formContent = `// formData--表单数据\nconsole.log(formData)\n// setFormData--设置表单某个组件数据(prop,value)\nsetFormData('key', 'value')\n// 设置子表指定行字段值（仅子表事件中可用）\nsetFormData('tableField.childField', 'value', rowIndex)\n// setShowOrHide--设置显示或隐藏(prop,value)\nsetShowOrHide('key', true)\n// 控制子表整列：子表字段.子字段\nsetShowOrHide('tableField.childField', true)\n// 控制子表指定行（仅子表事件中可用）\nsetShowOrHide('tableField.childField', true, rowIndex)\n// setRequired--设置必填项(prop,value)\nsetRequired('key', true)\n// setDisabled--设置禁用项(prop,value)\nsetDisabled('key', true)\n// 控制子表整列：子表字段.子字段\nsetDisabled('tableField.childField', true)\n// 控制子表指定行（仅子表事件中可用）\nsetDisabled('tableField.childField', true, rowIndex)`;
|
const formFieldContent = `// data--当前组件的选中数据\nconsole.log(data)\n// rowIndex/rowData--当前子表行下标和行数据(仅在子表中可用)\nconsole.log(rowIndex, rowData)\n${formContent}`;
|
const btnEventContent = `// data--列表当前行数据/当前选中数据\nconsole.log(data)\n// index--列表当前行下标(仅按钮在列表中支持)\nconsole.log(index)\n// refresh--刷新列表\nrefresh()`;
|
const addBtnEventContent = `// addRow--执行原始新增方法\naddRow()\n// refresh--刷新列表\nrefresh()`;
|
const editBtnEventContent = `// data--列表当前行数据\nconsole.log(data)\n// index--列表当前行下标\nconsole.log(index)\n// editRow--执行原始编辑方法\neditRow(data)\n// refresh--刷新列表\nrefresh()`;
|
const detailBtnEventContent = `// data--列表当前行数据\nconsole.log(data)\n// index--列表当前行下标\nconsole.log(index)\n// detailRow--执行原始详情方法\ndetailRow(data)\n// refresh--刷新列表\nrefresh()`;
|
const removeBtnEventContent = `// data--列表当前行数据\nconsole.log(data)\n// index--列表当前行下标\nconsole.log(index)\n// deleteRow--执行原始删除方法，不弹出系统确认框\ndeleteRow(data)\n// refresh--刷新列表\nrefresh()`;
|
const batchRemoveBtnEventContent = `// data--列表当前选中数据\nconsole.log(data)\n// batchDeleteRows--执行原始批量删除方法，不弹出系统确认框\nbatchDeleteRows(data)\n// refresh--刷新列表\nrefresh()`;
|
const childTableBtnContent = `// data--当前数据/当前选中数据\nconsole.log(data)\n// tableData/formData/addRow--子表添加按钮事件可用\nconsole.log(tableData, formData)\n// addRow() 新增空行；addRow({ field: 'value' }) 新增并带入默认行数据\n`;
|
const afterOnloadContent = `// data--列表行数据\nconsole.log(data)\n// tableRef--表格DOM元素\nconsole.log(tableRef)`;
|
const rowStyleContent = `// row--列表行数据\n// rowIndex--列表行下标\n({ row, rowIndex }) => {\r\n return {\r\n background: rowIndex%2==0 ? 'red' : 'blue'\r\n }\r\n}`;
|
const cellStyleContent = `// row--列表行数据\n// column--列表列数据\n// rowIndex--列表行下标\n// columnIndex--列表列下标\n({ row, column, rowIndex, columnIndex }) => {\r\n return {\r\n color: rowIndex%2 == 0 ? 'blue' : 'red'\r\n }\r\n}`;
|
const btnEnableContent = `// row--列表行数据\n// rowIndex--列表行下标\n({ row, rowIndex, onlineUtils}) => {\r\n return row.status==1\r\n}`;
|
const btnHeaderEnableContent = `// onlineUtils--在线js工具类\n// 返回 true 启用按钮，返回 false 禁用按钮\n({ onlineUtils }) => {\r\n return true\r\n}`;
|
const detailCustomBtnEnableContent = `// data--详情页当前数据\nconsole.log(data)\n// onlineUtils--在线js工具类\n// 返回 true 显示按钮，返回 false 隐藏按钮\n({ data, onlineUtils }) => {\r\n return true\r\n}`;
|
const customDetailDataContent = `// formData--接口返回的详情数据\nconsole.log(formData)\n// onlineUtils--在线js工具类\n({ formData, onlineUtils }) => {\r\n return new Promise((resolve, reject) => {\r\n // 返回处理后的详情数据\r\n resolve(formData)\r\n })\r\n}`;
|
const detailVisibleRuleContent = `// formData--详情页当前数据\nconsole.log(formData)\n// field--当前字段名\nconsole.log(field)\n// value--当前字段值\nconsole.log(value)\n// item/config--当前字段配置\nconsole.log(item, config)\n// 返回 true 显示当前字段，返回 false 隐藏当前字段\n({ formData, field, value, item, config, onlineUtils }) => {\r\n return formData.status === 'approved'\r\n}`;
|
const detailFormatRuleContent = `// formData--详情页当前数据\nconsole.log(formData)\n// field--当前字段名\nconsole.log(field)\n// value--当前字段值\nconsole.log(value)\n// item/config--当前字段配置\nconsole.log(item, config)\n// 返回格式化后的字段值\n({ formData, field, value, item, config, onlineUtils }) => {\r\n return value\r\n}`;
|
const tableRowReadonlyRuleContent = `// row--子表当前行数据\nconsole.log(row)\n// rowIndex--子表当前行下标\nconsole.log(rowIndex)\n// formData--当前表单数据\nconsole.log(formData)\n// onlineUtils--在线js工具类\n// 返回 true 时当前子表行只读，返回 false 时保持可编辑\n({ row, rowIndex, formData, onlineUtils }) => {\r\n return false\r\n}`;
|
const validateRuleContent = `// value--当前字段值\nconsole.log(value)\n// formData--当前表单数据\nconsole.log(formData)\n// field--当前字段名\nconsole.log(field)\n// rowIndex/rowData--当前子表行下标和行数据(仅在子表中可用)\nconsole.log(rowIndex, rowData)\n// item/config--当前字段配置\nconsole.log(item, config)\n// 返回 true 校验通过，返回 false 校验失败\n({ value, formData, field, rowIndex, rowData, item, config, onlineUtils }) => {\r\n return value === formData.confirmValue\r\n}`;
|
const exampleContent = `\n/**------------代码示例------------*/`;
|
const interfaceExampleContent = `\n/* 1.js请求接口代码示例 */\n var dataParam = {}; \n dataParam.tenantId = '' \n dataParam.origin = 'preview'; \n var paramList = [];\n var codingParam = { \n id: '', \n field: 'bianma', \n defaultValue: formData.bianma, \n fieldName: '编号', \n dataType: 'varchar', \n required: 0, \n }; \n paramList.push(codingParam);\n dataParam.paramList = paramList; \n onlineUtils.request('/api/system/DataInterface/484378895726936069/Actions/Preview', 'post', dataParam).then(res => { \n if (res.data && res.data.length >= 1) { \n console.log(res.data); \n onlineUtils.toast('编号' + formData.bianma + '已经存在请重新输入', 'error', 2000); \n } else {\n console.log('编码' + formData.bianma + '不存在', res.data); \n onlineUtils.toast('编号' + formData.bianma + '可正常输入', 'success', 2000); \n }\n });\n`;
|
const crossDomainContent = `\n/* 2.js里面请求第三方接口，以避免跨域 */\n fetch('https://api.vvhan.com/api/hotlist/toutiao', { \n method: 'get',\n }).then(response => response.json())\n .then(data => console.log(data))\n.catch(error => console.error('Error:', error)); \n`;
|
const getTonkenContent = `\n/* 3.如何获取TOKEN值 */ \n const userInfo = onlineUtils.getUserInfo();\n console.log(userInfo.token)`;
|
const parameterTransmissionContent = `\n/* 4.如何实现页签间参数传值 */ \n localStorage.setItem('demo', hash); \n localStorage.getItem('demo');\n`;
|
const subTableAssignDataContent = `\n/* 5.主表控件change事件写JS，给子表赋多行数据 */ \n console.log(data.id) \n \n let list = [ \n { \n F_GoodsCode: '公司财务人员', \n }, \n { \n F_GoodsCode: '开发部主管', \n }, \n { \n F_GoodsCode: '角色测试',\n }, \n ]\n \n console.log(list); \n setFormData('tableField102', list);\n`;
|
const dateComponentContent = `\n/* 6.日期组件怎么定义默认值是当天 */ \n var a = new Date().toLocaleDateString(); //获取当前日期\n var nowdate = (new Date(a) / 1000) * 1000; //把当前日期变成时间戳\n console.log(nowdate);\n setFormData('f_orderdate', nowdate); //设置某组件日期\n setFormData('f_salesmanname', 'run');\n setFormData('f_ordercode', 'run123'); \n`;
|
const stateContent = `\n/* 7.在onLoad事件中判断操作状态是：新增还是修改状态 */ \n var a = formData.id;\n if (!a) { \n console.log('新增状态'); \n } else {\n console.log('编辑状态'); \n } \n`;
|
const hourCountContent = `\n/* 8.计算开始日期和结束日期之间的小时数 */ \n console.log(data); \n // var a = data \n //setFormData('comInputField103', a)\n var d = data; \n var time = formData.dateField101;\n console.log(time);\n if (time != null) {\n if (d == null) {\n setFormData('comInputField103', null);\n } else { \n if (d >= time) { \n var rangeDateNum = (d - time) / (1000 * 3600); \n var formattedAmount = Math.round(rangeDateNum * 100) / 100;\n\n console.log(formattedAmount);\n console.log(rangeDateNum); \n setFormData('f_leave_hour', formattedAmount); \n } \n } \n } \n`;
|
const workflowBtnContent = `// flowInfo--流程信息\nconsole.log(flowInfo)\n// formData--表单数据\nconsole.log(formData)\n// taskInfo--任务节点信息\nconsole.log(taskInfo)\n`;
|
|
function onOpenChange(val) {
|
if (!val) return;
|
const content =
|
commonContent +
|
exampleContent +
|
interfaceExampleContent +
|
crossDomainContent +
|
getTonkenContent +
|
parameterTransmissionContent +
|
subTableAssignDataContent +
|
dateComponentContent +
|
stateContent +
|
hourCountContent;
|
if (props.type === 'form') {
|
state.currentContent = formContent + content;
|
return;
|
}
|
if (props.type === 'btnEvent') {
|
state.currentContent = btnEventContent + content;
|
return;
|
}
|
if (props.type === 'addBtnEvent') {
|
state.currentContent = addBtnEventContent + content;
|
return;
|
}
|
if (props.type === 'editBtnEvent') {
|
state.currentContent = editBtnEventContent + content;
|
return;
|
}
|
if (props.type === 'detailBtnEvent') {
|
state.currentContent = detailBtnEventContent + content;
|
return;
|
}
|
if (props.type === 'removeBtnEvent') {
|
state.currentContent = removeBtnEventContent + content;
|
return;
|
}
|
if (props.type === 'batchRemoveBtnEvent') {
|
state.currentContent = batchRemoveBtnEventContent + content;
|
return;
|
}
|
if (props.type === 'childTableBtn') {
|
state.currentContent = childTableBtnContent + content;
|
return;
|
}
|
if (props.type === 'afterOnload') {
|
state.currentContent = afterOnloadContent + content;
|
return;
|
}
|
if (props.type === 'rowStyle') {
|
state.currentContent = rowStyleContent;
|
return;
|
}
|
if (props.type === 'cellStyle') {
|
state.currentContent = cellStyleContent;
|
return;
|
}
|
if (props.type === 'btnEnableRule') {
|
state.currentContent = btnEnableContent + content;
|
return;
|
}
|
if (props.type === 'btnHeaderEnableRule') {
|
state.currentContent = btnHeaderEnableContent + content;
|
return;
|
}
|
if (props.type === 'detailCustomBtnEnableRule') {
|
state.currentContent = detailCustomBtnEnableContent + commonContent;
|
return;
|
}
|
if (props.type === 'customDetailData') {
|
state.currentContent = customDetailDataContent + commonContent;
|
return;
|
}
|
if (props.type === 'detailVisibleRule') {
|
state.currentContent = detailVisibleRuleContent + commonContent;
|
return;
|
}
|
if (props.type === 'detailFormatRule') {
|
state.currentContent = detailFormatRuleContent + commonContent;
|
return;
|
}
|
if (props.type === 'tableRowReadonlyRule') {
|
state.currentContent = tableRowReadonlyRuleContent + commonContent;
|
return;
|
}
|
if (props.type === 'validateRule') {
|
state.currentContent = validateRuleContent + commonContent;
|
return;
|
}
|
if (props.type === 'workflow') {
|
state.currentContent = workflowBtnContent + content;
|
return;
|
}
|
state.currentContent = formFieldContent + content;
|
}
|
</script>
|
|
<template>
|
<a-popover overlay-class-name="script-demo-popover" @open-change="onOpenChange">
|
<template #title>
|
<div class="script-demo-popover-title">参数介绍及使用示例</div>
|
</template>
|
<template #content>
|
<div class="script-demo-popover-main" :style="{ height: editorHeight }">
|
<MonacoEditor :options="editorOptions" v-model="currentContent" />
|
</div>
|
</template>
|
<span class="link-text">参数介绍及使用示例</span>
|
</a-popover>
|
</template>
|
|
<style lang="scss">
|
.script-demo-popover {
|
.script-demo-popover-title {
|
padding: 6px 0;
|
font-size: 16px;
|
}
|
|
.script-demo-popover-main {
|
width: 430px;
|
}
|
}
|
</style>
|
