refactor: workflow => improve responsive

This commit is contained in:
puriphatt 2025-01-06 10:47:20 +07:00
parent 9d30aa5f9a
commit 4d0371903b
2 changed files with 17 additions and 7 deletions

View file

@ -180,12 +180,12 @@ onMounted(async () => {
<section class="col-12 row q-col-gutter-sm">
<SelectBranch
v-if="role.includes('system')"
:label="$t('branch.form.code')"
:readonly
code-only
v-model:value="registerBranchId"
v-if="role.includes('system')"
class="col-3"
class="col-md-3 col-12"
required
/>
<q-input
@ -389,7 +389,7 @@ onMounted(async () => {
<q-input
:bg-color="readonly ? 'transparent' : ''"
:readonly
class="col-6"
class="col-md-6 col-12"
type="textarea"
dense
outlined
@ -400,7 +400,7 @@ onMounted(async () => {
"
/>
<div class="col-6">
<div class="col-md-6 col-12">
<div
class="surface-1 rounded bordered full-height"
style="padding-inline: 12px"
@ -452,6 +452,7 @@ onMounted(async () => {
<!-- RESPONSIBLE-PERSON -->
<q-select
v-if="step.responsiblePersonId"
behavior="menu"
:bg-color="readonly ? 'transparent' : ''"
:readonly
outlined
@ -464,7 +465,7 @@ onMounted(async () => {
option-value="value"
emit-value
:label="$t('flow.responsiblePerson')"
class="col-6"
class="col-md-6 col-12"
:hide-dropdown-icon="readonly"
>
<template v-slot:selected-item="scope">
@ -653,6 +654,7 @@ onMounted(async () => {
<!-- RESPONSIBLE-AGENCIES, RESPONSIBLE-INSTITUTION -->
<q-select
behavior="menu"
:bg-color="readonly ? 'transparent' : ''"
:readonly
outlined
@ -667,7 +669,7 @@ onMounted(async () => {
:label="
$t('general.select', { msg: $t('general.agencies') })
"
class="col-6"
class="col-md-6 col-12"
:hide-dropdown-icon="readonly"
>
<template v-slot:selected-item="scope">
@ -785,4 +787,8 @@ onMounted(async () => {
) {
visibility: hidden;
}
:deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) {
visibility: hidden;
}
</style>

View file

@ -21,6 +21,7 @@ import FlowDialog from './FlowDialog.vue';
import NoData from 'src/components/NoData.vue';
import KebabAction from 'src/components/shared/KebabAction.vue';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
import { useQuasar } from 'quasar';
const { t } = useI18n();
const workflowStore = useWorkflowTemplate();
@ -32,6 +33,8 @@ const {
} = storeToRefs(workflowStore);
const navigatorStore = useNavigator();
const $q = useQuasar();
const pageState = reactive({
hideStat: false,
inputSearch: '',
@ -283,6 +286,7 @@ async function fetchWorkflowList() {
onMounted(async () => {
navigatorStore.current.title = 'flow.title';
navigatorStore.current.path = [{ text: 'flow.caption', i18n: true }];
pageState.gridView = $q.screen.lt.md ? true : false;
await fetchWorkflowList();
});
@ -481,7 +485,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
/>
</article>
<article v-else class="col q-pa-md surface-2 scroll">
<article v-else class="col q-pa-md surface-2 scroll full-width">
<q-table
flat
bordered