详情页样式修改

代码位置调整

vue/src/assets/styles/detail-page.scss

@@ -5,6 +5,14 @@
         background: #fff;
         border-bottom: 1px solid #e8eaec;
 
+        > .el-page-header {
+            padding: 0 0 24px 0;
+
+            .el-page-header__left:hover {
+                color: $--color-primary;
+            }
+        }
+
         > .el-row {
             display: flex;
             width: 100%;
@@ -15,20 +23,6 @@
             }
         }
 
-        &-close-btn {
-            font-size: 18px;
-        }
-
-        &-title {
-            margin-left: 5px;
-            font-weight: 500;
-            font-size: 20px;
-            line-height: 42px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
         &-left {
             width: 100%;
             overflow: hidden;

vue/src/bizComponents/document/DocDetailFooter.vue

@@ -4,7 +4,7 @@
             <slot name="left"/>
         </div>
         <div class="detail-page-footer-right">
-            <slot name="right"/>
+            <slot/>
         </div>
     </div>
 </template>

vue/src/bizComponents/document/DocDetailHeader.vue

@@ -1,14 +1,7 @@
 <template functional>
     <div class="detail-page-header">
-        <el-row>
+        <el-page-header @back="listeners.close" :content="props.title"/>
-            <el-button
+
-                    class="detail-page-header-close-btn"
-                    type="text"
-                    icon="el-icon-arrow-left"
-                    @click="listeners.close"
-            />
-            <span class="detail-page-header-title">{{props.title}}</span>
-        </el-row>
         <el-row>
             <el-row class="detail-page-header-left">
                 <el-col v-for="i in props.description" :key="i.label" :xs="24" :sm="12">

vue/src/bizComponents/document/DocHistory.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card header="单据历史" style="margin-top: 16px">
+    <collapse-card header="单据历史" style="margin-top: 16px">
         <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"/>
@@ -7,18 +7,19 @@
             <el-table-column align="center" label="时 间" prop="time"/>
             <el-table-column align="center" label="备注" prop="info"/>
         </abstract-table>
-    </el-card>
+    </collapse-card>
 </template>
 
 <script>
     import AbstractTable from "@/components/AbstractTable"
+    import CollapseCard from '@/components/CollapseCard'
     import {getDocumentHistoryByPid} from "@/api/documentHistory"
     import {isEmpty, timeFormat} from "@/utils"
 
     export default {
         name: "DocHistory",
 
-        components: {AbstractTable},
+        components: {AbstractTable, CollapseCard},
 
         props: {id: String},
 

vue/src/components/CollapseCard/index.vue

@@ -0,0 +1,48 @@
+<template>
+    <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"/>
+        </div>
+        <slot/>
+    </el-card>
+</template>
+
+<script>
+    export default {
+        name: "CollapseCard",
+
+        props: {
+            header: String
+        },
+
+        data() {
+            return {
+                collapsed: false
+            }
+        },
+
+        methods: {
+            collapse() {
+                this.collapsed = !this.collapsed
+            }
+        }
+    }
+</script>
+
+<style>
+    .collapse-card-icon {
+        float: right;
+        font-weight: bold;
+        transition: transform .3s;
+        cursor: pointer;
+    }
+
+    .collapsed .collapse-card-icon {
+        transform: rotate(180deg);
+    }
+
+    .el-card.collapsed > .el-card__body {
+        display: none;
+    }
+</style>

vue/src/filter/index.js

@@ -5,7 +5,7 @@ export function timestamp2Date(timestamp) {
     return timeFormat(null, new Date(timestamp))
 }
 
-/*经过多长时间，单位秒，最低时间为分钟*/
+//经过多长时间，单位秒，最低时间为分钟
 export function timePass(time) {
     if (!time || isNaN(time)) return 'NaN'
     if (time < 3600) return ~~(time / 60) + ' 分'
@@ -59,3 +59,9 @@ export function uppercaseFirst(string) {
     if (isEmpty(string)) return ''
     return string.charAt(0).toUpperCase() + string.slice(1)
 }
+
+export default function (Vue) {
+    Object
+        .entries({timestamp2Date, timePass, timeAgo, numberFormatter, toThousandFilter, uppercaseFirst})
+        .forEach(([key, value]) => Vue.filter(key, value))
+}

vue/src/globalMethods/index.js

@@ -0,0 +1,13 @@
+import BottomTip from './BottomTip'
+import Guide from './Guide'
+import ImageViewer from './ImageViewer'
+import PuzzleVerify from './PuzzleVerify'
+import Signature from './SignautreBoard'
+
+export default function (Vue) {
+    Vue.prototype.$bottomTip = BottomTip
+    Vue.prototype.$guide = Guide
+    Vue.prototype.$image = ImageViewer
+    Vue.prototype.$puzzleVerify = PuzzleVerify
+    Vue.prototype.$signature = Signature
+}

vue/src/main.js

@@ -9,27 +9,13 @@ import router from '@/router'
 import '@/assets/icons'
 import '@/utils/errorLog'
 import '@/directive'
-import * as filters from './filter'
+import filters from './filter'
-import BottomTip from '@/components/BottomTip'
+import globalMethods from '@/globalMethods'
-import Guide from '@/components/Guide'
-import ImageViewer from '@/components/ImageViewer'
-import PuzzleVerify from '@/components/PuzzleVerify'
-import Signature from '@/components/SignautreBoard'
 
 Vue.use(Element)
 Vue.use(ElementPersonal)
-
+Vue.use(filters)
-//注册过滤器
+Vue.use(globalMethods)
-Object.keys(filters).forEach(key => {
-    Vue.filter(key, filters[key])
-})
-
-//注册插件
-Vue.prototype.$bottomTip = BottomTip
-Vue.prototype.$guide = Guide
-Vue.prototype.$image = ImageViewer
-Vue.prototype.$puzzleVerify = PuzzleVerify
-Vue.prototype.$signature = Signature
 
 Vue.config.productionTip = false
 

vue/src/mixins/bizDocDetailMixin.js

@@ -1,6 +1,7 @@
 import AbstractForm from '@/components/AbstractForm'
 import AbstractFormItem from "@/components/AbstractForm/AbstractFormItem"
 import AbstractTable from "@/components/AbstractTable"
+import CollapseCard from '@/components/CollapseCard'
 import DocDetailHeader from "@/bizComponents/document/DocDetailHeader"
 import DocDetailFooter from "@/bizComponents/document/DocDetailFooter"
 import DocHistory from '@/bizComponents/document/DocHistory'
@@ -18,6 +19,7 @@ export default {
         AbstractForm,
         AbstractFormItem,
         AbstractTable,
+        CollapseCard,
         DocDetailHeader,
         DocDetailFooter,
         DocHistory,

vue/src/views/message/user/MessageStream.vue

@@ -53,7 +53,6 @@
     import AutoHidden from "./AutoHidden"
     import Empty from '@/components/Empty'
     import {search, read, readAll} from "@/api/message/user"
-    import {isEmpty} from "@/utils"
 
     export default {
         name: "MessageStream",

vue/src/views/purchase/inbound/detail.vue

@@ -8,20 +8,20 @@
         />
 
         <abstract-form :model="form" :rules="rules">
-            <el-card header="流程进度">
+            <collapse-card header="流程进度">
                 <doc-steps :status="form.status" :type="type"/>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="基础信息">
+            <collapse-card header="基础信息">
                 <abstract-form-item label="采购订单：" prop="pid">
                     <el-input v-if="canSave" :value="form.pid" readonly>
                         <el-button slot="append" @click="parentDialog=true">选择</el-button>
                     </el-input>
                     <template v-else>{{form.pid}}</template>
                 </abstract-form-item>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="入库商品">
+            <collapse-card header="入库商品">
                 <abstract-table :data="form.data" :highlight-current-row="false">
                     <el-table-column align="center" label="#" type="index" width="80"/>
                     <el-table-column align="center" label="商 品" prop="cname"/>
@@ -39,18 +39,18 @@
                         </template>
                     </el-table-column>
                 </abstract-table>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="附件">
+            <collapse-card header="附件">
                 <upload-file
                         :file-list="form.imageList"
                         :disabled="!canSave"
                         @remove="removeUpload"
                         @success="uploadSuccess"
                 />
-            </el-card>
+            </collapse-card>
 
-            <el-card header="备注">
+            <collapse-card header="备注">
                 <el-input
                         v-model="form.remark"
                         :rows="4"
@@ -59,20 +59,18 @@
                         show-word-limit
                         type="textarea"
                 />
-            </el-card>
+            </collapse-card>
         </abstract-form>
 
         <doc-history :id="form.id"/>
 
         <doc-detail-footer>
-            <template v-slot:right>
             <el-button plain size="small" @click="close">关 闭</el-button>
             <el-button v-if="canSave" size="small" type="primary" @click="save">保 存</el-button>
             <el-button v-if="canCommit" size="small" type="primary" @click="commit">提 交</el-button>
             <el-button v-if="canWithdraw" size="small" type="danger" @click="withdraw">撤 回</el-button>
             <el-button v-if="canPass" size="small" type="success" @click="pass">通 过</el-button>
             <el-button v-if="canReject" size="small" type="danger" @click="reject">驳 回</el-button>
-            </template>
         </doc-detail-footer>
 
         <order-selector v-model="parentDialog" @select="selectParent"/>
@@ -80,13 +78,13 @@
 </template>
 
 <script>
-    import OrderSelector from './components/OrderSelector'
     import bizDocDetailMixin from "@/mixins/bizDocDetailMixin"
+    import OrderSelector from './components/OrderSelector'
     import {baseUrl, add, commit, getById, pass, reject, update, withdraw} from "@/api/document/purchase/inbound"
     import {getSubById as getParentSubById} from "@/api/document/purchase/order"
     import {isEmpty} from "@/utils"
-    import {isInteger} from "@/utils/validate"
     import {elAlert} from "@/utils/message"
+    import {isInteger} from "@/utils/validate"
 
     export default {
         name: "purchaseInboundDetail",

vue/src/views/purchase/order/detail.vue

@@ -8,20 +8,20 @@
         />
 
         <abstract-form :model="form" :rules="rules">
-            <el-card header="流程进度">
+            <collapse-card header="流程进度">
                 <doc-steps :status="form.status" :finish="form.finish" :type="type"/>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="基础信息">
+            <collapse-card header="基础信息">
                 <abstract-form-item label="供应商：" prop="sname">
                     <el-input v-if="canSave" :value="form.sname" readonly>
                         <el-button slot="append" @click="supplierDialog=true">选择</el-button>
                     </el-input>
                     <template v-else>{{form.sname}}</template>
                 </abstract-form-item>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="采购商品">
+            <collapse-card header="采购商品">
                 <abstract-table :data="form.data" :highlight-current-row="false">
                     <el-table-column align="center" label="#" type="index" width="80"/>
                     <el-table-column align="center" label="商 品">
@@ -85,18 +85,18 @@
                         </el-button>
                     </div>
                 </abstract-table>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="附件">
+            <collapse-card header="附件">
                 <upload-file
                         :file-list="form.imageList"
                         :disabled="!canSave"
                         @remove="removeUpload"
                         @success="uploadSuccess"
                 />
-            </el-card>
+            </collapse-card>
 
-            <el-card header="备注">
+            <collapse-card header="备注">
                 <el-input
                         v-model="form.remark"
                         :rows="4"
@@ -105,20 +105,18 @@
                         show-word-limit
                         type="textarea"
                 />
-            </el-card>
+            </collapse-card>
         </abstract-form>
 
         <doc-history :id="form.id"/>
 
         <doc-detail-footer>
-            <template v-slot:right>
             <el-button plain size="small" @click="close">关 闭</el-button>
             <el-button v-if="canSave" size="small" type="primary" @click="save">保 存</el-button>
             <el-button v-if="canCommit" size="small" type="primary" @click="commit">提 交</el-button>
             <el-button v-if="canWithdraw" size="small" type="danger" @click="withdraw">撤 回</el-button>
             <el-button v-if="canPass" size="small" type="success" @click="pass">通 过</el-button>
             <el-button v-if="canReject" size="small" type="danger" @click="reject">驳 回</el-button>
-            </template>
         </doc-detail-footer>
 
         <supplier-selector v-model="supplierDialog" @select="selectSupplier"/>
@@ -126,13 +124,13 @@
 </template>
 
 <script>
+    import bizDocDetailMixin from "@/mixins/bizDocDetailMixin"
     import CategorySelector from './components/CategorySelector'
     import SupplierSelector from './components/SupplierSelector'
-    import bizDocDetailMixin from "@/mixins/bizDocDetailMixin"
     import {baseUrl, add, commit, getById, pass, reject, update, withdraw} from "@/api/document/purchase/order"
     import {isEmpty} from "@/utils"
-    import {isInteger} from "@/utils/validate"
     import {mul, plus} from "@/utils/math"
+    import {isInteger} from "@/utils/validate"
 
     export default {
         name: "purchaseOrderDetail",

vue/src/views/sell/order/detail.vue

@@ -8,20 +8,20 @@
         />
 
         <abstract-form :model="form" :rules="rules">
-            <el-card header="流程进度">
+            <collapse-card header="流程进度">
                 <doc-steps :status="form.status" :type="type"/>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="基础信息">
+            <collapse-card header="基础信息">
                 <abstract-form-item label="客 户：" prop="customer_name">
                     <el-input v-if="canSave" :value="form.customer_name" readonly>
                         <el-button slot="append" @click="customerDialog=true">选择</el-button>
                     </el-input>
                     <template v-else>{{form.customer_name}}</template>
                 </abstract-form-item>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="销售商品">
+            <collapse-card header="销售商品">
                 <abstract-table :data="form.data" :highlight-current-row="false">
                     <el-table-column align="center" label="#" type="index" width="80"/>
                     <el-table-column align="center" label="商品" prop="cname"/>
@@ -68,18 +68,18 @@
                         </el-button>
                     </div>
                 </abstract-table>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="附件">
+            <collapse-card header="附件">
                 <upload-file
                         :file-list="form.imageList"
                         :disabled="!canSave"
                         @remove="removeUpload"
                         @success="uploadSuccess"
                 />
-            </el-card>
+            </collapse-card>
 
-            <el-card header="备注">
+            <collapse-card header="备注">
                 <el-input
                         v-model="form.remark"
                         :rows="4"
@@ -88,20 +88,18 @@
                         show-word-limit
                         type="textarea"
                 />
-            </el-card>
+            </collapse-card>
         </abstract-form>
 
         <doc-history :id="form.id"/>
 
         <doc-detail-footer>
-            <template v-slot:right>
             <el-button plain size="small" @click="close">关 闭</el-button>
             <el-button v-if="canSave" size="small" type="primary" @click="save">保 存</el-button>
             <el-button v-if="canCommit" size="small" type="primary" @click="commit">提 交</el-button>
             <el-button v-if="canWithdraw" size="small" type="danger" @click="withdraw">撤 回</el-button>
             <el-button v-if="canPass" size="small" type="success" @click="pass">通 过</el-button>
             <el-button v-if="canReject" size="small" type="danger" @click="reject">驳 回</el-button>
-            </template>
         </doc-detail-footer>
 
         <stock-selector v-model="stockDialog" @select="selectStock"/>
@@ -111,9 +109,9 @@
 </template>
 
 <script>
+    import bizDocDetailMixin from "@/mixins/bizDocDetailMixin"
     import CustomerSelector from './components/CustomerSelector'
     import StockSelector from './components/StockSelector'
-    import bizDocDetailMixin from "@/mixins/bizDocDetailMixin"
     import {baseUrl, add, commit, getById, pass, reject, update, withdraw} from "@/api/document/sell/order"
     import {isEmpty} from "@/utils"
     import {mul, plus} from "@/utils/math"

vue/src/views/sell/outbound/detail.vue

@@ -8,20 +8,20 @@
         />
 
         <abstract-form :model="form" :rules="rules">
-            <el-card header="流程进度">
+            <collapse-card header="流程进度">
                 <doc-steps :status="form.status" :finish="form.finish" :type="type"/>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="基础信息">
+            <collapse-card header="基础信息">
                 <abstract-form-item label="销售订单：" prop="pid">
                     <el-input v-if="canSave" :value="form.pid" readonly>
                         <el-button slot="append" @click="parentDialog=true">选择</el-button>
                     </el-input>
                     <template v-else>{{form.pid}}</template>
                 </abstract-form-item>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="出库商品">
+            <collapse-card header="出库商品">
                 <abstract-table :data="form.data" :highlight-current-row="false">
                     <el-table-column align="center" type="expand">
                         <el-table slot-scope="{row}" :data="row.data" border show-summary
@@ -54,18 +54,18 @@
                     <el-table-column align="center" label="出库数量" prop="num" width="150"/>
                     <el-table-column align="center" label="订单剩余未出库数量" prop="remain_num" width="250"/>
                 </abstract-table>
-            </el-card>
+            </collapse-card>
 
-            <el-card header="附件">
+            <collapse-card header="附件">
                 <upload-file
                         :file-list="form.imageList"
                         :disabled="!canSave"
                         @remove="removeUpload"
                         @success="uploadSuccess"
                 />
-            </el-card>
+            </collapse-card>
 
-            <el-card header="备注">
+            <collapse-card header="备注">
                 <el-input
                         v-model="form.remark"
                         :rows="4"
@@ -74,20 +74,18 @@
                         show-word-limit
                         type="textarea"
                 />
-            </el-card>
+            </collapse-card>
         </abstract-form>
 
         <doc-history :id="form.id"/>
 
         <doc-detail-footer>
-            <template v-slot:right>
             <el-button plain size="small" @click="close">关 闭</el-button>
             <el-button v-if="canSave" size="small" type="primary" @click="save">保 存</el-button>
             <el-button v-if="canCommit" size="small" type="primary" @click="commit">提 交</el-button>
             <el-button v-if="canWithdraw" size="small" type="danger" @click="withdraw">撤 回</el-button>
             <el-button v-if="canPass" size="small" type="success" @click="pass">通 过</el-button>
             <el-button v-if="canReject" size="small" type="danger" @click="reject">驳 回</el-button>
-            </template>
         </doc-detail-footer>
 
         <order-selector v-model="parentDialog" @select="selectParent"/>
@@ -97,16 +95,16 @@
 </template>
 
 <script>
+    import bizDocDetailMixin from "@/mixins/bizDocDetailMixin"
     import OrderSelector from "./components/OrderSelector"
     import StockSelector from "./components/StockSelector"
-    import bizDocDetailMixin from "@/mixins/bizDocDetailMixin"
     import {getDetailById as getStockDetail} from "@/api/stock/current"
     import {getSubById as getParentSubById} from "@/api/document/sell/order"
     import {baseUrl, add, commit, getById, pass, reject, update, withdraw} from "@/api/document/sell/outbound"
     import {isEmpty} from "@/utils"
     import {plus, sub} from "@/utils/math"
-    import {isInteger} from "@/utils/validate"
     import {elAlert} from "@/utils/message"
+    import {isInteger} from "@/utils/validate"
 
     export default {
         name: "sellOutboundDetail",