91fans_admin/src/views/groupChatManagement/components/UpdateGroupChat.vue

<template>
  <el-dialog
    class="updateGroupChat"
    :title="title"
    :visible.sync="visible"
    width="500px"
  >
    <ConfigForms
      ref="form"
      labelWidth="110px"
      :formItems="formItems"
      :data="formData"
      inline
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="sure" size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ConfigForms from "@/components/ConfigForms";
import API from "@/api/groupChatManagement";
const formItems = [
  { label: "群名称", required: true, key: "name", type: "text" },
  { label: "成员数量", required: true, key: "fakeMemberNum", type: "number" },
  { label: "加入群聊价格", required: true, key: "price", type: "number" },
  { label: "简介", key: "summary", type: "textarea" },
  { label: "封面", key: "cover", type: "image" },
  {
    label: "状态",
    key: "status",
    type: "select",
    options: [
      { label: "可用", value: 1 },
      { label: "不可用", value: 0 },
    ],
  },
];

export default {
  name: "UpdateGroupChat",
  emit: ["close"],
  components: { ConfigForms },
  data() {
    return {
      visible: false,
      formItems,
      formData: null,
    };
  },
  watch: {},
  computed: {
    isEdit() {
      return !!this.formData;
    },
    title() {
      return this.isEdit ? "修改" : "新增";
    },
  },
  created() {},
  methods: {
    close() {
      this.visible = false;
    },
    open(row) {
      this.formData = null;
      if (row) {
        this.formData = row;
      }
      this.visible = true;
    },
    async sure() {
      try {
        const form = await this.$refs.form.validate();
        const data = { ...form };
        // 修改
        if (this.isEdit) {
          this.update(data);
        } else {
          // 新增
          this.addHandle(data);
        }
      } catch (error) {
        console.error("sure error:", error);
      }
    },
    async addHandle(data) {
      try {
        const res = await API.createImgroup(data);
        if (res.code === 200) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.close();
          this.$emit('success');
        } else {
          this.$message.error("新增失败！");
        }
      }catch(err) {
        console.log("add: ", err);
      }
    },
    async update(data) {
      try {
        const res = await API.updateImgroup(data);
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.close();
          this.$emit('success');
        } else {
          this.$message.error("修改失败！");
        }
      } catch (err) {
        console.log("update: ", err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.updateGroupChat {
  ::v-deep .el-date-editor.el-input {
    width: 200px;
  }
}
</style>