JLH/JLHWEB/src/views/erpapi/mattressInterface/components/insterPz.vue

<template>
  <LjDialogNew v-bind="$attrs" class="is-selector" :style="{ padding: 0 }" width="600px" :closed="closed">
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">产品配置新增</span>
      </div>
    </template>

    <div class="flx-1 h-full">
      <LjHeaderMenu :action="defaultAction" />
      <el-form class="mr-16" :model="formdata" label-width="140px">
        <el-form-item label="项目">
          <el-autocomplete
            v-model="formdata.itemname"
            :fetch-suggestions="(q, c) => querySearch(q, c, itemnameArr)"
            clearable
            class="inline-input w-50"
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="核价_配置名称">
          <el-autocomplete
            v-model="formdata.bj_pzname"
            :fetch-suggestions="(q, c) => querySearch(q, c, bjPznameArr)"
            clearable
            class="inline-input w-50"
            placeholder="请输入核价配置名称"
          />
        </el-form-item>
      </el-form>
    </div>
  </LjDialogNew>
</template>

<script lang="ts" setup name="mattressInterfaceDetail_InsterPzDialog">
import { ref, defineEmits, computed } from "vue";
import LjDialogNew from "@/components/LjDialog/index-new.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import LjHeaderMenu from "@/components/LjHeaderMenu/index.vue";

const emits = defineEmits(["cancel", "submit", "closed", "update:modelValue"]);
const { buttonDefault } = useAuthButtons();

interface WidgetProps {
  formData: any;
  itemnameEnum?: any[];
  bjPznameEnum?: any[];
}
const props = withDefaults(defineProps<WidgetProps>(), {
  formData: () => ({})
});

const formdata = ref({
  ...props.formData
});

const closed = () => {
  emits("closed");
};

const defaultAction = [
  buttonDefault({
    label: "确定",
    clickFunc: () => {
      emits("submit", formdata.value);
    }
  }),
  buttonDefault({
    label: "取消",
    clickFunc: () => {
      emits("cancel");
    }
  })
];

const itemnameArr = computed(() => props.itemnameEnum);
const bjPznameArr = computed(() => props.bjPznameEnum);
const querySearch = (queryString: string, cb: any, arr: any) => {
  const results = queryString ? arr.filter(createFilter(queryString)) : arr;
  cb(results);
};
const createFilter = (queryString: string) => {
  return itm => {
    return itm.value.indexOf(queryString.trim()) === 0;
  };
};
</script>