详情页表单增加了锚点和错误提示

文件夹名称修改
使用label-suffix简化代码

vue/element-ui-personal/component/Menu/Submenu.vue

@@ -3,7 +3,7 @@ import MenuMixin from 'element-ui/packages/menu/src/menu-mixin'
 import Emitter from 'element-ui/lib/mixins/emitter'
 import Popper from 'element-ui/lib/utils/vue-popper'
 
-const PopperMixins = {
+const PopperMixin = {
     props: {
         transformOrigin: {type: [Boolean, String], default: false},
         offset: Popper.props.offset,
@@ -21,7 +21,7 @@ export default {
 
     componentName: 'ElSubmenu',
 
-    mixins: [MenuMixin, Emitter, PopperMixins],
+    mixins: [MenuMixin, Emitter, PopperMixin],
 
     props: {
         index: String,

vue/element-ui-personal/component/Select/Select.vue

@@ -116,7 +116,7 @@ import Emitter from 'element-ui/lib/mixins/emitter'
 import Focus from 'element-ui/lib/mixins/focus'
 import Locale from 'element-ui/lib/mixins/locale'
 import ElSelectMenu from './SelectDropdown.vue'
-import {debounce} from '@/utils'
+import {debounce} from '@/util'
 import Clickoutside from 'element-ui/lib/utils/clickoutside'
 import {addResizeListener, removeResizeListener} from 'element-ui/lib/utils/resize-event'
 import {t} from 'element-ui/lib/locale'

vue/element-ui-personal/component/Select/SelectDropdown.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script type="text/babel">
-import Popper from '@ele/mixins/vue-popper'
+import Popper from '@ele/mixin/vue-popper'
 
 export default {
     name: 'ElSelectDropdown',

vue/element-ui-personal/index.js

@@ -1,7 +1,7 @@
-import MenuItem from "./components/Menu/MenuItem"
+import MenuItem from "./component/Menu/MenuItem"
-import Submenu from "./components/Menu/Submenu"
+import Submenu from "./component/Menu/Submenu"
-import Message from "./components/Message"
+import Message from "./component/Message"
-//import Select from './components/Select/Select'
+//import Select from './component/Select/Select'
 
 const components = [MenuItem, Submenu]
 

vue/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml"
+    "svgo": "svgo -f src/asset/icon/svg --config=src/asset/icon/svgo.yml"
   },
   "dependencies": {
     "axios": "^0.19.2",

vue/src/api/account.js

@@ -1,5 +1,5 @@
 import request from "@/config/request"
-import {isEmpty} from "@/utils"
+import {isEmpty} from "@/util"
 
 export const baseUrl = '/account'
 

vue/src/asset/icon/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'
+import SvgIcon from '@/component/SvgIcon'
 
 Vue.component('svg-icon', SvgIcon)
 

vue/src/component/AbstractForm/FormAnchor.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="form-anchor">
+        <div
+            v-for="i in data"
+            :key="i.ref"
+            :class="{'active':i.ref === cur}"
+            @click="() => click(i.ref)"
+        >
+            {{ i.label }}
+        </div>
+    </div>
+</template>
+
+<script>
+import {debounce} from "@/util"
+import {getScroll, getOffsetTop, scrollTo} from "@/util/browser"
+
+export default {
+    name: "FormAnchor",
+
+    props: {
+        reference: Function,
+        data: {type: Array, default: () => []},
+        offsetTop: Number,
+        bounds: Number,
+        getContainer: {
+            type: Function,
+            default: () => document.querySelector('#app .app-main>.el-scrollbar>.el-scrollbar__wrap')
+        },
+    },
+
+    data: () => ({cur: null}),
+
+    methods: {
+        getCur(offsetTop = 0, bounds = 5) {
+            const sections = []
+            const container = this.getContainer()
+            this.data.forEach(({ref}) => {
+                const target = this.getDomFromRef(ref)
+                const top = getOffsetTop(target, container)
+                if (top < offsetTop + bounds) {
+                    sections.push({ref, top})
+                }
+            })
+
+            if (sections.length) {
+                const max = sections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev))
+                return max.ref
+            }
+            return ''
+        },
+
+        getDomFromRef(ref) {
+            const refs = this.reference()
+            return refs[ref]['$el'] || refs[ref][0]['$el']
+        },
+
+        click(ref) {
+            if (!ref || this.animating || !this.reference) return
+            this.cur = ref
+            const {offsetTop, getContainer, targetOffset} = this
+            const container = getContainer()
+            const scrollTop = getScroll(container, true)
+            const targetElement = this.getDomFromRef(ref)
+            if (!targetElement) return
+            const eleOffsetTop = getOffsetTop(targetElement, container)
+            let y = scrollTop + eleOffsetTop
+            y -= targetOffset !== undefined ? targetOffset : offsetTop || 0
+            this.animating = true
+            scrollTo(y, {callback: () => this.animating = false, getContainer})
+        },
+
+        scroll() {
+            if (this.animating || !this.reference) return
+            const {offsetTop, bounds, targetOffset} = this
+            this.cur = this.getCur(targetOffset !== undefined ? targetOffset : offsetTop || 0, bounds)
+        }
+    },
+
+    mounted() {
+        this.scroll()
+
+        const container = this.getContainer()
+        this.handleScroll = debounce(this.scroll)
+
+        container.addEventListener('scroll', this.handleScroll)
+        this.$once('hook:beforeDestroy', () => {
+            container.removeEventListener('scroll', this.handleScroll)
+        })
+    }
+}
+</script>
+
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+.form-anchor {
+    position: fixed;
+    right: 0;
+    top: 200px;
+    min-width: 72px;
+    overflow: hidden;
+    border-radius: 4px 0 0 4px;
+    background: #fff;
+    box-shadow: 0 2px 12px 0 rgba(166, 167, 173, 0.5);
+    z-index: 100;
+
+    > div {
+        width: inherit;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        color: #7C7E85;
+        padding: 0 10px;
+        font-size: 12px;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+            color: $--color-primary
+        }
+
+        &:not(:last-child) {
+            box-shadow: 0 1px 0 0 rgba(166, 167, 173, 0.1);
+        }
+    }
+}
+</style>

vue/src/component/AbstractForm/FormCard.vue

@@ -2,7 +2,7 @@
     <el-card :class="{collapsed}">
         <div slot="header" class="clearfix">
             <slot name="header">{{ header }}</slot>
-            <i class="el-icon-arrow-up collapse-card-icon" @click="collapse"/>
+            <i class="el-icon-arrow-up form-card-icon"/>
         </div>
         <slot/>
     </el-card>
@@ -10,35 +10,39 @@
 
 <script>
 export default {
-    name: "CollapseCard",
+    name: "FormCard",
 
     props: {
         header: String
     },
 
-    data() {
+    data: () => ({collapsed: false}),
-        return {
-            collapsed: false
-        }
-    },
 
     methods: {
         collapse() {
             this.collapsed = !this.collapsed
         }
+    },
+
+    mounted() {
+        const dom = this.$el.querySelector('.el-card__header')
+        dom.addEventListener('click', this.collapse)
+        this.$once('hook:beforeDestroy', () => {
+            dom.removeEventListener('click', this.collapse)
+        })
     }
 }
 </script>
 
 <style>
-.collapse-card-icon {
+.form-card-icon {
     float: right;
     font-weight: bold;
     transition: transform .3s;
     cursor: pointer;
 }
 
-.collapsed .collapse-card-icon {
+.collapsed .form-card-icon {
     transform: rotate(180deg);
 }
 

vue/src/component/AbstractForm/FormValidateInfo.vue

@@ -0,0 +1,129 @@
+<template>
+    <el-popover
+        ref="popover"
+        :disabled="error.length === 0"
+        placement="top"
+        width="256"
+        trigger="click"
+        popper-class="form-validate-info"
+    >
+        <div class="form-validate-info-title">表单校验信息</div>
+        <div class="form-validate-info-content">
+            <div v-for="i in error" :key="i.prop" class="form-validate-info-item" @click="() => onClick(i)">
+                <i class="el-icon-circle-close"/>
+                <div class="form-validate-info-item-msg">{{ i.msg }}</div>
+                <div class="form-validate-info-item-label">{{ i.label }}</div>
+            </div>
+        </div>
+        <template slot="reference">
+            <span v-show="error.length > 0" class="form-validate-info-ref">
+                <i class="el-icon-circle-close"/>
+                {{ error.length }}
+            </span>
+        </template>
+    </el-popover>
+</template>
+
+<script>
+export default {
+    name: "FormValidateInfo",
+
+    props: {form: Function},
+
+    data() {
+        return {
+            visible: false,
+            error: []
+        }
+    },
+
+    methods: {
+        onValidate(prop, success, msg) {
+            const alreadyIndex = this.error.findIndex(i => i.prop === prop)
+            if (alreadyIndex !== -1) {
+                if (success) this.error.splice(alreadyIndex, 1)
+                else this.$set(this.error, alreadyIndex, {...this.error[alreadyIndex], msg})
+            }
+            else {
+                if (success) return
+                const formItem = this.findFormItem(prop)
+                this.error.push({prop, msg, label: formItem.label})
+            }
+        },
+
+        onClick({prop}) {
+            const formItem = this.findFormItem(prop)
+            formItem && formItem.$el.scrollIntoView({block: 'center'})
+            this.$refs.popover.doClose()
+        },
+
+        findFormItem(prop) {
+            return this.form().fields.find(i => i.prop === prop)
+        }
+    },
+
+    mounted() {
+        const form = this.form()
+        form.$on('validate', this.onValidate)
+        this.$once('hook:beforeDestroy', () => {
+            form.$off('validate', this.onValidate)
+        })
+    }
+}
+</script>
+
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+.form-validate-info {
+    &.el-popper {
+        padding: 0;
+    }
+
+    &-ref {
+        padding: 0 10px;
+        cursor: pointer;
+    }
+
+    &-title {
+        text-align: center;
+        padding: 5px 16px 4px;
+        border-bottom: 1px solid #f0f0f0;
+    }
+
+    &-content {
+        max-height: 300px;
+        overflow: overlay;
+    }
+
+    &-item {
+        padding: 8px 16px;
+        background-color: #fff;
+        border-bottom: 1px solid #f0f0f0;
+        cursor: pointer;
+        transition: background-color .3s;
+
+        &:hover {
+            background-color: #e6f7ff;
+        }
+
+        .el-icon-circle-close {
+            float: left;
+            margin-top: 4px;
+            margin-right: 12px;
+            padding-bottom: 22px;
+        }
+
+        &-label {
+            margin-top: 2px;
+            color: rgba(0, 0, 0, .45);
+            font-size: 12px;
+        }
+    }
+
+    &-ref,
+    &-item .el-icon-circle-close {
+        color: $--color-danger;
+    }
+}
+</style>

vue/src/component/AbstractForm/index.vue

@@ -11,6 +11,7 @@ export default {
                 ref="form"
                 label-position="right"
                 label-width="100px"
+                label-suffix="："
                 size="small"
                 status-icon
                 {...data}

vue/src/component/AbstractTable/index.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import Empty from "@/components/Empty"
+import Empty from "@/component/Empty"
 
 export default {
     name: "AbstractTable",

vue/src/component/Charts/PieChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import {logic, resize} from "@/mixins/chart"
+import {logic, resize} from "@/mixin/chart"
 
 export default {
     mixins: [resize, logic],

vue/src/component/ColorCheckBox/group.vue

@@ -21,7 +21,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~@/assets/styles/variables.scss";
+@import "~@/asset/style/variables.scss";
 
 .color-checkbox-group {
     @include clearfix

vue/src/component/ContextMenu/index.vue

@@ -63,7 +63,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/assets/styles/variables.scss";
+@import "~@/asset/style/variables.scss";
 
 .contextmenu {
     margin: 0;

vue/src/component/FormDialog/index.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import LoadingMask from '@/components/LoadingMask'
+import LoadingMask from '@/component/LoadingMask'
 
 export default {
     name: "FormDialog",

vue/src/component/LinerProgress/style.scss

@@ -1,4 +1,4 @@
-@import "~@/assets/styles/variables.scss";
+@import "~@/asset/style/variables.scss";
 
 .liner-progress {
     position: relative;

vue/src/component/RegionSelector/Tab/index.vue

@@ -59,8 +59,8 @@
 </template>
 
 <script>
-import {debounce} from "@/utils"
+import {debounce} from "@/util"
-import {createLimitTree, getNodeId} from "@/utils/tree"
+import {createLimitTree, getNodeId} from "@/util/tree"
 import {store, init} from '../store'
 import common from '../mixin'
 

vue/src/component/RegionSelector/Tree/TreeDialog.vue

@@ -1,7 +1,7 @@
 <script type="text/jsx">
 import {store, init} from '../store'
-import FormDialog from "@/components/FormDialog"
+import FormDialog from "@/component/FormDialog"
-import {createLimitTree, getNodeId} from "@/utils/tree"
+import {createLimitTree, getNodeId} from "@/util/tree"
 
 export default {
     components: {FormDialog},

vue/src/component/SearchForm/index.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import {getElementInnerWidth} from '@/utils/browser'
+import {getElementInnerWidth} from '@/util/browser'
 
 export default {
     name: "SearchForm",
@@ -93,7 +93,13 @@ export default {
         }
 
         return (
-            <el-form class="searchForm" label-position="right" label-width={this.labelWidth} size="small">
+            <el-form
+                class="searchForm"
+                label-position="right"
+                label-width={this.labelWidth}
+                label-suffix="："
+                size="small"
+            >
                 <el-row gutter={20}>
                     {this.num > slots.length ? slots : slots.slice(0, this.num)}
                 </el-row>

vue/src/component/Skeleton/PageSkeleton.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-//样式搬的https://antdv.com/components/skeleton-cn/
+//样式搬的https://antdv.com/component/skeleton-cn/
 import QSkeleton from './index'
 
 export default {
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~@/assets/styles/variables.scss";
+@import "~@/asset/style/variables.scss";
 
 .page-skeleton-wrapper {
     margin: $page-view-margin;

vue/src/component/SvgIcon/index.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import {isExternal} from '@/utils/validate'
+import {isExternal} from '@/util/validate'
 
 export default {
     name: 'SvgIcon',

vue/src/component/TinymceEditor/index.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import {waitUntilSuccess} from "@/utils"
+import {waitUntilSuccess} from "@/util"
-import {elError} from "@/utils/message"
+import {elError} from "@/util/message"
 
 const DEFAULT_OPTIONS = {
     language: 'zh_CN',

vue/src/component/TreeSelect/index.vue

@@ -47,8 +47,8 @@
 </template>
 
 <script>
-import {debounce} from "@/utils"
+import {debounce} from "@/util"
-import {flatTree} from "@/utils/tree"
+import {flatTree} from "@/util/tree"
 
 export default {
     name: "TreeSelect",

vue/src/component/UploadFile/index.vue

@@ -57,10 +57,10 @@
 * */
 import axios from 'axios'
 import {attachmentPrefix} from '@/config'
-import {debounce, isEmpty} from '@/utils'
+import {debounce, isEmpty} from '@/util'
-import {elError} from "@/utils/message"
+import {elError} from "@/util/message"
-import {isImage, isDoc, isPdf, isPpt, isRar, isXls, isTxt, isZip} from "@/utils/validate"
+import {isImage, isDoc, isPdf, isPpt, isRar, isXls, isTxt, isZip} from "@/util/validate"
-import {preview, deleteUpload, download, upload, autoCompleteUrl} from "@/utils/file"
+import {preview, deleteUpload, download, upload, autoCompleteUrl} from "@/util/file"
 
 const typeMapper = [
     {test: isImage}, {test: isDoc, type: 'doc'}, {test: isPdf, type: 'pdf'}, {test: isPpt, type: 'ppt'},

vue/src/component/UploadFile/style.scss

@@ -1,4 +1,4 @@
-@import "~@/assets/styles/variables.scss";
+@import "~@/asset/style/variables.scss";
 
 .disabled .el-upload--picture-card {
     display: none;

vue/src/component/biz/doc/DocHistory.vue

@@ -1,5 +1,5 @@
 <template>
-    <collapse-card header="单据历史" style="margin-top: 16px">
+    <div>
         <abstract-table v-loading="loading" :data="data" :highlight-current-row="false">
             <el-table-column align="center" label="#" type="index" width="80"/>
             <el-table-column align="center" label="操作人" prop="uname"/>
@@ -17,19 +17,18 @@
             layout="total, prev, pager, next, jumper"
             @current-change="pageChange"
         />
-    </collapse-card>
+    </div>
 </template>
 
 <script>
-import AbstractTable from "@/components/AbstractTable"
+import AbstractTable from "@/component/AbstractTable"
-import CollapseCard from '@/components/CollapseCard'
 import {searchHistory} from "@/api/doc/history"
-import {isEmpty, timeFormat} from "@/utils"
+import {isEmpty, timeFormat} from "@/util"
 
 export default {
     name: "DocHistory",
 
-    components: {AbstractTable, CollapseCard},
+    components: {AbstractTable},
 
     props: {id: String},
 

vue/src/config/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import {apiPrefix} from '@/config'
 import {MessageBox, Notification} from 'element-ui'
-import Message from '@ele/components/Message'
+import Message from '@ele/component/Message'
 import store from '@/store'
 
 const service = axios.create({

vue/src/filter/index.js

@@ -1,4 +1,4 @@
-import {isEmpty, timeFormat} from '@/utils'
+import {isEmpty, timeFormat} from '@/util'
 
 export function timestamp2Date(timestamp) {
     if (isEmpty(timestamp)) return ''

vue/src/globalMethod/Guide/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Main from './main.vue'
-import {mergeObj} from "@/utils"
+import {mergeObj} from "@/util"
 
 const GuideConstructor = Vue.extend(Main)
 

vue/src/globalMethod/Guide/main.vue

@@ -37,7 +37,7 @@
  * 由driver.js改造而来
  * vue里交互型的导航不太行，太多东西做不到，换成引导手册吧
  */
-import {debounce, isEmpty} from "@/utils"
+import {debounce, isEmpty} from "@/util"
 import {addHighlightClasses, getCalculatedPosition, inAppView, jump, removeHighlightClasses} from "./utils"
 
 export default {