VUE入门项目：快递收件管理---其他

最新推荐文章于 2023-08-03 21:55:05 发布

橘子爱作

最新推荐文章于 2023-08-03 21:55:05 发布

阅读量309

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/rongfairy0825/article/details/128791419

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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')