|
|
@@ -5,6 +5,7 @@
|
|
|
</template>
|
|
|
<ElTableColumn prop="id" label="#" width="80" />
|
|
|
<ElTableColumn prop="name" label="名称" show-overflow-tooltip />
|
|
|
+ <ElTableColumn prop="country" label="国家" show-overflow-tooltip />
|
|
|
<ElTableColumn prop="remark" label="备注" show-overflow-tooltip />
|
|
|
<ElTableColumn prop="userName" label="创建人" align="center" />
|
|
|
<ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
|
|
|
@@ -21,6 +22,16 @@
|
|
|
<ElFormItem prop="name" label="昵称">
|
|
|
<ElInput v-model="model.name" placeholder="请输入昵称" />
|
|
|
</ElFormItem>
|
|
|
+ <ElFormItem prop="country" label="国家">
|
|
|
+ <ElSelect v-model="model.country" placeholder="请选择国家" clearable filterable @input="filterCountries">
|
|
|
+ <ElOption
|
|
|
+ v-for="country in countries"
|
|
|
+ :key="country.code"
|
|
|
+ :label="`${country.code} - ${country.countryName} - (${country.callingCode})`"
|
|
|
+ :value="country.code"
|
|
|
+ />
|
|
|
+ </ElSelect>
|
|
|
+ </ElFormItem>
|
|
|
<ElFormItem prop="remark" label="备注">
|
|
|
<ElInput v-model="model.remark" placeholder="请输入备注" />
|
|
|
</ElFormItem>
|
|
|
@@ -43,19 +54,19 @@
|
|
|
</ElDialog>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { inject, ref } from 'vue'
|
|
|
+import { inject, onMounted, ref } from 'vue'
|
|
|
import PagingTable from '@/components/PagingTable.vue'
|
|
|
import { useTimeFormatter } from '@/utils/formatter'
|
|
|
import { Plus } from '@vicons/tabler'
|
|
|
import EditDialog from '@/components/EditDialog.vue'
|
|
|
import { setupEditDialog } from '@/utils/editDialog'
|
|
|
-import EnumSelect from '@/components/EnumSelect.vue'
|
|
|
-import { UserRole } from '@/enums'
|
|
|
import { axiosInstance, http } from '@/plugins/http'
|
|
|
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
|
|
|
-import { useClipboard } from '@vueuse/core'
|
|
|
-import { useUserStore } from '@/stores/user'
|
|
|
+import countriesData from 'i18n-iso-countries'
|
|
|
+import zhLocale from 'i18n-iso-countries/langs/zh.json'
|
|
|
+import { getCountryDialCodeFromCountryCodeOrNameOrFlagEmoji } from 'country-codes-flags-phone-codes'
|
|
|
|
|
|
+const countries = ref(null)
|
|
|
const isAdmin = inject('isAdmin')
|
|
|
const where = ref({ del: false })
|
|
|
const timeFormatter = useTimeFormatter()
|
|
|
@@ -66,6 +77,38 @@ const rules = {
|
|
|
}
|
|
|
const { showEditDialog, onEdit } = setupEditDialog(model)
|
|
|
|
|
|
+onMounted(async () => {
|
|
|
+ loadCountries()
|
|
|
+})
|
|
|
+
|
|
|
+function loadCountries() {
|
|
|
+ countriesData.registerLocale(zhLocale)
|
|
|
+ const countryCodes = Object.keys(countriesData.getNames('zh'))
|
|
|
+ countries.value = countryCodes.map(code => {
|
|
|
+ const countryName = countriesData.getName(code, 'zh')
|
|
|
+ let callingCode = getCountryDialCodeFromCountryCodeOrNameOrFlagEmoji(code)
|
|
|
+ return {
|
|
|
+ code,
|
|
|
+ countryName,
|
|
|
+ callingCode: callingCode === null ? '空' : callingCode
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function filterCountries(query) {
|
|
|
+ if (!query) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ countries.value.filter(country => {
|
|
|
+ return (
|
|
|
+ country.code.includes(query) ||
|
|
|
+ country.countryName.includes(query) ||
|
|
|
+ country.callingCode.includes(query)
|
|
|
+ )
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
async function submit() {
|
|
|
await http.put('/phone-list/screen', model.value)
|
|
|
ElMessage.success('保存成功')
|
wuyi