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="organization.name"
    :where-clause-source="whereClauseSource"
    @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>

  
  <h2>3. 用户多选</h2>

  <MultiSearchWidget
    info-window-no="050408"
    :field-value="fieldValue3"
    :where-clause-source="whereClauseSource3"
    title-name="用户"
    display-name="name"
    @value-changed="fieldValue3Changed"
  />

  <div>
    您选择的用户姓名是:
    <span
      v-for="item, index in fieldValue3.displayValue"
      :key="'displayValue' + index"
    >
      {{ item }} <span v-if="index > 0">,</span>
    </span>
  </div>
  
  <div>
    您选择的用户id是:
    <span
      v-for="item, index in fieldValue3.ids"
      :key="'id' + index"
    >
      {{ item }} <span v-if="index > 0">,</span>
    </span>
  </div>
</template>

<script>

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




export default {

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

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

      whereClauseSource: {
        customerDataDimensions: [{
          fieldName: 'client.id',
          dataDimensionTypeNo: '202201191757',
          defaultDataDimensionTypeValueNo: '3',
        }],
      },

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


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

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

    };
  },

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

    fieldValue2Changed: function(newFieldValue){
      this.fieldValue2 = newFieldValue;
    },

    fieldValue3Changed: function(newFieldValue){
      console.log(newFieldValue);
      this.fieldValue3 = newFieldValue;
    },


  },
};
</script>