pc-component-v5/examples/info/SearchWidgetExample.vue

<template>
  <h1>搜索框</h1>

  <h2>1. 部门选择</h2>
  <SearchWidget
    info-window-no="279750"
    :field-value="fieldValue1"
    title-name="部门"
    display-name="name"
    @value-changed="fieldValue1Changed"
  />

  您选择的部门是:
  <span
    v-for="item, index in fieldValue1.displayValue"
    :key="index"
  >
    {{ item }}
  </span>

  
  <h2>2. 用户选择</h2>

  <SearchWidget
    info-window-no="050408"
    :field-value="fieldValue2"
    :where-clause-source="whereClauseSource2"
    title-name="用户"
    display-name="name"
    @value-changed="fieldValue2Changed"
  />

  您选择的用户是:
  <span
    v-for="item, index in fieldValue2.displayValue"
    :key="index"
  >
    {{ item }}
  </span>
</template>

<script>

import SearchWidget from '@/info/search-widget.js';


export default {

  components: {
    SearchWidget,
  },
  data: function () {
    return {
      fieldValue1: {
        displayValue: [],
        fieldType: 'Key',
        id: null,
      },

      fieldValue2: {
        id: null,
        displayValue: [''],
        fieldType: 'Key',
      },

      whereClauseSource2: {
        customerDataDimensions:[{
          fieldName: 'client.id',
          dataDimensionTypeNo: '202201191757',
          defaultDataDimensionTypeValueNo: '1',
        }],
      },

    };
  },

  methods: {
    
    fieldValue1Changed: function (newFieldValue) {
      this.fieldValue1 = newFieldValue;
    },

    fieldValue2Changed: function(newFieldValue){
      this.fieldValue2 = newFieldValue;
    },
  },
};
</script>