Skip to content

W
web
Commit e44be7ed authored by jiaxu.yan's avatar jiaxu.yan
Browse files
Options

feat: ✨编辑通用按钮组件

parent 863124c3
Hide whitespace changes
Inline Side-by-side
Showing with 483 additions and 90 deletions
src/components/Page/FooterButton.vue 0 → 100644
View file @ e44be7ed
<template>
<button
class="footer-button"
@click="handleClick"
:disabled="disabled || loading"
:type="nativeType"
:class="[
type ? 'footer-button--' + type : '',
{
'is-disabled': disabled,
'is-loading': loading,
line: line
}
]"
>
<i class="el-icon-loading" v-if="loading"></i>
<slot name="icon " v-if="icon && !loading">
<i :class="icon"></i>
</slot>
<span v-if="$slots.default"><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'FooterButton',
props: {
type: {
type: String,
default: 'default'
},
icon: {
type: String,
default: ''
},
nativeType: {
type: String,
default: 'button'
},
loading: Boolean,
disabled: Boolean,
line: Boolean
},
methods: {
handleClick(evt) {
this.$emit('click', evt)
}
}
}
</script>
<style scoped>
.footer-button {
display: inline-flex;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #fff;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
font-size: 14px;
border-radius: 4px;
width: 130px;
height: 32px;
align-items: center;
justify-content: center;
}
.footer-button + .footer-button {
margin-left: 6px;
}
.footer-button:focus,
.footer-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.footer-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0;
}
.footer-button::-moz-focus-inner {
border: 0;
}
.footer-button [class*='el-icon-'] + span {
margin-left: 5px;
}
.footer-button.is-plain:focus,
.footer-button.is-plain:hover {
background: #fff;
border-color: #409eff;
color: #409eff;
}
.footer-button.is-active,
.footer-button.is-plain:active {
color: #3a8ee6;
border-color: #3a8ee6;
}
.footer-button.is-plain:active {
background: #fff;
outline: 0;
}
.footer-button.is-disabled,
.footer-button.is-disabled:focus,
.footer-button.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
.footer-button.is-disabled.footer-button--text {
background-color: transparent;
}
.footer-button.is-disabled.is-plain,
.footer-button.is-disabled.is-plain:focus,
.footer-button.is-disabled.is-plain:hover {
background-color: #fff;
border-color: #ebeef5;
color: #c0c4cc;
}
.footer-button.is-loading {
position: relative;
pointer-events: none;
}
.footer-button.is-loading:before {
pointer-events: none;
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
}
.footer-button.is-round {
border-radius: 20px;
padding: 12px 23px;
}
.footer-button.is-circle {
border-radius: 50%;
padding: 12px;
}
.footer-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.footer-button--primary:focus,
.footer-button--primary:hover {
background: #3c85dd;
border-color: #3c85dd;
color: #fff;
}
.footer-button--primary:active {
background: #186dd3;
border-color: #186dd3;
outline: 0;
}
.footer-button--primary.is-active {
background: #1a6fd7;
border-color: #1a6fd7;
}
.footer-button--no-line {
color: #303133;
background: #ffffff;
border: none;
color: #1a6fd7;
}
.footer-button--no-line:focus,
.footer-button--no-line:hover {
background: #e3eefc;
border: 1px solid #1a6fd7;
color: #1a6fd7;
}
.footer-button--no-line:active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
outline: 0;
}
.footer-button--no-line.is-active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
}
.footer-button--default {
color: #303133;
background: #ffffff;
border: 1px solid #1a6fd7;
color: #1a6fd7;
}
.footer-button--default:focus,
.footer-button--default:hover {
background: #e3eefc;
border: 1px solid #1a6fd7;
color: #1a6fd7;
}
.footer-button--default:active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
outline: 0;
}
.footer-button--default.is-active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
}
</style>
src/components/Page/HeaderButton.vue 0 → 100644
View file @ e44be7ed
<template>
<button
class="header-button"
@click="handleClick"
:disabled="disabled || loading"
:type="nativeType"
:class="[
type ? 'header-button--' + type : '',
{
'is-disabled': disabled,
'is-loading': loading
}
]"
>
<i class="el-icon-loading" v-if="loading"></i>
<slot name="icon" v-if="icon && !loading">
<i :class="icon"></i>
</slot>
<span v-if="$slots.default"><slot></slot></span>
</button>
</template>
<script>
export default {
name: 'AButton',
props: {
type: {
type: String,
default: 'default'
},
icon: {
type: String,
default: ''
},
nativeType: {
type: String,
default: 'button'
},
loading: Boolean,
disabled: Boolean,
line: Boolean
},
methods: {
handleClick(evt) {
this.$emit('click', evt)
}
}
}
</script>
<style scoped>
.header-button {
display: inline-flex;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #fff;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
font-size: 14px;
border-radius: 4px;
width: 114px;
height: 32px;
align-items: center;
justify-content: center;
}
.header-button + .header-button {
margin-left: 6px;
}
.header-button:focus,
.header-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.header-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0;
}
.header-button::-moz-focus-inner {
border: 0;
}
.header-button [class*='el-icon-'] + span {
margin-left: 5px;
}
.header-button.is-plain:focus,
.header-button.is-plain:hover {
background: #fff;
border-color: #409eff;
color: #409eff;
}
.header-button.is-active,
.header-button.is-plain:active {
color: #3a8ee6;
border-color: #3a8ee6;
}
.header-button.is-plain:active {
background: #fff;
outline: 0;
}
.header-button.is-disabled,
.header-button.is-disabled:focus,
.header-button.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
.header-button.is-disabled.header-button--text {
background-color: transparent;
}
.header-button.is-disabled.is-plain,
.header-button.is-disabled.is-plain:focus,
.header-button.is-disabled.is-plain:hover {
background-color: #fff;
border-color: #ebeef5;
color: #c0c4cc;
}
.header-button.is-loading {
position: relative;
pointer-events: none;
}
.header-button.is-loading:before {
pointer-events: none;
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
}
.header-button.is-round {
border-radius: 20px;
padding: 12px 23px;
}
.header-button.is-circle {
border-radius: 50%;
padding: 12px;
}
.header-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.header-button--primary:focus,
.header-button--primary:hover {
background: #3c85dd;
border-color: #3c85dd;
color: #fff;
}
.header-button--primary:active {
background: #186dd3;
border-color: #186dd3;
outline: 0;
}
.header-button--primary.is-active {
background: #1a6fd7;
border-color: #1a6fd7;
}
.header-button--no-line {
color: #303133;
background: #ffffff;
border: none;
color: #1a6fd7;
}
.header-button--no-line:focus,
.header-button--no-line:hover {
background: #e3eefc;
border: 1px solid #1a6fd7;
color: #1a6fd7;
}
.header-button--no-line:active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
outline: 0;
}
.header-button--no-line.is-active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
}
.header-button--default {
color: #303133;
background: #ffffff;
border: 1px solid #1a6fd7;
color: #1a6fd7;
}
.header-button--default:focus,
.header-button--default:hover {
background: #e3eefc;
border: 1px solid #1a6fd7;
color: #1a6fd7;
}
.header-button--default:active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
outline: 0;
}
.header-button--default.is-active {
background: #1764c1;
border: 1px solid #1764c1;
color: #1764c1;
}
</style>
src/components/Page/PageButton.vue
View file @ e44be7ed
<template>
<div class="page-btn">
<div class="page-btn" @click="handleClick">
<el-tooltip effect="dark" :content="title" placement="bottom-start">
<!-- <svg-icon class="item" :icon-class="btnClass" /> -->
<svg-icon
class="item"
width="32px"
height="32px"
height="24px"
width="24px"
:icon-class="'btn-' + icon"
/>
</el-tooltip>
......@@ -24,18 +24,23 @@ export default {
},
data() {
return {}
},
methods: {
handleClick(evt) {
this.$emit('click', evt)
}
}
}
</script>
<style lang="scss" scoped>
.page-btn {
width: 32px;
height: 32px;
width: 24px;
height: 24px;
cursor: pointer;
.item {
width: 32px;
height: 32px;
width: 24px;
height: 24px;
color: #1a6fd7;
--color-1: #1a6fd7;
--color-2: #ffffff;
......
src/main.js
View file @ e44be7ed
......@@ -45,6 +45,11 @@ import PageStandardOption from '@/components/Page/standardOption'
import PageButton from '@/components/Page/PageButton'
// 任务模版
import TaskStandard from '@/components/Page/TaskStandard'
// 自定义按钮
import HeaderButton from '@/components/Page/HeaderButton'
import FooterButton from '@/components/Page/FooterButton'
//空数据显示
import Empty from '@/components/Empty/index'
// 字典标签组件
......@@ -84,10 +89,12 @@ Vue.component('PageStandardOption', PageStandardOption)
Vue.component('PageButton', PageButton)
Vue.component('TalkItem', TalkItem)
Vue.component('EmptyData', Empty)
Vue.component('HeaderButton', HeaderButton)
Vue.component('FooterButton', FooterButton)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
const ModelDataSource = require('./utils/ModelDataSource')
import ModelDataSource from './utils/ModelDataSource';
Vue.use(ModelDataSource)
DictData.install()
......
src/utils/ModelDataSource.js
View file @ e44be7ed
......@@ -2,19 +2,8 @@
* Model 数据源
* 用于 单条记录的增删查改
*/
import request from '@/utils/request'
;(function (root, factory) {
// CommonJS
if (typeof exports === 'object') {
module.exports = factory()
}
// Browser global
else {
root.ModelDataSource = factory()
}
})(this, function () {
let _ = require('lodash')
import _ from "lodash"
import request from "@/utils/request"
function ModelDataSource(vm, settings) {
this.vm = vm
this.settings = settings
......@@ -179,8 +168,9 @@ import request from '@/utils/request'
*/
ModelDataSource.install = function (Vue) {
Vue.prototype.$modelDataSource = function (options) {
console.log(this, options);
return new ModelDataSource(this, options)
}
}
return ModelDataSource
})
export default ModelDataSource
src/views/processing/retention-file/index.vue
View file @ e44be7ed
<template>
<task-standard>
<div slot="header-right" class="clearfix">
<el-button
<header-button
icon="el-icon-back"
class="back-btn"
type="text"
type="no-line"
@click="handleBack"
>
返回
</el-button>
<el-button class="back-btn" plain icon="el-icon-download" type="primary">
下载文件
</el-button>
<el-button class="back-btn" plain icon="el-icon-refresh" type="primary">
</header-button>
<header-button class="back-btn" icon="el-icon-refresh" type="default">
重新生成
</el-button>
</header-button>
<header-button class="back-btn" icon="el-icon-download" type="default">
下载文件
</header-button>
</div>
<!-- table部分 -->
<table border="1">
......@@ -64,39 +64,8 @@ export default {
}
}
</script>
<style scoped lang="scss">
.app-container {
.back-btn {
margin-left: 10px;
float: right;
}
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
width: 300px;
}
.five-column {
width: 350px;
}
.four-column {
width: 350px;
}
.three-column {
width: 300px;
}
.two-column {
width: 150px;
}
.one-column {
width: 200px;
<style scoped>
.back-btn {
margin-left: 24px !important;
}
</style>
src/views/processing/unprocessed-review/index.vue
View file @ e44be7ed
......@@ -411,31 +411,6 @@ export default {
this.$store.dispatch('standard/setStandardList')
},
methods: {
loadData() {
this.loading = true
request({
url: this.listUrl,
method: 'post',
data: this.queryParams
})
.then(res => {
if (res.code === 200) {
console.log(res.rows)
// res.rows[0].carReviewStatus = 'FINISH'
res.rows[0].carReviewStatus = 'PENDING'
// res.rows[0].carReviewStatus = 'FINISH'
this.tableData = res.rows
this.total = res.total
}
this.loading = false
})
.catch(error => {
if (error.msg) {
this.$message.error(error.msg)
}
this.loading = false
})
},
/**
* 企业留档文件
* @param item 对象
......
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