供应商&客户分类

src/main/vue/src/components/PageTitle.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="page-title">
         <div class="navigation">
-            <div class="title">{{ $route.meta.title || $route.name }}</div>
+            <div class="title">{{ name || $route.meta.title || $route.name }}</div>
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                 <el-breadcrumb-item v-for="(item, index) in showMenus" :key="index" :to="{ path: item.path }">
                     {{ item.name }}
                 </el-breadcrumb-item>
-                <el-breadcrumb-item>{{ $route.meta.title || $route.name }}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{ name || $route.meta.title || $route.name }}</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="btns">
@@ -18,14 +18,17 @@
 <script>
 import { mapState } from 'vuex';
 export default {
-    data() {
-        return {};
+    props: {
+        name: {
+            type: String,
+            default: ''
+        }
     },
     computed: {
         ...mapState(['menuPath']),
         showMenus() {
             return [...this.menuPath].filter(item => {
-                return item.path !== this.$route.path;
+                return item.path.split('?')[0] !== this.$route.path;
             });
         }
     }

src/main/vue/src/router.js

@@ -119,6 +119,14 @@ const router = new Router({
                         title: '客户管理'
                     }
                 },
+                {
+                    path: '/partnerListSupplier',
+                    name: 'partnerListSupplier',
+                    component: () => import(/* webpackChunkName: "partnerList" */ '@/views/PartnerListSupplier.vue'),
+                    meta: {
+                        title: '供应商管理'
+                    }
+                },
                 {
                     path: '/dockingEdit',
                     name: 'DockingEdit',

src/main/vue/src/styles/app.less

@@ -333,3 +333,56 @@ li {
         background-color: #888;
     }
 }
+
+.el-form.line {
+    .el-col {
+        .el-input {
+            width: 200px;
+        }
+    }
+}
+.el-form {
+    .el-select {
+        width: 200px;
+    }
+}
+.el-form.line > .el-form-item {
+    padding: 0 70px;
+}
+.el-form.line > .el-row {
+    padding: 0 70px;
+}
+
+.input1 {
+    .el-input {
+        width: 200px;
+    }
+}
+
+.el-form-item__label {
+    font-size: 12px !important;
+}
+
+.input-pre-zh {
+    .el-input-group__prepend {
+        background: rgba(1, 142, 252, 0.06);
+        border: 1px solid #a8d8fd;
+        padding: 0 12px;
+        color: #7cc2f9;
+    }
+}
+.input-pre-en {
+    .el-input-group__prepend {
+        background: rgba(249, 196, 161, 0.2);
+        border: 1px solid #f9c4a1;
+        padding: 0 12px;
+        color: #eead81;
+    }
+}
+.el-form-item--small.el-form-item {
+    margin-bottom: 20px !important;
+}
+.el-input--small .el-input__inner {
+    line-height: 36px !important;
+    height: 36px !important;
+}

src/main/vue/src/styles/element_theme/form.css

@@ -290,11 +290,11 @@
   .el-form-item--medium .el-form-item__content {
     line-height: 36px; }
   .el-form-item--small .el-form-item__label {
-    line-height: 32px; }
+    line-height: 36px; }
   .el-form-item--small .el-form-item__content {
-    line-height: 32px; }
+    line-height: 36px; }
   .el-form-item--small.el-form-item {
-    margin-bottom: 18px; }
+    margin-bottom: 20px; }
   .el-form-item--small .el-form-item__error {
     padding-top: 2px; }
   .el-form-item--mini .el-form-item__label {

src/main/vue/src/views/Admin.vue

@@ -175,8 +175,7 @@ export default {
             const findActiveMenu = (parents, childMenus) => {
                 childMenus.forEach(i => {
                     let parents_copy = [...parents];
-                    console.log(i);
-                    if (i.path === path || (i.subUrl && i.subUrl.includes(path))) {
+                    if (this.checkPath(i.path, this.$route) || (i.subUrl && this.checkPath(i.subUrl, this.$route))) {
                         parents_copy.push(i);
                         this.menuPath = parents_copy.map(i => i.name);
                         this.$store.commit(
@@ -199,6 +198,18 @@ export default {
             };
             findActiveMenu([], this.rawMenus);
         },
+        checkPath(path = '', _path) {
+            if (path.constructor === Array) {
+                return !!path.find(item => {
+                    return this.checkPath(item, _path);
+                });
+            } else if (path.includes('?')) {
+                let _vals = path.split('?')[1].split('=');
+                return _path.query[_vals[0]] === _vals[1];
+            } else {
+                return path === _path.path;
+            }
+        },
         getMenus() {
             this.$http.get('/menu/userMenu').then(res => {
                 this.rawMenus = res;

src/main/vue/src/views/PartnerEdit.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="edit-view">
-        <page-title>
+        <page-title :name="pageName">
             <el-button @click="$router.go(-1)">取消</el-button>
             <el-button @click="del" :loading="$store.state.fetchingData" type="danger" v-if="formData.id">
                 删除
@@ -14,12 +14,13 @@
                     :model="formData"
                     :rules="rules"
                     ref="form"
-                    label-width="136px"
+                    label-width="110px"
                     label-position="right"
                     size="small"
-                    style="max-width: 500px;"
+                    style="max-width: 760px;"
+                    class="line"
                 >
-                    <el-form-item prop="type" label="type">
+                    <el-form-item prop="type" label="type" v-if="!formData.type">
                         <el-select v-model="formData.type" clearable filterable placeholder="请选择">
                             <el-option
                                 v-for="item in typeOptions"
@@ -30,7 +31,41 @@
                             </el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item prop="supplierType" label="供应商类型">
+
+                    <el-row type="flex">
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="type" label="序号">
+                                <el-input v-model="formData.id"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="code" :label="`${formData.type === 'CLIENT' ? '客户' : '供应商'}代码`">
+                                <el-input v-model="formData.code" placeholder="仅限大写字母，5字以内"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+
+                    <el-form-item prop="name" label="个人/企业名称" class="input-pre-zh">
+                        <el-input v-model="formData.name" placeholder="请输入中文名称">
+                            <template #prepend>中</template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="enName" label="" class="input-pre-en">
+                        <el-input v-model="formData.enName" placeholder="请输入英文名称">
+                            <template #prepend>英</template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="address" label="注册地址" class="input-pre-zh">
+                        <el-input v-model="formData.address" placeholder="请输入中文地址">
+                            <template #prepend>中</template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="enAddress" label="" class="input-pre-en">
+                        <el-input v-model="formData.enAddress" placeholder="请输入英文地址">
+                            <template #prepend>英</template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="supplierType" label="供应商类型" v-if="formData.type === 'SUPPLIER'">
                         <el-select v-model="formData.supplierType" clearable filterable placeholder="请选择">
                             <el-option
                                 v-for="item in supplierTypeOptions"
@@ -41,42 +76,50 @@
                             </el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item prop="code" label="客户代码">
-                        <el-input v-model="formData.code"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="name" label="个人/企业名称中">
-                        <el-input v-model="formData.name"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="enName" label="个人/企业名称英">
-                        <el-input v-model="formData.enName"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="address" label="注册地址中">
-                        <el-input v-model="formData.address"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="enAddress" label="注册地址英">
-                        <el-input v-model="formData.enAddress"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="uscc" label="统一社会信用代码">
-                        <el-input v-model="formData.uscc"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="billingName" label="开票名称">
-                        <el-input v-model="formData.billingName"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="taxID" label="税号">
-                        <el-input v-model="formData.taxID"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="billingAddress" label="开票地址">
-                        <el-input v-model="formData.billingAddress"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="billingPhone" label="开票电话">
-                        <el-input v-model="formData.billingPhone"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="accountBank" label="开户行">
-                        <el-input v-model="formData.accountBank"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="account" label="账号">
-                        <el-input v-model="formData.account"></el-input>
+                    <el-form-item prop="uscc" label="统一社会信用代码" class="input1">
+                        <el-input v-model="formData.uscc" placeholder="请输入"></el-input>
                     </el-form-item>
+                    <divider>
+                        开票信息
+                    </divider>
+                    <el-row>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="billingName" label="名称">
+                                <el-input v-model="formData.billingName" placeholder="请输入"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="taxID" label="税号">
+                                <el-input v-model="formData.taxID" placeholder="请输入"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="billingAddress" label="地址">
+                                <el-input v-model="formData.billingAddress" placeholder="请输入"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="billingPhone" label="电话">
+                                <el-input v-model="formData.billingPhone" placeholder="请输入"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+
+                    <el-row>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="accountBank" label="开户行">
+                                <el-input v-model="formData.accountBank" placeholder="请输入"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="account" label="账号">
+                                <el-input v-model="formData.account" placeholder="请输入"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+
                     <el-form-item class="form-submit">
                         <el-button @click="onSave" :loading="saving" size="default" type="primary">保存 </el-button>
                         <el-button @click="onDelete" :loading="saving" size="default" type="danger" v-if="formData.id"
@@ -104,6 +147,14 @@ export default {
                     this.$message.error(e.error);
                 });
         }
+        this.$nextTick(() => {
+            if (this.$route.query.type === 'CLIENT') {
+                this.pageName = '客户管理编辑';
+            } else {
+                this.pageName = '供应商管理编辑';
+            }
+            this.formData.type = this.$route.query.type || '';
+        });
     },
     data() {
         return {
@@ -117,7 +168,8 @@ export default {
             supplierTypeOptions: [
                 { label: '境内', value: 'DOMESTIC' },
                 { label: '境外', value: 'ABROAD' }
-            ]
+            ],
+            pageName: ''
         };
     },
     methods: {

src/main/vue/src/views/PartnerList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="list-view">
-        <page-title>
+        <page-title name="客户管理">
             <el-button @click="addRow" type="primary" icon="el-icon-plus" :loading="downloading" class="filter-item">
                 新增
             </el-button>
@@ -31,7 +31,7 @@
         >
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
             <el-table-column prop="id" label="ID" width="100"> </el-table-column>
-            <el-table-column prop="type" label="type" :formatter="typeFormatter"> </el-table-column>
+            <!-- <el-table-column prop="type" label="type" :formatter="typeFormatter"> </el-table-column> -->
             <el-table-column prop="supplierType" label="供应商类型" :formatter="supplierTypeFormatter">
             </el-table-column>
             <el-table-column prop="code" label="客户代码"> </el-table-column>

src/main/vue/src/views/PartnerListSupplier.vue

@@ -0,0 +1,198 @@
+<template>
+    <div class="list-view">
+        <page-title name="供应商管理">
+            <el-button @click="addRow" type="primary" icon="el-icon-plus" :loading="downloading" class="filter-item">
+                新增
+            </el-button>
+            <el-button @click="download" icon="el-icon-upload2" :loading="downloading" class="filter-item">
+                导出
+            </el-button>
+        </page-title>
+        <div class="filters-container">
+            <el-input
+                placeholder="搜索..."
+                v-model="search"
+                clearable
+                class="filter-item search"
+                @keyup.enter.native="getData"
+            >
+                <el-button @click="getData" slot="append" icon="el-icon-search"> </el-button>
+            </el-input>
+        </div>
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <el-table-column prop="id" label="ID" width="100"> </el-table-column>
+            <!-- <el-table-column prop="type" label="type" :formatter="typeFormatter"> </el-table-column> -->
+            <el-table-column prop="supplierType" label="供应商类型" :formatter="supplierTypeFormatter">
+            </el-table-column>
+            <el-table-column prop="code" label="客户代码"> </el-table-column>
+            <el-table-column prop="name" label="个人/企业名称中"> </el-table-column>
+            <el-table-column prop="enName" label="个人/企业名称英"> </el-table-column>
+            <el-table-column prop="address" label="注册地址中"> </el-table-column>
+            <el-table-column prop="enAddress" label="注册地址英"> </el-table-column>
+            <el-table-column prop="uscc" label="统一社会信用代码"> </el-table-column>
+            <el-table-column prop="billingName" label="开票名称"> </el-table-column>
+            <el-table-column prop="taxID" label="税号"> </el-table-column>
+            <el-table-column prop="billingAddress" label="开票地址"> </el-table-column>
+            <el-table-column prop="billingPhone" label="开票电话"> </el-table-column>
+            <el-table-column prop="accountBank" label="开户行"> </el-table-column>
+            <el-table-column prop="account" label="账号"> </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+                <template slot-scope="{ row }">
+                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <!-- <div class="multiple-mode-wrapper">
+                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button @click="operation1">批量操作1</el-button>
+                    <el-button @click="operation2">批量操作2</el-button>
+                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div> -->
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import pageableTable from '@/mixins/pageableTable';
+
+export default {
+    name: 'PartnerList',
+    mixins: [pageableTable],
+    data() {
+        return {
+            multipleMode: false,
+            search: '',
+            url: '/partner/all',
+            downloading: false,
+            typeOptions: [
+                { label: '供应商', value: 'SUPPLIER' },
+                { label: '经销商', value: 'CLIENT' }
+            ],
+            supplierTypeOptions: [
+                { label: '境内', value: 'DOMESTIC' },
+                { label: '境外', value: 'ABROAD' }
+            ]
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        typeFormatter(row, column, cellValue, index) {
+            let selectedOption = this.typeOptions.find(i => i.value === cellValue);
+            if (selectedOption) {
+                return selectedOption.label;
+            }
+            return '';
+        },
+        supplierTypeFormatter(row, column, cellValue, index) {
+            let selectedOption = this.supplierTypeOptions.find(i => i.value === cellValue);
+            if (selectedOption) {
+                return selectedOption.label;
+            }
+            return '';
+        },
+        beforeGetData() {
+            return { search: this.search };
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        addRow() {
+            this.$router.push({
+                path: '/partnerEdit',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/partnerEdit',
+                query: {
+                    id: row.id
+                }
+            });
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/partner/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000 }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/partner/del/${row.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>