dy-admin-manager/src/views/categroyManager/insideSetting/modals/select-user.vue

<template>
  <div>
    <el-alert class="alert" type="info" :closable="false">
      <template #title>
        <div class="title">
          <span>{{formatName}}</span>
          <el-button style="padding: 5px;" type="text" @click="clear">清空</el-button>
        </div>
      </template>
    </el-alert>
    <div class="content">
      <el-row v-for="(row, index) in item" :key="row.organId">
        <el-col :span="8">
          <el-form-item :label="branchsyId[row.organId] && branchsyId[row.organId].name"></el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item
            label="交接人"
            :prop="`${name}.${index}.transferUserId`"
            :rules="[{
              required: true, message: '请选择交接人'
            }]"
          >
            <el-select
              @change="val => change(val, row)"
              :value="row.transferUserId"
              clearable
              filterable
            >
              <el-option
                v-for="option in options[row.organId]"
                :key="option.id || option.userId"
                :value="option.id || option.userId"
                :label="option.realName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-button
            type="text"
            v-if="index == 0"
            :disabled="!row.transferUserId"
            @click="quickSetting(row.transferUserId)"
          >快速设置</el-button>
        </el-col> -->
      </el-row>
    </div>
  </div>
</template>
<script>
import { employeeLevelDetail, employeeLevel } from '../api'
export default {
  props: ['item', 'name', 'branchsyId', 'employeeByOrganId', 'technicianByOrganId'],
  computed: {
    formatName() {
      const types = {
        repair: '维修技师',
        director: '乐队指导',
        education: '乐团主管',
        teamTeacher: '运营主管',
      }
      return types[this.name]
    },
    options() {
      return this.name === 'repair' ? this.technicianByOrganId : this.employeeByOrganId
    }
  },
  methods: {
    quickSetting(id) {
      this.item.forEach(row => {
        if (!row.transferUserId) {
          row.transferUserId = id
        }
      })
    },
    change(val, row) {
      row.transferUserId = val
    },
    clear() {
      this.item.forEach(row => {
        row.transferUserId = ''
      })
    }
  }
};
</script>
<style lang="less" scoped>
.alert{
  ::v-deep  .el-alert__content{
    width: 100%;
  }
  .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.content{
  padding: 0 24px;
  padding-top: 24px;
}
</style>