web--vue

vue入门资料：https://cn.vuejs.org/v2/guide/

http://www.runoob.com/w3cnote/vue2-start-coding.html

element-ui：http://element-cn.eleme.io/#/zh-CN/component/table

封装的http请求：

import Vue from 'vue';
import axios from 'axios'
import qs from 'qs';
import {Message,Loading } from 'element-ui';

//创建axios实例
var service = axios.create({
    baseURL: Vue.prototype.$baseUrl,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
    },
    dataType: 'json',
})

//封装http请求
export default {
    get(url, param) {
        isExpired();
        showFullScreenLoading();
        return new Promise((cback, reject) => {
            service({
                method: 'get',
                url,
                params: param,
                dataType: 'json',
                contentType: 'application/json; charset=UTF-8',
            }).then(res => {
                if(res.data.code == -1)
                {
                    Message.error({message: res.data.message});
                }
                if(res.data.code == 0)
                {
                    Message.success({message: res.data.message});
                }
                tryHideFullScreenLoading()
                var res_code = res.status.toString();
                if (res_code.charAt(0) == 2) {
                    cback(res);
                }
            }).catch(err => {
                tryHideFullScreenLoading()
                if (err.response) {
                    reject(err.response);
                    Message.error({message: err});
                }
            })
        })
    },
    post(url, data) {
        if(url != 'login')
        {
            isExpired();
        }
        showFullScreenLoading();
        return new Promise((cback, reject) => {
            service({
                method: 'post',
                url,
                data: data,
                dataType: 'json',
                contentType: 'application/json; charset=UTF-8',// 解决415错误
            }).then(res => {      
                if(res.data.code == -1)
                {
                    Message.error({message: res.data.message});
                }
                if(res.data.code == 0)
                {
                    Message.success({message: res.data.message});
                }
                tryHideFullScreenLoading()
                var res_code = res.status.toString();
                if (res_code.charAt(0) == 2) {
                    cback(res);
                }
            }).catch(err => {
                tryHideFullScreenLoading()
                if (err.response) {
                    reject(err.response);
                    Message.error({message: err});
                }
            })
        })
    }
}

api-url.js

/* 所有后端接口 */
/*登录服务*/
const login = "login"

/*用户添加 */
const insertUser = "insertUser"


/*API服务地址*/
export default{
    login,
    insertUser
}

调用：

var ms_user = JSON.parse(localStorage.getItem('ms_user'));
var companyCode = ms_user.companycode; //登录状态的公司编号
var usercode = ms_user.usercode; //登录状态的用户编号

export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '未处理'
        }, {
          value: '选项2',
          label: '已处理'
        }],
        value4: '',
        tableData: [],
        conditionForm:{
          userCode: '425F412E2A35422D4C4A458B80634981',
          companyCode: '657D24644466ADA43DB0729A2CDF4EB4',
          state: '',
          page: '1',
          size: '10'
        },
        closeconditionForm:{
          code:"837C12246C591BB18C7552FB8D6DE673",
          state:0
        }
      }
      
    },
    methods: {
      // 请求用户所有工单
		selectOrder() {
      let self = this
			this.http
				.get(this.service.selectWorkOrders, self.conditionForm)
				.then(
					function(response) {
						if (response.data.code == 0) {
							console.log('所有数据列表展示', response.data);
              self.tableData  = response.data.content.list;
              console.log(self.tableData)
          }
					}.bind(this)
				)
				.catch(function(error) {
					alert(error);
				});
    },
    //下拉框选中事件
    
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
        let self = this
          this.http
            .post(this.service.closeWorkOrders, self.closeconditionForm)
            .then(
              function(response) {
                if (response.data.code == 0) {
                  console.log('所有数据列表展示', response.data);
                  self.tableData  = response.data.content.list;
                  console.log(self.tableData)
              }
              }.bind(this)
            )
            .catch(function(error) {
              alert(error);
            });
      }
    },
    // 用户进入页面时获取所有的本公司下的工单信息, 页面监听
    mounted() {
      this.$nextTick(() => {
        this.selectOrder();
      });
    }

  }