dali-ms/src/pages/leaveMessage/guide.vue

<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData">
      <div slot="con"></div>
    </main-top>
    <div class="table-interface">
      <div class="top-body" style="padding: 50px 20px">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="100px"
          class="demo-ruleForm"
        >
        <el-row>
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <vue-editor class="quill-editor" v-model="form.content" />
          </el-form-item>
        </el-col>
      </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
const crumbData = [
  {
    name: "参观指南",
    id: 3,
  },
];
import MainTop from "@/components/main-top";
import * as common from "@/util/commonfn.js";
import { VueEditor} from "vue2-editor";
export default {
  components: {
    MainTop,
    VueEditor
  },
  data() {
    return {
      crumbData,
      form: {},
      rules: {
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      token: window.localStorage.getItem("token"),
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  created() {
      this.getDetail()
  },
  methods: {
    async getDetail() {
      let result = await this.$http({
        method: "get",
        url: "/manage/guide/detail/4",
      });
      if(result['code'] === 0){
        this["form"] = result['data'];
      } else {
        this["form"] = {}
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.save();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async save() {
      let data = this["form"];
      let result = await this.$http({
        method: "post",
        data,
        url: "/manage/guide/save"
      });
      if(result['code'] === 0) {
          common.tip('success','保存成功');
          this.getDetail()
      } else {
        common.tip('error','保存失败，请联系管理员');
      }
    }
  }
};
</script>

<style scoped>
.table-interface {
  height: calc(100% - 3rem);
  overflow: auto;
}
.top-body {
  border-top: 0.0625rem solid #e6e6e6;
  line-height: 1.5;
  padding: 0 1.25rem 1.25rem;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
  margin: 1rem 0;
}
.info-top {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px #a5a5a5 solid;
}
</style>

<style>

.ck-content { height:500px; }
</style>