vue-element-admin开发教程(v4.0.0之后)

# 格式：git clone -b <分支名> <URL>
git clone -b i18n https://GitHub.com/PanJiaChen/vue-element-admin.git

# 发布
# 本地环境启动
npm run dev
 
# 构建测试环境
npm run build:stage
 
# 构建生产环境
npm run build:prod
 
# 其它
# 预览发布环境效果
npm run preview
 
# 预览发布环境效果 + 静态资源分析
npm run preview -- --report
 
# 代码格式检查
npm run lint
 
# 代码格式检查并自动修复
npm run lint -- --fix

handleLogin() {
    // 登陆校验
    this.$refs.loginFORM.validate(valid => {
        // 如果校验通过
	if (valid) {
	  this.loading = true
	  // 这里进行登陆请求 login 方法
          // 在 src/store/modules/user.js
	  this.$store.dispatch('user/login', this.loginForm)
	    .then(() => {
	      // otherQuery 就是你从哪个页面退出的，帮你重定向回那个页面
	      this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
	      this.loading = false
	    })
	    .catch((errorMsg) => {
	      this.loading = false
	      // 登陆失败提示
	      Message({
		message: errorMsg,
		type: 'error',
		duration: 5 * 1000
	      })
	    })
	} else {
	  console.log('error submit!!')
	  return false
	}
    })
},

// get user info
getInfo({ commit, state }) {
	return new Promise((resolve, reject) => {
		getInfo(state.token).then(response => {
			const data = response.data
 
			// 设置按钮权限到 vuex
			commit('SET_BUTTON', data.retData.button)
			if (data.retData.module && data.retData.module.length > 0) { // 验证返回的roles是否是一个非空数组
			  commit('SET_ROLES', data.retData.module)
			} else {
			  // 当用户无任何权限时设置
			  commit('SET_ROLES', ['普通用户'])
			}
			commit('SET_NAME', data.retData.username)
			commit('SET_AVATAR', 'Https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
			commit('SET_INTRODUCTION', data.retData.username)
 
			resolve(data.retData.module)
			}).catch(error => {
			reject(error)
		})
	})
},

<template>
  <div class="app-container">
    <el-table :data="list" border fit highlight-current-row style="width: 100%;" height="611px">
      <el-table-column :show-overflow-tooltip="true" aellign="center" label="服务单号">
        <template slot-scope="scope">
          <span>{{ scope.row.data1 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="性质">
        <template slot-scope="scope">
          <span>{{ scope.row.data2 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="客户">
        <template slot-scope="scope">
          <span>{{ scope.row.data3 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="联系人">
        <template slot-scope="scope">
          <span>{{ scope.row.data4 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="工程师">
        <template slot-scope="scope">
          <span>{{ scope.row.data5 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="送修/上门时间">
        <template slot-scope="scope">
          <span>{{ scope.row.data7 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="修复/结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.data8 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" class-name="status-col" label="部门">
        <template slot-scope="scope">
          <span>{{ scope.row.data10 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" class-name="status-col" label="操作">
        <template slot-scope="scope">
          <input :loading="checkLoading" type="button" class="el-button el-button--primary el-button--medium" value="确认" @click="checkFwdbh(scope.row.data1)">
        </template>
      </el-table-column>
 
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getServiceList"
    />
  </div>
</template>
 
<script>
import { getServiceList } from '@/api/service/index'
import Pagination from '@/components/Pagination'
 
export default {
  components: { Pagination },
  data() {
    return {
      // 加载样式控制
      checkLoading: false,
 
      // 数据列表
      list: [],
      // 数据条数
      total: 0,
      // 按钮加载等待
      loading: false,
 
      listQuery: {
        // 分页参数
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    // 加载列表
    this.getServiceList()
  },
  methods: {
    // 获取列表数据
    getServiceList() {
      getServiceList(this.listQuery).then(response => {
        this.list = response.items
        this.total = response.total
      })
    },
    // 确认请求
    checkFwdbh(fwdbh) {
      alert(fwdbh)
    }
  }
}
</script>
 
<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
 

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3Dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

import request from '@/utils/request'
 
const SERVICE = '/service'
 
// 获取列表数据
export function getServiceList(query) {
  return request({
    url: SERVICE + '/service/getServiceLogList',
    method: 'post',
    data: query
  })
}

const List = []
const count = 30
 
// 模拟数据列表
for (let i = 0; i < count; i++) {
  List.push({
    data1: 'ABCD00000000000',
    data2: '1004553',
    data3: '送修',
    data4: 'xxxxxxxx办事处',
    data5: '林xx',
    data6: '王xxx',
    data7: '2005-11-07 00:00',
    data8: '2006-07-20 00:00',
    data9: '已核销不开票',
    data10: '技术支持部'
  })
}
 
const SERVICE = '/service'
 
export default [
  {
    // 拦截的路径
    url: SERVICE + '/service/getServiceLogList',
    type: 'post',
    response: _ => {
      return {
        code: 20000,
        total: List.length,
        items: List,
        limit: 10
      }
    }
  }
]