diff --git a/package.json b/package.json index 98b90dce7..f0330c0ce 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ ] }, "dependencies": { + "@element-plus/icons-vue": "^2.1.0", "@vitejs/plugin-vue": "^4.2.3", "@vueuse/core": "^10.1.2", "@wangeditor/editor": "^5.1.23", @@ -48,19 +49,26 @@ "axios": "^1.4.0", "echarts": "^5.2.2", "element-plus": "^2.3.4", + "js-beautify": "^1.14.8", + "js-md5": "^0.7.3", + "md5": "^2.3.0", "nprogress": "^0.2.0", "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.0", "pinia": "^2.0.33", "screenfull": "^6.0.0", + "ts-md5": "^1.3.1", "vue": "^3.3.1", "vue-i18n": "9.2.2", - "vue-router": "^4.2.0" + "vue-router": "^4.2.0", + "vuedraggable": "^4.1.0", + "vuedraggable-es": "^4.1.1" }, "devDependencies": { "@commitlint/cli": "^17.6.3", "@commitlint/config-conventional": "^17.6.3", "@iconify-json/ep": "^1.1.10", + "@types/md5": "^2.3.2", "@types/nprogress": "^0.2.0", "@types/path-browserify": "^1.0.0", "@typescript-eslint/eslint-plugin": "^5.59.6", diff --git a/src/api/DesignForm/flow.ts b/src/api/DesignForm/flow.ts new file mode 100644 index 000000000..e686c482d --- /dev/null +++ b/src/api/DesignForm/flow.ts @@ -0,0 +1,4 @@ +export default { + flowSave: 'flow/save', + flowList: 'flow/list' +} diff --git a/src/api/DesignForm/form.ts b/src/api/DesignForm/form.ts new file mode 100644 index 000000000..62b626c88 --- /dev/null +++ b/src/api/DesignForm/form.ts @@ -0,0 +1,19 @@ +export default { + designSave: 'design/save', // 保存设计的表单 + designEdit: 'design/edit', // 保存设计的表单 + designList: 'design/list', // 获取所有已设计的表单 + designChange: 'design/change', // 改变设计表单部分设置内容 + designDelete: 'design/delete', // 根据id删除已设计 + designById: 'design/id', // 根据id获取已设计的表单 + sourceList: 'dataSource/list', // 获取数据源列表 + sourceDelete: 'dataSource/delete', + sourceCreat: 'dataSource/creat', // 创建数据源 + sourceEdit: 'dataSource/edit', // 编辑数据源 + sourceById: 'dataSource/id', // 根据id获取数据源 + saveFormContent: 'content/save', // 往已设计好的表单里添加内容 + editFormContent: 'content/edit', // 往已设计好的表单里添加内容 + getContentList: 'content/list', // 获取表单内容列表 + delFormContent: 'content/delete', // 删除表单内容 + getFormContent: 'content/id', // 获取表单内容 + upload: 'upload/single' // 默认el-upload上传url，也可单独在设计时填写上传地址 +} diff --git a/src/api/DesignForm/index.ts b/src/api/DesignForm/index.ts new file mode 100644 index 000000000..d503cf3e5 --- /dev/null +++ b/src/api/DesignForm/index.ts @@ -0,0 +1,73 @@ +import request from '@/utils/DesignForm/request' +import form from './form' +import system from './system' +import flow from './flow' +const allApi: any = Object.assign(form, system, flow) +export const getRequest = (apiKey: string, data?: any, options: any = {}) => { + let url = allApi[apiKey] || apiKey + // 解决动态url 如/api/delete/id(id为动态时) + // url设置为：/api/delete/$id + // options参数设置：options:{apikey:$id:xx} + if (Object.keys(options.apiKey || {}).length) { + for (const key in options.apiKey) { + url = url.replace(key, options.apiKey[key]) + } + } + let obj: any = Object.assign( + { + url: '/api/' + url, // 添加个前缀 + method: 'POST', + data + }, + options + ) + // github演示时使用下面地址 + if (window.location.host.indexOf('github') !== -1) { + let id = '' + if (url.indexOf('/id') !== -1 && data.id) { + id = data.id + '' + } + if (url.indexOf('/id') !== -1 && data.formId) { + id += data.formId + } + if (url.indexOf('design/list') !== -1 && data.type) { + id = data.type + } + if (url.indexOf('content/list') !== -1 && data.formId) { + id = data.formId + } + if ( + url.includes('/save') || + url.includes('/edit') || + url.includes('/delete') || + url.includes('/creat') || + url.includes('/change') || + url.includes('/single') + ) { + url = 'ok' + } + if (options.method) { + delete options.method + } + obj = Object.assign( + { + url: `./mock/${url}${id}.json`, + method: 'GET', + params: data + }, + options + ) + } + return request(obj) +} +export const uploadUrl = '/api/' + allApi.upload +/*export function uploadFiledTinymce(data, url) { + return request({ + url: url || '/upload/single', + method: 'post', + data, + headers: { + 'Content-Type': 'multipart/form-data' + } + }) +}*/ diff --git a/src/api/DesignForm/system.ts b/src/api/DesignForm/system.ts new file mode 100644 index 000000000..acc1f1cf3 --- /dev/null +++ b/src/api/DesignForm/system.ts @@ -0,0 +1,22 @@ +export default { + dictSave: 'system/dict/save', + dictList: 'system/dict/list', + dictDelete: 'system/dict/delete', + dictEdit: 'system/dict/edit', + deptSave: 'system/dept/save', + deptEdit: 'system/dept/edit', + deptList: 'system/dept/list', + deptDelete: 'system/dept/delete', + menuSave: 'system/menu/save', + menuEdit: 'system/menu/edit', + menuList: 'system/menu/list', + menuDelete: 'system/menu/delete', + roleSave: 'system/role/save', + roleEdit: 'system/role/edit', + roleList: 'system/role/list', + roleDelete: 'system/role/delete', + userSave: 'system/user/save', + userEdit: 'system/user/edit', + userList: 'system/user/list', + userDelete: 'system/user/delete' +} diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts new file mode 100644 index 000000000..1f72ebbd4 --- /dev/null +++ b/src/api/DesignForm/types.ts @@ -0,0 +1,87 @@ +export interface FormList { + name: string + type: string + control: any // 当前type表单控件所有props + item?: FormItem // formItem组件所有props + config: any // 其他配置信息 + customRules?: any // 自定义检验规则,这个规则会合并进item.rules + columns?: any // 布局字段 + tableData?: any // 子表时 + options?: Options[] // radio,checkbox,select选项 +} +export interface Options { + label: string + value: string + disabled?: boolean +} +export interface FormItem { + label?: string + labelWidth?: string + required?: boolean + rules?: any + error?: string + showMessage?: boolean + inlineMessage?: boolean + size?: string + showLabel?: boolean +} + +export interface FormData { + list: FormList[] + form: any // form所有props + config?: { + style?: string // 表单css样式，相当于scope + hideField?: string[] // 使用v-if隐藏的字段，用于交互 + requestUrl?: string // 表单数据请求url + addUrl?: string // 提交表单 + editUrl?: string // 编辑保存 + addLoad?: boolean + expand?: boolean // 用于设置筛选条件默认展开/收起状态 + } + events?: { + beforeRequest?: Function + afterResponse?: Function | string + beforeSubmit?: Function + afterSubmit?: Function + change?: Function + } +} + +export interface TableData { + tableProps?: any + columns: any + controlBtn?: any + events?: any + treeData?: { + show: boolean + beforeRequest?: Function + afterResponse?: Function | string + method: string + requestUrl: string + name: string + } + operateBtn?: any + config?: any +} + +export interface OpenDrawer { + //visible: boolean + title?: string + direction?: string + content?: any + codeType?: string + callback?: Function | string + type?: string +} + + +//文件 +export interface FileAttribute{ + imgPath:any; + title:any; + formData:any; +} +export interface FileAttributeAll{ + visible:boolean; + list:FileAttribute[]; +} diff --git a/src/api/DesignForm/utils.ts b/src/api/DesignForm/utils.ts new file mode 100644 index 000000000..d141c7039 --- /dev/null +++ b/src/api/DesignForm/utils.ts @@ -0,0 +1,108 @@ +import { EDITTYPE } from '@/utils/DesignForm/form' + +export const aceEdit = (data: any, id?: string, type?: string | undefined) => { + id = id || 'editJson' + type = type || EDITTYPE + // @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 +} +// 将字符类数字转为数值类 +export const formatNumber = (val: any) => { + // 将字符类数字转为数值类 + if (typeof val === 'string' && /^\d+(\.\d+)?$/.test(val.toString())) { + // 为数字 + return Number(val) + } else { + return val + } +} +// 转所有值转为字符串类型 +export const formatToString = (val: any) => { + if (val !== undefined) { + return val.toString() + } else { + return val + } +} +// 将{key:value}转[{label:'key',value:'value'}] +export const objectToArray = (obj: 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 +) => { + 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) + } +} +// 定义两个空方法，用于在编辑事件时作为默认值 +export const beforeRequest = + 'opt=(data, route) => {\n' + + ' // data经过处理后返回\n' + + " console.log('beforeRequest',data)\n" + + ' return data\n' + + '}' +export const afterResponse = + 'opt=(res) => {\n' + + ' // res返回数据\n' + + " console.log('afterResponse',res)\n" + + ' return res\n' + + '}' + +export const onChange = + 'opt=(key,model) => {\n' + + ' // name当前改变组件的值,model表单的值\n' + + " console.log('onChange',key)\n" + + ' return model\n' + + '}' + +// provide 方法定义的key +const prefix = 'AK' +export const constControlChange = prefix + 'ControlChange' // 表单组件改变事件 +export const constSetFormOptions = prefix + 'SetFormOptions' // 使用setOptions设置下拉值 +export const constGetControlByName = prefix + 'GetControlByName' // 根据name从formData.list查找数据 +export const constFormBtnEvent = prefix + 'FormBtnEvent' // 按钮组件事件 +export const constFormProps = prefix + 'FormProps' // 按钮组件事件 diff --git a/src/api/displayboardapi/indexapi.ts b/src/api/displayboardapi/indexapi.ts index f8831eea3..8e8c1454b 100644 --- a/src/api/displayboardapi/indexapi.ts +++ b/src/api/displayboardapi/indexapi.ts @@ -1,6 +1,6 @@ import request from '@/utils/request'; import { AxiosPromise } from 'axios'; -import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont } from './types'; +import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont,outputOrgAndUser } from './types'; /** * 获取离职率 */ @@ -51,3 +51,13 @@ import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont } from './types'; data: data }); } +/** + * 根据行政组织编号获取组织及人员 + */ + export function getBasisOrgChiled(data?: publicId): AxiosPromise{ + return request({ + url: '/hrapi/org/basis_org_obtain_sonorg_and_man', + method: 'post', + data: data + }); +} diff --git a/src/api/displayboardapi/types.ts b/src/api/displayboardapi/types.ts index ce20a62bb..1ad82c20e 100644 --- a/src/api/displayboardapi/types.ts +++ b/src/api/displayboardapi/types.ts @@ -1,5 +1,5 @@ export interface publicId{ - id?:number; + id?:number|string; } /** * 获取离职率参数 @@ -34,14 +34,17 @@ export interface orgInfo{ schoole: number; kingdeeid: string; ispower: number; - sort: number + sort: number; + ischild: boolean; + isActiveItem: boolean; } /** * 输出行政组织 */ export interface sendOrgCont{ current:number; - list:orgInfo[] + list:orgInfo[]; + tabval:any; } /** * 学历结构 @@ -50,3 +53,46 @@ export interface eduStruCont{ education:string; percentage:number; } +/** + * 面包屑 + */ +export interface breadCrumbs{ + departmentId:string // "309", + id:string // "309", + departmentKey:string // "GK00", + departmentName:string // "山东恒信高科能源有限公司", + parentId:string // "313", + departmentNames:string // "山东恒信高科能源有限公司" +} +/** + * 输出根据行政组织编号获取组织及人员 + */ +export interface outputOrgAndUser{ + childDepartments:childDepartmentsCont[]; + employees:employeesCont[]; + titleDepartments:breadCrumbs[]; +} +export interface employeesCont{ + id:string //"95196156539179008", + employeeName:string //"胡齐帅", + isLeave:string //"0", + open:boolean //"false", + icon:string //"", + iconToBase64:string //"", + wechat:string //"", + departmentid:number //102, + departmentname:string //"企管部", + postid:number //798, + postname:string //"岗监员", + tema:number //0, + temaname:string //"" + ispick:boolean // +} +export interface childDepartmentsCont{ + id:string; //"103", + departmentKey:string; //"GK0302", + departmentName:string; //"IT", + parentId:string; //"102", + departmentNames:string; //"IT" + isActiveItem:boolean; // +} diff --git a/src/api/hr/people/index.ts b/src/api/hr/people/index.ts index f44cf4b86..76b0298ed 100644 --- a/src/api/hr/people/index.ts +++ b/src/api/hr/people/index.ts @@ -20,7 +20,9 @@ import { groupInnerWorkCont, editUserIcon, editUserAboutOrg, - teamClassQueay + teamClassQueay, + searchPeoleCont, + queryPeopleCont } from './type'; /** * 获取人员档案 @@ -344,3 +346,13 @@ import { data: data }); } +/** + * 搜索成员 + */ + export function searchUserCont(data: searchPeoleCont): AxiosPromise>{ + return request({ + url: '/kpiapi/powerpc/search_people', + method: 'post', + data: data + }); +} diff --git a/src/api/hr/people/type.ts b/src/api/hr/people/type.ts index c02d0418a..60ddc2f03 100644 --- a/src/api/hr/people/type.ts +++ b/src/api/hr/people/type.ts @@ -542,3 +542,27 @@ export interface teamClassCont{ rule:teamRule[]; list:teamList[]; } +/** + * 搜索成员条件 + */ + export interface searchPeoleCont extends PageQuery{ + name?:number|string; //关键字 +} +/** + * 搜索成员结果 + */ +export interface queryPeopleCont{ + id:string // "15993815826844528", + employeeName:string // "秦东", + isLeave:string // "0", + open:boolean // "false", + icon:string // "https://wework.qpic.cn/wwhead/duc2TvpEgSTPk74IwG7BswsATgrfz6BGVPpX5QU5uvaCiaxk3ReIlRhdUwIeiaBBazzCLiaHI8VuA4/0", + iconToBase64:string // + wechat:string // "KaiXinGuo", + departmentid:number // 102, + departmentname:string // "企管部", + postid:number // 794, + postname:string // "主管", + tema:number // 1, + temaname:string // "长白班" +} diff --git a/src/api/matrixapi/index.ts b/src/api/matrixapi/index.ts index ad0c0775e..9fe50c02e 100644 --- a/src/api/matrixapi/index.ts +++ b/src/api/matrixapi/index.ts @@ -1,6 +1,6 @@ import request from '@/utils/request'; import { AxiosPromise } from 'axios'; -import { searchMatrix,matrixCont,editMatrixCont,editMatrixInfo,editStatus,chineseInitialFirstWord,sendMatrixField,getMatrixWord } from './type'; +import { searchMatrix,matrixCont,editMatrixCont,editMatrixInfo,editStatus,chineseInitialFirstWord,sendMatrixField,getMatrixWord,orgAndUserMatrixCont } from './type'; /** * 获取矩阵权限分页列表 @@ -72,3 +72,34 @@ export function editMatrixCont(queryParams: editMatrixInfo){ data: queryParams }); } +/** + * 获取编号 + */ +export function getNumber(queryParams: getMatrixWord){ + return request({ + url: '/systemapi/public/send_number', + method: 'post', + data: queryParams + }); +} +/** + * 提交矩阵取值数据 + */ + export function submitMatrixData(queryParams: any){ + return request({ + url: '/systemapi/matrix/submit_matrix_data', + method: 'post', + data: queryParams + }); +} +/** + * 获取已经存在的矩阵信息 + */ + export function haveMatrixCont(queryParams: getMatrixWord){ + return request({ + url: '/systemapi/matrix/gain_matrix_data', + // url: 'http://localhost:9999/src/assets/data.json', + method: 'post', + data: queryParams + }); +} diff --git a/src/api/matrixapi/type.ts b/src/api/matrixapi/type.ts index cfd70219c..07d946742 100644 --- a/src/api/matrixapi/type.ts +++ b/src/api/matrixapi/type.ts @@ -81,6 +81,7 @@ export interface matrixTable{ id:number; label:string; prop:string + types:number; } /** * 自定义对象结构体 @@ -88,3 +89,23 @@ export interface matrixTable{ export interface objectStruct{ [idx: string]: any } +/** + * 穿梭框已选定值 + */ +export interface shuttleFramePickData{ + id:number|string; + name:string; + icon:string; +} +/** + * 权限矩阵具体行政组织和使用人 + */ +export interface orgAndUserMatrixCont{ + id:number|string; + number:string; + userlist:shuttleFramePickData[]; + types:number; + mcid:number; + mhid:number; +} + diff --git a/src/assets/data.json b/src/assets/data.json new file mode 100644 index 000000000..93bc38124 --- /dev/null +++ b/src/assets/data.json @@ -0,0 +1,139 @@ +{ + "code": 0, + "msg": "成功", + "data": { + "childDepartments": [ + { + "id": "103", + "departmentKey": "GK0302", + "departmentName": "IT", + "parentId": "102", + "departmentNames": "IT" + }, + { + "id": "272", + "departmentKey": "GK0301", + "departmentName": "企管", + "parentId": "102", + "departmentNames": "企管" + }, + { + "id": "273", + "departmentKey": "GK0303", + "departmentName": "岗监", + "parentId": "102", + "departmentNames": "岗监" + } + ], + "employees": [ + { + "id": "10638305678856192", + "employeeName": "庞富镇", + "isLeave": "0", + "open": "false", + "icon": "", + "iconToBase64": "data:image/jpeg;base64,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", + "wechat": "PangFuZhen", + "departmentid": 102, + "departmentname": "企管部", + "postid": 1949, + "postname": "开发专员", + "tema": 0, + "temaname": "" + }, + { + "id": "20833135155482624", + "employeeName": "薛中国", + "isLeave": "0", + "open": "false", + "icon": "", + "iconToBase64": "data:image/jpeg;base64,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", + "wechat": "XueZhongGuo", + "departmentid": 102, + "departmentname": "企管部", + "postid": 797, + "postname": "IT", + "tema": 0, + "temaname": "" + }, + { + "id": "95196156539179008", + "employeeName": "胡齐帅", + "isLeave": "0", + "open": "false", + "icon": "", + "iconToBase64": "", + "wechat": "", + "departmentid": 102, + "departmentname": "企管部", + "postid": 798, + "postname": "岗监员", + "tema": 0, + "temaname": "" + }, + { + "id": "95196160066588672", + "employeeName": "高宇", + "isLeave": "0", + "open": "false", + "icon": "", + "iconToBase64": "data:image/jpeg;base64,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", + "wechat": "", + "departmentid": 102, + "departmentname": "企管部", + "postid": 798, + "postname": "岗监员", + "tema": 0, + "temaname": "" + }, + { + "id": "112229905093103616", + "employeeName": "孙殿泉", + "isLeave": "0", + "open": "false", + "icon": "", + "iconToBase64": "data:image/jpeg;base64,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", + "wechat": "", + "departmentid": 102, + "departmentname": "企管部", + "postid": 1120, + "postname": "新员工", + "tema": 0, + "temaname": "" + }, + { + "id": "134825671351341056", + "employeeName": "李文轩", + "isLeave": "0", + "open": "false", + "icon": "", + "iconToBase64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a\r\nHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy\r\nMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAB4AGQDASIA\r\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA\r\nAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3\r\nODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm\r\np6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA\r\nAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx\r\nBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK\r\nU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3\r\nuLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2M0ma\r\nU1GTUgOzRmoy1YfiDxTY+HYPMu5Bk8hR1NIZ0G6kJrze6+MvhyG3keFbqaRfux7Au4/UnpXMJ8dr\r\ngzvnRYzCfugT8j6nHP5U7Ae37qN1eOW/xzt9xFzpTckY8uUfj1rsvDvxG0HxC8cMc/2e6ccQzHBJ\r\n9AehoA7HdSZpAcj2NFADgaTOKSikAuaKKKBDyaiY09jioHbFAyC/u0s7Ka4c/LGhY/hXy34n1q41\r\nnWLiaSeRo952AngD0GK+hvGdw8XhDVXj+8tuxr5hs7a71O58mAdPvN6CmmtwtfREJ2luV4Hc0rtH\r\ngAsBXUR+DHdPmuHye9MbwK2f+PhvxFT7WHc09jPscqx3kBMGnxyNEyFWYMOcqeQa6xfAmSD55+mK\r\nbe+CPLhLQSN5gHfpR7WAexn2PRvhj8Rp9QC6VqkhlkRAIpT1IHY+p6V68DmvkTRL250HXonkUJLG\r\n3O7IGPw/nX1fp1wLrT7ecEESRqwI6ciqZmXc0DmkBzTlpCFxRS0UWGMeqkzVac1TnoAxtctP7R0a\r\n9syM+dC6D6kcfrXivg6xS2sruecKmJCpJ7Y617lO20E4zgZrzRLW2e3uJPJAhmmaby8Zxk5xWVR6\r\nWN6EW5XKlvqukzSCP7Rt9ypArdh06JowwkWTPcVhSajaQmKM2MxDnAIRfl+vORWxZSo0aGE4SQZA\r\nxj9K55JdDupu+jHz21tbJullWMDqScVkPq2kmfyhdKT06Vq38kUMZkmwVHBzzWTHqmlXKtGbN1Ab\r\nYzNEMZoik0E3Z2Ry/jDR999aTW6585hGCvcnpX0Pp0H2PTra2znyYljznOcDFeXpa2azadLcKxt7\r\nW4WbaoyTtDEfrj8q9TgkEsSSLkK6hhketdVKXu2OCvFqVy2pqRTUCmpVNaGJLRQOlFAELmqk3SrL\r\nmq0vIpAZ83WuOuoY7a6kiUcBiQPTPP8AWuxnFcrrkey8Eg/iXn6j/IrGotDow7tKxnvFEVLMOBUV\r\nvMrTFlwQvAA7U2SXdGwJ7VlC+nhmVUEawom0rjlj65/piudK56N0jbeWKS4aKQDB7GpktYowcKMf\r\nSsKC4uJ5XEuzBYMhAwVH1zz+lbQuMRgHJNFrBo1cs2NiuoX8UBXMe7Lj/Zwa9AQAAAcCuT8LRbri\r\n4mP8KhR+PP8ASusTpXTSVkebiJXlbsSipFqNakWtjAlB4opo6UUAQsahenu1Qs1ICtOvBrmtdiL2\r\n/mDqh/Q/5FdLMw2msS/eNYpDIwCYOcniokrqxcHZpnC3Tt5bKhwx9aoP56jLyRAHtsOKumRWJD8H\r\n9DTHWNwd2OOxrlR6Ka3K4+1smVeIjt8ladtKXjUH7w61WVkVQAOPapYLiNbiM7fkDAscds0A5JbH\r\nomg2ptdPQMMPJ87fj0/SttKzreZXRXRgynkEHg1djfIrrjoebJtu7LIqRaiVqlU1ZJIOlFA6UUAZ\r\nzyY71VluAookJPU1CF5yKzuOww75m5+UVR1/TjcaBN5K5kjYSnHUgdf0OfwrTAxzU8b4ak9Slo7n\r\nlPlh/SgQuBhG6diMiuq1zwnL5jXWkgMrHLW+cYP+z/h+XpXPfPCxS4jeKQdVkUg/rXM4tHbCakVv\r\nIZ/9YScdh0pTGAuKkeXryKs6dpd7q0gFvEfLz80rcKPx7/Skk2U2ludB4Mic2d4WJ8sONns2Dn+l\r\ndKHaNsHmo9O09NNslt48kLyzHue5p0i5Oa6YqyOGbu7lyOXcKso1Y6u8ZyDVuC5DEBuDVpkNGkG4\r\noqJW460VYjMIUnmk2Y56inMv74/Wk6EisyhcDFGcHimE0ZoAnWUZ+bg+op0iwzptkVJF9GGf51Wz\r\nRuoGPXTNPVty2VqD6iNasbkUADoOgFVd1KGosGpM8m7joBUZwabk0c0xWEKAnpTSNoz6VKvWknXE\r\nDH2oAlSV0UAcj3opoICjPpRQAvG7P51EeWJoooAjPWm7ec5oopAPFKBRRQAYooopjFzS55oooEOF\r\nPYbrdh3FFFCEVpXCsAT2FFFFBR//2Q==", + "wechat": "", + "departmentid": 102, + "departmentname": "企管部", + "postid": 1120, + "postname": "新员工", + "tema": 0, + "temaname": "" + } + ], + "titleDepartments": [ + { + "departmentId": "309", + "id": "309", + "departmentKey": "GK00", + "departmentName": "山东恒信高科能源有限公司", + "parentId": "313", + "departmentNames": "山东恒信高科能源有限公司" + }, + { + "departmentId": "102", + "id": "102", + "departmentKey": "GK03", + "departmentName": "企管部", + "parentId": "309", + "departmentNames": "企管部" + } + ] + } +} diff --git a/src/assets/iconfont/demo.css b/src/assets/iconfont/demo.css new file mode 100644 index 000000000..a67054a0a --- /dev/null +++ b/src/assets/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html new file mode 100644 index 000000000..2bd670b61 --- /dev/null +++ b/src/assets/iconfont/demo_index.html @@ -0,0 +1,1959 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    箭头
    +
    
    +
    • + +
  • + +
    手，手势
    +
    
    +
    • + +
  • + +
    24gl-unlock4
    +
    
    +
    • + +
  • + +
    解锁
    +
    
    +
    • + +
  • + +
    眼睛_隐藏_o
    +
    
    +
    • + +
  • + +
    设置边框
    +
    
    +
    • + +
  • + +
    文字边框
    +
    
    +
    • + +
  • + +
    m-滚动文字
    +
    
    +
    • + +
  • + +
    发起的
    +
    
    +
    • + +
  • + +
    工作台
    +
    
    +
    • + +
  • + +
    待办任务_o
    +
    
    +
    • + +
  • + +
    我发起的
    +
    
    +
    • + +
  • + +
    我的已办
    +
    
    +
    • + +
  • + +
    符号-按钮
    +
    
    +
    • + +
  • + +
    设计
    +
    
    +
    • + +
  • + +
    数据源管理
    +
    
    +
    • + +
  • + +
    审批
    +
    
    +
    • + +
  • + +
    抄送
    +
    
    +
    • + +
  • + +
    代码,分支,分流,分叉
    +
    
    +
    • + +
  • + +
    文档
    +
    
    +
    • + +
  • + +
    系统管理
    +
    
    +
    • + +
  • + +
    创建图表
    +
    
    +
    • + +
  • + +
    可视化
    +
    
    +
    • + +
  • + +
    菜单
    +
    
    +
    • + +
  • + +
    icon-user
    +
    
    +
    • + +
  • + +
    表单管理
    +
    
    +
    • + +
  • + +
    列表
    +
    
    +
    • + +
  • + +
    操作日志
    +
    
    +
    • + +
  • + +
    字典管理
    +
    
    +
    • + +
  • + +
    岗位
    +
    
    +
    • + +
  • + +
    角色管理
    +
    
    +
    • + +
  • + +
    管理登录日志
    +
    
    +
    • + +
  • + +
    系统工具
    +
    
    +
    • + +
  • + +
    柱状图
    +
    
    +
    • + +
  • + +
    407饼图
    +
    
    +
    • + +
  • + +
    折线图
    +
    
    +
    • + +
  • + +
    Directory tree
    +
    
    +
    • + +
  • + +
    流式布局
    +
    
    +
    • + +
  • + +
    divide
    +
    
    +
    • + +
  • + +
    树状图_o
    +
    
    +
    • + +
  • + +
    时间
    +
    
    +
    • + +
  • + +
    富文本框
    +
    
    +
    • + +
  • + +
    评分
    +
    
    +
    • + +
  • + +
    滑块
    +
    
    +
    • + +
  • + +
    分割线
    +
    
    +
    • + +
  • + +
    颜色库
    +
    
    +
    • + +
  • + +
    导入
    +
    
    +
    • + +
  • + +
    图片
    +
    
    +
    • + +
  • + +
    卡片
    +
    
    +
    • + +
  • + +
    help
    +
    
    +
    • + +
  • + +
    table
    +
    
    +
    • + +
  • + +
    component
    +
    
    +
    • + +
  • + +
    11.符号-级联选择
    +
    
    +
    • + +
  • + +
    cascader
    +
    
    +
    • + +
  • + +
    计数器
    +
    
    +
    • + +
  • + +
    标题
    +
    
    +
    • + +
  • + +
    bootstrap_tabs
    +
    
    +
    • + +
  • + +
    close
    +
    
    +
    • + +
  • + +
    加号
    +
    
    +
    • + +
  • + +
    arrow on
    +
    
    +
    • + +
  • + +
    check
    +
    
    +
    • + +
  • + +
    vue
    +
    
    +
    • + +
  • + +
    开关
    +
    
    +
    • + +
  • + +
    保存
    +
    
    +
    • + +
  • + +
    move
    +
    
    +
    • + +
  • + +
    clone
    +
    
    +
    • + +
  • + +
    删 除 (1)
    +
    
    +
    • + +
  • + +
    eye
    +
    
    +
    • + +
  • + +
    json
    +
    
    +
    • + +
  • + +
    GRID
    +
    
    +
    • + +
  • + +
    文字
    +
    
    +
    • + +
  • + +
    date
    +
    
    +
    • + +
  • + +
    input
    +
    
    +
    • + +
  • + +
    check_box-24px
    +
    
    +
    • + +
  • + +
    textarea
    +
    
    +
    • + +
  • + +
    radio
    +
    
    +
    • + +
  • + +
    下拉选择
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1683511822799') format('woff2'),
+       url('iconfont.woff?t=1683511822799') format('woff'),
+       url('iconfont.ttf?t=1683511822799') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 箭头 +
    +
    .icon-mouse +
    +
    • + +
  • + +
    + 手，手势 +
    +
    .icon-hand +
    +
    • + +
  • + +
    + 24gl-unlock4 +
    +
    .icon-lock-open +
    +
    • + +
  • + +
    + 解锁 +
    +
    .icon-lock +
    +
    • + +
  • + +
    + 眼睛_隐藏_o +
    +
    .icon-eye-close +
    +
    • + +
  • + +
    + 设置边框 +
    +
    .icon-border +
    +
    • + +
  • + +
    + 文字边框 +
    +
    .icon-text2 +
    +
    • + +
  • + +
    + m-滚动文字 +
    +
    .icon-stext +
    +
    • + +
  • + +
    + 发起的 +
    +
    .icon-apply +
    +
    • + +
  • + +
    + 工作台 +
    +
    .icon-work +
    +
    • + +
  • + +
    + 待办任务_o +
    +
    .icon-todo +
    +
    • + +
  • + +
    + 我发起的 +
    +
    .icon-applyed +
    +
    • + +
  • + +
    + 我的已办 +
    +
    .icon-done +
    +
    • + +
  • + +
    + 符号-按钮 +
    +
    .icon-button +
    +
    • + +
  • + +
    + 设计 +
    +
    .icon-design +
    +
    • + +
  • + +
    + 数据源管理 +
    +
    .icon-data-source +
    +
    • + +
  • + +
    + 审批 +
    +
    .icon-sp +
    +
    • + +
  • + +
    + 抄送 +
    +
    .icon-cs +
    +
    • + +
  • + +
    + 代码,分支,分流,分叉 +
    +
    .icon-branch +
    +
    • + +
  • + +
    + 文档 +
    +
    .icon-doc +
    +
    • + +
  • + +
    + 系统管理 +
    +
    .icon-sys +
    +
    • + +
  • + +
    + 创建图表 +
    +
    .icon-creat +
    +
    • + +
  • + +
    + 可视化 +
    +
    .icon-data +
    +
    • + +
  • + +
    + 菜单 +
    +
    .icon-menu +
    +
    • + +
  • + +
    + icon-user +
    +
    .icon-user +
    +
    • + +
  • + +
    + 表单管理 +
    +
    .icon-form +
    +
    • + +
  • + +
    + 列表 +
    +
    .icon-list +
    +
    • + +
  • + +
    + 操作日志 +
    +
    .icon-log +
    +
    • + +
  • + +
    + 字典管理 +
    +
    .icon-dict +
    +
    • + +
  • + +
    + 岗位 +
    +
    .icon-post +
    +
    • + +
  • + +
    + 角色管理 +
    +
    .icon-role +
    +
    • + +
  • + +
    + 管理登录日志 +
    +
    .icon-log2 +
    +
    • + +
  • + +
    + 系统工具 +
    +
    .icon-tool +
    +
    • + +
  • + +
    + 柱状图 +
    +
    .icon-bar +
    +
    • + +
  • + +
    + 407饼图 +
    +
    .icon-pie +
    +
    • + +
  • + +
    + 折线图 +
    +
    .icon-line +
    +
    • + +
  • + +
    + Directory tree +
    +
    .icon-tree2 +
    +
    • + +
  • + +
    + 流式布局 +
    +
    .icon-flex +
    +
    • + +
  • + +
    + divide +
    +
    .icon-div +
    +
    • + +
  • + +
    + 树状图_o +
    +
    .icon-tree +
    +
    • + +
  • + +
    + 时间 +
    +
    .icon-time +
    +
    • + +
  • + +
    + 富文本框 +
    +
    .icon-tinymce +
    +
    • + +
  • + +
    + 评分 +
    +
    .icon-rate +
    +
    • + +
  • + +
    + 滑块 +
    +
    .icon-slider +
    +
    • + +
  • + +
    + 分割线 +
    +
    .icon-divider +
    +
    • + +
  • + +
    + 颜色库 +
    +
    .icon-color +
    +
    • + +
  • + +
    + 导入 +
    +
    .icon-import +
    +
    • + +
  • + +
    + 图片 +
    +
    .icon-image +
    +
    • + +
  • + +
    + 卡片 +
    +
    .icon-card +
    +
    • + +
  • + +
    + help +
    +
    .icon-help +
    +
    • + +
  • + +
    + table +
    +
    .icon-table +
    +
    • + +
  • + +
    + component +
    +
    .icon-component +
    +
    • + +
  • + +
    + 11.符号-级联选择 +
    +
    .icon-link +
    +
    • + +
  • + +
    + cascader +
    +
    .icon-cascader +
    +
    • + +
  • + +
    + 计数器 +
    +
    .icon-number +
    +
    • + +
  • + +
    + 标题 +
    +
    .icon-title +
    +
    • + +
  • + +
    + bootstrap_tabs +
    +
    .icon-tabs +
    +
    • + +
  • + +
    + close +
    +
    .icon-close +
    +
    • + +
  • + +
    + 加号 +
    +
    .icon-plus +
    +
    • + +
  • + +
    + arrow on +
    +
    .icon-arrow +
    +
    • + +
  • + +
    + check +
    +
    .icon-check +
    +
    • + +
  • + +
    + vue +
    +
    .icon-vue +
    +
    • + +
  • + +
    + 开关 +
    +
    .icon-switch +
    +
    • + +
  • + +
    + 保存 +
    +
    .icon-save +
    +
    • + +
  • + +
    + move +
    +
    .icon-move +
    +
    • + +
  • + +
    + clone +
    +
    .icon-clone +
    +
    • + +
  • + +
    + 删 除 (1) +
    +
    .icon-del +
    +
    • + +
  • + +
    + eye +
    +
    .icon-eye +
    +
    • + +
  • + +
    + json +
    +
    .icon-json +
    +
    • + +
  • + +
    + GRID +
    +
    .icon-grid +
    +
    • + +
  • + +
    + 文字 +
    +
    .icon-text +
    +
    • + +
  • + +
    + date +
    +
    .icon-date +
    +
    • + +
  • + +
    + input +
    +
    .icon-input +
    +
    • + +
  • + +
    + check_box-24px +
    +
    .icon-checkbox +
    +
    • + +
  • + +
    + textarea +
    +
    .icon-textarea +
    +
    • + +
  • + +
    + radio +
    +
    .icon-radio +
    +
    • + +
  • + +
    + 下拉选择 +
    +
    .icon-select +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    箭头
    +
    #icon-mouse
    +
    • + +
  • + +
    手，手势
    +
    #icon-hand
    +
    • + +
  • + +
    24gl-unlock4
    +
    #icon-lock-open
    +
    • + +
  • + +
    解锁
    +
    #icon-lock
    +
    • + +
  • + +
    眼睛_隐藏_o
    +
    #icon-eye-close
    +
    • + +
  • + +
    设置边框
    +
    #icon-border
    +
    • + +
  • + +
    文字边框
    +
    #icon-text2
    +
    • + +
  • + +
    m-滚动文字
    +
    #icon-stext
    +
    • + +
  • + +
    发起的
    +
    #icon-apply
    +
    • + +
  • + +
    工作台
    +
    #icon-work
    +
    • + +
  • + +
    待办任务_o
    +
    #icon-todo
    +
    • + +
  • + +
    我发起的
    +
    #icon-applyed
    +
    • + +
  • + +
    我的已办
    +
    #icon-done
    +
    • + +
  • + +
    符号-按钮
    +
    #icon-button
    +
    • + +
  • + +
    设计
    +
    #icon-design
    +
    • + +
  • + +
    数据源管理
    +
    #icon-data-source
    +
    • + +
  • + +
    审批
    +
    #icon-sp
    +
    • + +
  • + +
    抄送
    +
    #icon-cs
    +
    • + +
  • + +
    代码,分支,分流,分叉
    +
    #icon-branch
    +
    • + +
  • + +
    文档
    +
    #icon-doc
    +
    • + +
  • + +
    系统管理
    +
    #icon-sys
    +
    • + +
  • + +
    创建图表
    +
    #icon-creat
    +
    • + +
  • + +
    可视化
    +
    #icon-data
    +
    • + +
  • + +
    菜单
    +
    #icon-menu
    +
    • + +
  • + +
    icon-user
    +
    #icon-user
    +
    • + +
  • + +
    表单管理
    +
    #icon-form
    +
    • + +
  • + +
    列表
    +
    #icon-list
    +
    • + +
  • + +
    操作日志
    +
    #icon-log
    +
    • + +
  • + +
    字典管理
    +
    #icon-dict
    +
    • + +
  • + +
    岗位
    +
    #icon-post
    +
    • + +
  • + +
    角色管理
    +
    #icon-role
    +
    • + +
  • + +
    管理登录日志
    +
    #icon-log2
    +
    • + +
  • + +
    系统工具
    +
    #icon-tool
    +
    • + +
  • + +
    柱状图
    +
    #icon-bar
    +
    • + +
  • + +
    407饼图
    +
    #icon-pie
    +
    • + +
  • + +
    折线图
    +
    #icon-line
    +
    • + +
  • + +
    Directory tree
    +
    #icon-tree2
    +
    • + +
  • + +
    流式布局
    +
    #icon-flex
    +
    • + +
  • + +
    divide
    +
    #icon-div
    +
    • + +
  • + +
    树状图_o
    +
    #icon-tree
    +
    • + +
  • + +
    时间
    +
    #icon-time
    +
    • + +
  • + +
    富文本框
    +
    #icon-tinymce
    +
    • + +
  • + +
    评分
    +
    #icon-rate
    +
    • + +
  • + +
    滑块
    +
    #icon-slider
    +
    • + +
  • + +
    分割线
    +
    #icon-divider
    +
    • + +
  • + +
    颜色库
    +
    #icon-color
    +
    • + +
  • + +
    导入
    +
    #icon-import
    +
    • + +
  • + +
    图片
    +
    #icon-image
    +
    • + +
  • + +
    卡片
    +
    #icon-card
    +
    • + +
  • + +
    help
    +
    #icon-help
    +
    • + +
  • + +
    table
    +
    #icon-table
    +
    • + +
  • + +
    component
    +
    #icon-component
    +
    • + +
  • + +
    11.符号-级联选择
    +
    #icon-link
    +
    • + +
  • + +
    cascader
    +
    #icon-cascader
    +
    • + +
  • + +
    计数器
    +
    #icon-number
    +
    • + +
  • + +
    标题
    +
    #icon-title
    +
    • + +
  • + +
    bootstrap_tabs
    +
    #icon-tabs
    +
    • + +
  • + +
    close
    +
    #icon-close
    +
    • + +
  • + +
    加号
    +
    #icon-plus
    +
    • + +
  • + +
    arrow on
    +
    #icon-arrow
    +
    • + +
  • + +
    check
    +
    #icon-check
    +
    • + +
  • + +
    vue
    +
    #icon-vue
    +
    • + +
  • + +
    开关
    +
    #icon-switch
    +
    • + +
  • + +
    保存
    +
    #icon-save
    +
    • + +
  • + +
    move
    +
    #icon-move
    +
    • + +
  • + +
    clone
    +
    #icon-clone
    +
    • + +
  • + +
    删 除 (1)
    +
    #icon-del
    +
    • + +
  • + +
    eye
    +
    #icon-eye
    +
    • + +
  • + +
    json
    +
    #icon-json
    +
    • + +
  • + +
    GRID
    +
    #icon-grid
    +
    • + +
  • + +
    文字
    +
    #icon-text
    +
    • + +
  • + +
    date
    +
    #icon-date
    +
    • + +
  • + +
    input
    +
    #icon-input
    +
    • + +
  • + +
    check_box-24px
    +
    #icon-checkbox
    +
    • + +
  • + +
    textarea
    +
    #icon-textarea
    +
    • + +
  • + +
    radio
    +
    #icon-radio
    +
    • + +
  • + +
    下拉选择
    +
    #icon-select
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css new file mode 100644 index 000000000..aca20b140 --- /dev/null +++ b/src/assets/iconfont/iconfont.css @@ -0,0 +1,323 @@ +@font-face { + font-family: "iconfont"; /* Project id 2578019 */ + src: url('iconfont.woff2?t=1683511822799') format('woff2'), + url('iconfont.woff?t=1683511822799') format('woff'), + url('iconfont.ttf?t=1683511822799') format('truetype'); +} + +.iconfont,[class*="icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-mouse:before { + content: "\e60b"; +} + +.icon-hand:before { + content: "\e6cf"; +} + +.icon-lock-open:before { + content: "\e9d6"; +} + +.icon-lock:before { + content: "\e669"; +} + +.icon-eye-close:before { + content: "\ebcd"; +} + +.icon-border:before { + content: "\e673"; +} + +.icon-text2:before { + content: "\e607"; +} + +.icon-stext:before { + content: "\e801"; +} + +.icon-apply:before { + content: "\e606"; +} + +.icon-work:before { + content: "\e68c"; +} + +.icon-todo:before { + content: "\ebb1"; +} + +.icon-applyed:before { + content: "\e633"; +} + +.icon-done:before { + content: "\e60d"; +} + +.icon-button:before { + content: "\e690"; +} + +.icon-design:before { + content: "\e62c"; +} + +.icon-data-source:before { + content: "\e617"; +} + +.icon-sp:before { + content: "\e626"; +} + +.icon-cs:before { + content: "\e605"; +} + +.icon-branch:before { + content: "\e993"; +} + +.icon-doc:before { + content: "\e7d0"; +} + +.icon-sys:before { + content: "\e634"; +} + +.icon-creat:before { + content: "\e661"; +} + +.icon-data:before { + content: "\e602"; +} + +.icon-menu:before { + content: "\e62f"; +} + +.icon-user:before { + content: "\e66b"; +} + +.icon-form:before { + content: "\e625"; +} + +.icon-list:before { + content: "\ec6b"; +} + +.icon-log:before { + content: "\e604"; +} + +.icon-dict:before { + content: "\e668"; +} + +.icon-post:before { + content: "\e658"; +} + +.icon-role:before { + content: "\e618"; +} + +.icon-log2:before { + content: "\ea45"; +} + +.icon-tool:before { + content: "\e628"; +} + +.icon-bar:before { + content: "\e6ce"; +} + +.icon-pie:before { + content: "\e902"; +} + +.icon-line:before { + content: "\ec66"; +} + +.icon-tree2:before { + content: "\e892"; +} + +.icon-flex:before { + content: "\e608"; +} + +.icon-div:before { + content: "\e60f"; +} + +.icon-tree:before { + content: "\ebb3"; +} + +.icon-time:before { + content: "\e600"; +} + +.icon-tinymce:before { + content: "\e66f"; +} + +.icon-rate:before { + content: "\e69d"; +} + +.icon-slider:before { + content: "\e627"; +} + +.icon-divider:before { + content: "\e638"; +} + +.icon-color:before { + content: "\ee22"; +} + +.icon-import:before { + content: "\e616"; +} + +.icon-image:before { + content: "\e63e"; +} + +.icon-card:before { + content: "\e622"; +} + +.icon-help:before { + content: "\e61c"; +} + +.icon-table:before { + content: "\e6a9"; +} + +.icon-component:before { + content: "\e620"; +} + +.icon-link:before { + content: "\e623"; +} + +.icon-cascader:before { + content: "\e624"; +} + +.icon-number:before { + content: "\e647"; +} + +.icon-title:before { + content: "\e61d"; +} + +.icon-tabs:before { + content: "\e6d4"; +} + +.icon-close:before { + content: "\e615"; +} + +.icon-plus:before { + content: "\e603"; +} + +.icon-arrow:before { + content: "\e61b"; +} + +.icon-check:before { + content: "\e6c1"; +} + +.icon-vue:before { + content: "\e69a"; +} + +.icon-switch:before { + content: "\e646"; +} + +.icon-save:before { + content: "\e61f"; +} + +.icon-move:before { + content: "\e696"; +} + +.icon-clone:before { + content: "\e692"; +} + +.icon-del:before { + content: "\e67d"; +} + +.icon-eye:before { + content: "\e601"; +} + +.icon-json:before { + content: "\e60e"; +} + +.icon-grid:before { + content: "\e652"; +} + +.icon-text:before { + content: "\e621"; +} + +.icon-date:before { + content: "\e64c"; +} + +.icon-input:before { + content: "\e629"; +} + +.icon-checkbox:before { + content: "\e61e"; +} + +.icon-textarea:before { + content: "\e60a"; +} + +.icon-radio:before { + content: "\e6b1"; +} + +.icon-select:before { + content: "\e64d"; +} + diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js new file mode 100644 index 000000000..97f39d9c5 --- /dev/null +++ b/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_2578019='',function(l){var c=(c=document.getElementsByTagName("script"))[c.length-1],h=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var a,t,v,o,i,s=function(c,h){h.parentNode.insertBefore(c,h)};if(h&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}a=function(){var c,h=document.createElement("div");h.innerHTML=l._iconfont_svg_string_2578019,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(c=document.body).firstChild?s(h,c.firstChild):c.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),a()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(v=a,o=l.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,z())})}function z(){i||(i=!0,v())}function m(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}z()}}(window); \ No newline at end of file diff --git a/src/assets/iconfont/iconfont.json b/src/assets/iconfont/iconfont.json new file mode 100644 index 000000000..006d59d6c --- /dev/null +++ b/src/assets/iconfont/iconfont.json @@ -0,0 +1,548 @@ +{ + "id": "2578019", + "name": "formDemo", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "13644674", + "name": "箭头", + "font_class": "mouse", + "unicode": "e60b", + "unicode_decimal": 58891 + }, + { + "icon_id": "18372381", + "name": "手，手势", + "font_class": "hand", + "unicode": "e6cf", + "unicode_decimal": 59087 + }, + { + "icon_id": "7577422", + "name": "24gl-unlock4", + "font_class": "lock-open", + "unicode": "e9d6", + "unicode_decimal": 59862 + }, + { + "icon_id": "658044", + "name": "解锁", + "font_class": "lock", + "unicode": "e669", + "unicode_decimal": 58985 + }, + { + "icon_id": "5388071", + "name": "眼睛_隐藏_o", + "font_class": "eye-close", + "unicode": "ebcd", + "unicode_decimal": 60365 + }, + { + "icon_id": "3294800", + "name": "设置边框", + "font_class": "border", + "unicode": "e673", + "unicode_decimal": 58995 + }, + { + "icon_id": "11179879", + "name": "文字边框", + "font_class": "text2", + "unicode": "e607", + "unicode_decimal": 58887 + }, + { + "icon_id": "21529713", + "name": "m-滚动文字", + "font_class": "stext", + "unicode": "e801", + "unicode_decimal": 59393 + }, + { + "icon_id": "33172809", + "name": "发起的", + "font_class": "apply", + "unicode": "e606", + "unicode_decimal": 58886 + }, + { + "icon_id": "1206679", + "name": "工作台", + "font_class": "work", + "unicode": "e68c", + "unicode_decimal": 59020 + }, + { + "icon_id": "5388003", + "name": "待办任务_o", + "font_class": "todo", + "unicode": "ebb1", + "unicode_decimal": 60337 + }, + { + "icon_id": "7158013", + "name": "我发起的", + "font_class": "applyed", + "unicode": "e633", + "unicode_decimal": 58931 + }, + { + "icon_id": "20438918", + "name": "我的已办", + "font_class": "done", + "unicode": "e60d", + "unicode_decimal": 58893 + }, + { + "icon_id": "1766470", + "name": "符号-按钮", + "font_class": "button", + "unicode": "e690", + "unicode_decimal": 59024 + }, + { + "icon_id": "1150901", + "name": "设计", + "font_class": "design", + "unicode": "e62c", + "unicode_decimal": 58924 + }, + { + "icon_id": "12771491", + "name": "数据源管理", + "font_class": "data-source", + "unicode": "e617", + "unicode_decimal": 58903 + }, + { + "icon_id": "6321263", + "name": "审批", + "font_class": "sp", + "unicode": "e626", + "unicode_decimal": 58918 + }, + { + "icon_id": "12911863", + "name": "抄送", + "font_class": "cs", + "unicode": "e605", + "unicode_decimal": 58885 + }, + { + "icon_id": "18170243", + "name": "代码,分支,分流,分叉", + "font_class": "branch", + "unicode": "e993", + "unicode_decimal": 59795 + }, + { + "icon_id": "5371107", + "name": "文档", + "font_class": "doc", + "unicode": "e7d0", + "unicode_decimal": 59344 + }, + { + "icon_id": "12959365", + "name": "系统管理", + "font_class": "sys", + "unicode": "e634", + "unicode_decimal": 58932 + }, + { + "icon_id": "24007617", + "name": "创建图表", + "font_class": "creat", + "unicode": "e661", + "unicode_decimal": 58977 + }, + { + "icon_id": "24069228", + "name": "可视化", + "font_class": "data", + "unicode": "e602", + "unicode_decimal": 58882 + }, + { + "icon_id": "339044", + "name": "菜单", + "font_class": "menu", + "unicode": "e62f", + "unicode_decimal": 58927 + }, + { + "icon_id": "397442", + "name": "icon-user", + "font_class": "user", + "unicode": "e66b", + "unicode_decimal": 58987 + }, + { + "icon_id": "4329375", + "name": "表单管理", + "font_class": "form", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "5961366", + "name": "列表", + "font_class": "list", + "unicode": "ec6b", + "unicode_decimal": 60523 + }, + { + "icon_id": "7474663", + "name": "操作日志", + "font_class": "log", + "unicode": "e604", + "unicode_decimal": 58884 + }, + { + "icon_id": "8605754", + "name": "字典管理", + "font_class": "dict", + "unicode": "e668", + "unicode_decimal": 58984 + }, + { + "icon_id": "8949009", + "name": "岗位", + "font_class": "post", + "unicode": "e658", + "unicode_decimal": 58968 + }, + { + "icon_id": "10213489", + "name": "角色管理", + "font_class": "role", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "26876046", + "name": "管理登录日志", + "font_class": "log2", + "unicode": "ea45", + "unicode_decimal": 59973 + }, + { + "icon_id": "34047671", + "name": "系统工具", + "font_class": "tool", + "unicode": "e628", + "unicode_decimal": 58920 + }, + { + "icon_id": "1057386", + "name": "柱状图", + "font_class": "bar", + "unicode": "e6ce", + "unicode_decimal": 59086 + }, + { + "icon_id": "1727592", + "name": "407饼图", + "font_class": "pie", + "unicode": "e902", + "unicode_decimal": 59650 + }, + { + "icon_id": "5961328", + "name": "折线图", + "font_class": "line", + "unicode": "ec66", + "unicode_decimal": 60518 + }, + { + "icon_id": "11307823", + "name": "Directory tree", + "font_class": "tree2", + "unicode": "e892", + "unicode_decimal": 59538 + }, + { + "icon_id": "20360961", + "name": "流式布局", + "font_class": "flex", + "unicode": "e608", + "unicode_decimal": 58888 + }, + { + "icon_id": "12225038", + "name": "divide", + "font_class": "div", + "unicode": "e60f", + "unicode_decimal": 58895 + }, + { + "icon_id": "5388006", + "name": "树状图_o", + "font_class": "tree", + "unicode": "ebb3", + "unicode_decimal": 60339 + }, + { + "icon_id": "77110", + "name": "时间", + "font_class": "time", + "unicode": "e600", + "unicode_decimal": 58880 + }, + { + "icon_id": "2471358", + "name": "富文本框", + "font_class": "tinymce", + "unicode": "e66f", + "unicode_decimal": 58991 + }, + { + "icon_id": "8687733", + "name": "评分", + "font_class": "rate", + "unicode": "e69d", + "unicode_decimal": 59037 + }, + { + "icon_id": "11121364", + "name": "滑块", + "font_class": "slider", + "unicode": "e627", + "unicode_decimal": 58919 + }, + { + "icon_id": "11121454", + "name": "分割线", + "font_class": "divider", + "unicode": "e638", + "unicode_decimal": 58936 + }, + { + "icon_id": "22385724", + "name": "颜色库", + "font_class": "color", + "unicode": "ee22", + "unicode_decimal": 60962 + }, + { + "icon_id": "6244963", + "name": "导入", + "font_class": "import", + "unicode": "e616", + "unicode_decimal": 58902 + }, + { + "icon_id": "145454", + "name": "图片", + "font_class": "image", + "unicode": "e63e", + "unicode_decimal": 58942 + }, + { + "icon_id": "646357", + "name": "卡片", + "font_class": "card", + "unicode": "e622", + "unicode_decimal": 58914 + }, + { + "icon_id": "737945", + "name": "help", + "font_class": "help", + "unicode": "e61c", + "unicode_decimal": 58908 + }, + { + "icon_id": "1467412", + "name": "table", + "font_class": "table", + "unicode": "e6a9", + "unicode_decimal": 59049 + }, + { + "icon_id": "13253956", + "name": "component", + "font_class": "component", + "unicode": "e620", + "unicode_decimal": 58912 + }, + { + "icon_id": "15196938", + "name": "11.符号-级联选择", + "font_class": "link", + "unicode": "e623", + "unicode_decimal": 58915 + }, + { + "icon_id": "16880964", + "name": "cascader", + "font_class": "cascader", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "17374561", + "name": "计数器", + "font_class": "number", + "unicode": "e647", + "unicode_decimal": 58951 + }, + { + "icon_id": "19657932", + "name": "标题", + "font_class": "title", + "unicode": "e61d", + "unicode_decimal": 58909 + }, + { + "icon_id": "8017649", + "name": "bootstrap_tabs", + "font_class": "tabs", + "unicode": "e6d4", + "unicode_decimal": 59092 + }, + { + "icon_id": "7826085", + "name": "close", + "font_class": "close", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "6756281", + "name": "加号", + "font_class": "plus", + "unicode": "e603", + "unicode_decimal": 58883 + }, + { + "icon_id": "902007", + "name": "arrow on", + "font_class": "arrow", + "unicode": "e61b", + "unicode_decimal": 58907 + }, + { + "icon_id": "1176866", + "name": "check", + "font_class": "check", + "unicode": "e6c1", + "unicode_decimal": 59073 + }, + { + "icon_id": "13744032", + "name": "vue", + "font_class": "vue", + "unicode": "e69a", + "unicode_decimal": 59034 + }, + { + "icon_id": "20905073", + "name": "开关", + "font_class": "switch", + "unicode": "e646", + "unicode_decimal": 58950 + }, + { + "icon_id": "11493812", + "name": "保存", + "font_class": "save", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "384286", + "name": "move", + "font_class": "move", + "unicode": "e696", + "unicode_decimal": 59030 + }, + { + "icon_id": "836441", + "name": "clone", + "font_class": "clone", + "unicode": "e692", + "unicode_decimal": 59026 + }, + { + "icon_id": "18367976", + "name": "删 除 (1)", + "font_class": "del", + "unicode": "e67d", + "unicode_decimal": 59005 + }, + { + "icon_id": "925051", + "name": "eye", + "font_class": "eye", + "unicode": "e601", + "unicode_decimal": 58881 + }, + { + "icon_id": "15214524", + "name": "json", + "font_class": "json", + "unicode": "e60e", + "unicode_decimal": 58894 + }, + { + "icon_id": "350628", + "name": "GRID", + "font_class": "grid", + "unicode": "e652", + "unicode_decimal": 58962 + }, + { + "icon_id": "4521248", + "name": "文字", + "font_class": "text", + "unicode": "e621", + "unicode_decimal": 58913 + }, + { + "icon_id": "15167569", + "name": "date", + "font_class": "date", + "unicode": "e64c", + "unicode_decimal": 58956 + }, + { + "icon_id": "16880988", + "name": "input", + "font_class": "input", + "unicode": "e629", + "unicode_decimal": 58921 + }, + { + "icon_id": "18536117", + "name": "check_box-24px", + "font_class": "checkbox", + "unicode": "e61e", + "unicode_decimal": 58910 + }, + { + "icon_id": "18727247", + "name": "textarea", + "font_class": "textarea", + "unicode": "e60a", + "unicode_decimal": 58890 + }, + { + "icon_id": "19457233", + "name": "radio", + "font_class": "radio", + "unicode": "e6b1", + "unicode_decimal": 59057 + }, + { + "icon_id": "20962223", + "name": "下拉选择", + "font_class": "select", + "unicode": "e64d", + "unicode_decimal": 58957 + } + ] +} diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf new file mode 100644 index 000000000..fd0000aa0 Binary files /dev/null and b/src/assets/iconfont/iconfont.ttf differ diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff new file mode 100644 index 000000000..c9c54907f Binary files /dev/null and b/src/assets/iconfont/iconfont.woff differ diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2 new file mode 100644 index 000000000..d60d37594 Binary files /dev/null and b/src/assets/iconfont/iconfont.woff2 differ diff --git a/src/assets/icons/select1.svg b/src/assets/icons/select1.svg new file mode 100644 index 000000000..e6812fe7e --- /dev/null +++ b/src/assets/icons/select1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/select3.svg b/src/assets/icons/select3.svg new file mode 100644 index 000000000..82ff6d3a2 --- /dev/null +++ b/src/assets/icons/select3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/image/icon_file.png b/src/assets/image/icon_file.png new file mode 100644 index 000000000..857d35b4d Binary files /dev/null and b/src/assets/image/icon_file.png differ diff --git a/src/assets/image/icon_people.png b/src/assets/image/icon_people.png new file mode 100644 index 000000000..ae4e7af25 Binary files /dev/null and b/src/assets/image/icon_people.png differ diff --git a/src/assets/image/next_level.png b/src/assets/image/next_level.png new file mode 100644 index 000000000..53d2837c9 Binary files /dev/null and b/src/assets/image/next_level.png differ diff --git a/src/assets/image/next_level_active.png b/src/assets/image/next_level_active.png new file mode 100644 index 000000000..1a52ae863 Binary files /dev/null and b/src/assets/image/next_level_active.png differ diff --git a/src/assets/img/data.png b/src/assets/img/data.png new file mode 100644 index 000000000..d167c0d99 Binary files /dev/null and b/src/assets/img/data.png differ diff --git a/src/assets/img/echarts.png b/src/assets/img/echarts.png new file mode 100644 index 000000000..c90c3bc63 Binary files /dev/null and b/src/assets/img/echarts.png differ diff --git a/src/assets/img/flow.png b/src/assets/img/flow.png new file mode 100644 index 000000000..1650d1e3e Binary files /dev/null and b/src/assets/img/flow.png differ diff --git a/src/assets/img/form-list.png b/src/assets/img/form-list.png new file mode 100644 index 000000000..144f3e092 Binary files /dev/null and b/src/assets/img/form-list.png differ diff --git a/src/assets/img/form.png b/src/assets/img/form.png new file mode 100644 index 000000000..547cdaf5f Binary files /dev/null and b/src/assets/img/form.png differ diff --git a/src/assets/img/ruler.png b/src/assets/img/ruler.png new file mode 100644 index 000000000..6b516cbba Binary files /dev/null and b/src/assets/img/ruler.png differ diff --git a/src/assets/scss/element-var.scss b/src/assets/scss/element-var.scss new file mode 100644 index 000000000..83ec5b9b5 --- /dev/null +++ b/src/assets/scss/element-var.scss @@ -0,0 +1,9 @@ +@charset "UTF-8"; +:root { + /*--el-border-base: 1px solid red*/ + --el-menu-item-height:44px; + --el-menu-base-level-padding:10px; + .el-header{ + --el-header-height:40px + } +} diff --git a/src/assets/scss/flow.scss b/src/assets/scss/flow.scss new file mode 100644 index 000000000..8fe30bb6b --- /dev/null +++ b/src/assets/scss/flow.scss @@ -0,0 +1,125 @@ +.flow-container { + $background: #fff; + $borderColor: #eee; + overflow-x: auto; + .flow-main { min-width: min-content;display: flex;flex-direction: column;align-items: center;} + .flow-group {position: relative;background: $background;min-width: min-content} + .flow-item {border: 1px solid $borderColor;box-shadow: 0 0 6px rgba(102, 102, 102, 0.1);height: 80px;border-radius: 5px;overflow: hidden;display: flex;flex-direction: column;transition: all .3s;position: relative;z-index: 2;background: $background;width: 180px; + &:hover {border-color: rgb(85, 197, 192); + .title .close {visibility: visible;opacity: 1} + } + .title {background: rgb(85, 197, 192);color: #fff;display: flex;align-items: center;padding: 3px 10px;justify-content: space-between; + span {flex: 2} + .close {transform: scale(.8);visibility: hidden;transition: all .3s;opacity: 0;cursor: pointer} + i {font-size: 14px;margin-right: 3px} + &.bg-2 {background: rgb(255, 148, 62)} + &.bg-5 {background: none;color: #666} + &.bg-3 {background: rgb(50, 150, 250)} + } + .text {flex: 1;display: flex;align-items: center;padding: 5px 15px;cursor: pointer; + div {display: block;max-height: 38px;overflow: hidden;color: #666;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} + } + } + .flow-add {padding: 8px 0;position: relative;font-size: 12px; + i {width: 30px;height: 30px;border-radius: 50%;border: 1px solid #eee;box-shadow: 0 0 6px rgba(102, 102, 102, 0.1);display: flex;align-items: center;justify-content: center;margin: 0 auto;background: $background;position: relative;z-index: 2;cursor: pointer;transform: scale(.7); + } + &:before {content: '';display: block;width: 1px;left: 50%;background: #eee;position: absolute;top: 0;bottom: 0} + } + .flow-col {flex: 1;margin: 0 5px;display: flex;flex-direction: column;align-items: center;position: relative; + &:before {content: '';display: block;width: 1px;top: 0; bottom: 0;left: 50%;background: #eee;position: absolute} + } + .flow-row {display: flex;position: relative} + .flow-branch-btn {display: none} + .flow-branch {padding: 40px 0 1px;display: flex;flex-direction: column; + .flow-branch-btn {display: block;position: absolute;left: 50%;top: 0;transform: translateX(-50%);z-index: 2} + &:before {content: '';display: block;left: 0;right: 0;bottom: 46px;top: 12px;border: 1px solid #eee;position: absolute} + .flow-col { // 中线 + &:before {top: -28px} + &:after {content: '';display: none;width: 50%;top: 0;background: $borderColor;} + } + .mask-left, .mask-right {position: absolute;background: $background;top: -28px;display: block;bottom: -1px;width: calc(50% + 9px)} + .mask-left {left: -10px} + .mask-right {right: -10px} + } + .flow-end { + box-shadow: 0 2px 10px 0 rgb(145 145 153 / 50%);margin: 0 auto 30px;border-radius: 50%;position: relative;background: #bcbcc5;width: 50px;height: 50px;color: #fff;display: flex;align-items: center;justify-content: center; + } + &.type-show { + // 展示模式 + .flow-branch {padding-top: 28px} + .flow-item {margin-bottom: 20px} + .flow-branch:before {bottom: 0;top: 0} + .flow-end {position: relative;margin-top: 20px; + &:before {content: '';width: 1px;background: $borderColor;position: absolute;left: 50%;top: -20px;height: 20px;} + } + } + .tools {text-align: right} +} +.flow-node-down { + h3 {font-size: 14px;margin-bottom: 10px} + div {display: flex} + i {font-size: 14px;margin-right: 5px} +} +.flow-container.horizontal { + $borderColor: #eee; + .flow-main {flex-direction: row;justify-content: center} + .flow-group:first-child {overflow: hidden;} + .flow-col {flex-direction: row;margin: 8px 0; + &:before {width: auto; right: 0;height: 1px;left: -29px;top: 50%} + } + .flow-add {padding: 0 8px; + &:before {left: 0;top: 50%;height: 1px;width: 100%} + } + .flow-row {flex-direction: column} + .flow-branch {flex-direction: row;align-items: center;padding: 0; + .flow-branch-btn {position: static;transform: translateX(0);margin-right: 8px; + button {width: 50px;white-space: normal;padding: 15px 10px;overflow: hidden;line-height: 14px} + } + &:before {bottom: 0;top: 0;left: 30px;right: 45px} + .mask-left, .mask-right {left: -29px;right: -1px;width: auto; height: calc(50% + 8px)} + .mask-left {top: -8px;} + .mask-right {bottom: -9px;top: auto} + .flow-col { + + } + } + .flow-end {margin: 0} + &.type-show { + .flow-branch {margin-left: 20px} + .flow-item {margin-right: 20px;margin-bottom: 0} + .flow-branch .flow-col:before {left: -20px} + .flow-branch:before {left: -20px;right: -1px} + .flow-end {position: relative;margin-left: 20px; + &:before {content: '';height: 1px;background: $borderColor;position: absolute;top: 50%;left: -20px;width: 20px;} + } + } +} +// 侧栏drawer +.flow-modal-class { + $borderColor: #eee; + .el-drawer__header {border-bottom: 1px solid $borderColor;margin-bottom: 0;padding-bottom: 20px} +} +.flow-drawer { + .tip {margin-bottom: 20px;color: #999;line-height: 22px} +} +// 设计主页 +.design-flow-container {position: relative; + .tools {position: absolute;right: 20px;top: 13px;z-index: 2} + .tabs-info {display: flex;justify-content: center; + form {width: 680px;} + } +} +//工作台 +.task-apply { + .item {margin-bottom: 20px; + h3 {font-size: 14px;margin-bottom: 10px} + } + .list {display: flex;margin: 0 -8px; + > div {border: 1px solid #dcdfe6;padding: 16px;border-radius: 8px;height: 100px;margin: 0 8px;width: 24%;display: flex;align-items: center;font-weight: 700;transition: all .3s;cursor: pointer;box-shadow: 0 0 2px #ddd; + &:hover {border-color: #409eff} + } + .icon {font-size: 36px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 4px;overflow: hidden;color: #fff;margin-right: 10px; + &:before {font-weight: 400} + } + } +} diff --git a/src/assets/scss/form.scss b/src/assets/scss/form.scss new file mode 100644 index 000000000..28742b847 --- /dev/null +++ b/src/assets/scss/form.scss @@ -0,0 +1,296 @@ +@charset "UTF-8"; +// 左侧栏 +$mainColor: #66b1ff; +.design-container {margin: 10px !important;display: flex; background-color: #FFFFFF;} +.components-list {width: 250px;padding: 8px 0;overflow-y: auto;height: calc(100vh - 104px);position: relative;overflow-x: hidden; + .title {padding: 8px 12px;position: relative; + .template {position: absolute;right: 12px;top: 0;padding: 8px;cursor: pointer} + } + ul { position: relative;overflow: hidden;padding: 0 10px 10px;margin: 0; + li {font-size: 13px;display: flex;width: 48%;line-height: 28px;position: relative;float: left;left: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 0 1% 5px;color: #333;padding: 0 10px;border: 1px solid transparent;background: #f4f6fc;user-select: none;align-items: center; + i {margin-right: 5px} + &:hover { + color: $mainColor;border: 1px dashed $mainColor;cursor: move; + } + &.title {padding: 0 10px} + } + } + .content {margin-left: 12px} +} +.use-template {position: absolute;left: -100%;top: 0;width: 100%;bottom: 0;background: #fff;opacity: 0; + &.active {animation: templateAni .5s forwards;} + .close {position: absolute;right: 5px;top: 5px;font-size: 14px;cursor: pointer} + .list {padding: 30px 10px;overflow-y: auto; + .item {box-shadow: 0 0 4px rgba(0, 21, 41, 0.1);padding: 10px;text-align: center;transition: all .5s;cursor: pointer;margin-bottom: 10px; + img {display: block;width: 100%;margin: 0 auto 10px} + &:hover {box-shadow: 0 0 4px rgba(0, 21, 41, 0.25);} + } + } + .no-date {text-align: center;padding-top: 20px;color: #999} +} +@keyframes templateAni { + 100% {opacity: 1;left: 0} +} +// 框架 +.main-body {flex: 2; border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;margin: 0;overflow: hidden; + .empty-tips {text-align: center;width: 100%;font-size: 20px;color: #ccc;position: absolute;left: 0;top: 100px; + } + .main-form { background: #fff;border: 1px dashed #999;margin: 10px;height: calc(100vh - 165px);overflow-y: auto;overflow-x: hidden;position: relative} +} +// 中间按钮工具 +.main-tools {line-height: 26px;border-bottom: 2px solid #e4e7ed;margin-right: 10px;padding: 8px 0;display: flex;align-items: center;justify-content: flex-end; + button {color: $mainColor; + i {padding-right: 5px} + } +} +.add-form {padding: 0px;box-sizing: border-box; + // 格珊 + .form-row { + .form-col { + &.active-col {border: 3px solid $mainColor;position: relative; + > .drag-control {display: block;} + > .tooltip {display: block;} + } + } + } + .title {border-bottom: 1px solid #ddd;font-weight: 700;font-size: 14px;height: 30px;padding: 0 5px;margin-bottom: 22px} + .form-tabs { + .drag {min-height: 80px;} + } + .group-card { + .el-collapse {border: 0} + .el-collapse-item__header {font-weight: 700;border-bottom: 1px solid #ddd;margin-bottom: 20px} + .el-collapse-item__wrap {border: 0} + } + .group-inputSlot {display: none} + .form-table {margin-bottom: 22px; + .drag {border: 0;display: flex;overflow-x: auto;white-space: nowrap;padding: 0;flex-wrap: nowrap; + > div {min-width: 150px;width: auto} + } + .el-form-item {display: block} + } + .table-btn {padding-top: 10px} + .el-collapse-item__content {padding-bottom: 5px } + .form-table-add { + .el-form-item__label {display: none} + .el-form-item {margin: 0} + .el-table .cell {overflow: inherit; + .el-form-item__error {padding-top: 0} + } + } + .gray {color: #999} + > .drag {border: 0 !important;} + .group-flex { + .flex-group {display: flex;justify-content: space-between; + button {margin-left: 10px} + } + .flex-item {flex: 2;} + } + .group-txt {margin-bottom: 18px} + .div-layout { + /*&.inline { + .drag {display: inline-flex} + .group {width: auto;margin-right: 10px} + }*/ + &.right { + .drag {text-align: right;justify-content: flex-end} + } + &.center { + .drag {text-align: center;justify-content: center} + } + &.left { + + } + } + // 设置默认下input和select一样宽 + .el-select {width: 100%;} + .el-select { + .el-input__wrapper .el-input__suffix {position: absolute;right: 10px} + } + .group {width: 100%} + .drag {display: flex;flex-wrap: wrap} + &.form-row-2 { + .group {width: 50%} + } + &.form-row-3 { + .group {width: 33%} + } + &.form-row-4 { + .group {width: 25%} + } +} +.sidebar-tools {width: 300px;right: 0;top: 0;overflow-y: auto;box-sizing: border-box;padding-bottom: 10px;bottom: 0; height: calc(100vh - 60px); + .form { + .el-form-item {margin-bottom: 10px;} + } + .h3 {font-size: 14px;margin-bottom: 10px;display: flex;align-items: center; + h3 {font-size: 14px} + } + .el-tabs__nav-wrap {padding: 0 10px} + .el-tabs__content {padding: 0 10px} + .icon-del {cursor: pointer} + .option-radio { + > label {margin-right: 8px} + } + .event-btn { + button {margin: 0 12px 5px 0} + } +} +#editJson, #editJsonCopy {width: 100%;height: calc(100vh - 65px)} +#editJsonCopy {height: calc(100vh - 350px)} +.ace-dialog {background: #1e1e1e; + .el-drawer__body {padding: 0} + .el-drawer__header {margin: 0;color: #e9e9e9;font-size: 12px;padding: 3px 10px} + .dialog-footer {text-align: center;padding-top: 5px;} +} +.export-dialog { + .el-dialog__body {padding: 0 20px} +} +.design-form {min-height: calc(100vh - 170px); + > div {height: 100%} + > .drag {min-height: calc(100vh - 170px) !important;} + .ghost { + background: #F56C6C; + border: 2px solid #F56C6C; + outline-width: 0; + height: 3px; + box-sizing: border-box; + font-size: 0; + content: ''; + overflow: hidden; + padding: 0; + width: 100%; + } + .group {border: 1px dashed #ddd;margin: 2px 2px 10px 2px;padding: 5px;position: relative;min-height: 50px; + &.active {border: 3px solid $mainColor;position: relative; + > .drag-control {display: block} + > .tooltip {display: block;} + } + &:hover {border-color: $mainColor;background: #ecf5ff} + > div {margin-bottom: 0} + &:after{content: '';position: absolute;left: 0;top:0;right: 0;bottom: 0;opacity: 0;z-index: 1;display: block;} + &.group-grid,&.group-tabs,&.group-card,&.group-flex,&.group-div,&.group-table{ + &:after{display: none} + } + } + .group-inputSlot {border-color: #eebe77;display: inline-block; + &:hover, &.active {border-color: #eebe77 !important;} + } + .tooltip {display: none;position: absolute;font-size: 12px;top: 0;right: 0;z-index: 5} + .drag-control {display: none; + .item-control {position: absolute;right: 0;bottom: 0;z-index: 2; display: flex;align-items: center;height: 24px;background: $mainColor; + i {width: 24px;height: 24px;color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer} + } + .drag-move {position: absolute;left: 0;top: 0;z-index: 2;width: 24px;height: 24px;background: $mainColor;color: #fff;text-align: center;line-height: 24px;cursor: move} + } + .drag {height: 100%;border: 1px dashed #ddd;min-height: 40px;margin: 0 2px;padding: 5px;align-content: flex-start;} + &.form-row-2 { + .group {width: 48%} + } + &.form-row-3 { + .group {width: 32%} + } + &.form-row-4 { + .group {width: 23%} + } +} +/*表格设计*/ +.design-table { + .main-body {border-left: 0} + .header {position: relative; + .field {position: absolute;left: 10px;top: 7px;display: flex; + } + } + .components-list { + .content {padding: 0 12px; + > div {display: flex;flex-wrap: wrap;justify-content: flex-start; + label {margin: 0 10px 8px 0 !important;} + } + } + } + .main-table {padding: 10px 20px; + .add-form {min-height: auto;display: flex; + > .drag {height: auto;min-height: auto !important;} + } + .el-divider {margin: 8px 0 0} + .table-tip {color: #999;padding: 30px 0;line-height: 22px} + .search-box {position: relative; + &:after {content: '';width: 100%;height: 100%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: 2;cursor: pointer;} + .group {width: auto;margin-right: 10px} + } + .control-btn {padding: 10px 0; + margin-bottom: 10px;display: flex;justify-content: space-between;align-items: center + } + .tip {border: 1px dotted #ddd;padding: 3px 5px;border-radius: 5px;color: #999;text-align: center;cursor: pointer} + .el-table__header { + th { + .cell {position: relative;} + .icon-close {display: none;font-size: 12px;margin-left: 12px;cursor: pointer;position: absolute;} + &:hover { + .icon-close {display: inline-block} + } + } + } + } + .table-tag { + .el-form-item__content {display: flex; + > div {flex: 2;margin-right: 5px;} + } + } +} +.table-field-list { + h3 {font-size: 14px} + .item {margin-bottom: 20px} + .list {display: flex;justify-content: flex-start;flex-wrap: wrap; + label {width: 25%;margin: 0} + } +} +.table-list-comm {display: flex;justify-content: space-between; + .tree-sidebar {width: 180px;border-right: 1px solid #ddd;padding-right: 10px;margin-right: 10px;flex-shrink: 0; + .el-input {margin-bottom: 10px} + } + .table-list {display: block;width: 100%} + .table-main {margin-bottom: 20px; + &.hide-vertical-scroll { // 固定了横向滚动条时，禁用表格固定头部的滚动 + .el-scrollbar__wrap {overflow: hidden;} + .is-vertical {display: none !important;} + } + .table-operate-btn {display: flex;align-items: center} + } + .table-search {position: relative; + form {display: flex;flex-wrap: wrap;padding-bottom: 0;border-bottom: 1px solid #dcdfe6;margin-bottom: 10px;} + .drag {display: flex;flex-wrap: wrap; + > div {margin-right: 10px} + } + .group {width: auto} + .search-icon {margin-left: 10px;height: 30px;cursor: pointer;position: absolute;right: 0;top: 0} + .autoHeight-enter-active, + .autoHeight-leave-active { + max-height: 200px; + transition: all .6s; + overflow: hidden; + } + .autoHeight-enter-from, + .autoHeight-leave-to { + max-height: 0; + } + } + .control-btn {margin-bottom: 10px;display: flex;justify-content: space-between;align-items: center} +} +/*图片文件上传*/ +.upload-style { + .limit { + .el-upload {display: none} + // 超出limit时不显示上传按钮 + } + .el-upload-list__item-preview {display: none !important;} + // 不显示点击放大按钮 + .el-upload--picture { + .icon-plus {font-size: 28px;display: flex;align-items: center;justify-content: center;color: #8c939d;width: 148px;height: 148px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;overflow: hidden;background: #fbfdff} + } +} +/*分页*/ +.table-page {padding-top: 10px;display: flex;justify-content: flex-end} +//.el-scrollbar__wrap{overflow: hidden!important;} +//.el-scrollbar__bar.is-vertical{display: none} + diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss new file mode 100644 index 000000000..aad4dbbe5 --- /dev/null +++ b/src/assets/scss/index.scss @@ -0,0 +1 @@ +@import "layout","form","flow","screen"; diff --git a/src/assets/scss/layout.scss b/src/assets/scss/layout.scss new file mode 100644 index 000000000..e176391c6 --- /dev/null +++ b/src/assets/scss/layout.scss @@ -0,0 +1,120 @@ +html, body, div, span, ul, li, i, h3, p {margin: 0;padding: 0;} +ul, li {list-style: none} +body {font-size: 14px; font-family: "Microsoft YaHei UI"} +* {box-sizing: border-box} +a{color: #409eff;text-decoration: none} +::-webkit-scrollbar { + width: 8px; + height: 8px; + position: relative; + z-index: 100; +} +::-webkit-scrollbar-thumb { + background-color: #babdc2; + background-clip: padding-box; + min-height: 28px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +::-webkit-scrollbar-corner { + background: #babdc2; +} +/*&::-webkit-scrollbar:$colorGray2; //滚动条整体部分 +::-webkit-scrollbar-button:''; //滚动条两端的按钮 +::-webkit-scrollbar-track:''; //外层轨道 +::-webkit-scrollbar-track-piece:''; //内层滚动槽 +::-webkit-scrollbar-thumb:$colorGray3; //滚动的滑块 +::-webkit-scrollbar-corner:''; //边角 +::-webkit-resizer //定义右下角拖动块的样式*/ +.common-layout { + .common-sidebar { + transition: all 0.3s; + box-shadow: 2px 0 6px rgb(0 21 41 / 35%); + color: #fff; + background-color: rgb(48 65 86); + height: 100vh; + overflow-x: hidden; + .logo { + display: flex; + align-items: center; + font-size: 14px; + height: 40px; + justify-content: center; + cursor: pointer; + font-weight: 700; + img { + width: 14px; + height: 14px; + } + } + .el-menu { + border-right: 0; + .icon{margin-right: 5px;font-size: 15px;opacity: .8} + } + .el-sub-menu .el-menu-item{min-width: 180px} + } + .common-header { + box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); + display: flex; + align-items: center; + justify-content: space-between; + .collapse-icon { + cursor: pointer; + font-size: 18px; + margin-right: 15px; + } + .breadcrumb {flex: 2;} + .comm-header-tool {margin: 0 10px;display: flex; + i {margin: 0 5px;cursor: pointer} + } + } + // 使用整个右侧滚动，没必要固定那个头部浪费空间 + .overflow-scroll{overflow-y: auto;display: block;height: 100vh} + .common-main { + background: #f0f2f5; + padding: 10px; + overflow: hidden; + > div:first-child {border-radius: 5px;padding: 10px 15px;background: #fff;overflow-x: auto; // 横向滚动条放在这里 + &.bg-none{background: none;} + } + } + .tag-tabs {display: flex;justify-content: space-between;align-items: center; + padding: 0 20px; + box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); + .el-tabs__content { + display: none; + } + .el-tabs__nav-wrap::after { + display: none; + } + .el-tabs__item { + padding: 0 10px !important; + } + .el-tabs__header { + margin: 0; + } + .tabs-label { + i {margin-left: 3px} + } + .clear-tag {cursor: pointer} + } + .quit-full {position: fixed;right: 10px;top: 10px;cursor: pointer;z-index: 101} +} +// 设置el-tooltip最大宽度 +.el-popper { + max-width: 400px; +} +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .3s; +} +.fade-transform-enter-from{opacity: .3;transform: translateX(-30px)} +.fade-transform-enter-active { +} +.fade-transform-enter-to{transform: translateX(0);opacity: 1} + +.fade-transform-leave-active { + opacity: 0; + transform: translateX(30px); +} diff --git a/src/assets/scss/screen.scss b/src/assets/scss/screen.scss new file mode 100644 index 000000000..6ee5384cd --- /dev/null +++ b/src/assets/scss/screen.scss @@ -0,0 +1,111 @@ +.bg-black { /*background: rgb(48, 65, 86) !important;margin: -10px;border-radius: 0 !important;color: #fff*/ +} + +.container-screen {display: flex;justify-content: space-between;padding: 0 !important; + .tabs { + .el-tabs__nav {display: flex;justify-content: space-between;width: 100%} + .el-tabs__item {flex: 2;padding: 0;text-align: center} + } + .main-left {width: 180px;transition: all .3s; + .scroll {height: calc(100vh - 114px)} + .components-list {width: 100%; + ul { + li {padding: 0 5px; + i {font-size: 13px;margin-right: 3px} + } + } + } + .layer-list {font-size: 14px;overflow-y: auto; + ul {height: 100%} + li {line-height: 36px;padding: 0 8px;background: #f4f6fc;transition: all .3s;display: flex;justify-content: space-between;align-items: center;border: 1px solid transparent;border-bottom-color: #fff; + span {flex: 2;cursor: move;} + i {margin: 0 3px} + .icon {font-size: 20px;cursor: pointer} + &:hover {color: #66b1ff} + &.active { color: #fff;background: #66b1ff} + &.lock { color: #eebe77; + span {cursor: not-allowed} + } + &.display {opacity: .5} + &.isGroup{padding-left: 20px} + } + } + } + .main-box {flex: 2;border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;height: calc(100vh - 66px);display: flex;flex-direction: column;color: #fff;width: 100%;position: relative;overflow: hidden; + .main-tools {line-height: 20px; + .control-tools {flex: 2;color: #999;margin-left: 20px; + i {margin-right: 5px;cursor: pointer} + .active {color: #409eff} + } + } + .design-box {background: rgb(48, 65, 86);flex: 2;padding: 0 0 0 20px;position: relative;overflow: auto;} + .draw-react {border: 1px solid #409eff;position: absolute;z-index: 999} + .design-canvas {height: 100%;position: absolute;cursor: pointer;top: 20px;left: 20px;transform-origin: left top; + .drag {height: 100%} + .resize-box { + position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px dotted #409eff;z-index: 5; + span {width: 8px;height: 8px;display: block;border-radius: 50%;background: #409eff;position: absolute;border: 1px solid rgba(255, 255, 255, .8); + } + .rs1 {left: -4px;top: -4px;cursor: se-resize;} + .rs2 {left: 50%;top: -4px;margin-left: -4px;cursor: s-resize} + .rs3 {right: -4px;top: -4px;cursor: sw-resize} + .rs4 {left: -4px;top: 50%;margin-top: -4px;cursor: e-resize} + .rs5 {right: -4px;top: 50%;margin-top: -4px;cursor: e-resize} + .rs6 {left: -4px;bottom: -4px;cursor: sw-resize} + .rs7 {left: 50%;bottom: -4px;margin-left: -4px;cursor: s-resize} + .rs8 {right: -4px;bottom: -4px;cursor: se-resize;} + &:hover {background: rgba(64, 158, 255, .5);cursor: move} + .position {font-size: 12px;position: absolute;left: 0;top: -20px} + } + &.preview {position: fixed;left: 0;top: 0;z-index: 50; + transform: scale(1) translate(0px, 0px) !important;transition: all .3s; + .resize-box {display: none} + } + } + .design-footer {background: rgb(48, 65, 86);display: flex;justify-content: space-between;padding: 0 5px;align-items: center; + .center {flex: 2;display: flex;justify-content: center} + .item {display: flex;align-items: center;margin: 0 10px; + .label {margin-right: 5px;display: block;white-space: nowrap} + } + .slider { + .label {margin-right: 10px} + .el-slider {width: 150px} + } + .icon {cursor: pointer} + //.offset{width: 120px;text-align: center;color: red} + } + .el-slider__marks-stop {background: red} + .no-date {color: #ccc;position: absolute;left: 50%;top: 30%;transform: translateX(-50%);font-size: 20px} + } + .main-right {width: 220px;transition: all .3s;position: relative; + form {padding: 0 10px} + .el-form-item {margin-bottom: 8px} + .color-picker { + .el-color-picker__trigger, .el-color-picker {width: 100%} + } + .upload-image { + .el-form-item__content {display: flex} + .el-input {flex: 2} + .el-upload-list {display: none} + } + &.lock { + &:after {position: absolute;left: 0;top: 0;bottom: 0;right: 0;content: '';background: rgba(255, 255, 255, .3)} + .lock {z-index: 2} + } + } + .close-preview {position: fixed;right: 10px;top: 10px;z-index: 51;color: #999;cursor: pointer} + .screen-right-menu {position: absolute;z-index: 100;background: #fff;width: 160px;transform: translateY(-50%); + li {padding: 5px 15px;cursor: pointer; + &:hover {background: #409eff;color: #fff} + &.display{cursor: not-allowed;opacity: .5; + &:hover{background: #fff;color: #333}} + } + } +} + +.design-canvas { + .group { + position: absolute; + } + .default-img, .default-bg {display: block;width: 100%;height: 100%} +} diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts new file mode 100644 index 000000000..677de78ca --- /dev/null +++ b/src/components/DesignForm/assembly/index.ts @@ -0,0 +1,322 @@ +const selectOption: any = [ + /*{ + label: '标签1', + value: 'value1' + }, + { + label: '标签2', + value: 'value2' + }, + { + label: '标签3', + value: 'value3' + }*/ + ] + const config: { optionsType: number } = { + optionsType: 0 // 0固定 1数据源 2 接口字典 + } + export default [ + { + title: '基础字段', + children: [ + { + type: 'input', + label: '单行文本', + icon: 'input', + control: { + // 组件所有属性 + modelValue: '' + }, + config: {} // 其他配置信息 + }, + { + type: 'textarea', + label: '多行文本', + icon: 'textarea', + control: { + modelValue: '' + }, + config: {} + }, + { + type: 'radio', + label: '单选框组', + icon: 'radio', + control: { + modelValue: '' + }, + options: selectOption, // 下拉选项数据集合 + config: config + }, + { + type: 'checkbox', + label: '多选框组', + icon: 'checkbox', + control: { + modelValue: [] + }, + options: selectOption, + config: config + }, + { + type: 'select', + label: '下拉选择框', + icon: 'select', + control: { + modelValue: '', + appendToBody: true + }, + options: selectOption, + config: config + }, + { + type: 'datePicker', + label: '日期选择器', + icon: 'date', + control: { + modelValue: '', + type: 'date' + }, + config: {} + }, + { + type: 'timePicker', + label: '时间选择器', + icon: 'time', + control: { + modelValue: '' + }, + config: {} + }, + { + type: 'colorPicker', + label: '取色器', + icon: 'color', + control: { + modelValue: '' + }, + config: {} + }, + { + type: 'switch', + label: '开关', + icon: 'switch', + control: { + modelValue: false + }, + config: {} + }, + { + type: 'inputNumber', + label: '计数器', + icon: 'number', + control: { + modelValue: 0 + }, + config: {} + }, + { + type: 'cascader', + label: '级联选择器', + icon: 'cascader', + control: { + modelValue: [] + }, + options: [], + config: config + }, + { + type: 'rate', + label: '评分', + icon: 'rate', + control: { + modelValue: 0 + }, + config: {} + }, + { + type: 'slider', + label: '滑块', + icon: 'slider', + control: { + modelValue: 0 + }, + config: {} + }, + { + type: 'treeSelect', + label: '树形控件', + icon: 'tree2', + control: { + modelValue: '', + data: [], + renderAfterExpand: false + }, + config: { + optionsType: 0 + } + }, + { + type: 'txt', + label: '文字', + icon: 'text', + control: { + modelValue: '' + }, + config: {} + }, + { + type: 'title', + label: '标题', + icon: 'title', + control: { + modelValue: '标题' + }, + config: {} + }, + { + type: 'button', + label: '按钮', + icon: 'button', + control: { + label: '保存' + }, + config: {} + } + ] + }, + { + title: '高级字段', + children: [ + { + type: 'table', + label: '子表', + icon: 'table', + list: [], + tableData: [], // 子表表格列表数据集合 + control: { + border: true + }, + config: { + addBtnText: '添加一行' + } + }, + { + type: 'component', + label: '自定义组件', + icon: 'component', + control: { + modelValue: '' + }, + config: {} + /*template: '', // 组件模板名称 + component: '' // 根据template注入的组件*/ + }, + { + type: 'upload', + label: '图片/文件', + icon: 'image', + control: { + modelValue: '' // 也可以是[{name:'',url:''}]形式 + }, + config: {} + }, + { + type: 'tinymce', + label: 'tinymce富文本', + icon: 'tinymce', + control: { + modelValue: '' + }, + config: {} + } + ] + }, + { + title: '布局字段', + children: [ + { + type: 'grid', + label: '格栅布局', + icon: 'grid', + columns: [ + // 格栅列数据 + { + attr: { span: 12 }, + list: [] + }, + { + attr: { span: 12 }, + list: [] + } + ], + control: {}, + config: {} + }, + { + type: 'tabs', + label: '标签页', + icon: 'tabs', + columns: [ + { + label: 'Tab1', + list: [] + } + ], + control: {}, + config: {} + }, + { + type: 'card', + label: '卡片布局', + icon: 'card', + list: [], + control: {}, + config: {}, + item: {} // label标题相关 + }, + { + type: 'flex', + label: '弹性布局', + icon: 'flex', + list: [], + tableData: [], // 值集合 + control: {}, + config: { + addBtnText: '添加一行' + } + }, + { + type: 'divider', + label: '分割线', + icon: 'divider', + control: {}, + config: {} + }, + { + type: 'div', + label: 'div容器', + icon: 'div', + control: {}, + config: {}, + list: [] + } + ] + }, + { + title: '扩展组件', + children: [ + { + type: 'expand-user', + label: '选择用户', + icon: 'user', + control: { + // 组件所有属性 + modelValue: '' + }, + config: {} // 其他配置信息 + } + ] + } + ] + \ No newline at end of file diff --git a/src/components/DesignForm/dragControl.vue b/src/components/DesignForm/dragControl.vue new file mode 100644 index 000000000..11e66d52f --- /dev/null +++ b/src/components/DesignForm/dragControl.vue @@ -0,0 +1,166 @@ + + + + diff --git a/src/components/DesignForm/public/form/childTable.vue b/src/components/DesignForm/public/form/childTable.vue new file mode 100644 index 000000000..3bba3c899 --- /dev/null +++ b/src/components/DesignForm/public/form/childTable.vue @@ -0,0 +1,14 @@ + + + + diff --git a/src/components/DesignForm/public/form/flexBox.vue b/src/components/DesignForm/public/form/flexBox.vue new file mode 100644 index 000000000..abcfc4cce --- /dev/null +++ b/src/components/DesignForm/public/form/flexBox.vue @@ -0,0 +1,14 @@ + + + + diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue new file mode 100644 index 000000000..b2f25b637 --- /dev/null +++ b/src/components/DesignForm/public/form/form.vue @@ -0,0 +1,483 @@ + + + + diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue new file mode 100644 index 000000000..109bea647 --- /dev/null +++ b/src/components/DesignForm/public/form/formGroup.vue @@ -0,0 +1,436 @@ + + + + diff --git a/src/components/DesignForm/public/form/formItem.vue b/src/components/DesignForm/public/form/formItem.vue new file mode 100644 index 000000000..90dbddffe --- /dev/null +++ b/src/components/DesignForm/public/form/formItem.vue @@ -0,0 +1,14 @@ + + + + diff --git a/src/components/DesignForm/public/headTools.vue b/src/components/DesignForm/public/headTools.vue new file mode 100644 index 000000000..7833142bd --- /dev/null +++ b/src/components/DesignForm/public/headTools.vue @@ -0,0 +1,68 @@ + + + + diff --git a/src/components/DesignForm/template.vue b/src/components/DesignForm/template.vue new file mode 100644 index 000000000..3d8077868 --- /dev/null +++ b/src/components/DesignForm/template.vue @@ -0,0 +1,49 @@ + + + + diff --git a/src/components/DesignForm/tooltip.vue b/src/components/DesignForm/tooltip.vue new file mode 100644 index 000000000..dab812ea1 --- /dev/null +++ b/src/components/DesignForm/tooltip.vue @@ -0,0 +1,19 @@ + + + + diff --git a/src/main.ts b/src/main.ts index e75d30e7d..8d75cece9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -24,5 +24,12 @@ const app = createApp(App); setupDirective(app); // 全局注册 状态管理(store) setupStore(app); +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} app.use(router).use(i18n).mount('#app'); + + diff --git a/src/store/DesignForm/designForm.ts b/src/store/DesignForm/designForm.ts new file mode 100644 index 000000000..005106c97 --- /dev/null +++ b/src/store/DesignForm/designForm.ts @@ -0,0 +1,22 @@ +import { defineStore } from 'pinia' + +export const useDesignFormStore = defineStore('designForm', { + state: () => { + return { + controlAttr: {}, + activeKey: '' + //type: 1, //当前表单状态 1新增；2查看（表单模式） ；3查看； 4设计 + //isEdit: false, //编辑状态，type=1新增模式下有编辑状态，主要用于控制编辑模式下某些字段的禁用状态，即可新增但不能修改 + //model: {}, // 给form-group提供联动条件设置 + //hideField: [], // 设置了使用v-if隐藏的字段 + } + }, + actions: { + setControlAttr(data: any) { + this.controlAttr = data + }, + setActiveKey(key: string) { + this.activeKey = key + } + } +}) diff --git a/src/store/DesignForm/layout.ts b/src/store/DesignForm/layout.ts new file mode 100644 index 000000000..8406027d8 --- /dev/null +++ b/src/store/DesignForm/layout.ts @@ -0,0 +1,42 @@ +import { defineStore } from 'pinia' +import { nextTick } from 'vue' +/*interface Breadcrumb { + label: string + to?: string +}*/ +interface TabsViews { + title: string + path: string + name: string // 路由名称name +} +const getSession = window.sessionStorage.getItem('tagViews') +let tabs: any = [] +if (getSession) { + tabs = JSON.parse(getSession) +} +export const useLayoutStore = defineStore('layout', { + state: () => { + return { + breadcrumb: [], + tabs: tabs, + reloadFlag: true // 用于刷新路由 + } + }, + // 也可以定义为 + // state: () => ({ count: 0 }) + actions: { + changeBreadcrumb(data: any) { + this.breadcrumb = data + }, + setTabsViews(obj: TabsViews[]) { + this.tabs = obj + window.sessionStorage.setItem('tagViews', JSON.stringify(obj)) + }, + setReloadRouter() { + this.reloadFlag = false + nextTick(() => { + this.reloadFlag = true + }) + } + } +}) diff --git a/src/utils/DesignForm/form.ts b/src/utils/DesignForm/form.ts new file mode 100644 index 000000000..e7f5f092b --- /dev/null +++ b/src/utils/DesignForm/form.ts @@ -0,0 +1,87 @@ +// @ts-ignore +import jsBeautify from 'js-beautify' + +export const EDITTYPE = 'javascript' // 弹出编辑器可输入类型 json/javascript + +export function evil(fn: any) { + const Fn = Function // 一个变量指向Function，防止有些前端编译工具报错 + return new Fn('return ' + fn)() +} + +export 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) { + if (o.hasOwnProperty(i)) { + let iii = i + if (i.indexOf('-') !== -1) { + iii = `"${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 = '{' + r.join() + '}' + } else { + for (let i = 0; i < o.length; i++) { + r.push(obj2string(o[i])) + } + r = '[' + r.join() + ']' + } + return r + } + return o && o.toString() +} + +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) + } +} + +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) +} diff --git a/src/utils/DesignForm/formChangeValue.ts b/src/utils/DesignForm/formChangeValue.ts new file mode 100644 index 000000000..069e06d0d --- /dev/null +++ b/src/utils/DesignForm/formChangeValue.ts @@ -0,0 +1,16 @@ +// 用于在线模式表单值改变事件，此方法可实际如A组件改变时，自动对B组件设值或修改 +// 必须要return +/* + @params name 当前改变的组件name值 + @params model当前表单的值 + @params key 当前设置的方法标识 + */ +const formChangeValue = ( + name: string, + model: { [key: string]: any }, + key: string +) => { + console.log(key, model, name) + return model +} +export default formChangeValue diff --git a/src/utils/DesignForm/formatResult.ts b/src/utils/DesignForm/formatResult.ts new file mode 100644 index 000000000..ce6f977a7 --- /dev/null +++ b/src/utils/DesignForm/formatResult.ts @@ -0,0 +1,34 @@ +// 处理返回结果，当数据比较复杂时，使用在线编辑器如afterResponse方法不太适合，key即为afterResponse的字符串值 +// 必须要return +const formatResult = (res: any, key: string) => { + // console.log('formatResult', res, key) + switch (key) { + case 'transformDataToChild': + return transformDataToChild(res.list || res) + } + return res +} +// 根据id及parentId扁平数据转为children嵌套格式 +const transformDataToChild = (res: any) => { + const temp: any = [] + transformDataList(res, 0, temp) + return temp +} +const transformDataList = (data: any, parentId: number, temp: any) => { + data.forEach((item: any) => { + item.value = item.id // tree组件只能修改label取值，不能指定value，这里添加一个 + item.label = item.name + if (item.parentId === parentId) { + const childrenList = data.filter((ch: any) => { + return ch.parentId === item.id + }) + if (childrenList?.length) { + item.children = [] + transformDataList(data, item.id, item.children) + } + temp.push(item) + } + }) +} +// 部门侧栏树列表数据处理结束 +export default formatResult diff --git a/src/utils/DesignForm/formatScreen.ts b/src/utils/DesignForm/formatScreen.ts new file mode 100644 index 000000000..fc790ace1 --- /dev/null +++ b/src/utils/DesignForm/formatScreen.ts @@ -0,0 +1,18 @@ +// 用于在线模式表单值改变事件，此方法可实际如A组件改变时，自动对B组件设值或修改 +// 必须要return +/* + @params key 当前指定的事件字符串标识 + @params result api接口返回结果 + @params options 静态或图片options数据，需按此格式返回 + @params global 全局的数据 + */ +const formatScreen = ( + key: string, + result: any, + options?: any, + global?: any +) => { + console.log(key, result, options, global) + return options +} +export default formatScreen diff --git a/src/utils/DesignForm/index.ts b/src/utils/DesignForm/index.ts new file mode 100644 index 000000000..ba2590138 --- /dev/null +++ b/src/utils/DesignForm/index.ts @@ -0,0 +1,95 @@ +export function debounce void>(func: T, delay = 500, immediate?: boolean): T { + let timerId: any + + return function (this: any, ...args: any[]) { + if (timerId) { + clearTimeout(timerId) + } + if (immediate) { + const callNow = !timerId + timerId = setTimeout(() => { + timerId = null + }, delay) + if (callNow) { + func.apply(this, args) + } + } else { + timerId = setTimeout(() => { + func.apply(this, args) + }, delay) + } + } as T +} +// 时间格式化 +export const dateFormatting = (time: any, cFormat?: string) => { + const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' + // 字符串数字形式的时间戳要转换下 + let newTime = time + if (/^\d+?$/.test(time)) { + newTime = parseInt(time) + } + const date = typeof time === 'object' ? time : new Date(newTime) + const formatObj: any = { + y: date.getFullYear(), + m: date.getMonth() + 1, + d: date.getDate(), + h: date.getHours(), + i: date.getMinutes(), + s: date.getSeconds(), + w: date.getDay() + } + return format.replace(/{(y|m|d|h|i|s|w)+}/g, (result, key) => { + let value = formatObj[key] + if (key === 'w') { + return ['日', '一', '二', '三', '四', '五', '六'][value] + } + if (result.length > 0 && value < 10) { + value = '0' + value + } + return value || 0 + }) +} +// 动态远程加载script脚本 +export function loadScript(src: string) { + return new Promise((resolve, reject) => { + const script = document.createElement('script') + script.type = 'text/javascript' + script.onload = resolve + script.onerror = reject + script.src = src + document.head.appendChild(script) + }) +} +// 随机数字符串 +export const randomString = (len: number) => { + len = len || 32 + const str = 'ABCDEFGHIJKMNOPQSTWXYZabcdefghijklmnopqrstwxyz1234567890' + let n = '' + for (let i = 0; i < len; i++) { + n += str.charAt(Math.floor(Math.random() * str.length)) + } + return n +} + +export const jsonParseStringify = (val: any) => { + if (typeof val === 'object') { + return JSON.parse(JSON.stringify(val)) + } else { + return val + } +} +/** + * 设置或获取local session storage + * @param key + * @param data　有值时set，否则get + * @param type local/session默认 + */ +export const getSetStorage = (key: string, data?: string, type = 'session') => { + //console.log(key, data) + const winType = type === 'session' ? 'sessionStorage' : 'localStorage' + if (data) { + window[winType].setItem(key, data) + } else { + return window[winType].getItem(key) + } +} diff --git a/src/utils/DesignForm/request.ts b/src/utils/DesignForm/request.ts new file mode 100644 index 000000000..7a4fd68a2 --- /dev/null +++ b/src/utils/DesignForm/request.ts @@ -0,0 +1,35 @@ +import axios from 'axios' +// 全局设置 +/* axios.defaults.baseURL = window.APP_CONFIG.BASE_URL +axios.defaults.headers.common['Authorization'] = getToken() */ + +const service = axios.create({ + baseURL: import.meta.env.VITE_APP_URL, // api的base_url + //baseURL: 'http://localhost:3001/api', // api的base_url + timeout: 3000, // request timeout + headers: {} +}) + +service.interceptors.request.use( + (config) => { + return config + }, + (error) => { + Promise.reject(error) + } +) + +service.interceptors.response.use( + (response) => { + if (response.data.code === 1) { + return response.data + } else { + // 这里面需增加统一拦截 + return Promise.reject(response.data) + } + }, + (error) => { + return Promise.reject(error) + } +) +export default service diff --git a/src/views/matrix/index.vue b/src/views/matrix/index.vue index 0fa0209b8..7da44670d 100644 --- a/src/views/matrix/index.vue +++ b/src/views/matrix/index.vue @@ -8,7 +8,7 @@ import { orgInfo } from '@/api/hr/org/type' import { getOrgTreeList } from '@/api/hr/org/index' import { searchMatrix,matrixCont } from '@/api/matrixapi/type' import { getMatrixList,editMatrixStatus } from '@/api/matrixapi/index' - +import { getOrgChiled } from '@/api/displayboardapi/indexapi' /** * 引入页面 */ @@ -17,6 +17,7 @@ import MatrixContEdit from '@/views/matrix/matrixcont/matrixcontedit.vue' import SetupMatrixField from '@/views/matrix/matrixcont/setupmatrixfield.vue' import SetupMatrixUser from '@/views/matrix/matrixcont/setupmatrixuser.vue' + const ids = ref([]); //批量删除的ID const queryFormRef = ref(ElForm); //查询表单 const orgTreeLoading = ref(false); //加载行政组织树 @@ -144,10 +145,12 @@ function openEditMatriexDialog(cont:matrixCont){ editCont.value = cont matrixEditBox.value = true; } + //加载数据 onMounted(() => { haveOrgTreeInfo(); searchMatrixList(); + }); diff --git a/src/views/matrix/matrixcont/setupmatrixfield.vue b/src/views/matrix/matrixcont/setupmatrixfield.vue index f6df544c1..f37282988 100644 --- a/src/views/matrix/matrixcont/setupmatrixfield.vue +++ b/src/views/matrix/matrixcont/setupmatrixfield.vue @@ -65,6 +65,12 @@ function handleCloseBox(){ * 初始化数据 */ function initData(){ + // if(tjAndZhi.factor && tjAndZhi.factor.length > 0){ + // tjAndZhi.factor.splice(0,tjAndZhi.factor.length); + // } + // if(tjAndZhi.outcome && tjAndZhi.outcome.length > 0){ + // tjAndZhi.outcome.splice(0,tjAndZhi.outcome.length); + // } tjAndZhi.factor.splice(0,tjAndZhi.factor.length); tjAndZhi.outcome.splice(0,tjAndZhi.outcome.length); addMatrixField(1); @@ -116,10 +122,17 @@ watch(() => props.fieldShow,() => { getMatrixField({id:props.matrixcont.id}) .then(({data})=>{ console.log("监听数据---->",data) - tjAndZhi.factor.splice(0,tjAndZhi.factor.length); - tjAndZhi.outcome.splice(0,tjAndZhi.outcome.length); - tjAndZhi.factor = data.factor - tjAndZhi.outcome = data.outcome + if(data.factor && data.factor.length > 0){ + tjAndZhi.factor.splice(0,tjAndZhi.factor.length); + tjAndZhi.factor = data.factor + console.log("监听数据--1-->",data) + } + if(data.outcome && data.outcome.length > 0){ + tjAndZhi.outcome.splice(0,tjAndZhi.outcome.length); + tjAndZhi.outcome = data.outcome + console.log("监听数据--2-->",data) + } + }); } }); diff --git a/src/views/matrix/matrixcont/setupmatrixuser.vue b/src/views/matrix/matrixcont/setupmatrixuser.vue index 408d16e6f..ba05ce45b 100644 --- a/src/views/matrix/matrixcont/setupmatrixuser.vue +++ b/src/views/matrix/matrixcont/setupmatrixuser.vue @@ -4,8 +4,15 @@ @ 备注: 设置字段值 --> diff --git a/src/views/matrix/matrixcont/setupmatrixuser_black.vue b/src/views/matrix/matrixcont/setupmatrixuser_black.vue new file mode 100644 index 000000000..a0da94ce0 --- /dev/null +++ b/src/views/matrix/matrixcont/setupmatrixuser_black.vue @@ -0,0 +1,182 @@ + + + + diff --git a/src/views/matrix/orgoruser/pickorg.vue b/src/views/matrix/orgoruser/pickorg.vue new file mode 100644 index 000000000..09270b7f7 --- /dev/null +++ b/src/views/matrix/orgoruser/pickorg.vue @@ -0,0 +1,613 @@ + + + + diff --git a/src/views/matrix/orgoruser/pickuser.vue b/src/views/matrix/orgoruser/pickuser.vue new file mode 100644 index 000000000..0ad559c43 --- /dev/null +++ b/src/views/matrix/orgoruser/pickuser.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/views/sysworkflow/codepage/index.vue b/src/views/sysworkflow/codepage/index.vue index ddc46391e..ddb28413a 100644 --- a/src/views/sysworkflow/codepage/index.vue +++ b/src/views/sysworkflow/codepage/index.vue @@ -4,10 +4,252 @@ @ 备注: -->