refactor: 抽离组件【公众号下拉选择】

Author: dhb52

src/views/mp/components/wx-account-select/main.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
+    <el-form-item label="公众号" prop="accountId">
+      <el-select
+        v-model="accountId"
+        placeholder="请选择公众号"
+        class="!w-240px"
+        @change="accountChanged()"
+      >
+        <el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <slot name="actions"></slot>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup name="WxAccountSelect">
+import * as MpAccountApi from '@/api/mp/account'
+const accountId = ref()
+const accountList = ref([])
+const queryFormRef = ref()
+
+const emit = defineEmits(['change'])
+
+onMounted(async () => {
+  handleQuery()
+})
+
+const handleQuery = async () => {
+  const data = await MpAccountApi.getSimpleAccountList()
+  accountList.value = data
+  // 默认选中第一个
+  if (accountList.value.length > 0) {
+    accountId.value = accountList.value[0].id
+    emit('change', accountId.value)
+  }
+}
+
+const accountChanged = () => {
+  emit('change', accountId.value)
+}
+</script>