SOURCE

<!-- 
    基础版本，可以基于具体需求进行扩展其余的的表单组件
    保存编辑可以封装组件内也可以封装组件外，具体情况具体分析
 -->
<!------------------------------------组件代码------------------------------------>
<template>
  <div>
    <!-- 表单 -->
    <el-form
      :model="formData"
      :rules="formRules"
      label-width="100px"
      ref="formData"
    >
      <el-form-item
        v-for="(field, index) in fields"
        :key="index"
        :label="field.label"
        :prop="field.key"
      >
        <template v-if="field.type === 'select'">
          <el-select v-model="formData[field.key]" placeholder="请选择">
            <el-option
              v-for="(option, optionIndex) in field.options"
              :key="optionIndex"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </template>
        <template v-else>
          <el-input
            v-model="formData[field.key]"
            :type="field.type"
            :readonly="field.readonly"
            :rules="field.rules"
          ></el-input>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="handleSubmit('formData')"
          >{{ editing ? "更新" : "添加" }}</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table :data="dataList" style="width: 100%">
      <el-table-column
        v-for="(field, index) in fields"
        :key="index"
        :label="field.label"
        :prop="field.key"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    entity: {
      type: String,
      required: true,
    },
    fields: {
      type: Array,
      required: true,
    },
    apiUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      formData: {},
      dataList: [],
      editing: false,
      formRules: {},
    };
  },
  created() {
    this.initFormRules();
  },
  mounted() {},
  methods: {
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editing) {
            this.updateData();
          } else {
            this.addData();
          }
        } else {
          return false;
        }
      });
    },
    addData() {
      this.dataList.push({
        guid: this.guid(),
        ...this.formData,
      });
      this.formData = {};
      // 发送添加数据的请求
      // 例如：axios.post(this.apiUrl, this.formData)
    },
    updateData() {
      const { guid } = this.formData;
      this.dataList.forEach((item, index) => {
        if (item.guid === guid) {
          this.$set(this.dataList, index, { ...this.formData });
        }
      });
      this.formData = {};
      this.editing = false;
      // 发送更新数据的请求
      // 例如：axios.put(`${this.apiUrl}`, this.formData)
    },
    handleEdit(record) {
      this.formData = JSON.parse(JSON.stringify(this.dataList.find((item) => (item.guid === record.row.guid))))
      this.editing = true;
    },
    handleDelete(record) {
      const { guid } = record.row;
      this.dataList = this.dataList.filter((item) => item.guid !== guid);
      this.formData = {};
      this.editing = false;
      // 发送删除数据的请求
      // 例如：axios.delete(`${this.apiUrl}/${id}`)
    },
    fetchData() {
      // 获取数据列表
      // 例如：axios.get(this.apiUrl).then(response => this.dataList = response.data)
    },
    initFormRules() {
      // 初始化表单验证规则
      this.fields.forEach((field) => {
        if (field.rules) {
          this.formRules[field.key] = field.rules;
        }
      });
      console.log(this.formRules);
    },
  },
  mounted() {
    // 组件挂载时获取数据列表
    this.fetchData();
  },
};
</script>



<!------------------------------------组件使用---------------------------------->
<template>
  <div class="app-container">
    <CrudComponent :entity="entity" :fields="fields" :apiUrl="apiUrl" />
  </div>
</template>

<script>
import CrudComponent from "../../components/CrudComponent";

export default {
  components: {
    CrudComponent,
  },
  data() {
    return {
      entity: "user", // 实体对象名称
      fields: [
        // 字段配置信息
        {
          label: "姓名",
          key: "name",
          type: "text",
          rules: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        },
        { label: "年龄", key: "age", type: "number" },
        { label: "邮箱", key: "email", type: "email" },
        {
          label: "角色",
          key: "role",
          type: "select",
          options: [
            { label: "管理员", value: "admin" },
            { label: "普通用户", value: "user" },
          ],
        },
      ],
      apiUrl: "/api/users", // 接口地址
    };
  },
};
</script>

<style scoped lang="scss">
</style>