提交 ea65b626 编写于 作者: cxt104926's avatar cxt104926

聊天界面优化

上级 a0837061
此差异已折叠。
......@@ -2,15 +2,17 @@
<div>
<section>
<el-row class="title-add">
<el-col :span="17">
<el-button type="primary" icon="el-icon-plus" @click="addStu">新增</el-button>
<el-col :span="15">
<el-button type="primary" icon="el-icon-plus" @click="addStu">新增班级</el-button>
</el-col>
<!--搜索条件-->
<el-col :span="4">
<el-input v-model="stuName" placeholder="请输入名称" clearable></el-input>
</el-col>
<el-col :span="3">
<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
<el-button type="primary" icon="el-icon-search" style="margin-left: 15px" @click="getList">查询</el-button>
</el-col>
<el-col :span="2">
<el-button type="success" icon="el-icon-circle-close" @click="cleanUp">清除</el-button>
</el-col>
</el-row>
......@@ -112,198 +114,198 @@
</template>
<script>
export default {
name: "stuClass",
data() {
return {
departmentData: [], // 系数据
collegeData: [], // 学院数据
sign: '', // pid选择的标志
total: 1, // 总数
page: 1, // 当前页
limit: 10, // 分页大小
stuName: '',
tableData: [],
userData: [], // 管理者
export default {
name: "stuClass",
data() {
return {
departmentData: [], // 系数据
collegeData: [], // 学院数据
sign: '', // pid选择的标志
total: 1, // 总数
page: 1, // 当前页
limit: 10, // 分页大小
stuName: '',
tableData: [],
userData: [], // 管理者
// 新增
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
isEditable: true, // 标志是否是编辑
showAddAndEditForm: false,
showForm: false,
formLabelWidth: '150px',
addAndEditFormData: {
id: '',
name: '',
pid: '',
sign: '',
grade: '',
userId: ''
// 新增
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
isEditable: true, // 标志是否是编辑
showAddAndEditForm: false,
showForm: false,
formLabelWidth: '150px',
addAndEditFormData: {
id: '',
name: '',
pid: '',
sign: '',
grade: '',
userId: ''
},
addAndEditRules: {
name: {
required: true, message: '名称不能为空', trigger: 'blur'
},
addAndEditRules: {
name: {
required: true, message: '名称不能为空', trigger: 'blur'
},
sign: {
required: true, message: '类型不能为空', trigger: 'blur'
},
userId: {
required: true, message: '管理者不能为空', trigger: 'blur'
},
sign: {
required: true, message: '类型不能为空', trigger: 'blur'
},
userId: {
required: true, message: '管理者不能为空', trigger: 'blur'
},
}
},
created() {
this.getList();
},
methods: {
// 新增
addStu() {
this.queryCollege();
this.wholeUser();
this.title = "新增";
this.isEditable = false;
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
this.sign = '';
},
}
},
created() {
this.getList();
},
methods: {
// 新增
addStu() {
this.queryCollege();
this.wholeUser();
this.title = "新增";
this.isEditable = false;
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
this.sign = '';
},
// 查询
getList() {
this.api.getApi("/stu/class/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.stuName).then(res => {
this.tableData = res.data.list;
this.total = res.data.total;
this.page = res.data.pageNum;
this.limit = res.data.pageSize;
})
},
// 查询
getList() {
this.api.getApi("/stu/class/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.stuName).then(res => {
this.tableData = res.data.list;
this.total = res.data.total;
this.page = res.data.pageNum;
this.limit = res.data.pageSize;
})
},
// 查询系和学院
async queryCollege() {
this.departmentData = [];
this.collegeData = [];
await this.api.getApi("/stu/class/non/class").then(res => {
this.collegeData = res.data.college;
this.departmentData = res.data.department;
})
},
// 查询系和学院
async queryCollege() {
this.departmentData = [];
this.collegeData = [];
await this.api.getApi("/stu/class/non/class").then(res => {
this.collegeData = res.data.college;
this.departmentData = res.data.department;
})
},
// 筛选
filterTag(value, row) {
return row.sign === value;
},
// 筛选
filterTag(value, row) {
return row.sign === value;
},
// 清除
cleanUp() {
this.stuName = '';
this.getList();
},
// 清除
cleanUp() {
this.stuName = '';
this.getList();
},
// 编辑
editData(index, row) {
this.queryCollege();
this.wholeUser();
this.title = "编辑";
this.isEditable = true;
this.$set(this.addAndEditFormData, 'id', row.id);
this.$set(this.addAndEditFormData, 'name', row.name);
this.$set(this.addAndEditFormData, 'pid', row.pid);
this.$set(this.addAndEditFormData, 'sign', row.sign + '');
this.$set(this.addAndEditFormData, 'grade', row.grade);
this.$set(this.addAndEditFormData, 'userId', row.userId);
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
// 系和学院显示
this.sign = row.sign + '';
},
// 编辑
editData(index, row) {
this.queryCollege();
this.wholeUser();
this.title = "编辑";
this.isEditable = true;
this.$set(this.addAndEditFormData, 'id', row.id);
this.$set(this.addAndEditFormData, 'name', row.name);
this.$set(this.addAndEditFormData, 'pid', row.pid);
this.$set(this.addAndEditFormData, 'sign', row.sign + '');
this.$set(this.addAndEditFormData, 'grade', row.grade);
this.$set(this.addAndEditFormData, 'userId', row.userId);
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
// 系和学院显示
this.sign = row.sign + '';
},
// 删除
deleteData(id) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.api.deleteApi("/stu/class/delete?id=" + id).then(res => {
if (res.data.code === 200) {
this.getList();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
// 删除
deleteData(id) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.api.deleteApi("/stu/class/delete?id=" + id).then(res => {
if (res.data.code === 200) {
this.getList();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
},
});
},
// 关闭模态框
handleDialogClose() {
this.showAddAndEditForm = false;
this.addAndEditFormData = {};
this.addAndEditDialogFormVisible = false;
},
// 关闭模态框
handleDialogClose() {
this.showAddAndEditForm = false;
this.addAndEditFormData = {};
this.addAndEditDialogFormVisible = false;
},
// 保存/修改
handleConfirmEvent(formName) {
this.$refs[formName].validate(async valid => {
if (valid) {
let formData = this.addAndEditFormData;
if (this.isEditable) {
this.api.putApi("/stu/class/update", formData).then(res => {
if (res.data.code === 200) {
this.getList();
this.handleDialogClose();
}
})
} else {
this.api.postApi("/stu/class/add", formData).then(res => {
if (res.data.code === 200) {
this.getList();
this.handleDialogClose();
}
})
}
// 保存/修改
handleConfirmEvent(formName) {
this.$refs[formName].validate(async valid => {
if (valid) {
let formData = this.addAndEditFormData;
if (this.isEditable) {
this.api.putApi("/stu/class/update", formData).then(res => {
if (res.data.code === 200) {
this.getList();
this.handleDialogClose();
}
})
} else {
this.api.postApi("/stu/class/add", formData).then(res => {
if (res.data.code === 200) {
this.getList();
this.handleDialogClose();
}
})
}
})
},
}
})
},
// 分页大小
handleSizeChange(val) {
this.limit = val;
this.getList();
},
// 分页大小
handleSizeChange(val) {
this.limit = val;
this.getList();
},
// 第几页
handleCurrentChange(val) {
this.page = val;
this.getList();
},
// 第几页
handleCurrentChange(val) {
this.page = val;
this.getList();
},
// 加载全部用户
async wholeUser() {
this.userData = [];
await this.api.getApi("/manager/stu/whole/user").then(res => {
this.userData = res.data
})
},
// 加载全部用户
async wholeUser() {
this.userData = [];
await this.api.getApi("/manager/stu/whole/user").then(res => {
this.userData = res.data
})
},
// 监听类型的变化
monitorSign(value) {
this.sign = value;
},
}
// 监听类型的变化
monitorSign(value) {
this.sign = value;
},
}
}
</script>
<style scoped>
.title-add {
margin: 10px 10px 10px 0;
}
.title-add {
margin: 10px 10px 10px 0;
}
.bottom-page {
margin-top: 25px;
}
.bottom-page {
margin-top: 25px;
}
</style>
......@@ -2,15 +2,17 @@
<div>
<section>
<el-row class="title-add">
<el-col :span="17">
<el-col :span="16">
<el-button type="primary" icon="el-icon-plus" @click="addMenu">新增菜单</el-button>
</el-col>
<!--搜索条件-->
<el-col :span="4">
<el-input v-model="menuName" placeholder="请输入菜单名称" clearable></el-input>
</el-col>
<el-col :span="3">
<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
<el-col :span="2">
<el-button type="primary" icon="el-icon-search" style="margin-left: 15px" @click="getList">查询</el-button>
</el-col>
<el-col :span="2">
<el-button type="success" icon="el-icon-circle-close" @click="cleanUp">清除</el-button>
</el-col>
</el-row>
......@@ -62,18 +64,22 @@
</section>
<!--新增/编辑模态框-->
<el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible" :before-close="handleDialogClose">
<el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
<el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
:before-close="handleDialogClose">
<el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules"
class="form">
<el-row>
<el-col :span="10">
<el-form-item prop="name" label="菜单名称:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.name" placeholder="请输入菜单名称" style="width:100%" type="text" autosize></el-input>
<el-input v-model="addAndEditFormData.name" placeholder="请输入菜单名称" style="width:100%" type="text"
autosize></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="pid" label="父级:" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.pid" placeholder="请选择父级菜单" style="width:100%" clearable>
<el-option :value="pidTemp.id" :label="pidTemp.name" style="height:150px;overflow: auto;background-color:#fff">
<el-option :value="pidTemp.id" :label="pidTemp.name"
style="height:150px;overflow: auto;background-color:#fff">
<el-tree :data="pidData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-option>
</el-select>
......@@ -81,10 +87,12 @@
</el-col>
</el-row>
<el-form-item prop="code" label="权限code:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:90%" type="text" autosize></el-input>
<el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:90%" type="text"
autosize></el-input>
</el-form-item>
<el-form-item prop="url" label="页面url:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:90%" type="text" autosize></el-input>
<el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:90%" type="text"
autosize></el-input>
</el-form-item>
<el-row>
<el-col :span="10">
......@@ -98,7 +106,8 @@
</el-col>
<el-col :span="10">
<el-form-item prop="isVisible" label="是否启用:" :label-width="formLabelWidth">
<el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
<el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66"
inactive-color="#ff4949"></el-switch>
</el-form-item>
</el-col>
</el-row>
......@@ -180,14 +189,14 @@ export default {
id: '11',
name: '1'
},
iconData:["el-icon-delete-solid","el-icon-delete","el-icon-s-tools","el-icon-setting","el-icon-user-solid","el-icon-user","el-icon-phone","el-icon-phone-outline","el-icon-star-on",
"el-icon-star-off","el-icon-s-goods","el-icon-goods","el-icon-warning","el-icon-warning-outline","el-icon-question","el-icon-info","el-icon-remove","el-icon-circle-plus","el-icon-success",
"el-icon-error","el-icon-zoom-in","el-icon-zoom-out","el-icon-remove-outline","el-icon-circle-plus-outline","el-icon-circle-check","el-icon-circle-close","el-icon-s-help",
"el-icon-help","el-icon-picture","el-icon-picture-outline","el-icon-picture-outline-round","el-icon-upload","el-icon-camera-solid","el-icon-camera","el-icon-video-camera-solid","el-icon-video-camera",
"el-icon-message-solid","el-icon-bell","el-icon-s-cooperation","el-icon-s-order","el-icon-s-platform","el-icon-s-fold","el-icon-s-unfold","el-icon-s-operation","el-icon-s-promotion",
"el-icon-s-home","el-icon-s-release","el-icon-s-ticket","el-icon-s-management","el-icon-s-open","el-icon-s-shop","el-icon-s-marketing","el-icon-s-flag","el-icon-s-comment",
"el-icon-s-finance","el-icon-s-claim","el-icon-s-custom","el-icon-s-opportunity","el-icon-s-data","el-icon-s-check","el-icon-s-grid","el-icon-menu","el-icon-folder","el-icon-folder-opened",
"el-icon-folder-add","el-icon-folder-remove","el-icon-folder-delete","el-icon-folder-checked","el-icon-monitor","el-icon-coin"
iconData: ["el-icon-delete-solid", "el-icon-delete", "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user", "el-icon-phone", "el-icon-phone-outline", "el-icon-star-on",
"el-icon-star-off", "el-icon-s-goods", "el-icon-goods", "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus", "el-icon-success",
"el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help",
"el-icon-help", "el-icon-picture", "el-icon-picture-outline", "el-icon-picture-outline-round", "el-icon-upload", "el-icon-camera-solid", "el-icon-camera", "el-icon-video-camera-solid", "el-icon-video-camera",
"el-icon-message-solid", "el-icon-bell", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-fold", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion",
"el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment",
"el-icon-s-finance", "el-icon-s-claim", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-menu", "el-icon-folder", "el-icon-folder-opened",
"el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-monitor", "el-icon-coin"
]
}
},
......@@ -197,7 +206,7 @@ export default {
methods: {
getList() {
// 加载表格数据
this.api.getApi("/menu/get?page="+this.page+"&limit="+this.limit+"&name=" + this.menuName).then(res => {
this.api.getApi("/menu/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.menuName).then(res => {
this.tableData = res.data.list;
this.total = res.data.total;
this.page = res.data.pageNum;
......@@ -218,7 +227,7 @@ export default {
},
// 清除
cleanUp(){
cleanUp() {
this.menuName = '';
this.getList();
},
......@@ -229,7 +238,7 @@ export default {
},
// 选择icon图标
getIcon(value){
getIcon(value) {
this.addAndEditFormData.iconImg = value;
},
......@@ -245,32 +254,32 @@ export default {
await this.api.getApi("/menu/get/treeMenu").then(res => {
this.pidData = res.data;
// pid不为空时候去给pidTemp设置相应数值
if (pid !== ''){
for (let i = 0;i<res.data.length;i++) {
let temp = res.data[i];
if (temp.id === pid){
this.pidTemp.id = temp.id;
this.pidTemp.name = temp.name;
return;
}
if (temp.child !== undefined) {
this.findPid(temp.child, pid);
}
if (pid !== '') {
for (let i = 0; i < res.data.length; i++) {
let temp = res.data[i];
if (temp.id === pid) {
this.pidTemp.id = temp.id;
this.pidTemp.name = temp.name;
return;
}
if (temp.child !== undefined) {
this.findPid(temp.child, pid);
}
}
}
})
},
// 查找
findPid(data,pid){
for (let i = 0;i<data.length;i++){
findPid(data, pid) {
for (let i = 0; i < data.length; i++) {
let temp = data[i];
if (temp.id === pid){
if (temp.id === pid) {
this.pidTemp.id = temp.id;
this.pidTemp.name = temp.name;
return;
}
if (temp.child !== undefined){
if (temp.child !== undefined) {
this.findPid(temp.child, pid);
}
}
......@@ -327,7 +336,7 @@ export default {
if (valid) {
let formData = this.addAndEditFormData;
if (this.isEditable) {
if (formData.id === formData.pid){
if (formData.id === formData.pid) {
this.$message.error('出现错误,父级不可以是自己');
return;
}
......@@ -368,7 +377,7 @@ export default {
margin: 10px 10px 10px 0;
}
.bottom-page{
.bottom-page {
margin-top: 25px;
}
......@@ -376,7 +385,7 @@ export default {
padding: 12px 7px;
}
.icon-img{
.icon-img {
position: absolute;
right: 190px;
bottom: 20px;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册