22 changed files with 2748 additions and 726 deletions
@ -0,0 +1,499 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-12 15:08:07 |
|||
@ 备注: 表单画布 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import FormGroup from './formGroup.vue' |
|||
import { FormData,FormList,FormDataStyle } from '@/api/DesignForm/types' |
|||
import { getRequest } from '@/api/DesignForm' |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { |
|||
constGetControlByName, |
|||
constSetFormOptions, |
|||
constFormBtnEvent, |
|||
constControlChange, |
|||
constFormProps, |
|||
appendOrRemoveStyle |
|||
} from '@/api/DesignForm/utils' |
|||
import formatResult from '@/utils/DesignForm/formatResult' |
|||
import formChangeValue from '@/utils/DesignForm/formChangeValue' |
|||
import { jsonParseStringify } from '@/utils/DesignForm' |
|||
|
|||
|
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
formData: FormData |
|||
type?: number // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
|||
disabled?: boolean // 禁用表单提交 |
|||
requestUrl?: string // 编辑数据请求url |
|||
beforeRequest?: Function // 请求编辑数据前参数处理方法，可对请求参数处理 |
|||
afterResponse?: Function | string // 请求数据加载完成后数据处理方法，可对返回数据处理 |
|||
addUrl?: string // 表单数据新增提交保存url |
|||
editUrl?: string // 表单数据修改保存提交url |
|||
beforeSubmit?: Function | string // 表单提交前数据处理，可对提交数据处理，新增和保存都会触发 |
|||
afterSubmit?: Function // 表单提交后，默认提示提交结果，可return false阻止提示 |
|||
value?: { [key: string]: any } // 表单初始值，同setValue |
|||
options?: { [key: string]: any } // 表单组件选项，同setOptions |
|||
dict?: object // 固定匹配的字典 |
|||
isSearch?: boolean // 列表里作为筛选使用 |
|||
}>(), |
|||
{ |
|||
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
|||
formData: () => { |
|||
return { |
|||
list: [], |
|||
form: {}, |
|||
config: { |
|||
style:'' |
|||
} |
|||
} |
|||
}, |
|||
dict: () => { |
|||
return {} |
|||
}, |
|||
isSearch: false, |
|||
issave:{ |
|||
type:Boolean, |
|||
default:true |
|||
}, |
|||
} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'btnClick', type: string): void |
|||
(e: 'change', val: any): void // 表单组件值发生变化时 |
|||
(e: 'update:issave', type: boolean): void |
|||
}>() |
|||
const route = useRoute() |
|||
const router = useRouter() |
|||
|
|||
const loading = ref(false) |
|||
|
|||
let timer = 0 |
|||
let eventName = '' |
|||
let getValueEvent = '' |
|||
// 注册window事件 |
|||
const setWindowEvent = (bool?: boolean) => { |
|||
if (props.formData.list.length > 0) { |
|||
const formName = props.formData.form?.name |
|||
if (!formName) { |
|||
// 导出.vue时，name可以没有 |
|||
return |
|||
} |
|||
eventName = `get${formName}ControlByName` |
|||
getValueEvent = `get${formName}ValueByName` |
|||
if (formName && (!window[eventName as any] || !bool)) { |
|||
// 根据name获取当前数据项 |
|||
// @ts-ignore |
|||
window[eventName] = (name: string) => { |
|||
return getNameForEach(props.formData.list, name) |
|||
} |
|||
// 根据name获取当前项的值 |
|||
// @ts-ignore |
|||
window[getValueEvent] = (name: string) => { |
|||
return model.value[name] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
watch( |
|||
() => props.formData, |
|||
() => { |
|||
console.log("监听数据----->1",props.formData) |
|||
emits('update:issave', false) |
|||
}, |
|||
{ deep: true } |
|||
) |
|||
watch( |
|||
() => props.formData.config, |
|||
() => { |
|||
if (timer < 2) { |
|||
setWindowEvent() // 简单判断下，这里不是每次都更新 |
|||
} |
|||
timer++ |
|||
appendRemoveStyle(true) // 更新样式 |
|||
}, |
|||
{ deep: true } |
|||
) |
|||
setWindowEvent() |
|||
// 设置全局事件结束 |
|||
const resultDict = ref({}) |
|||
// 处理表单值开始 |
|||
const model = ref<any>({}) |
|||
// 获取表单初始model值 |
|||
const getInitModel = () => { |
|||
const obj = {} |
|||
forEachGetFormModel(props.formData.list, obj) |
|||
model.value = obj |
|||
} |
|||
watch( |
|||
() => props.formData.list, |
|||
() => { |
|||
// formData从接口获取时 |
|||
getInitModel() |
|||
} |
|||
) |
|||
// 从表单数据里提取表单所需的model |
|||
const forEachGetFormModel = (list: FormList[], obj: any) => { |
|||
list.forEach((item: any) => { |
|||
if (['table', 'flex'].includes(item.type)) { |
|||
obj[item.name] = jsonParseStringify(item.tableData) |
|||
} else if (['grid', 'tabs'].includes(item.type)) { |
|||
item.columns.forEach((col: any) => { |
|||
forEachGetFormModel(col.list, obj) |
|||
}) |
|||
} else if (['card', 'div'].includes(item.type)) { |
|||
forEachGetFormModel(item.list, obj) |
|||
} else { |
|||
const excludeType = ['title', 'divider', 'txt', 'button'] |
|||
if (excludeType.indexOf(item.type) === -1) { |
|||
obj[item.name] = jsonParseStringify(item.control.modelValue) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 表单组件值改变事件 tProp为子表格相关 |
|||
provide(constControlChange, ({ key, value, data, tProp }: any) => { |
|||
if (key) { |
|||
if (!tProp) { |
|||
// 表格和弹性布局不是这里更新，只触change |
|||
model.value[key] = value |
|||
} |
|||
// 支持在线方式数据处理，如A组件值改变时，可自动修改B组件的值，可参考请假流程自动时长计算 |
|||
if (props.formData.events?.change) { |
|||
model.value = props.formData.events.change(key, model.value) |
|||
} |
|||
const onFormChange = props.formData.events?.change |
|||
if (onFormChange) { |
|||
if (typeof onFormChange === 'function') { |
|||
model.value = onFormChange(key, model.value) |
|||
} else { |
|||
model.value = formChangeValue(key, model.value, onFormChange) |
|||
} |
|||
} |
|||
// 当表格和弹性内的字段和外面字段冲突时，可通过tProps区分 |
|||
emits('change', { key, value, model: model.value, data, tProp }) |
|||
} |
|||
}) |
|||
const dictForm = computed(() => { |
|||
const storage = window.localStorage.getItem('akFormDict') |
|||
let storageDict = {} |
|||
if (storage) { |
|||
storageDict = JSON.parse(storage) |
|||
} |
|||
// 全局的、当前表单配置的以及接口返回的 |
|||
return Object.assign({}, storageDict, props.dict, resultDict.value) |
|||
}) |
|||
// 表单参数 |
|||
const formProps = computed(() => { |
|||
return { |
|||
model: model.value, |
|||
type: props.type, |
|||
hideField: props.formData.config?.hideField as [], |
|||
showColon: props.formData.form.showColon, |
|||
dict: dictForm.value |
|||
} |
|||
}) |
|||
provide(constFormProps, formProps) |
|||
|
|||
// 提供一个方法，用于根据name从formData.list里查找数据 |
|||
const getNameForEach = (data: any, name: string) => { |
|||
let temp = {} |
|||
for (const key in data) { |
|||
const dataKey = data[key] |
|||
if (dataKey.name === name) { |
|||
return dataKey |
|||
} |
|||
if (['grid', 'tabs'].includes(dataKey.type)) { |
|||
dataKey.columns.forEach((co: any) => { |
|||
temp = getNameForEach(co.list, name) |
|||
}) |
|||
} |
|||
if (['card', 'div'].includes(dataKey.type)) { |
|||
temp = getNameForEach(dataKey.list, name) |
|||
} |
|||
} |
|||
return temp |
|||
} |
|||
const getControlByName = (name: string) => { |
|||
return getNameForEach(props.formData.list, name) |
|||
} |
|||
provide(constGetControlByName, getControlByName) |
|||
// 表单检验方法 |
|||
const ruleForm = ref() |
|||
const validate = (callback: any) => { |
|||
ruleForm.value.validate((valid: boolean, fields: any) => { |
|||
let fieldValue = fields |
|||
if (valid) { |
|||
// 校验通过，返回当前表单的值 |
|||
fieldValue = getValue() |
|||
} |
|||
callback(valid, fieldValue) |
|||
}) |
|||
} |
|||
// 提供一个取值的方法 |
|||
const getValue = (filter?: boolean) => { |
|||
if (filter) { |
|||
const obj: any = {} |
|||
for (const key in model.value) { |
|||
// eslint-disable-next-line no-prototype-builtins |
|||
if (model.value.hasOwnProperty(key)) { |
|||
const val = (model.value as any)[key] |
|||
if (!/^\s*$/.test(val)) { |
|||
obj[key] = val |
|||
} |
|||
} |
|||
} |
|||
return obj |
|||
} else { |
|||
return model.value |
|||
} |
|||
} |
|||
// 对表单设置初始值 |
|||
const setValue = (obj: { [key: string]: any }, filter?: boolean) => { |
|||
// 分两种，false时将obj所有值合并到model，当obj有某些值不存于表单中，也会合并到model，当提交表单也会提交此值 |
|||
// true则过滤没用的值，即存在当前表单的才合并 |
|||
if (filter) { |
|||
for (const key in obj) { |
|||
if (model.value[key] !== undefined) { |
|||
model.value[key] = obj[key] |
|||
} |
|||
} |
|||
} else { |
|||
model.value = Object.assign({}, model.value, jsonParseStringify(obj)) // 防止列表直接使用set方法对弹窗表单编辑，当重置表单时当前行数据被清空 |
|||
} |
|||
} |
|||
// 对表单选择项快速设置 |
|||
const setFormOptions = ref({}) |
|||
provide(constSetFormOptions, setFormOptions) |
|||
const setOptions = (obj: { [key: string]: string[] }) => { |
|||
setFormOptions.value = obj |
|||
} |
|||
// 追加移除style样式 |
|||
const appendRemoveStyle = (type?: boolean) => { |
|||
try { |
|||
const { |
|||
config:{ style } |
|||
} = props.formData |
|||
appendOrRemoveStyle('formStyle', style || '', type) |
|||
} catch (e) { |
|||
/* empty */ |
|||
} |
|||
} |
|||
|
|||
// 按钮组件事件 |
|||
provide(constFormBtnEvent, (obj: any) => { |
|||
emits('btnClick', obj.key) |
|||
if ([3, 4, 5].includes(props.type)) { |
|||
return ElMessage.error('当前模式不能提交表单') |
|||
} |
|||
switch (obj.key) { |
|||
case 'submit': |
|||
submit() // 提交 |
|||
break |
|||
case 'reset': |
|||
resetFields() // 重置 |
|||
break |
|||
case 'cancel': // 取消返回， |
|||
router.go(-1) //这个刷新后可能会失败 |
|||
break |
|||
} |
|||
}) |
|||
// 获取表单数据，编辑时，外部调用 |
|||
const getData = (params = {}) => { |
|||
const requestUrl = props.formData.config?.requestUrl || props.requestUrl |
|||
if (props.type === 5 || !requestUrl || props.isSearch) { |
|||
console.error('执行了获取数据方法，但配置有误！') |
|||
return |
|||
} |
|||
loading.value = true |
|||
const newParams: any = params |
|||
// 同时可使用props或是events里的事件，根据使用使用其中一种即可 |
|||
let newParams2 |
|||
const beforeRequest = props.formData.events?.beforeRequest |
|||
if (typeof beforeRequest === 'function') { |
|||
newParams2 = beforeRequest(newParams, route) |
|||
} |
|||
if (typeof props.beforeRequest === 'function') { |
|||
newParams2 = props.beforeRequest(newParams, route) |
|||
} |
|||
if (newParams2 === false) { |
|||
// 停止数据请求 |
|||
return |
|||
} |
|||
getRequest(requestUrl, newParams2 ?? newParams) |
|||
.then(res => { |
|||
// console.log(res) |
|||
loading.value = false |
|||
const result = res.data |
|||
if (result) { |
|||
let formatRes: any = result |
|||
// 比较适用通用表单，保存在服务端 |
|||
const afterResponse = props.formData.events?.afterResponse |
|||
if (typeof afterResponse === 'string' && afterResponse) { |
|||
formatRes = formatResult(result, afterResponse) |
|||
} else if (typeof afterResponse === 'function') { |
|||
formatRes = afterResponse(result) ?? result |
|||
} |
|||
// 比较适用于导出vue文件 |
|||
if (typeof props.afterResponse === 'string' && props.afterResponse) { |
|||
formatRes = formatResult(result, props.afterResponse) |
|||
} else if (typeof props.afterResponse === 'function') { |
|||
formatRes = props.afterResponse(result) ?? result |
|||
} |
|||
if (formatRes === false) { |
|||
return |
|||
} |
|||
setValue(formatRes.result || formatRes) |
|||
nextTick(() => { |
|||
// 将dict保存，可用于从接口中设置表单组件options。 |
|||
if (formatRes.dict && Object.keys(formatRes.dict).length) { |
|||
resultDict.value = formatRes.dict |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
.catch((res: any) => { |
|||
loading.value = false |
|||
return ElMessage.error(res.message) |
|||
}) |
|||
} |
|||
const submit = (params = {}) => { |
|||
const addUrl = props.formData.config?.addUrl || props.addUrl |
|||
const editUrl = props.formData.config?.editUrl || props.editUrl |
|||
const apiUrl = props.type === 1 ? addUrl : editUrl |
|||
if (props.isSearch || !apiUrl || loading.value) { |
|||
if (!props.isSearch && !apiUrl) { |
|||
console.error( |
|||
new Error('请在表单设计处配置接口事件url或选择数据源或设置props') |
|||
) |
|||
} |
|||
// 列表里作为筛选时，不提交表单 |
|||
return |
|||
} |
|||
validate((valid: boolean, fields: any) => { |
|||
if (valid) { |
|||
const formatParams = Object.assign({}, fields, params) |
|||
let submitParams |
|||
const beforeSubmit = props.formData.events?.beforeSubmit |
|||
if (beforeSubmit) { |
|||
if (typeof beforeSubmit === 'function') { |
|||
submitParams = beforeSubmit(formatParams, route) |
|||
} else { |
|||
submitParams = formatResult(formatParams, beforeSubmit) |
|||
} |
|||
} |
|||
if (props.beforeSubmit && typeof props.beforeSubmit === 'string') { |
|||
submitParams = formatResult(formatParams, props.beforeSubmit) |
|||
} else if (typeof props.beforeSubmit === 'function') { |
|||
submitParams = props.beforeSubmit(formatParams, route) |
|||
} |
|||
if (submitParams === false) { |
|||
return |
|||
} |
|||
loading.value = true |
|||
// 提交保存表单 |
|||
getRequest(apiUrl, submitParams ?? formatParams) |
|||
.then((res: any) => { |
|||
afterSubmit('success', res) |
|||
}) |
|||
.catch(res => { |
|||
afterSubmit('fail', res) |
|||
}) |
|||
} else { |
|||
// 没通过校验 |
|||
afterSubmit('validate', fields) |
|||
} |
|||
}) |
|||
} |
|||
// 不管成功失败，有事件时都需要执行回调 |
|||
const afterSubmit = (type: string, res: any) => { |
|||
const afterSubmit = props.formData.events?.afterSubmit |
|||
let notReturn |
|||
if (typeof afterSubmit === 'function') { |
|||
notReturn = afterSubmit(type, res) |
|||
} else if (typeof props.afterSubmit === 'function') { |
|||
notReturn = props.afterSubmit(type, res) |
|||
} |
|||
loading.value = false |
|||
// 不管结果，重置表单，防再次打开时保留上一次的值 |
|||
// resetFields() |
|||
if (notReturn === false) { |
|||
// 有返回false时则不提示 |
|||
return |
|||
} |
|||
if (type === 'success') { |
|||
ElMessage.success(res.message || '保存成功！') |
|||
} else if (type === 'fail') { |
|||
ElMessage.error(res.message || '保存失败！') |
|||
} |
|||
} |
|||
// 表单初始值 |
|||
watch( |
|||
() => props.value, |
|||
(v: any) => { |
|||
v && setValue(v) |
|||
}, |
|||
{ |
|||
immediate: true |
|||
} |
|||
) |
|||
// 表单options |
|||
watch( |
|||
() => props.options, |
|||
(v: any) => { |
|||
v && setOptions(v) |
|||
} |
|||
) |
|||
// ------------------------数据处理结束------------------------ |
|||
// 重置表单方法 |
|||
const resetFields = () => { |
|||
ruleForm.value.resetFields() |
|||
// setValue(Object.assign(model.value, obj || {})) // 这才能清空组件显示的值 |
|||
} |
|||
onMounted(() => { |
|||
getInitModel() |
|||
nextTick(() => { |
|||
appendRemoveStyle(true) |
|||
}) |
|||
}) |
|||
onUnmounted(() => { |
|||
if (eventName) { |
|||
// @ts-ignore |
|||
window[eventName] = '' |
|||
} |
|||
appendRemoveStyle() |
|||
}) |
|||
defineExpose({ |
|||
setOptions, |
|||
setValue, |
|||
getValue, |
|||
validate, |
|||
resetFields, |
|||
getData, |
|||
submit |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div v-loading="loading"> |
|||
<el-form |
|||
v-bind="formData.form" |
|||
ref="ruleForm" |
|||
:model="model as any" |
|||
:disabled="disabled || type === 3" |
|||
class="add-form" |
|||
:class="{ |
|||
'design-form': type === 5, |
|||
'detail-form': type === 3 || type === 4 |
|||
}" |
|||
> |
|||
<FormGroup :data="formData.list" /> |
|||
<slot></slot> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,437 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-14 08:46:51 |
|||
@ 备注: 表单组 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { computed, watch, inject, onUnmounted } from 'vue' |
|||
import Draggable from 'vuedraggable-es' |
|||
import FormItem from './formItem.vue' |
|||
import ChildTable from './childTable.vue' |
|||
import Tooltips from '@/components/DesignForm/tooltip.vue' |
|||
import FlexBox from './flexBox.vue' |
|||
import { useDesignFormStore } from '@/store/DesignForm/designForm' |
|||
import { FormList } from '@/api/DesignForm/types' |
|||
import { |
|||
constFormBtnEvent, |
|||
constFormProps |
|||
} from '@/api/DesignForm/utils' |
|||
import { Md5 } from 'ts-md5'; |
|||
import { jsonParseStringify } from '@/utils/DesignForm' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList[] |
|||
}>(), |
|||
{ |
|||
data: () => { |
|||
return [] |
|||
} |
|||
} |
|||
) |
|||
const store = useDesignFormStore() as any |
|||
const formProps = inject(constFormProps, {}) as any |
|||
const type = computed(() => { |
|||
console.log("11111",formProps.value.type) |
|||
return formProps.value.type |
|||
}) |
|||
const state = reactive({ |
|||
clone: true, // 允许clone |
|||
gridAdd: false |
|||
}) |
|||
const dataList = ref<any>(props.data) |
|||
watch( |
|||
() => props.data, |
|||
(v: FormList[]) => { |
|||
dataList.value = v |
|||
} |
|||
) |
|||
const activeKey = computed(() => { |
|||
return store.activeKey |
|||
}) |
|||
|
|||
// 不能嵌套 |
|||
const notNested = (type: string) => { |
|||
const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card'] |
|||
return controlType.includes(type) |
|||
} |
|||
// 删除或复制 |
|||
const click = (action: string, index: number, item?: any) => { |
|||
if (type.value !== 5) { |
|||
return // 非设计模式 |
|||
} |
|||
if (action === 'clone') { |
|||
const key = item.type + new Date().getTime().toString() |
|||
const newItem = jsonParseStringify(item) |
|||
dataList.value.splice(index, 0, Object.assign(newItem, { name: key })) |
|||
} else if (action === 'del') { |
|||
dataList.value.splice(index, 1) |
|||
// 清空右侧栏信息 |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
} else if (action === 'gridAdd') { |
|||
item.columns.push({ |
|||
list: [], |
|||
attr: { span: 12 } |
|||
}) |
|||
} else if (action === 'delGridChild') { |
|||
item.splice(index, 1) |
|||
} |
|||
} |
|||
const draggableAdd = (evt: any) => { |
|||
if (type.value !== 5) { |
|||
return // 非设计模式 |
|||
} |
|||
const newIndex = evt.newIndex |
|||
const key = new Date().getTime().toString() |
|||
const obj: any = dataList.value[newIndex] |
|||
const isNested = evt.target && evt.target.getAttribute('data-type') // 不能嵌套 |
|||
if (isNested === 'not-nested' && notNested(obj.type)) { |
|||
dataList.value.splice(newIndex, 1) |
|||
return |
|||
} |
|||
if (!obj) { |
|||
return |
|||
} |
|||
const label = obj.label || obj.item.label |
|||
delete obj.label |
|||
delete obj.icon |
|||
let objectItem = {} |
|||
// 不需要添加item的项 |
|||
const notNeedItem = [ |
|||
'txt', |
|||
'title', |
|||
'button', |
|||
'table', |
|||
'grid', |
|||
'tabs', |
|||
'flex', |
|||
'div' |
|||
] |
|||
if (!notNeedItem.includes(obj.type)) { |
|||
objectItem = { |
|||
item: { |
|||
label: label |
|||
} |
|||
} |
|||
} |
|||
// 不需要name的组件 |
|||
let nameObj = {} |
|||
const notNeedName = [ |
|||
'txt', |
|||
'title', |
|||
'button', |
|||
'grid', |
|||
'tabs', |
|||
'divider', |
|||
'div', |
|||
'card' |
|||
] |
|||
if (!notNeedName.includes(obj.type) && !obj.name) { |
|||
nameObj = { |
|||
name: obj.type + key |
|||
} |
|||
} |
|||
Object.assign(obj, nameObj, objectItem) |
|||
groupClick(obj) |
|||
} |
|||
const getGroupName = (item: any) => { |
|||
if (item.name) { |
|||
return item.name |
|||
} else { |
|||
let md5Object:any = new Md5() |
|||
md5Object.appendAsciiStr(JSON.stringify(item)) |
|||
let md5Str = md5Object.end() |
|||
return md5Str |
|||
} |
|||
} |
|||
// 点击激活当前 |
|||
const groupClick = (item: any, ele?: string) => { |
|||
// 设计模式下才执行 |
|||
if (type.value !== 5) { |
|||
return |
|||
} |
|||
if (ele) { |
|||
item.type = ele |
|||
} |
|||
store.setActiveKey(getGroupName(item)) |
|||
store.setControlAttr(item) |
|||
// grid时显示添加列按钮 |
|||
state.gridAdd = item.type === 'grid' |
|||
state.clone = !notNested(item.type) |
|||
} |
|||
// 返回栅格宽度 |
|||
const getFormItemStyle = (ele: FormList) => { |
|||
if (ele.config?.span === 0) { |
|||
return { width: 'auto', margin: '0 5px' } |
|||
} |
|||
if (ele.config && ele.config.span) { |
|||
return { width: (ele.config.span / 24) * 100 + '%' } |
|||
} |
|||
} |
|||
// 根据关联条件显示隐藏当前项 |
|||
const linksShow = (el: FormList, index: number) => { |
|||
// 当前项设置了关联条件，当关联主体的值等于当前组件设定的值时 |
|||
if (!el.config) { |
|||
return true |
|||
} |
|||
const key = el.config.linkKey |
|||
const value = el.config.linkValue |
|||
const linkResult = el.config.linkResult |
|||
if (key && value && type.value !== 5) { |
|||
const Fn = new Function('$', `return (${value})`) |
|||
const pass = Fn(formProps.value.model) |
|||
if (linkResult === 'disabled') { |
|||
// 设置为disabled后返回显示状态 |
|||
dataList.value[index].control.disabled = pass |
|||
return true |
|||
} else { |
|||
return pass |
|||
} |
|||
} |
|||
return true |
|||
} |
|||
// 根据表单设置不显示指定字段 |
|||
const linksIf = (obj: FormList) => { |
|||
const { type } = formProps.value |
|||
const { config: { disabledAdd, disabledEdit, disabledDetail } = {} } = obj |
|||
if (type === 1) { |
|||
if (disabledAdd) { |
|||
// 编辑页 || 新增页 |
|||
return false // 不显示 |
|||
} |
|||
} else if (type === 2) { |
|||
// 编辑 |
|||
if (disabledEdit) { |
|||
return false |
|||
} |
|||
} else if (type === 4 || type === 3) { |
|||
// 查看 |
|||
if (disabledDetail) { |
|||
return false |
|||
} |
|||
} |
|||
// 如果当前字段的name值存在于表单数据的vIf中，则不显示 |
|||
const vIf: string | string[] = formProps.value.hideField |
|||
if (vIf?.length > 0 && obj.name) { |
|||
return vIf.indexOf(obj.name) === -1 // 存在时返回false隐藏 |
|||
} |
|||
return true |
|||
} |
|||
//按钮点击事件 |
|||
const injectBtnEvent:any = inject(constFormBtnEvent) |
|||
const clickBtn = (control: any) => { |
|||
// 0: '提交表单', |
|||
// 1: '重置表单', |
|||
// 2: '取消返回', |
|||
// 3: '无动作(自定义)' |
|||
if (type.value !== 5) { |
|||
// 非设计模式才触发事件 |
|||
injectBtnEvent && injectBtnEvent(control) |
|||
} |
|||
} |
|||
onUnmounted(() => { |
|||
// console.log('formGroup onUnmounted') |
|||
dataList.value = {} |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}) |
|||
</script> |
|||
<template> |
|||
<draggable |
|||
itemKey="id" |
|||
:list="dataList" |
|||
name="fade" |
|||
class="drag" |
|||
v-bind="{ |
|||
group: 'form', |
|||
ghostClass: 'ghost', |
|||
animation: 200, |
|||
handle: '.drag-move', |
|||
disabled: type !== 5 |
|||
}" |
|||
@add="draggableAdd" |
|||
> |
|||
<template #item="{ element, index }"> |
|||
<div |
|||
class="group" |
|||
:class="{ |
|||
['group-' + element.type]: true, |
|||
active: activeKey === getGroupName(element) |
|||
}" |
|||
:style="getFormItemStyle(element)" |
|||
@click.stop="groupClick(element)" |
|||
v-show="linksShow(element, index)" |
|||
v-if="linksIf(element)" |
|||
> |
|||
<template v-if="element.type === 'tabs'"> |
|||
<div class="form-tabs"> |
|||
<el-tabs |
|||
v-bind="element.control" |
|||
:class="[element.config?.className]" |
|||
> |
|||
<el-tab-pane |
|||
v-for="(item, tIndex) in element.columns" |
|||
:label="item.label" |
|||
:key="tIndex" |
|||
> |
|||
<form-group :data="item.list" data-type="not-nested" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'title'"> |
|||
<div |
|||
class="title" |
|||
:class="[element.config.className]" |
|||
v-bind="element.control" |
|||
> |
|||
<span v-html="element.control.modelValue"></span> |
|||
<Tooltips |
|||
:content="element.config.help" |
|||
v-if="element.config.help" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'txt'"> |
|||
<div |
|||
v-bind="element.control" |
|||
:class="[element.config.className]" |
|||
v-html="element.control.modelValue" |
|||
></div> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'table'"> |
|||
<div class="form-table" v-if="type === 5"> |
|||
<form-group :data="element.list" data-type="not-nested" /> |
|||
</div> |
|||
<child-table v-else :data="element" /> |
|||
</template> |
|||
|
|||
|
|||
<template v-else-if="element.type === 'grid'"> |
|||
<el-row class="form-row" :class="[element.className]"> |
|||
<el-col |
|||
class="form-col" |
|||
:class="{ |
|||
'active-col': activeKey === getGroupName(col), |
|||
[col.className]: col.className |
|||
}" |
|||
v-bind="col.attr" |
|||
v-for="(col, i) in element.columns" |
|||
:key="i" |
|||
@click.stop="groupClick(col, 'gridChild')" |
|||
> |
|||
<form-group :data="col.list" data-type="not-nested" /> |
|||
<div class="drag-control" v-if="type === 5"> |
|||
<div class="item-control"> |
|||
<i |
|||
class="icon-del" |
|||
@click.stop=" |
|||
click('delGridChild', i as number, element.columns) |
|||
" |
|||
></i> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'card'"> |
|||
<el-collapse model-value="1"> |
|||
<el-collapse-item :title="element.item.label" name="1"> |
|||
<template #title v-if="element.help"> |
|||
{{ element.item.label }} |
|||
<Tooltips :content="element.help" /> |
|||
</template> |
|||
<form-group :data="element.list" data-type="not-nested" /> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'divider'"> |
|||
<el-divider v-bind="element.control" |
|||
>{{ element.item && element.item.label }} |
|||
</el-divider> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'div'"> |
|||
<div |
|||
class="div-layout" |
|||
v-bind="element.control" |
|||
:class="{ |
|||
[element.className]: element.className, |
|||
inline: element.config?.inline, |
|||
[element.config?.textAlign]: element.config?.textAlign |
|||
}" |
|||
> |
|||
<form-group :data="element.list" data-type="not-nested" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'flex'"> |
|||
<form-group |
|||
:data="element.list" |
|||
data-type="not-nested" |
|||
v-if="type === 5" |
|||
/> |
|||
<flex-box :data="element" v-else /> |
|||
<el-button |
|||
style="position: relative; top: -28px; left: 10px" |
|||
v-if="element.config.addBtnText && type === 5" |
|||
size="small" |
|||
>{{ element.config.addBtnText }}</el-button |
|||
> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'button'"> |
|||
<div |
|||
:class="[element.config?.className]" |
|||
:style="{ 'text-align': element.config?.textAlign }" |
|||
> |
|||
<el-button |
|||
v-bind="element.control" |
|||
@click="clickBtn(element.control)" |
|||
>{{ element.control?.label }}</el-button |
|||
> |
|||
</div> |
|||
</template> |
|||
|
|||
<template v-else-if="element.type === 'inputSlot' && type !== 5"> |
|||
<!-- 除设计外其他无需处理--> |
|||
</template> |
|||
|
|||
<FormItem v-else :data="element" /> |
|||
|
|||
<template v-if="type === 5"> |
|||
<div class="drag-control"> |
|||
<div class="item-control"> |
|||
<i |
|||
class="icon-plus" |
|||
@click.stop="click('gridAdd', index, element)" |
|||
v-if="state.gridAdd" |
|||
title="添加列" |
|||
></i> |
|||
<i |
|||
class="icon-clone" |
|||
@click.stop="click('clone', index, element)" |
|||
v-if="state.clone" |
|||
title="克隆" |
|||
></i> |
|||
<i class="icon-del" @click.stop="click('del', index)"></i> |
|||
</div> |
|||
<div class="drag-move icon-move"></div> |
|||
</div> |
|||
<div class="tooltip" style="display: none;">{{ element.name }}</div> |
|||
</template> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
</draggable> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,203 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-14 16:38:32 |
|||
@ 备注: |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { onMounted, watch, ref, computed, onUnmounted } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import { getRequest } from '@/api/DesignForm' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue: string |
|||
placeholder?: string |
|||
width?: string |
|||
height?: string |
|||
blobUrl?: string |
|||
imgUrl?: string |
|||
config?: any |
|||
}>(), |
|||
{ |
|||
modelValue: '', |
|||
placeholder: '请输入内容', |
|||
width: '100%', |
|||
height: '300px', |
|||
blobUrl: '', |
|||
imgUrl: '', |
|||
config: () => { |
|||
return {} |
|||
} |
|||
} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const contentValue = ref(props.modelValue) |
|||
// 参数自定义初始化 |
|||
// eslint-disable-next-line max-len |
|||
const buttonPlugins ='preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave ' |
|||
// 导入工具栏 |
|||
// eslint-disable-next-line max-len |
|||
const toolbar ='fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor table image | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | media charmap emoticons pagebreak insertdatetime print preview | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs' |
|||
const toolbarSimple ='undo cut copy paste pastetext |forecolor backcolor bold italic underline strikethrough|alignleft aligncenter alignright alignjustify|' |
|||
const commInit = { |
|||
selector: '#myTextarea', |
|||
cleanup: true, |
|||
language: 'zh_CN', // 语言类型 |
|||
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px', // 字体大小 |
|||
lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', // 行高配置，也可配置成"12px 14px 16px 20px"这种形式 |
|||
branding: false, // tiny技术支持信息是否显示 |
|||
resize: false, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号 |
|||
// statusbar: false, //最下方的元素路径和字数统计那一栏是否显示 |
|||
elementpath: false, // 元素路径是否显示 |
|||
height: props.height, // 允许外界传进来高度和placeholder |
|||
width: props.width, |
|||
placeholder: props.placeholder, |
|||
init_instance_callback: (editor: any) => { |
|||
// editor.setContent('') |
|||
editor.on('NodeChange Change KeyUp SetContent', () => { |
|||
contentValue.value = editor.getContent() |
|||
emits('update:modelValue', editor.getContent()) |
|||
}) |
|||
} |
|||
} |
|||
// 图片上传 |
|||
const imgUploadFn = (blobInfo: any, progress: number) => |
|||
new Promise((resolve, reject) => { |
|||
// https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_upload_handler |
|||
console.log("图片上传",progress) |
|||
const params = new FormData() |
|||
params.append('file', blobInfo.blob()) |
|||
let options = {} |
|||
if (props.imgUrl) { |
|||
options = { |
|||
url: props.imgUrl |
|||
} |
|||
} |
|||
getRequest('upload', params, options) |
|||
.then(res => { |
|||
// console.log(res) |
|||
// console.log(res.data.path) |
|||
if (res.data.code === 1) { |
|||
resolve(res.data.path) // 上传成功，在成功函数里填入图片路径 |
|||
// console.log('[文件上传]', res.data) |
|||
} else { |
|||
reject('上传失败') |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
reject('上传出错，示例暂不提供上传接口') |
|||
}) |
|||
}) |
|||
const fileUpload = (callback: any, value: string, meta: any) => { |
|||
const filetype ='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4' |
|||
//后端接收上传文件的地址 |
|||
const input = document.createElement('input') //创建文件选择 |
|||
input.setAttribute('type', 'file') |
|||
input.setAttribute('accept', filetype) |
|||
input.click() |
|||
input.onchange = () => { |
|||
const file = input?.files && input.files[0] //获取文件信息 |
|||
// console.log(file) |
|||
// meta对应于file_picker_types的三种类型 |
|||
let attr = {} |
|||
if (meta.filetype === 'file') { |
|||
attr = { text: file?.name } |
|||
} |
|||
if (meta.filetype === 'image') { |
|||
attr = { alt: file?.name } |
|||
} |
|||
if (meta.filetype === 'media') { |
|||
// attr={source2: 'alt.ogg', poster: 'image.jpg'} |
|||
} |
|||
/*if(file.type.slice(0,5)=='image'&&file.size/1024/1024>2){ |
|||
alert("上传失败，图片大小请控制在2M以内") |
|||
}else if(file.type.slice(0,5)=='video'&&file.size/1024/1024>500){ |
|||
alert("上传失败，视频大小请控制在 500M 以内") |
|||
}else if(file.size/1024/1024>10){ |
|||
alert("上传失败，文件大小请控制在 10M 以内") |
|||
}*/ |
|||
const params = new FormData() |
|||
params.append('file', file as any) |
|||
let options = {} |
|||
if (props.blobUrl) { |
|||
options = { |
|||
url: props.blobUrl |
|||
} |
|||
} |
|||
getRequest('upload', params, options) |
|||
.then(res => { |
|||
if (res.data.code === 1) { |
|||
callback(res.data.path, attr) // 上传成功，在成功函数里填入图片路径 |
|||
} else { |
|||
ElMessage.error(res.data?.message) |
|||
} |
|||
}) |
|||
.catch(res => { |
|||
ElMessage.error(res.data?.message) |
|||
}) |
|||
} |
|||
} |
|||
const defaultInit = { |
|||
plugins: buttonPlugins, // 插件配置 |
|||
toolbar: toolbar, // 工具栏配置，设为false则隐藏 |
|||
menubar: true, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单” |
|||
//emoticons_database_url: './tinymce/emoticons/js/emojis.js', |
|||
// eslint-disable-next-line max-len |
|||
font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;', // 字体样式 微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif, 宋体=simsun,serif,仿宋体=FangSong,黑体=SimHei,Arial=arial, |
|||
// content_style: 'p {margin-block-start: 0; margin-block-end: 0; color: #606D81; font-size: 14px;}; table { border: 1px}', // 直接自定义可编辑区域的css样式 |
|||
content_css: false, // 以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入 |
|||
paste_data_images: true, // 图片是否可粘贴 |
|||
// 允许外界传进来高度和placeholder |
|||
// 粘贴图片 自动处理 base64 |
|||
urlconverter_callback: (url: string, node: string) => { |
|||
if (node === 'img' && url.startsWith('blob:')) { |
|||
// @ts-ignore |
|||
tinymce.activeEditor && tinymce.activeEditor.uploadImages() |
|||
} |
|||
return url |
|||
}, |
|||
// 图片上传 |
|||
images_upload_handler: imgUploadFn, |
|||
file_picker_types: 'file image media', //分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数 |
|||
file_picker_callback: fileUpload |
|||
} |
|||
const simpleInit = { |
|||
plugins: '', // 插件配置 |
|||
toolbar: toolbarSimple, // 工具栏配置，设为false则隐藏 |
|||
menubar: false, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 |
|||
font_formats: '', |
|||
paste_data_images: false // 图片是否可粘贴 |
|||
} |
|||
const myInit = computed(() => { |
|||
const styleType = |
|||
props.config?.style === 'simple' ? simpleInit : defaultInit |
|||
return Object.assign(commInit, styleType) |
|||
}) |
|||
onMounted(() => { |
|||
// @ts-ignore |
|||
tinymce.init(myInit.value) |
|||
}) |
|||
onUnmounted(() => { |
|||
// @ts-ignore |
|||
tinymce.remove() |
|||
}) |
|||
// 侦听默认值 外界第一次传进来一个 v-model 就赋值给 contentValue |
|||
watch( |
|||
() => props.modelValue, |
|||
(n: any) => { |
|||
if (n && n !== contentValue.value) { |
|||
contentValue.value = n |
|||
} |
|||
} |
|||
) |
|||
</script> |
|||
<template> |
|||
<textarea id="myTextarea" v-model="contentValue"></textarea> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.tox-tinymce-aux { |
|||
z-index: 99999 !important; /*el-dialog层为2014，默认时在el弹出层显示不了编辑器里的弹窗*/ |
|||
z-index: 99999; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios'; |
|||
import { useUserStoreHook } from '@/store/modules/user'; |
|||
|
|||
// 创建 axios 实例
|
|||
const service = axios.create({ |
|||
baseURL: import.meta.env.VITE_APP_BASE_API, |
|||
timeout: 50000, |
|||
}); |
|||
|
|||
// 请求拦截器
|
|||
service.interceptors.request.use( |
|||
(config: InternalAxiosRequestConfig) => { |
|||
const userStore = useUserStoreHook(); |
|||
if (userStore.tokenIng) { |
|||
config.headers.Authorization = userStore.tokenIng; |
|||
} |
|||
if (userStore.userKey) { |
|||
config.headers["user-key"] = userStore.userKey; |
|||
} |
|||
if (userStore.userToken) { |
|||
config.headers["user-token"] = userStore.userToken; |
|||
} |
|||
return config; |
|||
}, |
|||
(error: any) => { |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
|
|||
// 响应拦截器
|
|||
service.interceptors.response.use( |
|||
(response: AxiosResponse) => { |
|||
const { code, msg } = response.data; |
|||
if (code === 0) { |
|||
return response.data; |
|||
} |
|||
if (code === 7 || code === 300 || code === 301 || code === 302){ |
|||
ElMessageBox.confirm("身份令牌已失效！请重新登录！", "提示", { |
|||
confirmButtonText: "确定", |
|||
type: "warning", |
|||
}).then(() => { |
|||
localStorage.clear(); |
|||
window.location.href = "/"; |
|||
}); |
|||
return response.data; |
|||
} |
|||
// 响应数据为二进制流处理(Excel导出)
|
|||
if (response.data instanceof ArrayBuffer) { |
|||
return response; |
|||
} |
|||
|
|||
ElMessage.error(msg || '系统出错'); |
|||
return Promise.reject(new Error(msg || 'Error')); |
|||
}, |
|||
(error: any) => { |
|||
if (error.response.data) { |
|||
const { code, msg } = error.response.data; |
|||
// token 过期,重新登录
|
|||
if (code === 'A0230') { |
|||
ElMessageBox.confirm('当前页面已失效，请重新登录', '提示', { |
|||
confirmButtonText: '确定', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
localStorage.clear(); |
|||
window.location.href = '/'; |
|||
}); |
|||
}else if(code === 7 || code === 300 || code === 301 || code === 302){ |
|||
ElMessageBox.confirm("身份令牌已失效！请重新登录！", "提示", { |
|||
confirmButtonText: "确定", |
|||
type: "warning", |
|||
}).then(() => { |
|||
localStorage.clear(); |
|||
window.location.href = "/"; |
|||
}); |
|||
} else { |
|||
ElMessage.error(msg || '系统出错'); |
|||
} |
|||
} |
|||
return Promise.reject(error.message); |
|||
} |
|||
); |
|||
|
|||
// 导出 axios 实例
|
|||
export default service; |
|||
@ -0,0 +1,230 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-09-13 10:43:12 |
|||
@ 备注: 数据结构表单 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { publicFormTableStruct,formTabelStruct } from "@/api/DesignForm/type"; |
|||
import { callBackFormTableVersion,haveFormTabelcont,optimizeOrRepairFormTable,haveFormTablelist } from '@/api/DesignForm/requestapi' |
|||
//引入页面 |
|||
import SetupField from '@/views/sysworkflow/codepage/setupfield.vue' |
|||
|
|||
|
|||
import { |
|||
Ticket, |
|||
Finished |
|||
} from '@element-plus/icons-vue' |
|||
|
|||
const props = defineProps({ |
|||
isshow:{ |
|||
type:Boolean, |
|||
default:true |
|||
}, |
|||
formcont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
}) |
|||
const emits = defineEmits(["update:isshow"]); |
|||
const isShow = computed({ |
|||
get: () => props.isshow, |
|||
set: (val) => { |
|||
emits("update:isshow", val); |
|||
}, |
|||
}); |
|||
//字段列表 |
|||
const formTableFieldList = ref<formTabelStruct[]>() |
|||
const versionIndex = ref("") //当前版本 |
|||
const formTableIndex = ref("") //当前表单 |
|||
const versionAry = ref<publicFormTableStruct[]>([]) //版本列表 |
|||
const formTableAry = ref<publicFormTableStruct[]>([]) //表单列表 |
|||
const isEditForm = ref(false) |
|||
const formTableCont = ref<publicFormTableStruct>() //表单内容 |
|||
const isEditFormField = ref(false) |
|||
const tableLoading = ref(false) |
|||
//选择版本 |
|||
const clickVersion = (val:any) =>{ |
|||
// console.log("切换版本",val,versionIndex.value) |
|||
formTableAry.value.slice(0,formTableAry.value.length) |
|||
// console.log("舒适化",formTableAry.value) |
|||
haveFormTablelist({id:val.toString()}) |
|||
.then(({data})=>{ |
|||
// console.log("选择版本",data,formTableAry.value) |
|||
formTableAry.value = data |
|||
if(data.length > 0){ |
|||
data.forEach( item =>{ |
|||
if(item.ismain){ |
|||
formTableIndex.value = item.name |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
.finally(()=>{ |
|||
getTableFieldList(versionIndex.value,formTableIndex.value) |
|||
}) |
|||
} |
|||
//选择表单 |
|||
const clickFormTable = (val:any) =>{ |
|||
// console.log("切换表单",val,formTableIndex.value) |
|||
getTableFieldList(versionIndex.value,val) |
|||
} |
|||
//获取版本及表列表 |
|||
const getVersionFormTable = () =>{ |
|||
callBackFormTableVersion({id:props.formcont.id}) |
|||
.then(({ data }) =>{ |
|||
// console.log("获取版本及表列表--->",data) |
|||
versionAry.value = data.version |
|||
formTableAry.value = data.tablelist |
|||
if(data.version){ |
|||
if(data.version.length > 0){ |
|||
data.version.forEach( item =>{ |
|||
if(item.ismain){ |
|||
versionIndex.value = item.versionid |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
if(data.tablelist){ |
|||
if(data.tablelist.length > 0){ |
|||
data.tablelist.forEach( item =>{ |
|||
if(item.ismain){ |
|||
formTableIndex.value = item.name |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
.finally(() =>{ |
|||
// console.log("初始化数据结构-->",formTableIndex.value,versionIndex.value) |
|||
getTableFieldList(versionIndex.value,formTableIndex.value) |
|||
}); |
|||
} |
|||
function getTableFieldList(id:string,name:string){ |
|||
tableLoading.value = true; |
|||
haveFormTabelcont({"id":id, "name":name}) |
|||
.then(({data}) =>{ |
|||
// console.log("初始化数据结构-->",data) |
|||
formTableFieldList.value = data.filedlist |
|||
isEditForm.value = data.isedit |
|||
}) |
|||
.finally(()=>{ |
|||
tableLoading.value = false; |
|||
}) |
|||
|
|||
} |
|||
//监听 |
|||
watch(()=>props.isshow,()=>{ |
|||
if(props.isshow){ |
|||
getVersionFormTable() |
|||
} |
|||
}) |
|||
//编辑字段 |
|||
const editCustomerFormField = (val:any) =>{ |
|||
// optimizeOrRepairFormTable() |
|||
formTableCont.value = val |
|||
isEditFormField.value = true |
|||
} |
|||
//优化修复表单 |
|||
const optimizeOrRepairTable = (val:number) =>{ |
|||
optimizeOrRepairFormTable({name:formTableIndex.value,optimizerender:val}) |
|||
.then((data:any)=>{ |
|||
// console.log("表单处理",data,formTableIndex.value,val) |
|||
ElMessage.success(data.msg || '加载异常') |
|||
}) |
|||
} |
|||
//刷新表单 |
|||
const refreshTable = () =>{ |
|||
getTableFieldList(versionIndex.value,formTableIndex.value) |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-dialog v-model="isShow" :title="'<'+props.formcont.name+'>数据结构'" width="70%" draggable> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-main style="padding: 0;"> |
|||
<!-- 表结构 --> |
|||
<el-tabs v-model="formTableIndex" class="form_version" style="height: 40px;" @tab-change="clickFormTable"> |
|||
<el-tab-pane v-for="item in formTableAry" :key="item.name" :name="item.name" > |
|||
<template #label> |
|||
<el-icon v-if="item.ismain"><Management /></el-icon> |
|||
<el-icon v-else><Memo /></el-icon> |
|||
{{ item.name }} |
|||
</template> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
<el-table v-loading="tableLoading" :data="formTableFieldList" border height="460" style="width: 100%;"> |
|||
<el-table-column fixed prop="field" label="字段" width="120" /> |
|||
<el-table-column prop="type" label="类型" width="120" /> |
|||
<el-table-column prop="collation" label="排序规则" width="180" /> |
|||
<el-table-column prop="attribute" label="属性" width="100" /> |
|||
<el-table-column prop="null" label="空" align="center" /> |
|||
<el-table-column prop="default" label="默认值" align="center" /> |
|||
<el-table-column prop="extra" label="补充信息" width="200" /> |
|||
<el-table-column fixed="right" prop="comment" label="备注" width="200" /> |
|||
<el-table-column fixed="right" v-if="isEditForm" label="操作" align="center"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
type="primary" |
|||
link |
|||
size="small" |
|||
@click.stop="editCustomerFormField(scope.row)" |
|||
> |
|||
<i-ep-edit />编辑 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<el-row style="margin-top: 10px;margin-bottom: 10px;"> |
|||
<el-col :span="24"> |
|||
<el-button :icon="Finished" type="primary" @click.stop="optimizeOrRepairTable(1)">优化表单</el-button> |
|||
<el-button :icon="Ticket" type="warning" @click.stop="optimizeOrRepairTable(2)">修复表单</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-main> |
|||
<el-aside width="100px"> |
|||
<!-- 版本 --> |
|||
<el-tabs v-model="versionIndex" tab-position="right" style="height: 500px;" @tab-change="clickVersion"> |
|||
<el-tab-pane v-for="item in versionAry" :key="item.versionid" :label="item.name" :name="item.versionid"> |
|||
<template #label> |
|||
<div class="version_field" title="ConfigConfigConfig"> |
|||
{{ item.name }} |
|||
</div> |
|||
</template> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-aside> |
|||
</el-container> |
|||
</div> |
|||
<SetupField v-model:isEditFormField="isEditFormField" :formtablecont="formTableCont" :formname="formTableIndex" @refreshtable="refreshTable" /> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss'> |
|||
.form_version{ |
|||
height: 500px; |
|||
|
|||
} |
|||
.form_table{ |
|||
height: 500px; |
|||
width: 100%; |
|||
overflow-y: auto; |
|||
} |
|||
.form_version > .el-tabs__content{ |
|||
padding: 0; |
|||
} |
|||
.version_field{ |
|||
width:60px; |
|||
|
|||
// white-space: normal; |
|||
// word-break: break-word; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.but_clic{ |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,237 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-09-14 09:47:27 |
|||
@ 备注: 编辑表单字段 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { gogoBackFormTabelStruct } from "@/api/DesignForm/type"; |
|||
import { formFieldHandle,editFormField } from '@/api/DesignForm/requestapi' |
|||
const fieldType = ["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double","char","varchar","binary","varbinary","enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"]; |
|||
const props = defineProps({ |
|||
isEditFormField:{ |
|||
type:Boolean, |
|||
default:true |
|||
}, |
|||
formname:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
formtablecont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
}) |
|||
|
|||
const unsignedIsShow = ref(false); //符号 |
|||
const decimalIsShow = ref(false); //小数点 |
|||
const fieldLenghtIsShow = ref(false); //字段长度 |
|||
const isNull = ref(false); //是否显示空置 |
|||
const butLoad = ref(false); |
|||
|
|||
const formTableField = reactive<gogoBackFormTabelStruct>({ |
|||
formname:props.formname, |
|||
field:"", |
|||
type:"", |
|||
attribute:"", |
|||
collation:"", |
|||
null:"", |
|||
key:"", |
|||
default:"", |
|||
extra:"", |
|||
privileges:"", |
|||
comment:"", |
|||
integer:"", |
|||
decimal:"", |
|||
}) |
|||
const dialogTitle = ref<string>() |
|||
const isEditOk = ref(false) |
|||
|
|||
const emits = defineEmits(["update:isEditFormField","refreshtable","xxxxx"]); |
|||
const isShow = computed({ |
|||
get: () => props.isEditFormField, |
|||
set: (val) => { |
|||
emits("update:isEditFormField", val); |
|||
emits("refreshtable"); |
|||
}, |
|||
}); |
|||
|
|||
watch(()=>props.isEditFormField,()=>{ |
|||
// console.log("监听状态----->",props.isEditFormField,props.formtablecont) |
|||
if(props.isEditFormField){ |
|||
if(props.formtablecont.comment != null && props.formtablecont.comment != ""){ |
|||
dialogTitle.value = "编辑<"+props.formtablecont.field+">字段(PS:"+props.formtablecont.comment+")" |
|||
}else{ |
|||
dialogTitle.value = "编辑<"+props.formtablecont.field+">字段" |
|||
} |
|||
formFieldHandle(props.formtablecont) |
|||
.then(({data})=>{ |
|||
// console.log("监听状态---1-->",data) |
|||
formTableField.formname=props.formname |
|||
formTableField.field = data.field; |
|||
formTableField.type = data.type; |
|||
formTableField.attribute = data.attribute; |
|||
formTableField.collation = data.collation; |
|||
formTableField.null = data.null; |
|||
formTableField.key = data.key; |
|||
formTableField.default = data.default; |
|||
formTableField.extra = data.extra; |
|||
formTableField.privileges = data.privileges; |
|||
formTableField.comment = data.comment; |
|||
formTableField.integer = data.integer; |
|||
formTableField.decimal = data.decimal; |
|||
if(["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double"].indexOf(data.type) != -1){ |
|||
unsignedIsShow.value = true |
|||
}else{ |
|||
unsignedIsShow.value = false |
|||
} |
|||
if(["decimal", "float", "double"].indexOf(data.type) != -1){ |
|||
decimalIsShow.value = true |
|||
}else{ |
|||
decimalIsShow.value = false |
|||
} |
|||
if(["enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"].indexOf(data.type) != -1){ |
|||
fieldLenghtIsShow.value = false |
|||
}else{ |
|||
fieldLenghtIsShow.value = true |
|||
} |
|||
}) |
|||
// formTableField.value = props.formtablecont |
|||
}else{ |
|||
if(isEditOk.value){ |
|||
emits("refreshtable") |
|||
} |
|||
initData() |
|||
// formTableField.value=new Value(props.formtablecont) |
|||
} |
|||
}) |
|||
//初始化数据 |
|||
function initData(){ |
|||
formTableField.formname=""; |
|||
formTableField.field = ""; //field; |
|||
formTableField.type = ""; //type; |
|||
formTableField.attribute = ""; //attribute; |
|||
formTableField.collation = ""; //collation; |
|||
formTableField.null = ""; //null; |
|||
formTableField.key = ""; //key; |
|||
formTableField.default = ""; //default; |
|||
formTableField.extra = ""; //extra; |
|||
formTableField.privileges = ""; //privileges; |
|||
formTableField.comment = ""; //comment; |
|||
formTableField.integer = ""; //integer; |
|||
formTableField.decimal = ""; //decimal; |
|||
unsignedIsShow.value = false; |
|||
decimalIsShow.value = false; |
|||
fieldLenghtIsShow.value = false; |
|||
} |
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
function closeDialog() { |
|||
isShow.value = false; |
|||
emits("update:isEditFormField", false); |
|||
initData(); |
|||
} |
|||
//提交表单 |
|||
function sendFormData(){ |
|||
butLoad.value=true; |
|||
// console.log("提交数据--->",props.formname,formTableField) |
|||
editFormField(formTableField) |
|||
.then((data)=>{ |
|||
// console.log("提交数据--1->",data) |
|||
ElMessage.success('成功') |
|||
isEditOk.value=true; |
|||
}) |
|||
.finally(()=>{ |
|||
butLoad.value=false; |
|||
closeDialog(); |
|||
}) |
|||
} |
|||
//判断数据类型 |
|||
const judgeFieldType = (typeStr:string) => { |
|||
if(["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double"].indexOf(typeStr) != -1){ |
|||
unsignedIsShow.value = true |
|||
formTableField.attribute = "unsigned" |
|||
formTableField.integer = "3" |
|||
formTableField.decimal = "" |
|||
}else{ |
|||
unsignedIsShow.value = false |
|||
formTableField.attribute = "" |
|||
} |
|||
if(["decimal", "float", "double"].indexOf(typeStr) != -1){ |
|||
decimalIsShow.value = true |
|||
}else{ |
|||
decimalIsShow.value = false |
|||
} |
|||
if(["enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"].indexOf(typeStr) != -1){ |
|||
fieldLenghtIsShow.value = false |
|||
formTableField.integer = "" |
|||
formTableField.decimal = "" |
|||
}else{ |
|||
fieldLenghtIsShow.value = true |
|||
} |
|||
if(["char","varchar","binary","varbinary"].indexOf(typeStr) != -1){ |
|||
formTableField.integer = "255" |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="isShow" |
|||
width="550" |
|||
:title="dialogTitle" |
|||
append-to-body |
|||
draggable |
|||
@close="closeDialog" |
|||
> |
|||
<el-form :model="formTableField" label-width="80px" border> |
|||
<el-form-item label="字段"> |
|||
{{ formTableField.field }} |
|||
</el-form-item> |
|||
<el-form-item label="类型"> |
|||
<el-select v-model="formTableField.type" class="m-2" placeholder="请选择数据类型" @change="judgeFieldType(formTableField.type)"> |
|||
<el-option |
|||
v-for="item in fieldType" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="unsignedIsShow" label="无符号"> |
|||
<el-radio-group v-model="formTableField.attribute" class="ml-4"> |
|||
<el-radio label="unsigned" size="large">正数</el-radio> |
|||
<el-radio label="" size="large">区分正负</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="不是Null"> |
|||
<el-radio-group v-model="formTableField.null" class="ml-4"> |
|||
<el-radio label="YES" size="large">YES</el-radio> |
|||
<el-radio label="NO" size="large">NO</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-if="fieldLenghtIsShow" label="长度"> |
|||
<el-input v-model="formTableField.integer" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="decimalIsShow" label="小数点"> |
|||
<el-input v-model="formTableField.decimal" /> |
|||
</el-form-item> |
|||
<el-form-item label="默认值"> |
|||
<el-input v-model="formTableField.default" /> |
|||
</el-form-item> |
|||
<el-form-item label="备注"> |
|||
<el-input v-model="formTableField.comment" type="textarea" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="closeDialog">取消</el-button> |
|||
<el-button type="primary" @click="sendFormData">提交</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,14 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-09-21 13:41:04 |
|||
@ 备注: 任务 |
|||
--> |
|||
<script lang='ts' setup> |
|||
|
|||
</script> |
|||
<template> |
|||
<div>任务列表</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue