headers.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <div>
  3. <div class="titleWrap">
  4. <div class="box">
  5. <span class="shape"></span>
  6. <span>{{ title }}</span>
  7. </div>
  8. <div class="right">
  9. <el-select
  10. v-if="!hidenOrgan"
  11. class="multiple"
  12. v-model.trim="organId"
  13. filterable
  14. clearable
  15. placeholder="请选择分部"
  16. @change="changeOrgan"
  17. >
  18. <el-option
  19. v-for="(item, index) in special?specialList:selects.branchs"
  20. :key="index"
  21. :label="item.name"
  22. :value="item.id"
  23. ></el-option>
  24. </el-select>
  25. </div>
  26. </div>
  27. <el-divider></el-divider>
  28. </div>
  29. </template>
  30. <script>
  31. export default {
  32. props: ["title", "hidenOrgan",'special'],
  33. data() {
  34. return {
  35. organId: "",
  36. specialList: [],
  37. };
  38. },
  39. async mounted() {
  40. await this.$store.dispatch("setBranchs");
  41. const arr = [36,38,39,41,42,43,44,45,46,47,48,49,50,52,54,56]
  42. this.specialList = this.selects.branchs.filter((item) => {
  43. return arr.indexOf(item.id) == -1;
  44. });
  45. },
  46. methods: {
  47. changeOrgan(val) {
  48. this.organId = val;
  49. this.$emit("changeOrgan", val);
  50. },
  51. },
  52. };
  53. </script>
  54. <style lang="scss" scoped>
  55. .el-divider--horizontal {
  56. margin-top: 0 !important;
  57. }
  58. .titleWrap {
  59. display: flex;
  60. flex-direction: row;
  61. justify-content: space-between;
  62. align-items: center;
  63. height: 55px;
  64. }
  65. </style>