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

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 添加 -->
    <a-modal :closable="false" footer title="添加页面" v-model="visible" width="700px">
      <a-form :form="form" @submit="handleSubmit">
        <!-- 标题code -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="标题"
        >
          <a-cascader
            :options="titles"
            placeholder="标题"
            v-decorator="['titleCode',{
                        rules: [
                          { required: true, message: '标题不能为空' },
                        ],
                      }]"
          />
        </a-form-item>
        <!-- 内容 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="内容"
        >
          <quill-editor
            :options="editorOption"
            class="editor"
            placeholder="请在此输入文本..."
            v-model="content"
          ></quill-editor>
        </a-form-item>

        <a-form-item class="d-flex flex-row-reverse">
          <a-button @click="$emit('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 { addPage } from 'config/api';
import { quillEditor } from 'vue-quill-editor';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };
export default {
  name: 'PageAdd',
  props: { visible: { type: Boolean, default: false } },
  components: {
    quillEditor, // 富文本编辑器
  },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'page-add' }),
      editorOption: {
        placeholder: '请在此输入文本...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image'],
          ],
        },
      },
      content: '',
    };
  },

  computed: mapState(['titles']),

  methods: {
    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            if (values.titleCode.length > 1) {
              values.titleCode = `${values.titleCode[0]}-${values.titleCode[1]}`;
            } else {
              values.titleCode = `${values.titleCode[0]}`;
            }
            const param = values;
            param.content = this.content;
            const params = { param };
            console.log('params: ', params);
            const res = await addPage(params);
            const { data, msg, code } = res.data;
            if (code === 200) {
              this.$message.success('添加成功');
              this.$emit('closeModal');
            } else {
              throw msg;
            }
          } catch (error) {
            this.$message.error(error || '添加失败');
          }
        }
      });
    },
  },
};
</script>

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