代码实现
前端:
<template><div><el-form ref="form" :model="form" label-width="100px" inline> <el-form-item label="名字"> <el-input v-model="name" style="width: 200px;" size="mini"></el-input> </el-form-item> <el-form-item> <el-button @click="queryByName" type="primary" size="mini" icon="el-icon-search">搜寻</el-button> <el-button @click="add" size="mini" type="primary">增加<i class="el-icon-upload el-icon--right"></i></el-button> </el-form-item></el-form><el-table v-loading="loading" @expand-change="rowExpand" :data="tableData" border style="width: 100%;margin-bottom: 20px;" height="300"> <el-table-column type="expand" prop=""> <template slot-scope=""> <el-table :data="orderDetailData"> <el-table-column prop="develop" label="职位" width="244" /> <el-table-column prop="salary" label="薪水" width="244" /> <el-table-column prop="yearsWorking" label="工作年限" width="244" /> <el-table-column prop="edit" label="编辑" width="244" /> <el-table-column prop="view" label="视图" width="230"> <el-switch v-model="value" active-color="#13ce66" inactive-color="#13ce66"> </el-switch> </el-table-column> </el-table> </template> </el-table-column> <el-table-column prop="id" label="ID" width="150" v-if="false"> </el-table-column> <el-table-column prop="demoName" label="姓名"> </el-table-column> <el-table-column prop="age" label="年龄"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column prop="supplierTel" label="操作"> <template slot-scope="scope"> <span> <el-button type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button> <el-button type="danger" @click="handleDeleteFile(scope.row)" size="small" plain>删除</el-button> </span> </template> </el-table-column> <el-table-column prop="view" label="视图"> <el-switch v-model="value" active-color="#13ce66" inactive-color="#13ce66"> </el-switch> </el-table-column></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows"></el-pagination><!--新增弹窗--><el-dialog title="编辑信息" :visible.sync="dialogVisible" width="30%"> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="姓名"> <el-input v-model="form.demoName" style="width: 200px;"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="form.age" style="width: 200px;"></el-input> </el-form-item> <el-form-item label="地址"> <el-input v-model="form.address" style="width: 200px;"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSave()">保留</el-button> <el-button @click="dialogVisible = false">取 消</el-button> </el-form-item> </el-form></el-dialog><!-- <el-table-column type="expand" prop=""> <template slot-scope=""> <el-table :data="tableDataT" border style="width: 100%;margin-bottom: 20px;" height="300"> <el-table-column prop="id" label="ID" width="150" v-if="false"> </el-table-column> <el-table-column prop="develop" label="职位"> </el-table-column> <el-table-column prop="salary" label="薪水"> </el-table-column> <el-table-column prop="yearsWorking" label="工作年限"> </el-table-column> <el-table-column prop="viewT" label="视图"> <el-switch v-model="valueT" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </el-table-column> </el-table> </template></el-table-column> --></div></template><script>import axios from '@/axios';export default {data() { return { form: { id: '', demoName: '', age: '', address: '', }, orderDetailData: [{ develop : '', salary : '', yearsWorking : '' }], tableData: [], currentPage: 1, totalRows: 0, pageSizes: [10, 20, 30, 40], pageSize: 10, dialogVisible: false, name: '', }},mounted() { this.getDetailedByRequireNo();},methods: { // 行开展实现 rowExpand(row, expandeRows) { console.log('点开了' + row.demoClass) var url = 'TWangZhaoHuiDemo/selectClass.do' var parm = { demoClass: row.demoClass } axios.get(url, parm).then(response => { if (response.data.code == '0') { this.orderDetailData = response.data.data console.log(response.data.data) // console.log(response.data.data.list) // console.log(response.data.list) // // this.orderDetailData.develop=response.data.data.develop // // this.orderDetailData = response.data.data.salary // // this.orderDetailData = response.data.data.yearsWorking // console.log(this.orderDetailData) // console.log(response.data.data.develop) // console.log(response.data.data.develop) // console.log(response.data.data.salary) // console.log(response.data.data.yearsWorking) } else { this.$message({ type: 'error', message: '操作失败!' + response.data.msg }); } }) }, //页面加载全副 getDetailedByRequireNo() { var url = 'TWangZhaoHuiDemo/findAll.do' var param = { page: this.currentPage, rows: this.pageSize, } axios.get(url, param).then(response => { if (response.data.code == '0') { this.tableData = response.data.data.list console.log(response.data.data.list) this.totalRows = response.data.data.total } else { this.$message({ type: 'error', message: '操作失败!' + response.data.msg }); } }); }, //新增弹窗11 add() { this.dialogVisible = true this.queryPrimaryKey() }, //获取主键ID queryPrimaryKey() { var url = 'Common/queryPrimaryKey.do' var param = {} axios.get(url, param).then(response => { if (response.data.code == '0') { this.form.id = response.data.data //设置主键ID进行保留 } else { this.$message({ type: 'error', message: '查问失败' + response.data.msg }); } }); }, //保留按钮 handleSave() { var url = 'TWangZhaoHuiDemo/save.do' var param = { json: JSON.stringify(this.form) } axios.post(url, param).then(response => { if (response.data.code == '0') { this.$message({ type: 'success', message: '保留胜利!', }); this.form = { id: '', demoName: '', age: '', adrress: '', } this.dialogVisible = false this.getDetailedByRequireNo() } else { this.$message({ type: 'error', message: '保留失败!' + response.data.msg }); } }); }, //编辑按钮，点击显示编辑页面 handleEdit(row) { this.dialogVisible = true //显示内容 this.form = row }, //删除 handleDeleteFile(row) { this.$confirm('此操作将删除该数据, 是否持续?', '提醒', { confirmButtonText: '确定', cancelButtonText: '勾销', type: 'warning' }).then(() => { var url = 'TWangZhaoHuiDemo/remove.do' var param = { id: row.id } axios.post(url, param).then(response => { if (response.data.code == '0') { this.$message({ type: 'success', message: '删除胜利!', }); this.getDetailedByRequireNo() } else { this.$message({ type: 'error', message: '删除失败!' + response.data.msg }); } }); }).catch(() => { this.$message({ type: 'info', message: '已勾销删除' }); }); }, //查问性能 queryByName() { var url = 'TWangZhaoHuiDemo/queryByName.do' var param = { name: this.name, } axios.get(url, param).then(response => { if (response.data.code == '0') { console.log("111111111111111111111") console.log(response.data.data) this.tableData = response.data.data } else { this.$message({ type: 'error', message: '操作失败!' + response.data.msg }); } }); }, onSupplier() { this.dialogVisibleSupplier = true this.getDetailedByRequireNoSupplier() }, getDetailedByRequireNoSupplier() { var url = 'InformationSupplier/queryObject.do' var param = { page: this.currentPageSupplier, rows: this.pageSizeSupplier, } axios.get(url, param).then(response => { if (response.data.code == '0') { this.tableDataSupplier = response.data.data.list this.totalRowsSupplier = response.data.data.total } else { this.$message({ type: 'error', message: '操作失败!' + response.data.msg }); } }); }, seletion(row) { this.form.tInformationSupplier.id = row.id this.form.tInformationSupplier.supplierCode = row.supplierCode this.form.tInformationSupplier.supplierName = row.supplierName this.form.tInformationSupplier.supplierAddress = row.supplierAddress this.form.tInformationSupplier.supplierTel = row.supplierTel this.form.supplierId = row.id this.form.supplierName = row.supplierName this.dialogVisibleSupplier = false }, // 批改每页行数 handleSizeChange(val) { this.pageSizeDtl = val this.getTableDataDtl() }, // 批改当前页事件 handleCurrentChange(val) { this.currentPageDtl = val this.getTableDataDtl() },}};</script><style></style>全副代码...后盾本人实现
sql :
<!--依据class关联查问--><select id="selectClass" resultMap="resultMap"> select tt.develop,tt.salary,tt.years_working from t_wangzhaohui_demo as t left join t_wangzhaohui_demo_T as tt on t.demo_class = tt.demo_class_t where t.demo_class = #{demoClass} and t.cancel_status = 1</select>