■ - yakoumaca’s blog

★★★□7 ・cmpmutingruledetail.vue
kakko3templatekakko4
k4kakko3v-container class=doublebg-grey-lighten-4doublekakko4

k4k4kakko3v-snackbar v-model=doublesnackbar.visibledouble :color=doublemessage.typedouble location=doubletopdouble :timeout=doublesnackbar.timeout_errordoublekakko4
k4k4k4kakko3span class=doubletext-subtitle-1doublekakko4kakko3v-icon top class=doublemr-1doublekakko4 mdi-close-circlekakko3/v-iconkakko4 {{ message.text }}kakko3/spankakko4
k4k4k4kakko3template v-slot:actionskakko4
k4k4k4k4kakko3v-btn color=doublewhitedouble variant=doubletextdouble @click=doublesnackbar.visible = falsedoublekakko4Closekakko3/v-btnkakko4
k4k4k4kakko3/templatekakko4
k4k4kakko3/v-snackbarkakko4

k4k4kakko3sectionkakko4
k4k4k4kakko3div v-if=doubleedit_flagdoublekakko4
k4k4k4k4kakko3h1kakko4Edit a muting rulekakko3/h1kakko4
k4k4k4k4kakko3div class=doublemutingrule_id_editdoublekakko4id: {{ mutingrule_id }}kakko3/divkakko4
k4k4k4kakko3/divkakko4
k4k4k4kakko3div v-elsekakko4
k4k4k4k4kakko3h1kakko4Add a muting rulekakko3/h1kakko4
k4k4k4kakko3/divkakko4
k4k4kakko3/sectionkakko4

k4k4kakko3formkakko4
k4k4k4kakko3sectionkakko4
k4k4k4k4kakko3h2kakko41. Name and describe your rulekakko3/h2kakko4

k4k4k4k4kakko3v-text-field v-model=doublenamedouble :counter=doublename_maxlengthdouble label=doubleRule namedouble class=doubleml-3 mr-3 mb-1double
k4k4k4k4k4:rules=double[validate_required, validate_wordkakko1name_maxlengthkakko2, validate_alphanumeric]doublekakko4kakko3/v-text-fieldkakko4

k4k4k4k4kakko3v-textarea v-model=doubledescriptiondouble :counter=doubledescription_maxlengthdouble
k4k4k4k4k4:rules=double[validate_wordkakko1description_maxlengthkakko2]double label=doubleDescriptiondouble class=doubleml-3 mr-3doublekakko4kakko3/v-textareakakko4

k4k4k4kakko3/sectionkakko4

k4k4k4kakko3sectionkakko4
k4k4k4k4kakko3h2kakko42. Selected account for rulekakko3/h2kakko4
k4k4k4k4kakko3!-- accountid 選択 --kakko4
k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4kakko3v-col lg=double12double class=doubleml-autodoublekakko4

k4k4k4k4k4k4kakko3v-select :disabled=doubletruedouble v-model=doubleaccountid_selecteddouble :items=doubleaccountid_listdouble item-title=doubletextdouble
k4k4k4k4k4k4k4item-value=doublevaluedouble style=doublebackground-color:#FFFFFF;double class=doublept-0 pr-3 pb-3 pl-3 mb-3double
k4k4k4k4k4k4k4@update:modelValue=doublechange_accountiddouble label=double使用するアカウントdouble variant=doubleunderlineddouble :hide-details=doubletruedouble
k4k4k4k4k4k4k4return-objectkakko4kakko3/v-selectkakko4
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4kakko3/v-rowkakko4
k4k4k4kakko3/sectionkakko4

k4k4k4kakko3sectionkakko4
k4k4k4k4kakko3h2kakko43. Build violation filterkakko3/h2kakko4
k4k4k4k4kakko3v-listkakko4
k4k4k4k4k4kakko3v-list-item v-for=doublekakko1condition, indexkakko2 in conditionsdouble :key=doubleindexdoublekakko4

k4k4k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4k4k4kakko3v-col cols=double3doublekakko4
k4k4k4k4k4k4k4k4kakko3div v-if=doubleindex === 0doublekakko4
k4k4k4k4k4k4k4k4k4kakko3v-select v-model=doublecondition.attributedouble :items=doubleattributeItemsdouble label=doubleattributedouble
k4k4k4k4k4k4k4k4k4k4required :rules=double[validate_required]doublekakko4kakko3/v-selectkakko4
k4k4k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4k4k4k4kakko3div v-elsekakko4
k4k4k4k4k4k4k4k4k4kakko3v-select v-model=doublecondition.attributedouble :items=doubleattributeItemsdouble
k4k4k4k4k4k4k4k4k4k4label=doubleattributedoublekakko4kakko3/v-selectkakko4
k4k4k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4k4k4k4kakko3v-col cols=double3doublekakko4
k4k4k4k4k4k4k4k4kakko3v-select v-model=doublecondition.operatordouble :items=doubleoperatorItemsdouble label=doubleoperatordoublekakko4kakko3/v-selectkakko4
k4k4k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4k4k4k4kakko3v-col cols=double6doublekakko4
k4k4k4k4k4k4k4k4kakko3div v-if=doubleindex === 0doublekakko4
k4k4k4k4k4k4k4k4k4kakko3v-text-field v-model=doublecondition.valuesdouble label=doublevaluesdouble
k4k4k4k4k4k4k4k4k4k4:counter=doublecondition_values_maxlengthdouble
k4k4k4k4k4k4k4k4k4k4:rules=double[validate_required, validate_wordkakko1condition_values_maxlengthkakko2, validate_alphanumeric]doublekakko4kakko3/v-text-fieldkakko4
k4k4k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4k4k4k4kakko3div v-elsekakko4
k4k4k4k4k4k4k4k4k4kakko3v-text-field v-model=doublecondition.valuesdouble label=doublevaluesdouble
k4k4k4k4k4k4k4k4k4k4:counter=doublecondition_values_maxlengthdouble
k4k4k4k4k4k4k4k4k4k4:rules=double[validate_wordkakko1condition_values_maxlengthkakko2, validate_alphanumeric]doublekakko4kakko3/v-text-fieldkakko4
k4k4k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4k4k4kakko3/v-rowkakko4

k4k4k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4k4k4kakko3v-colkakko4
k4k4k4k4k4k4k4k4kakko3div v-if=doubleindex === 0doublekakko4
k4k4k4k4k4k4k4k4k4kakko3v-radio-group v-model=doublemutingrule_conditionandordouble inlinekakko4
k4k4k4k4k4k4k4k4k4k4kakko3v-radio value=doubleANDdouble label=doubleANDdoublekakko4kakko3/v-radiokakko4
k4k4k4k4k4k4k4k4k4k4kakko3v-radio value=doubleORdouble label=doubleORdoublekakko4kakko3/v-radiokakko4
k4k4k4k4k4k4k4k4k4kakko3/v-radio-groupkakko4
k4k4k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4k4k4k4kakko3div v-else-if=doubleindex === 1double class=doublepl-3 pb-5doublekakko4
k4k4k4k4k4k4k4k4k4{{ mutingrule_conditionandor.toStringkakko1kakko2 }}
k4k4k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4k4k4kakko3/v-rowkakko4
k4k4k4k4k4kakko3/v-list-itemkakko4
k4k4k4k4kakko3/v-listkakko4
k4k4k4kakko3/sectionkakko4

k4k4k4kakko3sectionkakko4
k4k4k4k4kakko3h2kakko44. Schedule your muting windowkakko3/h2kakko4

k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4kakko3v-col sm=double2double md=double2double lg=double2double class=doubletext-right pb-0double align-self=doublecenterdoublekakko4
k4k4k4k4k4k4開始日時
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4k4kakko3v-col sm=double4double md=double4double lg=double4double class=doublepb-0doublekakko4

k4k4k4k4k4k4kakko3VueDatePicker v-model=doublestart_daterange_arrdouble placeholder=double開始日時を選択double v-bind:format=doubledaterange_formatdouble
k4k4k4k4k4k4k4model-type=doubleyyyy-MM-dd HH:mm:ssdouble locale=doublejpdouble cancel-text=doublecanceldouble auto-apply select-text=doubleOKdouble
k4k4k4k4k4k4k4enable-seconds @update:modelValue=doublechange_calendar_daterangedouble
k4k4k4k4k4k4k4class=doublept-4 pb-3 pl-2 dp__theme_customdoublekakko4
k4k4k4k4k4k4kakko3/VueDatePickerkakko4
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4kakko3/v-rowkakko4
k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4kakko3v-col sm=double2double md=double2double lg=double2double class=doubletext-right red--text pt-0double align-self=doublecenterdoublekakko4
k4k4k4k4k4k4終了日時
k4k4k4k4k4kakko3/v-colkakko4

k4k4k4k4k4kakko3v-col sm=double4double md=double4double lg=double4double class=doublept-0doublekakko4
k4k4k4k4k4k4kakko3VueDatePicker v-model=doubleend_daterange_arrdouble placeholder=double終了日時を選択double v-bind:format=doubledaterange_formatdouble
k4k4k4k4k4k4k4model-type=doubleyyyy-MM-dd HH:mm:ssdouble locale=doublejpdouble cancel-text=doublecanceldouble auto-apply select-text=doubleOKdouble
k4k4k4k4k4k4k4enable-seconds @update:modelValue=doublechange_calendar_daterangedouble
k4k4k4k4k4k4k4class=doublept-3 pb-2 pl-2 dp__theme_customdoublekakko4
k4k4k4k4k4k4kakko3/VueDatePickerkakko4
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4kakko3/v-rowkakko4

k4k4k4k4kakko3p v-if=doubleisInvalidTimedouble class=doublemt-0 ml-3 mb-3 text-errordoublekakko4kakko3v-icon topkakko4 mdi-alert-circle-outlinekakko3/v-iconkakko4
k4k4k4k4k4Start time must be before end time.kakko3/pkakko4

k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4kakko3v-col sm=double12double md=double12double lg=double12double class=doubleml-3 mr-5 mb-2doublekakko4
k4k4k4k4k4k4※終日指定（時間を正確に合わせたい）する場合はカレンダー下にある時計アイコンをクリックし、00:00:00-23:59:59 を選択してください。kakko3brkakko4
k4k4k4k4k4k4※時刻は、日本標準時で表示。kakko3brkakko4
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4kakko3/v-rowkakko4
k4k4k4kakko3/sectionkakko4

k4k4k4kakko3sectionkakko4
k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4kakko3v-col sm=double2double md=double2double lg=double2double class=doublept-1 pb-0 double align-self=doublestartdoublekakko4
k4k4k4k4k4k4kakko3v-switch v-model=doubleenableddouble class=doublepl-3double color=doublebluedouble :label=double`${enabled}`double /kakko4
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4k4kakko3v-col sm=double10double md=double10double lg=double10double class=doublemt-2double align-self=doublestartdoublekakko4
k4k4k4k4k4k4Enable on save（mutingruleを有効にする）
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4kakko3/v-rowkakko4

k4k4k4k4kakko3v-rowkakko4
k4k4k4k4k4kakko3v-col sm=double7double md=double7double lg=double7double class=doubleml-2 mb-2doublekakko4

k4k4k4k4k4k4kakko3v-btn v-bind:disabled=doublebutton_processingdouble class=doubleme-4 btn_cancel whitedouble
k4k4k4k4k4k4k4@click=doubleexe_cancel_apikakko1kakko2doublekakko4cancelkakko3/v-btnkakko4

k4k4k4k4k4k4kakko3v-btn class=doubleme-4double @click=doubleexe_save_apikakko1kakko2double color=doublebluedouble v-bind:disabled=doublebutton_processing ||
k4k4k4k4k4k4k4name.length == 0 ||
k4k4k4k4k4k4k4isInvalidTime ||
k4k4k4k4k4k4k4conditions[0].attribute.length == 0 || conditions[0].values.length == 0 ||
k4k4k4k4k4k4k4kakko1kakko1conditions[1].attribute.length == 0kakko2 && kakko1conditions[1].values.length kakko4 0kakko2kakko2 ||
k4k4k4k4k4k4k4kakko1kakko1conditions[1].attribute.length kakko4 0kakko2 && kakko1conditions[1].values.length == 0kakko2kakko2 ||
k4k4k4k4k4k4k4kakko1kakko1conditions[2].attribute.length == 0kakko2 && kakko1conditions[2].values.length kakko4 0kakko2kakko2 ||
k4k4k4k4k4k4k4kakko1kakko1conditions[2].attribute.length kakko4 0kakko2 && kakko1conditions[2].values.length == 0kakko2kakko2 ||
k4k4k4k4k4k4k4name.length kakko4 name_maxlength ||
k4k4k4k4k4k4k4description.length kakko4 description_maxlength ||
k4k4k4k4k4k4k4conditions[0].values.length kakko4 condition_values_maxlength ||
k4k4k4k4k4k4k4conditions[1].values.length kakko4 condition_values_maxlength ||
k4k4k4k4k4k4k4conditions[2].values.length kakko4 condition_values_maxlength ||
k4k4k4k4k4k4k4kakko1!/^[a-zA-Z0-9]+$/.testkakko1namekakko2kakko2 ||
k4k4k4k4k4k4k4kakko1kakko1conditions[0].values.length kakko4 0kakko2 && kakko1!/^[a-zA-Z0-9]+$/.testkakko1conditions[0].valueskakko2kakko2kakko2 ||
k4k4k4k4k4k4k4kakko1kakko1conditions[1].values.length kakko4 0kakko2 && kakko1!/^[a-zA-Z0-9]+$/.testkakko1conditions[1].valueskakko2kakko2kakko2 ||
k4k4k4k4k4k4k4kakko1kakko1conditions[2].values.length kakko4 0kakko2 && kakko1!/^[a-zA-Z0-9]+$/.testkakko1conditions[2].valueskakko2kakko2kakko2
k4k4k4k4k4k4k4doublekakko4

k4k4k4k4k4k4k4kakko3span v-if=doubleedit_flagdoublekakko4
k4k4k4k4k4k4k4k4save rule
k4k4k4k4k4k4k4kakko3/spankakko4
k4k4k4k4k4k4k4kakko3span v-elsekakko4
k4k4k4k4k4k4k4k4Add rule
k4k4k4k4k4k4k4kakko3/spankakko4

k4k4k4k4k4k4kakko3/v-btnkakko4

k4k4k4k4k4k4kakko3span v-if=doubleloading_savedouble class=doubleloadingdoublekakko4
k4k4k4k4k4k4k4kakko3v-progress-circular indeterminate color=doublewhitedouble :size=double35double :width=double5doublekakko4kakko3/v-progress-circularkakko4
k4k4k4k4k4k4kakko3/spankakko4

k4k4k4k4k4kakko3/v-colkakko4

k4k4k4k4k4kakko3v-col sm=double2double md=double2double lg=double2double class=doubletext-rightdoublekakko4
k4k4k4k4k4k4kakko3span v-if=doubleloading_deletedouble class=doubleloadingdoublekakko4
k4k4k4k4k4k4k4kakko3v-progress-circular indeterminate color=doublewhitedouble :size=double35double :width=double5doublekakko4kakko3/v-progress-circularkakko4
k4k4k4k4k4k4kakko3/spankakko4
k4k4k4k4k4kakko3/v-colkakko4

k4k4k4k4k4kakko3v-col sm=double2double md=double2double lg=double2double class=doubleml-autodoublekakko4

k4k4k4k4k4k4kakko3!-- 編集更新画面のみ削除ボタン表示 --kakko4
k4k4k4k4k4k4kakko3div v-if=doublemutingrule_iddoublekakko4
k4k4k4k4k4k4k4kakko3div class=doubletext-centerdoublekakko4

k4k4k4k4k4k4k4k4kakko3v-btn v-bind:disabled=doublebutton_processingdouble class=doublebtn_delete whitedouble
k4k4k4k4k4k4k4k4k4@click=doubledelete_dialog = truedoublekakko4
k4k4k4k4k4k4k4k4k4kakko3v-icon topkakko4 mdi-deletekakko3/v-iconkakko4delete
k4k4k4k4k4k4k4k4kakko3/v-btnkakko4

k4k4k4k4k4k4k4k4kakko3v-dialog v-model=doubledelete_dialogdouble width=doubleautodoublekakko4
k4k4k4k4k4k4k4k4k4kakko3v-cardkakko4
k4k4k4k4k4k4k4k4k4k4kakko3v-card-textkakko4
k4k4k4k4k4k4k4k4k4k4k4本当に削除しますか？
k4k4k4k4k4k4k4k4k4k4kakko3/v-card-textkakko4
k4k4k4k4k4k4k4k4k4k4kakko3v-card-actionskakko4
k4k4k4k4k4k4k4k4k4k4k4kakko3v-spacerkakko4kakko3/v-spacerkakko4
k4k4k4k4k4k4k4k4k4k4k4kakko3v-btn color=doublegreen-darken-1double variant=doubletextdouble @click=doubledelete_dialog = falsedoublekakko4
k4k4k4k4k4k4k4k4k4k4k4k4キャンセル
k4k4k4k4k4k4k4k4k4k4k4kakko3/v-btnkakko4
k4k4k4k4k4k4k4k4k4k4k4kakko3v-btn color=doublegreen-darken-1double variant=doubletextdouble @click=doubleexe_delete_apikakko1kakko2doublekakko4
k4k4k4k4k4k4k4k4k4k4k4k4削除
k4k4k4k4k4k4k4k4k4k4k4kakko3/v-btnkakko4
k4k4k4k4k4k4k4k4k4k4kakko3/v-card-actionskakko4
k4k4k4k4k4k4k4k4k4kakko3/v-cardkakko4
k4k4k4k4k4k4k4k4kakko3/v-dialogkakko4
k4k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4k4kakko3/divkakko4
k4k4k4k4k4kakko3/v-colkakko4
k4k4k4k4kakko3/v-rowkakko4
k4k4k4kakko3/sectionkakko4
k4k4kakko3/formkakko4
k4kakko3/v-containerkakko4
kakko3/templatekakko4

kakko3script setup lang=doubletsdoublekakko4

import { ref, reactive , Ref } from singlevuesingle;
import { useRoute } from singlevue-routersingle
import { duration_text, convert_date_str, yyyymmddhhmiss } from single@/components/andes/cmputilsingle;
import VueDatePicker from single@vuepic/vue-datepickersingle;
import single@vuepic/vue-datepicker/dist/main.csssingle

const route = useRoutekakko1kakko2
// const mutingrulelist_page = single/m08mutingrulelistsingle
const mutingrulelist_page = single/mutingrulelistsingle
const isInvalidTime = refkakko1falsekakko2

interface conditiontype {
k4attribute: string;
k4operator: string;
k4values: string;
}

//入力項目
const name = refkakko3stringkakko4kakko1singlesinglekakko2
const description = refkakko3stringkakko4kakko1singlesinglekakko2
const enabled = refkakko3booleankakko4kakko1truekakko2
const condition = refkakko3any | nullkakko4kakko1kakko2
const start_daterange_arr = refkakko3string | nullkakko4kakko1singlesinglekakko2; // starttime, endtime
const end_daterange_arr = refkakko3string | nullkakko4kakko1singlesinglekakko2; // starttime, endtime

// filter デフォルト3件
const conditions = refkakko3any | nullkakko4kakko1[
k4{ attribute: singlesingle, operator: singleEQUALSsingle, values: singlesingle },
k4{ attribute: singlesingle, operator: singleEQUALSsingle, values: singlesingle },
k4{ attribute: singlesingle, operator: singleEQUALSsingle, values: singlesingle }
]kakko2;

const daterange_format = singleyyyy-MM-dd HH:mmsingle;
const mutingrule_conditionandor = refkakko1singleANDsinglekakko2 // and / or
const mutingrule_id = route.query.mutingrule_id
const account_id = route.query.account_id
const accountid_selected = refkakko1account_idkakko2

interface ResponseData {
k4id: number;
k4name: string;
k4description: string;
k4enabled: boolean;
k4condition: {
k4k4attribute: string;
k4k4operator: string;
k4k4values: string;
k4} | null;
k4schedule: {
k4k4startTime: string;
k4k4endTime: string;
k4} | null;
}

let edit_flag = true
let message = reactivekakko1{ type: singlesingle, text: singlesingle }kakko2;

console.logkakko1mutingrule_idkakko2
console.logkakko1account_idkakko2

if kakko1mutingrule_idkakko2 {
k4edit_flag = true
} else {
k4edit_flag = false
}

// input max length
const name_maxlength = 20
const description_maxlength = 200
const condition_values_maxlength = 1024

// input validate
const validate_required = kakko1v: anykakko2 =kakko4 !!v || singlevalues is requiredsingle
const validate_alphanumeric = kakko1v: anykakko2 =kakko4 /^[a-zA-Z0-9]*$/.testkakko1vkakko2 || single半角英数字で入力してくださいsingle
const validate_word = kakko1max_length: numberkakko2 =kakko4 kakko1v: stringkakko2 =kakko4 v.length kakko3= max_length || `Maximum number of characters is ${max_length}`

// selectbox
const attributeItems = [
k4singlesingle,
k4singleACCOUNTIDsingle,
k4singleCONDITIONIDsingle,
k4singleCONDITIONNAMEsingle,
k4singlePOLICYIDsingle,
k4singlePOLICYNAMEsingle];

const operatorItems = [
k4singleEQUALSsingle,
k4singleNOT_EQUALSsingle,
k4singleCONTAINSsingle,
k4singleNOT_CONTAINSsingle,
k4singleSTARTS_WITHsingle,
k4singleANYsingle];

// snackbar
const snackbar = reactivekakko1{
k4color: doubleinfodouble,
k4icon: doubleerrordouble,
k4mode: null,
k4position: doubletopdouble,
k4text: null,
k4timeout_error: double-1double, // -1: 表示継続
k4width: double2000pxdouble,
k4title: doubledouble,
k4// text: doubledouble,
k4visible: false
}kakko2

// const state = reactivekakko1{
//k4 ...initialState,
// }kakko2

// アカウントid一覧
// import { useInjection } from single@/module/shared/systemsingle;
// import type { RoleCategoryItemType } from single@/types/shared/categorysingle;

// const roleCategoryItemInject = useInjection kakko3 { roleCategoryItem: RoleCategoryItemType,]kakko4 kakko1singlenavigation.isolationSetting.rolesinglekakko2;
// const { roleCategoryItem } = roleCategoryItemInject;

// アカウント一覧は非選択なのでコメントアウト
// // テスト用本番リリース時上記4コメントアウト取得し、以下を削除する
// const roleCategoryItem = [
//k4 {
//k4k4 doublerole_codedouble: double__ADMIN_ROLE1__double,
//k4k4 doublecategory_codedouble: double3994569double,
//k4k4 doublecategory_titledouble: doubleNewRelic1double,
//k4k4 doublemeta_valuesdouble: {
//k4k4k4 doublenavigation.isolationSetting.category.metavaluedouble: {
//k4k4k4k4 doubletypedouble: doublestringdouble,
//k4k4k4k4 doublevaluedouble: doubledashboard-3974869double
//k4k4k4 }
//k4k4 }
//k4 },
//k4 {
//k4k4 doublerole_codedouble: double__ADMIN_ROLE2__double,
//k4k4 doublecategory_codedouble: double9999345double,
//k4k4 doublecategory_titledouble: doubleNewRelic2double,
//k4k4 doublemeta_valuesdouble: {
//k4k4k4 doublenavigation.isolationSetting.category.metavaluedouble: {
//k4k4k4k4 doubletypedouble: doublestringdouble,
//k4k4k4k4 doublevaluedouble: doubledashboard-3974xxx2double
//k4k4k4 }
//k4k4 }
//k4 },
//k4 {
//k4k4 doublerole_codedouble: double__ADMIN_ROLE3__double,
//k4k4 doublecategory_codedouble: double3974xxx3double,
//k4k4 doublecategory_titledouble: doubleNewRelic3double,
//k4k4 doublemeta_valuesdouble: {
//k4k4k4 doublenavigation.isolationSetting.category.metavaluedouble: {
//k4k4k4k4 doubletypedouble: doublestringdouble,
//k4k4k4k4 doublevaluedouble: doubledashboard-3974xxx3double
//k4k4k4 }
//k4k4 }
//k4 }
// ]

// let accountid_list = refkakko1kakko2;
let accountid_list = refkakko3anykakko4kakko1kakko2;

// // roleより、各値取得
// if kakko1roleCategoryItem.length kakko4 0kakko2 {
//k4 try {
//k4k4 const accountid_list = refkakko1roleCategoryItem.mapkakko1kakko1itemkakko2 =kakko4 {
//k4k4k4 return { text: item.category_code, value: item.category_code };
//k4k4 }kakko2
//k4k4 kakko2;
//k4k4 console.logkakko1roleCategoryItemkakko2
//k4 } catch kakko1errorkakko2 {
//k4k4 console.errorkakko1singlefailed to acquire role datasinglekakko2;
//k4k4 console.errorkakko1errorkakko2;
//k4 }

// } else {
//k4 console.errorkakko1singlerole not foundsinglekakko2;
// }

//---------------------------------------
// calendar 日付変更
//---------------------------------------
const change_calendar_daterange = kakko1event: anykakko2 : void =kakko4 {

k4duration_text.value = convert_date_strkakko1eventkakko2
k4console.logkakko1duration_text.valuekakko2 // 2023/10/21 17:45 - 2023/10/28 17:45

k4// 開始日時,終了日時のselectbox内 xボタン押下時、片方の時間は未設定となり時間の設定は有効となる
k4if kakko1duration_text.value == undefinedkakko2 {
k4k4isInvalidTime.value = false
k4k4return
k4}

k4if kakko1kakko1end_daterange_arr.valuekakko2 && kakko1start_daterange_arr.valuekakko2kakko2 {
k4k4if kakko1end_daterange_arr.value kakko3 start_daterange_arr.valuekakko2 {
k4k4k4isInvalidTime.value = true
k4k4} else {
k4k4k4isInvalidTime.value = false
k4k4}
k4}
}

//---------------------------------------
// 処理中のボタン非活性化状態解除（ボタン押下可能にする）＆ページ上部に移動
//---------------------------------------
const change_button_enable = kakko1kakko2 =kakko4 {
k4loading_save.value = false
k4button_processing.value = false
k4loading_delete.value = false

k4window.scrollTokakko1{ top: 0, behavior: singlesmoothsingle }kakko2; // エラー時はページ内最上部へ移動（message表示対応）
}

//---------------------------------------
// accountid選択
//---------------------------------------
const change_accountid = kakko1event: anykakko2 =kakko4 {
k4console.logkakko1doublechange_accountidkakko1kakko2doublekakko2
k4console.logkakko1event.valuekakko2
k4accountid_selected.value = event.value
}

//---------------------------------------------------------------------
// 1 初期表示情報検索
//---------------------------------------------------------------------
// const datalist = refkakko1kakko2
console.logkakko1mutingrule_idkakko2

// 初期表示 edit
if kakko1kakko1mutingrule_id !== doubleundefineddoublekakko2 && kakko1mutingrule_id !== undefinedkakko2kakko2 {

k4console.logkakko1mutingrule_idkakko2
k4console.logkakko1account_idkakko2

k4try {

k4k4const postdata = {
k4k4k4mutingrule_id: mutingrule_id,
k4k4k4account_id: account_id,
k4k4};

k4k4console.logkakko1account_idkakko2

k4k4const endpoint = `${import.meta.env.VITE_BACKEND_URL}/andes/v1/alertsMutingRuleSearchbyid`
k4k4const response: Response = await fetchkakko1endpoint, {
k4k4k4method: singlePOSTsingle,
k4k4k4headers: {
k4k4k4k4singleContent-Typesingle: singleapplication/jsonsingle,
k4k4k4},
k4k4k4credentials: singleincludesingle,
k4k4k4body: JSON.stringifykakko1postdatakakko2,
k4k4}kakko2;

k4k4console.logkakko1postdatakakko2
k4k4console.logkakko1responsekakko2

k4k4if kakko1response.okkakko2 {
k4k4k4const r = await response.jsonkakko1kakko2;
k4k4k4const datalist: Refkakko3anykakko4 = refkakko1r.datakakko2;

k4k4k4if kakko1r.status == doubleokdoublekakko2 {
k4k4k4k4console.logkakko1rkakko2

k4k4k4k4if kakko1datalist.value.id !== undefinedkakko2 {
k4k4k4k4k4// 1行目のみ取得
k4k4k4k4k4console.logkakko1rkakko2

k4k4k4k4k4name.value = datalist.value.name
k4k4k4k4k4description.value = datalist.value.description
k4k4k4k4k4enabled.value = datalist.value.enabled
k4k4k4k4k4condition.value = datalist.value.condition

k4k4k4k4k4// 条件の値がある行のみ取得。他の行は前の行のまま（空設定）とする
k4k4k4k4k4if kakko1condition.valuekakko2 {
k4k4k4k4k4k4for kakko1let i = 0; i kakko3 kakko1condition.value.conditions.lengthkakko2; i++kakko2 {
k4k4k4k4k4k4k4conditions.value[i].attribute = `${condition.value.conditions[i].attribute}`
k4k4k4k4k4k4k4conditions.value[i].operator = `${condition.value.conditions[i].operator}`
k4k4k4k4k4k4k4conditions.value[i].values = `${condition.value.conditions[i].values[0]}`
k4k4k4k4k4k4}
k4k4k4k4k4k4mutingrule_conditionandor.value = condition.value.operator
k4k4k4k4k4}

k4k4k4k4k4if kakko1datalist.value.schedulekakko2 {

k4k4k4k4k4k4if kakko1datalist.value.schedule.startTime !== nullkakko2 {
k4k4k4k4k4k4k4var dt1 = new Datekakko1datalist.value.schedule.startTimekakko2;
k4k4k4k4k4k4k4start_daterange_arr.value = yyyymmddhhmisskakko1dt1.toLocaleStringkakko1kakko2kakko2
k4k4k4k4k4k4}
k4k4k4k4k4k4if kakko1datalist.value.schedule.endTime !== nullkakko2 {
k4k4k4k4k4k4k4var dt2 = new Datekakko1datalist.value.schedule.endTimekakko2;
k4k4k4k4k4k4k4end_daterange_arr.value = yyyymmddhhmisskakko1dt2.toLocaleStringkakko1kakko2kakko2
k4k4k4k4k4k4}
k4k4k4k4k4}

k4k4k4k4k4// console.logkakko1datalist.value.lengthkakko2

k4k4k4k4k4if kakko1datalist.value.length == 0kakko2 {
k4k4k4k4k4k4message.text = doublenot found data.double
k4k4k4k4k4k4message.type = doubleerrordouble
k4k4k4k4k4k4snackbar.visible = true
k4k4k4k4k4k4console.logkakko1responsekakko2;
k4k4k4k4k4}
k4k4k4k4} else {
k4k4k4k4k4message.text = doublenot found mutingrule_id.double
k4k4k4k4k4message.type = doubleerrordouble
k4k4k4k4k4snackbar.visible = true
k4k4k4k4k4console.logkakko1rkakko2;
k4k4k4k4}

k4k4k4} else {
k4k4k4k4message.text = doubleFailed to mutingruledetail. double
k4k4k4k4message.type = doubleerrordouble
k4k4k4k4snackbar.visible = true
k4k4k4k4console.logkakko1rkakko2
k4k4k4k4console.logkakko1JSON.stringifykakko1r.messageskakko2kakko2
k4k4k4}

k4k4} else {
k4k4k4const r = await response.jsonkakko1kakko2;
k4k4k4message.text = doubleFailed to acquire data.double
k4k4k4message.type = doubleerrordouble
k4k4k4snackbar.visible = true
k4k4k4console.logkakko1rkakko2;
k4k4k4console.logkakko1r.detailkakko2;
k4k4}
k4k4
k4} catch kakko1errorkakko2 {
k4k4message.text = doubleapi connect network Error.double
k4k4message.type = doubleerrordouble
k4k4snackbar.visible = true
k4k4console.errorkakko1double[error] api connect network Errordoublekakko2
k4k4console.errorkakko1errorkakko2
k4}

} else {
k4// 初期表示 create
k4console.logkakko1singlemutingrule_id not setsinglekakko2;
}

//---------------------------------------------------
// 2 cancelボタン
//---------------------------------------------------
const exe_cancel_api = async kakko1kakko2 =kakko4 {
k4console.logkakko1doublecancle button clickdoublekakko2
k4window.location.href = mutingrulelist_page // 一覧ページへ遷移
}

//---------------------------------------------------
// 3 saveボタン
//---------------------------------------------------
const exe_save_api = async kakko1kakko2 =kakko4 {
k4console.logkakko1doublestart exe_save_apidoublekakko2

k4// ボタン非活性化処理
k4button_processing.value = true
k4loading_save.value = true

k4console.logkakko1conditionskakko2

k4for kakko1let i = 0; i kakko3 conditions.value.length; i++kakko2 {
k4k4console.logkakko1conditions.value[i]kakko2
k4k4console.logkakko1`attribute: ${conditions.value[i].attribute}, operator: ${conditions.value[i].operator}, value: ${conditions.value[i].values}`kakko2; // ok
k4}

k4// 開始終了時間時間セット
k4if kakko1start_daterange_arr.valuekakko2 {
k4k4if kakko1start_daterange_arr.value == undefinedkakko2 {
k4k4k4start_daterange_arr.value = singlesingle
k4k4}
k4}
k4if kakko1end_daterange_arr.valuekakko2 {
k4k4if kakko1end_daterange_arr.value == undefinedkakko2 {
k4k4k4end_daterange_arr.value = singlesingle
k4k4}
k4}

k4console.logkakko1mutingrule_idkakko2
k4console.logkakko1accountid_selected.valuekakko2

k4if kakko1mutingrule_id === undefinedkakko2 {
k4k4//-------------------------------------------------
k4k4// create 新規登録処理
k4k4//-------------------------------------------------
k4k4console.logkakko1doublecreate.doublekakko2
k4k4const endpoint = `${import.meta.env.VITE_BACKEND_URL}/andes/v1/alertsMutingRuleCreate`

k4k4console.logkakko1accountid_selected.valuekakko2

k4k4try {

k4k4k4const postdata_create = {
k4k4k4k4mutingrule_name: name.value,
k4k4k4k4mutingrule_description: description.value,
k4k4k4k4account_id: Stringkakko1accountid_selected.valuekakko2,
k4k4k4k4mutingrule_startTime: start_daterange_arr.value,
k4k4k4k4mutingrule_endTime: end_daterange_arr.value,
k4k4k4k4mutingrule_conditionandor: mutingrule_conditionandor.value,
k4k4k4k4mutingrule_enabled: enabled.value,
k4k4k4k4mutingrule_condition_array: conditions.value,
k4k4k4};

k4k4k4const response: Response = await fetchkakko1endpoint, {
k4k4k4k4method: singlePOSTsingle,
k4k4k4k4headers: {
k4k4k4k4k4singleContent-Typesingle: singleapplication/jsonsingle,
k4k4k4k4},
k4k4k4k4credentials: singleincludesingle,
k4k4k4k4body: JSON.stringifykakko1postdata_createkakko2,
k4k4k4}kakko2;

k4k4k4console.logkakko1postdata_createkakko2
k4k4k4console.logkakko1responsekakko2

k4k4k4if kakko1response.okkakko2 {
k4k4k4k4const r = await response.jsonkakko1kakko2;
k4k4k4k4console.logkakko1rkakko2

k4k4k4k4// 新規の場合は、alertsMutingRuleCreate 更新の場合は、alertsMutingRuleUpdate
k4k4k4k4console.logkakko1r.messages.alertsMutingRuleCreatekakko2

k4k4k4k4if kakko1r.status == doubleokdoublekakko2 {

k4k4k4k4k4// 一覧ページへ遷移&メッセージを上部に表示（create messagekakko2
k4k4k4k4k4window.location.href = mutingrulelist_page + single?message_category=createdsingle

k4k4k4k4} else {
k4k4k4k4k4message.text = doubleFailed to create mutingrule id. double + JSON.stringifykakko1r.messageskakko2
k4k4k4k4k4message.type = doubleerrordouble
k4k4k4k4k4snackbar.visible = true
k4k4k4k4k4console.logkakko1rkakko2

k4k4k4k4k4//処理中のボタン非活性化状態解除
k4k4k4k4k4change_button_enablekakko1kakko2
k4k4k4k4}

k4k4k4} else {
k4k4k4k4const r = await response.jsonkakko1kakko2;
k4k4k4k4console.logkakko1rkakko2;
k4k4k4k4console.logkakko1r.detailkakko2;
k4k4k4k4message.text = doubleFailed to acquire data.double
k4k4k4k4message.type = doubleerrordouble
k4k4k4k4snackbar.visible = true

k4k4k4k4//処理中のボタン非活性化状態解除
k4k4k4k4change_button_enablekakko1kakko2
k4k4k4}

k4k4} catch kakko1errorkakko2 {
k4k4k4message.text = doublecreate failed,double
k4k4k4message.type = doubleerrordouble
k4k4k4snackbar.visible = true
k4k4k4console.logkakko1errorkakko2

k4k4k4//処理中のボタン非活性化状態解除
k4k4k4change_button_enablekakko1kakko2
k4k4}

k4} else {
k4k4//-------------------------------------------------
k4k4// update 更新処理
k4k4//-------------------------------------------------
k4k4console.logkakko1doubleupdate.doublekakko2
k4k4const endpoint = `${import.meta.env.VITE_BACKEND_URL}/andes/v1/alertsMutingRuleUpdate/`

k4k4try {

k4k4k4const postdata_update = {
k4k4k4k4mutingrule_id: mutingrule_id,
k4k4k4k4mutingrule_name: name.value,
k4k4k4k4mutingrule_description: description.value,
k4k4k4k4account_id: Stringkakko1accountid_selected.valuekakko2,
k4k4k4k4mutingrule_startTime: start_daterange_arr.value,
k4k4k4k4mutingrule_endTime: end_daterange_arr.value,
k4k4k4k4mutingrule_conditionandor: mutingrule_conditionandor.value,
k4k4k4k4mutingrule_enabled: enabled.value,
k4k4k4k4mutingrule_condition_array: conditions.value,
k4k4k4};

k4k4k4console.logkakko1postdata_updatekakko2
k4k4k4console.logkakko1responsekakko2

k4k4k4if kakko1response.okkakko2 {
k4k4k4k4const r = await response.jsonkakko1kakko2;
k4k4k4k4console.logkakko1rkakko2

k4k4k4k4if kakko1r.status == doubleokdoublekakko2 {
k4k4k4k4k4// 一覧ページへ遷移 & メッセージを上部表示（update messagekakko2
k4k4k4k4k4window.location.href = mutingrulelist_page + single?message_category=updatedsingle

k4k4k4k4} else {
k4k4k4k4k4message.text = doubleFailed to update mutingrule id. double + JSON.stringifykakko1r.messageskakko2
k4k4k4k4k4message.type = doubleerrordouble
k4k4k4k4k4snackbar.visible = true
k4k4k4k4k4console.logkakko1rkakko2

k4k4k4k4k4//処理中のボタン非活性化状態解除
k4k4k4k4k4change_button_enablekakko1kakko2
k4k4k4k4}

k4k4k4k4//処理中のボタン非活性化状態解除
k4k4k4k4change_button_enablekakko1kakko2
k4k4k4}

k4k4} catch kakko1errorkakko2 {
k4k4k4message.text = doubleupdate failed.double
k4k4k4message.type = doubleerrordouble
k4k4k4snackbar.visible = true
k4k4k4console.logkakko1errorkakko2

k4k4k4//処理中のボタン非活性化状態解除
k4k4k4change_button_enablekakko1kakko2
k4k4}
k4}
};

//---------------------------------------------------
// 4 deleteボタン
//---------------------------------------------------
const exe_delete_api = async kakko1kakko2 =kakko4 {

k4console.logkakko1doublestart exe_delete_apidoublekakko2

k4// ボタン非活性化処理
k4button_processing.value = true
k4loading_delete.value = true
k4delete_dialog.value = false

k4const endpoint = `${import.meta.env.VITE_BACKEND_URL}/andes/v1/alertsMutingRuleDelete/`

k4try {

k4k4const postdata_delete = {
k4k4k4mutingrule_id: mutingrule_id,
k4k4k4account_id: accountid_selected.value,
k4k4};

k4k4const response: Response = await fetchkakko1endpoint, {
k4k4k4method: singlePOSTsingle,
k4k4k4headers: {
k4k4k4k4singleContent-Typesingle: singleapplication/jsonsingle,
k4k4k4},
k4k4k4credentials: singleincludesingle,
k4k4k4body: JSON.stringifykakko1postdata_deletekakko2,
k4k4}kakko2;

k4k4console.logkakko1enabled.valuekakko2
k4k4console.logkakko1postdata_deletekakko2

k4k4if kakko1response.okkakko2 {
k4k4k4const r = await response.jsonkakko1kakko2;
k4k4k4console.logkakko1rkakko2

k4k4k4if kakko1r.status == doubleokdoublekakko2 {
k4k4k4k4// 一覧ページへ遷移&メッセージを上部に表示する
k4k4k4k4window.location.href = mutingrulelist_page + single?message_category=deletedsingle

k4k4k4} else {

k4k4k4k4message.text = doubleFailed to delete mutingrule id. double + JSON.stringifykakko1r.messageskakko2
k4k4k4k4message.type = doubleerrordouble
k4k4k4k4snackbar.visible = true
k4k4k4k4console.logkakko1rkakko2

k4k4k4k4//処理中のボタン非活性化状態解除
k4k4k4k4change_button_enablekakko1kakko2

k4k4k4}

k4k4} else {

k4k4k4const r = await response.jsonkakko1kakko2;
k4k4k4console.logkakko1rkakko2;
k4k4k4console.logkakko1r.detailkakko2;
k4k4k4message.text = doubleFailed to acquire data.double
k4k4k4message.type = doubleerrordouble
k4k4k4snackbar.visible = true

k4k4k4//処理中のボタン非活性化状態解除
k4k4k4change_button_enablekakko1kakko2
k4k4}

k4} catch kakko1errorkakko2 {
k4k4message.text = doubledelete failed.double
k4k4message.type = doubleerrordouble
k4k4snackbar.visible = true
k4k4console.logkakko1errorkakko2

k4k4//処理中のボタン非活性化状態解除
k4k4change_button_enablekakko1kakko2
k4}
}

const loading_delete = refkakko1falsekakko2
const loading_save = refkakko1falsekakko2
const delete_dialog = refkakko1falsekakko2
const button_processing = refkakko1falsekakko2

kakko3/scriptkakko4

kakko3style scopedkakko4
section {
k4background-color: #FFFFFF;
k4margin: 20px 10px 20px 10px;
k4padding: 10px;
}

.btn_cancel:disabled {
k4color: #FFF;
k4background: #AAAAAA;
}

.btn_delete:disabled {
k4color: #FFF;
k4background: #AAAAAA;
}

.mutingrule_id_edit {
k4/* red--text text-caption ma-2 */
k4color: #999999;
k4padding-bottom: 5px;

}
kakko3/stylekakko4

★★★□8 ・cmpvdatatable.vue
kakko3templatekakko4
kakko3v-card width=double100%doublekakko4
k4kakko3v-card-titlekakko4{{ card_title }}kakko3/v-card-titlekakko4
k4kakko3v-card-subtitlekakko4{{ card_subtitle }}kakko3/v-card-subtitlekakko4

k4kakko3div v-if=doubledatalist === nulldoublekakko4
k4 kakko3div class=doubletext-centerdoublekakko4kakko3v-progress-circular color=doubleerrordouble indeterminatekakko4kakko3/v-progress-circularkakko4kakko3/divkakko4
k4kakko3/divkakko4

k4kakko3!-- mutingrule list --kakko4
k4kakko3div v-else-if=doubletarget_api === singlemutingrulelistsingledoublekakko4

k4 kakko3v-data-table :headers=doubleheaders_arrdouble :items=doubledatalistdouble item-value=doublemessagedouble @click:row=doublejumpto_mutingruledetaildouble
k4k4class=doubleelevation-1doublekakko4

k4k4kakko3template v-slot:item.status=double{ item }doublekakko4
k4k4 kakko3div v-if=doubleitem && isObjectWithPropertykakko1item, singlestatussinglekakko2doublekakko4
k4k4k4kakko3div v-if=doubleitem.status === singleACTIVEsingledoublekakko4
k4k4k4 kakko3span class=doubletext-greendoublekakko4{{ item.status }}kakko3/spankakko4
k4k4k4kakko3/divkakko4
k4k4k4kakko3div v-else-if=doubleitem.status === singleSCHEDULEDsingledoublekakko4
k4k4k4 kakko3span class=doubletext-amberdoublekakko4{{ item.status }}kakko3/spankakko4
k4k4k4kakko3/divkakko4
k4k4k4kakko3div v-elsekakko4
k4k4k4 {{ item.status }}
k4k4k4kakko3/divkakko4
k4k4 kakko3/divkakko4
k4k4 kakko3div v-elsekakko4
k4k4k4kakko3spankakko4-kakko3/spankakko4
k4k4 kakko3/divkakko4
k4k4kakko3/templatekakko4

k4k4kakko3template v-slot:item.schedule_start=double{ item }doublekakko4
k4k4 kakko3div v-if=doubleitem && isObjectWithPropertykakko1item, singleschedule_startsinglekakko2 && isObjectWithPropertykakko1item, singleschedule_endsinglekakko2doublekakko4
k4k4k4kakko3!-- 終了日後の行は赤文字表示 --kakko4
k4k4k4kakko3div v-if=doubleitem.schedule_startdouble
k4k4k4 :style=double{ color: kakko1new Datekakko1item.schedule_endkakko2 kakko3 new Datekakko1kakko2kakko2 && kakko1item.schedule_endkakko2 ? singleredsingle : singleblacksingle }doublekakko4

k4k4k4 {{ kakko1yyyymmddhhmisskakko1new Datekakko1item.schedule_startkakko2kakko2.toLocaleStringkakko1kakko2kakko2 }}
k4k4k4kakko3/divkakko4
k4k4k4kakko3div v-elsekakko4
k4k4k4 kakko3spankakko4-kakko3/spankakko4
k4k4k4kakko3/divkakko4
k4k4 kakko3/divkakko4
k4k4 kakko3div v-elsekakko4
k4k4k4kakko3spankakko4-kakko3/spankakko4
k4k4 kakko3/divkakko4
k4k4kakko3/templatekakko4

k4k4kakko3template v-slot:item.schedule_end=double{ item }doublekakko4
k4k4 kakko3div v-if=doubleitem && isObjectWithPropertykakko1item, singleschedule_startsinglekakko2 && isObjectWithPropertykakko1item, singleschedule_endsinglekakko2doublekakko4

k4k4k4kakko3div v-if=doubleitem.schedule_enddouble
k4k4k4 :style=double{ color: kakko1new Datekakko1item.schedule_endkakko2 kakko3 new Datekakko1kakko2kakko2 && kakko1item.schedule_endkakko2 ? singleredsingle : singleblacksingle }doublekakko4

k4k4k4 {{ kakko1yyyymmddhhmisskakko1new Datekakko1item.schedule_endkakko2kakko2.toLocaleStringkakko1kakko2kakko2 }}
k4k4k4kakko3/divkakko4
k4k4k4kakko3div v-elsekakko4
k4k4k4 kakko3spankakko4-kakko3/spankakko4
k4k4k4kakko3/divkakko4
k4k4 kakko3/divkakko4
k4k4 kakko3div v-elsekakko4
k4k4k4kakko3spankakko4-kakko3/spankakko4
k4k4 kakko3/divkakko4
k4k4kakko3/templatekakko4

k4 kakko3/v-data-tablekakko4
k4kakko3/divkakko4

k4kakko3!-- 他 list --kakko4
k4kakko3div v-elsekakko4
k4 kakko3v-data-table :headers=doubleheaders_arrdouble :items=doubledatalistdouble item-value=doublemessagedouble class=doubleelevation-1doublekakko4kakko3/v-data-tablekakko4
k4kakko3/divkakko4

kakko3/v-cardkakko4
kakko3/templatekakko4

kakko3script setup lang=doubletsdoublekakko4

import { watchEffect, ref, Ref } from singlevuesingle;
import { defineProps } from singlevuesingle;

// interface ResponseData {
// id: number;
// name: string;
// description: string;
// enabled: boolean;
// condition: {
//k4 attribute: string;
//k4 operator: string;
//k4 values: string;
// } | null;
// start_daterange_arr: string;
// end_daterange_arr: string;
// }

const headers = refkakko1kakko2;
const datalist: Refkakko3anykakko4 = refkakko1kakko2;

// interface DataItem {
// id: string;
// status: string;
// name: string;
// accountId: string;
// schedule_start: string;
// schedule_end: string;
// createdByUser: string;
// enabled: string;
// }

// const datalist: DataItem = refkakko1kakko2;

const endpoint = `${import.meta.env.VITE_BACKEND_URL}/andes/v1/listSearch`
const mutingruledetail_page = double./mutingruledetaildouble
import { yyyymmddhhmiss } from single@/components/andes/cmputilsingle;

// propsに型指定
const props = definePropskakko1{
account_id: { type: String, required: true, },
card_title: { type: String, required: true },
card_subtitle: { type: String, required: true },
headers_arr: { type: Array, required: false, },
target_api: { type: String, required: true },
}kakko2;

// const account_id = refkakko1props.account_idkakko2
const card_title = props.card_title
const card_subtitle = props.card_subtitle
const headers_arr: any = props.headers_arr
const target_api = props.target_api
console.logkakko1headers_arrkakko2;

//-----------------------------------------------------
// duration
//-----------------------------------------------------
watchEffectkakko1async kakko1kakko2 =kakko4 {
datalist.value = ;

// console.logkakko1props.account_idkakko2

try {
k4const postdata = {
k4 target_api: target_api,
k4 account_id: props.account_id, // watchEffectにより、変更あるたびに発火
k4};

k4const response: Response = await fetchkakko1endpoint, {
k4 method: singlePOSTsingle,
k4 headers: {
k4k4singleContent-Typesingle: singleapplication/jsonsingle,
k4 },
k4 credentials: singleincludesingle,
k4 body: JSON.stringifykakko1postdatakakko2,
k4}kakko2;

k4console.logkakko1postdatakakko2
k4console.logkakko1responsekakko2

k4if kakko1response.okkakko2 {
k4 response.jsonkakko1kakko2.thenkakko1r =kakko4 {
k4k4datalist.value = r.data;
k4k4console.logkakko1rkakko2
k4k4console.logkakko1datalist.valuekakko2

k4k4// status=ng には（nrqlのアカウント存在しない場合 or 他のエラーが混在）しているため、実際のデータの件数の有無は、検索結果の有無を判定する
k4k4if kakko1datalist.valuekakko2 {
k4k4 if kakko1datalist.value.length == 0kakko2 {
k4k4k4console.infokakko1doubledata not founddoublekakko2
k4k4 }
k4k4} else {
k4k4 console.errorkakko1doubleFailed to acquire datalistdoublekakko2
k4k4}

k4 }kakko2;
k4} else {
k4 const errorData = await response.jsonkakko1kakko2;
k4 console.logkakko1doubleFailed to acquire datadoublekakko2
k4 console.logkakko1errorData.detailkakko2;

k4}

} catch kakko1errorkakko2 {
k4console.logkakko1errorkakko2
}
}kakko2;

//-----------------------------------------------------
// muting rule詳細画面へ遷移
//-----------------------------------------------------
const jumpto_mutingruledetail = kakko1e: any, select: anykakko2: void =kakko4 {
console.logkakko1select.itemkakko2 // 行全体
console.logkakko1select.item.idkakko2
window.location.href = mutingruledetail_page + single?mutingrule_id=single + select.item.id + single&account_id=single + props.account_id
}

//-----------------------------------------------------
// objctが指定されたプロパティを持っているかどうかを判定
//-----------------------------------------------------
function isObjectWithPropertykakko1obj: any, property: stringkakko2: obj is { [key: string]: string } {
return obj && typeof obj === singleobjectsingle && property in obj;
}

kakko3
/scriptkakko4