vue admin 封装dialog

在 Vue Admin 中封装一个通用的 Dialog 组件可以提高代码的复用性，这里提供一个示例代码：

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="beforeClose">
    <el-form ref="form" :model="formData" :rules="rules" label-position="left" label-width="80px" style="padding: 20px;">
      <el-form-item v-for="item in formItems" :key="item.prop" :label="item.label" :prop="item.prop" :rules="item.rules">
        <el-input v-if="item.type === 'input'" v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input>
        <el-select v-else-if="item.type === 'select'" v-model="formData[item.prop]" :placeholder="item.placeholder" :options="item.options"></el-select>
        <!-- 其他表单控件 -->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit" :loading="submitting">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CommonDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    formItems: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      submitting: false
    }
  },
  methods: {
    // 取消保存
    cancel() {
      this.$emit('update:dialogVisible', false)
    },
    // 保存数据
    async submit() {
      const valid = await this.$refs.form.validate()
      if (!valid) {
        return
      }
      this.submitting = true
      try {
        await this.$emit('submit', this.formData)
        this.$emit('update:dialogVisible', false)
      } catch (e) {
        console.error(e)
        this.$message.error('保存失败')
      } finally {
        this.submitting = false
      }
    },
    // 关闭对话框前的操作
    beforeClose(done) {
      this.$confirm('确定要关闭吗？')
        .then(() => {
          done()
        })
        .catch(() => {})
    }
  }
}
</script>

<style>
.dialog-footer {
  text-align: right;
  padding-top: 10px;
}
</style>

该组件接收以下 props：

- `title`：对话框的标题。
- `formItems`：表单项数组，每个元素包含 `label`、`prop`、`type`、`placeholder` 和 `options` 等属性。
- `formData`：表单数据对象。
- `rules`：表单验证规则对象。
- `dialogVisible`：对话框的显示状态。

该组件发出以下事件：

- `update:dialogVisible`：更新对话框的显示状态。
- `submit`：保存数据事件，传递一个参数 `formData`。

在使用时，可以先定义一个表单项数组，然后在需要显示对话框的地方引入该组件并传递相应的 props 和事件，例如：

<template>
  <div>
    <el-button @click="showDialog">添加数据</el-button>
    <common-dialog
      :title="dialogTitle"
      :form-items="formItems"
      :form-data="formData"
      :rules="formRules"
      :dialog-visible.sync="dialogVisible"
      @submit="saveData"
    />
  </div>
</template>

<script>
import CommonDialog from '@/components/CommonDialog'

export default {
  components: {
    CommonDialog
  },
  data() {
    return {
      dialogTitle: '',
      dialogVisible: false,
      formItems: [
        { label: '名称', prop: 'name', type: 'input', placeholder: '请输入名称', rules: [{ required: true, message: '请输入名称' }] },
        { label: '数值', prop: 'value', type: 'input', placeholder: '请输入数值', rules: [{ required: true, message: '请输入数值' }] }
      ],
      formData: {},
      formRules: {}
    }
  },
  methods: {
    // 显示对话框
    showDialog() {
      this.dialogTitle = '添加数据'
      this.formData = {}
      this.dialogVisible = true
    },
    // 保存数据
    async saveData(data) {
      // 保存数据的逻辑
    }
  }
}
</script>

这样就可以在需要显示对话框的地方直接调用组件的 `showDialog` 方法，然后在 `saveData` 方法中处理保存数据的逻辑。