PageSourceSearch

https://www.tyhurc.org.tw/TaoyuanColiving/Portal/js/Page/vueCompon…VK65NVjLHHGnJPJE5IX8YeoNOvD8L_cDOeE7hC9GunU

js tyhurc.org.tw collected 2026-09-26 14:03:09 UTC 18,382 bytes, 631 lines download raw bytes

1var vDatepicker = {
2    template: `                                
3    <template v-if="readonly">
4        <span v-html="getText"></span>
5    </template>
6    <template v-else>
7        <input type="text" :id="id" :class="css" :value="getValue" :size="size" autocomplete="off" @input="$emit('update:modelValue', DateValueChanged($event.target.value))" :placeholder="placeholder" />
8    </template>
9        `,
10    props: {
11        id: {
12            type: String,
13            default: "",
14        },
15        data: {
16            type: Object,
17        },
18        hasTime: {
19            type: Boolean,
20            default: false,
21        },
22        css: {
23            type: String,
24            default: "form-control form-date",
25        },
26        readonly: {
27            type: Boolean,
28            default: false,
29        },
30        modelValue: {
31            type: [String, Number],
32        },
33        placeholder: {
34            type: String,
35            default: "年/月/日",
36        },
37        size: {
38            type: String,
39            default: "",
40        },
41    },
42    data: function () {
43        return {
44            localDate: "",
45        };
46    },
47    computed: {
48        getValue() {
49            return util.ConvertToLocalDate(this.modelValue, this.hasTime);
50        },
51        getText() {
52            //轉民國年
53            var TEXT = util.ConvertToLocalDate(this.modelValue, this.hasTime);
54            if (this.readonly) if (TEXT == "") TEXT = "&nbsp;";
55            return TEXT;
56        },
57    },
58    methods: {
59        DateValueChanged: function (value) {
60            return util.ConvertToPublicDate(value);
61        },
62    },
63};
64
65var vSelect = {
66    template: ` 
67    <template v-if="readonly">
68        <span v-html="getText"></span>
69    </template>
70    <template v-else>
71        <select :id="id" :class="css" :value="getValue" @input="$emit('update:modelValue' , $event.target.value)">
72            <option v-if="show_wait_choose" value='' >請選擇</option>
73            <option v-if="show_all_option" value='' >全 部</option>
74            <option v-if="show_none_choose" value=''>無</option>
75            <option v-for="(item,idx) in data" :value="item.NO_VALUE"  > {{item.NM_TEXT }}</option>
76            <slot name="option-last"></slot>
77        </select>        
78    </template>    
79    `,
80    props: {
81        id: {
82            type: String,
83            default: "",
84        },
85        data: {
86            type: Array,
87            default: () => [],
88        },
89        show_wait_choose: {
90            type: Boolean,
91            default: false,
92        },
93        show_all_option: {
94            type: Boolean,
95            default: false,
96        },
97        show_none_choose: {
98            type: Boolean,
99            default: false,
100        },
101        css: {
102            type: String,
103            default: "form-select",
104        },
105        readonly: {
106            type: Boolean,
107            default: false,
108        },
109        modelValue: {
110            type: [String, Number],
111        },
112        default_first_option: {
113            type: Boolean,
114            default: false,
115        },
116        display_text: {
117            type: String,
118            default: "",
119        },
120    },
121    data: function () {
122        return {
123            localValue: this.modelValue,
124        };
125    },
126    created() {
127        this.setDefaultOption();
128    },
129    beforeUpdate: () => {},
130    updated: () => {},
131    watch: {
132        localValue: function (newValue, rawValue) {},
133        data: {
134            immediate: true,
135            handler() {
136                this.setDefaultOption();
137            },
138        },
139    },
140    computed: {
141        getValue() {
142            return this.modelValue;
143        },
144        getText() {
145            var TEXT = "&nbsp;";
146            if (this.display_text) TEXT = this.display_text;
147            else if (this.data != null) {
148                try {
149                    var m = this.data.find((d) => d.NO_VALUE == this.modelValue);
150                    if (m != null) {
151                        TEXT = m.NM_TEXT;
152                    }
153                } catch {}
154            }
155
156            return TEXT;
157        },
158    },
159    methods: {
160        setDefaultOption() {
161            if (this.default_first_option && this.data.length > 0 && !this.modelValue) {
162                if (this.show_wait_choose || this.show_all_option || this.show_none_choose) this.localValue = "";
163                else this.localValue = this.data[0].NO_VALUE;
164                this.$emit("update:modelValue", this.localValue);
165            }
166        },
167    },
168};
169
170var vInput = {
171    template: `     
172    <template v-if="readonly">
173        <span v-html="getText" ></span>
174    </template>
175    <template v-else>
176        <input v-if="id" :type="type" :class="css" :style="style" :size="size" :maxlength="maxLength" :id="id" autocomplete="off" @input.lazy="$emit('update:modelValue' , $event.target.value);" :value="modelValue" :placeholder="placeholder" />
177        <input v-else :type="type" :class="css" :style="style" :size="size" :maxlength="maxLength" autocomplete="off" @input.lazy="$emit('update:modelValue' , $event.target.value);" :value="modelValue" :placeholder="placeholder" />
178    </template>    
179    `,
180    props: {
181        id: {
182            type: String,
183            default: null,
184        },
185        readonly: {
186            type: Boolean,
187            default: false,
188        },
189        css: {
190            type: String,
191            default: "form-control",
192        },
193        type: {
194            type: String,
195            default: "text",
196        },
197        style: {
198            type: String,
199            default: "",
200        },
201        numberWithCommas: {
202            type: Boolean,
203            default: false,
204        },
205        size: {
206            type: String,
207            default: "",
208        },
209        maxLength: {
210            type: String,
211            default: "",
212        },
213        placeholder: { type: String },
214        modelValue: {},
215    },
216    data: function () {
217        return {};
218    },
219    computed: {
220        getText() {
221            if (this.readonly) {
222                if (this.modelValue == "") return "&nbsp;";
223                if (this.numberWithCommas) {
224                    return util.NumberWithCommas(this.modelValue);
225                }
226            }
227            return this.modelValue;
228        },
229    },
230};
231
232var vCheckboxGroup = {
233    template: `
234    <div class="form-check form-check-inline" v-for="(item ,idx) in data" :key="item.NO_VALUE">
235        <input class="form-check-input" type="checkbox" :id="id + '-' + idx" :value="item.NO_VALUE" v-model="selectedValuesComputed" :disabled="readonly" >
236        <label class="form-check-label" :for="id + '-' + idx"> {{ item.NM_TEXT }} </label>
237    </div>
238    `,
239    props: {
240        readonly: { type: Boolean, default: false },
241        data: { type: Array, default: () => [] },
242        modelValue: { default: "" },
243        delimiter: { type: String, default: "" },
244        // id is used to group checkboxes, default 亂數字
245        id: {
246            type: String,
247            default: () => `checkbox-group-${Math.random().toString(36).substr(2, 9)}`,
248        },
249    },
250    computed: {
251        selectedValuesComputed: {
252            get() {
253                if (this.delimiter && typeof this.modelValue === "string" && this.modelValue !== "") {
254                    return this.modelValue.split(this.delimiter).map((val) => val.trim());
255                } else if (Array.isArray(this.modelValue)) {
256                    // If modelValue is an array, assume it's an array of NO_VALUE strings
257                    return this.modelValue;
258                }
259                return [];
260            },
261            set(newVal) {
262                // newVal is an array of NO_VALUE strings from the checkboxes
263                if (this.delimiter) {
264                    this.$emit("update:modelValue", newVal.join(this.delimiter));
265                } else {
266                    // Emit the raw array of NO_VALUE strings without filtering by this.data
267                    this.$emit("update:modelValue", newVal);
268                }
269            },
270        },
271    },
272};
273
274//這個會錯誤 [Vue warn]: Attempting to mutate prop "modelValue". Props are readonly.
275//var vRadioGroup = {
276
277//    template: `
278//    <template v-if="readonly">
279//        <span :class="css" v-html="getText" ></span>
280//    </template>
281//    <template v-else>
282//        <div class="form-check m-0" v-for="(item,idx) in data" >
283//            <input class="form-check-input" type="radio" :name="id" :id="id+idx" :value="item.NO_VALUE" v-model="modelValue" >
284//            <label class="form-check-label" :for="id+idx">{{item.NM_TEXT}}</label>
285//        </div>
286//    </template>
287//    `,
288//    props: {
289//        'id': {
290//            type: String,
291//            default: ''
292//        },
293//        'readonly': {
294//            type: Boolean,
295//            default: false
296//        },
297//        'css': {
298//            type: String,
299//            default: 'form-control'
300//        },
301//        'data': { type: Object, default: {} },
302//        'modelValue': {}
303//    },
304//    computed: {
305//        getText() {
306
307//            if (this.data == null) return "&nbsp;";
308//            var m = this.data.find(d => d.NO_VALUE == this.modelValue);
309//            if (m != null) {
310//                return m.NM_TEXT;
311//            }
312//            else {
313//                return "&nbsp;";
314//            }
315//        }
316//    }
317
318//};
319
320var vRadioGroup = {
321    template: `
322    <div class="form-check form-check-inline" v-for="(item, idx) in data" >
323        <input class="form-check-input" type="radio" :disabled="readonly" :name="id" :id="id+idx" :value="item.NO_VALUE" v-model="selectedValue" @change="updateParent(item.NO_VALUE)">
324        <label class="form-check-label" :for="id+idx">{{item.NM_TEXT}}</label>
325    </div>
326    `,
327    props: {
328        id: {
329            type: String,
330            default: "",
331        },
332        readonly: {
333            type: Boolean,
334            default: false,
335        },
336        css: {
337            type: String,
338            default: "form-control",
339        },
340        data: {
341            type: Object,
342            default: {},
343        },
344        modelValue: {},
345    },
346    data() {
347        return {
348            selectedValue: this.modelValue,
349        };
350    },
351    methods: {
352        updateParent(value) {
353            this.$emit("update:modelValue", value);
354        },
355    },
356    computed: {
357        getText() {
358            if (this.data == null) return "&nbsp;";
359            var m = this.data.find((d) => d.NO_VALUE == this.selectedValue);
360            if (m != null) {
361                return m.NM_TEXT;
362            } else {
363                return "&nbsp;";
364            }
365        },
366    },
367    watch: {
368        modelValue(newValue) {
369            // 監聽外部傳入的 modelValue 變化,並更新 selectedValue
370            this.selectedValue = newValue;
371        },
372        data: {
373            immediate: true,
374            handler(newData) {
375                // If modelValue is an empty string and there's new data, set selectedValue to the first item
376                if (!this.modelValue && newData.length > 0) {
377                    this.selectedValue = newData[0].NO_VALUE;
378                    this.$emit("update:modelValue", this.selectedValue);
379                }
380            },
381        },
382    },
383};
384
385var vSelectWithAll = {
386    props: {
387        options: {
388            type: Array,
389            required: true,
390        },
391        modelValue: String,
392        optionAll: {
393            type: Boolean,
394            default: false,
395        },
396    },
397    watch: {
398        options: {
399            handler(newOptions) {
400                if (!this.optionAll && newOptions && newOptions.length > 0 && !this.modelValue) {
401                    this.$emit("update:modelValue", newOptions[0].NO_VALUE || "");
402                }
403            },
404            once: true,
405        },
406    },
407    template: `
408      <select class="form-select input-check" @input="$emit('update:modelValue' , $event.target.value)">
409        <template v-if="optionAll">
410          <option value="" selected>全部</option>
411        </template>
412        <option v-for="(item, index) in options" :value="item.NO_VALUE" :selected="!optionAll && index === 0">
413          {{ item.NM_TEXT }}
414        </option>
415      </select>
416    `,
417};
418
419var vTableColumn = {
420    template: `
421    <th :class="css" :style="style" :width="thWidth">
422        <template v-if="tooltipText">
423            <span data-bs-toggle="tooltip" :data-bs-title="tooltipText">{{ getText }}<i class="fa-solid fa-circle-info"></i></span>
424        </template>
425        <template v-else-if="hasModal">
426            <span>{{ getText }}<i class="fa-solid fa-circle-info" data-bs-toggle="modal" data-bs-target="#modalEmpty" role="button" tabindex="0" @click="$emit('icon-click')"></i></span>
427        </template>
428        <template v-else>
429            <span v-html="getText"></span>
430        </template>
431        <span v-if="required" class="required"></span>
432    </th>
433    <td :data-th="getText" :colspan="colspan" :width="tdWidth">
434        <slot></slot>
435    </td>
436    `,
437    props: {
438        modelValue: {
439            type: String,
440        },
441        text: {
442            type: String,
443            default: "",
444        },
445        css: {
446            type: String,
447            default: "text-end",
448        },
449        style: {
450            type: String,
451            default: "",
452        },
453        thWidth: {
454            type: String,
455            default: "15%",
456        },
457        tdWidth: {
458            type: String,
459            default: "35%",
460        },
461        required: {
462            type: Boolean,
463            default: false,
464        },
465        colspan: {
466            type: String,
467            default: "",
468        },
469        tooltipText: {
470            type: String,
471            default: "",
472        },
473        hasModal: {
474            type: Boolean,
475            default: false,
476        },
477    },
478    computed: {
479        getText() {
480            return this.text;
481        },
482    },
483    emits: ["icon-click"],
484};
485
486var vModalTableColumn = {
487    template: `
488    <th :class="css" :style="style" :width="thWidth">
489        <template v-if="tooltipText">
490            <span data-bs-toggle="tooltip" :data-bs-title="tooltipText">{{ getText }}<i class="fa-solid fa-circle-info"></i></span>
491        </template>
492        <template v-else>
493            <span v-html="getText"></span>
494        </template>
495        <span v-if="required" class="required"></span>
496    </th>
497    <td :data-th="getText" :colspan="colspan" :width="tdWidth">
498        <slot></slot>
499    </td>
500    `,
501    props: {
502        modelValue: {
503            type: String,
504        },
505        text: {
506            type: String,
507            default: "",
508        },
509        css: {
510            type: String,
511            default: "text-end",
512        },
513        style: {
514            type: String,
515            default: "",
516        },
517        thWidth: {
518            type: String,
519            default: "200",
520        },
521        tdWidth: {
522            type: String,
523            default: "",
524        },
525        required: {
526            type: Boolean,
527            default: false,
528        },
529        colspan: {
530            type: String,
531            default: "",
532        },
533        tooltipText: {
534            type: String,
535            default: "",
536        },
537    },
538    computed: {
539        getText() {
540            return this.text;
541        },
542    },
543};
544
545var vModalFooter = {
546    template: `
547    <div class="btn-cta-group w-100 p-0">
548        <a class="btn btn-pill-outline-primary" data-bs-dismiss="modal">取消</a>
549        <a class="btn btn-pill-primary" v-if="!readonly" @click="btnClick"> {{ submitText }} </a>
550    </div>
551    `,
552    props: {
553        modelValue: {},
554        readonly: {
555            type: Boolean,
556            default: false,
557        },
558        // 新增或修改
559        isCreate: {
560            type: Boolean,
561            default: false,
562        },
563        text: {
564            type: String,
565            default: "儲存",
566        },
567    },
568    emits: ["modalClick"],
569    computed: {
570        submitText() {
571            if (!this.text) return "儲存";
572            return this.text;
573        },
574    },
575    methods: {
576        btnClick() {
577            this.$emit("modalClick");
578        },
579    },
580};
581
582var vModalHeader = {
583    template: `
584    <h1 class="modal-title">
585        <template v-if="tooltipText">
586            <span data-bs-toggle="tooltip" :data-bs-title="tooltipText"><i class="fa-solid fa-circle-info"></i>{{ modelValue }}</span>
587        </template>
588        <template v-else>
589            <i class="fa-solid fa-circle-info"></i>{{ modelValue }}
590        </template>
591    </h1>
592    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
593    `,
594    props: {
595        modelValue: {
596            type: String,
597            default: "",
598        },
599        tooltipText: {
600            type: String,
601            default: "",
602        },
603    },
604    updated() {
605        // call customJS.js function
606        triggerTooltip();
607    },
608};
609
610var vModal = {
611    template: `
612    <div class="modal fade" :id="id" data-bs-backdrop="static" tabindex="-1">
613        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
614            <div class="modal-content">
615                <div class="modal-header">
616                    <slot name="modal-header"></slot>
617                </div>
618                <div class="modal-body">
619                    <slot name="modal-body"></slot>
620                </div>
621                <div class="modal-footer">
622                    <slot name="modal-footer"></slot>
623                </div>
624            </div>
625        </div>
626    </div>
627    `,
628    props: {
629        id: { type: String, default: "modalEmpty" },
630    },
631};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.