| | |
|---|
| | | ENV = 'development' |
|---|
| | | |
|---|
| | | # base api |
|---|
| | | VUE_APP_BASE_API = '/dev-api' |
|---|
| | | VUE_APP_BASE_API = 'http://localhost:8011' |
|---|
| | | # VUE_APP_BASE_API = '/dev-api' |
|---|
| | |
|---|
| | | ENV = 'production' |
|---|
| | | |
|---|
| | | # base api |
|---|
| | | VUE_APP_BASE_API = 'http://localhost:8080' |
|---|
| | | VUE_APP_BASE_API = 'http://58.56.84.138:9155' |
|---|
| | | # VUE_APP_BASE_API = 'http://localhost:8080' |
|---|
| | | |
|---|
| | |
|---|
| | | "axios": "0.18.1", |
|---|
| | | "core-js": "3.6.5", |
|---|
| | | "echarts": "^5.4.2", |
|---|
| | | "element-ui": "2.13.2", |
|---|
| | | "element-ui": "^2.15.3", |
|---|
| | | "js-cookie": "2.2.0", |
|---|
| | | "jsbarcode": "^3.11.5", |
|---|
| | | "normalize.css": "7.0.0", |
|---|
| | | "nprogress": "0.2.0", |
|---|
| | | "path-to-regexp": "2.4.0", |
|---|
| | | "vue": "2.6.10", |
|---|
| | | "vue-barcode": "^1.3.0", |
|---|
| | | "vue-print-nb": "^1.7.5", |
|---|
| | | "vue-router": "3.0.6", |
|---|
| | | "vuex": "3.1.0" |
|---|
| | | }, |
|---|
| | |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
|---|
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|---|
| | | <title><%= webpackConfig.name %></title> |
|---|
| | | <style media="print"> |
|---|
| | | @page{ |
|---|
| | | size: auto; |
|---|
| | | margin: 3mm; |
|---|
| | | } |
|---|
| | | html{ |
|---|
| | | background-color: #fff; |
|---|
| | | margin: 0px; |
|---|
| | | } |
|---|
| | | body{ |
|---|
| | | border: 1px solid #fff; |
|---|
| | | margin: 10mm 15mm 10mm 15mm; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | |
|---|
| | | |
|---|
| | | export function getList(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/vue-admin-template/table/list', |
|---|
| | | url: '/table/list', |
|---|
| | | method: 'get', |
|---|
| | | params |
|---|
| | | }) |
|---|
| | |
|---|
| | | import request from '@/utils/request' |
|---|
| | | |
|---|
| | | export function login(data) { |
|---|
| | | /* export function login(data) { |
|---|
| | | return request({ |
|---|
| | | url: '/vue-admin-template/user/login', |
|---|
| | | method: 'post', |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } */ |
|---|
| | | // refresh |
|---|
| | | export function refresh(data) { |
|---|
| | | return request({ |
|---|
| | | url: '/user/login/refresh', |
|---|
| | | method: 'post', |
|---|
| | | headers: { |
|---|
| | | 'Content-Type': 'application/x-www-form-urlencoded' |
|---|
| | | }, |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function login(data) { |
|---|
| | | return request({ |
|---|
| | | url: '/user/login/account', |
|---|
| | | method: 'post', |
|---|
| | | headers: { |
|---|
| | | 'Content-Type': 'application/x-www-form-urlencoded' |
|---|
| | | }, |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | export function getInfo(token) { |
|---|
| | | return request({ |
|---|
| | | url: '/vue-admin-template/user/info', |
|---|
| | | method: 'get', |
|---|
| | | params: { token } |
|---|
| | | url: '/user/info', |
|---|
| | | method: 'get' |
|---|
| | | // params: { token } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function logout() { |
|---|
| | | return request({ |
|---|
| | | url: '/vue-admin-template/user/logout', |
|---|
| | | url: '/user/logout', |
|---|
| | | method: 'post' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ°å¢ç¨æ· |
|---|
| | | export function addUser(data) { |
|---|
| | | // æ·»å åºåå称 |
|---|
| | | export function addProductName(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/system/user', |
|---|
| | | url: '/product_name/add', |
|---|
| | | method: 'post', |
|---|
| | | data: data |
|---|
| | | params |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ·»å åºåå称 |
|---|
| | | export function addProductModel(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/product_name/add', |
|---|
| | | method: 'post', |
|---|
| | | params |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ°å¢ç¨æ· |
|---|
| | | export function addUser(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/user/add', |
|---|
| | | method: 'post', |
|---|
| | | params |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å é¤ç¨æ· |
|---|
| | | export function delUser(userId) { |
|---|
| | | export function delUser(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/system/user/' + userId, |
|---|
| | | method: 'delete' |
|---|
| | | url: '/user/delete', |
|---|
| | | method: 'delete', |
|---|
| | | params |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ä¿®æ¹ç¨æ·ä¸ªäººä¿¡æ¯ |
|---|
| | | export function updateUserProfile(data) { |
|---|
| | | export function updateUserProfile(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/system/user/profile', |
|---|
| | | url: '/user/update/user', |
|---|
| | | method: 'put', |
|---|
| | | data: data |
|---|
| | | params |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¨æ·å¯ç éç½® |
|---|
| | | export function updateUserPwd(oldPassword, newPassword) { |
|---|
| | | const data = { |
|---|
| | | oldPassword, |
|---|
| | | newPassword |
|---|
| | | } |
|---|
| | | export function updateUserPwd(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/system/user/profile/updatePwd', |
|---|
| | | url: '/user/update/password', |
|---|
| | | method: 'put', |
|---|
| | | params: data |
|---|
| | | params |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¥è¯¢é¨é¨ä¸ææ ç»æ |
|---|
| | | export function deptTreeSelect() { |
|---|
| | | export function getUserList() { |
|---|
| | | return request({ |
|---|
| | | url: '/system/user/deptTree', |
|---|
| | | url: '/user/list', |
|---|
| | | method: 'get' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function tideLogin(data) { |
|---|
| | | return request({ |
|---|
| | | url: '/tide/tideLogin', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | code: data |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | |
|---|
| | | vertical-align: middle; |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | fill: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .hamburger.is-active { |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="setting-title"> |
|---|
| | | <div class="title-left">{{left}}</div> |
|---|
| | | <div class="title-right">{{right}}</div> |
|---|
| | | <div class="title-right" @click="clickEvent"><span :class="icon"></span> {{right}}</div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'SettingTitle', |
|---|
| | | props: ['left', 'right'] |
|---|
| | | props: ['left', 'right', 'icon', 'clickFun'], |
|---|
| | | methods: { |
|---|
| | | clickEvent() { |
|---|
| | | this.clickFun() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
|---|
| | | <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> |
|---|
| | | <!-- <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> |
|---|
| | | <use :xlink:href="iconName" /> |
|---|
| | | </svg> |
|---|
| | | </svg> --> |
|---|
| | | <span v-else class="iconfont" :class="svgClass" aria-hidden="true" v-on="$listeners"> |
|---|
| | | <!-- <i class="iconfont" :class="iconName"></i> --> |
|---|
| | | </span> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | |
|---|
| | | return isExternal(this.iconClass) |
|---|
| | | }, |
|---|
| | | iconName() { |
|---|
| | | return `#icon-${this.iconClass}` |
|---|
| | | // return `#icon-${this.iconClass}` |
|---|
| | | return `iconfont ${this.iconClass}` |
|---|
| | | }, |
|---|
| | | svgClass() { |
|---|
| | | if (this.className) { |
|---|
| | | return 'svg-icon ' + this.className |
|---|
| | | return 'svg-icon ' + this.iconClass + this.className |
|---|
| | | } else { |
|---|
| | | return 'svg-icon' |
|---|
| | | return 'svg-icon ' + this.iconClass |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | styleExternalIcon() { |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="table-search"> |
|---|
| | | <el-form |
|---|
| | | v-model="queryParams" |
|---|
| | | ref="queryForm" |
|---|
| | | v-model="queryParams" |
|---|
| | | size="small" |
|---|
| | | :inline="true" |
|---|
| | | label-width="68px" |
|---|
| | | > |
|---|
| | | <el-form-item label="æ¥æï¼"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="queryParams.date" |
|---|
| | | value-format="yyyy-MM-dd HH:mm" |
|---|
| | | format="yyyy-MM-dd HH:mm" |
|---|
| | | type="datetimerange" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | range-separator="è³" |
|---|
| | | start-placeholder="å¼å§æ¥æ" |
|---|
| | | end-placeholder="ç»ææ¥æ" |
|---|
| | | align="right" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="è§æ ¼ï¼"> |
|---|
| | | <el-select placeholder="è§æ ¼åå·" clearable style="width: 240px"> |
|---|
| | | <el-form-item v-show="show" :label="searchParams.hasOwnProperty('productModel')? 'è§æ ¼åå·':'客æ·å称'"> |
|---|
| | | <el-select v-model="queryParams.type" :placeholder="searchParams.hasOwnProperty('productModel')? '请éæ©è§æ ¼åå·':'请éæ©å®¢æ·å称'" clearable style="width: 240px"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in options" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item> |
|---|
| | | <el-button type="primary" icon="el-icon-search" size="mini" |
|---|
| | | >æç´¢</el-button |
|---|
| | | > |
|---|
| | | <el-button icon="el-icon-refresh" size="mini">导åº</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | icon="el-icon-search" |
|---|
| | | size="mini" |
|---|
| | | @click="search" |
|---|
| | | >æç´¢</el-button> |
|---|
| | | <el-button :style="{color:'#409EFF',border:' 1px solid #409EFF'}" icon="iconfont icon-wenjiandaochu" size="mini" @click="exportExcel">导åº</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | props: [ |
|---|
| | | 'searchData', |
|---|
| | | 'searchParams', |
|---|
| | | 'options', |
|---|
| | | 'getList', |
|---|
| | | 'file', |
|---|
| | | 'show', |
|---|
| | | 'excelName' |
|---|
| | | ], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | queryParams: { |
|---|
| | | date: [], |
|---|
| | | type: '' |
|---|
| | | }, |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: 'æè¿ä¸å¨', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | search() { |
|---|
| | | // "æ¥è¯¢æ¡ä»¶ï¼"æ¶é´éè¦æ ¼å¼åæyyyy-mm-dd hh-mm-ss |
|---|
| | | // console.log(this.queryParams) |
|---|
| | | let { date, type } = this.queryParams |
|---|
| | | date = date == null ? [] : date |
|---|
| | | let params = { ...this.searchParams, startTime: date[0], endTime: date[1] } |
|---|
| | | params = this.searchParams.hasOwnProperty('productModel') ? { ...params, productModel: type } : { ...params, customerName: type } |
|---|
| | | const obj = {} |
|---|
| | | const arr = Object.keys(params).filter(key => params[key]) |
|---|
| | | arr.forEach(item => obj[item] = params[item]) |
|---|
| | | console.log(obj)// æ¥çææ请æ±åæ° |
|---|
| | | this.getList(obj).then(res => { |
|---|
| | | this.searchData({ ...res.data, startTime: date[0], endTime: date[1] }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | exportExcel() { |
|---|
| | | let { date, type } = this.queryParams |
|---|
| | | date = date == null ? [] : date |
|---|
| | | let params = { startTime: date[0], endTime: date[1] } |
|---|
| | | params = this.searchParams.hasOwnProperty('productModel') ? { ...params, productModel: type } : { ...params, customerName: type } |
|---|
| | | const obj = {} |
|---|
| | | const arr = Object.keys(params).filter(key => params[key]) |
|---|
| | | arr.forEach(item => obj[item] = params[item]) |
|---|
| | | console.log(obj)// æ¥çææ请æ±åæ° |
|---|
| | | this.file(obj).then(response => { |
|---|
| | | const blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' }) |
|---|
| | | const downloadElement = document.createElement('a') |
|---|
| | | const href = window.URL.createObjectURL(blob) // å建ä¸è½½çé¾æ¥ |
|---|
| | | downloadElement.href = href |
|---|
| | | downloadElement.download = `${this.excelName}.xlsx` // ä¸è½½åæ件å |
|---|
| | | document.body.appendChild(downloadElement) |
|---|
| | | downloadElement.click() // ç¹å»ä¸è½½ |
|---|
| | | this.loadingBtn = false |
|---|
| | | document.body.removeChild(downloadElement) // ä¸è½½å®æ移é¤å
ç´ |
|---|
| | | window.URL.revokeObjectURL(href) // éæ¾æblob对象 |
|---|
| | | }).catch(message => { |
|---|
| | | this.$message.error({ |
|---|
| | | message: 'æ±æä¸è½½é误ï¼é误åå ï¼' + message, |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | |
|---|
| | | .el-form-item{ |
|---|
| | | margin-bottom: 0; |
|---|
| | | margin: 12px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </style> |
|---|
| | |
|---|
| | | width: 100%; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | } |
|---|
| | | .fixed-header+.app-main { |
|---|
| | | padding-top: 50px; |
|---|
| | | padding-top: 97px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="navbar"> |
|---|
| | | <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> |
|---|
| | | <div class="header"> |
|---|
| | | <div class="navbar"> |
|---|
| | | <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> |
|---|
| | | <el-input v-model="keyword" size="small" placeholder="请è¾å
¥å®¢æ·å称æ¥è¯¢å°è´¦" class="input-with-select"> |
|---|
| | | <el-button slot="append" type="primary" icon="el-icon-search" @click="goTo" /> |
|---|
| | | </el-input> |
|---|
| | | <!-- <breadcrumb class="breadcrumb-container" /> --> |
|---|
| | | <div class="center-title"> |
|---|
| | | WMSç³»ç» |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <breadcrumb class="breadcrumb-container" /> |
|---|
| | | <div class="center-title"> |
|---|
| | | ä¸å¤©ç§æWMSç³»ç» |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="right-menu"> |
|---|
| | | <el-dropdown class="avatar-container" trigger="click"> |
|---|
| | | <div class="avatar-wrapper"> |
|---|
| | | <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> |
|---|
| | | <i class="el-icon-caret-bottom" /> |
|---|
| | | </div> |
|---|
| | | <el-dropdown-menu slot="dropdown" class="user-dropdown"> |
|---|
| | | <router-link to="/"> |
|---|
| | | <div class="right-menu"> |
|---|
| | | <el-dropdown class="avatar-container" trigger="click"> |
|---|
| | | <div class="avatar-wrapper"> |
|---|
| | | <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> --> |
|---|
| | | <img :src="baseUrl+'/img'+avatar" class="user-avatar"> |
|---|
| | | <span class="avater-name">{{ name }}</span> |
|---|
| | | <!-- <i class="el-icon-caret-bottom" /> --> |
|---|
| | | </div> |
|---|
| | | <el-dropdown-menu slot="dropdown" class="user-dropdown"> |
|---|
| | | <!-- <router-link to="/"> |
|---|
| | | <el-dropdown-item> |
|---|
| | | Home |
|---|
| | | </el-dropdown-item> |
|---|
| | | </router-link> |
|---|
| | | <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/"> |
|---|
| | | </router-link> --> |
|---|
| | | <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/"> |
|---|
| | | <el-dropdown-item>Github</el-dropdown-item> |
|---|
| | | </a> |
|---|
| | | <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/"> |
|---|
| | | <el-dropdown-item>Docs</el-dropdown-item> |
|---|
| | | </a> |
|---|
| | | <el-dropdown-item divided @click.native="logout"> |
|---|
| | | <span style="display:block;">Log Out</span> |
|---|
| | | </el-dropdown-item> |
|---|
| | | </el-dropdown-menu> |
|---|
| | | </el-dropdown> |
|---|
| | | </a> --> |
|---|
| | | <!-- <el-button>éåº</el-button> --> |
|---|
| | | <el-dropdown-item divided @click.native="logout"> |
|---|
| | | <span style="display:block;">é åº</span> |
|---|
| | | </el-dropdown-item> |
|---|
| | | </el-dropdown-menu> |
|---|
| | | </el-dropdown> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="header-tabs"> |
|---|
| | | <div class="el-icon-arrow-left" @click="prev" /> |
|---|
| | | <div class="routers"> |
|---|
| | | <a v-for="tag in openTab.openTab"> |
|---|
| | | <el-tag |
|---|
| | | |
|---|
| | | :key="tag.name" |
|---|
| | | closable |
|---|
| | | :class="tag.name==openTab.activeIndex?'active':''" |
|---|
| | | @close="handleClose(tag)" |
|---|
| | | @click="changeRouter(tag)" |
|---|
| | | > |
|---|
| | | {{ tag.name }} |
|---|
| | | </el-tag> |
|---|
| | | </a> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { mapGetters } from 'vuex' |
|---|
| | | import Breadcrumb from '@/components/Breadcrumb' |
|---|
| | | import Hamburger from '@/components/Hamburger' |
|---|
| | | import openTab from '@/store/modules/openTab' |
|---|
| | | // import openTab from '@/store/modules/openTab' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Breadcrumb, |
|---|
| | | Hamburger |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | keyword: '', |
|---|
| | | routers: [ |
|---|
| | | ], |
|---|
| | | baseUrl: process.env.VUE_APP_BASE_API |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters([ |
|---|
| | | 'sidebar', |
|---|
| | | 'avatar' |
|---|
| | | 'avatar', |
|---|
| | | 'name', |
|---|
| | | 'openTab' |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // console.log(this.openTab) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | goTo() { |
|---|
| | | // console.log('ç¹å»æ¥è¯¢', this.$route) |
|---|
| | | this.$router.push({ path: '/outbound/outboundLedger', query: { keyword: this.keyword }}) |
|---|
| | | this.keyword = '' |
|---|
| | | // if (this.$route.name === 'åºåºå°è´¦') { |
|---|
| | | // console.log('è¾åºå½å') |
|---|
| | | // // this.$router.go(0) |
|---|
| | | // return |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | prev() { |
|---|
| | | this.$router.go(-1) |
|---|
| | | }, |
|---|
| | | handleClose(tag) { |
|---|
| | | console.log(this.openTab.activeIndex) |
|---|
| | | if (this.openTab.openTab.length == 1) { |
|---|
| | | if (tag.name == '主页') { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.$store.commit('DEL_TAB', tag.route) |
|---|
| | | this.$router.push('/home') |
|---|
| | | this.$store.commit('SET_ACTIVE_INDEX', '/home') |
|---|
| | | } |
|---|
| | | if (this.openTab.activeIndex == tag.route) { |
|---|
| | | this.$store.commit('DEL_TAB', tag.route) |
|---|
| | | this.$router.push(this.openTab.openTab[0].route) |
|---|
| | | this.$store.commit('SET_ACTIVE_INDEX', this.openTab.openTab[0].route) |
|---|
| | | } |
|---|
| | | this.$store.commit('DEL_TAB', tag.route) |
|---|
| | | }, |
|---|
| | | toggleSideBar() { |
|---|
| | | this.$store.dispatch('app/toggleSideBar') |
|---|
| | | }, |
|---|
| | | async logout() { |
|---|
| | | await this.$store.dispatch('user/logout') |
|---|
| | | this.$router.push(`/login?redirect=${this.$route.fullPath}`) |
|---|
| | | }, |
|---|
| | | goBack() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | changeRouter(tag) { |
|---|
| | | this.$router.push(tag.route) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header{ |
|---|
| | | background: #efefef; |
|---|
| | | .header-tabs{ |
|---|
| | | margin-top: 10px; |
|---|
| | | background: #304156; |
|---|
| | | color: #fff; |
|---|
| | | height: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | >div:nth-child(1){ |
|---|
| | | width: 40px; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-tabs{ |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | ::v-deep .el-breadcrumb .el-breadcrumb__inner a{ |
|---|
| | | color: #fff !important; |
|---|
| | | } |
|---|
| | | .el-tag{ |
|---|
| | | height: 100%; |
|---|
| | | background: #304156; |
|---|
| | | color: #fff; |
|---|
| | | border-radius: 0; |
|---|
| | | margin: 0; |
|---|
| | | border-right: 0px; |
|---|
| | | border-top: 0px; |
|---|
| | | border-bottom: 0px; |
|---|
| | | line-height: 35px; |
|---|
| | | .el-tag__close{ |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .routers{ |
|---|
| | | height: 100%; |
|---|
| | | a:last-of-type{ |
|---|
| | | .el-tag{ |
|---|
| | | border-right: 1px solid #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // .el-tag,.active{ |
|---|
| | | // color: #409EFF !important; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .navbar { |
|---|
| | | height: 50px; |
|---|
| | | overflow: hidden; |
|---|
| | | position: relative; |
|---|
| | | background: #fff; |
|---|
| | | background: #304156; |
|---|
| | | color: #fff; |
|---|
| | | line-height: 50px; |
|---|
| | | box-shadow: 0 1px 4px rgba(0,21,41,.08); |
|---|
| | | ::v-deep .el-input-group__append{ |
|---|
| | | background: #448ACA; |
|---|
| | | border: 0px; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | .input-with-select{ |
|---|
| | | width: 300px; |
|---|
| | | // height: 30px; |
|---|
| | | } |
|---|
| | | .center-title{ |
|---|
| | | position: absolute; |
|---|
| | | left: 50%; |
|---|
| | |
|---|
| | | .avatar-wrapper { |
|---|
| | | margin-top: 5px; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | color: #fff; |
|---|
| | | display: flex; |
|---|
| | | .avater-name{ |
|---|
| | | // position: absolute; |
|---|
| | | // top: 50%; |
|---|
| | | margin-left: 10px; |
|---|
| | | } |
|---|
| | | .user-avatar { |
|---|
| | | cursor: pointer; |
|---|
| | | border-radius: 50%; |
|---|
| | | width: 40px; |
|---|
| | | height: 40px; |
|---|
| | | border-radius: 10px; |
|---|
| | | // border-radius: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-icon-caret-bottom { |
|---|
| | |
|---|
| | | title: 'Vue Admin Template', |
|---|
| | | logo |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | console.log(this.collapse) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | |
|---|
| | | width: 100%; |
|---|
| | | height: 50px; |
|---|
| | | line-height: 50px; |
|---|
| | | background: #6095FB; |
|---|
| | | background: #304156; |
|---|
| | | text-align: center; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | & .sidebar-logo-link { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | text-align:left; |
|---|
| | | & .sidebar-logo { |
|---|
| | | padding: 7.5px 20px; |
|---|
| | | // padding: 7.5px 20px; |
|---|
| | | width: 135px; |
|---|
| | | height: 45px; |
|---|
| | | vertical-align: middle; |
|---|
| | | // position: absolute; |
|---|
| | | // left: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & .sidebar-title { |
|---|
| | |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | .hideSidebar .sidebar-container{ |
|---|
| | | ::v-deep img{ |
|---|
| | | // content: url("@/a"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .drawer-bg { |
|---|
| | | background: #000; |
|---|
| | |
|---|
| | | import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n |
|---|
| | | |
|---|
| | | import '@/styles/index.scss' // global css |
|---|
| | | |
|---|
| | | import '@/assets/iconfont/iconfont.css' |
|---|
| | | import App from './App' |
|---|
| | | import store from './store' |
|---|
| | | import router from './router' |
|---|
| | | import Print from 'vue-print-nb' |
|---|
| | | |
|---|
| | | import '@/icons' // icon |
|---|
| | | import '@/permission' // permission control |
|---|
| | |
|---|
| | | Vue.use(ElementUI, { locale }) |
|---|
| | | // å¦ææ³è¦ä¸æç element-uiï¼æå¦ä¸æ¹å¼å£°æ |
|---|
| | | // Vue.use(ElementUI) |
|---|
| | | |
|---|
| | | Vue.use(Print) |
|---|
| | | Vue.config.productionTip = false |
|---|
| | | |
|---|
| | | Vue.prototype.$flush = () => { |
|---|
| | | if (this.$route.path !== '/' && this.$route.path !== '/home') { |
|---|
| | | console.log('1'); |
|---|
| | | this.$store.commit('ADD_TAB', {route: '/home' , name: 'home'}); |
|---|
| | | this.$store.commit('ADD_TAB', {route: this.$route.path , name: this.$route.name }); |
|---|
| | | this.$store.commit('SET_ACTIVE_INDEX', this.$route.path); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | router, |
|---|
| | |
|---|
| | | router.beforeEach(async(to, from, next) => { |
|---|
| | | // start progress bar |
|---|
| | | NProgress.start() |
|---|
| | | |
|---|
| | | console.log(to) |
|---|
| | | if (to.query.code) { |
|---|
| | | console.log(to.query.code) |
|---|
| | | store.dispatch('user/tideLogin', to.query.code).then(res => { |
|---|
| | | next({ path: '/' }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // set page title |
|---|
| | | document.title = getPageTitle(to.meta.title) |
|---|
| | | |
|---|
| | | // determine whether the user has logged in |
|---|
| | | const hasToken = getToken() |
|---|
| | | |
|---|
| | | // console.log('è·¯ç±å®å«', hasToken) |
|---|
| | | if (hasToken) { |
|---|
| | | // console.log('æå¡å¨ætoken') |
|---|
| | | if (to.path === '/login') { |
|---|
| | | // if is logged in, redirect to the home page |
|---|
| | | next({ path: '/' }) |
|---|
| | | NProgress.done() |
|---|
| | | } else { |
|---|
| | | // console.log('æå¡å¨ætokenï¼è®¿é®ä¸æ¯login页é¢') |
|---|
| | | const hasGetUserInfo = store.getters.name |
|---|
| | | if (hasGetUserInfo) { |
|---|
| | | next() |
|---|
| | | } else { |
|---|
| | | // console.log('没æç¨æ·ä¿¡æ¯') |
|---|
| | | try { |
|---|
| | | // get user info |
|---|
| | | await store.dispatch('user/getInfo') |
|---|
| | | |
|---|
| | | // console.log('è·åç¨æ·ä¿¡æ¯') |
|---|
| | | const userInfo = await store.dispatch('user/getInfo') |
|---|
| | | // console.log('è·åç¨æ·æ°æ®æå', userInfo) |
|---|
| | | next() |
|---|
| | | } catch (error) { |
|---|
| | | // remove token and go to login page to re-login |
|---|
| | |
|---|
| | | next() |
|---|
| | | } else { |
|---|
| | | // other pages that do not have permission to access are redirected to the login page. |
|---|
| | | // next() |
|---|
| | | next(`/login?redirect=${to.path}`) |
|---|
| | | NProgress.done() |
|---|
| | | } |
|---|
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import Router from 'vue-router' |
|---|
| | | |
|---|
| | | import store from '@/store/index' |
|---|
| | | Vue.use(Router) |
|---|
| | | |
|---|
| | | /* Layout */ |
|---|
| | |
|---|
| | | export const constantRoutes = [ |
|---|
| | | { |
|---|
| | | path: '/login', |
|---|
| | | name: 'login', |
|---|
| | | component: () => import('@/views/login/index'), |
|---|
| | | hidden: true |
|---|
| | | }, |
|---|
| | |
|---|
| | | redirect: '/home', |
|---|
| | | children: [{ |
|---|
| | | path: 'home', |
|---|
| | | name: 'Home', |
|---|
| | | name: '主页', |
|---|
| | | component: () => import('@/views/home/index'), |
|---|
| | | meta: { title: 'é¦é¡µ', icon: 'el-icon-house' } |
|---|
| | | meta: { title: 'é¦é¡µ', icon: 'icon-shouye' } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | path: '/add_operation', |
|---|
| | | component: Layout, |
|---|
| | | redirect: '/add_operation/table', |
|---|
| | | meta: { title: 'å
¥åºæä½', icon: 'el-icon-edit-outline' }, |
|---|
| | | meta: { title: 'å
¥åºæä½', icon: 'icon-warehouse' }, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: 'table', |
|---|
| | | name: 'å
¥åºæä½', |
|---|
| | | component: () => import('@/views/add_operation/index'), |
|---|
| | | meta: { title: 'å
¥åºæä½', icon: 'el-icon-edit-outline' } |
|---|
| | | meta: { title: 'å
¥åºæä½', icon: 'icon-warehouse' } |
|---|
| | | } |
|---|
| | | // ,{ |
|---|
| | | // path: 'barcode', |
|---|
| | | // component: () => import('@/views/add_operation/barcode'), |
|---|
| | | // meta: { title: 'æ¡ç æå°', icon: 'el-icon-edit-outline' } |
|---|
| | | // meta: { title: 'æ¡ç æå°', icon: 'icon-warehouse' } |
|---|
| | | // } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | |
|---|
| | | path: '/out_operation', |
|---|
| | | component: Layout, |
|---|
| | | redirect: '/out_operation/table', |
|---|
| | | meta: { title: 'åºåºæä½', icon: 'el-icon-box' }, |
|---|
| | | meta: { title: 'åºåºæä½', icon: 'icon-warehouseOut' }, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: 'table', |
|---|
| | | name: 'OutOperation', |
|---|
| | | name: 'åºåºæä½', |
|---|
| | | component: () => import('@/views/out_operation/index'), |
|---|
| | | meta: { title: 'åºåºæä½', icon: 'el-icon-box' } |
|---|
| | | meta: { title: 'åºåºæä½', icon: 'icon-warehouseOut' } |
|---|
| | | } |
|---|
| | | // ,{ |
|---|
| | | // path: 'manual', |
|---|
| | | // name: 'manual', |
|---|
| | | // component: () => import('@/views/out_operation/manual'), |
|---|
| | | // meta: { title: 'æå¨åºåº', icon: 'el-icon-box' } |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // path: 'outboundLedger', |
|---|
| | | // name: 'outboundLedger', |
|---|
| | | // component: () => import('@/views/out_operation/outboundLedger'), |
|---|
| | | // meta: { title: 'åºåºå°è´¦', icon: 'el-icon-box' } |
|---|
| | | // } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | path: '/outbound', |
|---|
| | | component: Layout, |
|---|
| | | redirect: '/outbound/book', |
|---|
| | | meta: { title: 'åºå管ç', icon: 'el-icon-box' }, |
|---|
| | | meta: { title: 'åºå管ç', icon: 'icon-biaogeziduan' }, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: 'book', |
|---|
| | | name: 'æ¶åå管ç', |
|---|
| | | component: () => import('@/views/outbound/index.vue'), |
|---|
| | | meta: { title: 'åºå管ç', icon: 'el-icon-box' } |
|---|
| | | meta: { title: 'æ¶åå管ç', icon: 'icon-kucunguanli' } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: 'outboundLedger', |
|---|
| | | name: 'åºåºå°è´¦', |
|---|
| | | component: () => import('@/views/outbound/outboundLedger'), |
|---|
| | | meta: { title: 'åºåºå°è´¦', icon: 'icon-taizhangzhangbuxinxichaxun' } |
|---|
| | | } |
|---|
| | | // ,{ |
|---|
| | | // path: 'depositoryManagement', |
|---|
| | |
|---|
| | | path: '/system', |
|---|
| | | component: Layout, |
|---|
| | | redirect: '/system/user', |
|---|
| | | meta: { title: 'ç³»ç»è®¾ç½®', icon: 'el-icon-box' }, |
|---|
| | | meta: { title: 'ç³»ç»è®¾ç½®', icon: 'icon-yonghuguanli' }, |
|---|
| | | children: [ |
|---|
| | | // { |
|---|
| | | // path: 'index', |
|---|
| | |
|---|
| | | // }, |
|---|
| | | { |
|---|
| | | path: 'user', |
|---|
| | | name: 'ç³»ç»è®¾ç½®', |
|---|
| | | component: () => import('@/views/system/user'), |
|---|
| | | meta: { title: 'ç¨æ·ç®¡ç', icon: 'el-icon-box' } |
|---|
| | | meta: { title: 'ç¨æ·ç®¡ç', icon: 'icon-yonghuguanli' } |
|---|
| | | } |
|---|
| | | // ,{ |
|---|
| | | // path: 'dict', |
|---|
| | |
|---|
| | | ] |
|---|
| | | |
|---|
| | | const createRouter = () => new Router({ |
|---|
| | | // mode: 'history', // require service support |
|---|
| | | mode: 'history', // require service support |
|---|
| | | scrollBehavior: () => ({ y: 0 }), |
|---|
| | | routes: constantRoutes |
|---|
| | | }) |
|---|
| | |
|---|
| | | router.matcher = newRouter.matcher // reset router |
|---|
| | | } |
|---|
| | | |
|---|
| | | const getState = ()=> import("@/store/index") |
|---|
| | | |
|---|
| | | router.beforeEach(async (to, from, next) => { |
|---|
| | | // console.log(to,from) |
|---|
| | | let state = (await getState()).default.state |
|---|
| | | // console.log(state) |
|---|
| | | // console.log(to) |
|---|
| | | if (to.name === 'login') { |
|---|
| | | next() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // console.log("跳转路ç±åçå¤æ") |
|---|
| | | let flag = false; |
|---|
| | | let {openTab} = state.openTab |
|---|
| | | // console.log(openTab) |
|---|
| | | for (let item of openTab) { |
|---|
| | | // console.log(item) |
|---|
| | | // console.log("item.name" , item.name) |
|---|
| | | // console.log("t0.name",to.name) |
|---|
| | | |
|---|
| | | if(item.name === to.name) { |
|---|
| | | // console.log('to.path',to.path); |
|---|
| | | store.commit('SET_ACTIVE_INDEX',to.path) |
|---|
| | | flag = true; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if(!flag) { |
|---|
| | | // console.log("æ§è¡ä¸é") |
|---|
| | | // console.log('to.path',to.path); |
|---|
| | | store.commit('ADD_TAB', {route: to.path, name: to.name}); |
|---|
| | | store.commit('SET_ACTIVE_INDEX', to.path); |
|---|
| | | } |
|---|
| | | next() |
|---|
| | | |
|---|
| | | }) |
|---|
| | | export default router |
|---|
| | |
|---|
| | | * @type {boolean} true | false |
|---|
| | | * @description Whether fix the header |
|---|
| | | */ |
|---|
| | | fixedHeader: false, |
|---|
| | | fixedHeader: true, |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @type {boolean} true | false |
|---|
| | |
|---|
| | | sidebar: state => state.app.sidebar, |
|---|
| | | device: state => state.app.device, |
|---|
| | | token: state => state.user.token, |
|---|
| | | refresh: state => state.user.refresh, |
|---|
| | | avatar: state => state.user.avatar, |
|---|
| | | name: state => state.user.name |
|---|
| | | name: state => state.user.name, |
|---|
| | | authority: state => state.user.authority, |
|---|
| | | user: state => state.user, |
|---|
| | | openTab: state => state.openTab, |
|---|
| | | allTab: state => state.tableKey.allTab, |
|---|
| | | addTab: state => state.tableKey.allTab[0] |
|---|
| | | } |
|---|
| | | export default getters |
|---|
| | |
|---|
| | | import app from './modules/app' |
|---|
| | | import settings from './modules/settings' |
|---|
| | | import user from './modules/user' |
|---|
| | | import openTab from './modules/openTab' |
|---|
| | | import tableKey from './modules/tableKey' |
|---|
| | | |
|---|
| | | Vue.use(Vuex) |
|---|
| | | |
|---|
| | |
|---|
| | | modules: { |
|---|
| | | app, |
|---|
| | | settings, |
|---|
| | | user |
|---|
| | | user, |
|---|
| | | openTab, |
|---|
| | | tableKey |
|---|
| | | }, |
|---|
| | | getters |
|---|
| | | }) |
|---|
| | |
|---|
| | | import { login, logout, getInfo } from '@/api/user' |
|---|
| | | import { getToken, setToken, removeToken } from '@/utils/auth' |
|---|
| | | import { login, logout, getInfo, tideLogin } from '@/api/user' |
|---|
| | | import { getToken, setToken, removeToken, getrefreshToken, setrefreshToken, removerefreshToken } from '@/utils/auth' |
|---|
| | | import { resetRouter } from '@/router' |
|---|
| | | var qs = require('qs') |
|---|
| | | |
|---|
| | | const getDefaultState = () => { |
|---|
| | | return { |
|---|
| | | token: getToken(), |
|---|
| | | refresh: getrefreshToken(), |
|---|
| | | name: '', |
|---|
| | | avatar: '' |
|---|
| | | avatar: '', |
|---|
| | | authority: '' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | SET_TOKEN: (state, token) => { |
|---|
| | | state.token = token |
|---|
| | | }, |
|---|
| | | SET_REFRESH: (state, refresh) => { |
|---|
| | | state.refresh = refresh |
|---|
| | | }, |
|---|
| | | SET_NAME: (state, name) => { |
|---|
| | | state.name = name |
|---|
| | | }, |
|---|
| | | SET_AVATAR: (state, avatar) => { |
|---|
| | | state.avatar = avatar |
|---|
| | | }, |
|---|
| | | SET_AUTHORITY: (state, authority) => { |
|---|
| | | state.authority = authority |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const actions = { |
|---|
| | | // user login |
|---|
| | | login({ commit }, userInfo) { |
|---|
| | | console.log(userInfo) |
|---|
| | | const { username, password } = userInfo |
|---|
| | | console.log(typeof username) |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | login({ username: username.trim(), password: password }).then(response => { |
|---|
| | | // login() |
|---|
| | | login(qs.stringify({ username: typeof username === 'number' ? username.toString().trim() : username.trim(), password: password })).then(response => { |
|---|
| | | const { data } = response |
|---|
| | | console.log(data) |
|---|
| | | commit('SET_TOKEN', data.token) |
|---|
| | | commit('SET_REFRESH', data.refresh) |
|---|
| | | setToken(data.token) |
|---|
| | | setrefreshToken(data.refresh) |
|---|
| | | resolve() |
|---|
| | | }).catch(error => { |
|---|
| | | reject(error) |
|---|
| | |
|---|
| | | getInfo({ commit, state }) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | getInfo(state.token).then(response => { |
|---|
| | | const { data } = response |
|---|
| | | |
|---|
| | | const { data, message } = response |
|---|
| | | console.log(response) |
|---|
| | | if (response.code === 10010) { |
|---|
| | | resolve(message) |
|---|
| | | } |
|---|
| | | if (!data) { |
|---|
| | | return reject('Verification failed, please Login again.') |
|---|
| | | } |
|---|
| | | |
|---|
| | | const { name, avatar } = data |
|---|
| | | const { name, avatar, authority } = data |
|---|
| | | |
|---|
| | | commit('SET_NAME', name) |
|---|
| | | commit('SET_AVATAR', avatar) |
|---|
| | | commit('SET_AUTHORITY', authority) |
|---|
| | | resolve(data) |
|---|
| | | }).catch(error => { |
|---|
| | | reject(error) |
|---|
| | |
|---|
| | | |
|---|
| | | // user logout |
|---|
| | | logout({ commit, state }) { |
|---|
| | | console.log('éåºç»å½') |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | logout(state.token).then(() => { |
|---|
| | | removeToken() // must remove token first |
|---|
| | | resetRouter() |
|---|
| | | commit('RESET_STATE') |
|---|
| | | resolve() |
|---|
| | | }).catch(error => { |
|---|
| | | reject(error) |
|---|
| | | }) |
|---|
| | | for (const key in state) { |
|---|
| | | state[key] = '' |
|---|
| | | } |
|---|
| | | removeToken() // must remove token first |
|---|
| | | removerefreshToken() |
|---|
| | | resetRouter() |
|---|
| | | commit('RESET_STATE') |
|---|
| | | resolve() |
|---|
| | | // logout(state.token).then(() => { |
|---|
| | | // removeToken() // must remove token first |
|---|
| | | // removerefreshToken() |
|---|
| | | // resetRouter() |
|---|
| | | // commit('RESET_STATE') |
|---|
| | | // resolve() |
|---|
| | | // }).catch(error => { |
|---|
| | | // reject(error) |
|---|
| | | // }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | |
|---|
| | | commit('RESET_STATE') |
|---|
| | | resolve() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // flushed Token |
|---|
| | | flushedToken({ commit }, newTokens) { |
|---|
| | | console.log('å·æ°token') |
|---|
| | | commit('SET_TOKEN', newTokens.token) |
|---|
| | | commit('SET_REFRESH', newTokens.refresh) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | tideLogin({ commit }, code) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | tideLogin(code).then(response => { |
|---|
| | | const { data } = response |
|---|
| | | console.log(data) |
|---|
| | | commit('SET_TOKEN', data.token) |
|---|
| | | commit('SET_REFRESH', data.refresh) |
|---|
| | | setToken(data.token) |
|---|
| | | setrefreshToken(data.refresh) |
|---|
| | | resolve() |
|---|
| | | }).catch(error => { |
|---|
| | | reject(error) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | // cover some element-ui styles |
|---|
| | | |
|---|
| | | // .el-input{ |
|---|
| | | // input{ |
|---|
| | | // background: #fff !important; |
|---|
| | | // box-shadow: none !important; |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | .el-breadcrumb__inner, |
|---|
| | | .el-breadcrumb__inner a { |
|---|
| | | font-weight: 400 !important; |
|---|
| | |
|---|
| | | .el-range-separator { |
|---|
| | | box-sizing: content-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .el-menu-item{ |
|---|
| | | height: auto; |
|---|
| | | line-height: normal; |
|---|
| | | font-size: 12px; |
|---|
| | | .sub-el-icon{ |
|---|
| | | font-size: 36px; |
|---|
| | | margin: 12px 0; |
|---|
| | | } |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | margin-right: 0; |
|---|
| | | // height: auto; |
|---|
| | | // line-height: normal; |
|---|
| | | // font-size: 12px; |
|---|
| | | // .sub-el-icon{ |
|---|
| | | // font-size: 36px; |
|---|
| | | // margin: 12px 0; |
|---|
| | | // } |
|---|
| | | // display: flex; |
|---|
| | | // flex-direction: column; |
|---|
| | | // align-items: center; |
|---|
| | | // margin-right: 0; |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | .hideSidebar { |
|---|
| | | .sidebar-container { |
|---|
| | | width: 54px !important; |
|---|
| | | img{ |
|---|
| | | display: none !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main-container { |
|---|
| | |
|---|
| | | .el-menu--collapse { |
|---|
| | | .el-submenu { |
|---|
| | | &>.el-submenu__title { |
|---|
| | | &>span { |
|---|
| | | &>span:nth-child(2) { |
|---|
| | | height: 0; |
|---|
| | | width: 0; |
|---|
| | | overflow: hidden; |
|---|
| | |
|---|
| | | // sidebar |
|---|
| | | $menuText:#ddecfd; |
|---|
| | | $menuText:#bfcbd9; |
|---|
| | | // $menuActiveText:#409EFF; |
|---|
| | | $menuActiveText:#fff; |
|---|
| | | $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 |
|---|
| | | // $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 |
|---|
| | | $subMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951 |
|---|
| | | |
|---|
| | | $menuBg:#6095FB; |
|---|
| | | $menuHover:#4283fe; |
|---|
| | | $menuBg:#304156; |
|---|
| | | $menuHover:#263445; |
|---|
| | | $menuHover:#263445; |
|---|
| | | |
|---|
| | | $subMenuBg:#1f2d3d; |
|---|
| | | $subMenuHover:#001528; |
|---|
| | |
|---|
| | | import Cookies from 'js-cookie' |
|---|
| | | |
|---|
| | | const TokenKey = 'vue_admin_template_token' |
|---|
| | | |
|---|
| | | const refreshToken = 'refreshToken' |
|---|
| | | export function getToken() { |
|---|
| | | return Cookies.get(TokenKey) |
|---|
| | | } |
|---|
| | |
|---|
| | | export function removeToken() { |
|---|
| | | return Cookies.remove(TokenKey) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function getrefreshToken() { |
|---|
| | | return Cookies.get(refreshToken) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function setrefreshToken(token) { |
|---|
| | | return Cookies.set(refreshToken, token) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function removerefreshToken() { |
|---|
| | | return Cookies.remove(refreshToken) |
|---|
| | | } |
|---|
| | |
|---|
| | | import { MessageBox, Message } from 'element-ui' |
|---|
| | | import store from '@/store' |
|---|
| | | import { getToken } from '@/utils/auth' |
|---|
| | | import { refresh } from '@/api/user' |
|---|
| | | import getters from '@/store/getters' |
|---|
| | | import { setToken, setrefreshToken } from '@/utils/auth' |
|---|
| | | |
|---|
| | | var qs = require('qs') |
|---|
| | | // create an axios instance |
|---|
| | | const service = axios.create({ |
|---|
| | | baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url |
|---|
| | | // withCredentials: true, // send cookies when cross-domain requests |
|---|
| | | timeout: 5000 // request timeout |
|---|
| | | timeout: 10000 // request timeout |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // request interceptor |
|---|
| | | service.interceptors.request.use( |
|---|
| | | config => { |
|---|
| | | // console.log('请æ±æ¦æªå¨===>', config) |
|---|
| | | // do something before request is sent |
|---|
| | | |
|---|
| | | // console.log(config) |
|---|
| | | if (store.getters.token) { |
|---|
| | | // let each request carry token |
|---|
| | | // ['X-Token'] is a custom headers key |
|---|
| | |
|---|
| | | * Here is just an example |
|---|
| | | * You can also judge the status by HTTP Status Code |
|---|
| | | */ |
|---|
| | | response => { |
|---|
| | | const res = response.data |
|---|
| | | |
|---|
| | | // if the custom code is not 20000, it is judged as an error. |
|---|
| | | if (res.code !== 20000) { |
|---|
| | | Message({ |
|---|
| | | message: res.message || 'Error', |
|---|
| | | type: 'error', |
|---|
| | | duration: 5 * 1000 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; |
|---|
| | | if (res.code === 50008 || res.code === 50012 || res.code === 50014) { |
|---|
| | | // to re-login |
|---|
| | | MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { |
|---|
| | | confirmButtonText: 'Re-Login', |
|---|
| | | cancelButtonText: 'Cancel', |
|---|
| | | type: 'warning' |
|---|
| | | }).then(() => { |
|---|
| | | store.dispatch('user/resetToken').then(() => { |
|---|
| | | location.reload() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return Promise.reject(new Error(res.message || 'Error')) |
|---|
| | | } else { |
|---|
| | | return res |
|---|
| | | async(response) => { |
|---|
| | | // console.log(response) |
|---|
| | | if (response.headers.requesttype === 'excel') { |
|---|
| | | return response |
|---|
| | | } |
|---|
| | | const res = response.data |
|---|
| | | // console.log(store) |
|---|
| | | // console.log(store.state.user.refresh) |
|---|
| | | if (res.code === 10010) { |
|---|
| | | const { data: { token, refresh: refreshToken }} = await refresh(qs.stringify({ refresh: store.state.user.refresh })) |
|---|
| | | store.commit('SET_TOKEN', token) |
|---|
| | | store.commit('SET_REFRESH', refreshToken) |
|---|
| | | // console.log('éæ°å·æ°tokenæå', token, refreshToken) |
|---|
| | | setToken(token) |
|---|
| | | setrefreshToken(refreshToken) |
|---|
| | | axios.request(response.config) |
|---|
| | | // console.log('tokenå·æ°', getters.refresh()) |
|---|
| | | // refresh({ refresh : getters.refresh() }) |
|---|
| | | // refresh({ refresh : getters.refresh() }).then((res)=>{ |
|---|
| | | // console.log(res) |
|---|
| | | // }) |
|---|
| | | return Promise.resolve(res) |
|---|
| | | } |
|---|
| | | // if (res.code === 10010) { |
|---|
| | | // console.log('tokenå·æ°') |
|---|
| | | // refresh({ refresh : getters.refresh() }).then(async (res) => { |
|---|
| | | // console.log(res) |
|---|
| | | // await store.dispatch('flushedToken', res.data) |
|---|
| | | // }) |
|---|
| | | // return axios.request(response.config) |
|---|
| | | // } |
|---|
| | | // console.log(res) |
|---|
| | | // if the custom code is not 20000, it is judged as an error. |
|---|
| | | return res |
|---|
| | | }, |
|---|
| | | error => { |
|---|
| | | console.log(error) |
|---|
| | | |
|---|
| | | console.log('err' + error) // for debug |
|---|
| | | Message({ |
|---|
| | | message: error.message, |
|---|
| | | message: 'é误ï¼è¯·éæ°å°è¯', |
|---|
| | | // message: error.message, |
|---|
| | | type: 'error', |
|---|
| | | duration: 5 * 1000 |
|---|
| | | }) |
|---|
| | |
|---|
| | | * @returns {Boolean} |
|---|
| | | */ |
|---|
| | | export function validUsername(str) { |
|---|
| | | const valid_map = ['admin', 'editor'] |
|---|
| | | return valid_map.indexOf(str.trim()) >= 0 |
|---|
| | | // const valid_map = ['admin', 'editor'] |
|---|
| | | // return valid_map.indexOf(str.trim()) >= 0 |
|---|
| | | console.log(str) |
|---|
| | | return Number.isInteger(str) |
|---|
| | | } |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="barcode"> |
|---|
| | | æ¡ç æå° |
|---|
| | | <!--ç»å®idæ¹æ³--> |
|---|
| | | <!-- <div id='box'> |
|---|
| | | <p>æå°å
容</p> |
|---|
| | | </div> |
|---|
| | | <div v-print='#box'>æå°</div> --> |
|---|
| | | <!--ç»å®å¯¹è±¡æ¹æ³--> |
|---|
| | | <div id='printMe'> |
|---|
| | | <vue-barcode |
|---|
| | | :value="value" |
|---|
| | | >ä¸æ¯ævue-barcode</vue-barcode> |
|---|
| | | <div> |
|---|
| | | <div>产åå称</div> |
|---|
| | | <div>æ°é</div> |
|---|
| | | <div>åä½</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div>æ¶é´</div> |
|---|
| | | <div>è§æ ¼</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-for="(item,index) in table" :key="index"> |
|---|
| | | {{item}} |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-button @click="showCode">çææ¡å½¢ç </el-button> |
|---|
| | | <el-button v-print='printObj'>æå°</el-button> |
|---|
| | | <el-input v-show="false" class="input" v-model="value" ref="input"></el-input> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | import VueBarcode from 'vue-barcode' |
|---|
| | | |
|---|
| | | export default{ |
|---|
| | | data(){ |
|---|
| | | return { |
|---|
| | | printObj:{ |
|---|
| | | id: "printMe", // æå°çåºå |
|---|
| | | // preview: false, // é¢è§å·¥å
·æ¯å¦å¯ç¨ |
|---|
| | | previewTitle: 'æå°æ¡ç ', // é¢è§é¡µé¢çæ é¢ |
|---|
| | | popTitle: '', // æå°é¡µé¢ç页ç |
|---|
| | | previewBeforeOpenCallback(vue) { |
|---|
| | | console.log('æ£å¨å è½½é¢è§çªå£') |
|---|
| | | }, |
|---|
| | | previewOpenCallback(vue) { |
|---|
| | | console.log('å·²ç»å è½½å®é¢è§çªå£') |
|---|
| | | }, |
|---|
| | | clickMounted: (vue) => { |
|---|
| | | console.log("触åç¹å»æå°åè°"); |
|---|
| | | vue.isShowPrint = true //å¼¹æ¡æ¾ç¤ºæ¡ç |
|---|
| | | }, |
|---|
| | | beforeOpenCallback(vue) { |
|---|
| | | console.log('æå¼ä¹å',vue.barcodeNum) |
|---|
| | | }, |
|---|
| | | openCallback (vue) { |
|---|
| | | vue.isShowPrint = false // å
³éæ¡ç æ¾ç¤ºå¼¹æ¡ |
|---|
| | | console.log('æ§è¡äºæå°',vue.barcodeNum) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | value: '', |
|---|
| | | table:[] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | components: { VueBarcode }, |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | this.makeCode('1234567891234567') |
|---|
| | | this.addScanMonitor() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // çå¬æ«æ |
|---|
| | | showCode() { |
|---|
| | | this.makeCode('1234567891234567') |
|---|
| | | // window.document.onkeypress=undefined |
|---|
| | | }, |
|---|
| | | addScanMonitor() { |
|---|
| | | window.document.onkeypress = e => { |
|---|
| | | console.log(e) |
|---|
| | | if (window.event) { // IE |
|---|
| | | this.nextCode = e.keyCode |
|---|
| | | } else if (e.which) { // Netscape/Firefox/Opera |
|---|
| | | this.nextCode = e.which |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (e.which === 13) { // é®çå车äºä»¶ |
|---|
| | | if (this.code.length < 3) return // æ«ç æªçé度å¾å¿«ï¼æå¨è¾å
¥çæ¶é´ä¸ä¼è®©codeçé¿åº¦å¤§äº2ï¼æ以è¿éä¸ä¼å¯¹æ«ç æªææ |
|---|
| | | console.log('æ«ç ç»æ,æ¡å½¢ç ï¼', this.code) |
|---|
| | | this.table.push(this.code) |
|---|
| | | this.scanningForm.scanCode = this.code |
|---|
| | | this.lastCode = '' |
|---|
| | | this.lastTime = '' |
|---|
| | | this.handleSubmitScanning() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.nextTime = new Date().getTime() |
|---|
| | | if (!this.lastTime && !this.lastCode) { |
|---|
| | | this.code = '' // æ¸
空ä¸æ¬¡çæ¡å½¢ç |
|---|
| | | // 继ç»æ«æä¸ä¸æ¡åå
³éå¼¹çª |
|---|
| | | // this.handleCloseTipsVisible() |
|---|
| | | this.code += e.key |
|---|
| | | console.log('æ«ç å¼å§---', this.code) |
|---|
| | | } |
|---|
| | | if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // å½æ«ç åækeypressäºä»¶æ¶,é²æ¢é¦å缺失 |
|---|
| | | this.code = e.key |
|---|
| | | console.log('é²æ¢é¦å缺失ããã', this.code) |
|---|
| | | } else if (this.lastCode && this.lastTime) { |
|---|
| | | this.code += e.key |
|---|
| | | console.log('æ«ç ä¸ããã', this.code) |
|---|
| | | } |
|---|
| | | this.lastCode = this.nextCode |
|---|
| | | this.lastTime = this.nextTime |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | makeCode(msg) { |
|---|
| | | // let obj = {jack: '1212'} |
|---|
| | | this.value = msg |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | <style lang="scss"> |
|---|
| | | |
|---|
| | | #printMe{ |
|---|
| | | // height: 4cm; |
|---|
| | | width: 8cm; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | text-align: center; |
|---|
| | | img{ |
|---|
| | | display: inline-block; |
|---|
| | | text-align: center; |
|---|
| | | width: 6cm; |
|---|
| | | height: 2cm; |
|---|
| | | } |
|---|
| | | >div{ |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | >div{ |
|---|
| | | flex: 1; |
|---|
| | | // height: 30px; |
|---|
| | | border: 1px solid #ddd; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | @media print { |
|---|
| | | @page { |
|---|
| | | size: 8cm 4cm !important; |
|---|
| | | // margin: 0cm; |
|---|
| | | // padding: 0cm; |
|---|
| | | // size: portrait; |
|---|
| | | // border: 1px solid #ddd; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #printMe{ |
|---|
| | | display: block; |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="addOperation"> |
|---|
| | | <div class="addOperation-main"> |
|---|
| | | <!-- <el-form v-model="statusType" ref="queryForm" size="small" :inline="true" label-width="68px"> |
|---|
| | | <el-form-item label="å
¥åºç¶æ"> |
|---|
| | | <el-radio-group v-model="inStatus"> |
|---|
| | | <el-radio-button label="å
¨é¨"></el-radio-button> |
|---|
| | | <el-radio-button label="å·²å
¥åº"></el-radio-button> |
|---|
| | | <el-radio-button label="å·²åºåº"></el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="å
¥åºç±»å" prop="phonenumber"> |
|---|
| | | <el-radio-group v-model="inType"> |
|---|
| | | <el-radio-button label="æ¡ç æå°"></el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="æ¡ç æå°"> |
|---|
| | | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">æ°å¢æ¡ç æå°</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> --> |
|---|
| | | <el-row type="flex" align="middle" class="main-top"> |
|---|
| | | <el-col :span="2"><el-button type="primary">æ°å¢å
¥åº</el-button></el-col> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <TableSearch></TableSearch> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="2"><el-button>æ¡ç æå°</el-button></el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-table |
|---|
| | | :stripe="true" |
|---|
| | | :data="tableData" |
|---|
| | | :cell-style="{ textAlign: 'center' }" |
|---|
| | | :header-cell-style="{ textAlign: 'center' }" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="åºå·"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="name" |
|---|
| | | label="产åç¼ç "> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="address" |
|---|
| | | label="产åå称"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="è§æ ¼åå·"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="åä½"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="å
¥åºæ°é"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="å
¥åºäºº"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="å
¥åºæ¥æ"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <div class="addOperation-foot"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="searchModel.pageNo" |
|---|
| | | :page-sizes="[10, 15, 20, 25]" |
|---|
| | | :page-size="searchModel.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | <el-row type="flex" align="middle" class="main-top"> |
|---|
| | | <el-col :span="2"><el-button icon="el-icon-plus" type="primary" @click="addOperation">æ°å¢å
¥åº</el-button></el-col> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <TableSearch :show="true" :excel-name="'å
¥åºè¡¨'" :file="file" :get-list="getList" :search-data="searchData" :search-params="searchModel" :options="options" /> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="2"><el-button icon="iconfont icon-24px " @click="printFormVisible = true">æ¡ç æå°</el-button></el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-table |
|---|
| | | :row-class-name="onTableRowClassName" |
|---|
| | | :row-style="{height:0+'px'}" |
|---|
| | | :cell-style="{padding:8+'px',textAlign: 'center'}" |
|---|
| | | :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" |
|---|
| | | :stripe="true" |
|---|
| | | :data="tableData" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | <el-table-column |
|---|
| | | label="åºå·" |
|---|
| | | > |
|---|
| | | <template v-slot="scope"> |
|---|
| | | {{ (addPageParams.pageNo-1) * addPageParams.pageSize + scope.$index + 1 }} |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item, index) in getKeys()" |
|---|
| | | v-if="item.show" |
|---|
| | | :key="index" |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.name" |
|---|
| | | /> |
|---|
| | | </el-table> |
|---|
| | | <div class="addOperation-foot"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="searchModel.pageNo" |
|---|
| | | :page-sizes="[10, 15, 20, 25]" |
|---|
| | | :page-size="searchModel.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-dialog title="æ°å¢å
¥åº" :visible.sync="addFormVisible" @close="addFormClose"> |
|---|
| | | <el-form :model="addParams" label-position="left"> |
|---|
| | | <el-table |
|---|
| | | :height="250" |
|---|
| | | :max-height="250" |
|---|
| | | :row-class-name="onTableRowClassName" |
|---|
| | | :row-style="{height:0+'px'}" |
|---|
| | | :cell-style="{padding:8+'px',textAlign: 'center'}" |
|---|
| | | :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" |
|---|
| | | :stripe="true" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | :data="this.addTable.slice(0, addPageParams.pageSize)" |
|---|
| | | > |
|---|
| | | <!-- <el-table-column property="addPerson" label="åºå·" > |
|---|
| | | </el-table-column> --> |
|---|
| | | <el-table-column property="productCode" label="产åç¼ç " /> |
|---|
| | | <el-table-column property="productName" label="产åå称" /> |
|---|
| | | <el-table-column property="productModel" label="è§æ ¼åå·" /> |
|---|
| | | <el-table-column property="unit" label="åä½" /> |
|---|
| | | <el-table-column property="incomingQuantity" label="å
¥åºæ°é" /> |
|---|
| | | <el-table-column property="addPerson" label="å
¥åºäºº" /> |
|---|
| | | <!-- <el-table-column property="address" label="å
¥åºæ¥æ"></el-table-column> --> |
|---|
| | | </el-table> |
|---|
| | | <div :style="{display: 'flex',justifyContent:'center',marginTop: '10px'}"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="addPageParams.pageNo" |
|---|
| | | :page-sizes="[3, 4, 5, 6]" |
|---|
| | | :page-size="addPageParams.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="addTable.length" |
|---|
| | | @size-change="inHandleSizeChange" |
|---|
| | | @current-change="inHandleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="storage">ç¡® å®</el-button> |
|---|
| | | <el-button @click="addFormVisible = false">å æ¶</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog title="æ¡ç æå°" :visible.sync="printFormVisible"> |
|---|
| | | <el-form :model="printParams" label-position="left"> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="产åå称/è§æ ¼:" :label-width="formLabelWidth"> |
|---|
| | | <el-cascader |
|---|
| | | v-model="chooseTypeName" |
|---|
| | | :options="scanTypeNameOptions" |
|---|
| | | @change="handleChange" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="产åç¼ç :" :label-width="formLabelWidth"> |
|---|
| | | <el-input :value="printParams.productCode" :disabled="true" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="åä½:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="printParams.unit" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="å
¥åºæ°é:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="printParams.incomingQuantity" type="number" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="print">ç¡® å®</el-button> |
|---|
| | | <el-button @click="printFormVisible = false">å æ¶</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog :visible.sync="printVisible" @close="printFormClose"> |
|---|
| | | <div class="printMian"> |
|---|
| | | <div id="printMe"> |
|---|
| | | <vue-barcode :height="50" :width="2" :value="code" /> |
|---|
| | | <div> |
|---|
| | | <div>{{ printParams.productName }}</div> |
|---|
| | | <div>{{ printParams.incomingQuantity }}</div> |
|---|
| | | <div>{{ printParams.unit }}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div :style="{flex:'2', paddingRight:'1px'}">2022-01-01 10:00</div> |
|---|
| | | <div>{{ printParams.productModel }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="btn" :style="{display: 'flex',justifyContent: 'center'}"> |
|---|
| | | <el-button v-print="printObj" :style="{width:'8cm',margin:'10px'}" type="primary">æå°</el-button> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getList } from '@/api/table' |
|---|
| | | import { getList, file, addCache, selectCache, add } from '@/api/addOperation' |
|---|
| | | import { selectAllName } from '@/api/productName' |
|---|
| | | import { selectAllModel } from '@/api/productModel' |
|---|
| | | import { mapGetters } from 'vuex' |
|---|
| | | import TableSearch from '@/components/TableSearch' |
|---|
| | | import VueBarcode from 'vue-barcode' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | filters: { |
|---|
| | | statusFilter(status) { |
|---|
| | |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: 'æè¿ä¸å¨', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | printObj: { |
|---|
| | | id: 'printMe', // æå°çåºå |
|---|
| | | // preview: false, // é¢è§å·¥å
·æ¯å¦å¯ç¨ |
|---|
| | | previewTitle: 'æå°æ¡ç ', // é¢è§é¡µé¢çæ é¢ |
|---|
| | | popTitle: '', // æå°é¡µé¢ç页ç |
|---|
| | | previewBeforeOpenCallback(vue) { |
|---|
| | | console.log('æ£å¨å è½½é¢è§çªå£') |
|---|
| | | }, |
|---|
| | | inType: '', |
|---|
| | | inStatus: '', |
|---|
| | | deptName: '', |
|---|
| | | statusType: {}, |
|---|
| | | queryParams: { |
|---|
| | | encode: '', |
|---|
| | | type: '', |
|---|
| | | depositor: '' |
|---|
| | | previewOpenCallback(vue) { |
|---|
| | | console.log('å·²ç»å è½½å®é¢è§çªå£') |
|---|
| | | }, |
|---|
| | | clickMounted: (vue) => { |
|---|
| | | console.log('触åç¹å»æå°åè°') |
|---|
| | | // vue.isShowPrint = true // å¼¹æ¡æ¾ç¤ºæ¡ç |
|---|
| | | }, |
|---|
| | | beforeOpenCallback(vue) { |
|---|
| | | console.log('æå¼ä¹å', vue.barcodeNum) |
|---|
| | | }, |
|---|
| | | openCallback(vue) { |
|---|
| | | // vue.isShowPrint = false // å
³éæ¡ç æ¾ç¤ºå¼¹æ¡ |
|---|
| | | // æ¸
空æ¡ç æå°æ°æ® |
|---|
| | | vue.printFormVisible = false |
|---|
| | | vue.printVisible = false |
|---|
| | | vue.chooseTypeName = '' |
|---|
| | | for (const key in vue.printParams) { |
|---|
| | | vue.printParams[key] = '' |
|---|
| | | } |
|---|
| | | console.log('æ§è¡äºæå°', vue.barcodeNum) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | printVisible: false, |
|---|
| | | file, |
|---|
| | | getList, |
|---|
| | | options: [], |
|---|
| | | chooseTypeName: {}, |
|---|
| | | scanData: {}, |
|---|
| | | scanTypeNameOptions: [], |
|---|
| | | total: 0, |
|---|
| | | searchModel: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10 |
|---|
| | | pageSize: 10, |
|---|
| | | endTime: '', |
|---|
| | | productModel: '', |
|---|
| | | startTime: '' |
|---|
| | | }, |
|---|
| | | tableData: [{ |
|---|
| | | date: '2016-05-02', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1518 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-04', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1517 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-01', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1519 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-03', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1516 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-03', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1516 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-03', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1516 å¼' |
|---|
| | | }] |
|---|
| | | tableData: [], |
|---|
| | | addFormVisible: false, |
|---|
| | | printFormVisible: false, |
|---|
| | | printParams: { |
|---|
| | | addPerson: '', |
|---|
| | | incomingQuantity: '', |
|---|
| | | productModelId: '', |
|---|
| | | productNameId: '', |
|---|
| | | unit: '', |
|---|
| | | productCode: '' |
|---|
| | | }, |
|---|
| | | showAddTable: [], |
|---|
| | | addTable: [], |
|---|
| | | addCodeTable: [], |
|---|
| | | addParams: { |
|---|
| | | name: '', // 产åå称 |
|---|
| | | specs: '', // 产åè§æ ¼ |
|---|
| | | unit: '', // åä½ |
|---|
| | | number: '', // æ°é |
|---|
| | | depositor: '', // å
¥åºäººï¼å¯ä»¥ä¸ºå
¥åºäººid |
|---|
| | | date: '' // æ¶é´ |
|---|
| | | }, |
|---|
| | | formLabelWidth: '120px', |
|---|
| | | addPageParams: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 3 |
|---|
| | | }, |
|---|
| | | code: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters([ |
|---|
| | | 'sidebar', |
|---|
| | | 'avatar', |
|---|
| | | 'name', |
|---|
| | | 'addTab' |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | addFormVisible(to) { |
|---|
| | | if (!to) { |
|---|
| | | this.addTable = [] |
|---|
| | | this.addCodeTable = [] |
|---|
| | | window.document.onkeypress = undefined |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.fetchData() |
|---|
| | | this.setOptions() |
|---|
| | | // console.log(this.$route,this.$router) |
|---|
| | | }, |
|---|
| | | components: { |
|---|
| | | TableSearch |
|---|
| | | TableSearch, |
|---|
| | | VueBarcode |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | console.log(this.addTab[0]) |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | window.document.onkeypress = null |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getKeys() { |
|---|
| | | return this.$store.state.tableKey.allTab[0].keys |
|---|
| | | }, |
|---|
| | | addScanMonitor() { |
|---|
| | | window.document.onkeypress = e => { |
|---|
| | | console.log(e) |
|---|
| | | if (window.event) { // IE |
|---|
| | | this.nextCode = e.keyCode |
|---|
| | | } else if (e.which) { // Netscape/Firefox/Opera |
|---|
| | | this.nextCode = e.which |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (e.which === 13) { // é®çå车äºä»¶ |
|---|
| | | console.log(new Date().getTime()) |
|---|
| | | if (new Date().getTime() - this.lastTime > 40) { |
|---|
| | | return this.$message.error('æ«ç æ¶ä¸å¯éè¿é®çè¾å
¥') |
|---|
| | | } |
|---|
| | | // if (this.code.length < 3) return // æ«ç æªçé度å¾å¿«ï¼æå¨è¾å
¥çæ¶é´ä¸ä¼è®©codeçé¿åº¦å¤§äº2ï¼æ以è¿éä¸ä¼å¯¹æ«ç æªææ |
|---|
| | | console.log('æ«ç ç»æ,æ¡å½¢ç ï¼', this.code) |
|---|
| | | // åéè¯·æ± |
|---|
| | | if (this.addCodeTable.includes(this.code)) { |
|---|
| | | this.$message.error('请å¿éå¤æ«æ') |
|---|
| | | this.handleSubmitScanning() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | selectCache({ code: this.code }).then(res => { |
|---|
| | | // éè¿æ«ææ¡ç æ¥è¯¢äº§åä¿¡æ¯å å
¥å
¥åºæ°ç»ä¸ |
|---|
| | | this.$message.success(`${this.code}æ«ææå`) |
|---|
| | | res.data.addPerson = this.name |
|---|
| | | console.log(res, this.addCodeTable) |
|---|
| | | this.addTable.push(res.data) |
|---|
| | | this.addCodeTable.push(this.code) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.scanningForm.scanCode = this.code |
|---|
| | | this.lastCode = '' |
|---|
| | | this.lastTime = '' |
|---|
| | | this.handleSubmitScanning() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.nextTime = new Date().getTime() |
|---|
| | | if (!this.lastTime && !this.lastCode) { |
|---|
| | | this.code = '' // æ¸
空ä¸æ¬¡çæ¡å½¢ç |
|---|
| | | // 继ç»æ«æä¸ä¸æ¡åå
³éå¼¹çª |
|---|
| | | // this.handleCloseTipsVisible() |
|---|
| | | this.code = this.code + '' + e.key |
|---|
| | | console.log('æ«ç å¼å§---', this.code) |
|---|
| | | } |
|---|
| | | if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // å½æ«ç åækeypressäºä»¶æ¶,é²æ¢é¦å缺失 |
|---|
| | | this.code = e.key |
|---|
| | | console.log('é²æ¢é¦å缺失ããã', this.code) |
|---|
| | | } else if (this.lastCode && this.lastTime) { |
|---|
| | | this.code = this.code + '' + e.key |
|---|
| | | console.log('æ«ç ä¸ããã', this.code) |
|---|
| | | } |
|---|
| | | this.lastCode = this.nextCode |
|---|
| | | this.lastTime = this.nextTime |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å
³éæ«æå
¥åºå¼¹çª |
|---|
| | | addFormClose() { |
|---|
| | | console.log('æ¸
空æ°æ®') |
|---|
| | | // æ¸
空æ°æ® |
|---|
| | | this.addTable = [] |
|---|
| | | this.addCodeTable = [] |
|---|
| | | }, |
|---|
| | | // ç¹å»æ°å¢å
¥åº |
|---|
| | | addOperation() { |
|---|
| | | this.addFormVisible = true |
|---|
| | | this.addScanMonitor() |
|---|
| | | }, |
|---|
| | | printFormClose() { |
|---|
| | | for (const key in this.printParams) { |
|---|
| | | this.printParams[key] = '' |
|---|
| | | } |
|---|
| | | this.chooseTypeName = '' |
|---|
| | | }, |
|---|
| | | async setOptions() { |
|---|
| | | const { data: nameRes } = await selectAllName() |
|---|
| | | // console.log(nameRes) |
|---|
| | | const nameArr = nameRes.productNames.map(item => { |
|---|
| | | return { value: item.id, label: item.productName } |
|---|
| | | }) |
|---|
| | | for (const nameItem of nameArr) { |
|---|
| | | const { data } = await selectAllModel({ productNameId: nameItem.value }) |
|---|
| | | // console.log(data) |
|---|
| | | this.options = [...this.options, ...data.models] |
|---|
| | | nameItem.children = data.models.map(item => { |
|---|
| | | return { value: item.id, label: item.productModel, productCode: item.productCode } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.options = this.options.map(item => { |
|---|
| | | return { label: item.productModel, value: item.productModel, productCode: item.productCode } |
|---|
| | | }) |
|---|
| | | this.scanTypeNameOptions = nameArr |
|---|
| | | // console.log(this.options) |
|---|
| | | // console.log(nameArr) |
|---|
| | | }, |
|---|
| | | searchData(res) { |
|---|
| | | console.log(res) |
|---|
| | | const { row, total, productModel, startTime, endTime } = res |
|---|
| | | this.tableData = row |
|---|
| | | this.total = total |
|---|
| | | this.searchModel.productModel = productModel |
|---|
| | | this.searchModel.startTime = startTime |
|---|
| | | this.searchModel.endTime = endTime |
|---|
| | | }, |
|---|
| | | handleChange(value) { |
|---|
| | | console.log(value) |
|---|
| | | this.printParams.productNameId = value[0] |
|---|
| | | this.printParams.productModelId = value[1] |
|---|
| | | console.log(this.scanTypeNameOptions) |
|---|
| | | const nameObj = this.scanTypeNameOptions.filter(item => item.value === value[0]) |
|---|
| | | console.log(nameObj[0].label) |
|---|
| | | this.printParams.productName = nameObj[0].label |
|---|
| | | const children = nameObj[0].children |
|---|
| | | this.printParams.productCode = children.filter(item => item.value === value[1])[0].productCode |
|---|
| | | console.log(children.filter(item => item.value === value[1])[0].label) |
|---|
| | | this.printParams.productModel = children.filter(item => item.value === value[1])[0].label |
|---|
| | | }, |
|---|
| | | onTableRowClassName({ row, rowIndex }) { |
|---|
| | | if (rowIndex % 2 != 0) { |
|---|
| | | return 'onAcitve' |
|---|
| | | } else { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | storage() { |
|---|
| | | // è¾åºå
¥åºåæ° |
|---|
| | | if (this.addCodeTable.length === 0) return this.$message.error('请å
æ«ææ°æ®å
¥åº') |
|---|
| | | add({ code: this.addCodeTable, addPerson: this.name }).then(() => { |
|---|
| | | this.addTable = [] |
|---|
| | | this.addCodeTable = [] |
|---|
| | | this.fetchData() |
|---|
| | | this.addFormVisible = false |
|---|
| | | this.$message.success('å
¥åºæå') |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | async print() { |
|---|
| | | console.log('çææ¡ç ') |
|---|
| | | this.printParams.addPerson = this.name |
|---|
| | | console.log(this.printParams) |
|---|
| | | const res = await addCache(this.printParams) |
|---|
| | | this.code = res.message |
|---|
| | | this.printFormVisible = false |
|---|
| | | // for( key in this.printParams){ |
|---|
| | | // this.printParams[key] = '' |
|---|
| | | // } |
|---|
| | | this.printVisible = true |
|---|
| | | }, |
|---|
| | | fetchData() { |
|---|
| | | this.listLoading = true |
|---|
| | | getList().then(response => { |
|---|
| | | this.list = response.data.items |
|---|
| | | const obj = {} |
|---|
| | | const arr = Object.keys(this.searchModel).filter(key => this.searchModel[key]) |
|---|
| | | arr.forEach(item => obj[item] = this.searchModel[item]) |
|---|
| | | console.log(obj) |
|---|
| | | getList(obj).then(response => { |
|---|
| | | this.tableData = response.data.row |
|---|
| | | this.total = response.data.total |
|---|
| | | this.listLoading = false |
|---|
| | | // console.log(this.tableData) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleSizeChange(val) { |
|---|
| | |
|---|
| | | }, |
|---|
| | | handleCurrentChange(val) { |
|---|
| | | console.log(`å½å页: ${val}`) |
|---|
| | | this.searchModel.pageNo = val |
|---|
| | | this.fetchData() |
|---|
| | | }, |
|---|
| | | inHandleSizeChange(val) { |
|---|
| | | console.log(`æ¯é¡µ ${val} æ¡`) |
|---|
| | | }, |
|---|
| | | inHandleCurrentChange(val) { |
|---|
| | | console.log(`å½å页: ${val}`) |
|---|
| | | this.addPageParams.pageNo = val |
|---|
| | | // console.log(this.addTable.slice((this.addPageParams.pageSize * (val - 1)), (this.addPageParams.pageSize * (val - 1)) + this.addPageParams.pageSize)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .printMian{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | .btn{ |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | .el-button{ |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | @import '../../styles/variables.scss'; |
|---|
| | | #printMe{ |
|---|
| | | // height: 4cm; |
|---|
| | | // visibility:hidden; |
|---|
| | | width: 8cm; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | text-align: center; |
|---|
| | | img{ |
|---|
| | | align-items: center; |
|---|
| | | display: inline-block; |
|---|
| | | text-align: center; |
|---|
| | | width: 8cm; |
|---|
| | | height: 1.5cm; |
|---|
| | | } |
|---|
| | | >div{ |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | >div{ |
|---|
| | | flex: 1; |
|---|
| | | // height: 30px; |
|---|
| | | border: 1px solid #ddd; |
|---|
| | | padding: 2px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | @media print { |
|---|
| | | @page { |
|---|
| | | size: 8cm 4cm !important; |
|---|
| | | // margin: 0cm; |
|---|
| | | // padding: 0cm; |
|---|
| | | // size: portrait; |
|---|
| | | // border: 1px solid #ddd; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | .addOperation { |
|---|
| | | min-height: calc(100vh - 50px); |
|---|
| | | min-height: calc(100vh - 100px); |
|---|
| | | max-height: calc(100vh - 100px); |
|---|
| | | padding: 25px; |
|---|
| | | // margin: 25px; |
|---|
| | | background: $mainBg; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | .dialog-footer{ |
|---|
| | | text-align: center; |
|---|
| | | |
|---|
| | | } |
|---|
| | | .addOperation-main{ |
|---|
| | | background: #fff; |
|---|
| | | padding: 20px; |
|---|
| | | flex: 80%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | .main-top{} |
|---|
| | | .table-header{ |
|---|
| | | background: #6095FB; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .addOperation-foot{ |
|---|
| | | margin-top: 25px; |
|---|
| | | .el-pagination{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | ::v-deep .el-table{ |
|---|
| | | flex: 1; |
|---|
| | | ::v-deep .onAcitve td{ |
|---|
| | | background-color: #F2F2F2 !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .addOperation-foot{ |
|---|
| | | // flex: 20%; |
|---|
| | | margin-top: 25px; |
|---|
| | | .el-pagination{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: right; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <!-- eslint-disable vue/attributes-order --> |
|---|
| | | <template> |
|---|
| | | <div class="dashboard-container"> |
|---|
| | | <div class="home-annular-list"> |
|---|
| | | <div class="annular-item" v-for="item in 4" :key="item"> |
|---|
| | | </div> |
|---|
| | | <el-empty |
|---|
| | | description="ææ æ°æ®" |
|---|
| | | v-if="chartData.PieData&&chartData.DailyTotal&& |
|---|
| | | chartData.WeekNumData&&chartData.ExceedThirtyDay.length!=0 |
|---|
| | | " |
|---|
| | | /> |
|---|
| | | <template v-else> |
|---|
| | | <div class="home-annular-list" v-show="chartData.PieData"> |
|---|
| | | <div v-for="item in 4" :key="item" class="annular-item " :class="'pie'+item" /> |
|---|
| | | </div> |
|---|
| | | <div class="home-line-bar"> |
|---|
| | | <div class="left"> |
|---|
| | | <div class="top">1</div> |
|---|
| | | <div class="bottom">1</div></div> |
|---|
| | | <div class="top" /> |
|---|
| | | <div class="bottom"> |
|---|
| | | 临è¿30天åºå |
|---|
| | | <div> |
|---|
| | | <el-table |
|---|
| | | :data="exceedThirtyDay" |
|---|
| | | stripe |
|---|
| | | style="width: 100%" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | prop="product_name" |
|---|
| | | label="产åå称" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="RemainingDays" |
|---|
| | | label="产ååºå" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="product_code" |
|---|
| | | label="产åç¼ç " |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="product_model" |
|---|
| | | label="产åè§æ ¼" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="unit" |
|---|
| | | label="åä½" |
|---|
| | | /> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="right"> |
|---|
| | | 1 |
|---|
| | | <div /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getList } from '@/api/home' |
|---|
| | | import { mapGetters } from 'vuex' |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | export default { |
|---|
| | | name: 'Home', |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | exceedThirtyDay: [], |
|---|
| | | show: true, |
|---|
| | | chartData: {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters([ |
|---|
| | | 'name' |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | console.log(echarts) |
|---|
| | | // console.log(echarts) |
|---|
| | | this.echartsInit() |
|---|
| | | |
|---|
| | | // å·æ°æ¶ä»¥å½åè·¯ç±å为tabå å
¥tabs |
|---|
| | | // å½åè·¯ç±ä¸æ¯é¦é¡µæ¶ï¼æ·»å é¦é¡µä»¥åå¦ä¸é¡µå°storeéï¼å¹¶è®¾ç½®æ¿æ´»ç¶æ |
|---|
| | | // å½å½åè·¯ç±æ¯é¦é¡µæ¶ï¼æ·»å é¦é¡µå°storeï¼å¹¶è®¾ç½®æ¿æ´»ç¶æ |
|---|
| | | if (this.$route.path !== '/' && this.$route.path !== '/home') { |
|---|
| | | console.log('1') |
|---|
| | | this.$store.commit('ADD_TAB', { route: '/home', name: '主页' }) |
|---|
| | | this.$store.commit('ADD_TAB', { route: this.$route.path, name: this.$route.name }) |
|---|
| | | this.$store.commit('SET_ACTIVE_INDEX', this.$route.path) |
|---|
| | | } |
|---|
| | | // else { |
|---|
| | | // console.log('2'); |
|---|
| | | // this.$store.commit('ADD_TAB', {route: '/home', name: 'home'}); |
|---|
| | | // this.$store.commit('SET_ACTIVE_INDEX', '/home'); |
|---|
| | | // this.$router.push('/'); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | console.log(this.$store.state) |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.echartsInit() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echartsInit() { |
|---|
| | | let boxArr = document.querySelectorAll(".annular-item") |
|---|
| | | boxArr.forEach((item) => { |
|---|
| | | echarts.init(item).setOption({ |
|---|
| | | legend: { |
|---|
| | | type: 'scroll', |
|---|
| | | align: 'left', |
|---|
| | | orient: 'vertical', |
|---|
| | | x: 'right', |
|---|
| | | y: 'center' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text: '饼å¾çº¹ç', |
|---|
| | | textStyle: { |
|---|
| | | color: '#235894' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'Access From', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | center: ['25%', '50%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 5, |
|---|
| | | borderColor: '#fff', |
|---|
| | | borderWidth: 2 |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: 'left' |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { value: 1048, name: 'Search Engine' }, |
|---|
| | | { value: 735, name: 'Direct' }, |
|---|
| | | { value: 580, name: 'Email' }, |
|---|
| | | { value: 484, name: 'Union Ads' }, |
|---|
| | | { value: 300, name: 'Video Ads' } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | getData() { |
|---|
| | | }, |
|---|
| | | getPie(PieData, className) { |
|---|
| | | console.log(className) |
|---|
| | | const box = document.querySelector(className) |
|---|
| | | echarts.init(box).setOption({ |
|---|
| | | legend: { |
|---|
| | | type: 'scroll', |
|---|
| | | align: 'left', |
|---|
| | | orient: 'vertical', |
|---|
| | | x: 'right', |
|---|
| | | y: 'center' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text: '饼å¾çº¹ç', |
|---|
| | | textStyle: { |
|---|
| | | color: '#235894' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: PieData.datetime, |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | center: ['25%', '50%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 5, |
|---|
| | | borderColor: '#fff', |
|---|
| | | borderWidth: 2 |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: 'left' |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { value: PieData.addNum, name: 'å
¥åºæ°ç®' }, |
|---|
| | | { value: PieData.outNum, name: 'åºåºæ°ç®' }, |
|---|
| | | { value: PieData.beginningMonth, name: 'æååºå' }, |
|---|
| | | { value: PieData.endOfMonth, name: 'ææ«åºå' } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let letTop = document.querySelector(".top") |
|---|
| | | }, |
|---|
| | | getLine(DailyTotal) { |
|---|
| | | const right = document.querySelector('.right') |
|---|
| | | echarts.init(right).setOption({ |
|---|
| | | legend: { |
|---|
| | | |
|---|
| | | x: 'center', |
|---|
| | | slected: true |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text: 'ä»åºç»è®¡', |
|---|
| | | textStyle: { |
|---|
| | | color: '#235894' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | data: DailyTotal?.xList |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: DailyTotal?.yList, |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | name: 'æ¯æ¥æ»è®¡', |
|---|
| | | areaStyle: {} |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getBar(WeekNumData) { |
|---|
| | | const letTop = document.querySelector('.top') |
|---|
| | | echarts.init(letTop).setOption({ |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | x: 'center', |
|---|
| | | y: 'top' |
|---|
| | | x: 'center', |
|---|
| | | y: 'top' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text: 'ä»åºç»è®¡', |
|---|
| | | textStyle: { |
|---|
| | | color: '#235894' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: WeekNumData.xList |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: WeekNumData.yOutList, |
|---|
| | | name: 'åºåºæ°é', |
|---|
| | | type: 'bar' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text: 'ä»åºç»è®¡', |
|---|
| | | textStyle: { |
|---|
| | | color: '#235894' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [120, 200, 150, 80, 70, 110, 130], |
|---|
| | | name: 'åºåºæ°é', |
|---|
| | | type: 'bar' |
|---|
| | | { |
|---|
| | | data: WeekNumData.yEnterList, |
|---|
| | | name: 'å
¥åºæ°é', |
|---|
| | | type: 'bar' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | data: [220, 210, 80, 110, 30, 80, 130], |
|---|
| | | name: 'å
¥åºæ°é', |
|---|
| | | type: 'bar' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | async echartsInit() { |
|---|
| | | const res = await getList() |
|---|
| | | const { data } = res |
|---|
| | | this.chartData = { ...data } |
|---|
| | | console.log(this.chartData) |
|---|
| | | data.PieData?.forEach((item, index) => { |
|---|
| | | console.log(item) |
|---|
| | | this.getPie(item, '.pie' + (index + 1)) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let right = document.querySelector(".right") |
|---|
| | | echarts.init(right).setOption({ |
|---|
| | | legend: { |
|---|
| | | |
|---|
| | | x: 'center', |
|---|
| | | slected: true |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text: 'ä»åºç»è®¡', |
|---|
| | | textStyle: { |
|---|
| | | color: '#235894' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [820, 932, 901, 934, 1290, 1330, 1320], |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | name: 'æ°æ®1', |
|---|
| | | areaStyle: {} |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | this.getBar(data.WeekNumData) |
|---|
| | | this.getLine(data.DailyTotal) |
|---|
| | | this.exceedThirtyDay = data.ExceedThirtyDay |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .home-annular-list{ |
|---|
| | | |
|---|
| | | margin: 12px; |
|---|
| | | margin: 12px 0; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | .annular-item{ |
|---|
| | | width: 350px; |
|---|
| | | height: 240px; |
|---|
| | | width: 300px; |
|---|
| | | height: 200px; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 25px; |
|---|
| | | padding: 20px; |
|---|
| | | background: #fff; |
|---|
| | | // margin: 0 12px; |
|---|
| | | } |
|---|
| | |
|---|
| | | background: #fff; |
|---|
| | | padding: 25px; |
|---|
| | | border-radius: 10px; |
|---|
| | | // max-width: 500px; |
|---|
| | | max-height: 328px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | <div class="logo"> |
|---|
| | | <img src="../../assets/images/logo.png" alt=""> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | | |
|---|
| | | </div> |
|---|
| | | <div class="logo-title"> |
|---|
| | | ä¸å¤©ç§æWMSç³»ç» |
|---|
| | | WMSç³»ç» |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> |
|---|
| | | |
|---|
| | | <div class="title-container"> |
|---|
| | | <div> |
|---|
| | | <div class="title">ç³»ç»ç»å½</div> |
|---|
| | | <div class="scan-icon">å°å¾æ </div> |
|---|
| | | <div class="logo-main"> |
|---|
| | | <div class="main-img"> |
|---|
| | | <img src="@/assets/images/loginbg.png" alt=""> |
|---|
| | | </div> |
|---|
| | | <!-- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> --> |
|---|
| | | <el-form ref="loginForm" :status-icon="true" :model="loginForm" class="login-form" auto-complete="on" label-position="left"> |
|---|
| | | <div v-show="!showCode" class="title-container"> |
|---|
| | | <div> |
|---|
| | | <div class="title">ç»å½</div> |
|---|
| | | <div class="scan-icon iconfont icon-saoyisao" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-form-item v-show="!showCode" size="size" prop="username"> |
|---|
| | | <span class="svg-container"> |
|---|
| | | <i class="el-icon-user" /> |
|---|
| | | </span> |
|---|
| | | <el-input |
|---|
| | | ref="username" |
|---|
| | | v-model.number="loginForm.username" |
|---|
| | | size="mini" |
|---|
| | | placeholder="è´¦å·" |
|---|
| | | name="username" |
|---|
| | | |
|---|
| | | <el-form-item prop="username"> |
|---|
| | | <span class="svg-container"> |
|---|
| | | <svg-icon icon-class="user" /> |
|---|
| | | </span> |
|---|
| | | <el-input |
|---|
| | | ref="username" |
|---|
| | | v-model="loginForm.username" |
|---|
| | | placeholder="Username" |
|---|
| | | name="username" |
|---|
| | | type="text" |
|---|
| | | tabindex="1" |
|---|
| | | auto-complete="on" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | tabindex="1" |
|---|
| | | auto-complete="on" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item prop="password"> |
|---|
| | | <span class="svg-container"> |
|---|
| | | <svg-icon icon-class="password" /> |
|---|
| | | </span> |
|---|
| | | <el-input |
|---|
| | | :key="passwordType" |
|---|
| | | ref="password" |
|---|
| | | v-model="loginForm.password" |
|---|
| | | :type="passwordType" |
|---|
| | | placeholder="Password" |
|---|
| | | name="password" |
|---|
| | | tabindex="2" |
|---|
| | | auto-complete="on" |
|---|
| | | @keyup.enter.native="handleLogin" |
|---|
| | | /> |
|---|
| | | <span class="show-pwd" @click="showPwd"> |
|---|
| | | <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> |
|---|
| | | </span> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item v-show="!showCode" size="size" prop="password"> |
|---|
| | | <span class="svg-container"> |
|---|
| | | <i class="el-icon-lock" /> |
|---|
| | | </span> |
|---|
| | | <el-input |
|---|
| | | :key="passwordType" |
|---|
| | | ref="password" |
|---|
| | | v-model="loginForm.password" |
|---|
| | | size="mini" |
|---|
| | | :type="passwordType" |
|---|
| | | placeholder="å¯ç " |
|---|
| | | name="password" |
|---|
| | | show-password |
|---|
| | | tabindex="2" |
|---|
| | | auto-complete="on" |
|---|
| | | @keyup.enter.native="handleLogin" |
|---|
| | | /> |
|---|
| | | <span class="show-pwd" @click="showPwd"> |
|---|
| | | <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> |
|---|
| | | </span> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item> |
|---|
| | | <el-checkbox v-model="checked">èªå¨ç»å½</el-checkbox> |
|---|
| | | <el-checkbox v-model="checked">å¿è®°å¯ç </el-checkbox> |
|---|
| | | </el-form-item> |
|---|
| | | <div class="login"> |
|---|
| | | <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">ç»å½</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | <el-form-item> |
|---|
| | | <div v-show="!showCode" class="login"> |
|---|
| | | <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">ç»å½</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <div v-show="showCode" class="code"> |
|---|
| | | <img src="../../assets/images/code.png"> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | name: 'Login', |
|---|
| | | data() { |
|---|
| | | const validateUsername = (rule, value, callback) => { |
|---|
| | | if (!validUsername(value)) { |
|---|
| | | callback(new Error('请è¾å
¥æ£ç¡®çè´¦å·ï¼')) |
|---|
| | | const reg = /^(?=.*\d).{6,11}$/ |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('è´¦å·ç±6-10ä½æ°åç»æï¼è¯·è¾å
¥æ£ç¡®çè´¦å·ï¼')) |
|---|
| | | } else { |
|---|
| | | callback() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const validatePassword = (rule, value, callback) => { |
|---|
| | | if (value.length < 6) { |
|---|
| | | callback(new Error('请è¾å
¥6ä½å¯ç ï¼')) |
|---|
| | | // let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/ |
|---|
| | | // let reg = /^(?![0-9]+$)(?![A-Z]+$)(?![a-z]+$)[0-9A-Za-z]{6,12}$/ |
|---|
| | | |
|---|
| | | const reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,12}$/ |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('å¯ç å¿
é¡»æ¯ç±6-12ä½å
å«å¤§å°ååæ¯ï¼æ°åç»å')) |
|---|
| | | } else { |
|---|
| | | callback() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | loginForm: { |
|---|
| | | username: 'admin', |
|---|
| | | password: '111111' |
|---|
| | | username: '', |
|---|
| | | password: '' |
|---|
| | | }, |
|---|
| | | loginRules: { |
|---|
| | | username: [{ required: true, trigger: 'blur', validator: validateUsername }], |
|---|
| | |
|---|
| | | }, |
|---|
| | | loading: false, |
|---|
| | | passwordType: 'password', |
|---|
| | | redirect: undefined |
|---|
| | | redirect: undefined, |
|---|
| | | showCode: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | openCode() { |
|---|
| | | this.showCode = true |
|---|
| | | }, |
|---|
| | | showPwd() { |
|---|
| | | if (this.passwordType === 'password') { |
|---|
| | | this.passwordType = '' |
|---|
| | |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleLogin() { |
|---|
| | | this.$refs.loginForm.validate(valid => { |
|---|
| | | if (valid) { |
|---|
| | | this.loading = true |
|---|
| | | this.$store.dispatch('user/login', this.loginForm).then(() => { |
|---|
| | | this.$router.push({ path: this.redirect || '/' }) |
|---|
| | | this.loading = false |
|---|
| | | }).catch(() => { |
|---|
| | | this.loading = false |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | console.log('error submit!!') |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | console.log('å¼å§ç»å½') |
|---|
| | | // debugger |
|---|
| | | console.log(this) |
|---|
| | | this.loading = true |
|---|
| | | this.$store.dispatch('user/login', this.loginForm).then((res) => { |
|---|
| | | console.log(res) |
|---|
| | | this.$router.push({ path: this.redirect || '/' }) |
|---|
| | | this.loading = false |
|---|
| | | }).catch(() => { |
|---|
| | | this.loading = false |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | #app .login-container .el-input input:-webkit-autofill { |
|---|
| | | box-shadow: none !important; |
|---|
| | | } |
|---|
| | | /* ä¿®å¤input èæ¯ä¸åè° åå
æ åè² */ |
|---|
| | | /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ |
|---|
| | | |
|---|
| | | .login{ |
|---|
| | | text-align: center; |
|---|
| | | .el-button{ |
|---|
| | | background: #285E77 ; |
|---|
| | | border: 2px solid #8AA0AC; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | $bg:#283443; |
|---|
| | | $light_gray:#fff; |
|---|
| | |
|---|
| | | .login-container { |
|---|
| | | .el-input { |
|---|
| | | display: inline-block; |
|---|
| | | height: 47px; |
|---|
| | | height: 30px; |
|---|
| | | width: 85%; |
|---|
| | | |
|---|
| | | input { |
|---|
| | |
|---|
| | | border: 0px; |
|---|
| | | -webkit-appearance: none; |
|---|
| | | border-radius: 0px; |
|---|
| | | padding: 12px 5px 12px 15px; |
|---|
| | | padding: 6px 2px 6px 7px; |
|---|
| | | color: $cursor; |
|---|
| | | height: 47px; |
|---|
| | | height: 30px; |
|---|
| | | // caret-color: $cursor; |
|---|
| | | |
|---|
| | | &:-webkit-autofill { |
|---|
| | |
|---|
| | | background: rgba(255, 255, 255); |
|---|
| | | border-radius: 5px; |
|---|
| | | color: #454545; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | margin-right: 40px; |
|---|
| | | margin-left: 40px; |
|---|
| | | height: 40px; |
|---|
| | | &:nth-child(4){ |
|---|
| | | // width: 100%; |
|---|
| | | // display: flex; |
|---|
| | |
|---|
| | | $bg:#2d3a4b; |
|---|
| | | $dark_gray:#889aa4; |
|---|
| | | $light_gray:#eee; |
|---|
| | | ::v-deep .el-form-item__content{ |
|---|
| | | .svg-container{ |
|---|
| | | text-align: center; |
|---|
| | | line-height: 32px; |
|---|
| | | } |
|---|
| | | // display: flex; |
|---|
| | | |
|---|
| | | } |
|---|
| | | .login-container { |
|---|
| | | position: relative; |
|---|
| | | min-height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | background: url("../../assets/images/loginbg.png"); |
|---|
| | | background: #134666; |
|---|
| | | background-size: cover; |
|---|
| | | overflow: hidden; |
|---|
| | | .login-logo{ |
|---|
| | | position: absolute; |
|---|
| | | width: 520px; |
|---|
| | | left: 60%; |
|---|
| | | top: 25%; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 30px; |
|---|
| | | font-size: 20px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding: 10px; |
|---|
| | | background: #0E3757; |
|---|
| | | .logo{ |
|---|
| | | img{ |
|---|
| | | width: 150px; |
|---|
| | | height: 50px; |
|---|
| | | width: 80px; |
|---|
| | | height: 30px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .logo-title{ |
|---|
| | | margin-left: 20px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .login-form { |
|---|
| | | .logo-main{ |
|---|
| | | position: absolute; |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 25px; |
|---|
| | | width: 520px; |
|---|
| | | height: 370px; |
|---|
| | | padding: 40px; |
|---|
| | | max-width: 100%; |
|---|
| | | left: 50%; |
|---|
| | | top: 50%; |
|---|
| | | transform: translateY(-50%); |
|---|
| | | left: 60%; |
|---|
| | | transform: translate(-50%,-50%); |
|---|
| | | width: 1000px; |
|---|
| | | height: 400px; |
|---|
| | | border-radius: 25px; |
|---|
| | | overflow:hidden; |
|---|
| | | display: flex; |
|---|
| | | // border: 2px solid red; |
|---|
| | | .main-img{ |
|---|
| | | // width: 550px; |
|---|
| | | // height: 300px; |
|---|
| | | flex: 1; |
|---|
| | | height: 400px; |
|---|
| | | text-align: center; |
|---|
| | | background: #0D3155; |
|---|
| | | img{ |
|---|
| | | width: 400px; |
|---|
| | | height: 400px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .login-form { |
|---|
| | | background: #285E77; |
|---|
| | | width: 450px; |
|---|
| | | height: 400px; |
|---|
| | | padding: 30px; |
|---|
| | | overflow: hidden; |
|---|
| | | color: #fff; |
|---|
| | | .code{ |
|---|
| | | text-align: center; |
|---|
| | | img{ |
|---|
| | | width: 200px; |
|---|
| | | height: 200px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #fff; |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .svg-container { |
|---|
| | | padding: 6px 5px 6px 15px; |
|---|
| | | padding: 3px 2px 3px 7px; |
|---|
| | | color: $dark_gray; |
|---|
| | | vertical-align: middle; |
|---|
| | | width: 30px; |
|---|
| | |
|---|
| | | |
|---|
| | | .title-container { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | // height: 70px; |
|---|
| | | // line-height: 70px; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | .title { |
|---|
| | | height: 30px; |
|---|
| | | line-height: 30px; |
|---|
| | | position: relative; |
|---|
| | | // position: absolute; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%); |
|---|
| | | font-size: 20px; |
|---|
| | | color: #454545; |
|---|
| | | margin: 0px auto 24px auto; |
|---|
| | | color: #fff; |
|---|
| | | margin: 0px auto 0 auto; |
|---|
| | | display: inline-block; |
|---|
| | | // font-weight: bold; |
|---|
| | | } |
|---|
| | | .scan-icon{ |
|---|
| | | float: right; |
|---|
| | | font-size: 30px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="addOperation"> |
|---|
| | | <div class="addOperation-main"> |
|---|
| | | <!-- <el-form v-model="statusType" ref="queryForm" size="small" :inline="true" label-width="68px"> |
|---|
| | | <el-form-item label="å
¥åºç¶æ"> |
|---|
| | | <el-radio-group v-model="inStatus"> |
|---|
| | | <el-radio-button label="å
¨é¨"></el-radio-button> |
|---|
| | | <el-radio-button label="å·²å
¥åº"></el-radio-button> |
|---|
| | | <el-radio-button label="å·²åºåº"></el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="å
¥åºç±»å" prop="phonenumber"> |
|---|
| | | <el-radio-group v-model="inType"> |
|---|
| | | <el-radio-button label="æ¡ç æå°"></el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="æ¡ç æå°"> |
|---|
| | | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">æ°å¢æ¡ç æå°</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> --> |
|---|
| | | <el-row type="flex" align="middle" class="main-top"> |
|---|
| | | <el-col :span="2"><el-button type="primary">æ«æåºåº</el-button></el-col> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <TableSearch></TableSearch> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="2"><el-button>æ¼è¿åæå°</el-button></el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-table |
|---|
| | | :stripe="true" |
|---|
| | | :data="tableData" |
|---|
| | | :cell-style="{ textAlign: 'center' }" |
|---|
| | | :header-cell-style="{ textAlign: 'center' }" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="åºå·"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="name" |
|---|
| | | label="产åç¼ç "> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="address" |
|---|
| | | label="产åå称"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="è§æ ¼åå·"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="åä½"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="å
¥åºæ°é"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="å
¥åºäºº"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="å
¥åºæ¥æ"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <div class="addOperation-foot"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="searchModel.pageNo" |
|---|
| | | :page-sizes="[10, 15, 20, 25]" |
|---|
| | | :page-size="searchModel.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | <div class="outOperation"> |
|---|
| | | <div class="outOperation-main"> |
|---|
| | | <el-row type="flex" align="middle" class="main-top"> |
|---|
| | | <el-col :span="2"><el-button type="primary" icon="iconfont icon-saoyisao" @click="scan">æ°å¢åºåº</el-button></el-col> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <TableSearch :show="true" :excel-name="'åºå表'" :file="outFile" :get-list="getList" :search-data="searchData" :search-params="searchModel" :options="options" /> |
|---|
| | | </el-col> |
|---|
| | | <!-- <el-col :span="2"><el-button type="primary" @click="printOrder ">æå°æ¼è¿å</el-button></el-col> --> |
|---|
| | | <el-col :span="2"><el-button type="primary" :disabled="outTable.length==0" @click="printOrder ">æå°æ¼è¿å</el-button></el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-table |
|---|
| | | class="tableData" |
|---|
| | | :row-class-name="onTableRowClassName" |
|---|
| | | :row-style="{height:0+'px'}" |
|---|
| | | :cell-style="{padding:8+'px',textAlign: 'center'}" |
|---|
| | | :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" |
|---|
| | | :stripe="true" |
|---|
| | | :data="tableData" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | @selection-change="handleSelectionChange" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | <el-table-column |
|---|
| | | label="å¤é" |
|---|
| | | type="selection" |
|---|
| | | width="55" |
|---|
| | | > |
|---|
| | | <!-- <el-checkbox></el-checkbox> --> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="productCode" |
|---|
| | | label="产åç¼ç " |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productName" |
|---|
| | | label="产åå称" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productModel" |
|---|
| | | label="è§æ ¼åå·" |
|---|
| | | > |
|---|
| | | <template slot="header" slot-scope="scope"> |
|---|
| | | <span>è§æ ¼åå·</span> |
|---|
| | | <span :class="isMerge?'el-icon-sort-up':'el-icon-sort-down'" :style="{marginLeft:'5px'}" @click="merge" /> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="unit" |
|---|
| | | label="åä½" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="incomingQuantity" |
|---|
| | | label="å
¥åºæ°é" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="addPerson" |
|---|
| | | label="å
¥åºäºº" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | v-if="!isMerge" |
|---|
| | | prop="createTime" |
|---|
| | | label="åºåºæ¥æ" |
|---|
| | | /> |
|---|
| | | </el-table> |
|---|
| | | <div class="outOperation-foot"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="searchModel.pageNo" |
|---|
| | | :page-sizes="[10, 15, 20, 25]" |
|---|
| | | :page-size="searchModel.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-dialog title="æ«æåºåº" :visible.sync="outFormVisible"> |
|---|
| | | <el-form :model="outParams" label-position="left"> |
|---|
| | | <el-table |
|---|
| | | :height="250" |
|---|
| | | :max-height="250" |
|---|
| | | :row-class-name="onTableRowClassName" |
|---|
| | | :row-style="{height:0+'px'}" |
|---|
| | | :cell-style="{padding:8+'px',textAlign: 'center'}" |
|---|
| | | :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" |
|---|
| | | :stripe="true" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | :data="this.outTable.slice(0,outPageParams.length)" |
|---|
| | | > |
|---|
| | | <el-table-column property="addPerson" label="åºå·" /> |
|---|
| | | <el-table-column property="productCode" label="产åç¼ç " /> |
|---|
| | | <el-table-column property="productNameId" label="产åå称" /> |
|---|
| | | <el-table-column property="productModelId" label="è§æ ¼åå·" /> |
|---|
| | | <el-table-column property="unit" label="åä½" /> |
|---|
| | | <el-table-column property="incomingQuantity" label="å
¥åºæ°é" /> |
|---|
| | | <el-table-column property="addPerson" label="å
¥åºäºº" /> |
|---|
| | | <!-- <el-table-column property="address" label="å
¥åºæ¥æ"></el-table-column> --> |
|---|
| | | </el-table> |
|---|
| | | <div :style="{display: 'flex',justifyContent:'center',marginTop: '10px'}"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="outPageParams.pageNo" |
|---|
| | | :page-sizes="[3, 4, 5, 6]" |
|---|
| | | :page-size="outPageParams.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="outTable.length" |
|---|
| | | @size-change="outHandleSizeChange" |
|---|
| | | @current-change="outHandleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="orderFormVisible = true">çææ¼è¿å</el-button> |
|---|
| | | <el-button @click="outFormVisible = false">å æ¶</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog title="æ¼è¿åæå°" :visible.sync="orderFormVisible" @close="orderFormClose"> |
|---|
| | | <div id="order"> |
|---|
| | | <el-form label-position="right" :model="orderParams"> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="订åå·:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.orderNumber" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="æ¼è¿åç¼å·:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.escortNoteNumber" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="客æ·è®¢åå·:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.customerOrderNumber" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="åè´§æ¥æ:" :label-width="formLabelWidth"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="orderParams.createTime" |
|---|
| | | format="yyyy-MM-dd HH:mm" |
|---|
| | | type="datetime" |
|---|
| | | placeholder="éæ©æ¥ææ¶é´" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="客æ·å称:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.customerName" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="å货人:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.consignor" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="å°è´§å°å:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.arrivalAddress" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="æ¶è´§è系人:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.receivingContact" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="ææºå·:" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.cellPhoneNumber" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | |
|---|
| | | <el-form-item> |
|---|
| | | <el-table |
|---|
| | | :row-class-name="onTableRowClassName" |
|---|
| | | :row-style="{height:0+'px'}" |
|---|
| | | :cell-style="{padding:8+'px',textAlign: 'center'}" |
|---|
| | | :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" |
|---|
| | | :stripe="true" |
|---|
| | | :border="true" |
|---|
| | | :data="outTable" |
|---|
| | | > |
|---|
| | | <el-table-column property="productName" label="产åå称" /> |
|---|
| | | <el-table-column property="productModel" label="è§æ ¼åå·" /> |
|---|
| | | <el-table-column property="unit" label="åä½" /> |
|---|
| | | <el-table-column property="incomingQuantity" label="ååºæ°é" /> |
|---|
| | | </el-table> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="goToPrint">æ å°</el-button> |
|---|
| | | <el-button @click="orderFormVisible = false">å æ¶</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog title="æ¼è¿åæå°" :visible.sync="templateOrderVisible" @close="templateOrderClose"> |
|---|
| | | <div id="templateOrder" class="templateOrder"> |
|---|
| | | <h3>æ¼è¿å</h3> |
|---|
| | | <div class="templateOrder-main"> |
|---|
| | | <div class="main-row"> |
|---|
| | | <div class="flex-2">订åå·ï¼</div> |
|---|
| | | <div class="flex-8">{{ orderParams.orderNumber }}</div> |
|---|
| | | <div class="flex-2">æ¼è¿åç¼å·ï¼</div> |
|---|
| | | <div class="flex-8">{{ orderParams.escortNoteNumber }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="main-row"> |
|---|
| | | <div class="flex-2">客æ·è®¢åå·ï¼</div> |
|---|
| | | <div class="flex-8">{{ orderParams.customerOrderNumber }}</div> |
|---|
| | | <div class="flex-2">åè´§æ¥æï¼</div> |
|---|
| | | <div class="flex-8">{{ orderParams.createTime }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="main-row"> |
|---|
| | | <div class="flex-2">客æ·å称ï¼</div> |
|---|
| | | <div class="flex-8">{{ orderParams.customerName }}</div> |
|---|
| | | <div class="flex-2">å货人ï¼</div> |
|---|
| | | <div class="flex-8">{{ orderParams.consignor }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="main-row"> |
|---|
| | | <div class="flex-2">å°è´§å°åï¼</div> |
|---|
| | | <div class="flex-18">{{ orderParams.arrivalAddress }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="main-row"> |
|---|
| | | <div class="flex-2">æ¶è´§è系人ï¼</div> |
|---|
| | | <div class="flex-18">{{ orderParams.receivingContact }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="main-row"> |
|---|
| | | <div class="flex-2">ææºå·ï¼</div> |
|---|
| | | <div class="flex-18">{{ orderParams.cellPhoneNumber }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="main-row"> |
|---|
| | | <!-- <div class="flex-2">ææºå·</div> --> |
|---|
| | | <div class="flex-18" :style="{'textAlign': 'center'}"> |
|---|
| | | <h4>产åå表</h4> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="main-row"> |
|---|
| | | <div class="flex-4">产åå称</div> |
|---|
| | | <div class="flex-4">è§æ ¼åå·</div> |
|---|
| | | <div class="flex-4">åä½</div> |
|---|
| | | <div class="flex-4">åè´§æ°é</div> |
|---|
| | | </div> |
|---|
| | | <div v-for="item in outTable" :key="item.id" class="main-row"> |
|---|
| | | <div class="flex-4">{{ item.productName }}</div> |
|---|
| | | <div class="flex-4">{{ item.productModel }}</div> |
|---|
| | | <div class="flex-4">{{ item.unit }}</div> |
|---|
| | | <div class="flex-4">{{ item.incomingQuantity }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button v-print="printObj" type="primary">æ模æ¿æå°</el-button> |
|---|
| | | <el-button @click="templateOrderVisible = false">å æ¶</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getList } from '@/api/table' |
|---|
| | | import { getList, selectCacheOfIn, outOperation, outFile } from '@/api/addOperation' |
|---|
| | | import { selectAllName } from '@/api/productName' |
|---|
| | | import { selectAllModel } from '@/api/productModel' |
|---|
| | | import TableSearch from '@/components/TableSearch' |
|---|
| | | import { mapGetters } from 'vuex' |
|---|
| | | export default { |
|---|
| | | filters: { |
|---|
| | | statusFilter(status) { |
|---|
| | |
|---|
| | | return statusMap[status] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: 'æè¿ä¸å¨', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | inType: '', |
|---|
| | | inStatus: '', |
|---|
| | | deptName: '', |
|---|
| | | statusType: {}, |
|---|
| | | queryParams: { |
|---|
| | | encode: '', |
|---|
| | | type: '', |
|---|
| | | depositor: '' |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | searchModel: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10 |
|---|
| | | }, |
|---|
| | | tableData: [{ |
|---|
| | | date: '2016-05-02', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1518 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-04', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1517 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-01', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1519 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-03', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1516 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-03', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1516 å¼' |
|---|
| | | }, { |
|---|
| | | date: '2016-05-03', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1516 å¼' |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.fetchData() |
|---|
| | | }, |
|---|
| | | components: { |
|---|
| | | TableSearch |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | templateOrderVisible: false, |
|---|
| | | outFile, |
|---|
| | | printObj: { |
|---|
| | | id: 'templateOrder', // æå°çåºå |
|---|
| | | // preview: true, // é¢è§å·¥å
·æ¯å¦å¯ç¨ |
|---|
| | | previewTitle: 'æå°æ¼è¿å', // é¢è§é¡µé¢çæ é¢ |
|---|
| | | previewBeforeOpenCallback(vue) { |
|---|
| | | console.log('æ£å¨å è½½é¢è§çªå£') |
|---|
| | | }, |
|---|
| | | previewOpenCallback(vue) { |
|---|
| | | console.log('å·²ç»å è½½å®é¢è§çªå£') |
|---|
| | | }, |
|---|
| | | clickMounted: (vue) => { |
|---|
| | | console.log('触åç¹å»æå°åè°') |
|---|
| | | vue.isShowPrint = true // å¼¹æ¡æ¾ç¤ºæ¡ç |
|---|
| | | }, |
|---|
| | | beforeOpenCallback(vue) { |
|---|
| | | console.log('æå¼ä¹å', vue.barcodeNum) |
|---|
| | | }, |
|---|
| | | openCallback(vue) { |
|---|
| | | // let time =vue.orderParams.createTime |
|---|
| | | // vue.orderParams.createTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}` |
|---|
| | | // vue.orderParams.listId = vue.outCodeTable |
|---|
| | | // vue.orderParams.outPerson = vue.name |
|---|
| | | // outOperation(vue.orderParams).then((res) => { |
|---|
| | | // vue.$message.success("æååºåº") |
|---|
| | | // vue.isShowPrint = false // å
³éæ¡ç æ¾ç¤ºå¼¹æ¡ |
|---|
| | | // }) |
|---|
| | | console.log('æ§è¡äºæå°', vue.barcodeNum) |
|---|
| | | }, |
|---|
| | | clickMounted(vue) { |
|---|
| | | console.log(1111) |
|---|
| | | console.log(vue.orderParams.createTime) |
|---|
| | | outOperation({ ...vue.orderParams, outPerson: vue.name, listCode: vue.outCodeTable }).then((res) => { |
|---|
| | | vue.orderFormVisible = false |
|---|
| | | vue.outCodeTable = [] |
|---|
| | | vue.outTable = [] |
|---|
| | | vue.tableData = [] |
|---|
| | | vue.fetchData() |
|---|
| | | console.log('æ¸
空æ°æ®ï¼åæ¶å·æ°æ°æ®') |
|---|
| | | vue.$message.success('æååºåº') |
|---|
| | | vue.fetchData() |
|---|
| | | vue.isShowPrint = false // å
³éæ¡ç æ¾ç¤ºå¼¹æ¡ |
|---|
| | | }, () => { |
|---|
| | | vue.$message.err('请éæ°æå°') |
|---|
| | | }).finally(() => { |
|---|
| | | vue.templateOrderVisible = false |
|---|
| | | vue.orderParams = {} |
|---|
| | | }) |
|---|
| | | |
|---|
| | | console.log('æ§è¡äºæå°', vue.barcodeNum) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | outPageParams: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 3 |
|---|
| | | }, |
|---|
| | | isMerge: false, |
|---|
| | | outTable: [], |
|---|
| | | outCodeTable: [], |
|---|
| | | outParams: {}, |
|---|
| | | outFormVisible: false, |
|---|
| | | getList, |
|---|
| | | total: 0, |
|---|
| | | options: [], |
|---|
| | | searchModel: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10, |
|---|
| | | productModel: '', |
|---|
| | | endTime: '', |
|---|
| | | startTime: '' |
|---|
| | | }, |
|---|
| | | formLabelWidth: '120px', |
|---|
| | | orderFormVisible: false, |
|---|
| | | orderParams: { |
|---|
| | | orderNumber: '', |
|---|
| | | escortNoteNumber: '', |
|---|
| | | customerOrderNumber: '', |
|---|
| | | createTime: '', |
|---|
| | | customerName: '', |
|---|
| | | consignor: '', |
|---|
| | | arrivalAddress: '', |
|---|
| | | receivingContact: '', |
|---|
| | | cellPhoneNumber: '' |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | tableData: [], |
|---|
| | | contentTable: [], |
|---|
| | | isScan: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | isScan(to) { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | |
|---|
| | | this.fetchData() |
|---|
| | | this.setOptions() |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | window.document.onkeypress = null |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | templateOrderClose() { |
|---|
| | | this.orderFormClose() |
|---|
| | | }, |
|---|
| | | orderFormClose() { |
|---|
| | | // å
³éæå°æ¼è¿åè¾å
¥å¼¹çªæ¸
空æ°æ® |
|---|
| | | for (const key in this.orderParams) { |
|---|
| | | this.orderParams[key] = '' |
|---|
| | | } |
|---|
| | | // this.outTable = [] |
|---|
| | | }, |
|---|
| | | goToPrint() { |
|---|
| | | let ok = false |
|---|
| | | for (const key in this.orderParams) { |
|---|
| | | if (!this.orderParams[key]) { |
|---|
| | | ok = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (ok) { |
|---|
| | | return this.$message.error('请填åå®æ´åæ°') |
|---|
| | | } |
|---|
| | | |
|---|
| | | console.log('éè¦æå°çåæ°', this.orderParams) |
|---|
| | | const time = this.orderParams.createTime |
|---|
| | | this.orderParams.createTime = `${time.getFullYear()}-${time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1}-${time.getDate() < 10 ? '0' + time.getDate() : time.getDate()} ${time.getHours() < 10 ? '0' + time.getHours() : time.getHours()}:${time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()}` |
|---|
| | | console.log('éè¦æå°çä¸è¥¿==>', this.outTable) |
|---|
| | | // this.orderFormVisible = false |
|---|
| | | this.templateOrderVisible = true |
|---|
| | | }, |
|---|
| | | merge() { |
|---|
| | | this.isMerge = !this.isMerge |
|---|
| | | if (this.isMerge) { |
|---|
| | | this.contentTable = JSON.parse(JSON.stringify(this.tableData)) |
|---|
| | | } else { |
|---|
| | | this.tableData = JSON.parse(JSON.stringify(this.contentTable)) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.tableData = this.tableData.reduce((arr, next) => { |
|---|
| | | for (const item of arr) { |
|---|
| | | if (item.productModel === next.productModel) { |
|---|
| | | item.children.push(next.id) |
|---|
| | | item.incomingQuantity = item.incomingQuantity + next.incomingQuantity |
|---|
| | | return arr |
|---|
| | | } |
|---|
| | | } |
|---|
| | | next.children = [next.id] |
|---|
| | | arr.push(next) |
|---|
| | | return arr |
|---|
| | | // arr.push(next) |
|---|
| | | }, []) |
|---|
| | | console.log(this.tableData) |
|---|
| | | }, |
|---|
| | | printOrder() { |
|---|
| | | console.log(this.outCodeTable, this.outTable) |
|---|
| | | this.orderFormVisible = true |
|---|
| | | }, |
|---|
| | | addScanMonitor() { |
|---|
| | | window.document.onkeypress = e => { |
|---|
| | | console.log(e) |
|---|
| | | if (window.event) { // IE |
|---|
| | | this.nextCode = e.keyCode |
|---|
| | | } else if (e.which) { // Netscape/Firefox/Opera |
|---|
| | | this.nextCode = e.which |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (e.which === 13) { // é®çå车äºä»¶ |
|---|
| | | // if (this.code.length < 3) return // æ«ç æªçé度å¾å¿«ï¼æå¨è¾å
¥çæ¶é´ä¸ä¼è®©codeçé¿åº¦å¤§äº2ï¼æ以è¿éä¸ä¼å¯¹æ«ç æªææ |
|---|
| | | console.log(new Date().getTime()) |
|---|
| | | if (new Date().getTime() - this.lastTime > 30) { |
|---|
| | | return this.$message.error('æ«ç æ¶ä¸å¯éè¿é®çè¾å
¥') |
|---|
| | | } |
|---|
| | | // if (this.code.length < 3) return // æ«ç æªçé度å¾å¿«ï¼æå¨è¾å
¥çæ¶é´ä¸ä¼è®©codeçé¿åº¦å¤§äº2ï¼æ以è¿éä¸ä¼å¯¹æ«ç æªææ |
|---|
| | | console.log('æ«ç ç»æ,æ¡å½¢ç ï¼', this.code) |
|---|
| | | for (const item of this.tableData) { |
|---|
| | | if (item.id == this.code) { |
|---|
| | | this.$message.error('请å¿éå¤æ«æ') |
|---|
| | | this.handleSubmitScanning() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // åéè¯·æ± |
|---|
| | | selectCacheOfIn({ code: this.code }).then(res => { |
|---|
| | | this.$message.success(`${this.code}æ«ææå`) |
|---|
| | | const { data } = res |
|---|
| | | if (data) this.tableData.push(data) |
|---|
| | | }) |
|---|
| | | this.scanningForm.scanCode = this.code |
|---|
| | | this.lastCode = '' |
|---|
| | | this.lastTime = '' |
|---|
| | | this.handleSubmitScanning() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.nextTime = new Date().getTime() |
|---|
| | | if (!this.lastTime && !this.lastCode) { |
|---|
| | | this.code = '' // æ¸
空ä¸æ¬¡çæ¡å½¢ç |
|---|
| | | // 继ç»æ«æä¸ä¸æ¡åå
³éå¼¹çª |
|---|
| | | // this.handleCloseTipsVisible() |
|---|
| | | this.code = this.code + '' + e.key |
|---|
| | | console.log('æ«ç å¼å§---', this.code) |
|---|
| | | } |
|---|
| | | if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // å½æ«ç åækeypressäºä»¶æ¶,é²æ¢é¦å缺失 |
|---|
| | | this.code = e.key |
|---|
| | | console.log('é²æ¢é¦å缺失ããã', this.code) |
|---|
| | | } else if (this.lastCode && this.lastTime) { |
|---|
| | | this.code = this.code + '' + e.key |
|---|
| | | console.log('æ«ç ä¸ããã', this.code) |
|---|
| | | } |
|---|
| | | this.lastCode = this.nextCode |
|---|
| | | this.lastTime = this.nextTime |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | handleSelectionChange(val) { |
|---|
| | | if (this.isMerge) { |
|---|
| | | console.log(val) |
|---|
| | | const arrChildren = val.map((item) => item.children) |
|---|
| | | console.log(arrChildren) |
|---|
| | | this.outCodeTable = arrChildren.reduce((arr, next) => { |
|---|
| | | arr = [...arr, ...next] |
|---|
| | | return arr |
|---|
| | | }, []) |
|---|
| | | console.log(this.contentTable, this.outCodeTable) |
|---|
| | | this.contentTable.forEach(item => { |
|---|
| | | if (this.outCodeTable.indexOf(item.id) > -1) { |
|---|
| | | this.outTable.push(item) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.outTable = val |
|---|
| | | this.outCodeTable = this.outTable.map(item => item.id) |
|---|
| | | } |
|---|
| | | console.log(this.outTable, this.outCodeTable) |
|---|
| | | }, |
|---|
| | | scan(e) { |
|---|
| | | console.log('å¼å§æ«ç åºåº') |
|---|
| | | this.$message.success('请å¼å§æ«ç åºåº') |
|---|
| | | this.tableData = [] |
|---|
| | | this.addScanMonitor() |
|---|
| | | e.srcElement.blur() |
|---|
| | | }, |
|---|
| | | async setOptions() { |
|---|
| | | const { data: nameRes } = await selectAllName() |
|---|
| | | // console.log(nameRes) |
|---|
| | | const nameArr = nameRes.productNames.map(item => { |
|---|
| | | return { value: item.id, label: item.productName } |
|---|
| | | }) |
|---|
| | | for (const nameItem of nameArr) { |
|---|
| | | const { data } = await selectAllModel({ productNameId: nameItem.value }) |
|---|
| | | |
|---|
| | | this.options = [...this.options, ...data.models] |
|---|
| | | /* nameItem.children = data.models.map(item => { |
|---|
| | | return { value: item.id, label: item.productModel } |
|---|
| | | }) */ |
|---|
| | | } |
|---|
| | | this.options = this.options.map(item => { |
|---|
| | | return { label: item.productModel, value: item.productModel, productCode: item.productCode } |
|---|
| | | }) |
|---|
| | | // console.log(this.options) |
|---|
| | | }, |
|---|
| | | searchData(res) { |
|---|
| | | console.log(res) |
|---|
| | | const { row, total, productModel, startTime, endTime } = res |
|---|
| | | this.tableData = row |
|---|
| | | this.total = total |
|---|
| | | this.searchModel.productModel = productModel |
|---|
| | | this.searchModel.startTime = startTime |
|---|
| | | this.searchModel.endTime = endTime |
|---|
| | | window.document.onkeypress = undefined |
|---|
| | | }, |
|---|
| | | onTableRowClassName({ row, rowIndex }) { |
|---|
| | | if (rowIndex % 2 != 0) { |
|---|
| | | return 'onAcitve' |
|---|
| | | } else { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | fetchData() { |
|---|
| | | this.listLoading = true |
|---|
| | | getList().then(response => { |
|---|
| | | this.list = response.data.items |
|---|
| | | const obj = {} |
|---|
| | | const arr = Object.keys(this.searchModel).filter(key => this.searchModel[key]) |
|---|
| | | arr.forEach(item => obj[item] = this.searchModel[item]) |
|---|
| | | getList(obj).then(response => { |
|---|
| | | this.tableData = response.data.row |
|---|
| | | this.total = response.data.total |
|---|
| | | this.listLoading = false |
|---|
| | | // console.log(this.tableData) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleSizeChange(val) { |
|---|
| | |
|---|
| | | }, |
|---|
| | | handleCurrentChange(val) { |
|---|
| | | console.log(`å½å页: ${val}`) |
|---|
| | | }, |
|---|
| | | outHandleSizeChange(val) { |
|---|
| | | console.log(`æ¯é¡µ ${val} æ¡`) |
|---|
| | | }, |
|---|
| | | outHandleCurrentChange(val) { |
|---|
| | | console.log(`å½å页: ${val}`) |
|---|
| | | this.outPageParams.pageNo = val |
|---|
| | | // this.fetchData() |
|---|
| | | // console.log() |
|---|
| | | |
|---|
| | | // console.log(this.addTable.slice((this.outPageParams.pageSize * (val - 1)), (this.outPageParams.pageSize * (val - 1)) + this.outPageParams.pageSize)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters([ |
|---|
| | | 'sidebar', |
|---|
| | | 'avatar', |
|---|
| | | 'name', |
|---|
| | | 'allTab' |
|---|
| | | ]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../styles/variables.scss'; |
|---|
| | | .addOperation { |
|---|
| | | min-height: calc(100vh - 50px); |
|---|
| | | ::v-deep .el-table__header .el-checkbox{ |
|---|
| | | display:none; |
|---|
| | | } |
|---|
| | | ::v-deep .tableData .el-table__header th:nth-child(1) .cell::before{ |
|---|
| | | content: 'å¤é'; |
|---|
| | | } |
|---|
| | | .templateOrder{ |
|---|
| | | border: 1px solid #000; |
|---|
| | | padding: 8px; |
|---|
| | | >h3{ |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | &-main{ |
|---|
| | | border-top: 1px solid #000; |
|---|
| | | border-left: 1px solid #000; |
|---|
| | | .main-row{ |
|---|
| | | display: flex; |
|---|
| | | font-size: 12px; |
|---|
| | | >div{ |
|---|
| | | border-bottom: 1px solid #000; |
|---|
| | | border-right: 1px solid #000; |
|---|
| | | height: 40px; |
|---|
| | | line-height: 20px; |
|---|
| | | padding: 10px; |
|---|
| | | // margin: 24px; |
|---|
| | | >h4{ |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .flex-2{ |
|---|
| | | min-width: 110px; |
|---|
| | | max-width: 110px; |
|---|
| | | text-align: right; |
|---|
| | | padding: 10px 6px; |
|---|
| | | } |
|---|
| | | .flex-4{ |
|---|
| | | flex: 1; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .flex-8{ |
|---|
| | | flex: 8; |
|---|
| | | } |
|---|
| | | .flex-18{ |
|---|
| | | flex: 18; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .outOperation { |
|---|
| | | min-height: calc(100vh - 100px); |
|---|
| | | padding: 25px; |
|---|
| | | background: $mainBg; |
|---|
| | | .addOperation-main{ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | .dialog-footer{ |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | } |
|---|
| | | .outOperation-main{ |
|---|
| | | background: #fff; |
|---|
| | | padding: 20px; |
|---|
| | | flex: 1; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | .main-top{} |
|---|
| | | .table-header{ |
|---|
| | | background: #6095FB; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .addOperation-foot{ |
|---|
| | | ::v-deep .el-table{ |
|---|
| | | flex: 1; |
|---|
| | | // display: flex; |
|---|
| | | // flex-direction: column; |
|---|
| | | ::v-deep .onAcitve td{ |
|---|
| | | background-color: #F2F2F2 !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .outOperation-foot{ |
|---|
| | | margin-top: 25px; |
|---|
| | | .el-pagination{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | justify-content: right; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="manual"> |
|---|
| | | æå¨åºåº |
|---|
| | | <div class="outOperation"> |
|---|
| | | <div class="outOperation-main"> |
|---|
| | | <el-row type="flex" align="middle" class="main-top"> |
|---|
| | | <el-col :span="2">åºåºå°è´¦</el-col> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <div class="table-search"> |
|---|
| | | <el-form |
|---|
| | | v-model="queryParams" |
|---|
| | | ref="queryForm" |
|---|
| | | size="small" |
|---|
| | | :inline="true" |
|---|
| | | label-width="68px" |
|---|
| | | > |
|---|
| | | <el-form-item label="æ¥æï¼"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="queryParams.date" |
|---|
| | | type="datetimerange" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | range-separator="è³" |
|---|
| | | start-placeholder="å¼å§æ¥æ" |
|---|
| | | end-placeholder="ç»ææ¥æ" |
|---|
| | | align="right" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="客æ·å称"> |
|---|
| | | <el-select v-model="queryParams.type" placeholder="è§æ ¼åå·" clearable style="width: 240px"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in options" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value"> |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item> |
|---|
| | | <el-button type="primary" icon="el-icon-search" size="mini" |
|---|
| | | @click="search">æç´¢</el-button> |
|---|
| | | <el-button icon="el-icon-refresh" size="mini">导åº</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-table |
|---|
| | | :stripe="true" |
|---|
| | | :data="tableData" |
|---|
| | | :cell-style="{ textAlign: 'center' }" |
|---|
| | | :header-cell-style="{ textAlign: 'center' }" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | type="selection" |
|---|
| | | width="55"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="name" |
|---|
| | | label="产åç¼ç "> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="address" |
|---|
| | | label="产åå称"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="è§æ ¼åå·"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="åä½"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="åºåºæ°é"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="å货人"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="date" |
|---|
| | | label="åºåºæ¥æ"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <div class="outOperation-foot"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="searchModel.pageNo" |
|---|
| | | :page-sizes="[10, 15, 20, 25]" |
|---|
| | | :page-size="searchModel.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | <el-dialog title="æ¼è¿åæå°" :visible.sync="orderFormVisible"> |
|---|
| | | <el-form label-position="left" :model="orderParams"> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="订åå·" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.number" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="æ¼è¿åç¼å·" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.noId" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="客æ·è®¢åå·" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.clientNumber" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="åè´§æ¥æ" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.date" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="客æ·å称" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.clientName" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="å货人" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.consigner" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="å°è´§å°å" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.address" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="æ¶è´§è系人" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.consignee" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item label="ææºå·" :label-width="formLabelWidth"> |
|---|
| | | <el-input v-model="orderParams.phoneNumber" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item> |
|---|
| | | <el-table :data="tableData" header-row-class-name="table-header"> |
|---|
| | | <el-table-column property="date" label="产åå称" ></el-table-column> |
|---|
| | | <el-table-column property="name" label="è§æ ¼åå·"></el-table-column> |
|---|
| | | <el-table-column property="address" label="åä½"></el-table-column> |
|---|
| | | <el-table-column property="number" label="ååºæ°é"></el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer" > |
|---|
| | | <el-button type="primary" @click="print">ç¡® å®</el-button> |
|---|
| | | <el-button @click="addFormVisible = false" >å æ¶</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getList } from '@/api/table' |
|---|
| | | import TableSearch from '@/components/TableSearch' |
|---|
| | | export default { |
|---|
| | | |
|---|
| | | filters: { |
|---|
| | | statusFilter(status) { |
|---|
| | | const statusMap = { |
|---|
| | | published: 'success', |
|---|
| | | draft: 'gray', |
|---|
| | | deleted: 'danger' |
|---|
| | | } |
|---|
| | | return statusMap[status] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | formLabelWidth: '120px', |
|---|
| | | orderFormVisible: false, |
|---|
| | | orderParams: { |
|---|
| | | number: '',//订åå· |
|---|
| | | noId: '', //æ¼è¿åç¼å· |
|---|
| | | orderParams: '', //客æ·è®¢åå· |
|---|
| | | date: '', |
|---|
| | | clientName: '', |
|---|
| | | consigner: '', |
|---|
| | | address: '', |
|---|
| | | consignee: '', |
|---|
| | | phoneNumber: '' |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | searchModel: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10 |
|---|
| | | }, |
|---|
| | | tableData: [ |
|---|
| | | { |
|---|
| | | date: '2016-05-02', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1518 å¼', |
|---|
| | | number: '' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | date: '2016-05-02', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1518 å¼', |
|---|
| | | number: '' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | date: '2016-05-02', |
|---|
| | | name: 'çå°è', |
|---|
| | | address: 'ä¸æµ·å¸æ®éåºéæ²æ±è·¯ 1518 å¼', |
|---|
| | | number: '' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | queryParams: { |
|---|
| | | date: '', |
|---|
| | | type: '' |
|---|
| | | }, |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: 'æè¿ä¸å¨', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | options: [ |
|---|
| | | { |
|---|
| | | value: '第ä¸ç§åå·', |
|---|
| | | label: '第ä¸ç§åå·' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.fetchData() |
|---|
| | | }, |
|---|
| | | components: { |
|---|
| | | TableSearch |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | print() { |
|---|
| | | //è´§è¿åæå°åæ° |
|---|
| | | console.log(this.orderParams) |
|---|
| | | }, |
|---|
| | | fetchData() { |
|---|
| | | this.listLoading = true |
|---|
| | | getList().then(response => { |
|---|
| | | this.list = response.data.items |
|---|
| | | this.listLoading = false |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleSizeChange(val) { |
|---|
| | | console.log(`æ¯é¡µ ${val} æ¡`) |
|---|
| | | }, |
|---|
| | | handleCurrentChange(val) { |
|---|
| | | console.log(`å½å页: ${val}`) |
|---|
| | | }, |
|---|
| | | search() { |
|---|
| | | // "æ¥è¯¢æ¡ä»¶ï¼"æ¶é´éè¦æ ¼å¼åæyyyy-mm-dd hh-mm-ss |
|---|
| | | console.log(this.queryParams) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../../styles/variables.scss'; |
|---|
| | | .outOperation { |
|---|
| | | min-height: calc(100vh - 50px); |
|---|
| | | padding: 25px; |
|---|
| | | background: $mainBg; |
|---|
| | | .dialog-footer{ |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .outOperation-main{ |
|---|
| | | background: #fff; |
|---|
| | | padding: 20px; |
|---|
| | | .main-top{} |
|---|
| | | .table-header{ |
|---|
| | | background: #6095FB; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .outOperation-foot{ |
|---|
| | | margin-top: 25px; |
|---|
| | | .el-pagination{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div style="padding:30px;"> |
|---|
| | | åºåå°è´¦ |
|---|
| | | <el-alert :closable="false" title="menu 2" /> |
|---|
| | | <div class="out-bound"> |
|---|
| | | <div class="out-bound-main"> |
|---|
| | | <el-row type="flex" align="middle" class="main-top"> |
|---|
| | | <el-col :span="2" :style="{color:'#409EFF'}"> <span class="iconfont icon-taizhangzhangbuxinxichaxun" /> æ¶åå管ç</el-col> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <TableSearch :excel-name="'æ¶åå管ç表'" :show="false" :file="file" :get-list="getInventoryList" :search-data="searchData" :search-params="searchModel" /> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="2"> |
|---|
| | | <!-- <el-button @click="goToOutboundLedger" icon="iconfont icon-caiwushoufacunguanli">æ¥çå°è´¦</el-button> --> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-table |
|---|
| | | :row-class-name="onTableRowClassName" |
|---|
| | | :row-style="{height:0+'px'}" |
|---|
| | | :cell-style="{padding:8+'px',textAlign: 'center'}" |
|---|
| | | :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" |
|---|
| | | :stripe="true" |
|---|
| | | :data="tableData" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | > |
|---|
| | | <!-- <el-table-column |
|---|
| | | type="selection" |
|---|
| | | width="55"> |
|---|
| | | </el-table-column> --> |
|---|
| | | <el-table-column |
|---|
| | | type="index" |
|---|
| | | label="åºå·" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productCode" |
|---|
| | | label="产åç¼ç " |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productName" |
|---|
| | | label="产åå称" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productModel" |
|---|
| | | label="è§æ ¼åå·" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productUnit" |
|---|
| | | label="åä½" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="beginningInventory" |
|---|
| | | label="åæåºåæ°é" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="issueInCurrentPeriod" |
|---|
| | | label="æ¬æåºåºæ°é" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="currentPeriod" |
|---|
| | | label="æ¬æå
¥åºæ°é" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="closingInventory" |
|---|
| | | label="ææ«åºåæ°é" |
|---|
| | | /> |
|---|
| | | <!-- <el-table-column |
|---|
| | | label="æä½"> |
|---|
| | | |
|---|
| | | <el-button size="mini" type="text" @click="delItem()">å é¤</el-button> |
|---|
| | | </el-table-column> --> |
|---|
| | | </el-table> |
|---|
| | | <div class="out-bound-foot"> |
|---|
| | | <el-pagination |
|---|
| | | :current-page="searchModel.pageNo" |
|---|
| | | :page-sizes="[10, 15, 20, 25]" |
|---|
| | | :page-size="searchModel.pageSize" |
|---|
| | | layout="->, total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { getInventoryList, file } from '@/api/outbound' |
|---|
| | | import TableSearch from '@/components/TableSearch' |
|---|
| | | export default { |
|---|
| | | filters: { |
|---|
| | | statusFilter(status) { |
|---|
| | | const statusMap = { |
|---|
| | | published: 'success', |
|---|
| | | draft: 'gray', |
|---|
| | | deleted: 'danger' |
|---|
| | | } |
|---|
| | | return statusMap[status] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | components: { |
|---|
| | | TableSearch |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | file, |
|---|
| | | getInventoryList, |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: 'æè¿ä¸å¨', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date() |
|---|
| | | const start = new Date() |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
|---|
| | | picker.$emit('pick', [start, end]) |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | inType: '', |
|---|
| | | inStatus: '', |
|---|
| | | deptName: '', |
|---|
| | | statusType: {}, |
|---|
| | | queryParams: { |
|---|
| | | encode: '', |
|---|
| | | type: '', |
|---|
| | | depositor: '' |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | searchModel: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10, |
|---|
| | | endTime: '', |
|---|
| | | startTime: '' |
|---|
| | | }, |
|---|
| | | tableData: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.fetchData() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | delItem() { |
|---|
| | | console.log('å é¤') |
|---|
| | | }, |
|---|
| | | searchData(res) { |
|---|
| | | console.log(res) |
|---|
| | | const { row, total, startTime, endTime } = res |
|---|
| | | this.tableData = row |
|---|
| | | this.total = total |
|---|
| | | this.searchModel.startTime = startTime |
|---|
| | | this.searchModel.endTime = endTime |
|---|
| | | }, |
|---|
| | | onTableRowClassName({ row, rowIndex }) { |
|---|
| | | if (rowIndex % 2 != 0) { |
|---|
| | | return 'onAcitve' |
|---|
| | | } else { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | goToOutboundLedger() { |
|---|
| | | }, |
|---|
| | | fetchData() { |
|---|
| | | this.listLoading = true |
|---|
| | | this.listLoading = true |
|---|
| | | const obj = {} |
|---|
| | | const arr = Object.keys(this.searchModel).filter(key => this.searchModel[key]) |
|---|
| | | arr.forEach(item => obj[item] = this.searchModel[item]) |
|---|
| | | console.log(obj) |
|---|
| | | getInventoryList(obj).then(response => { |
|---|
| | | this.tableData = response.data.row |
|---|
| | | this.total = response.data.total |
|---|
| | | this.listLoading = false |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleSizeChange(val) { |
|---|
| | | console.log(`æ¯é¡µ ${val} æ¡`) |
|---|
| | | }, |
|---|
| | | handleCurrentChange(val) { |
|---|
| | | console.log(`å½å页: ${val}`) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../styles/variables.scss'; |
|---|
| | | |
|---|
| | | .out-bound { |
|---|
| | | min-height: calc(100vh - 100px); |
|---|
| | | padding: 25px; |
|---|
| | | background: $mainBg; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | .out-bound-main{ |
|---|
| | | background: #fff; |
|---|
| | | flex: 1; |
|---|
| | | padding: 20px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | // .el-table--striped .el-table__body tr.el-table__row--striped td { |
|---|
| | | // background: #F2F2F2 !important; |
|---|
| | | // } |
|---|
| | | .main-top{} |
|---|
| | | .table-header{ |
|---|
| | | background: #6095FB; |
|---|
| | | } |
|---|
| | | .el-table{ |
|---|
| | | flex: 1; |
|---|
| | | ::v-deep .onAcitve td{ |
|---|
| | | background-color: #F2F2F2 !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .out-bound-foot{ |
|---|
| | | margin-top: 25px; |
|---|
| | | .el-pagination{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: right; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // /deep/.el-table--striped .el-table__body tr.el-table__row--striped td { |
|---|
| | | // background: #1e116d; |
|---|
| | | // } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="systemDict"> |
|---|
| | | è¿æ¯åå
¸ç®¡ç |
|---|
| | | <vue-barcode |
|---|
| | | :value="value()" |
|---|
| | | >ä¸æ¯ævue-barcode</vue-barcode> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | import VueBarcode from 'vue-barcode' |
|---|
| | | |
|---|
| | | export default{ |
|---|
| | | components: { VueBarcode }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | //æ¡å½¢ç å
容 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | value() { |
|---|
| | | let obj = {name:'jack'} |
|---|
| | | return JSON.stringify(obj) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="system-user"> |
|---|
| | | <SettingTitle left="ä½ çç¨æ·é
ç½®" right="å°å¾æ "></SettingTitle> |
|---|
| | | <div class="user-info"></div> |
|---|
| | | <SettingTitle v-if="authority" left="ä½ çç¨æ·é
ç½®" :click-fun="showAdd" right="æ°å¢ç¨æ·" icon="el-icon-plus" /> |
|---|
| | | <SettingTitle v-else left="ä½ çç¨æ·é
ç½®" /> |
|---|
| | | <div class="user-info"> |
|---|
| | | <div class="info-avatar"> |
|---|
| | | <el-upload |
|---|
| | | :headers="{'X-Token':token}" |
|---|
| | | class="avatar-uploader" |
|---|
| | | :action="baseUrl+'/user/update'" |
|---|
| | | :show-file-list="false" |
|---|
| | | :on-success="handleAvatarSuccess" |
|---|
| | | > |
|---|
| | | <img v-if="avatar" :src="baseUrl+'/img'+avatar" class="avatar"> |
|---|
| | | <i v-else class="el-icon-plus avatar-uploader-icon" /> |
|---|
| | | </el-upload> |
|---|
| | | </div> |
|---|
| | | <div class="info-msg"> |
|---|
| | | <div>{{ msgInfo.name }}</div> |
|---|
| | | <div>è´¦å·ï¼{{ msgInfo.account }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="info-logout"> |
|---|
| | | <el-button type="primary" plain @click="logout">éåºç»å½</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="setting-list"> |
|---|
| | | <div v-for="(item,index) in serviceArr" :key="index" class="setting-item"> |
|---|
| | | <div class="item-icon iconfont" :class="item.icon" /> |
|---|
| | | <div class="item-msg">{{ item.name }}</div> |
|---|
| | | <div class="item-right" :class="item.right" @click="showDialog(item.name)" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- åæ¶ç¨æ·å表为0ä¹ä¸å±ç¤º --> |
|---|
| | | <template v-if="userList.length>1"> |
|---|
| | | <SettingTitle left="ç¨æ·å表" /> |
|---|
| | | <div class="setting-list"> |
|---|
| | | <div v-for="item in userList" v-if="name !== item.username" :key="item.id" class="setting-item"> |
|---|
| | | <div class="item-icon"> |
|---|
| | | <el-avatar :size="40" :src="baseUrl+'/img'+item.avatar" /> |
|---|
| | | </div> |
|---|
| | | <div class="item-msg">{{ item.username }}</div> |
|---|
| | | <div class="item-right"> |
|---|
| | | <el-button v-if="authority" type="text" :style="{color:'red'}" @click="clear(item)">å é¤</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <template> |
|---|
| | | <SettingTitle left="è¡¨æ ¼" /> |
|---|
| | | <div class="setting-list"> |
|---|
| | | <div class="setting-item"> |
|---|
| | | <div class="item-icon iconfont icon-biaogeziduan" /> |
|---|
| | | <div class="item-msg">ä¿®æ¹æ¥ç表头</div> |
|---|
| | | <el-dropdown trigger="click" @command="showTableDialog($event)"> |
|---|
| | | <span class="el-dropdown-link"> |
|---|
| | | <i class="el-icon-arrow-down el-icon--right" /> |
|---|
| | | </span> |
|---|
| | | <el-dropdown-menu slot="dropdown"> |
|---|
| | | |
|---|
| | | <el-dropdown-item v-for="(item ,index) in allTab" :key="index" :command="item">{{ item.name }}</el-dropdown-item> |
|---|
| | | </el-dropdown-menu> |
|---|
| | | </el-dropdown> |
|---|
| | | <!-- <div class="item-right el-icon-arrow-down" @click="showDialog('ä¿®æ¹è¡¨å')"></div> --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <SettingTitle left="æ·»å åå·" /> |
|---|
| | | |
|---|
| | | <div class="setting-model"> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="4"> |
|---|
| | | <div :style="{display:'flex'}"> |
|---|
| | | <el-input |
|---|
| | | v-model="filterText" |
|---|
| | | placeholder="è¾å
¥å
³é®åè¿è¡è¿æ»¤" |
|---|
| | | /> |
|---|
| | | <!-- <el-button>æ·»å å称</el-button> --> |
|---|
| | | </div> |
|---|
| | | <el-tree |
|---|
| | | ref="tree" |
|---|
| | | :style="{marginTop:'20px'}" |
|---|
| | | class="filter-tree" |
|---|
| | | :data="treeData" |
|---|
| | | :props="defaultProps" |
|---|
| | | default-expand-all |
|---|
| | | :filter-node-method="filterNode" |
|---|
| | | > |
|---|
| | | <span slot-scope="{ node, data }" class="custom-tree-node"> |
|---|
| | | <div :style="{height:'100%', display:'flex',alignItems: 'center'}"> |
|---|
| | | <div :style="{marginRight: '8px',display:'flex',alignItem: 'center'}"> |
|---|
| | | <span>{{ node.label }}</span> |
|---|
| | | <span :style="{marginLeft: '20px',fontSize: '10px'}" class="edit el-icon-edit" @click="changeName(node,data)">ä¿®æ¹</span> |
|---|
| | | <span :style="{marginLeft: '20px',fontSize: '10px'}" class="edit el-icon-delete" @click="deleteName(node,data)" /> |
|---|
| | | </div> |
|---|
| | | <!-- 精度ä¸é« 导è´çé®é¢--> |
|---|
| | | </div> |
|---|
| | | </span> |
|---|
| | | </el-tree> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <div class="addName"> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <div :style="{display: 'flex'}"> |
|---|
| | | <el-input v-model="newName" :style="{marginRight: '8px'}" /> |
|---|
| | | <el-button @click="addNewName">æ·»å å称</el-button> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="14"> |
|---|
| | | <el-row :gutter="20"> |
|---|
| | | <el-col :span="4"> |
|---|
| | | |
|---|
| | | <el-select v-model="checkNameId" clearable placeholder="请éæ©"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in nameOptions" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="10"> |
|---|
| | | <el-input v-model="newModel" :style="{marginLeft: '8px'}" placeholder="请è¾å
¥åå·å称" /> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="10"> |
|---|
| | | <el-input v-model="newProductCode" :style="{marginLeft: '8px'}" placeholder="请è¾å
¥äº§åç¼ç " /> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="2"> |
|---|
| | | <el-button @click="addNewModel">æ·»å åå·</el-button> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | <el-table |
|---|
| | | class="tableData" |
|---|
| | | :height="450" |
|---|
| | | :max-height="450" |
|---|
| | | :row-class-name="onTableRowClassName" |
|---|
| | | :row-style="{height:0+'px'}" |
|---|
| | | :cell-style="{padding:8+'px',textAlign: 'center'}" |
|---|
| | | :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}" |
|---|
| | | :stripe="true" |
|---|
| | | :data="tableData" |
|---|
| | | :border="true" |
|---|
| | | header-row-class-name="table-header" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | type="index" |
|---|
| | | label="åºå·" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productCode" |
|---|
| | | label="产åç¼ç " |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productModel" |
|---|
| | | label="åå·å称" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="productName" |
|---|
| | | label="产åå称" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | label="æ´å¤æä½" |
|---|
| | | > |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button type="text" @click="changeModel(scope.row)">ä¿®æ¹</el-button> |
|---|
| | | <el-button type="text danger" @click="deleteModel(scope.row)">å é¤</el-button> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | <el-dialog class="changePassword" :visible.sync="passwordFormVisible" @close="handleClose('passwordParams')"> |
|---|
| | | <div slot="title" class="title"> |
|---|
| | | <span /> |
|---|
| | | <span>ä¿®æ¹å¯ç </span> |
|---|
| | | </div> |
|---|
| | | <el-form ref="passwordParams" :model="passwordParams" :rules="passwordRules"> |
|---|
| | | <el-row> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item prop="oldPassword"> |
|---|
| | | <el-input v-model="passwordParams.oldPassword" :validate-event="false" show-password type="password" placeholder="请è¾å
¥æ§å¯ç " autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item prop="newPassword"> |
|---|
| | | <el-input v-model="passwordParams.newPassword" :validate-event="false" show-password type="password" placeholder="请è¾å
¥æ°å¯ç " autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="changePwd">ç¡® å®</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog class="tableHead" :visible.sync="tableFormVisible" @close="handleClose('userParams')"> |
|---|
| | | <div slot="title" class="title"> |
|---|
| | | <span /> |
|---|
| | | <span>ä¿®æ¹è¡¨å</span> |
|---|
| | | </div> |
|---|
| | | <el-form ref="userParams" :model="userParams"> |
|---|
| | | <el-row> |
|---|
| | | <el-col> |
|---|
| | | <el-checkbox-group v-model="checkList"> |
|---|
| | | <el-checkbox v-for="(item, index) in commandList" :key="index" :label="item" :checked="item.show" @change="changeCheck(!item.show,item)">{{ item.name }}</el-checkbox> |
|---|
| | | </el-checkbox-group> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="changeTable">ç¡® å®</el-button> |
|---|
| | | <!-- <el-button @click="tableFormVisible = false" >å æ¶</el-button> --> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog class="userInfo" title="个人èµæ" :visible.sync="infoFormVisible" @close="handleClose('addUserForm')"> |
|---|
| | | <div slot="title" class="title"> |
|---|
| | | <span /> |
|---|
| | | <span>个人èµæ</span> |
|---|
| | | </div> |
|---|
| | | <el-form ref="addUserForm" :model="infoParams" :rules="addUserRules"> |
|---|
| | | <el-row> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item prop="username"> |
|---|
| | | <el-input v-model="infoParams.username" placeholder="ç¨æ·å" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row> |
|---|
| | | <el-col> |
|---|
| | | <el-form-item prop="account"> |
|---|
| | | <el-input v-model="infoParams.account" placeholder="è´¦å·" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <el-row> |
|---|
| | | <el-col /> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="changeInfo">ç¡® å®</el-button> |
|---|
| | | <!-- <el-button @click="infoFormVisible = false" >å æ¶</el-button> --> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog class="addUser" :visible.sync="addVisible" @close="handleClose('addParams')"> |
|---|
| | | <div slot="title" class="title"> |
|---|
| | | <span /> |
|---|
| | | <span>æ°å¢ç¨æ·</span> |
|---|
| | | </div> |
|---|
| | | <el-form ref="addParams" label-position="left" label-width="80px" :model="addParams" :rules="addUserRules"> |
|---|
| | | |
|---|
| | | <el-form-item prop="username" label="ç¨æ·åï¼"> |
|---|
| | | <el-input v-model="addParams.username" placeholder="ç¨æ·å" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item prop="account" label="è´¦å·"> |
|---|
| | | <el-input v-model="addParams.account" placeholder="è´¦å·" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item prop="password" label="å¯ç ï¼"> |
|---|
| | | |
|---|
| | | <el-input v-model="addParams.password" placeholder="å¯ç " show-password type="password" autocomplete="off" /> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item prop="authority" label="身份ï¼"> |
|---|
| | | <el-select v-model="addParams.authority" placeholder="请éæ©èº«ä»½"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in powerOptions" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button type="primary" @click="addNewUser">ç¡® å®</el-button> |
|---|
| | | <!-- <el-button @click="infoFormVisible = false" >å æ¶</el-button> --> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | <el-dialog width="30%" handle-close-change-name-params- class="changeName" :visible.sync="changeNameVisible"> |
|---|
| | | |
|---|
| | | <div slot="title" class="title"> |
|---|
| | | <span /> |
|---|
| | | <span>ä¿®æ¹å称</span> |
|---|
| | | </div> |
|---|
| | | <el-form> |
|---|
| | | <el-form-item ref="changeNameParams" :model="changeNameParams"> |
|---|
| | | <el-input v-model="changeNameParams.productName" /> |
|---|
| | | </el-form-item> |
|---|
| | | <div :style="{display: 'flex'}"> |
|---|
| | | <el-button type="primary" :style="{flex:'1'}" @click="ConfirmChange">ç¡®å®ä¿®æ¹</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog handle-close-change-model-params- width="30%" class="changeModel" :visible.sync="changeModelVisible"> |
|---|
| | | <div slot="title" class="title"> |
|---|
| | | <span /> |
|---|
| | | <span>ä¿®æ¹åå·</span> |
|---|
| | | </div> |
|---|
| | | <el-form> |
|---|
| | | <el-form-item ref="changeModelParams" :model="changeModelParams"> |
|---|
| | | <el-input v-model="changeModelParams.productModel" placeholder="请è¾å
¥æ°åå·" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item :model="changeModelParams"> |
|---|
| | | <el-input v-model="changeModelParams.productCode" placeholder="请è¾å
¥ç¼ç " /> |
|---|
| | | </el-form-item> |
|---|
| | | <div :style="{display: 'flex'}"> |
|---|
| | | <el-button type="primary" :style="{flex:'1'}" @click="confirmChangeModel">ç¡®å®ä¿®æ¹</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { mapGetters } from 'vuex' |
|---|
| | | import { getInfo, addUser, getUserList, updateUserPwd, delUser, updateUserProfile } from '@/api/user' |
|---|
| | | import { selectAllName, addName, updateName, delName } from '@/api/productName' |
|---|
| | | import { selectAllModel, addModel, updateModel, delModel } from '@/api/productModel' |
|---|
| | | import { getToken } from '@/utils/auth' |
|---|
| | | import SettingTitle from '@/components/SettingTitle' |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | const validateAccount = (rule, value, callback) => { |
|---|
| | | const reg = /^(?=.*\d).{6,11}$/ |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('è´¦å·ç±6-10ä½æ°åç»æï¼è¯·è¾å
¥æ£ç¡®çè´¦å·ï¼')) |
|---|
| | | } else { |
|---|
| | | callback() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const validatePassword = (rule, value, callback) => { |
|---|
| | | // console.log(value) |
|---|
| | | const reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,12}$/ |
|---|
| | | // console.log(!reg.test(value)) |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('å¯ç å¿
é¡»æ¯ç±6-12ä½å
å«å¤§å°ååæ¯ï¼æ°åç»å')) |
|---|
| | | } else { |
|---|
| | | callback() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | changeNameVisible: false, |
|---|
| | | changeModelVisible: false, |
|---|
| | | changeNameParams: { |
|---|
| | | id: '', |
|---|
| | | productName: '' |
|---|
| | | }, |
|---|
| | | changeModelParams: { |
|---|
| | | }, |
|---|
| | | newModel: '', |
|---|
| | | newProductCode: '', |
|---|
| | | newName: '', |
|---|
| | | checkNameId: '', |
|---|
| | | nameOptions: [ |
|---|
| | | { |
|---|
| | | label: 'abc', |
|---|
| | | value: '1' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | tableData: [], |
|---|
| | | treeData: [], |
|---|
| | | defaultProps: { |
|---|
| | | children: 'children', |
|---|
| | | label: 'label' |
|---|
| | | }, |
|---|
| | | filterText: '', |
|---|
| | | addModelFormVisible: false, |
|---|
| | | addVisible: false, |
|---|
| | | powerOptions: [ |
|---|
| | | { |
|---|
| | | value: '1', |
|---|
| | | label: '管çå' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '0', |
|---|
| | | label: 'æ®éç¨æ·' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | addParams: { |
|---|
| | | account: '', |
|---|
| | | authority: '', |
|---|
| | | password: '', |
|---|
| | | username: '' |
|---|
| | | }, |
|---|
| | | checkList: [], |
|---|
| | | tableSelectVisible: false, |
|---|
| | | baseUrl: process.env.VUE_APP_BASE_API, |
|---|
| | | msgInfo: {}, |
|---|
| | | infoParams: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | infoFormVisible: false, |
|---|
| | | userParams: { |
|---|
| | | user: '', |
|---|
| | | power: '' |
|---|
| | | }, |
|---|
| | | tableFormVisible: false, |
|---|
| | | passwordParams: {}, |
|---|
| | | passwordFormVisible: false, |
|---|
| | | deptName: '', |
|---|
| | | queryParams: { |
|---|
| | | pageNum: 1, |
|---|
| | |
|---|
| | | deptId: undefined |
|---|
| | | }, |
|---|
| | | dateRange: [], |
|---|
| | | userList: null |
|---|
| | | serviceArr: [ |
|---|
| | | { name: 'ä¿®æ¹å¯ç ', icon: 'icon-mima', right: 'el-icon-arrow-right' }, |
|---|
| | | { name: '个人èµæ', icon: 'icon-gerenziliao', right: 'el-icon-arrow-right' } |
|---|
| | | ], |
|---|
| | | formLabelWidth: '120px', |
|---|
| | | userList: [], |
|---|
| | | commandList: [], |
|---|
| | | tableName: '', |
|---|
| | | addUserRules: { |
|---|
| | | account: [{ required: true, trigger: 'blur', validator: validateAccount }], |
|---|
| | | password: [{ required: true, trigger: 'blur', validator: validatePassword }] |
|---|
| | | }, |
|---|
| | | passwordRules: { |
|---|
| | | oldPassword: [{ required: true, validator: validatePassword }], |
|---|
| | | newPassword: [{ required: true, validator: validatePassword }] |
|---|
| | | }, |
|---|
| | | addNameParams: {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | filterText(val) { |
|---|
| | | this.$refs.tree.filter(val) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters([ |
|---|
| | | 'sidebar', |
|---|
| | | 'avatar', |
|---|
| | | 'name', |
|---|
| | | 'allTab', |
|---|
| | | 'authority', |
|---|
| | | 'token' |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.getUserInfo() |
|---|
| | | this.getAllUser() |
|---|
| | | this.setOptions() |
|---|
| | | }, |
|---|
| | | components: { |
|---|
| | | SettingTitle |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | handleClose(refName) { |
|---|
| | | // console.log(refName) |
|---|
| | | this.$refs[refName]?.resetFields() |
|---|
| | | }, |
|---|
| | | ConfirmChange() { |
|---|
| | | console.log(this.changeNameParams) |
|---|
| | | if (!this.changeNameParams.productName) return this.$message.error('请认çå¡«åä¸å¯ä¸ºç©º') |
|---|
| | | |
|---|
| | | updateName(this.changeNameParams).then((res) => { |
|---|
| | | this.changeNameParams.id = '' |
|---|
| | | this.changeNameParams.productName = '' |
|---|
| | | console.log('æ¸
空修æ¹å称è¾å
¥æ¡å
容') |
|---|
| | | this.changeNameVisible = false |
|---|
| | | this.$message.success(res) |
|---|
| | | this.setOptions() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | confirmChangeModel() { |
|---|
| | | console.log('ä¿®æ¹åå·åæ°', this.changeModelParams) |
|---|
| | | updateModel(this.changeModelParams).then((res) => { |
|---|
| | | this.changeModelVisible = false |
|---|
| | | this.changeModelParams = {} |
|---|
| | | this.$message.success(res) |
|---|
| | | this.setOptions() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | addNewName() { |
|---|
| | | console.log(this.newName) |
|---|
| | | if (!this.newName) return this.$message.error('æ·»å å称ä¸è½ä¸ºç©º') |
|---|
| | | addName({ productName: this.newName }).then((res) => { |
|---|
| | | this.newName = '' |
|---|
| | | this.$message.success(res) |
|---|
| | | this.setOptions() |
|---|
| | | }, () => { |
|---|
| | | // this.$message.error('æ·»å 失败请éæ°å°è¯') |
|---|
| | | |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | changeName(node, data) { |
|---|
| | | // console.log(node, data) |
|---|
| | | this.changeNameParams.id = data.value |
|---|
| | | this.changeNameParams.productName = data.label |
|---|
| | | console.log(this.changeNameParams) |
|---|
| | | this.changeNameVisible = true |
|---|
| | | }, |
|---|
| | | deleteName(node, data) { |
|---|
| | | console.log(data) |
|---|
| | | this.$alert('ç¡®å®å é¤', 'å é¤å称', { |
|---|
| | | confirmButtonText: 'ç¡®å®', |
|---|
| | | callback: action => { |
|---|
| | | delName({ id: data.value, productName: data.label }).then((res) => { |
|---|
| | | this.$message.success(res) |
|---|
| | | this.setOptions() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | addNewModel() { |
|---|
| | | addModel({ productNameId: this.checkNameId, productModel: this.newModel, productCode: this.newProductCode }).then((res) => { |
|---|
| | | this.checkNameId = '' |
|---|
| | | this.newModel = '' |
|---|
| | | this.newProductCode = '' |
|---|
| | | this.$message.success(res) |
|---|
| | | this.setOptions() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | deleteModel(row) { |
|---|
| | | delModel({ id: row.id, productModel: row.productModel }).then((res) => { |
|---|
| | | this.$message.success(res) |
|---|
| | | this.setOptions() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | changeModel(row) { |
|---|
| | | this.changeModelVisible = true |
|---|
| | | const params = { ...row } |
|---|
| | | delete params.productName |
|---|
| | | this.changeModelParams = { ... params } |
|---|
| | | }, |
|---|
| | | async setOptions() { |
|---|
| | | this.tableData = [] |
|---|
| | | this.treeData = [] |
|---|
| | | const { data: nameRes } = await selectAllName() |
|---|
| | | // console.log(nameRes) |
|---|
| | | const nameArr = nameRes.productNames.map(item => { |
|---|
| | | return { value: item.id, label: item.productName } |
|---|
| | | }) |
|---|
| | | this.nameOptions = nameArr |
|---|
| | | // console.log(nameArr) |
|---|
| | | for (const nameItem of nameArr) { |
|---|
| | | const { data } = await selectAllModel({ productNameId: nameItem.value }) |
|---|
| | | |
|---|
| | | data.models = data.models.map(item => { |
|---|
| | | item.productNameId = nameItem.value |
|---|
| | | item.productName = nameItem.label |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | this.tableData = [...this.tableData, ...data.models] |
|---|
| | | const children = data.models.map(item => { |
|---|
| | | return { id: item.id, label: item.productModel } |
|---|
| | | }) |
|---|
| | | this.treeData.push({ ...nameItem, children }) |
|---|
| | | } |
|---|
| | | this.tableData = this.tableData.map(item => { |
|---|
| | | return { id: item.id, productModel: item.productModel, productCode: item.productCode, productName: item.productName } |
|---|
| | | }) |
|---|
| | | // console.log(this.tableData) |
|---|
| | | }, |
|---|
| | | onTableRowClassName({ row, rowIndex }) { |
|---|
| | | if (rowIndex % 2 != 0) { |
|---|
| | | return 'onAcitve' |
|---|
| | | } else { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async logout() { |
|---|
| | | console.log(1) |
|---|
| | | await this.$store.dispatch('user/logout') |
|---|
| | | this.$router.push(`/login?redirect=/home`) |
|---|
| | | }, |
|---|
| | | filterNode(value, data) { |
|---|
| | | if (!value) return true |
|---|
| | | return data.label.indexOf(value) !== -1 |
|---|
| | | }, |
|---|
| | | changeCheck(newShow, item) { |
|---|
| | | item.show = newShow |
|---|
| | | }, |
|---|
| | | changeUser(item) { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | clear(item) { |
|---|
| | | // console.log() |
|---|
| | | delUser(item).then(res => { |
|---|
| | | this.$message.success('å é¤æå') |
|---|
| | | // this.logout() |
|---|
| | | this.getAllUser() |
|---|
| | | }, () => { |
|---|
| | | this.$message.error('å é¤å¤±è´¥') |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleAvatarSuccess(res, file) { |
|---|
| | | this.$message.success('ä¸ä¼ æå') |
|---|
| | | // this.$router.go(0) |
|---|
| | | }, |
|---|
| | | async getAllUser() { |
|---|
| | | const { data } = await getUserList() |
|---|
| | | this.userList = data.user |
|---|
| | | console.log(this.userList) |
|---|
| | | }, |
|---|
| | | addNewUser() { |
|---|
| | | // æ·»å æ ¡éªè§å |
|---|
| | | this.$refs.addParams.validate(valid => { |
|---|
| | | if (valid) { |
|---|
| | | addUser(this.addParams).then(res => { |
|---|
| | | this.addParams.account = '' |
|---|
| | | this.addParams.authority = '' |
|---|
| | | this.addParams.password = '' |
|---|
| | | this.addParams.username = '' |
|---|
| | | this.addVisible = false |
|---|
| | | this.getAllUser() |
|---|
| | | this.$message({ |
|---|
| | | message: 'æåä½ ï¼æ·»å æå', |
|---|
| | | type: 'success' |
|---|
| | | }) |
|---|
| | | }, () => { |
|---|
| | | this.$message.error({ |
|---|
| | | message: 'æ·»å ç¨æ·å¤±è´¥è¯·éæ°å°è¯' |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$message.error('é误æ交ï¼è¡¨æ ¼æ ¡éªåºé') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | console.log(this.addParams) |
|---|
| | | }, |
|---|
| | | showAdd() { |
|---|
| | | this.addVisible = true |
|---|
| | | }, |
|---|
| | | showTableDialog(command) { |
|---|
| | | this.commandList = command.keys |
|---|
| | | this.tableName = command.name |
|---|
| | | this.tableFormVisible = true |
|---|
| | | }, |
|---|
| | | getUserInfo() { |
|---|
| | | getInfo(getToken()).then(res => { |
|---|
| | | this.msgInfo = res.data |
|---|
| | | // console.log(ç¨æ·ä¿¡æ¯ï¼res) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | showDialog(name) { |
|---|
| | | if (name == 'ä¿®æ¹å¯ç ') { |
|---|
| | | this.passwordFormVisible = true |
|---|
| | | } else if (name == 'ä¿®æ¹è¡¨å') { |
|---|
| | | this.tableSelectVisible = true |
|---|
| | | } else if (name == '个人èµæ') { |
|---|
| | | this.infoFormVisible = true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async changePwd() { |
|---|
| | | // ä¿®æ¹å¯ç åæ° |
|---|
| | | // this.logout() |
|---|
| | | |
|---|
| | | this.$refs.passwordParams.validate(valid => { |
|---|
| | | if (valid) { |
|---|
| | | updateUserPwd(this.passwordParams).then(async res => { |
|---|
| | | this.passwordFormVisible = false |
|---|
| | | await this.logout() |
|---|
| | | this.$message({ |
|---|
| | | message: 'æåä½ ï¼ä¿®æ¹æå', |
|---|
| | | type: 'success' |
|---|
| | | }) |
|---|
| | | }, () => { |
|---|
| | | // this.$message.error({ |
|---|
| | | // message: 'æ·»å ç¨æ·å¤±è´¥è¯·éæ°å°è¯' |
|---|
| | | // }) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.$message.error('é误æ交ï¼è¯·æ£æ¥å¯ç æ ¼å¼') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | changeTable() { |
|---|
| | | console.log(this.commandList) |
|---|
| | | this.$store.commit('CHANGE_TAB_KEY', { name: this.tableName, keys: this.commandList }) |
|---|
| | | this.tableFormVisible = false |
|---|
| | | console.log(this.$store.state) |
|---|
| | | }, |
|---|
| | | async changeInfo() { |
|---|
| | | console.log(this.infoParams) |
|---|
| | | const res = await updateUserProfile(this.infoParams) |
|---|
| | | console.log(res) |
|---|
| | | // this.$refs |
|---|
| | | this.infoFormVisible = false |
|---|
| | | this.getUserInfo() |
|---|
| | | this.getAllUser() |
|---|
| | | this.setOptions() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" > |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../../styles/variables.scss'; |
|---|
| | | // ::v-deep .el-tree-node__content{ |
|---|
| | | // height: 70px; |
|---|
| | | // } |
|---|
| | | .changeName{ |
|---|
| | | .el-dialog{ |
|---|
| | | width: 30% !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | .el-tree-node__children{ |
|---|
| | | .edit{ |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ::v-deep .el-dropdown-menu__item { |
|---|
| | | |
|---|
| | | padding: 0 40px; |
|---|
| | | font-size: 16px; |
|---|
| | | border-bottom: 1px solid #efeeee; |
|---|
| | | } |
|---|
| | | .el-icon-plus,.el-icon-arrow-down,.el-icon-arrow-right,.el-icon-arrow-left,.el-icon-arrow-up{ |
|---|
| | | color: #409EFF; |
|---|
| | | } |
|---|
| | | .system-user{ |
|---|
| | | min-height: calc(100vh - 50px); |
|---|
| | | padding: 40px; |
|---|
| | | background: $mainBg; |
|---|
| | | .changePassword,.tableHead,.userInfo{ |
|---|
| | | .title{ |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | span:nth-child(1){ |
|---|
| | | margin-right: 8px; |
|---|
| | | display: inline-block; |
|---|
| | | width: 4px; |
|---|
| | | height: 18px; |
|---|
| | | background: #409EFF; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ::v-deep >div{ |
|---|
| | | width: 600px; |
|---|
| | | border-radius: 10px; |
|---|
| | | } |
|---|
| | | ::v-deep .el-dialog__body{ |
|---|
| | | padding: 30px 100px; |
|---|
| | | input{ |
|---|
| | | border: 0px; |
|---|
| | | background: #f3f4f5; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ::v-deep .el-dialog__footer{ |
|---|
| | | padding: 10px 100px 30px 100px; |
|---|
| | | // margin-right: ; |
|---|
| | | .dialog-footer{ |
|---|
| | | display: flex; |
|---|
| | | button{ |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .tableHead{ |
|---|
| | | ::v-deep >div{ |
|---|
| | | width: 300px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | ::v-deep .el-dialog__body{ |
|---|
| | | padding: 30px 50px; |
|---|
| | | } |
|---|
| | | ::v-deep .el-checkbox{ |
|---|
| | | margin-right: 0; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | ::v-deep .el-checkbox__label{ |
|---|
| | | width: 140px; |
|---|
| | | margin: 5px 10px; |
|---|
| | | padding: 10px 40px; |
|---|
| | | background: #f3f4f5; |
|---|
| | | border-radius: 6px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .user-info{ |
|---|
| | | width: 100%; |
|---|
| | | height: 125px; |
|---|
| | | border-radius: 10px; |
|---|
| | | background: #fff; |
|---|
| | | padding: 25px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | .info-avatar{ |
|---|
| | | |
|---|
| | | .avatar-uploader .el-upload { |
|---|
| | | border: 1px dashed #d9d9d9; |
|---|
| | | border-radius: 6px; |
|---|
| | | cursor: pointer; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .avatar-uploader .el-upload:hover { |
|---|
| | | border-color: #409EFF; |
|---|
| | | } |
|---|
| | | .avatar-uploader-icon { |
|---|
| | | font-size: 28px; |
|---|
| | | color: #8c939d; |
|---|
| | | width: 75px; |
|---|
| | | height: 75px; |
|---|
| | | line-height: 75px; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .avatar { |
|---|
| | | width: 75px; |
|---|
| | | height: 75px; |
|---|
| | | display: block; |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .info-logout{ |
|---|
| | | // width: 100px; |
|---|
| | | .el-button--primary.is-plain{ |
|---|
| | | background: #fff; |
|---|
| | | color: #409EFF; |
|---|
| | | border-color: #b3d8ff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .info-msg{ |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding-left: 25px; |
|---|
| | | >div:nth-child(1){ |
|---|
| | | font-weight: 700; |
|---|
| | | font-size: 24px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | .setting-model{ |
|---|
| | | margin-top: 24px; |
|---|
| | | border-radius: 10px; |
|---|
| | | background: #fff; |
|---|
| | | border: 1px solid #ddd; |
|---|
| | | padding: 15px; |
|---|
| | | .addName{ |
|---|
| | | // display: flex; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .setting-list{ |
|---|
| | | margin-top: 24px; |
|---|
| | | border-radius: 10px; |
|---|
| | | background: #fff; |
|---|
| | | border: 1px solid #ddd; |
|---|
| | | .setting-item{ |
|---|
| | | height: 70px; |
|---|
| | | padding: 15px; |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | .item-icon{ |
|---|
| | | // width: 40px; |
|---|
| | | // height: 40px; |
|---|
| | | } |
|---|
| | | .item-msg{ |
|---|
| | | flex: 1; |
|---|
| | | padding-left: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | .setting-item{ |
|---|
| | | // border-top: 1px solid #ddd; |
|---|
| | | border-bottom: 1px solid #ddd; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | // For example, Mac: sudo npm run |
|---|
| | | // You can change the port by the following methods: |
|---|
| | | // port = 9528 npm run dev OR npm run dev --port = 9528 |
|---|
| | | const port = process.env.port || process.env.npm_config_port || 9527 // dev port |
|---|
| | | const port = process.env.port || process.env.npm_config_port || 8010 // dev port |
|---|
| | | |
|---|
| | | // All configuration item explanations can be find in https://cli.vuejs.org/config/ |
|---|
| | | module.exports = { |
|---|
