sz-kjsxy-web/src/views/coursePlan/components/addLocation.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :width="45"
      :is-show.sync="isShow"
      :type="'form'"
      :title="type === 'add' ? '新增地点' : '编辑地点'"
      :form="form"
      :rules="rules"
      @submit="submit"
    >
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red; font-weight: bold; padding-right: 4px;">*</span>地点名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入地点名称" clearable style="width: 100%;" />
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">详细地址：</div>
          <div class="xy-table-item-content">
            <el-input
              v-model="form.address"
              type="textarea"
              :rows="3"
              placeholder="请输入详细地址"
              style="width: 100%;"
            />
          </div>
        </div>
      </template>
      <template v-slot:sort>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">排序：</div>
          <div class="xy-table-item-content">
            <el-input-number v-model="form.sort" :min="0" :precision="0" style="width: 100%;" />
          </div>
        </div>
      </template>
      <template v-slot:status>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">状态：</div>
          <div class="xy-table-item-content">
            <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%;">
              <el-option v-for="item in types_status" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">备注：</div>
          <div class="xy-table-item-content">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
              style="width: 100%;"
            />
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import myMixins from "@/mixin/selectMixin.js";
import { showMockLocation as show, saveMockLocation as save } from "../mockService.js";

const getDefaultForm = () => ({
  name: "",
  address: "",
  sort: 0,
  status: 1,
  remark: "",
});

export default {
  mixins: [myMixins],
  data() {
    return {
      isShow: false,
      type: "add",
      id: "",
      form: getDefaultForm(),
      rules: {
        name: [{
          required: true,
          message: "请输入地点名称",
        }],
      },
    };
  },
  methods: {
    submit() {
      const payload = {
        ...this.form,
        id: this.type === "editor" ? this.id : "",
      };
      save(payload).then(() => {
        this.$message({
          type: "success",
          message: this.type === "add" ? "新增成功" : "编辑成功",
        });
        this.isShow = false;
        this.$emit("refresh");
      });
    },
    getDetail() {
      show({ id: this.id }).then((res) => {
        this.form = {
          name: res.name || "",
          address: res.address || "",
          sort: res.sort || 0,
          status: res.status === 0 ? 0 : (res.status || 1),
          remark: res.remark || "",
        };
      });
    },
    resetForm() {
      this.id = "";
      this.form = getDefaultForm();
      this.$refs.dialog.reset();
    },
  },
  watch: {
    isShow(newVal) {
      if (newVal) {
        if (this.type === "editor" && this.id) {
          this.getDetail();
        }
      } else if (this.$refs.dialog) {
        this.resetForm();
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .name,
::v-deep .address,
::v-deep .sort,
::v-deep .status,
::v-deep .remark {
  flex-basis: 100%;
}
</style>