green-valley-admin/src/components/Page/PageEdit.vue

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 编辑 -->
    <a-modal :closable="false" footer title="修改页面" v-model="editVisible" width="700px">
      <a-form :form="form" @submit="handleSubmit">
        <!-- 标题code -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="标题"
          v-model="edtiTitleCode"
        >
          <a-cascader :options="titles" :placeholder="titleCode" @change="onChange" />
        </a-form-item>
        <a-cascader :options="titles" @change="onChange" placeholder="标题" />
        <!-- 内容 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="内容"
        >
          <quill-editor
            :max-size="maxSize"
            :value="editItem && (editItem.content ? editItem.content : '')"
            @changeInput="changeInput"
          />
        </a-form-item>

        <a-form-item class="d-flex flex-row-reverse">
          <a-button @click="closeModal" class="mr-3">取消</a-button>
          <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { updatePage } from 'config/api';
import QuillEditor from 'components/QuillEditor/QuillEditor.vue';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };

export default {
  name: 'PageEdit',
  props: { editVisible: { type: Boolean, default: false }, editItem: { type: Object, default: () => {} } },
  components: { QuillEditor },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'r-d-add' }),
      maxSize: 2048,
      content: '',
      titleCode: '',
      edtiTitleCode: '',
    };
  },

  computed: {
    ...mapState(['titles']),
  },

  watch: {
    editVisible(value) {
      if (value === true && this.editItem && this.editItem.titleCode) {
        this.titleCode = this.editItem.titleCode.replace(/-/g, ' / ');
      }
    },
  },

  methods: {
    // 修改内容
    changeInput(value) {
      this.content = value;
    },

    onChange(value) {
      if (value.length > 1) {
        this.edtiTitleCode = `${value[0]}-${value[1]}`;
      } else {
        this.edtiTitleCode = `${value[0]}`;
      }
    },

    closeModal() {
      this.edtiTitleCode = '';
      this.$emit('closeModal');
    },

    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            const { content, editItem, edtiTitleCode } = this;
            const params = { param: { content, id: editItem.id, titleCode: edtiTitleCode || editItem.titleCode } };
            const res = await updatePage(params);
            const { data, msg, code } = res.data;
            if (code === 200) {
              this.$message.success('修改成功');
              this.$emit('closeModal');
              this.edtiTitleCode = '';
              this.content = '';
            } else {
              throw msg;
            }
          } catch (error) {
            this.$message.error(error || '修改失败');
          }
        }
      });
    },
  },
};
</script>

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