Browse Source

Merge branch 'master' of git.sagacloud.cn:web/wanda-adm

zhangyu 4 years ago
parent
commit
0f00901b14

+ 1 - 1
package.json

@@ -16,7 +16,7 @@
     "@babel/runtime": "^7.12.5",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "element-ui": "^2.14.1",
+    "element-ui": "^2.15.0",
     "js-cookie": "^2.2.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",

+ 23 - 0
src/components/public/adm-btn.vue

@@ -0,0 +1,23 @@
+<template>
+    <el-button :type="btnMsg.type" class="adm-btn">{{ btnMsg.title }}</el-button>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+interface Btn {
+    type: string
+    title: string
+}
+
+@Component({
+    name: 'adm-btn'
+})
+export default class extends Vue {
+    @Prop({ type: Object }) btnMsg: Btn
+}
+</script>
+
+<style scoped>
+
+</style>

+ 125 - 0
src/components/public/adm-multi-table.vue

@@ -0,0 +1,125 @@
+<template>
+    <el-table
+        :data="tableData"
+        style="width: 100%"
+        class="adm-multi-table"
+        size="mini"
+    >
+        <el-table-column
+            prop="date"
+            label="编辑"
+            width="80"
+            align="center"
+
+           >
+            <template slot-scope="scope">
+                <span
+                    class="el-icon-edit el-input__icon"
+                    style="cursor: pointer"
+                    @click="handleEdit(scope.$index, scope.row)">
+                </span>
+            </template>
+        </el-table-column>
+        <el-table-column label="配送信息" >
+            <el-table-column
+                prop="province"
+                label="省份"
+                width="120">
+            </el-table-column>
+            <el-table-column
+                prop="city"
+                label="市区"
+                width="120">
+            </el-table-column>
+            <el-table-column
+                prop="zip"
+                label="邮编"
+                width="120">
+            </el-table-column>
+
+        </el-table-column>
+        <el-table-column label="地址信息">
+            <el-table-column
+                prop="province"
+                label="省份"
+                width="120">
+            </el-table-column>
+            <el-table-column
+                prop="city"
+                label="市区"
+                width="120">
+            </el-table-column>
+            <el-table-column
+                prop="zip"
+                label="邮编"
+                width="120">
+            </el-table-column>
+
+        </el-table-column>
+
+    </el-table>
+</template>
+
+<script>
+export default {
+    name: 'adm-multi-table',
+    data() {
+        return {
+            tableData: [{
+                date: '2016-05-03',
+                name: '王小虎',
+                province: '上海',
+                city: '普陀区',
+                address: '上海市普陀区金沙江路 1518 弄',
+                zip: 200333
+            }, {
+                date: '2016-05-02',
+                name: '王小虎',
+                province: '上海',
+                city: '普陀区',
+                address: '上海市普陀区金沙江路 1518 弄',
+                zip: 200333
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                province: '上海',
+                city: '普陀区',
+                address: '上海市普陀区金沙江路 1518 弄',
+                zip: 200333
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                province: '上海',
+                city: '普陀区',
+                address: '上海市普陀区金沙江路 1518 弄',
+                zip: 200333
+            }, {
+                date: '2016-05-08',
+                name: '王小虎',
+                province: '上海',
+                city: '普陀区',
+                address: '上海市普陀区金沙江路 1518 弄',
+                zip: 200333
+            }, {
+                date: '2016-05-06',
+                name: '王小虎',
+                province: '上海',
+                city: '普陀区',
+                address: '上海市普陀区金沙江路 1518 弄',
+                zip: 200333
+            }, {
+                date: '2016-05-07',
+                name: '王小虎',
+                province: '上海',
+                city: '普陀区',
+                address: '上海市普陀区金沙江路 1518 弄',
+                zip: 200333
+            }]
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

+ 36 - 0
src/components/public/adm-pagination.vue

@@ -0,0 +1,36 @@
+<template>
+    <el-pagination
+        :current-page="currentPage"
+        :page-sizes=""
+        :page-size=""
+        layout="total,sizes,prev,pager,next,jumper"
+        :total=""
+    />
+
+
+</template>
+
+<script lang="ts">
+interface Pagination {
+    size: number
+    total: number
+    sizes: []
+}
+
+import { Vue, Component, Emit, Prop } from "vue-property-decorator";
+@Component({
+    name: 'adm-pagination'
+})
+export default class extends Vue {
+    @Prop({ type: Object }) paginationList: Pagination
+
+    @Emit('currentPage')
+    currentPage(val: number) {
+        return val
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 29 - 0
src/components/public/adm-search.vue

@@ -0,0 +1,29 @@
+<template>
+    <el-input
+        placeholder="请输入"
+        prefix-icon="el-icon-search"
+        v-model="input"
+        @change="handleSearch"
+        clearable
+        style="width: 217px"
+    />
+</template>
+
+<script lang="ts">
+import { Vue, Component, Emit } from "vue-property-decorator";
+@Component({
+    name: 'adm-search'
+})
+export default class extends Vue {
+    private input = ''
+
+    @Emit('SearchValue')
+    private handleSearch() {
+        return this.input
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 53 - 0
src/components/public/adm-select.vue

@@ -0,0 +1,53 @@
+<template>
+    <el-select
+        v-model="value"
+        placeholder="请选择"
+        @change="handleFilter"
+        clearable
+        filterable
+        class="adm-select"
+    >
+        <el-option
+            v-for="item in sortOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+
+        />
+    </el-select>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Emit } from "vue-property-decorator";
+@Component({
+    name: 'adm-select'
+})
+export default class extends Vue {
+    private value = ''
+    private sortOptions = [{
+        value: '选项1',
+        label: '黄金糕'
+    }, {
+        value: '选项2',
+        label: '双皮奶'
+    }, {
+        value: '选项3',
+        label: '蚵仔煎'
+    }, {
+        value: '选项4',
+        label: '龙须面'
+    }, {
+        value: '选项5',
+        label: '北京烤鸭'
+    }]
+
+    @Emit('selectValue')
+    private handleFilter() {
+        return this.value
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 47 - 0
src/components/public/adm-statistics.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="Statistics">
+        <span class="title">{{ statisticsMsg.title }}</span>
+        <span class="total">{{ statisticsMsg.total }}</span>
+    </div>
+</template>
+
+<script lang="ts">
+interface Statistics {
+    title: string
+    total: number
+}
+
+import { Vue, Component, Prop } from "vue-property-decorator";
+@Component({
+    name: "adm-statistics"
+})
+export default class extends Vue {
+    @Prop({ type: Object }) statisticsMsg: Statistics;
+}
+</script>
+
+<style scoped lang="scss">
+$dib: inline-block;
+$h: 67px;
+.Statistics {
+    height: $h;
+    background: #E2E3E4;
+
+    .title {
+        display: $dib;
+        font-size: 16px;
+        color: #646C73;
+        line-height: $h;
+        margin-left: 25px;
+        margin-right: 21px;
+    }
+
+    .total {
+        display: $dib;
+        font-size: 22px;
+        font-weight: 500;
+        color: #1F2429;
+        line-height: $h;
+    }
+}
+</style>

+ 28 - 0
src/components/public/adm-tabs.vue

@@ -0,0 +1,28 @@
+<template>
+    <el-tabs class="adm-tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"></el-tab-pane>
+    </el-tabs>
+</template>
+<script lang="ts">
+interface Pane {
+    [index: number]: number
+}
+
+import { Vue, Component, Prop, Emit } from "vue-property-decorator";
+@Component({
+    name: 'adm-tabs'
+})
+export default class extends Vue {
+    private activeName = '0'
+    @Prop({ type: Array }) paneMsg?: Pane
+
+    @Emit('paneValue')
+    private handleClick(tab:any) {
+        return tab.index
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 7 - 6
src/layout/index.vue

@@ -1,12 +1,12 @@
 <template>
     <div :class="classObj" class="app-wrapper">
-        <div v-if="classObj.mobile && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-        <sidebar class="sidebar-container" />
-        <navbar />
+        <div v-if="classObj.mobile && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+        <sidebar class="sidebar-container"/>
+        <navbar/>
         <div class="main-container">
-            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-            <hr />
-            <app-main />
+            <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+            <hr/>
+            <app-main/>
         </div>
     </div>
 </template>
@@ -68,6 +68,7 @@ export default class extends mixins(ResizeMixin) {
     position: relative;
     overflow-y: hidden;
     padding: 0 10px 10px;
+    background: #F1F2F3;
 }
 
 .sidebar-container {

+ 13 - 1
src/router/index.ts

@@ -208,7 +208,19 @@ export default new Router({
             title: "404",
             noCache: true
           }
-        }
+        },
+          {
+              path: "demo",
+              component: () =>
+                  import(
+                      /* webpackChunkName: "error-page-demo" */ "@/views/error-page/demo.vue"
+                      ),
+              name: "demo",
+              meta: {
+                  title: "demo",
+                  noCache: true
+              }
+          }
       ]
     },
     {

+ 0 - 0
src/utils/maintain.ts


+ 85 - 0
src/views/error-page/demo.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="app-container">
+        demo 组件引用,接口调用
+        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
+            <el-table-column align="center" label="ID" width="95">
+                <template slot-scope="scope">
+                    {{ scope.$index }}
+                </template>
+            </el-table-column>
+            <el-table-column label="Title">
+                <template slot-scope="scope">
+                    {{ scope.row.title }}
+                </template>
+            </el-table-column>
+            <el-table-column label="Author" width="180" align="center">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.author }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="Pageviews" width="110" align="center">
+                <template slot-scope="scope">
+                    {{ scope.row.pageviews }}
+                </template>
+            </el-table-column>
+            <el-table-column class-name="status-col" label="Status" width="110" align="center">
+                <template slot-scope="scope">
+                    <el-tag :type="scope.row.status | statusFilter">
+                        {{ scope.row.status }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="created_at" label="Created at" width="250">
+                <template slot-scope="scope">
+                    <i class="el-icon-time" />
+                    <span>{{ scope.row.timestamp | parseTime }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { getArticles } from "@/api/articles";
+import { IArticleData } from "@/api/types";
+
+@Component({
+    name: "Table",
+    filters: {
+        statusFilter: (status: string) => {
+            const statusMap: { [key: string]: string } = {
+                published: "success",
+                draft: "gray",
+                deleted: "danger",
+            };
+            return statusMap[status];
+        },
+        parseTime: (timestamp: string) => {
+            return new Date(timestamp).toISOString();
+        },
+    },
+})
+export default class extends Vue {
+    private list: IArticleData[] = [];
+    private listLoading = true;
+    private listQuery = {
+        page: 1,
+        limit: 20,
+    };
+
+    created() {
+        this.getList();
+    }
+
+    private async getList() {
+        this.listLoading = true;
+        const { data } = await getArticles(this.listQuery);
+        this.list = data.items;
+        // Just to simulate the time of the request
+        setTimeout(() => {
+            this.listLoading = false;
+        }, 0.5 * 1000);
+    }
+}
+</script>

+ 7 - 0
src/views/maintain/components/index.ts

@@ -0,0 +1,7 @@
+export { default as AdmSelect } from "@/components/public/adm-select.vue"
+export { default as AdmSearch } from "@/components/public/adm-search.vue"
+export { default as AdmBtn } from "@/components/public/adm-btn.vue"
+export { default as AdmTabs } from "@/components/public/adm-tabs.vue"
+export { default as AdmMultiTable } from "@/components/public/adm-multi-table.vue"
+export { default as Statistics } from "@/components/public/adm-statistics.vue"
+

+ 102 - 72
src/views/maintain/device/index.vue

@@ -1,85 +1,115 @@
 <template>
-    <div class="app-container">
-        demo 组件引用,接口调用
-        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
-            <el-table-column align="center" label="ID" width="95">
-                <template slot-scope="scope">
-                    {{ scope.$index }}
-                </template>
-            </el-table-column>
-            <el-table-column label="Title">
-                <template slot-scope="scope">
-                    {{ scope.row.title }}
-                </template>
-            </el-table-column>
-            <el-table-column label="Author" width="180" align="center">
-                <template slot-scope="scope">
-                    <span>{{ scope.row.author }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="Pageviews" width="110" align="center">
-                <template slot-scope="scope">
-                    {{ scope.row.pageviews }}
-                </template>
-            </el-table-column>
-            <el-table-column class-name="status-col" label="Status" width="110" align="center">
-                <template slot-scope="scope">
-                    <el-tag :type="scope.row.status | statusFilter">
-                        {{ scope.row.status }}
-                    </el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column align="center" prop="created_at" label="Created at" width="250">
-                <template slot-scope="scope">
-                    <i class="el-icon-time" />
-                    <span>{{ scope.row.timestamp | parseTime }}</span>
-                </template>
-            </el-table-column>
-        </el-table>
+    <div class="adm-device">
+        <statistics :statistics-msg="statisticsMsg"/>
+        <div class="operation">
+            <admSelect @selectValue="selectValue"/>
+            <admSearch @SearchValue="SearchValue"/>
+            <admBtn :btnMsg="btnMsg"/>
+        </div>
+        <div class="hr"></div>
+        <div class="content">
+            <admTabs :paneMsg="paneMsg" @paneValue="paneValue"/>
+            <div class="table">
+                <admMultiTable/>
+            </div>
+        </div>
     </div>
 </template>
-
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { getArticles } from "@/api/articles";
-import { IArticleData } from "@/api/types";
+import { Vue, Component } from "vue-property-decorator";
+import { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable } from '../components/index'
 
 @Component({
-    name: "Table",
-    filters: {
-        statusFilter: (status: string) => {
-            const statusMap: { [key: string]: string } = {
-                published: "success",
-                draft: "gray",
-                deleted: "danger",
-            };
-            return statusMap[status];
-        },
-        parseTime: (timestamp: string) => {
-            return new Date(timestamp).toISOString();
-        },
-    },
+    name: 'adm-device',
+    components: { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable }
 })
 export default class extends Vue {
-    private list: IArticleData[] = [];
-    private listLoading = true;
-    private listQuery = {
-        page: 1,
-        limit: 20,
-    };
-
-    created() {
-        this.getList();
+    private statisticsMsg = {
+        title: '全部设备',
+        total: 234
+
+    }
+    private btnMsg = {
+        type: 'default',
+        title: '添加设备'
+    }
+    private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
+
+// 维护阶段 tabs
+    paneValue(val: number) {
+        console.log(val)
+        switch (val) {
+            case 0:
+                break;
+            case 1:
+                break;
+            case 2:
+                break;
+            default:
+        }
+    }
+
+    //设备类筛选
+    selectValue(val: string) {
+        console.log(val)
+
     }
 
-    private async getList() {
-        this.listLoading = true;
-        const { data } = await getArticles(this.listQuery);
-        this.list = data.items;
-        // Just to simulate the time of the request
-        setTimeout(() => {
-            this.listLoading = false;
-        }, 0.5 * 1000);
+// 搜索
+    SearchValue(val: string) {
+        console.log(val)
     }
 }
 </script>
+<style lang="scss" scoped>
+$margin: 12px;
+.adm-device {
+    background: #fff;
+    padding: 12px;
+    height: 100%;
+
+    .operation {
+        margin: 12px 0;
+
+        .adm-select {
+            margin-right: $margin;
+        }
+
+        .adm-btn {
+            float: right;
+        }
+
+    }
+
+    .hr {
+        background: #E1E7EA;
+        color: #E1E7EA;
+        width: 100%;
+        height: 1px;
+        margin-bottom: 16px;
+    }
+
+    .content {
+        height: 100%;
+
+        .table {
+            border-left: 1px solid #E1E7EA;
+            border-right: 1px solid #E1E7EA;
+            border-bottom: 1px solid #E1E7EA;
+            height: calc(100% - 180px);
+            padding: 12px;
+        }
+
+        .adm-multi-table {
+
+        }
+
+
+    }
+}
+</style>
+<style>
+.el-tabs__header {
+    margin: 0;
+}
+</style>

+ 21 - 4
src/views/maintain/space/index.vue

@@ -1,12 +1,29 @@
 <template>
-    <div>空间</div>
+  <div class="space-index">
+    <statistics :statistics-msg="statisticsMsg" />
+  </div>
 </template>
 
-<script>
-export default {
-    name: "index"
+<script lang="ts">
+import { Vue, Component, Watch } from "vue-property-decorator";
+import Bus from "@/utils/bus";
+import statistics from "@/components/public/adm-statistics.vue";
+@Component({
+    name: 'space-index',
+    components: { statistics }
+})
+export default class extends Vue {
+    private statisticsMsg = {
+        title: '全部空间',
+        total: 93640
+    }
 }
 </script>
 
 <style scoped>
+.space-index{
+    background: #fff;
+    padding: 12px;
+    height: 100%;
+}
 </style>

+ 10 - 0
src/views/project/index.vue

@@ -6,6 +6,7 @@
             roles:
             <span v-for="role in roles" :key="role">{{ role }}</span>
         </p>
+
     </div>
 </template>
 
@@ -13,6 +14,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import { UserModule } from "../../store/modules/user";
 
+
 @Component({
     name: "index",
 })
@@ -24,6 +26,14 @@ export default class extends Vue {
     get roles() {
         return UserModule.roles;
     }
+
+    selectValue(val: string) {
+        console.log(val)
+    }
+
+    SearchValue(val: string) {
+        console.log(val)
+    }
 }
 </script>
 

+ 0 - 0
src/views/scene/components/index.ts


+ 3 - 1
tsconfig.json

@@ -1,5 +1,7 @@
 {
     "compilerOptions": {
+        // 严格属性初始化
+        "strictPropertyInitialization": false,
         "target": "esnext",
         "module": "esnext",
         "strict": true,
@@ -16,7 +18,7 @@
             "jest",
             "webpack-env"
         ],
-        "typeRoots":  [
+        "typeRoots": [
             "node_modules",
             "src/@types/**/*"
         ],

+ 2 - 2
vue.config.js

@@ -52,8 +52,8 @@ module.exports = {
         }
     },
     chainWebpack(config) {
-        // provide the app's title in html-webpack-plugin's options list so that
-        // it can be accessed in index.html to inject the correct title.
+        //在html网页包插件的选项列表中提供应用程序的标题,以便
+        //可以在中访问索引.html插入正确的标题。
         // https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
         config.plugin("html").tap(args => {
             args[0].title = name;