20 changed files with 3397 additions and 4033 deletions
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,108 @@ |
|||||
|
export interface tableButton { |
||||
|
id?: string; |
||||
|
name?: string; |
||||
|
field?: string; |
||||
|
types?: string; |
||||
|
attribute:string; |
||||
|
pattern?: string; |
||||
|
fieldClass?: string; |
||||
|
activeValue?: string; |
||||
|
inactiveValue?: string; |
||||
|
options?: optionsInfo[]; |
||||
|
config?:any; |
||||
|
} |
||||
|
export interface optionsInfo { |
||||
|
label: string; |
||||
|
value: string; |
||||
|
} |
||||
|
export interface attrButton { |
||||
|
label: string; |
||||
|
key: string; |
||||
|
type: string; |
||||
|
size: string; |
||||
|
icon: string; |
||||
|
} |
||||
|
//表头操作
|
||||
|
export const tableButtonList :attrButton[] = [ |
||||
|
{ |
||||
|
label: "新增", |
||||
|
key:"newAdd", |
||||
|
type:"primary", |
||||
|
size: "small", |
||||
|
icon: "editPen" |
||||
|
}, |
||||
|
{ |
||||
|
label: "批量删除", |
||||
|
key: "del", |
||||
|
type: "danger", |
||||
|
size: "small", |
||||
|
icon: "delete" |
||||
|
} |
||||
|
] |
||||
|
//记录操作
|
||||
|
export const tableLogButtonList :attrButton[] = [ |
||||
|
{ |
||||
|
label: "查看", |
||||
|
key: "look", |
||||
|
type: "success", |
||||
|
size: "small", |
||||
|
icon: "view" |
||||
|
}, |
||||
|
{ |
||||
|
label: "编辑", |
||||
|
key: "edit", |
||||
|
type: "warning", |
||||
|
size: "small", |
||||
|
icon: "delete" |
||||
|
}, |
||||
|
{ |
||||
|
label: "删除", |
||||
|
key: "del", |
||||
|
type: "danger", |
||||
|
size: "small", |
||||
|
icon: "delete" |
||||
|
} |
||||
|
]; |
||||
|
//记录操作
|
||||
|
export const tableAttrLogButtonList :tableButton[] = [ |
||||
|
{ |
||||
|
// label: "多选",
|
||||
|
// attribute:"checkbox"
|
||||
|
|
||||
|
id: "checkbox", |
||||
|
name: "多选", |
||||
|
field: "checkbox", |
||||
|
types: "-", |
||||
|
attribute:"", |
||||
|
pattern: "bigint", |
||||
|
fieldClass: "-", |
||||
|
activeValue: "", |
||||
|
inactiveValue: "", |
||||
|
options: [] |
||||
|
}, |
||||
|
{ |
||||
|
|
||||
|
id: "serialNumber", |
||||
|
name: "序号", |
||||
|
field: "index", |
||||
|
types: "-", |
||||
|
attribute:"", |
||||
|
pattern: "bigint", |
||||
|
fieldClass: "-", |
||||
|
activeValue: "", |
||||
|
inactiveValue: "", |
||||
|
options: [] |
||||
|
}, |
||||
|
{ |
||||
|
id: "operate", |
||||
|
name: "操作", |
||||
|
field: "operate", |
||||
|
types: "-", |
||||
|
attribute:"", |
||||
|
pattern: "bigint", |
||||
|
fieldClass: "__control", |
||||
|
activeValue: "", |
||||
|
inactiveValue: "", |
||||
|
options: [] |
||||
|
} |
||||
|
]; |
||||
@ -0,0 +1,256 @@ |
|||||
|
import jsBeautify from 'js-beautify' |
||||
|
import SparkMD5 from 'spark-md5' |
||||
|
|
||||
|
export const EDITTYPE: string = 'javascript' // 弹出编辑器可输入类型 json/javascript
|
||||
|
/** |
||||
|
* 一个变量指向Function，防止有些前端编译工具报错 |
||||
|
* @param fn |
||||
|
*/ |
||||
|
function evil(fn: any) { |
||||
|
return new Function('return ' + fn)() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将拖拽生成的表单数据转为字符串类型 |
||||
|
* @param o |
||||
|
*/ |
||||
|
function obj2string(o: any) { |
||||
|
let r: any = [] |
||||
|
if (o === null) { |
||||
|
// 这里有个问题 因typeOf null=object,下面判断会报错
|
||||
|
return null |
||||
|
} |
||||
|
if (typeof o === 'string') { |
||||
|
return ( |
||||
|
'"' + |
||||
|
o |
||||
|
.replace(/([\\'\\"\\])/g, '\\$1') |
||||
|
.replace(/(\n)/g, '\\n') |
||||
|
.replace(/(\r)/g, '\\r') |
||||
|
.replace(/(\t)/g, '\\t') + |
||||
|
'"' |
||||
|
) |
||||
|
} |
||||
|
if (typeof o === 'object') { |
||||
|
if (!o.sort) { |
||||
|
for (const i in o) { |
||||
|
let iii: string = i |
||||
|
if (i.indexOf('-') !== -1) { |
||||
|
iii = `"${i}"` |
||||
|
} |
||||
|
//r.push(iii + ':' + obj2string(o[i]))
|
||||
|
r.push(`${iii}:${obj2string(o[i])}`) |
||||
|
} |
||||
|
if ( |
||||
|
!!document.all && |
||||
|
!/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test( |
||||
|
o.toString |
||||
|
) |
||||
|
) { |
||||
|
//r.push('toString:' + o.toString.toString())
|
||||
|
r.push(`toString:${o.toString.toString()}`) |
||||
|
} |
||||
|
// r = '{' + r.join() + '}'
|
||||
|
r = `{${r.join()}}` |
||||
|
} else { |
||||
|
for (let i: number = 0; i < o.length; i++) { |
||||
|
r.push(obj2string(o[i])) |
||||
|
} |
||||
|
// r = '[' + r.join() + ']'
|
||||
|
r = `[${r.join()}]` |
||||
|
} |
||||
|
return r |
||||
|
} |
||||
|
return o && o.toString() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将拖拽生成的表单数据转为字符串类型 |
||||
|
* @param obj |
||||
|
* @param isBeautify |
||||
|
*/ |
||||
|
export function objToStringify(obj: any, isBeautify?: boolean) { |
||||
|
if (EDITTYPE === 'javascript') { |
||||
|
if (isBeautify) { |
||||
|
return jsBeautify('opt=' + obj2string(obj), { |
||||
|
indent_size: 2, |
||||
|
brace_style: 'expand' |
||||
|
}) |
||||
|
} else { |
||||
|
return obj2string(obj) |
||||
|
} |
||||
|
} else { |
||||
|
return isBeautify ? JSON.stringify(obj, null, 2) : JSON.stringify(obj) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将字符串类型转为拖拽生成的表单数据 |
||||
|
* @param string |
||||
|
*/ |
||||
|
export function stringToObj(string: string) { |
||||
|
if (EDITTYPE === 'javascript') { |
||||
|
return evil(string) |
||||
|
} else { |
||||
|
return JSON.parse(string) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function string2json(string: string) { |
||||
|
return JSON.parse(string || '{}') |
||||
|
} |
||||
|
export function json2string(obj: any, isBeautify?: boolean) { |
||||
|
return isBeautify ? JSON.stringify(obj, null, 2) : JSON.stringify(obj) |
||||
|
} |
||||
|
|
||||
|
// ace编辑器相关
|
||||
|
/** |
||||
|
* 打开aceEdit编辑器相关配置 |
||||
|
* @param data |
||||
|
* @param id |
||||
|
* @param type |
||||
|
*/ |
||||
|
export const aceEdit = (data: any, id?: string, type?: string) => { |
||||
|
type = type ? type : 'javascript' |
||||
|
id = id ? id : 'editJson' |
||||
|
// @ts-ignore
|
||||
|
const editor = ace.edit(id) |
||||
|
editor.setOptions({ |
||||
|
enableBasicAutocompletion: true, |
||||
|
enableSnippets: true, |
||||
|
enableLiveAutocompletion: true |
||||
|
}) |
||||
|
editor.setFontSize(14) |
||||
|
editor.setShowPrintMargin(false) |
||||
|
editor.session.setMode('ace/mode/' + type) |
||||
|
editor.setTheme('ace/theme/tomorrow_night') |
||||
|
editor.setValue(data) |
||||
|
return editor |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将字符类数字转为数值类 |
||||
|
* @param val |
||||
|
*/ |
||||
|
export const formatNumber = (val: any): number | undefined => { |
||||
|
// 将字符类数字转为数值类
|
||||
|
if (typeof val === 'string' && /^\d+(\.\d+)?$/.test(val.toString())) { |
||||
|
// 为数字
|
||||
|
return Number(val) |
||||
|
} else { |
||||
|
return val |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 转所有值转为字符串类型 |
||||
|
* @param val |
||||
|
*/ |
||||
|
export const formatToString = (val: any): string | undefined => { |
||||
|
if (val !== undefined) { |
||||
|
return val.toString() |
||||
|
} else { |
||||
|
return val |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
* 将{key:value}转[{label:'key',value:'value'}] |
||||
|
* @param obj |
||||
|
*/ |
||||
|
export const objectToArray = (obj: any): { [key: string]: any } => { |
||||
|
if (Object.prototype.toString.call(obj) === '[object Object]') { |
||||
|
const temp: any = [] |
||||
|
for (const key in obj) { |
||||
|
temp.push({ |
||||
|
label: obj[key], |
||||
|
value: key |
||||
|
}) |
||||
|
} |
||||
|
return temp |
||||
|
} |
||||
|
return obj |
||||
|
} |
||||
|
/**** |
||||
|
* 动态插入移除css |
||||
|
* @param id 标签id |
||||
|
* @param cssContent 要插入的css内容 |
||||
|
* @param append true插入false移除 |
||||
|
*/ |
||||
|
export const appendOrRemoveStyle = ( |
||||
|
id: string, |
||||
|
cssContent: string, |
||||
|
append?: boolean |
||||
|
): void => { |
||||
|
const styleId: any = document.getElementById(id) |
||||
|
if (styleId && append) { |
||||
|
// 存在时直接修改，不用多次插入
|
||||
|
styleId.innerText = cssContent |
||||
|
return |
||||
|
} |
||||
|
if (cssContent && append) { |
||||
|
const styleEl = document.createElement('style') |
||||
|
styleEl.id = id |
||||
|
styleEl.type = 'text/css' |
||||
|
styleEl.appendChild(document.createTextNode(cssContent)) |
||||
|
document.head.appendChild(styleEl) |
||||
|
} |
||||
|
if (!append || !cssContent) { |
||||
|
// 移除
|
||||
|
styleId && styleId.parentNode.removeChild(styleId) |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
* 根据当前组数据返回一个标识，设计时用于当前选中标识 |
||||
|
* @param item |
||||
|
* @param index //type=grid下初始时item都是一样的
|
||||
|
*/ |
||||
|
export const getGroupName = (item: any, index?: number): string => { |
||||
|
if (item.name) { |
||||
|
return item.name |
||||
|
} else { |
||||
|
const spark = new SparkMD5() |
||||
|
spark.append(JSON.stringify(item) + index) |
||||
|
return spark.end() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 数据克隆 |
||||
|
*/ |
||||
|
export const jsonParseStringify = (val: any) => { |
||||
|
if (typeof val === 'object') { |
||||
|
return JSON.parse(JSON.stringify(val)) |
||||
|
} else { |
||||
|
return val |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
* 定义两个空方法，用于在编辑事件时作为默认值 |
||||
|
*/ |
||||
|
export const beforeRequest: string = |
||||
|
'opt=(data, route) => {\n' + |
||||
|
' // data经过处理后返回\n' + |
||||
|
" console.log('beforeRequest',data)\n" + |
||||
|
' return data\n' + |
||||
|
'}' |
||||
|
export const afterResponse: string = |
||||
|
'opt=(res) => {\n' + |
||||
|
' // res返回数据\n' + |
||||
|
" console.log('afterResponse',res)\n" + |
||||
|
' return res\n' + |
||||
|
'}' |
||||
|
|
||||
|
export const onChange: string = |
||||
|
'opt=(key,model) => {\n' + |
||||
|
' // name当前改变组件的值,model表单的值\n' + |
||||
|
" console.log('onChange',key)\n" + |
||||
|
' return model\n' + |
||||
|
'}' |
||||
|
|
||||
|
// provide 方法定义的key
|
||||
|
const prefix: string = 'AK' |
||||
|
export const constControlChange: string = prefix + 'ControlChange' // 表单组件改变事件
|
||||
|
export const constSetFormOptions: string = prefix + 'SetFormOptions' // 使用setOptions设置下拉值
|
||||
|
export const constGetControlByName: string = prefix + 'GetControlByName' // 根据name从formData.list查找数据
|
||||
|
export const constFormBtnEvent: string = prefix + 'FormBtnEvent' // 按钮组件事件
|
||||
|
export const constFormProps: string = prefix + 'FormProps' // 按钮组件事件
|
||||
@ -0,0 +1,114 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-27 10:02:17 |
||||
|
@ 备注: 设置数据记录操作按钮 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { ElTable } from 'element-plus' |
||||
|
import { tableLogButtonList,attrButton } from '@/api/DesignForm/tableButton' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
isShow:{ |
||||
|
type:Boolean, |
||||
|
default:false, |
||||
|
}, |
||||
|
contbutary:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
// const emits = defineEmits<{ |
||||
|
// (e: 'update:isShow', val: boolean): void |
||||
|
// (e: 'updataLogBut', val: function): void |
||||
|
// }>() |
||||
|
const emits = defineEmits(["update:isShow","update:contbutary","updataLogBut"]); |
||||
|
const isShowIng = computed({ |
||||
|
get() { |
||||
|
return props.isShow |
||||
|
}, |
||||
|
set(val: formStruct) { |
||||
|
emits('update:isShow', val) |
||||
|
} |
||||
|
}); |
||||
|
const contButList = computed({ |
||||
|
get() { |
||||
|
return props.contbutary |
||||
|
}, |
||||
|
set(val: formStruct) { |
||||
|
emits('update:contbutary', val) |
||||
|
} |
||||
|
}); |
||||
|
const tableLogBut = ref<InstanceType<typeof ElTable>>() |
||||
|
|
||||
|
watch(()=>isShowIng.value,(val: boolean)=>{ |
||||
|
if(val){ |
||||
|
// console.log("props.contbutary",props.contbutary) |
||||
|
// console.log("props.contbutary",contButList.value) |
||||
|
// if(contButList.value && contButList.value.length > 0){ |
||||
|
// let delBut = [] |
||||
|
// tableLogButtonList.forEach((item:any)=>{ |
||||
|
// let isTrue = true; |
||||
|
// contButList.value.forEach((itemAll:any)=>{ |
||||
|
// if (item.key === itemAll.key) { |
||||
|
// isTrue = false; |
||||
|
// } |
||||
|
// }) |
||||
|
// if(isTrue){ |
||||
|
// tableLogBut.value!.toggleRowSelection(item, false) |
||||
|
// } |
||||
|
// }) |
||||
|
// }else{ |
||||
|
|
||||
|
// nextTick(() => { |
||||
|
// tableLogBut.value!.clearSelection() |
||||
|
// }) |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-27 10:25:54 |
||||
|
@ 功能: 关闭弹窗 |
||||
|
*/ |
||||
|
const closeLogBut = () =>{ |
||||
|
emits('update:isShow', false) |
||||
|
emits('updataLogBut', tableLogButtonList) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-27 10:39:34 |
||||
|
@ 功能: 选中的内容 |
||||
|
*/ |
||||
|
const xuanZhongLog = (val:attrButton[]) =>{ |
||||
|
tableLogButtonList.value = val |
||||
|
console.log(tableLogButtonList) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="isShowIng" |
||||
|
title="设置数据记录操作按钮" |
||||
|
width="500" |
||||
|
draggable |
||||
|
center |
||||
|
:before-close="closeLogBut" |
||||
|
> |
||||
|
<el-table ref="tableLogBut" :data="tableLogButtonList" border style="width: 100%" @selection-change="xuanZhongLog"> |
||||
|
<el-table-column fixed type="selection" width="40" align="center" /> |
||||
|
<el-table-column prop="label" label="字段" /> |
||||
|
|
||||
|
</el-table> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="closeLogBut">取消</el-button> |
||||
|
<el-button type="primary" @click="closeLogBut">确定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,77 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-27 15:05:32 |
||||
|
@ 备注: 设置字段属性 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = defineProps({ |
||||
|
isOpen:{ |
||||
|
type:Boolean, |
||||
|
default:false, |
||||
|
}, |
||||
|
setupFieldInfo:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
const drawerTitle = ref("设置") |
||||
|
const direction = ref('ltr') |
||||
|
const emits = defineEmits(["update:isOpen","update:setupFieldInfo","updataLogBut"]); |
||||
|
const drawerIsShow = computed({ |
||||
|
get() { |
||||
|
return props.isOpen |
||||
|
}, |
||||
|
set(val: formStruct) { |
||||
|
emits('update:isOpen', val) |
||||
|
} |
||||
|
}); |
||||
|
const setupFieldCentent = computed({ |
||||
|
get() { |
||||
|
return props.setupFieldInfo |
||||
|
}, |
||||
|
set(val: formStruct) { |
||||
|
emits('update:setupFieldInfo', val) |
||||
|
} |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-27 15:27:14 |
||||
|
@ 功能: 关闭弹窗 |
||||
|
*/ |
||||
|
const handleDrawerClose = () => { |
||||
|
emits('update:isOpen',false) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-27 15:47:38 |
||||
|
@ 功能: 监听开关 |
||||
|
*/ |
||||
|
watch(()=>drawerIsShow.value,(val:boolean)=>{ |
||||
|
// console.log("监听开关",setupFieldCentent) |
||||
|
if(val) { |
||||
|
drawerTitle.value = setupFieldCentent.value.name + "设置" |
||||
|
}else{ |
||||
|
drawerTitle.value = "设置" |
||||
|
initData(); |
||||
|
} |
||||
|
}) |
||||
|
const initData = () => { |
||||
|
setupFieldCentent.value = {} |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
|
||||
|
<el-drawer |
||||
|
v-model="drawerIsShow" |
||||
|
:title="drawerTitle" |
||||
|
:direction="direction" |
||||
|
:before-close="handleDrawerClose" |
||||
|
> |
||||
|
{{setupFieldCentent}} |
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue