ezhizao_yzbh_vue/src/views/business/service/serviceForm.vue

<template>
  <el-dialog
    :title="title"
    v-model="formOpen"
    width="500px"
    append-to-body
    draggable
    @close="cancel"
  >
    <el-form ref="dictRef" :model="form" :rules="rules" label-width="100">
      <el-form-item :label="title" :prop="content">
        <el-autocomplete
          style="width: 100%"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="true"
          v-model="selectionName"
          :placeholder="content"
          popper-class="my-autocomplete"
          @select="handleSelectEmployee"
        >
          <template #default="{ item }">
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
              "
            >
              <div class="name" style="font-size: 12px">
                {{ item.nickName }}
              </div>
              <span class="code" style="font-size: 10px; color: darkgrey">{{
                item.userName
              }}</span>
            </div>
          </template>
        </el-autocomplete>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Finished"
          size="small"
          @click="submitForm"
          >确 定</el-button
        >
        <el-button icon="close" size="small" @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";

const title = ref("");
const selectionName = ref("");
const selectionUser = ref(null);

import { listUser } from "@/api/system/user";
import { setWorkOrderService } from "@/api/business/crm/workOrder";
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});

const { getList } = toRefs(props);

const formOpen = ref(false);
const form = ref({});
const rules = ref({});
const content = ref("请输入员工姓名");
const { proxy } = getCurrentInstance();
const ids = ref([]);

/** 输入框输出建议 */
const querySearchAsync = (queryString, cb) => {
  // console.log(links);
  // const results = queryString
  //   ? links.value.filter(createFilter(queryString))
  //   : links.value;
  const query = { keyword: queryString };
  listUser(query).then((res) => {
    cb(res.rows);
  });
};
function handleSelectEmployee(item) {
  console.log(item);
  selectionName.value = item.nickName;
  selectionUser.value = item;
}
function submitForm() {
  if (selectionUser.value == null || selectionUser.value.userId == null) {
    proxy.$modal.msgError("请选择用户！");
    return;
  }
  setWorkOrderService({
    ids: ids.value,
    serviceId: selectionUser.value.userId,
  }).then((response) => {
    proxy.$modal.msgSuccess("设置完成!");
    formOpen.value = false;
    cancel();
    getList.value();
  });
}

function cancel() {
  formOpen.value = false;
  reset();
}

function open(options) {
  const { dialogTitle, dialogContent, values } = options;
  title.value = dialogTitle;
  content.value = dialogContent;
  formOpen.value = true;
  ids.value = values;
}

function reset() {
  selectionName.value = "";
  selectionUser.value = null;
}

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>