前端HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/element-ui-index.css">
<link rel="stylesheet" href="../css/corporation.css">
</head>
<body>
<div id="corporation">
<template>
<el-alert
title="公司管理"
type="info"
:closable="false">
</el-alert>
<div id="ctable">
<div id="elSwitch">
<!-- 区分有效无效的查询 -->
<el-switch
v-model="switchIsValidity"
active-text="有效"
inactive-text="无效"
@click.native="switchChangeStatus()">
</el-switch>
</div>
<el-button-group id="btn-group">
<el-button type="primary" icon="el-icon-circle-plus" @click="addCorp">新增</el-button>
<el-button type="primary" icon="el-icon-edit" @click="editCorp">修改</el-button>
<el-button type="primary" icon="el-icon-delete" @click="delCorp">删除</el-button>
<el-button type="primary" icon="el-icon-refresh" @click="refreshCorp">刷新</el-button>
</el-button-group>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
border
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
property="id"
label="ID"
width="199"
align="center">
</el-table-column>
<el-table-column
property="corporationname"
label="公司名称"
width="400"
align="center">
</el-table-column>
<el-table-column
property="corporationvalidity"
label="是否有效"
width="200"
align="center"
:formatter="formatValidity">
</el-table-column>
</el-table>
</div>
<!-- 新增公司 -->
<el-dialog
title="新增公司"
:visible.sync="addDialogVisible"
width="30%"
:before-close="handleClose">
<el-form label-width="100px">
<el-form-item label="公司名称" prop="corporationName">
<el-input v-model="addCorporationName"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveNewCorp">确 定</el-button>
</span>
</el-dialog>
<!-- 修改公司信息 -->
<el-dialog
title="修改公司"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form label-width="100px">
<el-form-item label="公司名称" prop="corporationName">
<el-input v-model="editCorporationName"></el-input>
</el-form-item>
<el-form-item label="是否有效" prop="corporationValidity">
<el-radio-group v-model="editCorporationValidity">
<el-radio :label="1">有效</el-radio>
<el-radio :label="0">无效</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEditCorp">确 定</el-button>
</span>
</el-dialog>
</template>
</div>
<!-- 必须先引入vue 后使用element-ui -->
<script src="../js/pit_url.js"></script>
<script src="../vue/vue.js"></script>
<script src="../vue/element-ui-index.js"></script>
<script src="../vue/vue-resource.js"></script>
<script src="../js/corporation.js"></script>
</body>
</html>