713 lines
24 KiB
Vue
713 lines
24 KiB
Vue
<template>
|
|
<q-dialog
|
|
persistent
|
|
v-model="show_dialog"
|
|
@before-hide="resetData"
|
|
@keydown="
|
|
(evt) => {
|
|
if (!loading && evt.keyCode == 27) {
|
|
show_dialog = false;
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 50vw">
|
|
<q-form @submit="onSubmit">
|
|
<q-card-section class="q-ma-none q-pa-sm">
|
|
<div class="row">
|
|
<div class="col-auto text-h6">
|
|
{{
|
|
type == 1
|
|
? $t("add plan")
|
|
: type == 2
|
|
? $t("edit plan")
|
|
: $t("add plan")
|
|
}}
|
|
</div>
|
|
<q-space />
|
|
<div>
|
|
<q-btn
|
|
:loading="loading"
|
|
flat
|
|
round
|
|
icon="close"
|
|
color="red"
|
|
v-close-popup
|
|
>
|
|
<q-tooltip>
|
|
{{ $t("close") }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-section style="max-height: 70vh; width: 50vw" class="scroll">
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-label>{{ $t("parent group") }}:</q-item-label>
|
|
</q-item>
|
|
<q-item class="q-pa-none q-ma-none">
|
|
<q-item-section style="padding-right: 10px">
|
|
<q-tree
|
|
ref="tree"
|
|
class="scroll"
|
|
:class="loading ? 'disable_tree' : ''"
|
|
v-model:selected="selected"
|
|
:nodes="tree_nodes"
|
|
default-expand-all
|
|
node-key="uuid"
|
|
labelKey="name"
|
|
filter="group filter"
|
|
:filter-method="treeNodesFilter"
|
|
>
|
|
<template v-slot:default-header="prop">
|
|
<q-item
|
|
class="full-width"
|
|
:class="
|
|
prop.tree.selected == prop.key ? 'item-selected-bg' : ''
|
|
"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
:name="'img:source_icon/group.png'"
|
|
color="orange"
|
|
size="28px"
|
|
class="q-mr-sm"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<div class="text-weight-bold text-primary">
|
|
{{ prop.node.name }}
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-tree>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-input
|
|
autofocus
|
|
:loading="loading"
|
|
:disable="loading"
|
|
filled
|
|
v-model="name"
|
|
:label="$t('plan name')"
|
|
:hint="$t('please input plan name')"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.length > 0) || $t('Please type something'),
|
|
]"
|
|
@keydown="
|
|
(evt) => {
|
|
if (evt.keyCode == 13) {
|
|
$refs?.accept?.click();
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<template v-if="name" v-slot:append>
|
|
<q-icon
|
|
name="cancel"
|
|
@click.stop="name = null"
|
|
class="cursor-pointer"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-table
|
|
style="height: 50vh"
|
|
:rows="datas"
|
|
:columns="columns"
|
|
virtual-scroll
|
|
:title="$t('plan data') + ':'"
|
|
hide-bottom
|
|
color="primary"
|
|
row-key="name"
|
|
:loading="loading"
|
|
:rows-per-page-options="[0]"
|
|
:virtual-scroll-sticky-size-start="48"
|
|
@row-contextmenu="onContextMenu"
|
|
>
|
|
<template v-slot:loading>
|
|
<q-inner-loading showing color="primary" />
|
|
</template>
|
|
<template v-slot:body-cell="props">
|
|
<q-td :props="props">
|
|
<div v-if="props.col.name == 'value'">
|
|
<div v-if="props.pageIndex % 2">
|
|
{{ props.value }}{{ $t("s") }}
|
|
<q-popup-edit v-model="props.row.value">
|
|
<q-input
|
|
type="number"
|
|
v-model="props.row.value"
|
|
:min="min_delay"
|
|
dense
|
|
autofocus
|
|
>
|
|
<template v-slot:append>
|
|
<span>{{ $t("s") }}</span>
|
|
</template>
|
|
</q-input>
|
|
</q-popup-edit>
|
|
</div>
|
|
<div v-else>
|
|
<q-popup-edit
|
|
ref="popup_edit"
|
|
v-model="props.row.value"
|
|
>
|
|
<q-tree
|
|
ref="tree"
|
|
:nodes="$store.state.mode_tree"
|
|
node-key="uuid"
|
|
labelKey="name"
|
|
default-expand-all
|
|
>
|
|
<template v-slot:default-header="prop">
|
|
<q-item
|
|
class="full-width"
|
|
:clickable="!prop.node.is_group"
|
|
@click="
|
|
(evt) => {
|
|
props.row.value =
|
|
prop.node.item_data.uuid;
|
|
$refs.popup_edit.hide();
|
|
}
|
|
"
|
|
:style="{
|
|
border:
|
|
props.row.value ==
|
|
prop?.node?.item_data?.uuid
|
|
? '1px solid #aacceec2'
|
|
: 'none',
|
|
}"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
:name="
|
|
prop.node.is_group
|
|
? 'img:source_icon/group.png'
|
|
: 'img:new_icon/mode_icon.png'
|
|
"
|
|
color="orange"
|
|
size="28px"
|
|
class="q-mr-sm"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<div class="text-weight-bold text-primary">
|
|
<span
|
|
v-if="
|
|
prop.node.item_data &&
|
|
!prop.node.is_group
|
|
"
|
|
>({{ prop.node.item_data?.number }})
|
|
</span>
|
|
{{ prop.node.name }}
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-tree>
|
|
</q-popup-edit>
|
|
{{
|
|
modes.find(
|
|
(element) =>
|
|
element && element.uuid == props.row.value
|
|
)?.name ?? ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
{{ $t(props.value) }}
|
|
</div>
|
|
</q-td>
|
|
</template>
|
|
</q-table>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section avatar class="width_5_1">{{
|
|
$t("timing cycle") + ":"
|
|
}}</q-item-section>
|
|
<q-item-section>
|
|
<q-select
|
|
v-model="timing_cycle"
|
|
:loading="loading"
|
|
:options="[$t('enable'), $t('disable')]"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="timing_cycle != $t('disable')">
|
|
<q-item-section avatar class="width_5_1">{{
|
|
$t("time") + ":"
|
|
}}</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-if="false"
|
|
v-model="time_"
|
|
:loading="loading"
|
|
type="time"
|
|
/>
|
|
<q-input
|
|
v-else
|
|
filled
|
|
v-model="time_"
|
|
:loading="loading"
|
|
mask="fulltime"
|
|
:rules="['fulltime']"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon name="access_time" class="cursor-pointer">
|
|
<q-popup-proxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-time v-model="time_" with-seconds format24h now-btn>
|
|
<div class="row items-center justify-end">
|
|
<q-btn
|
|
v-close-popup
|
|
:label="$t('close')"
|
|
color="primary"
|
|
flat
|
|
/>
|
|
</div>
|
|
</q-time>
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="timing_cycle != $t('disable')">
|
|
<q-item-section avatar class="width_5_1">{{
|
|
$t("loop") + ":"
|
|
}}</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day1" :label="$t('monday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day2" :label="$t('tuesday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day3" :label="$t('wednesday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day4" :label="$t('thursday')" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="timing_cycle != $t('disable')">
|
|
<q-item-section avatar class="width_5_1" />
|
|
<q-item-section>
|
|
<q-checkbox v-model="day5" :label="$t('friday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day6" :label="$t('saturday')" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-checkbox v-model="day7" :label="$t('sunday')" />
|
|
</q-item-section>
|
|
<q-item-section> </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
<q-separator />
|
|
|
|
<q-card-actions align="left">
|
|
<q-btn
|
|
:loading="loading"
|
|
flat
|
|
:label="$t('add row')"
|
|
color="primary"
|
|
@click="addRow"
|
|
/>
|
|
<q-space />
|
|
<q-btn
|
|
:loading="loading"
|
|
flat
|
|
:label="$t('Cancel')"
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
ref="accept"
|
|
flat
|
|
:label="$t('Accept')"
|
|
:loading="loading"
|
|
type="submit"
|
|
color="primary"
|
|
/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
<div>
|
|
<q-menu :target="target_dom" v-model="show_context_menu">
|
|
<q-list>
|
|
<q-item clickable v-close-popup @click="(evt) => deleteRow()">
|
|
<q-item-section avatar
|
|
><q-icon name="delete" color="red"
|
|
/></q-item-section>
|
|
<q-item-section>{{ $t("delete row") }}</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup @click="(evt) => addRow()">
|
|
<q-item-section avatar><q-icon name="add" /></q-item-section>
|
|
<q-item-section>{{ $t("add row") }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.disable_tree {
|
|
background: #9e9e9e;
|
|
cursor: wait;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.width_5_1 {
|
|
width: 18%;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, Ref, watch, computed } from "vue";
|
|
import { useStore } from "src/store";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import { useQuasar, date as $date } from "quasar";
|
|
import { useI18n } from "vue-i18n";
|
|
import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
|
|
import { PlanEntity } from "src/entities/PlanEntity";
|
|
import { EWeekDays } from "src/entities/EWeekDays";
|
|
|
|
const __MIN_DELAY = 10;
|
|
|
|
export default defineComponent({
|
|
name: "ComponentPlanDialog",
|
|
|
|
setup() {
|
|
let $store = useStore();
|
|
let $q = useQuasar();
|
|
let $t = useI18n();
|
|
|
|
const min_delay = ref(__MIN_DELAY);
|
|
let show_dialog = ref(false);
|
|
let type = ref(1);
|
|
let name = ref(null);
|
|
let uuid = ref("");
|
|
const selected: any = ref(null);
|
|
let loading = ref(false);
|
|
let datas: Ref<StringKeyValueEntity[]> = ref([]);
|
|
let modes = ref(GlobalData.getInstance().modes);
|
|
const columns = [
|
|
{
|
|
align: "left",
|
|
name: "key",
|
|
required: true,
|
|
label: $t.t("operator"),
|
|
field: "key",
|
|
sortable: false,
|
|
},
|
|
{
|
|
align: "left",
|
|
name: "value",
|
|
label: $t.t("operator value"),
|
|
field: "value",
|
|
sortable: false,
|
|
},
|
|
];
|
|
|
|
let show_context_menu = ref(false);
|
|
let target_dom: any = ref(document.body.children[0]);
|
|
let current_index = 0;
|
|
|
|
let timing_cycle = ref($t.t("disable"));
|
|
let time_ = ref("09:00:00");
|
|
let week_days = ref(EWeekDays.EWeekAll);
|
|
let day1 = ref(true);
|
|
let day2 = ref(true);
|
|
let day3 = ref(true);
|
|
let day4 = ref(true);
|
|
let day5 = ref(true);
|
|
let day6 = ref(true);
|
|
let day7 = ref(true);
|
|
|
|
const tree_nodes = computed({
|
|
get: () => $store.state.plan_tree,
|
|
set: (val) => {},
|
|
});
|
|
|
|
watch(
|
|
() => selected.value,
|
|
(newValue, oldValue) => {
|
|
if (newValue == null) {
|
|
selected.value = "";
|
|
}
|
|
}
|
|
);
|
|
|
|
const requestAddPlan = async () => {
|
|
let entity = new PlanEntity();
|
|
for (let i = 1; i < datas.value.length; i += 2) {
|
|
if (parseInt(datas.value[i].value) < __MIN_DELAY) {
|
|
datas.value[i].value = __MIN_DELAY.toString();
|
|
}
|
|
}
|
|
entity.group_uuid = selected.value;
|
|
entity.uuid = uuid.value;
|
|
entity.name = name.value ?? "";
|
|
entity.datas = datas.value;
|
|
entity.time_ = time_.value;
|
|
entity.timing_cycle = timing_cycle.value == $t.t("enable");
|
|
entity.week_days = EWeekDays.EWeekNone;
|
|
if (day1.value) entity.week_days |= EWeekDays.EWeekMonday;
|
|
if (day2.value) entity.week_days |= EWeekDays.EWeekTuesday;
|
|
if (day3.value) entity.week_days |= EWeekDays.EWeekWednesday;
|
|
if (day4.value) entity.week_days |= EWeekDays.EWeekThursday;
|
|
if (day5.value) entity.week_days |= EWeekDays.EWeekFriday;
|
|
if (day6.value) entity.week_days |= EWeekDays.EWeekSaturday;
|
|
if (day7.value) entity.week_days |= EWeekDays.EWeekSunday;
|
|
let response = await GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.addPlan(entity);
|
|
if (response) {
|
|
$q.notify({
|
|
color: response.success ? "positive" : "negative",
|
|
icon: response.success ? "done" : "warning",
|
|
message:
|
|
$t.t("add plan") +
|
|
(response.success ? $t.t("success") : $t.t("fail")) +
|
|
"!",
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
}
|
|
};
|
|
|
|
const requestEditPlan = async () => {
|
|
let entity = new PlanEntity();
|
|
for (let i = 1; i < datas.value.length; i += 2) {
|
|
if (parseInt(datas.value[i].value) < __MIN_DELAY) {
|
|
datas.value[i].value = __MIN_DELAY.toString();
|
|
}
|
|
}
|
|
entity.group_uuid = selected.value;
|
|
entity.uuid = uuid.value;
|
|
entity.name = name.value ?? "";
|
|
entity.datas = datas.value;
|
|
entity.time_ = time_.value;
|
|
entity.timing_cycle = timing_cycle.value == $t.t("enable");
|
|
entity.week_days = EWeekDays.EWeekNone;
|
|
if (day1.value) entity.week_days |= EWeekDays.EWeekMonday;
|
|
if (day2.value) entity.week_days |= EWeekDays.EWeekTuesday;
|
|
if (day3.value) entity.week_days |= EWeekDays.EWeekWednesday;
|
|
if (day4.value) entity.week_days |= EWeekDays.EWeekThursday;
|
|
if (day5.value) entity.week_days |= EWeekDays.EWeekFriday;
|
|
if (day6.value) entity.week_days |= EWeekDays.EWeekSaturday;
|
|
if (day7.value) entity.week_days |= EWeekDays.EWeekSunday;
|
|
|
|
let response = await GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.editPlan(entity);
|
|
if (response) {
|
|
$q.notify({
|
|
color: response.success ? "positive" : "negative",
|
|
icon: response.success ? "done" : "warning",
|
|
message:
|
|
$t.t("edit plan") +
|
|
(response.success ? $t.t("success") : $t.t("fail")) +
|
|
"!",
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
}
|
|
};
|
|
|
|
return {
|
|
show_dialog,
|
|
min_delay,
|
|
type,
|
|
name,
|
|
uuid,
|
|
selected,
|
|
loading,
|
|
datas,
|
|
columns,
|
|
show_context_menu,
|
|
target_dom,
|
|
tree_nodes,
|
|
modes,
|
|
week_days,
|
|
time_,
|
|
timing_cycle,
|
|
day1,
|
|
day2,
|
|
day3,
|
|
day4,
|
|
day5,
|
|
day6,
|
|
day7,
|
|
loga(a: any) {
|
|
console.log(a);
|
|
},
|
|
showDialog(options: any) {
|
|
if (options) {
|
|
type.value = options.type ?? 1;
|
|
time_.value = "09:00:00";
|
|
timing_cycle.value = $t.t("disable");
|
|
week_days.value = EWeekDays.EWeekAll;
|
|
if (type.value == 2) {
|
|
name.value = options.data?.name ?? $t.t("new plan 1");
|
|
selected.value = options.data?.item_data?.group_uuid ?? null;
|
|
uuid.value = options.data?.item_data?.uuid ?? null;
|
|
week_days.value =
|
|
options.data?.item_data?.week_days ?? EWeekDays.EWeekAll;
|
|
time_.value = options.data?.item_data?.time_ ?? "09:00:00";
|
|
timing_cycle.value = options.data?.item_data?.timing_cycle
|
|
? $t.t("enable")
|
|
: $t.t("disable");
|
|
datas.value = JSON.parse(
|
|
JSON.stringify(options.data?.item_data?.datas ?? [])
|
|
);
|
|
} else {
|
|
name.value = options.data?.name ?? $t.t("new plan 1");
|
|
selected.value = options.data?.uuid ?? null;
|
|
uuid.value = options.data?.uuid ?? null;
|
|
datas.value = options.data?.item_data?.datas ?? [];
|
|
}
|
|
modes.value = GlobalData.getInstance().modes;
|
|
|
|
let temp = [];
|
|
for (
|
|
let i = 0;
|
|
i <
|
|
(datas.value.length % 2
|
|
? datas.value.length - 1
|
|
: datas.value.length);
|
|
i += 2
|
|
) {
|
|
const item = datas.value[i];
|
|
|
|
if (item && item.key.startsWith("operator_")) {
|
|
const item_value = GlobalData.getInstance().modes.find(
|
|
(element) => element && element.uuid == item.value
|
|
);
|
|
if (item_value) {
|
|
temp.push(datas.value[i]);
|
|
temp.push(datas.value[i + 1]);
|
|
}
|
|
}
|
|
}
|
|
if (temp.length != datas.value.length) {
|
|
$q.notify({
|
|
type: "warning",
|
|
message: $t.t("auto delete unknow mode success"),
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
}
|
|
datas.value = temp;
|
|
|
|
// format time
|
|
{
|
|
let _times = time_.value.split(":");
|
|
if (Array.isArray(_times)) {
|
|
while (_times.length < 3) {
|
|
_times.push("00");
|
|
}
|
|
_times = _times.slice(0, 3);
|
|
time_.value = _times.join(":");
|
|
} else {
|
|
time_.value = "09:00:00";
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let i = 1; i < datas.value.length; i += 2) {
|
|
if (parseInt(datas.value[i].value) < __MIN_DELAY) {
|
|
datas.value[i].value = __MIN_DELAY.toString();
|
|
}
|
|
}
|
|
|
|
day1.value =
|
|
(week_days.value & EWeekDays.EWeekMonday) == 0 ? false : true;
|
|
day2.value =
|
|
(week_days.value & EWeekDays.EWeekTuesday) == 0 ? false : true;
|
|
day3.value =
|
|
(week_days.value & EWeekDays.EWeekWednesday) == 0 ? false : true;
|
|
day4.value =
|
|
(week_days.value & EWeekDays.EWeekThursday) == 0 ? false : true;
|
|
day5.value =
|
|
(week_days.value & EWeekDays.EWeekFriday) == 0 ? false : true;
|
|
day6.value =
|
|
(week_days.value & EWeekDays.EWeekSaturday) == 0 ? false : true;
|
|
day7.value =
|
|
(week_days.value & EWeekDays.EWeekSunday) == 0 ? false : true;
|
|
|
|
show_dialog.value = true;
|
|
},
|
|
resetData() {
|
|
loading.value = false;
|
|
(selected.value = null), (name.value = null);
|
|
type.value = 1;
|
|
},
|
|
treeNodesFilter(node: any, filter: any) {
|
|
return node.is_group;
|
|
},
|
|
addRow() {
|
|
datas.value.push({
|
|
key: "operator_call_mode",
|
|
value: GlobalData.getInstance().modes[0].uuid,
|
|
});
|
|
|
|
datas.value.push({
|
|
key: "param_delay",
|
|
value: __MIN_DELAY.toString(),
|
|
});
|
|
},
|
|
onContextMenu(
|
|
evt: PointerEvent,
|
|
row: StringKeyValueEntity,
|
|
index: number
|
|
) {
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
|
|
target_dom.value = evt.srcElement;
|
|
if (row) {
|
|
current_index = index;
|
|
show_context_menu.value = true;
|
|
}
|
|
},
|
|
deleteRow() {
|
|
if (datas.value.length > current_index) {
|
|
const start = Math.floor(current_index / 2);
|
|
if (!isNaN(start)) {
|
|
datas.value.splice(start, 2);
|
|
}
|
|
}
|
|
},
|
|
async onSubmit() {
|
|
loading.value = true;
|
|
try {
|
|
await (type.value == 2 ? requestEditPlan() : requestAddPlan());
|
|
show_dialog.value = false;
|
|
} catch {}
|
|
loading.value = false;
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|