zszq-trs/YLErpWeb/Views/SysInfo/UnderlyingAuto.cshtml

@{
    Layout = "~/Views/Shared/_LayoutMini.cshtml";
}

@section CSS{

}

@section JS{
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script>
        //标的选择组件
        const vueUnderlying = function () {
            return {
                props: ['value', 'options'],
                data() {
                    return { autoUnderlying: null };
                },
                mounted() {
                    autoUnderlying = tradeHelper.UnderlyingAutoComplete(this.$el, this.options);
                    autoUnderlying.onSelect(this.onchange);
                    this.value && autoUnderlying.selectByCode(this.value);
                },
                methods: {
                    onchange(data) {
                        if (this.value !== data.Code) {
                            this.$emit('change', data);
                            this.$emit('input', data.Code);
                        }
                    }
                },
                destroyed() {
                    autoUnderlying && autoUnderlying.dispose();
                },
                template: '<input type="text" v-model="value" />'
            };
        };

        var selFlag = tradeHelper.UnderlyingSelectFlag;
        const autoUnderlyingOptions = { SelectFlag: selFlag.Stock | selFlag.UsePinYinFilter };
        const autoUnderlyingOptions2 = { SelectFlag: selFlag.CommodityFutures | selFlag.IncludeMatured | selFlag.IncludeSynthetic };

        var vue = new Vue({
            el: '#vueDiv',
            data: {
                underlyingId: 1,
                underlyingCode: '000001.SZ',
                underlyingName: '000001.SZ',

                underlyingId2: 2,
                underlyingCode2: 'RB00',
                underlyingName2: 'RB00',
            },
            methods: {
                changeUnderlying(data) {
                    this.underlyingId = data.id;
                    this.underlyingName = data.Name;
                },
                changeUnderlying2(data) {
                    this.underlyingId2 = data.id;
                    this.underlyingName2 = data.Name;
                }
            },
            components: {
                'vue-underlying': vueUnderlying()
            }
        });
    </script>
}

<div class="card">
    <div class="card-header">
        <h4 class="card-title">标的自动完成控件样例</h4>
    </div>

    <div class="card-body" id="vueDiv">
        <div>
            <p>股票标的并且支持拼音首字母筛选</p>
            <vue-underlying v-model="underlyingCode" v-bind:options="autoUnderlyingOptions" v-on:change="changeUnderlying"></vue-underlying>
        </div>

        <div class="mt-4">
            underlyingId:{{underlyingId}},&emsp;&emsp;underlyingCode:{{underlyingCode}},&emsp;&emsp;underlyingName:{{underlyingName}},&emsp;&emsp;
        </div>

        <div class="mt-4">
            设置新的标的代码: <input type="text" v-model="underlyingCode" />
        </div>

        <hr />

        <div>
            <p>商品标的并且支持已过期标的和组合标的</p>
            <vue-underlying v-model="underlyingCode2" v-bind:options="autoUnderlyingOptions2" v-on:change="changeUnderlying2"></vue-underlying>
        </div>

        <div class="mt-4">
            underlyingId2:{{underlyingId2}},&emsp;&emsp;underlyingCode2:{{underlyingCode2}},&emsp;&emsp;underlyingName2:{{underlyingName2}},&emsp;&emsp;
        </div>
    </div>
</div>