'init'

src/views/team-manage/components/plan/profession-panel.vue

@@ -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>