refactor(system): 优化 webhook群发助手配置功能

- 修改业务标识和类型字段的显示和处理逻辑
- 优化表单初始化和数据绑定
- 添加字典值与标签之间的转换功能

src/utils/dict.ts

@@ -44,6 +44,7 @@ export const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
       value: parseInt(dict.value + '')
     })
   })
+  console.log( 'dictOption', dictOption)
   return dictOption
 }
 

src/views/system/webhook/WebhookForm.vue

@@ -17,7 +17,7 @@
         <el-input v-model="formData.secret" placeholder="请输入加签密钥" />
       </el-form-item>
       <el-form-item label="平台类型" prop="type">
-        <el-select v-model="formData.type" placeholder="请选择类型">
+        <el-select v-model="selectedType" placeholder="请选择类型">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.WEBHOOK_TYPE)"
             :key="dict.value"
@@ -27,7 +27,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-radio-group v-model="formData.status">
+        <el-radio-group v-model="onOff">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.ON_OFF)"
             :key="dict.value"
@@ -45,7 +45,7 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { getIntDictOptions, DICT_TYPE, getDictLabel } from '@/utils/dict'
 import { WebhookApi, Webhook } from '@/api/system/webhook'
 
 /** webhook 表单 */
@@ -63,8 +63,8 @@ const formData = ref({
   bizName: undefined,
   accessToken: undefined,
   secret: undefined,
-  type: undefined,
-  status: undefined
+  type: '0',
+  status: 0
 })
 const formRules = reactive({
   bizName: [{ required: true, message: '群名称不能为空', trigger: 'blur' }],
@@ -124,9 +124,25 @@ const resetForm = () => {
     bizName: undefined,
     accessToken: undefined,
     secret: undefined,
-    type: undefined,
-    status: undefined
+    type: '',
+    status: 1
   }
   formRef.value?.resetFields()
 }
+const selectedType = computed({
+  get() {
+    return getDictLabel(DICT_TYPE.WEBHOOK_TYPE, formData.value.type)
+  },
+  set(value) {
+    formData.value.type = value
+  }
+})
+const onOff = computed({
+  get() {
+    return Number(formData.value.status)
+  },
+  set(value) {
+    formData.value.status = value
+  }
+})
 </script>

src/views/system/webhook/index.vue

@@ -110,7 +110,7 @@
     >
       <el-table-column type="selection" width="55" />
 <!--      <el-table-column label="ID" align="center" prop="id" />-->
-      <el-table-column label="群名称" align="center" prop="bizName" />
+      <el-table-column label="业务标识" align="center" prop="bizName" />
       <el-table-column label="通证" align="center" prop="accessToken" />
       <el-table-column label="加签密钥" align="center" prop="secret" />
       <el-table-column label="类型" align="center" prop="type">