vue点击左右按钮实现左右滚动

好运季

已于 2023-06-13 16:25:09 修改

阅读量5.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript

于 2023-06-13 14:24:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41438838/article/details/131187485

此代码实现了一个实习护士轮转管理的列表界面，包括搜索功能、新增、编辑、删除操作。用户可以搜索实习护士的编号、姓名、毕业学校和联系电话，查看其轮转科室、轮转状态等信息。界面支持分页加载和无限滚动，以及手动轮转和新增轮转的弹窗操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div

class="workPreview"

v-loading.fullscreen.lock="fullscreenLoading"

element-loading-text="拼命加载中"

element-loading-spinner="el-icon-loading"

element-loading-background="rgba(0, 0, 0, 0.7)"

</span>

<div>{{$route.meta.title}}</div>

<el-button

type="primary"

@click="rewRotation"

size="mini"

style="background:#4D84FF;position: absolute;top: 6px;right: 8px;"

>新增</el-button>

</div>

<div

style="display:flex;position: relative;padding-left:4px;width: 14%;max-width: 200px;"

<el-input

v-model="searchParameters.searchName"

@input="inputHandleChange()"

clearable

></el-input>

</div>

<div

style="display:flex;position: relative;padding-left:4px;width: 14%;max-width: 200px;"

<university

:collegsArr="collegsArr"

:showsData="collegsSelect"

:collegsParams="collegsParams"

selectType

@getCollegs="getcollegessearchList"

@searchSelectDept="getUniversitySelect"

</div>

<div

style="display:flex;position: relative;padding-left:4px;width: 14%;max-width: 200px;"

<custom-select

ref="customSelect"

:applyWardArr="educationStatuslist"

:placeholder="'请选择'"

:width="200"

:height="160"

@getSelectData="getSelectinternshipStatusCode"

@empty="emptySelectinternshipStatusCode"

</div>

<div

style="display:flex;position: relative;padding-left:4px;width: 14%;max-width: 200px;"

<el-input

v-model="searchParameters.phone"

@input="inputHandleChange()"

clearable

></el-input>

</div>

</div>

<ul

class="list_box"

v-infinite-scroll="load"

infinite-scroll-disabled="disabled"

:infinite-scroll-distance="100"

ref="tableScrollTable"

<svg-icon

class="iconSvg blue m-l-20 m-r-8"

style="font-size:16px;"

:icon-class="'departClassifySvg'"

<span>{{item.groupName}}</span>

</div>

</div>

<div

v-show="!item.isShowChildren"

v-for="(cNode,cIndex) in item.children"

:key="cIndex"

style="display: flex;border-bottom: 1px solid #d5d5d5;"

<div

style="width:220px;border-right: 1px solid #d5d5d5;height: 102px;padding:0px 5px 0px 15px;display: flex;align-items: center;"

:class="cNode.internshipStatusCode=='1'?'backgroundImg':cNode.internshipStatusCode=='2'?'tqzzbackgroundImg':cNode.internshipStatusCode=='3'?'asjsbackgroundImg':cNode.internshipStatusCode=='4'?'yqjsbackgroundImg':'backgroundImg'"

<div style="width:35%;display: flex;align-items: center;justify-content: center;">{{cNode.staffName}}</div>

<div style="width:100%;text-align: center;color: #558AFF;font-size: 12px;height:20px;line-height:20px;background: #D6E6FE;border-radius: 10px;">{{cNode.staffCode}}</div>

<div style="width:100%;text-align: center;color: #558AFF;font-size: 12px;margin-top:5px;height:20px; line-height:20px;background: #D6E6FE;border-radius: 10px;">{{cNode.phone}}</div>

</div>

<div style="width:87%;height: 102px;overflow: auto;"

v-if="showPrevIcon"

@click="prevItem(cNode,cIndex)">

</svg>

<div class="vertical-item"

:style="

`transform:translate(${cNode.scrollResultWidth}px,0);transition:0.7s;`

<div

class="item"

v-for="(iNode,iIndex) in cNode.rotationItemList"

<div

style="width:100%;height: 32px;line-height: 32px;text-align: center;padding: 2px 0;font-size: 14px;color: #4D84FF;display:flex;align-items: center;"

<div style="width:85%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; ">{{iNode.deptName}}</div>

<div

style="position: relative;right: -13px;top: -7px;"

@click="delListClick(iNode,cNode)"

v-if="iNode.rotationStatus=='0'"

<span class="app_btn_sp icon_danger_bgColor dele_list_svg"

style="height: 16px;line-height: 16px;width: 16px;">

</span>

</div>

<div

style="height: 62px;line-height: 24px;text-align: left;padding: 3px;font-size: 14px;font-weight: 400;color: #333333;"

@click="getInternshipRotationhandRotationUpdate(iNode,cNode)"

<div>

<div style="height:24px;line-height:24px;">{{iNode.startTime}}</div>

<div style="height:24px;line-height:24px;">{{iNode.endTime}}</div>

</div>

</div>

<img

v-if="iIndex< cNode.rotationItemList.length-1"

src="@/assets/imgs/youjiantou.svg"

alt

style="width: 33px;height: 30px;"

<img

v-if="iIndex== cNode.rotationItemList.length-1 && cNode.internshipStatusCode=='1' || cNode.internshipStatusCode=='4'"

src="@/assets/imgs/youjiantougray.svg"

alt

style="width: 33px;height: 30px;"

<div

style="display: flex;justify-content: center;align-items: center;cursor: pointer;"

@click="openOneRtation(cNode,'lbtc')"

v-if="iIndex== cNode.rotationItemList.length-1 && cNode.internshipStatusCode=='1'|| cNode.internshipStatusCode=='4'"

<img

src="@/assets/imgs/jia.svg"

style="width: 25px;height: 25px;margin-top: 48px;"

alt

</div>

v-if="showNextIcon"

@click="nextItem(cNode,cIndex)">

</svg>

</div>

</li>

<i class="el-icon-loading" style="font-size:20px;"></i>加载中...

</p>

</ul>

</div>

<el-dialog

title="新增轮转"

:visible.sync="rtationOpen"

width="600px"

append-to-body

:close-on-click-modal="false"

:show-close="false"

<el-form :model="newRtationForm" ref="rightParams" label-width="80px" class="demo-ruleForm">

<el-form-item v-if="showlzry" class="border-t border-l border-r p-l-8">

<span class="star">*</span>轮转人员:

</div>

<el-popover v-if="addry"

placement="bottom"

width="500"

trigger="click"

<div slot="reference" style="border: 1px solid #d0d0d0;

font-size: 14px;

border-radius: 5px;

height: 32px;

line-height: 32px;

padding-left: 4px;

display: flex;

overflow: hidden;

overflow-x: auto;

align-items: center;">

<el-tag style="margin-right:5px;" v-for="(item,index) in staffNames" :key="index" closable @close="handleClose(item)">{{item.staffName}}</el-tag>

</div>

</el-popover>

<div v-else style="border: 1px solid #d0d0d0;

font-size: 14px;

border-radius: 5px;

height: 32px;

line-height: 32px;

padding-left: 4px;

display: flex;

align-items: center;">

<el-tag>{{newRtationForm.staffName}}</el-tag>

</div>

</el-form-item>

<el-form-item class="border-t border-l border-r p-l-8">

<span class="star">*</span>轮转科室:

</div>

<TestedWardSelect

:testedWardSelectData="testedWardSelectData"

:showData="deptShowArrTwo"

@searchSelectDept="getWardListSelect"

:popoverwidth="'480'"

></TestedWardSelect>

</div>

</el-form-item >

<el-form-item class="border-t border-l border-r border-b p-l-8">

<span class="star">*</span>轮转期间:

</div>

<el-date-picker

type="date"

placeholder="选择日期"

v-model="newRtationForm.startTime"

value-format="yyyy-MM-dd"

style="width: 48%;">

</el-date-picker>

<el-date-picker

type="date"

placeholder="选择日期"

v-model="newRtationForm.endTime"

@change="endChange"

value-format="yyyy-MM-dd"

:default-value='newRtationForm.startTime'

style="width: 48%;">

</el-date-picker>

</div>

</el-form-item>

</el-form>

</div>

</div>

</el-dialog>

<DelDialog

:dialogVisibleDel.sync="dialogVisibleDel"

:delContent="delContent"

@delRowData="submitDel"

></DelDialog>

</div>

</template>

import {

getBasicInfo,

dictDatadictType,

selectDetailByItemCode,

collegessearchList,

personalFilesselectDictDeptList

} from "@/api/handleView/personalfile";

import {

InternshipRotationhandRotationList,

InternshipRotationhandRotationSave,

InternshipRotationhandRotationUpdate,

InternshipRotationhandRotationDelete,

InternshipRotationpersonAddList

} from "@/api/handleView/gphsinternNurseManagelist";

import TestedWardSelect from "@/views/components/component/testedWardSelect/selectIndex.vue";

import py from "@/utils/lbdz";

import NoData from "@/views/components/noData/index.vue";

import personnelSelect from "@/views/components/personnelSelect/index.vue";

import rotationofstudentnurseslist from "./rotationofstudentnurseslist";

import personlist from "./personlist.vue";

import university from "@/views/components/component/university/index.vue";

import customSelect from "@/views/components/customSelect/indexThree.vue";

import DelDialog from "@/views/components/dialogDel/index.vue";

export default {

name: "listOfProblem",

components: {

NoData,

personnelSelect,

TestedWardSelect,

university,

customSelect,

DelDialog,

rotationofstudentnurseslist,

personlist

data() {

return {

lzrydisabled: false,

showPrevIcon: true,

showNextIcon: true,

addry: true,

// showsjnum:9,

// clickNum: 0,//点击次数

lastLeft: 0,

maxClickNum: 0, // 最大点击次数

// scrollResultWidth:0,//transform滚动的距离

dialogVisibleDel: false, // 删除提示弹窗

regConfirmDialogFlag: false, // 检查确认

delContent: "是否确认删除该数据？",

delRowInfo:{},

delrowdata:{},

rowdata:{},

fullscreenLoading: true,

tabledata: [],

searchParameters: {

searchName: "",

schoolCode: "",

phone: "",

degreeCode: "",

pageNum: 1,

pageSize: 60,

total: 0

tabledataListTitle: [],

schoollist:[],

//院校

collegsArr: [],

collegsSelect: {

collegesCode : [],

collegesName : [],

collegsParams: {

searchKey: "",

pageNum: 1,

pageSize: 60,

total: 0

//人员

personcollegsArr: [],

personcollegsSelect: [],

personcollegsParams: {

// searchKey: "",

internshipRotationId:"",

searchName:"", //

schoolCode:"", //

pageNum: 1,

pageSize: 60,

total: 0

educationStatuslist:[],

showlzry:true,

loading: false,

rtationOpen: false,

staffNames: [],

newRtationForm: {

// deptCode: "",

// deptName: "",

// startTime: "",

// endTime: "",

// staffCode:"",

personnelList: [],

personnelValue: "",

testedWardSelectData: {},

deptShowArrTwo: {

deptCode:"",

deptName:"",

};

watch: {

topSearchObj: {

deep: true, // 深度监听

handler(newVal, oldVal) {}

}

computed: {

noMore() {

return (

this.searchParameters.pageNum >=

Math.ceil(this.searchParameters.total / this.searchParameters.pageSize)

);

disabled() {

return this.loading || this.noMore;

}

created() {

setTimeout(() => {

this.fullscreenLoading = false;

}, 1000);

this.getallFilesList();

this.getTestedWardlistTwo();

this.getcollegessearchList();

this.getdictDatadictType();

if(this.$route.query.staffCode){

// this.rewRotation()

this.rtationOpen = true;

// this.lzrydisabled=true

this.$set(this.newRtationForm,"staffCode",this.$route.query.staffCode)

this.$set(this.newRtationForm,"staffName",this.$route.query.staffName)

this.addry=false

}

computed: {

// showPrevIcon () {

// return this.clickNum > 0

// }

mounted() {

//根据屏幕确定要显示的条数

if(document.body.clientWidth<1100){

this.showsjnum=3

}else{

this.showsjnum=9

}

methods: {

goBack() {

if(this.$route.query.metatitle){

this.$router.replace({

path: "/rulesNurseManage/"+this.$route.query.metatitle,

query: {

internshipRotationId: this.$route.query.internshipRotationId,

metatitle:'gphsrotationofstudentnurses',

batchStatus: this.$route.query.batchStatus,

}

});

}else{

const accessRoutes = JSON.parse(sessionStorage.getItem("currentRoute"));

let url =

"/secondView?name=" +

accessRoutes.meta.title

// +"&id=" +

// new Date().getTime();

this.$router.replace(url);

}

openOrClose(dataInfo) {

if (dataInfo.isShowChildren) {

dataInfo.isShowChildren = false;

} else {

dataInfo.isShowChildren = true;

let tableScroll = this.$refs.tableScrollTable;

setTimeout(() => {

if (tableScroll.scrollHeight == tableScroll.clientHeight) {

if (

this.searchParameters.pageNum <

Math.ceil(

this.searchParameters.total / this.searchParameters.pageSize

)

) {

this.load();

}

}, 200);

}

this.$forceUpdate();

inputHandleChange() {

this.debounce(() => {

this.searchParameters.pageNum = 1;

this.getallFilesList();

}, 500)();

handleChange() {

this.searchParameters.pageNum = 1;

this.getallFilesList();

//左滑

prevItem(cNode,cIndex){

console.log(this.clickNum,"===========this.clickNum")

// 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头

if (cNode.clickNum > 0) {

//获取当前元素宽度

// let width = document.querySelectorAll('.item')[this.clickNum - 1].offsetWidth

let width =153

// 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离

// document.querySelector('.vertical-item').style.marginLeft = `${width + this.lastLeft}px`

// this.lastLeft = width + this.lastLeft

cNode.scrollResultWidth+= width

this.$forceUpdate();

//点击次数-1

cNode.clickNum--

if (cNode.clickNum < this.maxClickNum) {

return

// this.showNextIcon = true

}

console.log(cNode,"================cNode")

//右滑

nextItem(cNode,cIndex){

console.log(cNode,"===========")

this.tabledata.findIndex

var cIndex=this.tabledata.findIndex(it => it === cNode)

if (cNode.clickNum < cNode.rotationItemList.length - 1) {

//获取当前元素宽度

// let width = document.querySelectorAll('.item')[this.clickNum].offsetWidth

// let width = this.$refs['vertical-scroll'+cNode.id][0].querySelectorAll('.item')[this.clickNum].offsetWidth

let width = 153

// 获取最后一个元素距离左侧距离

// console.log(this.$refs,cIndex,"==========vertical-scroll")

// console.log(this.$refs['vertical-scroll'+cNode.id][0],"==========vertical-scroll")

let lastItemOffsetLeft = this.$refs['vertical-scroll'+cNode.id][0].querySelectorAll('.item')[cNode.rotationItemList.length - 1].offsetLeft

// 获取可视区域宽度

// let lookWidth = document.querySelector('.vertical-scroll').clientWidth

let lookWidth = this.$refs['vertical-scroll'+cNode.id][0].clientWidth

console.log('移动前》》》', lastItemOffsetLeft, lookWidth,this.clickNum,width);

// 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果

if (lastItemOffsetLeft-cNode.clickNum*width+273 > lookWidth) {

// 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离

// document.querySelector('.vertical-item').style.marginLeft = `${-width + this.lastLeft}px`

// this.lastLeft = -width + this.lastLeft

cNode.scrollResultWidth-= width

this.$forceUpdate();

cNode.clickNum += 1

// 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示

this.maxClickNum = cNode.clickNum

console.log(this.lastLeft,cNode.clickNum)

}else{

return

}

// this.showNextIcon = lastItemOffsetLeft > lookWidth + width

}

//审批记录列表

getallFilesList() {

if (this.requestHttpFlag) {

return;

}

this.requestHttpFlag = true;

var params = {

searchName: this.searchParameters.searchName, //

schoolCode: this.searchParameters.schoolCode, //

phone: this.searchParameters.phone, //

degreeCode: this.searchParameters.degreeCode, //

pageSize: this.searchParameters.pageSize, //

pageNum: this.searchParameters.pageNum //

};

if (params.pageNum == 1) {

this.tabledata = [];

this.tabledataListTitle = [];

}

console.log(params,"==========params")

InternshipRotationhandRotationList(params)

.then(response => {

setTimeout(() => {

this.requestHttpFlag = false;

}, 500);

if (response.code == 200) {

if (this.searchParameters.pageNum == 1) {

console.log(response,"=============")

this.tabledata = response.rows;

this.tabledata.forEach(item => {

this.tabledataListTitle.push(item.groupName);

//首次存储数据左右滑动处理

item.children.forEach(element => {

// 3 9

element.scrollResultWidth=0

element.clickNum=0

// element.rotationItemListarr=element.rotationItemList.slice(0,this.showsjnum)

});

this.$forceUpdate();

this.searchParameters.total = Number(response.total);

return;

}

let arr = [];

response.rows.forEach((newItem, index) => {

//先把一级中没有的push进去

if (this.tabledataListTitle.indexOf(newItem.groupName) == -1) {

//如果bu存在

this.tabledata.push(newItem);

this.tabledataListTitle.push(newItem.groupName);

} else {

arr.push(newItem);

}

});

if (arr.length > 0) {

this.tabledata = this.diffArrAllMegerThree(this.tabledata, arr);

}

this.$forceUpdate();

this.searchParameters.total = Number(response.total);

}

})

.catch(err => {

setTimeout(() => {

this.requestHttpFlag = false;

}, 500);

});

// 懒加载

load() {

if (this.requestHttpFlag) {

return;

}

this.loading = true;

setTimeout(() => {

this.searchParameters.pageNum++;

this.loading = false;

this.getallFilesList();

}, 2000);

// togglesNode(node, type) {

// node.isShowChildren = !node.isShowChildren;

// if (node.isShowChildren) {

// let tableScroll = this.$refs.tableScroll;

// setTimeout(() => {

// if (tableScroll.scrollHeight == tableScroll.clientHeight) {

// if (

// this.topSearchObj.pageNum <

// Math.ceil(this.total / this.topSearchObj.pageSize)

// ) {

// this.load();

// }

// }, 200);

// }

// this.$forceUpdate();

// },

rewRotation() {

this.rtationOpen = true;

this.showlzry=true

this.lzrydisabled=false

this.newRtationForm={}

this.$set(this.newRtationForm,"staffCode","")

this.$set(this.newRtationForm,"startTime","")

this.$set(this.newRtationForm,"endTime","")

this.personcollegsSelect=[]

this.getpersoncollegessearchList()

this.addry =true

// this.$nextTick(() => {

// this.$refs.personlist.delall()

// })

this.$nextTick(() => {

this.staffNames=[]

this.$refs.rotationofstudentnurseslist.getauditRecordList()

this.$refs.rotationofstudentnurseslist.delids()

})

this.deptShowArrTwo = {

deptCode: "",

deptName: "",

};

// getListWaitForDistribution().then(res => {

// this.personnelList = res.rows;

// });

//新增人员-查询列表

// var parmas={

// internshipRotationId:"",

// pageSize:"",

// pageNum:"",

// searchName:"",

// schoolCode:"",

// }

// InternshipRotationpersonAddList(parmas).then(res => {

// if (res.code == 200) {

// // console.log(res,"============")

// this.personnelList=res.rows

// }

// })

// if(this.$route.query.staffCode){

// this.staffNames.push({

// staffCode: this.$route.query.staffCode,

// staffName: this.$route.query.staffName

// });

// }else{

// this.staffNames=[]

// }

// 编辑

getInternshipRotationhandRotationUpdate(data, sjdata) {

console.log(data,sjdata,"=================sjdata")

if(data.rotationStatus=='1'){

this.$message({

message: '正在轮转中，不可修改',

type: 'warning'

});

return

}

if(data.rotationStatus=='2'){

this.$message({

message: '已完成轮转，不可修改',

type: 'warning'

});

return

}

if(data.rotationStatus=='0'){

this.rtationOpen = true;

}

this.rowdata = sjdata;

this.showlzry=false

this.newRtationForm =JSON.parse(JSON.stringify(data))

this.deptShowArrTwo = {

deptCode: this.newRtationForm.deptCode,

deptName:this.newRtationForm.deptName,

};

// var index=sjdata.rotationItemList.findIndex(it => it === data)

getids(ids){

console.log(ids,"======ids======")

var idslist=[]

this.staffNames=ids

ids.forEach(element => {

idslist.push(element.staffCode)

});

// this.staffNames

this.$set(this.newRtationForm,"staffCode",idslist.join(","))

handleClose(item){

this.$refs.rotationofstudentnurseslist.delitem(item.staffCode)

addAtation() {

if(this.showlzry){//批量人员新增

// if (

// this.newRtationForm.staffCode &&

// this.newRtationForm.deptCode &&

// this.newRtationForm.deptName &&

// this.newRtationForm.startTime &&

// this.newRtationForm.endTime

// ) {

if(!this.newRtationForm.staffCode){

this.$message.error("请选择轮转人员！");

return

}else if(!this.newRtationForm.deptCode){

this.$message.error("请选择轮转科室！");

return

}else if(!this.newRtationForm.startTime || !this.newRtationForm.endTime ){

this.$message.error("请选择轮转期间！");

return

}

console.log(this.newRtationForm,"========newRtationForm批量人员新增====")

InternshipRotationhandRotationSave(this.newRtationForm).then(res => {

if (res.code == 200) {

this.$message.success("新增成功！");

this.rtationOpen = false;

this.loading = true;

setTimeout(() => {

this.loading = false;

this.getallFilesList();

}, 200);

}

});

// } else {

// this.$message.error("请填写完整！");

// console.log(this.newRtationForm,"============")

// }

}else{

// if (

// this.newRtationForm.deptCode &&

// this.newRtationForm.deptName &&

// this.newRtationForm.startTime &&

// this.newRtationForm.endTime

// ) {

if(!this.newRtationForm.deptCode){

this.$message.error("请选择轮转科室！");

return

}else if(!this.newRtationForm.startTime || !this.newRtationForm.endTime ){

this.$message.error("请选择轮转期间！");

return

}

console.log(this.newRtationForm,"========newRtationForm====")

if(this.newRtationForm.id){

InternshipRotationhandRotationUpdate(this.newRtationForm).then(res => {

if (res.code == 200) {

this.$message.success("编辑成功！");

this.rtationOpen = false;

this.loading = true;

setTimeout(() => {

this.loading = false;

// this.rowdata

this.tabledata.forEach(element => {

if(element.groupName==this.rowdata.preparerDepartName){

element.children.forEach(item => {

if(item.staffCode==this.newRtationForm.staffCode){

item.rotationItemList.forEach(it => {

if(it.id==this.newRtationForm.id){

it.actualEndTime=this.newRtationForm.actualEndTime

it.deptCode=this.newRtationForm.deptCode

it.deptName=this.newRtationForm.deptName

it.endTime=this.newRtationForm.endTime

it.id=this.newRtationForm.id

it.rotationStatus=this.newRtationForm.rotationStatus

it.staffCode=this.newRtationForm.staffCode

it.startTime=this.newRtationForm.startTime

}

});

}

});

}

});

}, 200);

}

});

}else{

InternshipRotationhandRotationSave(this.newRtationForm).then(res => {

if (res.code == 200) {

this.$message.success("新增成功！");

this.rtationOpen = false;

this.loading = true;

setTimeout(() => {

this.loading = false;

// if(this.tabledata.length>0){

// //不刷新列表处理数据

// this.getallFilesList11();

// }else{

// this.getallFilesList();

// }

// this.getallFilesList();

this.tabledata.forEach(element => {

if(element.groupName==this.rowdata.preparerDepartName){

element.children.forEach(item => {

if(item.staffCode==this.rowdata.staffCode){

var params={

id:res.data.id,

deptCode: this.newRtationForm.deptCode,

deptName: this.newRtationForm.deptName,

endTime: this.newRtationForm.endTime,

startTime: this.newRtationForm.startTime,

staffCode: this.newRtationForm.staffCode,

preparerDepartName:this.rowdata.preparerDepartName,

rotationStatus:res.data.rotationStatus,

}

item.rotationItemList.push(params)

// item.rotationItemListarr = item.rotationItemList.slice(-this.showsjnum)

}

});

}

})

}, 200);

}

});

}

// } else {

// this.$message.error("请填写完整！");

// console.log(this.newRtationForm,"============")

// }

}

//删除

delListClick(data,sjdata){

console.log(data,sjdata,"======dddd=========")

this.dialogVisibleDel = true;

this.rowdata=sjdata

this.delrowdata=data

this.delRowInfo = {

id:data.id,

staffCode:sjdata.staffCode,

}

// 确定删除

submitDel() {

InternshipRotationhandRotationDelete(this.delRowInfo).then(res => {

if (res.code == 200) {

this.dialogVisibleDel = false;

this.$message({

message: res.msg,

type: "success"

});

this.tabledata.forEach(element => {

if(element.groupName==this.rowdata.preparerDepartName){

element.children.forEach(item => {

if(item.staffCode==this.rowdata.staffCode){

var index = item.rotationItemList.findIndex(

it => it === this.delrowdata

);

item.rotationItemList.splice(index, 1);

if(item.clickNum>0){

item.scrollResultWidth+= 153

item.clickNum--

console.log(item.clickNum,"===========")

}

this.dialogVisibleDel = false;

}

});

}

});

// (this.searchParameters.pageNum = 1), this.getallFilesList();

} else {

this.$message({

message: res.msg,

type: "error"

});

}

});

//列表加号

openOneRtation(data,lbtc) {

console.log(data,lbtc,"======data=========")

this.rowdata=data

if(lbtc){//

this.showlzry=false

}

this.newRtationForm={}

if(data.rotationItemList.length>0){

var sjendTime= data.rotationItemList[data.rotationItemList.length-1].endTime

var endws=parseInt(sjendTime.split('-')[2])>=10?parseInt(sjendTime.split('-')[2])+1:'0'+(parseInt(sjendTime.split('-')[2])+1)

var ss= sjendTime.split('-')[0]+'-'+sjendTime.split('-')[1]+'-'+endws

// console.log(sjendTime.split('-'),"=========sjendTime.split('-')====")

// this.newRtationForm.startTime= sjendTime.split('-')[0]+'-'+sjendTime.split('-')[1]+'-'+(parseInt(sjendTime.split('-')[2])+1)

// console.log(parseInt(sjendTime.split('-')[2]),"===================")

// var endws=parseInt(sjendTime.split('-')[2])>9?parseInt(sjendTime.split('-')[2])+1:'0'+(parseInt(sjendTime.split('-')[2])+1)

// var ss= sjendTime.split('-')[0]+'-'+sjendTime.split('-')[1]+'-'+endws

this.$set(this.newRtationForm,'startTime',ss)

}

this.rtationOpen = true;

// this.staffNames = [];

this.$set(this.newRtationForm,"staffCode",data.staffCode)

this.deptShowArrTwo = {

deptCode: "",

deptName: "",

};

// this.staffNames.push(data.staffCode)

// this.staffNames.push({

// staffCode: data.staffCode,

// staffName: data.staffName

// });

endChange(){

if(this.newRtationForm.startTime){

if (new Date(this.newRtationForm.endTime).getTime() <= new Date(this.newRtationForm.startTime).getTime()) {

this.$message.error("结束始时间不能小于等于开始始时间！");

this.newRtationForm.endTime = "";

return

}

}else{

this.$message.error("请选择开始时间!");

}

cancelAtation() {

this.rtationOpen = false;

this.personnelValue = "";

// getPersonnelValue(data) {

// this.staffNames = [];

// if (data && data.length > 0) {

// data.forEach(it => {

// this.staffNames.push({

// staffCode: it.staffCode,

// staffName: it.staffName

// });

// } else {

// this.staffNames = [];

// }

// },

//获取院校

getcollegessearchList(e) {

if (e) {

this.collegsParams = e;

}

collegessearchList(this.collegsParams).then(response => {

if (response.code == "200") {

if (this.collegsParams.pageNum == 1) {

this.collegsArr = [];

this.collegsArr = response.rows;

} else {

this.collegsArr = this.collegsArr.concat(response.rows);

}

this.collegsParams.total = Number(response.total);

}

});

// 获取学校数据

getUniversitySelect(dataInfo){

console.log(dataInfo,dataInfo.selectDeptCode,"========dsada")

this.searchParameters.schoolCode=dataInfo.selectDeptCode

this.searchParameters.pageNum = 1;

this.handleChange()

//获取人员

getpersoncollegessearchList(e) {

if (e) {

this.personcollegsParams = e;

}

InternshipRotationpersonAddList(this.personcollegsParams).then(response => {

if (response.code == "200") {

if (this.personcollegsParams.pageNum == 1) {

this.personcollegsArr = [];

console.log(response.rows,"===============response.rows")

response.rows.forEach(element => {

var arrdata={

staffCode:element.staffCode,

staffName:element.staffName,

}

this.personcollegsArr.push(arrdata)

// this.personcollegsArr = response.rows;

});

} else {

this.personcollegsArr = this.cpersoncollegsArrollegsArr.concat(response.rows);

}

this.personcollegsParams.total = Number(response.total);

}

});

// 获取人员数据

getUniversitySelectperson(dataInfo){

console.log(dataInfo,dataInfo.selectDeptCode,"======111==dsada")

this.newRtationForm.staffCode=dataInfo.selectDeptCode

// this.staffNames=

// this.searchParameters.schoolCode=dataInfo.selectDeptCode

// this.searchParameters.pageNum = 1;

// this.handleChange()

//获取下拉列表

getdictDatadictType() {

var params = {

dictTypes:

"educationStatus"

};

dictDatadictType(params).then(res => {

if (res.code == "200") {

console.log(res.data.educationStatus,"===========学历")

res.data.educationStatus.map(item => {

item.value = item.dataVal;

item.label = item.dataTag;

});

this.educationStatuslist = res.data.educationStatus //学历

}

})

// 获取学历

getSelectinternshipStatusCode(data, dataTwo) {

console.log(data, dataTwo);

this.searchParameters.pageNum = 1;

this.searchParameters.degreeCode =(dataTwo && dataTwo.join && dataTwo.join(",")) || "";

this.handleChange()

// 清空选中实习状态

emptySelectinternshipStatusCode(data, dataTwo) {

this.searchParameters.degreeCode = "";

this.handleChange()

// 查询二级受检病区下拉框数据列表

getTestedWardlistTwo() {

personalFilesselectDictDeptList().then(response => {

if (response.code == "200") {

// this.testedWardSelectData = response.data.deptList

let deptObj = {};

console.log(response,"===================response.data.deptList")

response.data.deptList.forEach((item, index) => {

if (item.deptCode == "-1") {

deptObj = item.deptKey;

item.deptKey.deptKeyList.forEach((node, next) => {

node.deptList.forEach(three => {

three.pymTwo = py.chineseToPinYin(three.deptName);

});

}

});

this.testedWardSelectData = deptObj;

console.log(this.testedWardSelectData,"======================this.testedWardSelectData ")

}

});

// 获取受检病区下拉框选中数据部门保存

getWardListSelect(dataInfo) {

console.log(dataInfo, "---------------");

this.newRtationForm.deptCode = dataInfo.selectDeptCode;

this.newRtationForm.deptName = dataInfo.deptName;

}

};

</script>

.workPreview {

.searchTop {

// width: 100%;

height: 42px;

background: #ffffff;

box-sizing: border-box;

// margin: 4px;

margin-top: 4px;

margin-left: 4px;

margin-right: 4px;

padding: 5px 4px;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

.searchTop_left {

display: flex;

.lableStyle {

display: inline-block;

// text-indent: 10px;

margin-right: 4px;

margin-left: 4px;

line-height: 32px;

font-size: 14px;

}

::v-deep {

// .el-select .el-select--medium{

.el-input__inner {

height: 32px !important;

// }

}

.cascadeSelection {

width: 20%;

max-width: 217px;

height: 32px;

cursor: pointer;

position: relative;

::v-deep {

.el-input__inner {

height: 32px;

width: 100%;

}

.cascadeSelectionData {

::v-deep {

.el-input__inner {

cursor: pointer;

}

.content {

padding: 4px;

// overflow-x: scroll;

height: calc(100vh - 90px);

}

.backgroundImg {

background: url("~@/assets/imgs/guipeizhong.png") no-repeat center / cover;

background-size: 27% 53%;

background-position: 0 0;

}

.asjsbackgroundImg {

background: url("~@/assets/imgs/anshijieshu.png") no-repeat center / cover;

background-size: 27% 53%;

background-position: 0 0;

}

.tqzzbackgroundImg {

background: url("~@/assets/imgs/tiqianzhongzhi.png") no-repeat center / cover;

background-size: 27% 53%;

background-position: 0 0;

}

.yqjsbackgroundImg {

background: url("~@/assets/imgs/yanqijieshu.png") no-repeat center / cover;

background-size: 27% 53%;

background-position: 0 0;

}

.beijingkuang {

background: url("~@/assets/imgs/zubeijing.png") no-repeat center / cover;

background-size: 100% 100%;

background-position: 0 0;

padding: 0 10px;

width: 120px;

height: 94px;

div {

font-family: Microsoft YaHei;

font-weight: 400;

color: #333333;

}

.beijingkuangls {

background: url("~@/assets/imgs/zubeijingls.png") no-repeat center / cover;

background-size: 100% 100%;

background-position: 0 0;

padding: 0 10px;

width: 120px;

height: 94px;

div {

font-family: Microsoft YaHei;

font-weight: 400;

color: #333333;

}

.searchStyle {

flex: 1;

padding: 4px;

margin-top: 4px;

display: flex;

align-items: center;

background: #fff;

span {

font-size: 14px;

margin: 0 5px;

}

::v-deep {

.el-input__inner {

height: 32px;

line-height: 32px;

}

.list_all_problem {

width: 100%;

// min-width: 1200px;

height: calc(100vh - 96px);

background: #ffffff;

// padding: 4px;

padding-top: 8px;

padding-left: 8px;

padding-bottom: 8px;

.list_all_header {

width: calc(100% - 7px);

height: 38px;

display: flex;

border-bottom: 1px solid #d5d5d5;

// border: 1px solid #d5d5d5;

background: #d6e6fe;

div {

font-size: 14px;

line-height: 38px;

}

.list_box {

list-style-type: none;

// margin: 0 8px 0 8px;

// border-top: 1px solid #d5d5d5;

margin: 0;

padding: 0;

overflow-y: scroll;

width: 100%;

height: calc(100vh - 148px);

.list-item {

width: 100%;

// border-top: 1px solid #d5d5d5;

border-left: 1px solid #d5d5d5;

border-right: 1px solid #d5d5d5;

.svg_bg_blue {

color: #4d84ff;

}

.first_title_box {

width: 100%;

min-height: 38px;

// padding-left: 9px;

display: flex;

align-items: center;

border-bottom: 1px solid #d5d5d5;

.title_text_box {

flex: 1;

span {

// margin-left: 8px;

}

.toggles_i_box {

width: 150px;

text-align: right;

padding-right: 22px;

i {

font-size: 18px;

}

.every_item_box > div {

min-height: 38px;

// display: flex;

display: flex;

justify-content: center;

align-items: center;

// align-items: center;

}

.every_item_box div:last-child {

border-bottom: none;

}

.every_item_box {

width: 100%;

display: flex;

border-bottom: 1px solid #d5d5d5;

min-height: 38px;

font-size: 14px;

.border_box {

border-right: 1px solid #d5d5d5;

}

.border_down_box {

border-bottom: 1px solid #d5d5d5;

}

.every_item_box:last-child {

border-bottom: none;

}

.vertical-scroll-wrap {

// margin-top: 50px;

display: flex;

justify-content: space-around;

align-items: center;

.vertical-scroll {

overflow: hidden;

flex: 1;

transition: all 0.3s ease;

.vertical-item {

transition: all 0.3s ease;

display: flex;

align-items: center;

.item{

display: flex;

align-items: center;

}

// p {

// padding: 0 60px 0 0;

// color: #fff;

// }

}

.left-prev {

padding-right: 10px;

}

.right-next {

padding-left: 10px;

}

.left-prev,

.right-next {

width: 30px;

height: 30px;

vertical-align: middle;

}

// .left-prev {

// padding-right: 10px;

// }

// .right-next {

// padding-left: 10px;

// }

// .left-prev,

// .right-next {

// width: 35px;

// height: 30px;

// vertical-align: middle;

// }

.nums {

display: flex;

width: 22px;

height: 22px;

color: #4d84ff;

background: #dbe6ff;

border-radius: 50%;

padding: 2px 5px;

display: flex;

align-items: center;

// text-align: center;

justify-content: center;

}

.font12 {

font-size: 12px;

}

.center_box {

display: flex;

justify-content: center;

align-items: center;

}

.model_box {

width: 100%;

// height: 226px;

background-color: #ffffff;

// border:1px solid;

.star {

color: #ff4949;

margin-right: 4px;

}

.model_right_box {

}

/*弹窗底部按钮样式*/

.footer_btn_box {

display: flex;

.cancle_btn {

width: 50%;

height: 40px;

text-align: center;

line-height: 40px;

background: #ffffff;

border-bottom-left-radius: 8px;

border-top: 1px solid #e5e5e5;

font-size: 14px;

font-family: Microsoft YaHei;

font-weight: 400;

color: #558aff;

}

.determine_box {

width: 50%;

height: 40px;

text-align: center;

line-height: 40px;

background: #558aff;

font-size: 14px;

// border-radius: 0px 5px 0px 0px;

border-bottom-right-radius: 8px;

font-family: Microsoft YaHei;

font-weight: 400;

color: #ffffff;

}

::v-deep {

.el-form-item {

margin-bottom: 0px;

}

.el-button--primary {

background: #4d84ff;

border-color: #4d84ff;

}

.el-dialog {

left: 50% !important;

top: 50% !important;

transform: translate(-50%, -50%) !important;

margin: 0px !important;

}

.el-dialog {

border-radius: 10px;

// height: 240px;

}

.el-dialog__footer {

padding: 0;

}

.el-dialog__body {

padding: 8px;

background: #f1f2f7;

}

.el-dialog__header {

padding: 0;

width: 100%;

height: 36px;

background: #558aff;

box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);

border-radius: 8px 8px 0px 0px;

}

.el-dialog__headerbtn {

top: 11px;

right: 11px;

}

.el-dialog__title {

width: 70px;

height: 14px;

font-size: 16px;

font-family: Microsoft YaHei;

font-weight: 400;

color: #ffffff;

padding-left: 16px;

line-height: 36px;

}

.el-dialog__headerbtn .el-dialog__close {

color: #ffffff !important;

}

.el-form-item--medium .el-form-item__label {

line-height: 36px;

color: #606266;

font-size: 14px;

word-break: break-all;

font-weight: 400;

}

.el-col-11 .el-form-item {

margin-bottom: 0px;

}

.el-form-item--medium{

// margin-bottom: 10px;

}

.el-form-item--medium .el-form-item__label{

color: #333333;

}

.el-input__inner {

color: #000000 !important;

font-size: 14px;

border: 1px solid #d0d0d0;

}

::-webkit-scrollbar-thumb {

background-color: #EFF0F5;

border-radius: 3px;

}

::-webkit-scrollbar {

width: 2px;

height: 6px;

}

</style>