代码实现
前端:
<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>