refactor: WxMaterialSelect组件setup

a8b4c16a · dhb52 · e035eb26 · a8b4c16a
Commit a8b4c16a authored Apr 10, 2023 by dhb52
Show whitespace changes
Inline Side-by-side

Showing with 52 additions and 69 deletions

src/views/mp/components/wx-material-select/main.vue
+52 -69

No files found.
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -14,7 +14,8 @@
          <p class="item-name">{{ item.name }}</p>
          <el-row class="ope-row">
            <el-button type="success" @click="selectMaterialFun(item)">
-              选择 <Icon icon="ep:circle-check" />
+              选择
+              <Icon icon="ep:circle-check" />
            </el-button>
          </el-row>
        </div>
@@ -48,7 +49,8 @@
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="selectMaterialFun(scope.row)"
-              >选择<Icon icon="ep:plus" />
+              >选择
+              <Icon icon="ep:plus" />
            </el-button>
          </template>
        </el-table-column>
@@ -89,7 +91,8 @@
        >
          <template #default="scope">
            <el-button type="primary" link @click="selectMaterialFun(scope.row)"
-              >选择<Icon icon="akar-icons:circle-plus" />
+              >选择
+              <Icon icon="akar-icons:circle-plus" />
            </el-button>
          </template>
        </el-table-column>
@@ -110,7 +113,8 @@
            <WxNews :articles="item.content.newsItem" />
            <el-row class="ope-row">
              <el-button type="success" @click="selectMaterialFun(item)">
-                选择<Icon icon="ep:circle-check" />
+                选择
+                <Icon icon="ep:circle-check" />
              </el-button>
            </el-row>
          </div>
@@ -127,23 +131,16 @@
  </div>
 </template>
-<script lang="ts" name="WxMaterialSelect">
+<script lang="ts" setup name="WxMaterialSelect">
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
-import { getMaterialPage } from '@/api/mp/material'
+import * as MpMaterialApi from '@/api/mp/material'
-import { getFreePublishPage } from '@/api/mp/freePublish'
+import * as MpFreePublishApi from '@/api/mp/freePublish'
-import { getDraftPage } from '@/api/mp/draft'
+import * as MpDraftApi from '@/api/mp/draft'
 import { dateFormatter } from '@/utils/formatTime'
-import { defineComponent, PropType } from 'vue'
-export default defineComponent({
+const props = defineProps({
-  components: {
-    WxNews,
-    WxVoicePlayer,
-    WxVideoPlayer
-  },
-  props: {
  objData: {
    type: Object, // type - 类型；accountId - 公众号账号编号
    required: true
@@ -153,57 +150,58 @@ export default defineComponent({
    type: String as PropType<string>,
    default: '1'
  }
-  },
+})
-  setup(props, ctx) {
-    // 遮罩层
+const emit = defineEmits(['select-material'])
-    const loading = ref(false)
-    // 总条数
+// 遮罩层
-    const total = ref(0)
+const loading = ref(false)
-    // 数据列表
+// 总条数
-    const list = ref([])
+const total = ref(0)
-    // 查询参数
+// 数据列表
-    const queryParams = reactive({
+const list = ref([])
+// 查询参数
+const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  accountId: props.objData.accountId
-    })
+})
-    const objDataRef = reactive(props.objData)
+const objDataRef = reactive(props.objData)
-    const newsTypeRef = ref(props.newsType)
+const newsTypeRef = ref(props.newsType)
-    const selectMaterialFun = (item) => {
+const selectMaterialFun = (item) => {
-      ctx.emit('select-material', item)
+  emit('select-material', item)
-    }
+}
-    /** 搜索按钮操作 */
-    const handleQuery = () => {
+const getPage = async () => {
-      queryParams.pageNo = 1
-      getPage()
-    }
-    const getPage = () => {
  loading.value = true
+  try {
    if (objDataRef.type === 'news' && newsTypeRef.value === '1') {
      // 【图文】+ 【已发布】
-        getFreePublishPageFun()
+      await getFreePublishPageFun()
    } else if (objDataRef.type === 'news' && newsTypeRef.value === '2') {
      // 【图文】+ 【草稿】
-        getDraftPageFun()
+      await getDraftPageFun()
    } else {
      // 【素材】
-        getMaterialPageFun()
+      await getMaterialPageFun()
    }
+  } finally {
+    loading.value = false
  }
+}
-    const getMaterialPageFun = async () => {
+const getMaterialPageFun = async () => {
-      let data = await getMaterialPage({
+  const data = await MpMaterialApi.getMaterialPage({
    ...queryParams,
    type: objDataRef.type
  })
  list.value = data.list
  total.value = data.total
-      loading.value = false
+}
-    }
-    const getFreePublishPageFun = async () => {
+const getFreePublishPageFun = async () => {
-      let data = await getFreePublishPage(queryParams)
+  const data = await MpFreePublishApi.getFreePublishPage(queryParams)
  data.list.forEach((item) => {
    const newsItem = item.content.newsItem
    newsItem.forEach((article) => {
@@ -212,11 +210,10 @@ export default defineComponent({
  })
  list.value = data.list
  total.value = data.total
-      loading.value = false
+}
-    }
-    const getDraftPageFun = async () => {
+const getDraftPageFun = async () => {
-      let data = await getDraftPage(queryParams)
+  const data = await MpDraftApi.getDraftPage(queryParams)
  data.list.forEach((item) => {
    const newsItem = item.content.newsItem
    newsItem.forEach((article) => {
@@ -225,26 +222,10 @@ export default defineComponent({
  })
  list.value = data.list
  total.value = data.total
-      loading.value = false
+}
-    }
-    onMounted(async () => {
+onMounted(async () => {
  getPage()
-    })
-    return {
-      handleQuery,
-      dateFormatter,
-      selectMaterialFun,
-      getMaterialPageFun,
-      getPage,
-      queryParams,
-      objDataRef,
-      list,
-      total,
-      loading
-    }
-  }
 })
 </script>
 <style lang="scss" scoped>
@@ -275,6 +256,7 @@ p {
  .waterfall {
    column-count: 3;
  }
  p {
    color: red;
  }
@@ -284,6 +266,7 @@ p {
  .waterfall {
    column-count: 2;
  }
  p {
    color: orange;
  }