forked from github/dataease
feat: 使用fit2cloud-ui改造系统管理
This commit is contained in:
fit2cloud-chenyw
parent
9cda37b56c
commit
fec733f262
@ -1,24 +0,0 @@
|
||||
module.exports = {
|
||||
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
|
||||
transform: {
|
||||
'^.+\\.vue$': 'vue-jest',
|
||||
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
|
||||
'jest-transform-stub',
|
||||
'^.+\\.jsx?$': 'babel-jest'
|
||||
},
|
||||
moduleNameMapper: {
|
||||
'^@/(.*)$': '<rootDir>/src/$1'
|
||||
},
|
||||
snapshotSerializers: ['jest-serializer-vue'],
|
||||
testMatch: [
|
||||
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
|
||||
],
|
||||
collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
|
||||
coverageDirectory: '<rootDir>/tests/unit/coverage',
|
||||
// 'collectCoverage': true,
|
||||
'coverageReporters': [
|
||||
'lcov',
|
||||
'text-summary'
|
||||
],
|
||||
testURL: 'http://localhost/'
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
|
||||
"author": "Pan <panfree23@gmail.com>",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build:prod": "vue-cli-service build",
|
||||
@ -23,18 +24,17 @@
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"screenfull": "4.2.0",
|
||||
"stylus": "^0.54.8",
|
||||
"stylus-loader": "^5.0.0",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.2",
|
||||
"vue": "2.6.10",
|
||||
"vue-i18n": "7.3.2",
|
||||
"vue-router": "3.0.6",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "3.1.0"
|
||||
"vuex": "3.1.0",
|
||||
"webpack": "^4.46.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/core": "^7.4.0-0",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.6.0",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
@ -46,9 +46,9 @@
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"node-sass": "^4.9.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"sass": "^1.32.5",
|
||||
"sass-loader": "^10.1.1",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "0.7.2",
|
||||
"serve-static": "^1.13.2",
|
||||
|
||||
38
frontend/src/components/GridButton/index.vue
Normal file
38
frontend/src/components/GridButton/index.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-tooltip :content="tooltip">
|
||||
<el-button circle class="fu-search-bar-button" :type="type" :size="size" @click="click">
|
||||
<slot>
|
||||
<i :class="icon" />
|
||||
</slot>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GridButton',
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
default: 'mini'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
tooltip: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(e) {
|
||||
this.$emit('click', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,6 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import Cookies from 'js-cookie'
|
||||
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
||||
import '@/styles/index.scss' // global css
|
||||
import ElementUI from 'element-ui'
|
||||
import Fit2CloudUI from 'fit2cloud-ui'
|
||||
|
||||
@ -1 +1 @@
|
||||
export const PHONE_REGEX = '^1(3|4|5|6|7|8|9)\\d{9}$';
|
||||
export const PHONE_REGEX = '^1(3|4|5|6|7|8|9)\\d{9}$'
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
const getDefaultState = () => {
|
||||
return {
|
||||
panelName: ""
|
||||
panelName: ''
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
9
frontend/src/styles/common/mixins.scss
Normal file
9
frontend/src/styles/common/mixins.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@mixin flex-row($justify: flex-start, $align: stretch) {
|
||||
display: flex;
|
||||
@if $justify != flex-start {
|
||||
justify-content: $justify;
|
||||
}
|
||||
@if $align != stretch {
|
||||
align-items: $align;
|
||||
}
|
||||
}
|
||||
54
frontend/src/styles/common/variables.scss
Normal file
54
frontend/src/styles/common/variables.scss
Normal file
@ -0,0 +1,54 @@
|
||||
/* Element 变量 */
|
||||
$--color-primary: #447DF7;
|
||||
$--color-success: #87CB16;
|
||||
$--color-warning: #FFA534;
|
||||
$--color-danger: #FB404B;
|
||||
|
||||
$--box-shadow-light: 0 1px 4px 0 rgb(0 0 0 / 14%);
|
||||
|
||||
$--color-text-primary: #3c4858;
|
||||
|
||||
/* layout */
|
||||
$layout-bg-color: #F2F2F2;
|
||||
|
||||
/* sidebar */
|
||||
$sidebar-open-width: 260px;
|
||||
$sidebar-close-width: 60px;
|
||||
$sidebar-bg-color: #30373d;
|
||||
$sidebar-bg-gradient: linear-gradient(to bottom right, #30373D, #3E3E3D);
|
||||
|
||||
/* menu */
|
||||
$menu-height: 50px; // 菜单项高度
|
||||
$menu-bg-color: transparent; // 菜单项背景
|
||||
$menu-bg-color-hover: mix($sidebar-bg-color, #000, 90%); // 菜单项hover背景
|
||||
$menu-color: #B6C0CD; // 菜单项字体颜色
|
||||
$menu-open-bg-color: #252B2F; // 菜单项展开背景
|
||||
$menu-active-color: #FFF; // 菜单项激活时颜色
|
||||
$menu-active-bg-color: transparent; // 菜单项激活时背景
|
||||
|
||||
$submenu-height: 40px; // 子菜单项高度
|
||||
$submenu-bg-color-hover: mix($menu-open-bg-color, #000, 80%); // 子菜单项hover背景
|
||||
$submenu-active-color: $menu-active-color; // 子菜单项激活时颜色
|
||||
$submenu-active-bg-color: transparent; // 子菜单项激活时背景
|
||||
|
||||
$menu-active-prefix-color: $--color-primary; // 菜单激活前缀颜色
|
||||
$menu-active-prefix-width: 4px; // 菜单激活前缀宽度
|
||||
|
||||
/* logo */
|
||||
$logo-height: 40px;
|
||||
$logo-bg-color: #4E5051;
|
||||
|
||||
/* header */
|
||||
$header-height: 60px;
|
||||
$header-padding: 30px;
|
||||
|
||||
/* main */
|
||||
$view-padding: 15px;
|
||||
|
||||
/* fit2cloud-ui的variables加载了element-ui的变量 */
|
||||
@import "~fit2cloud-ui/src/styles/common/variables";
|
||||
|
||||
:export {
|
||||
theme: $--color-primary;
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
@import '~normalize.css/normalize.css';
|
||||
@import './variables.scss';
|
||||
@import './mixin.scss';
|
||||
@import './transition.scss';
|
||||
@import './element-ui.scss';
|
||||
@import './sidebar.scss';
|
||||
@import './topbar.scss';
|
||||
@import "~fit2cloud-ui/src/styles/index.scss";
|
||||
|
||||
// @import '../metersphere/common/css/index.css';
|
||||
|
||||
|
||||
@ -10,9 +10,13 @@ import { ComplexCondition } from 'fit2cloud-ui/src/components/search-bar/model'
|
||||
export default {
|
||||
name: 'CustomCondition',
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
field: String,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
label: String,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
defaultOperator: String,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
options: Array
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -4,25 +4,36 @@
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:buttons="buttons"
|
||||
:header="header"
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
@select="select"
|
||||
@search="search"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="add" />
|
||||
</template>
|
||||
|
||||
<el-table-column type="selection" fix />
|
||||
<el-table-column label="ID" min-width="100" prop="id" fix />
|
||||
<el-table-column label="姓名" min-width="100" prop="name" fix />
|
||||
<el-table-column label="Email" min-width="100" prop="email" />
|
||||
<el-table-column label="角色" min-width="100" prop="roles" />
|
||||
<el-table-column label="语言" min-width="100">
|
||||
<template v-slot:default="{row}">
|
||||
<el-tag v-if="row.language === 'zh-CN'" type="danger" size="small">中文</el-tag>
|
||||
<el-tag v-if="row.language === 'en-US'" size="small">English</el-tag>
|
||||
<el-table-column prop="username" label="ID" />
|
||||
<el-table-column prop="nickName" :label="$t('commons.name')" width="200" />
|
||||
<el-table-column prop="gender" label="性别" />
|
||||
|
||||
<el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="电话" />
|
||||
<el-table-column :show-overflow-tooltip="true" width="135" prop="email" :label="$t('commons.email')" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="dept" :label="$t('commons.organization')">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.row.dept.deptName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" :show="false">
|
||||
<template v-slot:default="{row}">
|
||||
{{ row.createTime | datetimeFormat }}
|
||||
<el-table-column prop="status" :label="$t('commons.status')" width="120">
|
||||
<template v-slot:default="scope">
|
||||
<el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0" inactive-color="#DCDFE6" @change="changeSwitch(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" :label="$t('commons.create_time')">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
@ -35,6 +46,7 @@ import LayoutContent from '@/components/business/LayoutContent'
|
||||
import { userLists } from '@/api/system/user'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import CustomCondition from './CustomCondtion'
|
||||
// import { GridButton } from '@/components/GridButton'
|
||||
// import { checkPermission } from '@/utils/permisstion'
|
||||
|
||||
const buttonClick = function(row) {
|
||||
@ -46,6 +58,7 @@ export default {
|
||||
components: { ComplexTable, LayoutContent },
|
||||
data() {
|
||||
return {
|
||||
header: '',
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
@ -100,6 +113,9 @@ export default {
|
||||
},
|
||||
edit(row) {
|
||||
console.log('编辑: ', row)
|
||||
},
|
||||
add() {
|
||||
|
||||
},
|
||||
search(condition) {
|
||||
console.log(condition) // demo只查看搜索条件，没有搜索的实现
|
||||
Loading…
Reference in New Issue
Block a user