drp-ui/src/views/marketing/dealer-authorization/add/index.vue

<script>
import useColumns from "./columns";
import dealerApi from "@/api/marketing/dealer-authorization";
export default {
  name: "authprivAdd",
  props: {
    dict: {
      type: Object,
    },
  },
  components: {
    ElSuperForm: () => import("@/components/super-form/index.vue"),
  },
  data() {
    const { FormColumns } = useColumns();
    const rules = this.$init.rules([...FormColumns]);
    const params = this.$init.params(FormColumns);
    return {
      visible: false,
      loading: false,
      FormColumns: FormColumns,
      params: params,
      rules: rules,
      width: "500px",
      option: "add",
    };
  },
  computed: {
    title: {
      get() {
        if (this.option === "edit") {
          return "编 辑";
        } else if (this.option === "check") {
          return "查 看";
        } else {
          return "新 增";
        }
      },
      set() {},
    },
    disabled: {
      get() {
        if (this.option === "check") return true;
        return false;
      },
      set() {},
    },
  },
  methods: {
    // 控制弹窗展示
    setVisible(val) {
      this.visible = val;
    },
    setFormData(data, op) {
      this.option = op;
      if (data.id) {
        this.loading = true;

        this.params = {
          ...data,

          time: [data.startTime, data.endTime],
        };

        setTimeout(() => {
          this.loading = false;
        }, 250);

        return;
      }
    },
    // 取消
    handleCancel() {
      this.params = this.$init.params(this.FormColumns);
      this.$refs["authprivAdd"].resetFields();
      this.setVisible(false);
      this.$emit("close");
    },
    // 确定
    handleConfirm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 校验通过
          let isTime =
            this.params.time &&
            this.params.time != "" &&
            this.params.time.length;

          // name:工号   nickName:名字
          const { name, nickName } = this.$store.state.user;

          let params = {
            ...this.params,
            startTime: isTime ? this.params.time[0] : "",
            endTime: isTime ? this.params.time[1] : "",
            updatePerson: nickName,
            updateBy: name,
            updateTime: new Date().Format(),
            ...(this.option === "add"
              ? {
                  status: "0",
                  createPerson: nickName,
                  createBy: name,
                  createTime: new Date().Format(),
                }
              : {}),
          };
          delete params["time"];

          try {
            this.loading = true;
            let { code, msg } = await (this.option === "add"
              ? dealerApi.insert(params)
              : dealerApi.update(params));

            if (code === 200) {
              this.handleCancel();
            }
          } catch (error) {
            console.log(error, "error");
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<template>
  <el-dialog
    :width="width"
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleCancel"
  >
    <el-super-form
      v-model="params"
      :dict="dict"
      :rules="rules"
      :size="$attrs.size"
      :disabled="disabled"
      :columns="FormColumns"
      ref="authprivAdd"
      label-width="auto"
      label-position="right"
      style="padding: 20px"
    >
    </el-super-form>
    <div slot="footer" v-if="this.option !== 'check'">
      <el-button
        type="primary"
        :size="$attrs.size"
        @click="handleConfirm('authprivAdd')"
        >确 定</el-button
      >
      <el-button :size="$attrs.size" @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
>>> .el-dialog__body {
  padding: 0px 20px;
}

::v-deep.superForm .el-form-item {
  margin: 0 0 16px !important;
}
</style>