tjshop/shop/static/manager/src.b/components/page/EditLabel.vue

<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="标签名称">
      <el-input v-model="form.name" size="mini"></el-input>
    </el-form-item>
    <el-form-item label="顺序号">
      <el-input v-model="form.sort" type="number" size="mini"></el-input>
    </el-form-item>
    <el-form-item label="标签状态">
      <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save" size="mini">保存</el-button>
      <el-button @click="goBack" size="mini">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        id: 0,
        name: "",
        sort: 0,
        status: true
      },
      saveLabel: null,
      getLabel: null,
      onCloseRouter: null
    };
  },
  methods: {
    save: function() {
      var that = this;
      console.log(this.$http.getNewLabel, this.$http[this.saveLabel], [
        this.saveLabel
      ]);
      this.$http[this.saveLabel](
        {
          id: this.form.id,
          name: this.form.name,
          sort: this.form.sort,
          status: this.form.status ? 1 : 0
        },
        this
      ).then(res => {
        if (res.code === 0) {
          const onCloseRouter = this.onCloseRouter;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1000,
            onClose: function() {
              that.$router.push(onCloseRouter);
            }
          });
        }
      });
    },
    goBack: function() {
      this.$router.back();
    }
  },
  mounted: function() {
    console.log(this.$route.query);
    const id = this.$route.query.id;
    const type = this.$route.query.type;
    if (type === "new") {
      this.getLabel = "getNewLabel";
      this.saveLabel = "saveNewLabel";
      this.onCloseRouter = "/newLabelManager";
    } else {
      this.getLabel = "getLabel";
      this.saveLabel = "saveLabel";
      this.onCloseRouter = "/sysLabelManager";
    }
    this.form.id = id;
    if (id === 0) {
      return;
    }
    this.$http[this.getLabel]({ id: id }, this).then(res => {
      if (res.code === 0) {
        this.form.name = res.obj.name;
        this.form.status = res.obj.status === 1;
        this.form.sort = res.obj.sort;
      }
    });
  }
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0px;
}
</style>