106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<!--
|
|
* @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>
|