Skip to content

Q
quasar-web-base
Commit 6a1c9825 authored by Tình Trương's avatar Tình Trương
Browse files
Options

update

parent 44cfd6fa
Hide whitespace changes
Inline Side-by-side
Showing with 369 additions and 139 deletions
src/components/artist-information/VAB-account/update-story/index.vue
View file @ 6a1c9825
...@@ -19,14 +19,14 @@ ...@@ -19,14 +19,14 @@
<q-card-section> <q-card-section>
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-12"> <div class="col-12">
<div align="right"> <!-- <div align="right">
<UploadImage <UploadImage
v-if="urlFileLocal.length !== 0" v-if="urlFileLocal.length !== 0"
:isButton="false" :isButton="false"
:tooltipMessageStory="true" :tooltipMessageStory="true"
@selectedFile="uploadStory" @selectedFile="uploadStory"
></UploadImage> ></UploadImage>
</div> </div> -->
<q-card v-if="urlFileLocal" flat> <q-card v-if="urlFileLocal" flat>
<div align="center"> <div align="center">
<q-img <q-img
...@@ -37,10 +37,7 @@ ...@@ -37,10 +37,7 @@
</div> </div>
</q-card> </q-card>
<UploadImage <UploadImage @selectedFile="uploadStory"></UploadImage>
v-if="urlFileLocal.length === 0"
@selectedFile="uploadStory"
></UploadImage>
<q-input <q-input
v-model="title" v-model="title"
...@@ -104,7 +101,7 @@ export default defineComponent({ ...@@ -104,7 +101,7 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props, context) {
const configImg = config; const configImg = config;
const id: Ref<number | null> = ref(null); const id: Ref<number | null> = ref(null);
const file: Ref<File | string> = ref(''); const file: Ref<File | string> = ref('');
...@@ -137,6 +134,16 @@ export default defineComponent({ ...@@ -137,6 +134,16 @@ export default defineComponent({
content.value = ''; content.value = '';
urlFileLocal.value = ''; urlFileLocal.value = '';
}; };
const SubmitData = () => {
context.emit('click:CloseBtnUpdateStory');
context.emit('updateData', {
id: id.value,
file: file.value,
title: title.value,
content: content.value,
imageUrl: urlFileLocal.value,
});
};
return { return {
uploadStory, uploadStory,
...@@ -148,6 +155,7 @@ export default defineComponent({ ...@@ -148,6 +155,7 @@ export default defineComponent({
id, id,
configImg, configImg,
imageAPI, imageAPI,
SubmitData,
}; };
}, },
...@@ -155,6 +163,7 @@ export default defineComponent({ ...@@ -155,6 +163,7 @@ export default defineComponent({
'selectedFile', 'selectedFile',
'update:isOpenUpdateStory', 'update:isOpenUpdateStory',
'click:CloseBtnUpdateStory', 'click:CloseBtnUpdateStory',
'updateData',
], ],
}); });
</script> </script>
src/components/configSystem/index.vue
View file @ 6a1c9825
...@@ -35,150 +35,312 @@ ...@@ -35,150 +35,312 @@
:model-value="namePage" :model-value="namePage"
@update:model-value="$emit('update:namePage', $event)" @update:model-value="$emit('update:namePage', $event)"
:label="$t('listConfigSystem.dialogLabel.fieldLabels.namePage')" :label="$t('listConfigSystem.dialogLabel.fieldLabels.namePage')"
class="q-my-sm"
type="text" type="text"
outlined outlined
lazy-rules
:rules="namePageRules" :rules="namePageRules"
clearable clearable
></q-input> ></q-input>
<!-- <q-tabs
v-model="tabNamePage"
dense
align="left"
active-color="primary"
indicator-color="primary"
narrow-indicator
:breakpoint="0"
>
<q-tab
v-for="(info, index) in languageOptions"
:key="`${info.language.id}-${index}`"
:name="info.language.code"
:label="info.language.name"
no-caps
/>
</q-tabs>
<q-separator />
<q-tab-panels v-model="tabNamePage" animated>
<q-tab-panel
v-for="(info, index) in languageOptions"
:key="`${info.language.id}-${index}`"
:name="info.language.code"
class="q-pt-none; q-pa-none"
>
<q-input
:model-value="info.namePage"
@update:model-value="$emit('update:namePage', $event)"
:label="
$t('listConfigSystem.dialogLabel.fieldLabels.namePage')
"
type="text"
outlined
lazy-rules
:rules="namePageRules"
clearable
></q-input>
</q-tab-panel>
</q-tab-panels> -->
<q-input <q-input
:model-value="numIndex" :model-value="numIndex"
@update:model-value="$emit('update:numIndex', $event)" @update:model-value="$emit('update:numIndex', $event)"
:label="$t('listConfigSystem.dialogLabel.fieldLabels.numIndex')" :label="$t('listConfigSystem.dialogLabel.fieldLabels.numIndex')"
class="q-my-sm" class="q-my-sm"
type="text" type="############"
outlined outlined
clearable clearable
></q-input> ></q-input>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input <!-- q-pt-xl style="margin-top: -3px" -->
:model-value="url"
@update:model-value="$emit('update:url', $event)"
:label="$t('listConfigSystem.dialogLabel.fieldLabels.url')"
class="q-my-sm"
type="text"
outlined
:rules="urlRules"
clearable
></q-input>
<!-- :rules="nameMenuRules" -->
<q-select <q-select
:model-value="nameMenu" :model-value="nameMenu"
@update:model-value="$emit('update:nameMenu', $event)" @update:model-value="$emit('update:nameMenu', $event)"
:label="$t('listConfigSystem.dialogLabel.fieldLabels.nameMenu')" :label="$t('listConfigSystem.dialogLabel.fieldLabels.nameMenu')"
:options="nameMenuOptions" :options="nameMenuOptions"
:rules="nameMenuRules"
multiple multiple
map-options map-options
class="q-my-sm"
option-value="id" option-value="id"
option-label="name" option-label="name"
type="text" type="text"
lazy-rules
outlined outlined
use-chips use-chips
clearable clearable
></q-select> ></q-select>
<q-input
:model-value="url"
@update:model-value="$emit('update:url', $event)"
:label="$t('listConfigSystem.dialogLabel.fieldLabels.url')"
class="q-my-sm"
type="text"
outlined
:rules="urlRules"
clearable
></q-input>
</div> </div>
<div class="col-12 q-pb-md"> <div class="col-12 q-pb-md">
<div> <q-editor
<q-editor :model-value="content"
:model-value="content" @update:model-value="$emit('update:content', $event)"
@update:model-value="$emit('update:content', $event)" ref="editorRef"
ref="editorRef" placeholder="Nội dung *"
placeholder="Nội dung *" style="min-height: 25rem"
style="min-height: 28rem" toolbar-text-color="white"
toolbar-text-color="white" toolbar-toggle-color="yellow-8"
toolbar-toggle-color="yellow-8" toolbar-bg="primary"
toolbar-bg="primary" :spellcheck="false"
:spellcheck="false" :toolbar="[
:toolbar="[ [
[ {
{ label: $q.lang.editor.align,
label: $q.lang.editor.align, icon: $q.iconSet.editor.align,
icon: $q.iconSet.editor.align, fixedLabel: true,
fixedLabel: true, list: 'only-icons',
list: 'only-icons', options: ['left', 'center', 'right', 'justify'],
options: ['left', 'center', 'right', 'justify'], },
}, ],
], [
[ 'bold',
'bold', 'italic',
'italic', 'strike',
'strike', 'underline',
'underline', 'subscript',
'subscript', 'superscript',
'superscript', ],
], ['token', 'hr', 'link', 'custom_btn'],
['token', 'hr', 'link', 'custom_btn'], ['print', 'fullscreen'],
['print', 'fullscreen'], [
[ {
{ label: $q.lang.editor.formatting,
label: $q.lang.editor.formatting, icon: $q.iconSet.editor.formatting,
icon: $q.iconSet.editor.formatting, list: 'no-icons',
list: 'no-icons', options: [
options: [ 'p',
'p', 'h1',
'h1', 'h2',
'h2', 'h3',
'h3', 'h4',
'h4', 'h5',
'h5', 'h6',
'h6', 'code',
'code', ],
], },
}, {
{ label: $q.lang.editor.fontSize,
label: $q.lang.editor.fontSize, icon: $q.iconSet.editor.fontSize,
icon: $q.iconSet.editor.fontSize, fixedLabel: true,
fixedLabel: true, fixedIcon: true,
fixedIcon: true, list: 'no-icons',
list: 'no-icons', options: [
options: [ 'size-1',
'size-1', 'size-2',
'size-2', 'size-3',
'size-3', 'size-4',
'size-4', 'size-5',
'size-5', 'size-6',
'size-6', 'size-7',
'size-7', ],
], },
}, {
{ label: $q.lang.editor.defaultFont,
label: $q.lang.editor.defaultFont, icon: $q.iconSet.editor.font,
icon: $q.iconSet.editor.font, fixedIcon: true,
fixedIcon: true, list: 'no-icons',
list: 'no-icons', options: [
options: [ 'default_font',
'default_font', 'arial',
'arial', 'arial_black',
'arial_black', 'comic_sans',
'comic_sans', 'courier_new',
'courier_new', 'impact',
'impact', 'lucida_grande',
'lucida_grande', 'times_new_roman',
'times_new_roman', 'verdana',
'verdana', ],
], },
}, 'removeFormat',
'removeFormat', ],
], ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['undo', 'redo'], ['undo', 'redo'],
['viewsource'], ['viewsource'],
]" ]"
:fonts="{ :fonts="{
arial: 'Arial', arial: 'Arial',
arial_black: 'Arial Black', arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS', comic_sans: 'Comic Sans MS',
courier_new: 'Courier New', courier_new: 'Courier New',
impact: 'Impact', impact: 'Impact',
lucida_grande: 'Lucida Grande', lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman', times_new_roman: 'Times New Roman',
verdana: 'Verdana', verdana: 'Verdana',
}" }"
/>
<!-- <q-tabs
v-model="tabContent"
dense
active-color="primary"
indicator-color="primary"
align="left"
narrow-indicator
>
<q-tab
v-for="(info, index) in languageOptions"
:key="`${info.language.id}-${index}`"
:name="info.language.code"
:label="info.language.name"
no-caps
/> />
</div> </q-tabs>
<q-separator />
<q-tab-panels v-model="tabContent" animated>
<q-tab-panel
v-for="(info, index) in languageOptions"
:key="`${info.language.id}-${index}`"
:name="info.language.code"
class="q-pt-none; q-pa-none"
>
<q-editor
:model-value="info.content"
@update:model-value="$emit('update:content', $event)"
ref="editorRef"
placeholder="Nội dung *"
style="min-height: 25rem"
toolbar-text-color="white"
toolbar-toggle-color="yellow-8"
toolbar-bg="primary"
:spellcheck="false"
:toolbar="[
[
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
list: 'only-icons',
options: ['left', 'center', 'right', 'justify'],
},
],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: [
'p',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'code',
],
},
{
label: $q.lang.editor.fontSize,
icon: $q.iconSet.editor.fontSize,
fixedLabel: true,
fixedIcon: true,
list: 'no-icons',
options: [
'size-1',
'size-2',
'size-3',
'size-4',
'size-5',
'size-6',
'size-7',
],
},
{
label: $q.lang.editor.defaultFont,
icon: $q.iconSet.editor.font,
fixedIcon: true,
list: 'no-icons',
options: [
'default_font',
'arial',
'arial_black',
'comic_sans',
'courier_new',
'impact',
'lucida_grande',
'times_new_roman',
'verdana',
],
},
'removeFormat',
],
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['undo', 'redo'],
['viewsource'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</q-tab-panel>
</q-tab-panels> -->
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
...@@ -208,7 +370,7 @@ ...@@ -208,7 +370,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, PropType, ref } from 'vue';
import { i18n } from 'src/boot/i18n'; import { i18n } from 'src/boot/i18n';
export default defineComponent({ export default defineComponent({
...@@ -222,8 +384,25 @@ export default defineComponent({ ...@@ -222,8 +384,25 @@ export default defineComponent({
url: { type: String, required: true }, url: { type: String, required: true },
numIndex: { type: String, required: true }, numIndex: { type: String, required: true },
content: { type: String, required: true }, content: { type: String, required: true },
nameMenu: { type: Number, required: true }, nameMenu: { type: Array, required: true },
nameMenuOptions: { type: Array, required: true }, nameMenuOptions: { type: Array, required: true },
// languageOptions: {
// type: Array as PropType<
// {
// namePage: string;
// url: string;
// content: string;
// numIndex: number;
// nameMenu: [];
// language: {
// id: number;
// code: string;
// name: string;
// };
// }[]
// >,
// required: true,
// },
}, },
setup() { setup() {
const namePageRules = [ const namePageRules = [
...@@ -236,15 +415,19 @@ export default defineComponent({ ...@@ -236,15 +415,19 @@ export default defineComponent({
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('listConfigSystem.validateMessages.requireUrl'), i18n.global.t('listConfigSystem.validateMessages.requireUrl'),
]; ];
// const nameMenuRules = [ const nameMenuRules = [
// (val?: number) => (val?: Array<unknown>) =>
// val !== undefined || val?.length ||
// i18n.global.t('listConfigSystem.validateMessages.requireNameMenu'), i18n.global.t('listConfigSystem.validateMessages.requireNameMenu'),
// ]; ];
// const tabNamePage = ref('vi');
// const tabContent = ref('vi');
return { return {
namePageRules, namePageRules,
urlRules, urlRules,
// nameMenuRules, nameMenuRules,
// tabNamePage,
// tabContent,
}; };
}, },
emits: [ emits: [
......
src/pages/cau-hinh-trang-tinh/index.vue
View file @ 6a1c9825
...@@ -106,19 +106,6 @@ ...@@ -106,19 +106,6 @@
</div> </div>
</td> </td>
</template> </template>
<!-- <template v-slot:body-cell-url="rowData">
<q-td>
<div align="center">
<a
:href="rowData.row.url"
target="_blank"
style="max-width: 10rem"
>{{ rowData.row.url }}</a
>
</div>
</q-td>
</template> -->
</q-table> </q-table>
</div> </div>
<div class="col-12 q-mt-sm"> <div class="col-12 q-mt-sm">
...@@ -142,6 +129,7 @@ ...@@ -142,6 +129,7 @@
:nameMenuOptions="nameMenuOptions" :nameMenuOptions="nameMenuOptions"
@addUpdateConfigSystem="addConfigSystem" @addUpdateConfigSystem="addConfigSystem"
/> />
<!-- :languageOptions="languageOptions" -->
<AddUpdatePolicyDialog <AddUpdatePolicyDialog
v-model:isOpened="showDialogUpdate" v-model:isOpened="showDialogUpdate"
...@@ -153,6 +141,7 @@ ...@@ -153,6 +141,7 @@
:nameMenuOptions="nameMenuOptions" :nameMenuOptions="nameMenuOptions"
@addUpdateConfigSystem="updateConfigSystem" @addUpdateConfigSystem="updateConfigSystem"
/> />
<!-- :languageOptions="languageOptions" -->
</div> </div>
</template> </template>
...@@ -170,6 +159,7 @@ import { ...@@ -170,6 +159,7 @@ import {
AddConfigSystem, AddConfigSystem,
UpdateConfigSystem, UpdateConfigSystem,
DetailConfigSystem, DetailConfigSystem,
// LanguageType,
} from 'src/assets/type'; } from 'src/assets/type';
import { config, API_PATHS } from 'src/assets/configurations'; import { config, API_PATHS } from 'src/assets/configurations';
...@@ -269,6 +259,7 @@ export default defineComponent({ ...@@ -269,6 +259,7 @@ export default defineComponent({
const content: Ref<string> = ref(''); const content: Ref<string> = ref('');
const numIndex: Ref<number | undefined> = ref(undefined); const numIndex: Ref<number | undefined> = ref(undefined);
const ConfigSystemId: Ref<number | undefined> = ref(undefined); const ConfigSystemId: Ref<number | undefined> = ref(undefined);
// const languageOptions: Ref<FromType> = ref([]);
const getConfigSystem = async () => { const getConfigSystem = async () => {
try { try {
...@@ -292,6 +283,7 @@ export default defineComponent({ ...@@ -292,6 +283,7 @@ export default defineComponent({
}; };
const openAddDialog = () => { const openAddDialog = () => {
// void getLanguage();
namePage.value = ''; namePage.value = '';
content.value = ''; content.value = '';
url.value = ''; url.value = '';
...@@ -307,6 +299,7 @@ export default defineComponent({ ...@@ -307,6 +299,7 @@ export default defineComponent({
numIndex: numIndex.value, numIndex: numIndex.value,
content: content.value, content: content.value,
// nameMenu: { id: nameMenu.value?.id }, // nameMenu: { id: nameMenu.value?.id },
// langs: languageOptions.value,
}; };
const response = (await api({ const response = (await api({
url: API_PATHS.addConfigSystem, url: API_PATHS.addConfigSystem,
...@@ -344,6 +337,7 @@ export default defineComponent({ ...@@ -344,6 +337,7 @@ export default defineComponent({
url.value = response.data.data.url; url.value = response.data.data.url;
numIndex.value = response.data.data.numIndex; numIndex.value = response.data.data.numIndex;
// nameMenu.value = response.data.data.nameMenu; // nameMenu.value = response.data.data.nameMenu;
// languageOptions.value = response.data.data.langs;
content.value = response.data.data.content; content.value = response.data.data.content;
} }
} catch (error) {} } catch (error) {}
...@@ -361,6 +355,7 @@ export default defineComponent({ ...@@ -361,6 +355,7 @@ export default defineComponent({
numIndex: numIndex.value, numIndex: numIndex.value,
content: content.value, content: content.value,
// nameMenu: { id: nameMenu.value?.id }, // nameMenu: { id: nameMenu.value?.id },
// langs: languageOptions.value,
}, },
})) as AxiosResponse<BaseResponseBody<UpdateConfigSystem>>; })) as AxiosResponse<BaseResponseBody<UpdateConfigSystem>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) { if (response.data.error.code === config.API_RES_CODE.OK.code) {
...@@ -417,6 +412,47 @@ export default defineComponent({ ...@@ -417,6 +412,47 @@ export default defineComponent({
} catch (error) {} } catch (error) {}
}; };
// type FromType = {
// namePage: string;
// url: string;
// content: string;
// numIndex: number;
// nameMenu: [];
// language: {
// id: number;
// code: string;
// name: string;
// };
// }[];
// const getLanguage = async () => {
// const response = (await api({
// url: API_PATHS.getLanguage,
// method: 'GET',
// params: {},
// })) as AxiosResponse<BaseResponseBody<LanguageType[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// languageOptions.value = response.data.data.reduce(
// (acc: FromType, info) => {
// acc.push({
// namePage: '',
// url: '',
// content: '',
// nameMenu: [],
// numIndex: 0,
// language: {
// id: info.id,
// code: info.code,
// name: info.name,
// },
// });
// return acc;
// },
// []
// );
// }
// };
onMounted(() => { onMounted(() => {
void getConfigSystem(); void getConfigSystem();
}); });
...@@ -446,6 +482,8 @@ export default defineComponent({ ...@@ -446,6 +482,8 @@ export default defineComponent({
confirmDelete, confirmDelete,
deleteConfigSystem, deleteConfigSystem,
nameMenuSreach, nameMenuSreach,
// languageOptions,
// getLanguage,
}; };
}, },
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment