mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-21 16:56:46 +08:00
所属组织页面调整
This commit is contained in:
wangxuemei
702
src/views/lecturer/Organization.vue
Normal file
702
src/views/lecturer/Organization.vue
Normal file
@@ -0,0 +1,702 @@
|
||||
<!-- 归属组织 -->
|
||||
<template>
|
||||
<!-- 搜索框及按钮 -->
|
||||
<div class="filter" style="min-width: 1380px; margin: 20px;" >
|
||||
<a-form layout="inline">
|
||||
<a-form-item class="select">
|
||||
<div style="width: 276px; height: 40px; border-radius: 8px" >
|
||||
<ProjectManager v-model:value="searchParam.userNo"
|
||||
v-model:name="searchParam.name"
|
||||
placeholder="请输入工号/讲师姓名进行检索"
|
||||
@onChange="managerChange" mode="multiple"></ProjectManager>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<a-button @click="searchSubmit()" type="primary" class="resetbtn">查询 </a-button>
|
||||
<!-- <div class="btn btn1" @click="searchReset" style="background:rgba(64, 158, 255, 0);" > -->
|
||||
<!-- <div class="search"></div> -->
|
||||
<a-button class="resetbtn " @click="searchReset">重置</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
<div style="width: 100%;"></div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<a-button @click="addTeacher()" type="primary" class="resetbtn" style="width: 130px;">
|
||||
<FolderAddOutlined /> 新增归属组织
|
||||
</a-button>
|
||||
</div>
|
||||
<a-table style="border: 1px solid #f2f6fe" :columns="columns" :data-source="tableData" :loading="tableLoading"
|
||||
@expand="expandTable" :pagination="false">
|
||||
<template #bodyCell="{ record, column }">
|
||||
<template v-if="column.key === 'operation'">
|
||||
<a-space >
|
||||
<a-button type="link" @click="() => handleModify(record, String(record.courseform))">编辑</a-button>
|
||||
<a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="tableBox ">
|
||||
<div style="float: right;">
|
||||
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
:showQuickJumper="true"
|
||||
:hideOnSinglePage="true"
|
||||
:pageSize="searchParam.pageSize"
|
||||
:current="searchParam.pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 删除功能弹窗 -->
|
||||
<div>
|
||||
<a-modal v-model:visible="deleteInTeacherdialog" :footer="null" :closable="close"
|
||||
centered="true">
|
||||
<div class="delete">
|
||||
<div class="del_header"></div>
|
||||
<div class="del_main">
|
||||
<div class="header">
|
||||
<div class="icon1"></div>
|
||||
<span>提示</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<span>您确定要删除当前组织吗</span>
|
||||
</div>
|
||||
<div class="del_btnbox">
|
||||
<div class="del_btn btn2" @click="cancelTeacherDialog" style="margin-right: 32px">
|
||||
<div class="btnText">取消</div>
|
||||
</div>
|
||||
<div class="del_btn btn2" @click="closeDeleteTeacher">
|
||||
<div class="btnText">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
<!-- 抽屉 -->
|
||||
<a-drawer v-model:visible="teacherdialog" placement="right" @closa="cancelTeacherDialog" :maskClosable="true"
|
||||
width="60%" :title="teacherdialogtitle">
|
||||
<a-form :model="formParam" :rules="rules" layout="vertical">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<span class="line"></span><span>讲师体系基本信息</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="归属组织编号" name="trainorgId">
|
||||
<a-input disabled v-model:value="formParam.trainorgId" class="draitem"
|
||||
placeholder="" allowClear showSearch>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="归属组织名称" name="trainorgName">
|
||||
<a-input v-model:value="formParam.trainorgName" class="draitem"
|
||||
placeholder="" allowClear showSearch>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="选中组织">
|
||||
<a-row :gutter="50" style="margin-bottom: 10px;">
|
||||
<a-col :span="2">
|
||||
<a-tag color="blue" style="line-height: 40px; ">管理业务</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<div class="add_content" @click="addContentData" >+</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
<!-- 备注 remark -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="备注">
|
||||
<a-textarea v-model:value="formParam.remark" showCount :maxlength="200"
|
||||
style="width: 100%; height: 100px; border-radius: 8px" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 交互按钮 -->
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
borderTop: '1px solid #e9e9e9',
|
||||
padding: '10px 16px',
|
||||
background: '#fff',
|
||||
textAlign: 'right',
|
||||
zIndex: 1,
|
||||
} "
|
||||
>
|
||||
<a-button class="drabtn" @click="cancelTeacherDialog" >取消</a-button>
|
||||
<a-button class="drabtn" type="primary" @click="createTeacherDialog" :loading="buttonLoading">保存
|
||||
</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
<AddContent v-model:showContent="showContent" @AddContentList="AddContentList" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
import { reactive, toRefs, ref, watch } from "vue";
|
||||
import {
|
||||
FolderAddOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import ProjectManager from "@/components/project/ProjectManagerNew";
|
||||
import { queryTrainOrg,deleteTrainOrg} from "../../api/organization";
|
||||
import AddContent from "../../components/project/AddContent.vue"
|
||||
export default{
|
||||
name:"organization",
|
||||
components: {
|
||||
ProjectManager,
|
||||
FolderAddOutlined,//图标--新增
|
||||
AddContent
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
showContent: false,
|
||||
tableLoading:false,
|
||||
deleteInTeacherdialog:false,
|
||||
teacherdialog:false,
|
||||
teacherdialogtitle:null,
|
||||
delId:null,
|
||||
searchParam: {
|
||||
trainorgId: null,
|
||||
userNo:null,
|
||||
trainorgName:null,
|
||||
pageNo: "1",
|
||||
pageSize: "10"
|
||||
},
|
||||
formParam:{
|
||||
trainorgId:null,
|
||||
trainorgName:null,
|
||||
remark:null
|
||||
}
|
||||
})
|
||||
function managerChange(e, l, d, t, orgName) {
|
||||
console.log(e, l);
|
||||
state.searchParam.trainorgId = d;
|
||||
state.searchParam.name = t;
|
||||
state.searchParam.trainorgName=orgName
|
||||
}
|
||||
const columns = ref([
|
||||
{
|
||||
title: '归属组织编号 ',
|
||||
dataIndex: 'trainorgId',
|
||||
key: 'trainorgId',
|
||||
elipsis: true,
|
||||
align: "center",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '归属组织名称 ',
|
||||
dataIndex: 'trainorgName',
|
||||
key: 'trainorgName',
|
||||
elipsis: true, align: "center",
|
||||
width: 600,
|
||||
},
|
||||
{
|
||||
title: '备注 ',
|
||||
dataIndex: 'remark',
|
||||
key: 'remark',
|
||||
elipsis: true, align: "center",
|
||||
width: 800,
|
||||
},
|
||||
{
|
||||
title: '操作 ',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
elipsis: true,
|
||||
width: 400,
|
||||
align: "right",
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
])
|
||||
//列表数据
|
||||
const tableData = ref([
|
||||
])
|
||||
// List接口数据
|
||||
const getTableDate = (obj) => {
|
||||
state.tableLoading = true
|
||||
let objA = { ...state.searchParam };
|
||||
queryTrainOrg(objA)
|
||||
.then((res) => {
|
||||
tableData.value = res.data.data.records
|
||||
state.tableDataTotal = Number(res.data.data.total);
|
||||
state.tableLoading = false
|
||||
})
|
||||
};
|
||||
getTableDate()
|
||||
// 搜索
|
||||
const searchSubmit = () => {
|
||||
getTableDate();
|
||||
};
|
||||
//重置
|
||||
const searchReset = () => {
|
||||
state.searchParam = {
|
||||
name:null,
|
||||
userNo: null,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
getTableDate();
|
||||
};
|
||||
// // 翻页
|
||||
const changePagination = (page, pageSize) => {
|
||||
state.searchParam.pageNo = page;
|
||||
getTableDate();
|
||||
};
|
||||
//删除弹窗
|
||||
const deleteModal = (record) => {
|
||||
state.deleteInTeacherdialog = true
|
||||
state.delId = record.kid
|
||||
};
|
||||
//确认删除
|
||||
const closeDeleteTeacher = () => {
|
||||
//调用删除接口
|
||||
deleteTrainOrg(state.delTeacherId).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
// message.success("删除成功");
|
||||
state.deleteInTeacherdialog = false
|
||||
getTableDate();
|
||||
}
|
||||
})
|
||||
}
|
||||
//取消按钮 清空输入的数据
|
||||
const cancelTeacherDialog = () => {
|
||||
if (state.teacherdialog = true) {
|
||||
state.teacherdialog = false
|
||||
cancel()
|
||||
}
|
||||
state.deleteInTeacherdialog = false
|
||||
state.editTeacher = false
|
||||
};
|
||||
const addTeacher=()=>{
|
||||
state.teacherdialog=true ,
|
||||
state.teacherdialogtitle="新增归属组织"
|
||||
}
|
||||
const addContentData = () => {
|
||||
state.showContent = true
|
||||
}
|
||||
//修改信息弹窗
|
||||
const handleModify = (record) => {
|
||||
state.teacherdialog = true;
|
||||
state.teacherdialogtitle = '修改归属组织'
|
||||
state.delId= record.kid
|
||||
TeacherSystem()
|
||||
}
|
||||
const cancel=()=>{
|
||||
state.formParam={
|
||||
trainorgId:null,
|
||||
trainorgName:null,
|
||||
remark:null
|
||||
}
|
||||
}
|
||||
//保存
|
||||
const createTeacherDialog = () => {
|
||||
console.log(state.formParam);
|
||||
if (state.formParam.kid != undefined) {
|
||||
updateInTeacher(state.formParam).then(response => {
|
||||
message.success("修改成功");
|
||||
});
|
||||
}
|
||||
else {
|
||||
insertTeacher(state.formParam)
|
||||
.then((res) => {
|
||||
message.success("保存成功");
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
state.teacherdialog = false;
|
||||
getTableDate();
|
||||
};
|
||||
const rules = {
|
||||
trainorgId: [{ required: true, message: '归属组织编号不能为空' }],
|
||||
trainorgName: [{ required: true, message: '归属组织名称不能为空' }],
|
||||
|
||||
|
||||
}
|
||||
return{
|
||||
...toRefs(state),
|
||||
rules,
|
||||
managerChange,
|
||||
columns,
|
||||
tableData,
|
||||
getTableDate,
|
||||
searchSubmit,
|
||||
searchReset,
|
||||
deleteModal,
|
||||
cancelTeacherDialog,
|
||||
addTeacher,
|
||||
addContentData,
|
||||
handleModify,
|
||||
closeDeleteTeacher,
|
||||
changePagination
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.add_content{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
background-color: #4ea6ff;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #ffffff;
|
||||
font-size: 26px;
|
||||
}
|
||||
//导出按钮icon
|
||||
.daochu {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/coursewareManage/export1.png");
|
||||
}
|
||||
|
||||
//弹窗内详情样式
|
||||
.display1 {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
// .display0{
|
||||
// display:inline-block ;
|
||||
// width:200px ;
|
||||
// text-align:center }
|
||||
//弹窗内确认取消按钮布局
|
||||
.del_btnbox {
|
||||
display: flex;
|
||||
margin: 30px auto;
|
||||
justify-content: center;
|
||||
|
||||
.del_btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
border: 1px solid rgba(64, 158, 255, 1);
|
||||
color: #4ea6ff;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
background-color: #4ea6ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-cell-fix-right {
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr>td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.InsideLecturer { width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 38px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}}
|
||||
|
||||
.delete {
|
||||
z-index: 9999;
|
||||
width: 424px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 10%;
|
||||
// transform: translate(-50%, -50%);
|
||||
|
||||
.del_header {
|
||||
position: absolute;
|
||||
width: calc(100%);
|
||||
height: 40px;
|
||||
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
|
||||
rgba(78, 166, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.del_main {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding-left: 26px;
|
||||
font-size: 16px;
|
||||
|
||||
.del-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
background-image: url(@/assets/images/coursewareManage/notice.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
background-image: url(@/assets/images/coursewareManage/QR.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.close_exit {
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
width: 100%;
|
||||
margin: 34px auto 56px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.del_btnbox {
|
||||
display: flex;
|
||||
margin: 30px auto;
|
||||
justify-content: center;
|
||||
|
||||
.del_btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
border: 1px solid rgba(64, 158, 255, 1);
|
||||
color: #4ea6ff;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
background-color: #4ea6ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CreatePath {
|
||||
.out {
|
||||
z-index: 9999;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
width: 1080px !important;
|
||||
height: 650px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
|
||||
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
|
||||
left: 50%;
|
||||
top: 300px;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
|
||||
background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
|
||||
rgba(78, 166, 255, 0) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.topimg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 27px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.topc {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.d {
|
||||
// margin-top: 8px;
|
||||
// color: #ff4e4e;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重置样式
|
||||
.resetbtn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//展开收起样式
|
||||
.moreidbtn {
|
||||
border: none;
|
||||
color: #4ea6ff;
|
||||
width: 80px
|
||||
}
|
||||
|
||||
//小竖线
|
||||
.line{
|
||||
float:left; width: 3px; height: 25px; background: #4ea6ff;border-radius: 30%; margin-right: 5px;
|
||||
}
|
||||
//抽屉功能
|
||||
.drawaer
|
||||
/* 改变所有 a-tree-select 输入框的高度 */
|
||||
.ant-tree-select .ant-select-selection {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
/* 确保文字垂直居中 */
|
||||
}
|
||||
.draitem{
|
||||
width: 100%;
|
||||
height: 40px !important;
|
||||
border-radius: 8px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.drabtn{
|
||||
height:40px;
|
||||
width:80px;
|
||||
border-radius:8px;
|
||||
margin-right:20px
|
||||
}
|
||||
::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector{
|
||||
border-radius:8px;
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.ant-col-12{
|
||||
height:80px;
|
||||
}
|
||||
.item_inp {
|
||||
flex: 1;
|
||||
text-align: center ;
|
||||
.i_upload_img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.i_upload {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #4ea6ff;
|
||||
border-radius:50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.addimg {
|
||||
position: relative;
|
||||
|
||||
.heng {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
border: 1px solid #4ea6ff;
|
||||
}
|
||||
|
||||
.shu {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid #4ea6ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload.ant-upload-select-picture-card {
|
||||
border: 0px !important;
|
||||
border-radius: 50%!important;
|
||||
}
|
||||
}
|
||||
.ant-upload.ant-upload-select-picture-card {
|
||||
border: 0px !important;
|
||||
border-radius: 50%!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user