refactor: mp模块ts重构

src/views/mp/user/index.vue

@@ -3,14 +3,42 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
-      <template #actions>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="公众号" prop="accountId">
+        <WxMpSelect @change="onAccountChanged" />
+      </el-form-item>
+      <el-form-item label="用户标识" prop="openid">
+        <el-input
+          v-model="queryParams.openid"
+          placeholder="请输入用户标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input
+          v-model="queryParams.nickname"
+          placeholder="请输入昵称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"> <Icon icon="ep:search" />搜索 </el-button>
+        <el-button @click="resetQuery"> <Icon icon="ep:refresh" />重置 </el-button>
         <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:user:sync']">
           <Icon icon="ep:refresh" class="mr-5px" /> 同步
         </el-button>
-      </template>
-    </WxAccountSelect>
+      </el-form-item>
+    </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
@@ -66,25 +94,37 @@
   <UserForm ref="formRef" @success="getList" />
 </template>
 <script lang="ts" setup name="MpUser">
-import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
 import { dateFormatter } from '@/utils/formatTime'
 import * as MpUserApi from '@/api/mp/user'
 import * as MpTagApi from '@/api/mp/tag'
+import WxMpSelect from '@/views/mp/components/WxMpSelect.vue'
+import { FormInstance } from 'element-plus'
 import UserForm from './UserForm.vue'
 
 const message = useMessage() // 消息
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
+const list = ref<any[]>([]) // 列表的数据
+
+interface QueryParams {
+  pageNo: number
+  pageSize: number
+  accountId?: number
+  openid: string | null
+  nickname: string | null
+}
+const queryParams: QueryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  accountId: null,
+  accountId: undefined,
   openid: null,
   nickname: null
 })
-const tagList = ref([]) // 公众号标签列表
+
+const tagList = ref<any[]>([]) // 公众号标签列表
+const queryFormRef = ref<FormInstance | null>(null) // 搜索的表单
+const formRef = ref<InstanceType<typeof UserForm> | null>(null)
 
 /** 初始化 */
 onMounted(async () => {
@@ -92,9 +132,9 @@ onMounted(async () => {
 })
 
 /** 侦听公众号变化 **/
-const accountChanged = (accountId) => {
+const onAccountChanged = (id?: number) => {
   queryParams.pageNo = 1
-  queryParams.accountId = accountId
+  queryParams.accountId = id
   getList()
 }
 
@@ -110,20 +150,32 @@ const getList = async () => {
   }
 }
 
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  const accountId = queryParams.accountId
+  queryFormRef.value?.resetFields()
+  queryParams.accountId = accountId
+  handleQuery()
+}
+
 /** 添加/修改操作 */
-const formRef = ref()
 const openForm = (id: number) => {
-  formRef.value.open(id)
+  formRef.value?.open(id)
 }
 
 /** 同步标签 */
 const handleSync = async () => {
-  const accountId = queryParams.accountId
   try {
     await message.confirm('是否确认同步粉丝？')
-    await MpUserApi.syncUser(accountId)
+    await MpUserApi.syncUser(queryParams.accountId)
     message.success('开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询')
-    await getList()
+    getList()
   } catch {}
 }
 </script>