From 8bafc3aa36b7566f44234f35556158ad59ecdf88 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Sun, 12 May 2024 13:27:23 +0800
Subject: [PATCH] feat: add `PcaCascader`

---
 locales/en_US.json                            |  7 +-
 locales/zh_CN.json                            |  7 +-
 .../custom/Editor/RichTextEditor/index.vue    |  8 +--
 src/components/custom/PcaCascader.vue         | 27 +++++++
 src/views/demo/cascader/index.vue             | 72 +++++++++++++++++++
 src/views/demo/editor/rich/index.vue          |  4 +-
 6 files changed, 115 insertions(+), 10 deletions(-)
 create mode 100644 src/components/custom/PcaCascader.vue
 create mode 100644 src/views/demo/cascader/index.vue

diff --git a/locales/en_US.json b/locales/en_US.json
index 0a0177a..9a1ee20 100644
--- a/locales/en_US.json
+++ b/locales/en_US.json
@@ -5,7 +5,9 @@
     "close": "Closure",
     "reload": "Refresh",
     "choose": "Choose",
-    "navigate": "Navigate"
+    "navigate": "Navigate",
+    "inputPlaceholder": "please enter",
+    "selectPlaceholder": "please choose"
   },
   "app": {
     "loginOut": "Login out",
@@ -121,7 +123,8 @@
     "permissionDemo": "Permissions example",
     "setting": "System settings",
     "userCenter": "Personal Center",
-    "accountSetting": "User settings"
+    "accountSetting": "User settings",
+    "cascader": "Administrative region selection"
   },
   "http": {
     "400": "Syntax error in the request",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index ff451b0..b71aab3 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -5,7 +5,9 @@
     "reload": "刷新",
     "close": "关闭",
     "choose": "选择",
-    "navigate": "切换"
+    "navigate": "切换",
+    "inputPlaceholder": "请输入",
+    "selectPlaceholder": "请选择"
   },
   "app": {
     "loginOut": "退出登录",
@@ -144,6 +146,7 @@
     "dictionarySetting": "字典设置",
     "menuSetting": "菜单设置",
     "userCenter": "个人中心",
-    "about": "关于"
+    "about": "关于",
+    "cascader": "省市区联动"
   }
 }
diff --git a/src/components/custom/Editor/RichTextEditor/index.vue b/src/components/custom/Editor/RichTextEditor/index.vue
index 0c82497..ea71d7c 100644
--- a/src/components/custom/Editor/RichTextEditor/index.vue
+++ b/src/components/custom/Editor/RichTextEditor/index.vue
@@ -83,7 +83,7 @@ watch(editorModel, (newValue, oldValue) => {
     model.value = newValue
 
   else if (!newValue)
-    quillInstance!.setContents([])
+    editorInst!.setContents([])
 })
 
 watch(
@@ -93,11 +93,9 @@ watch(
   },
 )
 
-onBeforeUnmount(() => quillInstance = null)
+onBeforeUnmount(() => editorInst = null)
 </script>
 
 <template>
-  <div class="h-2xl">
-    <div ref="editorRef" />
-  </div>
+  <div ref="editorRef" />
 </template>
diff --git a/src/components/custom/PcaCascader.vue b/src/components/custom/PcaCascader.vue
new file mode 100644
index 0000000..f4441df
--- /dev/null
+++ b/src/components/custom/PcaCascader.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { CascaderOption } from 'naive-ui'
+
+defineOptions({
+  name: 'PcaCascader',
+})
+
+// 获取原始数据，数据来源仓库 https://github.com/modood/Administrative-divisions-of-China
+const pcaCode = shallowRef<CascaderOption[]>()
+async function fetchPcaCode() {
+  return await fetch('https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China/dist/pca-code.json').then(res => res.json())
+}
+onMounted(async () => {
+  pcaCode.value = await fetchPcaCode()
+})
+</script>
+
+<template>
+  <n-cascader
+    :options="pcaCode"
+    value-field="code"
+    label-field="name"
+    check-strategy="all"
+    filterable
+    clearable
+  />
+</template>
diff --git a/src/views/demo/cascader/index.vue b/src/views/demo/cascader/index.vue
new file mode 100644
index 0000000..abb9919
--- /dev/null
+++ b/src/views/demo/cascader/index.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const value = ref()
+
+const cbValue = ref()
+const cbOption = ref()
+const cbPathValues = ref()
+function handleUpdateValue(value: string, option: any, pathValues: any[]) {
+  cbValue.value = value
+  cbOption.value = { code: option.code, name: option.name }
+  cbPathValues.value = pathValues.map(i => ({ code: i.code, name: i.name }))
+}
+
+const formRef = ref()
+const formValue = ref({
+  region: null,
+})
+
+function handleValidateClick() {
+  formRef.value?.validate((errors: any) => {
+    if (!errors)
+      window.$message.success('Valid')
+
+    else
+      window.$message.error('Invalid')
+  })
+}
+</script>
+
+<template>
+  <n-card title="省市区联动">
+    <n-h2>当前选择行政区：{{ value }}</n-h2>
+    <PcaCascader v-model:value="value" @update:value="handleUpdateValue" />
+
+    <div>
+      <n-h2>回调value</n-h2>
+      <pre class="bg-#eee">
+      {{ cbValue }}
+    </pre>
+    </div>
+    <div>
+      <n-h2>回调option</n-h2>
+      <pre class="bg-#eee">
+      {{ cbOption }}
+    </pre>
+    </div>
+    <div>
+      <n-h2>回调pathValues</n-h2>
+      <pre class="bg-#eee">
+      {{ cbPathValues }}
+    </pre>
+    </div>
+
+    <n-h2>表单验证</n-h2>
+    <n-form
+      ref="formRef"
+      inline
+      :label-width="80"
+      :model="formValue"
+    >
+      <n-form-item label="地区" path="region" :rule="[{ required: true, message: '地区必填' }]">
+        <PcaCascader v-model:value="formValue.region" />
+      </n-form-item>
+      <n-form-item>
+        <n-button attr-type="button" @click="handleValidateClick">
+          验证
+        </n-button>
+      </n-form-item>
+    </n-form>
+  </n-card>
+</template>
+
+<style scoped></style>
diff --git a/src/views/demo/editor/rich/index.vue b/src/views/demo/editor/rich/index.vue
index dfc27a7..20b13f6 100644
--- a/src/views/demo/editor/rich/index.vue
+++ b/src/views/demo/editor/rich/index.vue
@@ -13,7 +13,9 @@ onMounted(() => {
     <n-space vertical :size="12">
       <n-alert title="基于 Quill 封装" type="success" />
       <n-space :size="12">
-        <RichTextEditor v-model="text" />
+        <div class="h-2xl">
+          <RichTextEditor v-model="text" />
+        </div>
         <div>
           <n-h2>v-html 预览</n-h2>
           <div v-html="text" />