import { titleCase } from '@/utils/index' import { trigger } from './config' // 文件大小设置 const units = { KB: '1024', MB: '1024 / 1024', GB: '1024 / 1024 / 1024', } /** * @name: 生成js需要的数据 * @description: 生成js需要的数据 * @param {*} conf * @param {*} type 弹窗或表单 * @return {*} */ export function makeUpJs(conf, type) { conf = JSON.parse(JSON.stringify(conf)) const dataList = [] const ruleList = [] const optionsList = [] const propsList = [] const methodList = [] const uploadVarList = [] conf.fields.forEach((el) => { buildAttributes( el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList ) }) const script = buildexport( conf, type, dataList.join('\n'), ruleList.join('\n'), optionsList.join('\n'), uploadVarList.join('\n'), propsList.join('\n'), methodList.join('\n') ) return script } /** * @name: 生成参数 * @description: 生成参数,包括表单数据表单验证数据,多选选项数据,上传数据等 * @return {*} */ function buildAttributes( el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList ){ buildData(el, dataList) buildRules(el, ruleList) if (el.options && el.options.length) { buildOptions(el, optionsList) if (el.dataType === 'dynamic') { const model = `${el.vModel}Options` const options = titleCase(model) buildOptionMethod(`get${options}`, model, methodList) } } if (el.props && el.props.props) { buildProps(el, propsList) } if (el.action && el.tag === 'el-upload') { uploadVarList.push( ` // 上传请求路径 const ${el.vModel}Action = ref('${el.action}') // 上传文件列表 const ${el.vModel}fileList = ref([])` ) methodList.push(buildBeforeUpload(el)) if (!el['auto-upload']) { methodList.push(buildSubmitUpload(el)) } } if (el.children) { el.children.forEach((el2) => { buildAttributes( el2, dataList, ruleList, optionsList, methodList, propsList, uploadVarList ) }) } } /** * @name: 生成表单数据formData * @description: 生成表单数据formData * @param {*} conf * @param {*} dataList 数据列表 * @return {*} */ function buildData(conf, dataList) { if (conf.vModel === undefined) return let defaultValue if (typeof conf.defaultValue === 'string' && !conf.multiple) { defaultValue = `'${conf.defaultValue}'` } else { defaultValue = `${JSON.stringify(conf.defaultValue)}` } dataList.push(`${conf.vModel}: ${defaultValue},`) } /** * @name: 生成表单验证数据rule * @description: 生成表单验证数据rule * @param {*} conf * @param {*} ruleList 验证数据列表 * @return {*} */ function buildRules(conf, ruleList) { if (conf.vModel === undefined) return const rules = [] if (trigger[conf.tag]) { if (conf.required) { const type = Array.isArray(conf.defaultValue) ? "type: 'array'," : '' let message = Array.isArray(conf.defaultValue) ? `请至少选择一个${conf.vModel}` : conf.placeholder if (message === undefined) message = `${conf.label}不能为空` rules.push( `{ required: true, ${type} message: '${message}', trigger: '${ trigger[conf.tag] }' }` ) } if (conf.regList && Array.isArray(conf.regList)) { conf.regList.forEach((item) => { if (item.pattern) { rules.push( `{ pattern: new RegExp(${item.pattern}), message: '${ item.message }', trigger: '${trigger[conf.tag]}' }` ) } }) } ruleList.push(`${conf.vModel}: [${rules.join(',')}],`) } } /** * @name: 生成选项数据 * @description: 生成选项数据,单选多选下拉等 * @param {*} conf * @param {*} optionsList 选项数据列表 * @return {*} */ function buildOptions(conf, optionsList) { if (conf.vModel === undefined) return if (conf.dataType === 'dynamic') { conf.options = [] } const str = `const ${conf.vModel}Options = ref(${JSON.stringify(conf.options)})` optionsList.push(str) } /** * @name: 生成方法 * @description: 生成方法 * @param {*} methodName 方法名 * @param {*} model * @param {*} methodList 方法列表 * @return {*} */ function buildOptionMethod(methodName, model, methodList) { const str = `function ${methodName}() { // TODO 发起请求获取数据 ${model}.value }` methodList.push(str) } /** * @name: 生成表单组件需要的props设置 * @description: 生成表单组件需要的props设置,如;级联组件 * @param {*} conf * @param {*} propsList * @return {*} */ function buildProps(conf, propsList) { if (conf.dataType === 'dynamic') { conf.valueKey !== 'value' && (conf.props.props.value = conf.valueKey) conf.labelKey !== 'label' && (conf.props.props.label = conf.labelKey) conf.childrenKey !== 'children' && (conf.props.props.children = conf.childrenKey) } const str = ` // props设置 const ${conf.vModel}Props = ref(${JSON.stringify(conf.props.props)})` propsList.push(str) } /** * @name: 生成上传组件的相关内容 * @description: 生成上传组件的相关内容 * @param {*} conf * @return {*} */ function buildBeforeUpload(conf) { const unitNum = units[conf.sizeUnit] let rightSizeCode = '' let acceptCode = '' const returnList = [] if (conf.fileSize) { rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.fileSize} if(!isRightSize){ proxy.$modal.msgError('文件大小超过 ${conf.fileSize}${conf.sizeUnit}') }` returnList.push('isRightSize') } if (conf.accept) { acceptCode = `let isAccept = new RegExp('${conf.accept}').test(file.type) if(!isAccept){ proxy.$modal.msgError('应该选择${conf.accept}类型的文件') }` returnList.push('isAccept') } const str = ` /** * @name: 上传之前的文件判断 * @description: 上传之前的文件判断,判断文件大小文件类型等 * @param {*} file * @return {*} */ function ${conf.vModel}BeforeUpload(file) { ${rightSizeCode} ${acceptCode} return ${returnList.join('&&')} }` return returnList.length ? str : '' } /** * @name: 生成提交表单方法 * @description: 生成提交表单方法 * @param {Object} conf vModel 表单ref * @return {*} */ function buildSubmitUpload(conf) { const str = `function submitUpload() { this.$refs['${conf.vModel}'].submit() }` return str } /** * @name: 组装js代码 * @description: 组装js代码方法 * @return {*} */ function buildexport( conf, type, data, rules, selectOptions, uploadVar, props, methods ) { let str = ` const { proxy } = getCurrentInstance() const ${conf.formRef} = ref() const data = reactive({ ${conf.formModel}: { ${data} }, ${conf.formRules}: { ${rules} } }) const {${conf.formModel}, ${conf.formRules}} = toRefs(data) ${selectOptions} ${uploadVar} ${props} ${methods} ` if(type === 'dialog') { str += ` // 弹窗设置 const dialogVisible = defineModel() // 弹窗确认回调 const emit = defineEmits(['confirm']) /** * @name: 弹窗打开后执行 * @description: 弹窗打开后执行方法 * @return {*} */ function onOpen(){ } /** * @name: 弹窗关闭时执行 * @description: 弹窗关闭方法,重置表单 * @return {*} */ function onClose(){ ${conf.formRef}.value.resetFields() } /** * @name: 弹窗取消 * @description: 弹窗取消方法 * @return {*} */ function close(){ dialogVisible.value = false } /** * @name: 弹窗表单提交 * @description: 弹窗表单提交方法 * @return {*} */ function handelConfirm(){ ${conf.formRef}.value.validate((valid) => { if (!valid) return // TODO 提交表单 close() // 回调父级组件 emit('confirm') }) } ` } else { str += ` /** * @name: 表单提交 * @description: 表单提交方法 * @return {*} */ function submitForm() { ${conf.formRef}.value.validate((valid) => { if (!valid) return // TODO 提交表单 }) } /** * @name: 表单重置 * @description: 表单重置方法 * @return {*} */ function resetForm() { ${conf.formRef}.value.resetFields() } ` } return str }