■ - shisanin01’s blog

<template>
k2<v-card width=dabudabu100%dabudabu>
k4<v-card-title >{{ card_title }}</v-card-title>
k4<v-card-subtitle>{{ card_subtitle }}</v-card-subtitle>

k4<div v-if=dabudabudatalist === nulldabudabu>
k4k2<div class=dabudabutext-centerdabudabu><v-progress-circular color=dabudabuerrordabudabu indeterminate></v-progress-circular></div>
k4</div>
k4<div v-else-if=dabudabutarget_api === singlemutingrulelistsingledabudabu>
k4k2<VDT :headers=dabudabuheadersdabudabu :items=dabudabudatalistdabudabu item-value=dabudabumessagedabudabuk2class=dabudabuelevation-1dabudabu :filter=dabudabufilterdabudabu :search=dabudabusearch_keyworddabudabuk2>

k8<template v-slot:item.status=dabudabulinedabudabu>
k8k4{{ line.item.columns.status }}
k8</template>

k8<template v-slot:item.schedule_start=dabudabulinedabudabu>
k8k2<div v-if=dabudabuline.item.columns.schedule_startdabudabu
k8k4:style=dabudabu{ color: (new Date(line.item.columns.schedule_end) < new Date()) && (line.item.columns.schedule_end) ? singleblacksingle : singleblacksingle }dabudabu>
k8k4
k8k4{{ (yyyymmddhhmiss(new Date(line.item.columns.schedule_start)).toLocaleString()) }}
k8k2</div>
k8k2<div v-else>
k8k4<span>—</span>
k8k2</div>
k8</template>

k8<template v-slot:item.schedule_end=dabudabulinedabudabu>
k8k2<div v-if=dabudabuline.item.columns.schedule_enddabudabu
k8k4:style=dabudabu{ color: (new Date(line.item.columns.schedule_end) < new Date()) && (line.item.columns.schedule_end) ? singleblacksingle : singleblacksingle }dabudabu>
k8k4
k8k8k8k2{{ (yyyymmddhhmiss(new Date(line.item.columns.schedule_end)).toLocaleString()) }}
k8k2</div>
k8k2<div v-else>
k8k4<span>—</span>
k8k2</div>
k8</template>

k4k2</VDT>
k4</div>

k4<div v-else>
k4k2<VDT :headers=dabudabuheadersdabudabu :items=dabudabudatalistdabudabu item-value=dabudabumessagedabudabu @click:row=dabudabudabudabu class=dabudabuelevation-1dabudabu></VDT>
k4</div>

k2</v-card>
</template>

import { watchEffect, ref } from singlevuesingle;
import { defineProps } from singlevuesingle;
import { get_startendunixtime } from single@/components/aaaa/datedurationselect.tssingle;
import aaaa_app_config from single@/views/aaaa/aaaa_app_config.jsonsingle;

const headers = ref();
const datalist = ref();
const search_keyword = ref(dabudabudabudabu)

// propsに型を指定する
const props = defineProps({
k2duration_item_selected: { type: String, required: true, },
k2daterange_arr: { type: Array, required: true, },
k2headers_arr: { type: Array, required: false, },
k2guid: { type: String, required: false } as const,
k2target_api: { type: String, required: true } as const,
k2card_title: { type: String, required: true } as const,
k2card_subtitle: { type: String, required: true } as const,
k2href_url: { type: String, required: false } as const,

});

const card_title = props.card_title
const card_subtitle = props.card_subtitle
const headers_arr = props.headers_arr

console.log(headers_arr);

// 各案件コードをログイン情報から取得
const prj_code = aaaa_app_config.prj_code

// 呼び出し元viewに、headers_arr の設定がある場合はそちらを採用
if (typeof headers_arr !== singleundefinedsingle && headers_arr.length > 0) {
k2for (let i = 0; i < headers_arr.length; i++) {
k4console.log(i + headers_arr[i]);

k4const obj = {
k4k2title: headers_arr[i].title,
k4k2align: headers_arr[i].align,
k4k2sortable: true,
k4k2key: headers_arr[i].title,
k4};
k4headers.value.push(obj);
k2}
}

//-----------------------------------------------------
// duration
//-----------------------------------------------------
watchEffect(async () => {

k2datalist.value = ;

k2try {

k4const endpoint = naname${aaaa_app_config.base_endpoint}/listSearch?target_api=${props.target_api}&duration=${props.duration_item_selected}&prj_code=${prj_code}&guid=${props.guid}naname
k4const response: Response = await fetch(endpoint);

k4if (response.ok) {
k4k2response.json().then(r => {

k8datalist.value = r.data;
k8console.log(datalist.value)

k8if (typeof headers_arr === singleundefinedsingle || headers_arr.length === 0) {
k8k2for (const key in datalist.value[0]) {
k8k4const obj = {
k8k4k2title: key,
k8k4k2align: dabudabustartdabudabu,
k8k4k2sortable: true,
k8k4k2key: key,
k8k4};
k8k4headers.value.push(obj);
k8k2}
k8k2console.log(single配列headers_arrは使用されていません。single);
k8}

k8console.log(headers.value)

k4k2});
k4} else {

k4k2const errorData = await response.json();
k4k2console.log(dabudabuFailed to acquire datadabudabu)
k4k2console.log(errorData.detail);

k4}
k2} catch (error) {
k4console.log(error)
k2}
});

//-----------------------------------------------------
// 開始終了時間指定（カレンダー）任意の過去期間指定選択時
//-----------------------------------------------------
watchEffect(async () => {

k2let daterange = naname${props.daterange_arr}naname

k2if (daterange != dabudabuundefineddabudabu && daterange != dabudabudabudabu) {

k4datalist.value = ;

k4let daterange_unixtime = get_startendunixtime(daterange);

k4try {
k4k2const endpoint = naname${aaaa_app_config.base_endpoint}/listSearch?target_api=${props.target_api}&since=${daterange_unixtime[0]}&until=${daterange_unixtime[1]}&prj_code=${prj_code}&guid=${props.guid}naname
k4k2const response: Response = await fetch(endpoint);

k4k2if (response.ok) {
k8response.json().then(r => {
k8k2datalist.value = r.data;

k8k2if (typeof headers_arr === singleundefinedsingle || headers_arr.length === 0) {
k8k4for (const key in datalist.value[0]) {
k8k4k2const obj = {
k8k8title: key,
k8k8align: dabudabustartdabudabu,
k8k8sortable: true,
k8k8key: key,
k8k4k2};
k8k4k2headers.value.push(obj);
k8k4}
k8k4console.log(single配列headers_arrは使用されていません。single);
k8k2}

k8k2console.log(headers.value);

k8});
k4k2} else {

k8const errorData = await response.json();
k8console.log(dabudabuFailed to acquire datadabudabu)
k8console.log(errorData.detail);

k4k2}
k4} catch (error) {
k4k2console.log(error)
k4}
k2};
});

//-----------------------------------------------------
// infra画面へ遷移 category を案件ごと変更予定
//-----------------------------------------------------

const toDoubleDigits = (num) => {
k2num += dabudabudabudabu;
k2if (num.length === 1) {
k4num = dabudabu0dabudabu + num;
k2}
k2return num;
};

const yyyymmddhhmiss = (d) => {
k2var date = new Date(d);
k2var yyyy = date.getFullYear();
k2var mm = toDoubleDigits(date.getMonth() + 1);
k2var dd = toDoubleDigits(date.getDate());
k2var hh = toDoubleDigits(date.getHours());
k2var mi = toDoubleDigits(date.getMinutes());
k2return yyyy + single-single + mm + single-single + dd + single single + hh + single:single + mi + dabudabu:00dabudabu;
};

</script>