| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377 |
- <!DOCTYPE html>
- <html>
- <head>
- <!-- 页面meta -->
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>空气旅游</title>
- <meta name="description" content="空气旅游">
- <meta name="keywords" content="空气旅游">
- <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
- <!-- 引入样式 -->
- <link rel="stylesheet" href="/static/plugins/elementui/index.css">
- <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" href="/static/css/style.css">
- </head>
- <body class="hold-transition">
- <div id="app">
- <div class="content-header">
- <h1>旅游管理<small>自由行管理</small></h1>
- <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
- <el-breadcrumb-item>旅游管理</el-breadcrumb-item>
- <el-breadcrumb-item>自由行管理</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
- <div class="app-container">
- <div class="box">
- <div class="filter-container">
- <el-input placeholder="项目编码/项目名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
- <el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
- <el-button type="primary" class="butT" @click="handleCreate">新建</el-button>
- </div>
- <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
- <el-table-column type="index" align="center" label="序号"></el-table-column>
- <el-table-column prop="code" label="项目编码" align="center"></el-table-column>
- <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
- <el-table-column label="适用性别" align="center">
- <template slot-scope="scope">
- <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
- </template>
- </el-table-column>
- <el-table-column prop="age" label="适用年龄" align="center"></el-table-column>
- <el-table-column prop="remark" label="项目说明" align="center"></el-table-column>
- <el-table-column label="操作" align="center">
- <template slot-scope="scope">
- <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <div class="pagination-container">
- <el-pagination
- class="pagiantion"
- @current-change="handleCurrentChange"
- :current-page="pagination.currentPage"
- :page-size="pagination.pageSize"
- layout="total, prev, pager, next, jumper"
- :total="pagination.total">
- </el-pagination>
- </div>
- <!-- 新增标签弹层 -->
- <div class="add-form">
- <el-dialog title="新增自由行" :visible.sync="dialogFormVisible">
- <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
- <el-row>
- <el-col :span="12">
- <el-form-item label="项目编码" prop="code">
- <el-input v-model="formData.code"/>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="项目名称" prop="name">
- <el-input v-model="formData.name"/>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="性别">
- <el-select v-model="formData.sex">
- <el-option label="不限" value="0"></el-option>
- <el-option label="男" value="1"></el-option>
- <el-option label="女" value="2"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="适用年龄">
- <el-input v-model="formData.age"/>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="类型">
- <el-select v-model="formData.type">
- <el-option label="自己玩" value="1"></el-option>
- <el-option label="一起玩" value="2"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="价格">
- <el-input v-model="formData.price"/>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="项目说明">
- <el-input v-model="formData.remark" type="textarea"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="注意事项">
- <el-input v-model="formData.attention" type="textarea"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="dialogFormVisible = false">取消</el-button>
- <el-button type="primary" @click="handleAdd()">确定</el-button>
- </div>
- </el-dialog>
- </div>
- <!-- 编辑标签弹层 -->
- <div class="add-form">
- <el-dialog title="编辑自由行" :visible.sync="dialogFormVisible4Edit">
- <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
- <el-row>
- <el-col :span="12">
- <el-form-item label="项目编码" prop="code">
- <el-input v-model="formData.code"/>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="项目名称" prop="name">
- <el-input v-model="formData.name"/>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="性别">
- <el-select v-model="formData.sex">
- <el-option label="不限" value="0"></el-option>
- <el-option label="男" value="1"></el-option>
- <el-option label="女" value="2"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="适用年龄">
- <el-input v-model="formData.age"/>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="12">
- <el-form-item label="类型">
- <el-select v-model="formData.type">
- <el-option label="自己玩" value="1"></el-option>
- <el-option label="一起玩" value="2"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="价格">
- <el-input v-model="formData.price"/>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="项目说明">
- <el-input v-model="formData.remark" type="textarea"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="注意事项">
- <el-input v-model="formData.attention" type="textarea"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
- <el-button type="primary" @click="handleEdit()">确定</el-button>
- </div>
- </el-dialog>
- </div>
- </div>
- </div>
- </div>
- </body>
- <!-- 引入组件库 -->
- <script src="/static/js/vue.js"></script>
- <script src="/static/plugins/elementui/index.js"></script>
- <script type="text/javascript" src="/static/js/jquery.min.js"></script>
- <script src="/static/js/axios-0.18.0.js"></script>
- <script>
- var vue = new Vue({
- el: '#app',
- data:{
- pagination: {//分页相关模型数据
- currentPage: 1,//当前页码
- pageSize:20,//每页显示的记录数
- total:0,//总记录数
- queryString:null//查询条件
- },
- dataList: [],//当前页要展示的分页列表数据
- formData: {},//表单数据
- dialogFormVisible: false,//增加表单是否可见
- dialogFormVisible4Edit:false,//编辑表单是否可见
- rules: {//校验规则
- code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
- name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
- }
- },
- //钩子函数，VUE对象初始化完成后自动执行
- created() {
- //获取数据
- this.findPage()
- },
- methods: {
- //编辑
- handleEdit() {
- t = this;
- this.$refs['dataEditForm'].validate((valid) => {
- if (valid) {
- //提交 fromData
- axios.post(`/travelitem/edit.do`,this.formData)
- .then( res => {
- if(res.data.flag){
- //添加成功提示
- t.$message.success(res.data.message)
- //关闭添加窗口
- t.dialogFormVisible4Edit = false
- //重置表单
- this.resetForm()
- }else{
- t.$message.error(res.data.message);
- }
- }).finally(()=> {
- // 刷新页面（列表查询）
- this.findPage()
- });
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- //添加
- handleAdd () {
- t = this;
- this.$refs['dataAddForm'].validate((valid) => {
- if (valid) {
- //提交 fromData
- axios.put(`/travelitem/add.do`,this.formData)
- .then( res => {
- if(res.data.flag){
- //添加成功提示
- t.$message.success(res.data.message)
- //关闭添加窗口
- t.dialogFormVisible = false
- //重置
- this.resetForm()
- }else{
- t.$message.error(res.data.message);
- }
- }).finally(()=> {
- // 刷新页面（列表查询）
- this.findPage()
- });
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- //分页查询
- findPage() {
- //参数
- let params = {
- currentPage: this.pagination.currentPage,//当前页码
- pageSize:this.pagination.pageSize,//每页显示的记录数
- queryString:{
- 'name':this.pagination.queryString
- }//查询条件
- }
- //发送请求
- axios.post(`/travelitem/findPage.do`, params)
- .then(res =>{
- //赋值
- console.log(res)
- this.dataList = res.data.data.rows;
- this.pagination.total = res.data.data.total;
- })
- },
- // 重置表单
- resetForm() {
- this.formData = {}
- },
- // 弹出添加窗口
- handleCreate() {
- //重置表单
- this.resetForm()
- this.dialogFormVisible = true
- },
- // 弹出编辑窗口
- handleUpdate(row) {
- console.log(row)
- //开启弹窗
- this.dialogFormVisible4Edit = true
- //发送请求 进行回显
- axios.get(`/travelitem/selectById.do?id=${row.id}`).then( res => {
- console.log(res.data)
- this.formData = res.data.data
- })
- },
- //切换页码
- handleCurrentChange(currentPage) {
- // currentPage为切换后的页码
- this.pagination.currentPage = currentPage;
- this.findPage();
- },
- // 删除
- handleDelete(row) {
- this.$confirm('此操作将永久删除该自由行, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- center: true
- }).then(() => {
- // 发送ajax请求，执行删除
- axios.get(`/travelitem/delete.do?id=${row.id}`)
- .then( res =>{
- console.log(res)
- if(res.data.flag){
- this.$message({
- type: 'success',
- message: res.data.message
- });
- //刷新页面
- this.findPage();
- }else{
- this.$message({
- type: 'error',
- message: res.data.message
- });
- }
- })
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '已取消删除'
- });
- });
- }
- }
- })
- </script>
- </html>
|
