Skip to content

V
VueElementTemplate
Commit b885e337 authored by 王康's avatar 王康
Browse files
Options

iconmenu

parent 7531331b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 69 deletions
src/router/index.js
View file @ b885e337
......@@ -136,6 +136,15 @@ export const asyncRouterMap = [
title: 'calendar',
icon: 'table'
}
},
{
path: 'iconMenu',
component: _import('haomo/components/iconMenu/index'),
name: 'haomo-iconMenu',
meta: {
title: '图标菜单',
icon: 'table'
}
}
]
},
......
src/views/haomo/components/forms/HmComplexForm.vue
View file @ b885e337
<template>
<el-row type="flex" class="hm-form" style="margin-top: 50px">
<el-col :span="6">
<div></div>
</el-col>
<el-col :span="12">
<div>
<!--表单部分-->
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
style="width:80%;margin:0 auto">
<el-form-item v-for="column in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
v-model="formModel[column.codeCamel]"></el-input>-->
<div class="app-container documentation-container">
<el-row type="flex" class="hm-form" style="margin-top: 50px">
<el-col :span="6">
<div></div>
</el-col>
<el-col :span="12">
<div>
<!--表单部分-->
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
style="width:80%;margin:0 auto">
<el-form-item v-for="column in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
v-model="formModel[column.codeCamel]"></el-input>-->
<!-- 1 普通input -->
<el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
<!-- 2 日期选择 -->
<el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
<!-- 1 普通input -->
<el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
<!-- 2 日期选择 -->
<el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]"
type="datetime"
align="right"
@change="logTimeChange"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions">
</el-date-picker>
<!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" clearable>
<el-option v-for="(item,key) in column.options"
:key="key"
:label="item"
:value="key">
</el-option>
</el-select>
<!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]"
type="textarea"
:autosize="{ minRows: 2, maxRows: 5}"
:rows="2">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options" v-model="formModel[column.codeCamel]">
<el-checkbox v-for="option in column.options" :label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group>
<!-- 6 富文本 -->
<quill-editor v-else-if="column.widgetType === 5"
ref="textEditor"
v-model="formModel[column.codeCamel]"
type="datetime"
align="right"
@change="logTimeChange"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions">
</el-date-picker>
<!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" clearable>
<el-option v-for="(item,key) in column.options"
:key="key"
:label="item"
:value="key">
</el-option>
</el-select>
<!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]"
type="textarea"
:autosize="{ minRows: 2, maxRows: 5}"
:rows="2">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options" v-model="formModel[column.codeCamel]">
<el-checkbox v-for="option in column.options" :label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group>
<!-- 6 富文本 -->
<quill-editor v-else-if="column.widgetType === 5"
ref="textEditor"
v-model="formModel[column.codeCamel]"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 7 单选框 -->
<el-radio-group v-else-if="column.widgetType === 7" v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="buttons && buttons.length > 0">
<el-col :span="12" v-for="(btn,key) in buttons" :key="key">
<el-button v-if="btn === '确定' || btn === '提交' || btn === '保存'" type="primary" @click="onSubmit()">{{btn}}</el-button>
<el-button v-if="btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
<el-button v-if="btn === '取消'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button>
</el-col>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="6">
<div></div>
</el-col>
</el-row>
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 7 单选框 -->
<el-radio-group v-else-if="column.widgetType === 7" v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="buttons && buttons.length > 0">
<el-col :span="12" v-for="(btn,key) in buttons" :key="key">
<el-button v-if="btn === '确定' || btn === '提交' || btn === '保存' || btn === '发布'" type="primary" @click="onSubmit()">{{btn}}</el-button>
<el-button v-if="btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
<el-button v-if="btn === '取消'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button>
</el-col>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="6">
<div></div>
</el-col>
</el-row>
</div>
</template>
<script>
......
src/views/haomo/components/iconMenu/HmIconMenu.vue 0 → 100644
View file @ b885e337
<template>
<div class="app-container documentation-container">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="" name="1">
<el-row :gutter="20">
<el-col :span="4" v-for="item in icons" style="margin-bottom: 20px;">
<i :class="item.className" style="margin-left: 5px;"></i>
<p>
<i class="hm-icon-menu_i" :style="{backgroundColor: item.color}"></i>
<span>{{item.text}}</span>
</p>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import _ from 'lodash'
import request from '@/utils/request'
/**
* 毫末科技的组件.
*
* demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/forms
* @author 王康
*/
export default {
name: 'HmIconMenu',
// 集成其他组件
extends: {},
// 使用其它组件
components: {
},
// 混入公共对象
mixins: [],
props: {
/**
* 必传，组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必传schema，以完成数据的交互
*/
schema: {
type: Object,
required: false
},
/**
* 必传，指定要显示的表单字段及类型。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），对于复选框，如果只有一个备选项则不必传options
* 示例：[
* { name: 'username', widgetType: 1 },
* { name: 'securityLevel', widgetType: 5 },
* { name: 'type', widgetType: 2, options: ['企业', '代理商'] },
* { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 },
* { name: 'createTime', widgetType: 6 }
* ]
*/
columns: {
type: Array,
required: false,
validator: function(value) {
if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`)
return false
}
return true
}
}
},
data() {
return {
activeNames: '1',
icons: [
{ className: 'icon-公文审批', text: '公文审批', color: '#f7b55d' },
{ className: 'icon-微平台', text: '微平台', color: '#4ea8ec' },
{ className: 'icon-综合OA', text: '综合OA', color: '#f7b55d' },
{ className: 'icon-议题征集', text: '议题征集', color: '#00bf8b' },
{ className: 'icon-通讯录导出', text: '通讯录导出', color: '#f7b55d' },
{ className: 'icon-检察课堂', text: '检察课堂', color: '#4ea8ec' },
{ className: 'icon-检察官网', text: '检察官网', color: '#4ea8ec' },
{ className: 'icon-总值电话', text: '总值电话', color: '#00bf8b' },
{ className: 'icon-数据统计', text: '数据统计', color: '#f7b55d' },
{ className: 'icon-内部公告', text: '内部公告', color: '#00bf8b' },
{ className: 'icon-应用下载', text: '应用下载', color: '#4ea8ec' }
]
}
},
created() {
// this.init()
},
methods: {
handleChange(val) {
console.log(val)
},
init() {
const self = this
// 如果没有传columns，则全部显示
// if (!self.columns || !self.columns.length) {
// _.each(self.schema['columns'], function(column) {
// const tmp = JSON.parse(JSON.stringify(column))
// self.$set(tmp, 'code', tmp.code.toLowerCase())
// self.showUserColumns.push(tmp)
// })
// } else
if (self.columns && self.columns.length) {
self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
// console.log(self.showUserColumns)
// 将字符串对象进行替换处理
_.each(self.showUserColumns, function(column, index) {
if (typeof column === 'object') {
// 生成一个新对象
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column.name]
// console.log(tmp)
self.$set(tmp, 'code', tmp.code.toLowerCase())
self.$set(tmp, 'widgetType', column.widgetType || 1)
column.options && self.$set(tmp, 'options', column.options)
self.$set(self.showUserColumns, index, tmp) // 顺序
// console.log(self.showUserColumns)
}
})
console.log(self.showUserColumns)
// 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) {
if (item.widgetType === 3 && item.options && item.options.length > 0) {
self.$set(self.formModel, item.codeCamel, [])
} else {
self.$set(self.formModel, item.codeCamel, '')
}
})
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
} else {
console.log('columns为必传字段!!')
}
}
}
}
</script>
<style scoped>
@import './iconfont.css';
.hm-icon-menu_i{
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 5px;
}
</style>
src/views/haomo/components/iconMenu/fonts/icomoon.svg 0 → 100755
View file @ b885e337
This diff is collapsed.
src/views/haomo/components/iconMenu/iconfont.css 0 → 100755
View file @ b885e337
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ftr1fl');
src: url('fonts/icomoon.eot?ftr1fl#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ftr1fl') format('truetype'),
url('fonts/icomoon.woff?ftr1fl') format('woff'),
url('fonts/icomoon.svg?ftr1fl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-size: 48px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-公文审批:before {
content: "\e900";
color: #f7b55d;
}
.icon-检察官网:before {
content: "\e901";
color: #4ea8ec;
}
.icon-检察课堂:before {
content: "\e902";
color: #4ea8ec;
}
.icon-内部公告:before {
content: "\e903";
color: #00bf8b;
}
.icon-数据统计:before {
content: "\e904";
color: #f7b55d;
}
.icon-通讯录导出:before {
content: "\e905";
color: #f7b55d;
}
.icon-微平台:before {
content: "\e906";
color: #4ea8ec;
}
.icon-议题征集:before {
content: "\e907";
color: #00bf8b;
}
.icon-应用下载:before {
content: "\e908";
color: #4ea8ec;
}
.icon-综合OA:before {
content: "\e909";
color: #f7b55d;
}
.icon-总值电话:before {
content: "\e90a";
color: #00bf8b;
}
src/views/haomo/components/iconMenu/index.vue 0 → 100644
View file @ b885e337
<template>
<div class="app-container calendar-list-container">
<hm-icon-menu>
</hm-icon-menu>
</div>
</template>
<script>
import HmIconMenu from './HmIconMenu.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmComplexFormIndex',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-icon-menu': HmIconMenu
},
data() {
return {
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
// showUserButtons: []
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
// console.log(this.schema)
this.tableId = '0e26566e953449a7a7500c34be39fd26'
},
methods: {
confirm() {
console.log('确定')
},
cancel() {
console.log('取消')
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment