之前封装了一下操作按钮，但是现在居然看不懂代码了，那么怎么办？重构呗。

分析一下按钮，可以分为两类：弹窗的和删除的。

按钮类型

• 按钮
  • 弹窗
    • 添加
    • 修改
    • 设置
    • 列表
    • 主从
    • 自定义
  • 删除
    • 物理删除
    • 逻辑删除

应该差不多了。

按钮的元数据

{
  "moduleId": 142,
  "btnOrder": [10, 20, 30, 80],
  "itemMeta": {
    "10": {
      "btnTitlte": "添加表",
      "htnKind": "add",
      "dialogTitle": "添加新表" ,
      "dialogWidth": "50%",
      "controlKey": "form",
      "controlMetaId": 10,
      "actionId": 10,
      "hotkey": "a"
    },
    "20": {
      "btnTitlte": "修改表",
      "htnKind": "update",
      "dialogTitle": "修改表" ,
      "dialogWidth": "50%",
      "controlKey": "form",
      "controlMetaId": 10,
      "actionId": 20,
      "hotkey": "s"
    },
    "80": {
      "btnTitlte": "设置字段",
      "htnKind": "list",
      "dialogTitle": "设置字段" ,
      "dialogWidth": "75%",
      "controlKey": "list",
      "controlMetaId": 143,
      "actionId": 143,
      "hotkey": "f"
    },
    "30": {
      "btnTitlte": "删除表",
      "htnKind": "delete",
      "dialogTitle": "删除表" ,
      "dialogWidth": "50%",
      "controlKey": "delete",
      "controlMetaId": 19,
      "actionId": 30,
      "hotkey": "d"
    }
  }
}

基本应该差不多了。

组件结构

• 外壳按钮
  • 弹窗按钮
  • 删除按钮

做三个按钮，一个是外壳，循环按钮用，一个是弹窗用的按钮，一个是删除用的按钮。

分成多个组件，代码也会分离开，这样就不容易看不懂了。

外壳按钮

<template>
  <div>
    <!--多个按钮-->
    <el-space wrap>
      <span
        v-for="(item, key) in buttonMeta.btnOrder"
        :key="'btn_'+ key"
      >
        <nf-button-delete
          v-if="buttonMeta.itemMeta[item].htnKind === 'delete'"
          :moduleId="moduleId"
          :buttonMeta="buttonMeta.itemMeta[item]"
          :formMetas="formMetas"
        >
        </nf-button-delete>
        <nf-button-dialog
          v-else
          :moduleId="moduleId"
          :buttonMeta="buttonMeta.itemMeta[item]"
          :formMetas="formMetas"
        >
        </nf-button-dialog>
      </span>
    </el-space>
  </div>
</template>

遍历按钮的meta，因为只有两种类型的按钮，所以直接用 v-if 判断好了。

应该不会出现过了几天就看不懂的情况了吧。

弹窗按钮

<template>
  <div>
    <!--按钮-->
    <el-button
      type="primary"
      :disabled="false"
      @click="buttonClick()"
    >
      {{buttonMeta.btnTitlte}}({{buttonMeta.hotkey}})
    </el-button>
    <!--弹窗，表单-->
    <div v-dialogdrag="buttonMeta.dialogWidth">
      <el-dialog
        :title="buttonMeta.dialogTitle"
        v-model="isShow"
        :modal="true"
        :width="buttonMeta.dialogWidth"
      >
        <nf-Form
          :moduleId="moduleId"
          :actionId="buttonMeta.actionId"
          :controlMetaId="buttonMeta.controlMetaId"
          :dataId="dataListState.choice.dataId"
          :type="buttonMeta.htnKind"
          :formMeta="formMetas[moduleId + buttonMeta.controlMetaId.toString()]"
        >
        </nf-Form>
      </el-dialog>
    </div>
  </div>
</template>

因为是弹窗的按钮，所以一个按钮就对应一个弹窗，好吧，有点浪费，不过这样可以更好地保持状态，当然这样会导致页面里的dom越来越多。

先这样吧，以后有性能问题的话，再修改。

删除按钮

<template>
  <div>
    <!--按钮-->
    <el-button
      type="primary"
      :disabled="false"
      @click="buttonClick()"
    >
      {{buttonMeta.btnTitlte}}({{buttonMeta.hotkey}})
    </el-button>
  </div>
</template>

只需要显示按钮即可。

import { ElMessageBox, ElMessage } from 'element-plus'

// 单击按钮，执行删除操作
const buttonClick = () => {
  // 删除
  const msgBox = {
    confirmButtonText: '删除' + dataListState.choice.dataId,
    cancelButtonText: '后悔了',
    type: 'warning'
  }
  const msgSucess = {
    type: 'success',
    message: '删除成功！'
  }
  const msgError = {
    type: 'info',
    message: '已经取消了。'
  }
  ElMessageBox.confirm('此操作将删除该记录, 是否继续？', '温馨提示', msgBox)
    .then(() => {
      // 访问后端API
      service(props.moduleId, props.buttonMeta.actionId, {}, dataListState.choice.dataId)
        .then(() => {
          ElMessage(msgSucess)
          dataListState.reloadPager()
        })
    })
    .catch(() => {
      ElMessage(msgError)
    })
}

这样应该简洁不少。

按钮组 弹窗添加 删除的提示