api/admin.js
//定义登陆信息的操作
//导入请求函数
import {$get,$post,$setToken} from '../utils/request.js'
import {$msg_s,$msg_w} from '../utils/msg.js'
//定义登陆函数
export let Login = async (params)=>{
//登陆成功后,服务器会返回一个token,唯一凭证
//之后对服务器的每一次提交,都要带上这个令牌
let {success,message,token} = await $get('login',params)
if(success){
$msg_s(message)
}else{
$msg_w(message)
}
}
api/exp.js
//关于快递件的操作
import { $msg_e,$confirm,$msg_return,$bool_return } from '@/utils/msg.js'
import {$get,$post} from '../utils/request.js'
import ExportJsonExcel from 'js-export-excel'
//收件
export let eadd = async (params)=>{
if(!params.exp_idx){
$msg_e('请输入快递单号')
return false
}
if(!params.exp_name){
$msg_e('请输入物流公司')
return false
}
if(!params.exp_type){
$msg_e('请输入快递类别')
return false
}
if(!params.qty){
$msg_e('请输入快递数量')
return false
}
if(!params.acp_tel){
$msg_e('请输入收件人电话')
return false
}
if(!params.acp_name){
$msg_e('请查找收件人信息')
return false
}
let {status,statusText} = await $get('Exp/Add',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//返回所有的快递信息
export let list = async (params)=>{
let data = await $get('Exp/list',params)
return data
}
//取件(修改状态为N)
export let eupdate = async (params)=>{
let {status,statusText} = await $get('Exp/update',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//根据姓名查找收件人信息
export let listName = async (params)=>{
let data = await $get('Exp/acpList',params)
return data
}
//查找取件人信息
export let revList = async (params)=>{
let data = await $get('Exp/revList',params)
return data
}
//导出Excel文件方法封装
export let downExcel = async (params)=>{
let {data:r} = await $get('Exp/list',params)
let dataList = r
console.log(r)
let option = {}; // option代表的就是excel文件
let dataTable = []; // dataTable代表excel文件中的数据内容
if (dataList) {
for (let i in dataList) {
let obj = {
单号: dataList[i].exp_idx,
领取状态: dataList[i].status,
快递公司: dataList[i].exp_name,
类别:dataList[i].exp_type,
数量:dataList[i].qty,
收件人工号:dataList[i].acp_empno,
收件人姓名:dataList[i].acp_name,
收件人电话:dataList[i].acp_tel,
收件人邮箱:dataList[i].acp_email,
收件时间:dataList[i].acp_date,
领取人工号:dataList[i].rcv_empno,
领取人姓名:dataList[i].rcv_name,
领取人电话:dataList[i].rcv_tel,
领取人邮箱:dataList[i].rcv_email,
领取时间:dataList[i].rcv_date,
备注:dataList[i].exp_remark
};
dataTable.push(obj); // 设置excel每列获取的数据源
}
}
option.fileName = "快递系统Report"; //excel文件名
//excel文件数据
option.datas = [
{
// excel文件的数据源
sheetData: dataTable,
// excel文件sheet的表名
sheetName: "sheet",
// excel文件表头名
sheetHeader: ["单号", "领取状态", "快递公司","类别","数量","收件人工号","收件人姓名","收件人电话","收件人邮箱","收件时间","领取人工号","领取人姓名","领取人电话","领取人邮箱","领取时间","备注"],
// excel文件列名
sheetFilter: ["单号", "领取状态", "快递公司","类别","数量","收件人工号","收件人姓名","收件人电话","收件人邮箱","收件时间","领取人工号","领取人姓名","领取人电话","领取人邮箱","领取时间","备注"],
},
];
//创建ExportJsonExcel实例对象
let toExcel = new ExportJsonExcel(option);
//调用保存方法
toExcel.saveExcel();
}
api/pam,js
//关于参数维护的增删改查
import { $msg_e,$confirm,$msg_return,$bool_return } from '@/utils/msg.js'
import {$get,$post} from '../utils/request.js'
//返回所有的快递公司信息
export let clist = async ()=>{
let data = await $get('Pamc/list')
return data
}
//返回所有的快递类别信息
export let tlist = async ()=>{
let data = await $get('Pamt/list')
return data
}
//返回所有的特殊人员信息
export let plist = async ()=>{
let data = await $get('Pamp/list')
return data
}
//添加快递公司信息
export let cadd = async (params)=>{
if(!params.pName){
$msg_e('请输入快递公司名称')
return false
}
let {status,statusText} = await $get('Pamc/Add',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//添加快递类别信息
export let tadd = async (params)=>{
if(!params.pName){
$msg_e('请输入快递类别名称')
return false
}
let {status,statusText} = await $get('Pamt/Add',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//添加特殊人员信息
export let padd = async (params)=>{
if(!params.empName){
$msg_e('请输入特殊人员名称')
return false
}
if(!params.empTel){
$msg_e('请输入特殊人员电话')
return false
}
if(!params.empEmail){
$msg_e('请输入特殊人员邮箱')
return false
}
let {status,statusText} = await $get('Pamp/Add',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//编辑快递公司信息
export let cupdate = async (params)=>{
if(!params.pName){
$msg_e('请输入快递公司名称')
return false
}
let {status,statusText} = await $get('Pamc/update',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//编辑快递类别信息
export let tupdate = async (params)=>{
if(!params.pName){
$msg_e('请输入快递类别名称')
return false
}
let {status,statusText} = await $get('Pamt/update',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//编辑特殊人员信息
export let pupdate = async (params)=>{
if(!params.empName){
$msg_e('请输入特殊人员名称')
return false
}
if(!params.empTel){
$msg_e('请输入特殊人员电话')
return false
}
if(!params.empEmail){
$msg_e('请输入特殊人员邮箱')
return false
}
let {status,statusText} = await $get('Pamp/update',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//删除快递公司信息
export let cdelete = async(params)=>{
await $confirm('是否确定删除')
let {status,statusText} = await $get('Pamc/delete',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//删除快递类别信息
export let tdelete = async(params)=>{
await $confirm('是否确定删除')
let {status,statusText} = await $get('Pamt/delete',params)
$msg_return(status,statusText)
return $bool_return(status)
}
//删除特殊人员信息
export let pdelete = async(params)=>{
await $confirm('是否确定删除')
let {status,statusText} = await $get('Pamp/delete',params)
$msg_return(status,statusText)
return $bool_return(status)
}
utils/flexible.js 移动端自适应
(function() {
// flexible.css
var cssText =
'' +
'@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}body,html{font-family:"Microsoft YaHei",sans-serif,Tahoma,Arial}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}input,input[type=button],input[type=reset],input[type=submit]{resize:none;border:none;-webkit-appearance:none;border-radius:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:after,q:before{content:\'\'}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}a,ins{text-decoration:none}a:active,a:hover,a:link,a:visited{background:0 0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;outline:0;text-decoration:none}';
// cssText end
var styleEl = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(styleEl);
if (styleEl.styleSheet) {
if (!styleEl.styleSheet.disabled) {
styleEl.styleSheet.cssText = cssText;
}
} else {
try {
styleEl.innerHTML = cssText;
} catch (e) {
styleEl.innerText = cssText;
}
}
})();
;
(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
utils/msg.js
//封装消息框
import {ElMessage,ElMessageBox} from 'element-plus'
//成功的消息框
export let $msg_s = (message,duration=2000)=>{
ElMessage({
showClose:true,
message,
duration,
type:'success',
})
}
//警告的消息框
export let $msg_w = (message,duration=2000)=>{
ElMessage({
showClose:true,
message,
duration,
type:'warning',
})
}
//错误的消息框
export let $msg_e = (message,duration=2000)=>{
ElMessage({
showClose:true,
message,
duration,
type:'error',
})
}
//确定取消框
export let $confirm = (message,title='提示',type='warning')=>{
return new Promise((resolve,reject)=>{
ElMessageBox.confirm(
message,
title,
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type,
}
)
.then(() => {
resolve()
})
.catch(() => {
})
})
}
//封装返回值
export let $msg_return=(status,statusText)=>{
if(status===200||status===201){
$msg_s(statusText)
}else{
$msg_e(statusText)
}
}
//封装返回布尔值
export let $bool_return=(status)=>{
if(status===200||status===201){
return true
}else{
return false
}
}
utils/request.js
//请求相关
import axios from 'axios'
import { ElMessage } from 'element-plus';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//导入接口和地址
import {url} from '../config/conster.js'
//初始化一个axios对象
var instance = axios.create({
//设置请求地址前缀
baseURL:url,
//请求超时时间 30s
timeout:5000,
//自定义请求头
//headers:{'content-type':'application/json; charset=utf-8'}
});
//添加请求拦截器
instance.interceptors.request.use(
function(config){
//在发送请求之前做些什么
NProgress.start()
return config;
},
function(error){
//对请求错误做些什么
NProgress.done();
return Promise.reject(error);
}
)
//添加响应拦截器
instance.interceptors.response.use(
function(response){
//对响应数据做些什么
NProgress.done();
if(response.status===200||response.status===201){
return response
}else{
ElMessage.error(meta.msg)
return Promise.reject(new Error(meta.msg))
}
},
function(error){
//对响应错误做些什么
NProgress.done();
return Promise.reject(error.response.data);
}
);
//定义一个get方法
export let $get = async (url,params)=>{
let data = await instance.get(url,{params})
return data;
}
//定义一个post方法
export let $post = async (url,params)=>{
let data = await instance.post(url,params)
return data;
}
views/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import 'normalize.css/normalize.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//全局引入css
import '../style/headtap.css'
const app = createApp(App)
app.use(ElementPlus,{locale:zhCn})
app.use(router)
app.mount('#app')