feat 公众号编辑器

src/views/modules/third/wechat/article/WeChatArticleSelect.vue

@@ -0,0 +1,38 @@
+<template>
+  <basic-modal
+    title="选择文章"
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+  >
+    <vxe-table row-id="id" :loading="loading" :data="tableData" :radio-config="{ highlight: true }" @radio-change="radioChange">
+      <vxe-column width="50" type="radio" />
+      <vxe-column field="titles" title="标题" />
+      <vxe-column field="articleId" title="文章id" />
+      <vxe-column field="updateTime" title="上传时间" />
+    </vxe-table>
+    <vxe-pager
+      size="medium"
+      :loading="loading"
+      :current-page="pagination.current"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @page-change="handleTableChange"
+    />
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button :loading="loading" type="primary" :disabled="!articleId" @click="handleOk">选择</a-button>
+      </a-space>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+</script>
+
+<style scoped></style>

src/views/modules/third/wechat/media/WeChatMediaSelect.vue

@@ -0,0 +1,54 @@
+<template>
+  <basic-modal
+    title="选择素材"
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+  >
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="10">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="类型">
+              <a-select v-model="queryParam.type" :default-value="queryParam.type" :options="mediaTypes" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-space>
+              <a-button type="primary" @click="query">查询</a-button>
+            </a-space>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <vxe-table row-id="id" :loading="loading" :data="tableData" :radio-config="{ highlight: true }" @radio-change="radioChange">
+      <vxe-column width="50" type="radio" />
+      <vxe-column field="name" title="名称" />
+      <vxe-column field="mediaId" title="媒体ID" />
+      <vxe-column field="updateTime" title="上传时间" />
+    </vxe-table>
+    <vxe-pager
+      size="medium"
+      :loading="loading"
+      :current-page="pagination.current"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @page-change="handleTableChange"
+    />
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button :loading="loading" type="primary" :disabled="!mediaId" @click="handleOk">选择</a-button>
+      </a-space>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+</script>
+
+<style scoped></style>

src/views/modules/third/wechat/menu/WechatMenuDesign.vue

@@ -1,10 +1,85 @@
 <template>
-
+  <basic-modal
+    v-bind="$attrs"
+    title="自定义菜单"
+    :closable="false"
+    :keyboard="false"
+    :destroyOnClose="true"
+    :loading="confirmLoading"
+    :width="1030"
+    :visible="visible"
+    :mask-closable="showable"
+  >
+    <wx-menu-design :showable="showable" v-model:menu="form.menuInfo" />
+    <template #footer>
+      <a-button @click="handleCancel">取消</a-button>
+      <a-button v-if="!showable" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+    </template>
+  </basic-modal>
 </template>
 
 <script lang="ts" setup>
+  import WxMenuDesign from '/@/views/modules/third/wechat/menu/edit/WxMenuDesign.vue'
+  import { $ref } from 'vue/macros'
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { get, update } from '/@/views/modules/third/wechat/menu/WechatMenu.api'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+
+  const { createConfirm, createMessage } = useMessage()
+
+  let confirmLoading = $ref(false)
+  let visible = $ref(false)
+  let showable = $ref(false)
+
+  let form = $ref<any>({})
+
+  function init(id, formEditType: FormEditType) {
+    visible = true
+    showable = formEditType === FormEditType.Show
+    if (formEditType === FormEditType.Add) {
+      confirmLoading = false
+    } else {
+      get(id).then((res) => {
+        form = res.data
+        confirmLoading = false
+      })
+    }
+  }
+
+  /**
+   * 保存
+   */
+  function handleOk() {
+    confirmLoading = true
+    update(form).then(() => {
+      createMessage.success('保存自定义菜单设计内容成功')
+      visible = false
+      confirmLoading = false
+    })
+  }
+
+  /**
+   * 关闭
+   */
+  function handleCancel() {
+    console.log(showable)
+    if (showable) {
+      visible = false
+    } else {
+      createConfirm({
+        iconType: 'warning',
+        title: '警告',
+        content: '是否退出自定义菜单编辑，内容将不会被保存?',
+        onOk: () => {
+          visible = false
+        },
+      })
+    }
+  }
+  defineExpose({
+    init,
+  })
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/modules/third/wechat/menu/edit/WxMenuDesign.vue

@@ -6,222 +6,197 @@
         <div class="weixin-title">{{ title }}</div>
       </div>
       <div class="weixin-bd">
-        <ul class="weixin-menu" id="weixin-menu" >
+        <ul class="weixin-menu" id="weixin-menu">
           <li
-            v-for="(mainMenu,mainIndex) in menu.buttons"
+            v-for="(mainMenu, mainIndex) in menu.buttons"
             class="menu-item"
             :key="mainIndex"
-            :class="{current:currentMenu===mainMenu}"
-            @click="selectedMainMenu(mainIndex,mainMenu)">
+            :class="{ current: currentMenu === mainMenu }"
+            @click="selectedMainMenu(mainIndex, mainMenu)"
+          >
             <div class="menu-item-title">
               <i class="icon_menu_dot"></i>
               <span>{{ mainMenu.name }}</span>
             </div>
-            <ul class="weixin-sub-menu" v-show="currentMenuIndex===mainIndex">
+            <ul class="weixin-sub-menu" v-show="currentMenuIndex === mainIndex">
               <li
-                v-for="(subMenu,subjectIndex) in mainMenu.subButtons"
+                v-for="(subMenu, subjectIndex) in mainMenu.subButtons"
                 class="menu-sub-item"
                 :key="subjectIndex"
-                :class="{current:currentMenu===subMenu}"
-                @click.stop="selectedSubMenu(subjectIndex,subMenu)">
+                :class="{ current: currentMenu === subMenu }"
+                @click.stop="selectedSubMenu(subjectIndex, subMenu)"
+              >
                 <div class="menu-item-title">
                   <span>{{ subMenu.name }}</span>
                 </div>
               </li>
-              <li v-if="mainMenu.subButtons.length<5" class="menu-sub-item" @click.stop="addSubMenuConfirm(mainMenu)">
+              <li v-if="mainMenu.subButtons.length < 5" class="menu-sub-item" @click.stop="addSubMenuConfirm(mainMenu)">
                 <div class="menu-item-title">
                   <i class="icon14_menu_add"></i>
                 </div>
               </li>
             </ul>
           </li>
-          <li class="menu-item" v-if="menu.buttons.length<3" @click="addMainMenu()">
+          <li class="menu-item" v-if="menu.buttons.length < 3" @click="addMainMenu()">
             <i class="icon14_menu_add"></i>
           </li>
         </ul>
       </div>
     </div>
     <!-- 菜单信息编辑 -->
-    <wx-menu-detail-editor
-      v-model="currentMenu"
-      :menu-detail-type="currentMenuTyp"
-      :showable="showable"
-      @delete="delMenu"
-    ></wx-menu-detail-editor>
+    <wx-menu-detail-editor v-model:menu-detail="currentMenu" :menu-detail-type="currentMenuTyp" :showable="showable" @delete="delMenu" />
   </div>
 </template>
 
-<script>
-
-import './menu.less'
-import WxMenuDetailEditor from '@/views/modules/third/wechat/menu/edit/WxMenuDetailEditor'
-import { MenuTypeMain, MenuTypeMainSubject, MenuTypeSubject } from './MenuType'
-
-export default {
-  name: 'WxMenuEdit',
-  components: { WxMenuDetailEditor },
-  model: {
-    // 自定义为v-model
-    prop: 'menu'
-  },
-  props: {
-    // 查询条件
-    menu: {
-      type: Object,
-      default: () => {
-        return {
-          buttons: []
-        }
-      }
-    },
+<script lang="ts" setup>
+  import './menu.less'
+  import { MenuTypeMain, MenuTypeMainSubject, MenuTypeSubject } from './MenuType'
+  import WxMenuDetailEditor from './WxMenuDetailEditor.vue'
+  import { $ref } from 'vue/macros'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { unref } from 'vue'
+  interface Props {
+    // 菜单信息
+    menu: any
     // 是否是查询看状态
-    showable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      // 菜单类型
-      MenuTypeMain,
-      MenuTypeMainSubject,
-      MenuTypeSubject,
-      // 当前选中菜单的类型
-      currentMenuTyp: '',
-      // 当前选中(焦点所在)的菜单
-      currentMenu: {},
-      // 当前选中菜单索引
-      currentMenuIndex: -1,
-      // 当前选中子菜单索引
-      currentSubMenuIndex: -1,
-      // 标题
-      title: ''
-    }
-  },
-  methods: {
-    /**
-     * 选中主菜单
-     * @param i
-     * @param menu 微信菜单按钮内容
-     */
-    selectedMainMenu (i, menu) {
-      if (menu.subButtons.length) {
-        this.currentMenuTyp = MenuTypeMainSubject
-      } else {
-        this.currentMenuTyp = MenuTypeMain
-      }
-      console.log(menu)
-      this.currentMenu = menu
-      this.currentSubMenuIndex = -1
-      this.currentMenuIndex = i
-    },
-    /**
-     * 选中子菜单
-     */
-    selectedSubMenu (i, menu) {
-      this.currentMenuTyp = MenuTypeSubject
-      this.currentSubMenuIndex = i
-      this.currentMenu = menu
-    },
-    /**
-     *  添加主菜单
-     */
-    addMainMenu () {
-      if (this.showable) { return }
-      const buttons = this.menu.buttons
-      // 主菜单添加
-      if (buttons.length < 3) {
-        buttons.push({
-          type: 'view',
-          name: '菜单名称',
-          subButtons: [],
-          url: ''
-        })
-        // 当前选中菜单类型
-        this.currentMenuTyp = MenuTypeMain
-        this.currentMenuIndex = this.menu.buttons.length - 1
-        this.currentSubMenuIndex = -1
-        this.currentMenu = buttons[buttons.length - 1]
-      }
-    },
-    /**
-     * 添加子菜单 确认
-     * @param mainMenu 子菜单所属的主菜单
-     */
-    addSubMenuConfirm (mainMenu) {
-      if (this.showable) { return }
-      if (mainMenu.subButtons.length < 5) {
-        // 判断所属的主菜单是否有内容
-        if (!mainMenu.subButtons.length) {
-          this.$confirm({
-            title: '提示',
-            content: '添加子菜单将会清空菜单信息',
-            okText: '确定',
-            cancelText: '取消',
-            onOk: () => {
-              console.log(mainMenu)
-              // 清空其他数据
-              delete mainMenu.type
-              this.addSubMenu(mainMenu)
-            }
-          })
-        } else {
-          this.addSubMenu(mainMenu)
-        }
-      }
-    },
-    /**
-     * 添加子菜单
-     */
-    addSubMenu (mainMenu) {
-      mainMenu.subButtons.push({
-        type: 'view',
-        name: '子菜单名称',
-        url: ''
-      })
-      // 当前选中菜单类型变为子菜单
-      this.currentMenuTyp = MenuTypeSubject
-      // 子菜单索引
-      this.currentSubMenuIndex = mainMenu.subButtons.length - 1
-      this.currentMenu = mainMenu.subButtons[mainMenu.subButtons.length - 1]
-    },
-    /**
-     * 删除菜单
-     */
-    async delMenu () {
-      this.$confirm({
-        title: '提示',
-        content: '是否删除该菜单及包含的内容?',
-        okText: '确定',
-        cancelText: '取消',
-        onOk: () => {
-          // 主菜单
-          if ([MenuTypeMain, MenuTypeMainSubject].includes(this.currentMenuTyp)) {
-            // 如果有子菜单, 需要二次确认
-            this.menu.buttons.splice(this.currentMenuIndex, 1)
-            // 重新定位焦点
-            this.currentMenuIndex = -1
-            this.currentMenu = null
-            this.currentMenuTyp = null
-          } else {
-            const subButton = this.menu.buttons[this.currentMenuIndex].subButtons
-            subButton.splice(this.currentSubMenuIndex, 1)
-            // 重新定位焦点
-            this.currentMenuIndex = -1
-            this.currentSubMenuIndex = -1
-            this.currentMenu = null
-            this.currentMenuTyp = null
-          }
-        }
-      })
-    },
-  },
-  mounted () {
-    console.log(this.showable)
+    showable: boolean
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    menu: {
+      buttons: [],
+    },
+    showable: false,
+  })
+
+  const { createConfirm } = useMessage()
+
+  // 当前选中菜单的类型
+  let currentMenuTyp = $ref('')
+  // 当前选中(焦点所在)的菜单
+  let currentMenu = $ref({})
+  // 当前选中菜单索引
+  let currentMenuIndex = $ref(-1)
+  // 当前选中子菜单索引
+  let currentSubMenuIndex = $ref(-1)
+  // 标题
+  let title = $ref('')
+
+  /**
+   * 选中主菜单
+   * @param i
+   * @param menu 微信菜单按钮内容
+   */
+  function selectedMainMenu(i, menu) {
+    if (menu.subButtons.length) {
+      currentMenuTyp = MenuTypeMainSubject
+    } else {
+      currentMenuTyp = MenuTypeMain
+    }
+    currentMenu = unref(menu)
+    currentSubMenuIndex = -1
+    currentMenuIndex = i
+  }
+  /**
+   * 选中子菜单
+   */
+  function selectedSubMenu(i, menu) {
+    currentMenuTyp = MenuTypeSubject
+    currentSubMenuIndex = i
+    currentMenu = unref(menu)
+  }
+  /**
+   *  添加主菜单
+   */
+  function addMainMenu() {
+    if (props.showable) {
+      return
+    }
+    const buttons = props.menu.buttons
+    // 主菜单添加
+    if (buttons.length < 3) {
+      buttons.push({
+        type: 'view',
+        name: '菜单名称',
+        subButtons: [],
+        url: '',
+      })
+      // 当前选中菜单类型
+      currentMenuTyp = MenuTypeMain
+      currentMenuIndex = props.menu.buttons.length - 1
+      currentSubMenuIndex = -1
+      currentMenu = buttons[buttons.length - 1]
+    }
+  }
+  /**
+   * 添加子菜单 确认
+   * @param mainMenu 子菜单所属的主菜单
+   */
+  function addSubMenuConfirm(mainMenu) {
+    if (props.showable) {
+      return
+    }
+    if (mainMenu.subButtons.length < 5) {
+      // 判断所属的主菜单是否有内容
+      if (!mainMenu.subButtons.length) {
+        createConfirm({
+          iconType: 'warning',
+          title: '提示',
+          content: '添加子菜单将会清空菜单信息',
+          onOk: () => {
+            // 清空其他数据
+            delete mainMenu.type
+            addSubMenu(mainMenu)
+          },
+        })
+      } else {
+        addSubMenu(mainMenu)
+      }
+    }
+  }
+  /**
+   * 添加子菜单
+   */
+  function addSubMenu(mainMenu) {
+    mainMenu.subButtons.push({
+      type: 'view',
+      name: '子菜单名称',
+      url: '',
+    })
+    // 当前选中菜单类型变为子菜单
+    currentMenuTyp = MenuTypeSubject
+    // 子菜单索引
+    currentSubMenuIndex = mainMenu.subButtons.length - 1
+    currentMenu = mainMenu.subButtons[mainMenu.subButtons.length - 1]
+  }
+  /**
+   * 删除菜单
+   */
+  function delMenu() {
+    createConfirm({
+      iconType: 'warning',
+      title: '提示',
+      content: '是否删除该菜单及包含的内容?',
+      onOk: () => {
+        // 主菜单
+        if ([MenuTypeMain, MenuTypeMainSubject].includes(currentMenuTyp)) {
+          // 如果有子菜单, 需要二次确认
+          props.menu.buttons.splice(currentMenuIndex, 1)
+          // 重新定位焦点
+          currentMenuIndex = -1
+          currentMenu = null
+          currentMenuTyp = null
+        } else {
+          const subButton = props.menu.buttons[currentMenuIndex].subButtons
+          subButton.splice(currentSubMenuIndex, 1)
+          // 重新定位焦点
+          currentMenuIndex = -1
+          currentSubMenuIndex = -1
+          currentMenu = null
+          currentMenuTyp = null
+        }
+      },
+    })
   }
-}
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/views/modules/third/wechat/menu/edit/WxMenuDetailEditor.vue

@@ -2,198 +2,182 @@
   <div>
     <!-- 主菜单 -->
     <div class="weixin-menu-detail" v-if="menuDetailType">
-      <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
+      <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid">
         <div class="menu-name">{{ menuDetail.name }}</div>
-        <div class="menu-del" v-show="!showable" @click="delMenu">{{ '删除'+title }}</div>
+        <div class="menu-del" v-show="!showable" @click="delMenu">{{ '删除' + title }}</div>
       </div>
       <!--    单内容  -->
       <div class="menu-input-group">
-        <a-form-model
-          :label-col="labelCol"
-          :wrapper-col="wrapperCol"
-        >
-          <a-form-model-item label="菜单KEY值" prop="key">
-            <a-input placeholder="用于消息接口推送，不超过128字节" :disabled="showable" v-model="menuDetail.key"/>
-          </a-form-model-item>
-          <a-form-model-item :label="`${title}名称`" prop="name">
-            <a-input :placeholder="`请输入${title}名称`" :disabled="showable" v-model="menuDetail.name"/>
-          </a-form-model-item>
-          <a-form-model-item :label="`${title}类型`" v-if="menuDetailType !== MenuTypeMainSubject">
+        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+          <a-form-item label="菜单KEY值" prop="key">
+            <a-input placeholder="用于消息接口推送，不超过128字节" :disabled="showable" v-model:value="menuDetail.key" />
+          </a-form-item>
+          <a-form-item :label="`${title}名称`" prop="name">
+            <a-input :placeholder="`请输入${title}名称`" :disabled="showable" v-model:value="menuDetail.name" />
+          </a-form-item>
+          <a-form-item :label="`${title}类型`" v-if="menuDetailType !== MenuTypeMainSubject">
             <a-select
               :disabled="showable"
               :options="menuTypeOptions"
               :placeholder="`请选择${title}类型`"
               @change="menuTypeChange"
-              v-model="menuDetail.type"/>
-          </a-form-model-item>
-          <a-form-model-item label="页面地址" prop="url" v-if="editViewFlag">
-            <a-input placeholder="订阅者点击该子菜单会跳到以下链接" :disabled="showable" v-model="menuDetail.url"/>
-          </a-form-model-item>
-          <a-form-model-item label="小程序APPID" prop="appId" v-if="editMiniAppFlag">
-            <a-input placeholder="小程序的appid（仅认证公众号可配置）" :disabled="showable" v-model="menuDetail.appId"/>
-          </a-form-model-item>
-          <a-form-model-item label="小程序页面路径" prop="pagePath" v-if="editMiniAppFlag">
-            <a-input placeholder="小程序的页面路径" :disabled="showable" v-model="menuDetail.pagePath"/>
-          </a-form-model-item>
-          <a-form-model-item label="备用网页" prop="url" v-if="editMiniAppFlag">
-            <a-input placeholder="旧版微信无法支持小程序时将会打开备用网页。" :disabled="showable" v-model="menuDetail.url"/>
-          </a-form-model-item>
-          <a-form-model-item label="消息内容" prop="url" v-if="editMediaFlag">
-            <a-input placeholder="发送消息，（除文本消息）从素材库中选择" disabled v-model="menuDetail.mediaId">
+              v-model:value="menuDetail.type"
+            />
+          </a-form-item>
+          <a-form-item label="页面地址" prop="url" v-if="editViewFlag">
+            <a-input placeholder="订阅者点击该子菜单会跳到以下链接" :disabled="showable" v-model:value="menuDetail.url" />
+          </a-form-item>
+          <a-form-item label="小程序APPID" prop="appId" v-if="editMiniAppFlag">
+            <a-input placeholder="小程序的appid（仅认证公众号可配置）" :disabled="showable" v-model:value="menuDetail.appId" />
+          </a-form-item>
+          <a-form-item label="小程序页面路径" prop="pagePath" v-if="editMiniAppFlag">
+            <a-input placeholder="小程序的页面路径" :disabled="showable" v-model:value="menuDetail.pagePath" />
+          </a-form-item>
+          <a-form-item label="备用网页" prop="url" v-if="editMiniAppFlag">
+            <a-input placeholder="旧版微信无法支持小程序时将会打开备用网页。" :disabled="showable" v-model:value="menuDetail.url" />
+          </a-form-item>
+          <a-form-item label="消息内容" prop="url" v-if="editMediaFlag">
+            <a-input placeholder="发送消息，（除文本消息）从素材库中选择" disabled v-model:value="menuDetail.mediaId">
               <template #addonAfter v-if="!showable">
-                <a v-if="!menuDetail.mediaId" @click="selectMedia" :disabled="showable">选择素材</a>
-                <a href="javascript:" v-else :disabled="showable" @click="menuDetail.mediaId=''" style="color:red;">清除</a>
+                <a v-if="!menuDetail.mediaId" @click="selectMedia" ::disabled="showable ? 'disabled' : null">选择素材</a>
+                <a href="javascript:" v-else :disabled="showable ? 'disabled' : null" @click="menuDetail.mediaId = ''" style="color: red"
+                  >清除</a
+                >
               </template>
             </a-input>
-          </a-form-model-item>
-          <a-form-model-item label="图文文章" prop="url" disabled v-if="editArticleFlag">
-            <a-input placeholder="从已发表文章列表中选择" disabled="" v-model="menuDetail.articleId">
+          </a-form-item>
+          <a-form-item label="图文文章" prop="url" disabled v-if="editArticleFlag">
+            <a-input placeholder="从已发表文章列表中选择" disabled="" v-model:value="menuDetail.articleId">
               <template #addonAfter>
-                <a href="javascript:" v-if="!menuDetail.articleId" @click="selectArticle" :disabled="showable">选择文章</a>
-                <a href="javascript:" v-else :disabled="showable" @click="menuDetail.articleId=''" style="color:red;">清除</a>
+                <a href="javascript:" v-if="!menuDetail.articleId" @click="selectArticle" :disabled="showable ? 'disabled' : null"
+                  >选择文章</a
+                >
+                <a href="javascript:" v-else :disabled="showable ? 'disabled' : null" @click="menuDetail.articleId = ''" style="color: red"
+                  >清除</a
+                >
               </template>
             </a-input>
-          </a-form-model-item>
-        </a-form-model>
+          </a-form-item>
+        </a-form>
       </div>
     </div>
-    <we-chat-media-select ref="weChatMediaSelect" @ok="selectMediaCallback"/>
-    <we-chat-article-select ref="weChatArticleSelect" @ok="selectArticleCallback"/>
+    <we-chat-media-select ref="weChatMediaSelect" @ok="selectMediaCallback" />
+    <we-chat-article-select ref="weChatArticleSelect" @ok="selectArticleCallback" />
   </div>
-
 </template>
 
-<script>
-import { MenuTypeMain, MenuTypeMainSubject, MenuTypeSubject } from './MenuType'
-import WeChatMediaSelect from '@/views/modules/third/wechat/media/WeChatMediaSelect'
-import WeChatArticleSelect from '@/views/modules/third/wechat/article/WeChatArticleSelect'
+<script lang="ts" setup>
+  import { MenuTypeMain, MenuTypeMainSubject, MenuTypeSubject } from './MenuType'
+  import WeChatMediaSelect from '/@/views/modules/third/wechat/media/WeChatMediaSelect.vue'
+  import WeChatArticleSelect from '/@/views/modules/third/wechat/article/WeChatArticleSelect.vue'
+  import { $ref } from 'vue/macros'
+  import { watch } from 'vue'
 
-export default {
-  name: 'WxMenuDetailEditor',
-  components: { WeChatArticleSelect, WeChatMediaSelect },
-  model: {
-    prop: 'menuDetail'
-  },
-  props: {
+  interface Props {
     // '' 不显示, main 主菜单, mainSubject 主菜单下包含子菜单, subject 子菜单
-    menuDetailType: {
-      type: String,
-      default: ''
-    },
-    menuDetail: {
-      type: Object,
-      default: () => {
-        return {
-          name: ''
-        }
-      }
-    },
+    menuDetailType: string
+    // 内容
+    menuDetail: any
     // 是否是查询看状态
-    showable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  watch: {
-    menuDetailType (newValue) {
-      if ([MenuTypeMainSubject, MenuTypeMain].includes(newValue)) {
-        this.title = '菜单'
-      } else {
-        this.title = '子菜单'
-      }
-    },
-    // 监听菜单类型
-    'menuDetail.type': {
-      handler (newV) {
-        this.menuTypeChange(newV)
-      },
-      immediate: true
-
-    }
-  },
-  data () {
-    return {
-      MenuTypeMain,
-      MenuTypeMainSubject,
-      MenuTypeSubject,
-      labelCol: { span: 6 },
-      wrapperCol: { span: 16 },
-      title: '',
-      // 菜单编辑项标识
-      editViewFlag: false,
-      editMiniAppFlag: false,
-      editMediaFlag: false,
-      editArticleFlag: false,
-
-      // 菜单内容类型
-      menuTypeOptions: [
-        { value: 'view', label: '跳转网页' },
-        { value: 'click', label: '自定义点击事件' },
-        { value: 'media_id', label: '点击回复' },
-        { value: 'article_view_limited', label: '跳转图文消息链接' },
-        { value: 'article_id', label: '图文卡片消息' },
-        { value: 'miniprogram', label: '打开指定小程序' },
-        { value: 'scancode_push', label: '扫码上传消息' },
-        { value: 'scancode_waitmsg', label: '扫码提示下发' },
-        { value: 'pic_sysphoto', label: '系统相机拍照' },
-        { value: 'pic_photo_or_album', label: '弹出拍照或者相册' },
-        { value: 'pic_weixin', label: '弹出微信相册' },
-        { value: 'location_select', label: '弹出地理位置选择器' }
-      ]
-    }
-  },
-  methods: {
-    /**
-     * 删除
-     */
-    delMenu () {
-      this.$emit('delete')
-    },
-    /**
-     * 菜单类型变动
-     */
-    menuTypeChange (value) {
-      this.editViewFlag = false
-      this.editMiniAppFlag = false
-      this.editMediaFlag = false
-      this.editArticleFlag = false
-      if (['view'].includes(value)) {
-        this.editViewFlag = true
-      } else if (['miniprogram'].includes(value)) {
-        this.editMiniAppFlag = true
-      } else if (['media_id'].includes(value)) {
-        this.editMediaFlag = true
-      } else if (['article_view_limited', 'article_id'].includes(value)) {
-        this.editArticleFlag = true
-      } else {
-      }
-    },
-    /**
-     * 选择素材
-     */
-    selectMedia () {
-      this.$refs.weChatMediaSelect.show()
-    },
-    selectMediaCallback (mediaId) {
-      // this.menuDetail.mediaId = mediaId
-      this.$set(this.menuDetail, 'mediaId', mediaId)
-    },
-    /**
-     * 选择文章
-     */
-    selectArticle () {
-      this.$refs.weChatArticleSelect.init()
-    },
-    selectArticleCallback (articleId) {
-      // this.menuDetail.articleId = articleId
-      this.$set(this.menuDetail, 'articleId', articleId)
-    }
-  },
-  mounted () {
+    showable: boolean
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    menuDetailType: '',
+    menuDetail: {
+      name: '',
+    },
+    showable: false,
+  })
+
+  watch(
+    () => props.menuDetail.type,
+    (newValue) => {
+      menuTypeChange(newValue)
+    },
+  )
+  watch(
+    () => props.menuDetailType,
+    (newValue) => {
+      if ([MenuTypeMainSubject, MenuTypeMain].includes(newValue)) {
+        title = '菜单'
+      } else {
+        title = '子菜单'
+      }
+    },
+  )
+
+  const emits = defineEmits(['delete', 'update:menuDetail'])
+
+  const weChatMediaSelect = $ref<any>()
+  const weChatArticleSelect = $ref<any>()
+
+  const labelCol = { span: 6 }
+  const wrapperCol = { span: 16 }
+  let title = $ref('')
+  // 菜单编辑项标识
+  let editViewFlag = $ref(false)
+  let editMiniAppFlag = $ref(false)
+  let editMediaFlag = $ref(false)
+  let editArticleFlag = $ref(false)
+  // 菜单内容类型
+  const menuTypeOptions = [
+    { value: 'view', label: '跳转网页' },
+    { value: 'click', label: '自定义点击事件' },
+    { value: 'media_id', label: '点击回复' },
+    { value: 'article_view_limited', label: '跳转图文消息链接' },
+    { value: 'article_id', label: '图文卡片消息' },
+    { value: 'miniprogram', label: '打开指定小程序' },
+    { value: 'scancode_push', label: '扫码上传消息' },
+    { value: 'scancode_waitmsg', label: '扫码提示下发' },
+    { value: 'pic_sysphoto', label: '系统相机拍照' },
+    { value: 'pic_photo_or_album', label: '弹出拍照或者相册' },
+    { value: 'pic_weixin', label: '弹出微信相册' },
+    { value: 'location_select', label: '弹出地理位置选择器' },
+  ]
+
+  /**
+   * 删除
+   */
+  function delMenu() {
+    emits('delete')
+  }
+  /**
+   * 菜单类型变动
+   */
+  function menuTypeChange(value) {
+    editViewFlag = false
+    editMiniAppFlag = false
+    editMediaFlag = false
+    editArticleFlag = false
+    if (['view'].includes(value)) {
+      editViewFlag = true
+    } else if (['miniprogram'].includes(value)) {
+      editMiniAppFlag = true
+    } else if (['media_id'].includes(value)) {
+      editMediaFlag = true
+    } else if (['article_view_limited', 'article_id'].includes(value)) {
+      editArticleFlag = true
+    } else {
+    }
+  }
+  /**
+   * 选择素材
+   */
+  function selectMedia() {
+    weChatMediaSelect.show()
+  }
+  function selectMediaCallback(mediaId) {
+    props.menuDetail.mediaId = mediaId
+  }
+  /**
+   * 选择文章
+   */
+  function selectArticle() {
+    weChatArticleSelect.init()
+  }
+  function selectArticleCallback(articleId) {
+    props.menuDetail.articleId = articleId
   }
-}
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>