|
|
@@ -1,10 +1,45 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
|
|
|
+import { type VxeGridProps } from 'vxe-table'
|
|
|
import { useCalculatingHeight } from '@/hooks/calculatingHeight'
|
|
|
|
|
|
+const selectedPage = ref('destination-delivery')
|
|
|
+const pageList = [
|
|
|
+ { label: 'Destination Delivery', value: 'destination-delivery', unverifiedNumber: 1 },
|
|
|
+ { label: 'Page 2', value: 'page-2', unverifiedNumber: 1 },
|
|
|
+ { label: 'Page 3', value: 'page-3', unverifiedNumber: 1 }
|
|
|
+]
|
|
|
+const getCurrentPageUnverifiedNumber = () => {
|
|
|
+ return pageList.find((item) => item.value === selectedPage.value)?.unverifiedNumber || 0
|
|
|
+}
|
|
|
+const searchKey = ref('')
|
|
|
+
|
|
|
const containerHeight = useCalculatingHeight(document.documentElement, 456, [])
|
|
|
|
|
|
-const tableData = ref({
|
|
|
+type RowItem = {
|
|
|
+ key: string
|
|
|
+ english: string
|
|
|
+ englishStatus: number
|
|
|
+ simplifiedChinese: string
|
|
|
+ simplifiedChineseStatus: number
|
|
|
+ traditionalChinese: string
|
|
|
+ traditionalChineseStatus: number
|
|
|
+ french: string
|
|
|
+ frenchStatus: number
|
|
|
+ spanish: string
|
|
|
+ spanishStatus: number
|
|
|
+ portuguese: string
|
|
|
+ portugueseStatus: number
|
|
|
+}
|
|
|
+
|
|
|
+type EditableField =
|
|
|
+ | 'english'
|
|
|
+ | 'simplifiedChinese'
|
|
|
+ | 'traditionalChinese'
|
|
|
+ | 'french'
|
|
|
+ | 'spanish'
|
|
|
+ | 'portuguese'
|
|
|
+
|
|
|
+const tableData = ref<VxeGridProps<RowItem>>({
|
|
|
border: true,
|
|
|
round: true,
|
|
|
columns: [
|
|
|
@@ -19,74 +54,266 @@ const tableData = ref({
|
|
|
{
|
|
|
title: 'English',
|
|
|
field: 'english',
|
|
|
- width: 300,
|
|
|
+ minWidth: 300,
|
|
|
slots: {
|
|
|
- default: 'english'
|
|
|
+ header: 'table_header',
|
|
|
+ default: 'languageVerification'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
title: 'Chinese',
|
|
|
- field: 'chinese',
|
|
|
- width: 300,
|
|
|
+ field: 'simplifiedChinese',
|
|
|
+ minWidth: 300,
|
|
|
slots: {
|
|
|
- default: 'chinese'
|
|
|
+ header: 'table_header',
|
|
|
+ default: 'languageVerification'
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
cellConfig: {
|
|
|
height: 68
|
|
|
},
|
|
|
- data: [
|
|
|
- {
|
|
|
- key: 'Destination Delivery',
|
|
|
- english: 'Destination Delivery',
|
|
|
- chinese: '目的地交付'
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'Configurations',
|
|
|
- english: 'Configurations',
|
|
|
- chinese: '配置'
|
|
|
- }
|
|
|
- ],
|
|
|
scrollY: { enabled: true, oSize: 20, gt: 30 },
|
|
|
emptyText: ' ',
|
|
|
showHeaderOverflow: true,
|
|
|
showOverflow: true
|
|
|
})
|
|
|
-const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
const tableLoadingTableData = ref(false)
|
|
|
const tableLoadingColumn = ref(false)
|
|
|
+
|
|
|
+const originalTableData = ref([
|
|
|
+ {
|
|
|
+ key: 'username',
|
|
|
+ traditionalChinese: '用戶名', // 繁体中文
|
|
|
+ traditionalChineseStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ simplifiedChinese: '用户名', // 简体中文
|
|
|
+ simplifiedChineseStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ english: 'Username', // 英文
|
|
|
+ englishStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ french: "Nom d'utilisateur", // 法语
|
|
|
+ frenchStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ spanish: 'Nombre de usuario', // 西班牙语
|
|
|
+ spanishStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ portuguese: 'Nome de usuário', // 葡萄牙语
|
|
|
+ portugueseStatus: 0 // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'password',
|
|
|
+ traditionalChinese: '密碼', // 繁体中文
|
|
|
+ traditionalChineseStatus: 1, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ simplifiedChinese: '密码', // 简体中文
|
|
|
+ simplifiedChineseStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ english: 'Password', // 英文
|
|
|
+ englishStatus: 1, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ french: 'Mot de passe', // 法语
|
|
|
+ frenchStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ spanish: 'Contraseña', // 西班牙语
|
|
|
+ spanishStatus: 0, // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ portuguese: 'Senha', // 葡萄牙语
|
|
|
+ portugueseStatus: 0 // 0: 未审核, 1: 已审核, 2: 已修改
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+const showTableData = computed(() => {
|
|
|
+ let arr = originalTableData.value.filter((item) => {
|
|
|
+ return item.key.includes(searchKey.value)
|
|
|
+ })
|
|
|
+ const unverifiedFilter = Object.entries(headerSwitchMap.value).find((item) => item[1] === true)
|
|
|
+ if (unverifiedFilter) {
|
|
|
+ arr = arr.filter((item) => {
|
|
|
+ return item[unverifiedFilter[0]] === 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(unverifiedFilter, 'unverifiedFilter')
|
|
|
+ return arr
|
|
|
+})
|
|
|
+
|
|
|
+const englishUnverifiedNumber = computed(() => {
|
|
|
+ return showTableData.value.filter((item) => item.englishStatus === 0).length
|
|
|
+})
|
|
|
+const simplifiedChineseUnverifiedNumber = computed(() => {
|
|
|
+ return showTableData.value.filter((item) => item.simplifiedChineseStatus === 0).length
|
|
|
+})
|
|
|
+const traditionalChineseUnverifiedNumber = computed(() => {
|
|
|
+ return showTableData.value.filter((item) => item.traditionalChineseStatus === 0).length
|
|
|
+})
|
|
|
+const frenchUnverifiedNumber = computed(() => {
|
|
|
+ return showTableData.value.filter((item) => item.frenchStatus === 0).length
|
|
|
+})
|
|
|
+const spanishUnverifiedNumber = computed(() => {
|
|
|
+ return showTableData.value.filter((item) => item.spanishStatus === 0).length
|
|
|
+})
|
|
|
+const portugueseUnverifiedNumber = computed(() => {
|
|
|
+ return showTableData.value.filter((item) => item.portugueseStatus === 0).length
|
|
|
+})
|
|
|
+
|
|
|
+const unverifiedNumberMap = computed(() => {
|
|
|
+ return {
|
|
|
+ english: englishUnverifiedNumber.value,
|
|
|
+ simplifiedChinese: simplifiedChineseUnverifiedNumber.value,
|
|
|
+ traditionalChinese: traditionalChineseUnverifiedNumber.value,
|
|
|
+ french: frenchUnverifiedNumber.value,
|
|
|
+ spanish: spanishUnverifiedNumber.value,
|
|
|
+ portuguese: portugueseUnverifiedNumber.value
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const headerSwitchMap = ref<Record<string, boolean>>({
|
|
|
+ traditionalChineseStatus: false,
|
|
|
+ simplifiedChineseStatus: false,
|
|
|
+ englishStatus: false,
|
|
|
+ frenchStatus: false,
|
|
|
+ spanishStatus: false,
|
|
|
+ portugueseStatus: false
|
|
|
+})
|
|
|
+
|
|
|
+const handleSwitchChange = (field: EditableField) => {
|
|
|
+ Object.entries(headerSwitchMap.value).forEach((item) => {
|
|
|
+ if (item[0] !== field) {
|
|
|
+ headerSwitchMap.value[item[0]] = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const currentEditor = ref<{ rowIndex: number | null; field: EditableField | null }>({
|
|
|
+ rowIndex: null,
|
|
|
+ field: null
|
|
|
+})
|
|
|
+const currentEditorValue = ref('')
|
|
|
+const handleEdit = (rowIndex: number, field: EditableField, value: string) => {
|
|
|
+ currentEditor.value = { rowIndex, field }
|
|
|
+ currentEditorValue.value = value
|
|
|
+}
|
|
|
+const handleComfirmEdit = (rowIndex: number, field: EditableField) => {
|
|
|
+ showTableData.value[rowIndex][field] = currentEditorValue.value
|
|
|
+ currentEditor.value = { rowIndex: null, field: null }
|
|
|
+ currentEditorValue.value = ''
|
|
|
+}
|
|
|
+const handleCancelEdit = () => {
|
|
|
+ currentEditor.value = { rowIndex: null, field: null }
|
|
|
+ currentEditorValue.value = ''
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="multilingual-config">
|
|
|
<div class="header">
|
|
|
- <span>Destination Delivery</span>
|
|
|
+ <span>Multilingual Config</span>
|
|
|
+ </div>
|
|
|
+ <div class="page-filter">
|
|
|
+ <div class="top-content">
|
|
|
+ <span class="font_family icon-icon_page_b" style="font-size: 24px"></span>
|
|
|
+ <span style="margin: 0 8px; font-size: 18px; font-weight: 700">Select Page</span>
|
|
|
+ <el-select
|
|
|
+ v-model="selectedPage"
|
|
|
+ placeholder="Select Page"
|
|
|
+ style="width: 400px; height: 48px"
|
|
|
+ >
|
|
|
+ <template #label="{ label }">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span style="font-size: 18px">{{ label }}</span>
|
|
|
+ <div class="page-select-unverified-tag">
|
|
|
+ <span> {{ getCurrentPageUnverifiedNumber() }} Unverified</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-option
|
|
|
+ v-for="item in pageList"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :key="item.value"
|
|
|
+ >
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <div class="page-item-unverified-tag" style="margin-left: 20px">
|
|
|
+ <span style="font-size: 10px">
|
|
|
+ {{ getCurrentPageUnverifiedNumber() }} Unverified</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="label">Filter</div>
|
|
|
+ <el-input
|
|
|
+ placeholder="Search key..."
|
|
|
+ v-model="searchKey"
|
|
|
+ style="margin-left: 24px; width: 400px"
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <span class="font_family icon-icon_search_b"></span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
<el-divider style="width: calc(100% - 48px); margin: 8px auto" />
|
|
|
<div class="config-table">
|
|
|
<vxe-grid
|
|
|
ref="tableRef"
|
|
|
v-vloading="tableLoadingTableData || tableLoadingColumn"
|
|
|
:height="containerHeight"
|
|
|
+ :data="showTableData"
|
|
|
:style="{ border: 'none' }"
|
|
|
v-bind="tableData"
|
|
|
>
|
|
|
+ <template #table_header="{ column }">
|
|
|
+ <div style="display: flex; align-items: center; width: 100%">
|
|
|
+ <span>{{ column.title }}</span>
|
|
|
+ <span class="unverified-number">{{
|
|
|
+ unverifiedNumberMap[column.field as keyof typeof unverifiedNumberMap]
|
|
|
+ }}</span>
|
|
|
+ <el-switch
|
|
|
+ v-model="headerSwitchMap[(column.field + 'Status') as keyof typeof headerSwitchMap]"
|
|
|
+ active-text="Unverified only"
|
|
|
+ inactive-text=""
|
|
|
+ @change="handleSwitchChange((column.field + 'Status') as EditableField)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
<template #key="{ row }">
|
|
|
<span>{{ row.key }}</span>
|
|
|
</template>
|
|
|
- <template #english="{ row }">
|
|
|
- <span>{{ row.english }}</span>
|
|
|
- <div class="unverified-tag">
|
|
|
- <span class="font_family icon-icon_active" style="font-size: 9px"></span>
|
|
|
- <span>Unverified</span>
|
|
|
+ <template #languageVerification="{ row, column, rowIndex }">
|
|
|
+ <div
|
|
|
+ class="show-content"
|
|
|
+ v-if="currentEditor.rowIndex !== rowIndex || currentEditor.field !== column.field"
|
|
|
+ >
|
|
|
+ <span>{{ row[column.field as EditableField] }}</span>
|
|
|
+ <span
|
|
|
+ class="font_family icon-icon_edit_b edit-icon"
|
|
|
+ style="display: none"
|
|
|
+ @click="
|
|
|
+ handleEdit(
|
|
|
+ rowIndex,
|
|
|
+ column.field as EditableField,
|
|
|
+ row[column.field as EditableField]
|
|
|
+ )
|
|
|
+ "
|
|
|
+ ></span>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <template #chinese="{ row }">
|
|
|
- <span>{{ row.chinese }}</span>
|
|
|
- <div class="verified-tag">
|
|
|
+ <div class="editor-input" v-else>
|
|
|
+ <el-input v-model="currentEditorValue" style="height: 28px; margin-bottom: 3px">
|
|
|
+ <template #suffix>
|
|
|
+ <span
|
|
|
+ class="font_family icon-icon_reject_b"
|
|
|
+ style="margin-top: 1px; margin-right: 10px; font-size: 16px"
|
|
|
+ @click="handleCancelEdit"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="font_family icon-icon_confirm_b"
|
|
|
+ style="margin-top: 1px; font-size: 18px; color: #ed6d00; cursor: pointer"
|
|
|
+ @click="handleComfirmEdit(rowIndex, column.field as EditableField)"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="unverified-tag" v-if="row[(column.field as EditableField) + 'Status'] === 0">
|
|
|
<span class="font_family icon-icon_delay_b" style="font-size: 14px"></span>
|
|
|
- <span>Verified</span>
|
|
|
+ <span style="display: inline-block; margin-top: 1px">Unverified</span>
|
|
|
+ </div>
|
|
|
+ <div class="verified-tag" v-if="row[(column.field as EditableField) + 'Status'] === 1">
|
|
|
+ <span class="font_family icon-icon_active" style="font-size: 9px"></span>
|
|
|
+ <span style="display: inline-block; margin-top: 1px">Verified</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</vxe-grid>
|
|
|
@@ -99,6 +326,39 @@ const tableLoadingColumn = ref(false)
|
|
|
position: relative;
|
|
|
padding-bottom: 40px;
|
|
|
background-color: var(--color-mode);
|
|
|
+ .page-filter {
|
|
|
+ margin: 16px 24px 24px;
|
|
|
+ border-radius: 12px;
|
|
|
+ .top-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 80px;
|
|
|
+ padding: 28px 16px;
|
|
|
+ background-color: var(--color-shipment-status-header-bg);
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ margin-left: 24px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .page-select-unverified-tag {
|
|
|
+ display: inline-flex;
|
|
|
+ height: 20px;
|
|
|
+ margin-left: 8px;
|
|
|
+ padding: 5px 7px;
|
|
|
+ line-height: 11px;
|
|
|
+ border-radius: 3px;
|
|
|
+ background-color: var(--color-multilingual-config-unverified-tag-bg);
|
|
|
+ span {
|
|
|
+ color: var(--color-steps-current-icon-color);
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.header {
|
|
|
position: sticky;
|
|
|
@@ -117,18 +377,63 @@ const tableLoadingColumn = ref(false)
|
|
|
|
|
|
.config-table {
|
|
|
padding: 0 24px;
|
|
|
+ .unverified-number {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
+ margin-top: 1px;
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-right: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 10px;
|
|
|
+ color: var(--color-theme);
|
|
|
+ background-color: var(--color-tag-unfinished-approval-bg);
|
|
|
+ }
|
|
|
.unverified-tag,
|
|
|
.verified-tag {
|
|
|
- display: flex;
|
|
|
+ display: inline-flex;
|
|
|
height: 16px;
|
|
|
padding: 2px 4px;
|
|
|
font-size: 10px;
|
|
|
+ line-height: 11px;
|
|
|
+ border-radius: 3px;
|
|
|
}
|
|
|
.unverified-tag {
|
|
|
- background-color: var(--color-warning-tips-bg);
|
|
|
+ padding-left: 2px;
|
|
|
+ background-color: var(--color-multilingual-config-unverified-tag-bg);
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: var(--color-steps-current-icon-color);
|
|
|
+ }
|
|
|
}
|
|
|
.verified-tag {
|
|
|
- background-color: var(--color-tag-confirmed-bg);
|
|
|
+ background-color: var(--color-multilingual-config-verified-tag-bg);
|
|
|
+ .font_family {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #5bb462;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.vxe-cell--title) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ :deep(.el-switch__label--right) {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.show-content {
|
|
|
+ &:hover {
|
|
|
+ .edit-icon {
|
|
|
+ display: block !important;
|
|
|
+ float: right;
|
|
|
+ color: #ed6d00;
|
|
|
+ font-size: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
Jack Zhou