'init'
This commit is contained in:
421
src/views/team-manage/components/change/add-plan.vue
Normal file
421
src/views/team-manage/components/change/add-plan.vue
Normal file
@@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<HeaderTitleBar />
|
||||
<el-divider content-position="left">{{
|
||||
$t("module.teamManager.HandoverAdd.FillInShift")
|
||||
}}</el-divider>
|
||||
<el-form
|
||||
ref="team"
|
||||
:model="team"
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
:class="$style.form"
|
||||
>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.LastTeamName')"
|
||||
prop="preTeamId"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-select
|
||||
v-model="team.preTeamId"
|
||||
:class="$style.select"
|
||||
filterable
|
||||
clearable
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="preTeamChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in preTeamList"
|
||||
:key="index"
|
||||
:label="item.teamName"
|
||||
:value="item.teamId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.PreviousTeamLeader')"
|
||||
prop="preTeamLeader"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-input v-model="team.preTeamLeader" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.HandoverAdd.HandoverTeam')"
|
||||
prop="teamId"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-select
|
||||
v-model="team.teamId"
|
||||
:class="$style.select"
|
||||
filterable
|
||||
clearable
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="teamChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in teamList"
|
||||
:key="index"
|
||||
:label="item.teamName"
|
||||
:value="item.teamId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.HandoverAdd.HandoverTeamLeader')"
|
||||
prop="teamLeader"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-input v-model="team.teamLeader" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.HandoverAdd.PlanTeam')"
|
||||
prop="planTeamId"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-input
|
||||
v-if="$route.query.disable === 'true' || $route.query.disable"
|
||||
v-model="team.planTeamName"
|
||||
:disabled="true"
|
||||
/>
|
||||
<el-select
|
||||
v-else
|
||||
v-model="team.planTeamId"
|
||||
:class="$style.select"
|
||||
filterable
|
||||
clearable
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="planTeamChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in planTeamList"
|
||||
:key="index"
|
||||
:label="item.planTeamName"
|
||||
:value="item.planTeamId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.HandoverAdd.PlanTeamLeader')"
|
||||
prop="planTeamLeader"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-input v-model="team.planTeamLeader" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.PlanWorkingHours')"
|
||||
prop="planOnlineTime"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="team.planOnlineTime"
|
||||
type="datetime"
|
||||
:class="$style.select"
|
||||
:clearable="false"
|
||||
:disabled="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.PlannedHandoverTime')"
|
||||
prop="planHandoverTime"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="team.planHandoverTime"
|
||||
type="datetime"
|
||||
:clearable="false"
|
||||
:class="$style.select"
|
||||
:disabled="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.HandoverTme')"
|
||||
prop="handoverTime"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="team.handoverTime"
|
||||
type="datetime"
|
||||
:class="$style.select"
|
||||
:clearable="false"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.WorkingHours')"
|
||||
prop="onlineTime"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="team.onlineTime"
|
||||
type="datetime"
|
||||
:clearable="false"
|
||||
:class="$style.select"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider v-if="false" content-position="left">{{
|
||||
$t("module.teamManager.HandoverAdd.MajorSelection")
|
||||
}}</el-divider>
|
||||
<ProfessionPanel
|
||||
v-if="false"
|
||||
:id="team.id"
|
||||
:class="$style.bom"
|
||||
style="width:70%"
|
||||
@on-change="professionChange"
|
||||
/>
|
||||
<el-divider content-position="left">{{
|
||||
$t("module.teamManager.HandoverAdd.SelectionOfTeamMembers")
|
||||
}}</el-divider>
|
||||
<WorkerList
|
||||
:id="team.id"
|
||||
:team-id="team.teamId"
|
||||
:plan-team-id="team.planTeamId"
|
||||
:class="$style.bom"
|
||||
style="width:70%"
|
||||
@on-change="workerChange"
|
||||
/>
|
||||
<SubmitBar
|
||||
v-if="$route.query.disable !== 'true' && !$route.query.disable"
|
||||
@on-cancle="close()"
|
||||
@on-submit="handleSubmit('team')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { find } from 'lodash'
|
||||
import {
|
||||
add,
|
||||
getInfo,
|
||||
update,
|
||||
teamSelectList
|
||||
} from '@/api/team-manage/team.js'
|
||||
import { planTeamSelectList } from '@/api/team-manage/team-plan.js'
|
||||
import SubmitBar from '@/views/art/components/submit-bar'
|
||||
import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
|
||||
import WorkerList from '@/views/team-manage/components/change/worker-list'
|
||||
import ProfessionPanel from '@/views/team-manage/components/change/profession-panel'
|
||||
import { getInfo as getPlanInfo } from '@/api/team-manage/team-plan.js'
|
||||
export default {
|
||||
name: 'TeamAddPanel',
|
||||
components: {
|
||||
SubmitBar,
|
||||
HeaderTitleBar,
|
||||
WorkerList,
|
||||
ProfessionPanel
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
team: {
|
||||
id: null,
|
||||
handoverTime: new Date(),
|
||||
onlineTime: new Date(),
|
||||
teamId: null,
|
||||
teamLeader: '',
|
||||
preTeamId: null,
|
||||
preTeamLeader: '',
|
||||
teamWorkStatus: 1,
|
||||
|
||||
planId: null,
|
||||
planTeamId: null,
|
||||
planTeamLeader: '',
|
||||
planHandoverTime: '',
|
||||
planOnlineTime: '',
|
||||
professionIdList: [],
|
||||
workerIdList: []
|
||||
},
|
||||
rules: {
|
||||
teamId: [
|
||||
{ required: true, message: '本次班组不能为空', trigger: 'change' }
|
||||
],
|
||||
planTeamId: [
|
||||
{ required: false, message: '计划班组不能为空', trigger: 'change' }
|
||||
],
|
||||
preTeamId: [
|
||||
{ required: false, message: '上一班组不能为空', trigger: 'change' }
|
||||
],
|
||||
onlineTime: [
|
||||
{ required: true, message: '上班时间不能为空', trigger: 'blur' }
|
||||
],
|
||||
handoverTime: [
|
||||
{ required: true, message: '交接时间不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
id: null,
|
||||
preTeamList: [],
|
||||
teamList: [],
|
||||
planTeamList: []
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.id = this.$route.query.id
|
||||
const planId = this.$route.query.planId
|
||||
console.log(this.id)
|
||||
if (this.id) {
|
||||
getInfo({ id: this.id }).then(res => {
|
||||
console.log(res)
|
||||
this.team = res.data
|
||||
})
|
||||
}
|
||||
if (planId) {
|
||||
this.team.planId = planId
|
||||
getPlanInfo({ id: planId })
|
||||
.then(res => {
|
||||
console.log('planTeam====', res.data)
|
||||
const planTeam = res.data
|
||||
this.team.planTeamLeader = planTeam ? planTeam.planTeamLeader : ''
|
||||
this.team.planOnlineTime = planTeam ? planTeam.planOnlineTime : ''
|
||||
this.team.planHandoverTime = planTeam
|
||||
? planTeam.planHandoverTime
|
||||
: ''
|
||||
this.team.planId = planTeam.id
|
||||
this.team.planTeamId = planTeam.planTeamId
|
||||
this.team.preTeamLeader = planTeam
|
||||
? planTeam.planPreTeamLeader
|
||||
: ''
|
||||
this.team.preTeamId = planTeam ? planTeam.planPreTeamId : ''
|
||||
// 本次
|
||||
this.team.teamId = planTeam.planTeamId
|
||||
this.team.teamLeader = planTeam ? planTeam.planPreTeamLeader : ''
|
||||
//
|
||||
this.team.onlineTime = planTeam ? planTeam.planOnlineTime : ''
|
||||
this.team.handoverTime = planTeam ? planTeam.planHandoverTime : ''
|
||||
//
|
||||
this.team.id = planTeam.planTeamId
|
||||
return this.team
|
||||
})
|
||||
.then(() => planTeamSelectList())
|
||||
.then(res => {
|
||||
this.planTeamList = res.data
|
||||
return this.planTeamList
|
||||
})
|
||||
.then(() => teamSelectList())
|
||||
.then(res => {
|
||||
this.preTeamList = res.data
|
||||
this.teamList = res.data
|
||||
})
|
||||
} else {
|
||||
teamSelectList().then(res => {
|
||||
this.preTeamList = res.data
|
||||
this.teamList = res.data
|
||||
})
|
||||
planTeamSelectList().then(res => {
|
||||
this.planTeamList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$router.push({ path: this.$route.query.redirect })
|
||||
},
|
||||
handleSubmit(formName) {
|
||||
console.log('handleSubmit')
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
console.log(this.team)
|
||||
// const { professionIdList, workerIdList } = this.team
|
||||
const { workerIdList } = this.team
|
||||
// if (professionIdList.length === 0) {
|
||||
// this.$message({
|
||||
// type: 'error',
|
||||
// message: '专业不能为空！'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
if (workerIdList.length === 0) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '员工不能为空！'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.id) {
|
||||
update(this.team).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '更新成功！'
|
||||
})
|
||||
this.close()
|
||||
})
|
||||
} else {
|
||||
this.team.id = null
|
||||
add(this.team).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '保存成功！！'
|
||||
})
|
||||
this.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
preTeamChange(val) {
|
||||
const preTeam = find(this.preTeamList, f => f.teamId === val)
|
||||
this.team.preTeamLeader = preTeam ? preTeam.teamLeader : ''
|
||||
},
|
||||
planTeamChange(val) {
|
||||
const planTeam = find(this.planTeamList, f => f.planTeamId === val)
|
||||
this.team.planTeamLeader = planTeam ? planTeam.planTeamLeader : ''
|
||||
this.team.planOnlineTime = planTeam ? planTeam.planOnlineTime : ''
|
||||
this.team.planHandoverTime = planTeam ? planTeam.planHandoverTime : ''
|
||||
this.team.planId = planTeam.id
|
||||
},
|
||||
teamChange(val) {
|
||||
console.log(val)
|
||||
const team = find(this.teamList, f => f.teamId === val)
|
||||
this.team.teamLeader = team ? team.teamLeader : ''
|
||||
console.log(this.team)
|
||||
this.team.id = team.teamId
|
||||
},
|
||||
professionChange(val) {
|
||||
this.team.professionIdList = val
|
||||
},
|
||||
workerChange(val) {
|
||||
this.team.workerIdList = val.map(m => m.workerId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.form {
|
||||
width: 70%;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
.form-item {
|
||||
width: 50%;
|
||||
}
|
||||
.form-item-remark {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
.bom {
|
||||
position: relative;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/views/team-manage/components/change/profession-panel.vue
Normal file
107
src/views/team-manage/components/change/profession-panel.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-03-05 16:34:46
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-08 11:03:18
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="handleCheckAllChange"
|
||||
>{{ $t('module.teamManager.HandoverAdd.SelectAll') }}</el-checkbox>
|
||||
<div style="margin: 15px 0;" />
|
||||
<el-checkbox-group
|
||||
v-model="checkedCities"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="handleCheckedCitiesChange"
|
||||
>
|
||||
<el-checkbox v-for="city in cities" :key="city.id" :label="city.id">{{
|
||||
city.name
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { professionVoList } from '@/api/team-manage/team.js'
|
||||
|
||||
export default {
|
||||
name: 'ProfessionPanel',
|
||||
components: {},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
isIndeterminate: false,
|
||||
checkedCities: [],
|
||||
cities: [],
|
||||
params: {
|
||||
current: 1,
|
||||
size: 100
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
handler(val) {
|
||||
this.init(val)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
async init(id) {
|
||||
console.log('id', id)
|
||||
const citiesRes = await professionVoList({ ...this.params, id: id || this.$route.query.id })
|
||||
this.cities = citiesRes.data
|
||||
if (id || this.$route.query.id) {
|
||||
this.checkedCities = this.cities.filter(f => f.checked).map(m => m.id)
|
||||
this.checkAll = this.checkedCities.length === this.cities.length
|
||||
console.log(this.checkedCities)
|
||||
}
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
console.log(val)
|
||||
this.checkedCities = val ? this.cities.map(m => m.id) : []
|
||||
this.isIndeterminate = false
|
||||
this.$emit('on-change', this.checkedCities)
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
console.log(value)
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.cities.length
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
||||
this.$emit('on-change', this.checkedCities)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
src/views/team-manage/components/change/worker-list.vue
Normal file
161
src/views/team-manage/components/change/worker-list.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<SearchBar
|
||||
v-if="false"
|
||||
:placeholder="$t('module.teamManager.HandoverAdd.Placeholder')"
|
||||
@on-search="handleSearch"
|
||||
/>
|
||||
<el-table
|
||||
ref="mainTable"
|
||||
:data="tableDataList"
|
||||
:class="$style.table"
|
||||
:stripe="true"
|
||||
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
size="mini"
|
||||
:selectable="isDisabled"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
prop="index"
|
||||
:label="$t('module.teamManager.Handover.index')"
|
||||
width="80"
|
||||
fixed="left"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="workerName"
|
||||
:label="$t('module.teamManager.HandoverAdd.planWorkerName')"
|
||||
width="180"
|
||||
fixed="left"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="professionName"
|
||||
:label="$t('module.teamManager.HandoverAdd.planProfessionName')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="telephone"
|
||||
:label="$t('module.teamManager.HandoverAdd.telephone')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="workshop"
|
||||
:label="$t('module.teamManager.HandoverAdd.workshop')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="onDuty"
|
||||
:label="$t('module.teamManager.HandoverAdd.onDuty')"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.onDuty === 1" type="success">
|
||||
在岗
|
||||
</el-tag>
|
||||
<el-tag v-else type="info">
|
||||
离岗
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { workerVoList } from '@/api/team-manage/team.js'
|
||||
import SearchBar from '@/views/art/components/search-bar'
|
||||
export default {
|
||||
components: { SearchBar },
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
teamId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
planTeamId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
isEdit: false,
|
||||
tableDataList: [],
|
||||
page: {
|
||||
current: 1,
|
||||
size: 2
|
||||
},
|
||||
addDialogVisible: false,
|
||||
param: {},
|
||||
multipleSelection: [],
|
||||
disable: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
handler(val) {
|
||||
this.handleSearch()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.disable = this.$route.query.disable === 'true'
|
||||
this.handleSearch()
|
||||
},
|
||||
methods: {
|
||||
isDisabled() {
|
||||
return this.$route.query.disable === 'true'
|
||||
},
|
||||
handleSearch(param) {
|
||||
this.param = param
|
||||
console.log(param)
|
||||
const params = {
|
||||
id: this.id,
|
||||
teamId: this.teamId,
|
||||
planTeamId: this.planTeamId,
|
||||
...param,
|
||||
...this.page
|
||||
}
|
||||
workerVoList(params).then(res => {
|
||||
console.log(res)
|
||||
if (!res.data) {
|
||||
this.tableDataList = []
|
||||
return
|
||||
}
|
||||
this.tableDataList = res.data.map((m, index) => ({
|
||||
...m,
|
||||
index: this.page.size * (this.page.current - 1) + index + 1
|
||||
}))
|
||||
const multipleSelection = this.tableDataList.filter(f => f.checked)
|
||||
console.log(multipleSelection)
|
||||
if (!this.id) {
|
||||
return
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
multipleSelection.forEach(e =>
|
||||
this.$refs.mainTable.toggleRowSelection(e)
|
||||
)
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log(val)
|
||||
this.multipleSelection = val
|
||||
this.$emit('on-change', this.multipleSelection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
.table {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/views/team-manage/components/offline/offline-drawer.vue
Normal file
59
src/views/team-manage/components/offline/offline-drawer.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:title="$t('module.teamManager.HandoverDrawer.title')"
|
||||
size="85%"
|
||||
:append-to-body="true"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
:before-close="() => $emit('on-close')"
|
||||
>
|
||||
<OfflineEdit :team="team" />
|
||||
<el-divider content-position="left">【{{ team ? team.teamName :'' }}】{{ $t('module.teamManager.HandoverDrawer.TeamCommutingRecord') }}</el-divider>
|
||||
<TeamList
|
||||
:class="$style['team-list']"
|
||||
:team-id="team ? team.teamId : null"
|
||||
/>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TeamList from './team-list.vue'
|
||||
import OfflineEdit from './offline-edit.vue'
|
||||
|
||||
export default {
|
||||
name: 'OfflineDrawer',
|
||||
components: { TeamList, OfflineEdit },
|
||||
props: {
|
||||
team: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isEdit: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editSuccess() {
|
||||
this.innerDrawer = true
|
||||
},
|
||||
handleSubmit() {
|
||||
this.isEdit = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.team-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 30px;
|
||||
}
|
||||
</style>
|
||||
110
src/views/team-manage/components/offline/offline-edit.vue
Normal file
110
src/views/team-manage/components/offline/offline-edit.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<el-form
|
||||
ref="teamUpdate"
|
||||
:class="$style.form"
|
||||
:model="teamUpdate"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item :label="$t('module.teamManager.Handover.TeamName')" prop="teamName">
|
||||
<span :class="$style.label">{{ team.teamName || '-' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.teamManager.Handover.TeamLeader')" prop="teamLeader">
|
||||
<span :class="$style.label">{{ team.teamLeader || '-' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.teamManager.Handover.WorkingHours')" prop="onlineTime">
|
||||
<el-date-picker
|
||||
v-model="teamUpdate.onlineTime"
|
||||
style="width:210px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetime"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.teamManager.Handover.OffWorkTime')" prop="offlineTime">
|
||||
<el-date-picker
|
||||
v-model="teamUpdate.offlineTime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width:210px"
|
||||
type="datetime"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-success"
|
||||
@click="handleSubmit()"
|
||||
>
|
||||
{{ 'btn.save' | i18nFilter }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { offlineUpdate } from '@/api/team-manage/team.js'
|
||||
|
||||
export default {
|
||||
name: 'OfflineEdit',
|
||||
components: {},
|
||||
props: {
|
||||
team: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
teamUpdate: {
|
||||
offlineTime: moment(this.team.offlineTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
onlineTime: moment(this.team.onlineTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
rules: {
|
||||
onlineTime: [
|
||||
{ required: true, message: '上班时间不能为空', trigger: 'blur' }
|
||||
],
|
||||
offlineTime: [
|
||||
{ required: true, message: '下班时间不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs['teamUpdate'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
const param = {
|
||||
id: this.team.id,
|
||||
teamId: this.team.teamId,
|
||||
offlineTime: moment.utc(this.teamUpdate.offlineTime),
|
||||
onlineTime: moment.utc(this.teamUpdate.onlineTime)
|
||||
}
|
||||
console.log(param)
|
||||
offlineUpdate(param).then(res => {
|
||||
console.log(res)
|
||||
this.$message.success('保存成功！')
|
||||
this.$bus.emit('on-offline-edit-success')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
margin-bottom: 30px;
|
||||
.form {
|
||||
display: flex;
|
||||
.label {
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
src/views/team-manage/components/offline/offline-search-bar.vue
Normal file
100
src/views/team-manage/components/offline/offline-search-bar.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<span :class="$style['label-name']">{{ $t('module.teamManager.HandoverDrawer.OffHours') }}</span>
|
||||
<el-date-picker
|
||||
v-model="dts"
|
||||
type="datetimerange"
|
||||
style="margin-right:16px;"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
unlink-panels
|
||||
:start-placeholder="$t('module.basicData.ScrapInfo.StartTime')"
|
||||
:end-placeholder="$t('module.basicData.ScrapInfo.EndTime')"
|
||||
:range-separator="$t('module.basicData.ScrapInfo.To')"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch()">
|
||||
{{ 'btn.search' | i18nFilter }}
|
||||
</el-button>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
lableName: {
|
||||
type: String,
|
||||
default: '关键字'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keywords: '',
|
||||
dts: ['', ''],
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.on('on-offline-edit-success', this.handleSearch)
|
||||
this.handleSearch()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.off('on-offline-edit-success', this.handleSearch)
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
const param = {
|
||||
offlineBegTime: moment.utc(this.dts[0]),
|
||||
offlineEndTime: moment.utc(this.dts[1])
|
||||
}
|
||||
this.$emit('on-search', param)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 4px 40px;
|
||||
background-color: #eee;
|
||||
.label-name {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
src/views/team-manage/components/offline/team-list.vue
Normal file
108
src/views/team-manage/components/offline/team-list.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<OfflineSearchBar :placeholder="'班组名称或班组长'" @on-search="handleSearch" />
|
||||
<el-table
|
||||
:data="workList"
|
||||
:class="$style.table"
|
||||
:stripe="true"
|
||||
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
size="medium"
|
||||
>
|
||||
<el-table-column prop="index" :label="$t('module.teamManager.Handover.index')" width="80" fixed />
|
||||
<el-table-column prop="teamName" :label="$t('module.teamManager.Handover.TeamName')" width="180" fixed />
|
||||
<el-table-column prop="handoverTime" :label="$t('module.teamManager.Handover.HandoverTme')" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.handoverTime && moment(scope.row.handoverTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="teamLeader" :label="$t('module.teamManager.Handover.TeamLeader')" width="180" />
|
||||
<el-table-column prop="onlineTime" :label="$t('module.teamManager.Handover.WorkingHours')" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.onlineTime && moment(scope.row.onlineTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="offlineTime" :label="$t('module.teamManager.Handover.OffWorkTime')" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.offlineTime && moment(scope.row.offlineTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="preTeamName" :label="$t('module.teamManager.Handover.LastTeamName')" width="180" />
|
||||
<el-table-column prop="preTeamLeader" :label="$t('module.teamManager.Handover.PreviousTeamLeader')" width="180" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-show="page.total > page.size"
|
||||
:class="$style.table"
|
||||
:current-page="page.current"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="page.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="page.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { list } from '@/api/team-manage/team.js'
|
||||
import OfflineSearchBar from './offline-search-bar'
|
||||
export default {
|
||||
components: { OfflineSearchBar },
|
||||
props: {
|
||||
teamId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
isEdit: false,
|
||||
workList: [],
|
||||
page: {
|
||||
total: 40,
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
param: {}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleSearch(param) {
|
||||
this.param = param
|
||||
console.log(param)
|
||||
list({ ...param, ...this.page, teamId: Number(this.teamId), teamWorkStatus: 0 }).then(res => {
|
||||
console.log(res)
|
||||
this.page.total = res.data.total
|
||||
if (!res.data.records) {
|
||||
this.workList = []
|
||||
return
|
||||
}
|
||||
this.workList = res.data.records.map((m, index) => ({
|
||||
...m,
|
||||
index: this.page.size * (this.page.current - 1) + index + 1
|
||||
}))
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
this.page.size = val
|
||||
this.handleSearch(this.param)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
this.page.current = val
|
||||
this.handleSearch(this.param)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
.table {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
339
src/views/team-manage/components/plan/add-plan.vue
Normal file
339
src/views/team-manage/components/plan/add-plan.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<HeaderTitleBar />
|
||||
<el-divider content-position="left">{{
|
||||
$t("module.teamManager.HandoverAdd.TeamPlanFill")
|
||||
}}</el-divider>
|
||||
<el-form
|
||||
ref="team"
|
||||
:model="team"
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
:class="$style.form"
|
||||
>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.LastTeamName')"
|
||||
prop="planPreTeamId"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-select
|
||||
v-model="team.planPreTeamId"
|
||||
:class="$style.select"
|
||||
filterable
|
||||
clearable
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="preTeamChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in preTeamList"
|
||||
:key="index"
|
||||
:label="item.planTeamName"
|
||||
:value="item.planTeamId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.PreviousTeamLeader')"
|
||||
prop="planPreTeamLeader"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-input v-model="team.planPreTeamLeader" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.TeamName')"
|
||||
prop="planTeamId"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-select
|
||||
v-model="team.planTeamId"
|
||||
:class="$style.select"
|
||||
filterable
|
||||
clearable
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="teamChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in teamList"
|
||||
:key="index"
|
||||
:label="item.planTeamName"
|
||||
:value="item.planTeamId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.TeamLeader')"
|
||||
prop="planTeamLeader"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-input v-model="team.planTeamLeader" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.PlanWorkingHours')"
|
||||
prop="planOnlineTime"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="team.planOnlineTime"
|
||||
type="datetime"
|
||||
:class="$style.select"
|
||||
:clearable="false"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.PlannedHandoverTime')"
|
||||
prop="planHandoverTime"
|
||||
:class="$style['form-item']"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="team.planHandoverTime"
|
||||
type="datetime"
|
||||
:clearable="false"
|
||||
:class="$style.select"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('module.teamManager.Handover.Remark')"
|
||||
prop="remark"
|
||||
:class="$style['form-item-remark']"
|
||||
>
|
||||
<el-input
|
||||
v-model="team.remark"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider v-if="false" content-position="left">{{
|
||||
$t("module.teamManager.HandoverAdd.MajorSelection")
|
||||
}}</el-divider>
|
||||
<ProfessionPanel
|
||||
v-if="false"
|
||||
:id="team.planId"
|
||||
:class="$style.bom"
|
||||
style="width:70%"
|
||||
@on-change="professionChange"
|
||||
/>
|
||||
<el-divider content-position="left">{{
|
||||
$t("module.teamManager.HandoverAdd.SelectionOfTeamMembers")
|
||||
}}</el-divider>
|
||||
<WorkerList
|
||||
:id="team.planTeamId"
|
||||
:class="$style.bom"
|
||||
style="width:70%"
|
||||
@on-change="workerChange"
|
||||
/>
|
||||
<SubmitBar
|
||||
v-if="$route.query.disable !== 'true' && !$route.query.disable"
|
||||
@on-cancle="close()"
|
||||
@on-submit="handleSubmit('team')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { find } from 'lodash'
|
||||
import {
|
||||
add,
|
||||
getInfo,
|
||||
update,
|
||||
planTeamSelectListNew
|
||||
} from '@/api/team-manage/team-plan.js'
|
||||
import SubmitBar from '@/views/art/components/submit-bar'
|
||||
import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
|
||||
import WorkerList from '@/views/team-manage/components/plan/worker-list'
|
||||
import ProfessionPanel from '@/views/team-manage/components/plan/profession-panel'
|
||||
|
||||
export default {
|
||||
name: 'Team',
|
||||
components: {
|
||||
SubmitBar,
|
||||
HeaderTitleBar,
|
||||
WorkerList,
|
||||
ProfessionPanel
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
team: {
|
||||
planPreTeamId: null,
|
||||
planTeamId: null,
|
||||
planWorkerIdList: [],
|
||||
planProfessionIdList: [],
|
||||
id: null,
|
||||
planId: null,
|
||||
remark: '',
|
||||
name: '',
|
||||
planOnlineTime: new Date(),
|
||||
planHandoverTime: new Date(),
|
||||
planTeamLeader: '',
|
||||
planPreTeamLeader: ''
|
||||
},
|
||||
rules: {
|
||||
planTeamId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm([
|
||||
'placeholder.input',
|
||||
this.$t('module.teamManager.Handover.TeamName')
|
||||
]),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
planPreTeamId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm([
|
||||
'placeholder.input',
|
||||
this.$t('module.teamManager.Handover.LastTeamName')
|
||||
]),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
planOnlineTime: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm([
|
||||
'placeholder.input',
|
||||
this.$t('module.teamManager.Handover.PlanWorkingHours')
|
||||
]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
planHandoverTime: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm([
|
||||
'placeholder.input',
|
||||
this.$t('module.teamManager.Handover.PlannedHandoverTime')
|
||||
]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
id: null,
|
||||
preTeamList: [],
|
||||
teamList: []
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.id = this.$route.query.id
|
||||
console.log(this.id)
|
||||
if (this.id) {
|
||||
getInfo({ id: this.id }).then(res => {
|
||||
console.log(res)
|
||||
this.team = res.data
|
||||
})
|
||||
}
|
||||
planTeamSelectListNew().then(res => {
|
||||
this.preTeamList = res.data
|
||||
this.teamList = res.data
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$router.push({ path: this.$route.query.redirect })
|
||||
},
|
||||
handleSubmit(formName) {
|
||||
console.log('handleSubmit')
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
console.log(this.team)
|
||||
// const { planProfessionIdList, planWorkerIdList } = this.team
|
||||
const { planWorkerIdList } = this.team
|
||||
// if (planProfessionIdList.length === 0) {
|
||||
// this.$message({
|
||||
// type: 'error',
|
||||
// message: '专业不能为空！'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
if (planWorkerIdList.length === 0) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '员工不能为空！'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.id) {
|
||||
update(this.team).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '更新成功！'
|
||||
})
|
||||
this.close()
|
||||
})
|
||||
} else {
|
||||
this.team.id = null
|
||||
add(this.team).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '保存成功！！'
|
||||
})
|
||||
this.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
preTeamChange(val) {
|
||||
const preTeam = find(this.preTeamList, f => f.planTeamId === val)
|
||||
this.team.planPreTeamLeader = preTeam ? preTeam.planTeamLeader : ''
|
||||
},
|
||||
teamChange(val) {
|
||||
console.log(val)
|
||||
const team = find(this.teamList, f => f.planTeamId === val)
|
||||
this.team.planTeamLeader = team ? team.planTeamLeader : ''
|
||||
console.log(' team.planTeamId', team.planTeamId)
|
||||
this.team.planTeamId = team.planTeamId
|
||||
this.team.planId = val
|
||||
},
|
||||
professionChange(val) {
|
||||
this.team.planProfessionIdList = val
|
||||
},
|
||||
workerChange(val) {
|
||||
this.team.planWorkerIdList = val.map(m => m.planWorkerId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.form {
|
||||
width: 70%;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
.form-item {
|
||||
width: 50%;
|
||||
}
|
||||
.form-item-remark {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
.bom {
|
||||
position: relative;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/views/team-manage/components/plan/profession-panel.vue
Normal file
105
src/views/team-manage/components/plan/profession-panel.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-03-05 16:34:46
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-08 11:03:41
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="handleCheckAllChange"
|
||||
>{{ $t('module.teamManager.HandoverAdd.SelectAll') }}</el-checkbox>
|
||||
<div style="margin: 15px 0;" />
|
||||
<el-checkbox-group
|
||||
v-model="checkedCities"
|
||||
:disabled="$route.query.disable === 'true' || $route.query.disable"
|
||||
@change="handleCheckedCitiesChange"
|
||||
>
|
||||
<el-checkbox v-for="city in cities" :key="city.id" :label="city.id">{{
|
||||
city.name
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { planProfessionVoList } from '@/api/team-manage/team-plan.js'
|
||||
|
||||
export default {
|
||||
name: 'ProfessionPanel',
|
||||
components: {},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disable: false,
|
||||
checkAll: false,
|
||||
isIndeterminate: false,
|
||||
checkedCities: [],
|
||||
cities: [],
|
||||
params: {
|
||||
planId: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
id(val) {
|
||||
this.init(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init(val) {
|
||||
const citiesRes = await planProfessionVoList({
|
||||
planId: val || this.$route.query.id
|
||||
})
|
||||
console.log(citiesRes)
|
||||
this.cities = citiesRes.data
|
||||
if (val || this.$route.query.id) {
|
||||
this.checkedCities = this.cities.filter(f => f.checked).map(m => m.id)
|
||||
this.checkAll = this.checkedCities.length === this.cities.length
|
||||
console.log('this.checkedCities', this.checkedCities)
|
||||
this.$emit('on-change', this.checkedCities)
|
||||
}
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
console.log(val)
|
||||
this.checkedCities = val ? this.cities.map(m => m.id) : []
|
||||
this.isIndeterminate = false
|
||||
this.$emit('on-change', this.checkedCities)
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
console.log(value)
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.cities.length
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
||||
this.$emit('on-change', this.checkedCities)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 8px 16px 8px 4px;
|
||||
align-items: center;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
126
src/views/team-manage/components/plan/worker-list.vue
Normal file
126
src/views/team-manage/components/plan/worker-list.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<SearchBar v-if="false" :placeholder="$t('module.teamManager.HandoverAdd.Placeholder')" @on-search="handleSearch" />
|
||||
<el-table
|
||||
ref="mainTable"
|
||||
:data="tableDataList"
|
||||
:class="$style.table"
|
||||
:stripe="true"
|
||||
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px', textAlign: 'center'}"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
size="mini"
|
||||
:selectable="isDisabled"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="index" :label="$t('module.teamManager.Handover.index')" width="80" fixed="left" />
|
||||
<el-table-column prop="planWorkerName" :label="$t('module.teamManager.HandoverAdd.planWorkerName')" width="180" fixed="left" />
|
||||
<el-table-column prop="planProfessionName" :label="$t('module.teamManager.HandoverAdd.planProfessionName')" width="180" />
|
||||
<el-table-column prop="telephone" :label="$t('module.teamManager.HandoverAdd.telephone')" width="180" />
|
||||
<el-table-column prop="workshop" :label="$t('module.teamManager.HandoverAdd.workshop')" width="180" />
|
||||
<el-table-column prop="onDuty" :label="$t('module.teamManager.HandoverAdd.onDuty')" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.onDuty === 1" type="success">
|
||||
在岗
|
||||
</el-tag>
|
||||
<el-tag v-else type="info">
|
||||
离岗
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { planWorkerVoList } from '@/api/team-manage/team-plan.js'
|
||||
|
||||
import SearchBar from '@/views/art/components/search-bar'
|
||||
export default {
|
||||
components: { SearchBar },
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
isEdit: false,
|
||||
tableDataList: [],
|
||||
page: {
|
||||
current: 1,
|
||||
size: 2
|
||||
},
|
||||
addDialogVisible: false,
|
||||
param: {},
|
||||
multipleSelection: [],
|
||||
disable: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
id(val) {
|
||||
this.handleSearch()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.disable = this.$route.query.disable === 'true' || this.$route.query.disable
|
||||
},
|
||||
methods: {
|
||||
isDisabled(row, rowIndex) {
|
||||
if (row.status === 1) {
|
||||
return true // 不禁用
|
||||
} else {
|
||||
return false // 不禁用
|
||||
}
|
||||
},
|
||||
handleSearch(param) {
|
||||
this.param = param
|
||||
console.log(param)
|
||||
const params = {
|
||||
enabled: 1,
|
||||
planId: this.$route.query.id,
|
||||
planTeamId: this.id,
|
||||
...param,
|
||||
...this.page
|
||||
}
|
||||
planWorkerVoList(params).then(res => {
|
||||
console.log(res)
|
||||
if (!res.data) {
|
||||
this.tableDataList = []
|
||||
return
|
||||
}
|
||||
this.tableDataList = res.data.map((m, index) => ({
|
||||
...m,
|
||||
index: this.page.size * (this.page.current - 1) + index + 1
|
||||
}))
|
||||
const multipleSelection = this.tableDataList.filter(f => f.checked)
|
||||
console.log(multipleSelection)
|
||||
if (!this.id) {
|
||||
return
|
||||
}
|
||||
this.$emit('on-change', this.multipleSelection)
|
||||
this.$nextTick(() => {
|
||||
multipleSelection.forEach(e =>
|
||||
this.$refs.mainTable.toggleRowSelection(e)
|
||||
)
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
if (this.$route.query.disable) { return }
|
||||
console.log(val)
|
||||
this.multipleSelection = val
|
||||
this.$emit('on-change', this.multipleSelection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
.table {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
src/views/team-manage/components/search-bar.vue
Normal file
139
src/views/team-manage/components/search-bar.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<span :class="$style['label-name']">{{ $t('module.teamManager.Handover.Keyword') }}</span>
|
||||
<el-input
|
||||
v-model="keywords"
|
||||
:placeholder="placeholder"
|
||||
:clearable="true"
|
||||
style="width:150px;max-width:100%;margin-right:16px;"
|
||||
/>
|
||||
<span :class="$style['label-name']">{{ $t('module.teamManager.Handover.'+handoverTme) }}</span>
|
||||
<el-date-picker
|
||||
v-model="dts"
|
||||
type="datetimerange"
|
||||
style="margin-right:16px;"
|
||||
align="right"
|
||||
unlink-panels
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:start-placeholder="$t('module.basicData.ScrapInfo.StartTime')"
|
||||
:end-placeholder="$t('module.basicData.ScrapInfo.EndTime')"
|
||||
:range-separator="$t('module.basicData.ScrapInfo.To')"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
<span :class="$style['label-name']">{{ $t('module.teamManager.Handover.HandoverStatus') }}</span>
|
||||
<el-select
|
||||
v-model="handoverStatus"
|
||||
style="margin-right:16px;"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in workStatusOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch()">
|
||||
{{ 'btn.search' | i18nFilter }}
|
||||
</el-button>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
lableName: {
|
||||
type: String,
|
||||
default: '关键字'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入'
|
||||
},
|
||||
handoverTme: {
|
||||
type: String,
|
||||
default: 'HandoverTme'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keywords: '',
|
||||
dts: ['', ''],
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
},
|
||||
handoverStatus: null,
|
||||
workStatusOptions: [{
|
||||
value: null,
|
||||
label: '全部'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '已下班'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '工作中'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
console.log(this.dts)
|
||||
const param = {
|
||||
keyWords: this.keywords,
|
||||
keywords: this.keywords,
|
||||
handoverBegTime: this.dts ? moment.utc(this.dts[0]) : null,
|
||||
handoverEndTime: this.dts ? moment.utc(this.dts[1]) : null,
|
||||
planHandoverBegTime: this.dts ? moment.utc(this.dts[0]) : null,
|
||||
planHandoverEndTime: this.dts ? moment.utc(this.dts[1]) : null,
|
||||
handoverStatus: this.handoverStatus,
|
||||
teamWorkStatus: this.handoverStatus
|
||||
}
|
||||
this.$emit('on-search', param)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 4px 40px;
|
||||
background-color: #eee;
|
||||
.label-name {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user