bxztApp/packages/screen/src/views/PersonManagement/addDialog.vue

<template>
  <div class="detail-container">
    <el-form
      ref="formRef"
      label-position="right"
      label-width="150px"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
    >
      <el-form-item label="人员:">
        <el-select
          v-model="ryxx"
          filterable
          remote
          reserve-keyword
          placeholder="输入人员名称 / 联系方式 查询"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="handleSelect"
          value-key="userId"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.userId"
            :label="item.realName"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位:">
        <el-input v-model="form.gw" />
      </el-form-item>

      <el-form-item label="养护站:">
        <el-select
          v-model="yhzmc"
          filterable
          remote
          reserve-keyword
          placeholder="输入养护站名称查询"
          :remote-method="yhzremoteMethod"
          :loading="loading"
          @change="handleYhzSelect"
          value-key="id"
          :disabled="disabled"
        >
          <el-option
            v-for="item in selectYhzOptions"
            :key="item.id"
            :label="item.mc"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="人员角色:">
        <el-select v-model="form.ryjs" placeholder="请选择人员角色">
          <el-option label="负责人" value="1"></el-option>
          <el-option label="普通工作人员" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
    
    <script setup>
import { ref, onMounted, watch } from "vue";
const formRef = ref(null);
defineExpose({ formRef });

const props = defineProps({
  detailData: {
    type: Object,
    default: () => ({}),
  },
  form: {
    type: Object,
    default: () => ({}),
  },
  getUserList: {
    type: Function,
    default: () => () => {},
  },
  treeData: {
    type: Array,
    default: () => [],
  },
  yhzid: {
    type: String,
    default: "",
  },
  yhzmc: {
    type: String,
    default: "",
  },
  getYhzList: {
    type: Function,
    default: () => () => {},
  },
});

const ryxx = ref("");
const loading = ref(false);
const selectOptions = ref([]);
// 选择人员筛选
const remoteMethod = async (query) => {
  loading.value = true;
  const res = await props.getUserList(query);
  if (res) {
    selectOptions.value = res;
  }
  loading.value = false;
};

// 选择人员
const handleSelect = (value) => {
  props.form.xm = value.realName;
  props.form.sjhm = value.phone;
  props.form.userId = value.userId;
};

const yhzmc = ref(props.yhzmc);
const disabled = ref(false);
const selectYhzOptions = ref([]);

// 选择养护站筛选
const yhzremoteMethod = async (query) => {
  loading.value = true;
  const res = await props.getYhzList(query);
  if (res) {
    selectYhzOptions.value = res;
  }
  loading.value = false;
};
// 选择养护站
const handleYhzSelect = (value) => {
  yhzmc.value = value.mc;
  props.form.yhzid = value.id;
};

onMounted(async () => {
  if (props.yhzid) {
    disabled.value = true;
    props.form.yhzid = props.yhzid;
  } else {
    const res2 = await props.getYhzList();
    if (res2) {
      selectYhzOptions.value = res2;
    }
  }

  const res = await props.getUserList();
  if (res) {
    selectOptions.value = res;
  }
});
</script>
    
    <style>
</style>