wxjt-asset-web/src/views/component/dialog.vue

<script>
import { save, show, index } from "@/api/system/baseForm";
import { getparameter } from "@/api/system/dictionary";
import { domMap } from "@/const/inputType";
import { addPropsMap } from "@/const/addProps";
export default {
  props: {
    formInfo: {
      type: Array,
      default: () => [],
    },
    tableName: String,
  },
  render(h) {
    return h(
      "el-dialog",
      {
        props: {
          title: "新增",
          visible: this.dialogVisible,
          width: "600px",
        },
        on: {
          "update:visible": (val) => {
            this.dialogVisible = val;
          },
        },
      },
      [
        h(
          "el-form",
          {
            ref: "elForm",
            props: {
              model: this.form,
              labelWidth: "80px",
              rules: this.rules,
              labelPosition: "right",
              size: "small",
            },
          },
          (() => {
            let dom = [];
            this.formInfo.forEach((i, index) => {
              if (i.list_show) {
                dom.push(
                  h(
                    "el-form-item",
                    {
                      ref: `elFormItem${i.field}`,
                      style: {
                        width: "100%",
                      },
                      props: {
                        label: i.name,
                        prop: i.field,
                      },
                    },
                    [
                      h(
                        domMap.get(i.edit_input),
                        {
                          ref: `elEdit_${i.field}`,
                          props: {
                            ...addPropsMap.get(i.edit_input),
                            ...this.extraProps(i.edit_input),
                            placeholder: i.help,
                            value: this.form[i.field],
                          },
                          attrs: {
                            placeholder: i.help || `请填写${i.name}`,
                          },
                          on: {
                            [this.getEventType(i.edit_input)]: (e) => {
                              console.log(1111, e);
                              if (i.field) {
                                this.form[i.field] = e;
                                this.form = Object.assign({}, this.form);
                              }
                            },
                          },
                        },
                        this.optionsRender(h, i)
                      ),
                    ]
                  )
                );
              }
            });
            return dom;
          })()
        ),
        h("template", { slot: "footer" }, [
          h(
            "el-button",
            {
              on: {
                click: () => (this.dialogVisible = false),
              },
            },
            "取 消"
          ),
          h(
            "el-button",
            {
              props: {
                type: "warning",
                plain: true,
              },
              on: {
                click: () => this.init(),
              },
            },
            "重 置"
          ),
          h(
            "el-button",
            {
              props: {
                type: "primary",
              },
              on: {
                click: this.submit,
              },
            },
            "确 定"
          ),
        ]),
      ]
    );
  },
  data() {
    return {
      id: "",
      type: "add",
      dialogVisible: false,
      form: {},
      rules: {},
    };
  },
  methods: {
    //on事件类别获取
    getEventType(info) {
      if (info.type === "checkbox") {
        return "change";
      }
      return "input";
    },

    //渲染一些组件内部需要选项等
    optionsRender(h, info) {
      if (info.edit_input === "radio") {
        return info._paramters && info._paramters instanceof Array
          ? info._paramters.map((i) =>
              h(
                "el-radio",
                { props: { label: i.id } },
                i.name || i.no || i.value || i.id
              )
            )
          : [];
      }
      if (info.edit_input === "checkbox") {
        return info._paramters && info._paramters instanceof Array
          ? info._paramters.map((i) =>
              h(
                "el-checkbox",
                { props: { label: i.id } },
                i.name || i.no || i.value || i.id
              )
            )
          : [];
      }
      if (info.edit_input === "file" || info.edit_input === "files") {
        return [
          h(
            "el-button",
            {
              slot: "trigger",
              props: {
                size: "small",
                type: "primary",
              },
            },
            "选取文件"
          ),
          h(
            "el-button",
            {
              style: {
                "margin-left": "10px",
              },
              props: {
                size: "small",
                type: "success",
              },
              on: {
                ["click"]: (e) => {
                  this.$refs[`elEdit_${info.field}`].submit();
                },
              },
            },
            "上传到服务器"
          ),
          h(
            "div",
            {
              class: "el-upload__tip",
              slot: "tip",
            },
            "文件不超过500kb"
          ),
        ];
      }
    },

    extraProps(info) {
      let props = {};
      if (info.edit_input === "file" || info.edit_input === "files") {
        props.beforeUpload = (file) => {
          if (file.size / 1000 > 500) {
            this.$message({
              type: "warning",
              message: "上传图片大小超过500kb！",
            });
            return false;
          }
        };

        props.onSuccess = (response, file, fileList) => {
          info._fileList = fileList;
        };

        props.onRemove = (file, fileList) => {
          info._fileList = fileList;
        };
      }
      return props;
    },

    init() {
      for (let key in this.form) {
        if (this.form[key] instanceof Array) {
          this.form[key] = [];
        } else {
          this.form[key] = "";
        }
      }
      this.$refs["elForm"].clearValidate();
    },
    show() {
      this.dialogVisible = true;
    },
    hidden() {
      this.dialogVisible = false;
    },
    setType(type = "add") {
      let types = ["add", "editor"];
      if (types.includes(type)) {
        this.type = type;
      } else {
        console.warn("Unknown type: " + type);
      }
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },

    async getDetail() {
      const res = await show({ id: this.id, table_name: this.tableName });
      this.$integrateData(this.form, res);
      this.form = Object.assign({}, this.form);
    },

    submit() {
      if (this.type === "add") {
        if (this.form.hasOwnProperty("id")) {
          delete this.form.id;
        }
      }
      if (this.type === "editor") {
        Object.defineProperty(this.form, "id", {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true,
        });
      }
      this.$refs["elForm"].validate((validate) => {
        if (validate) {
          this.formInfo.forEach((info) => {
            if (info.edit_input === "files") {
              this.form[info.field] = info._fileList.map(
                (i) => i?.response?.id
              );
            }
          });
          console.log(this.form);
          save(Object.assign(this.form, { table_name: this.tableName })).then(
            (res) => {
              this.$Message.success({
                content: `${this.type === "add" ? "新增" : "编辑"}成功`,
              });
              this.$emit("refresh");
              this.hidden();
            }
          );
        }
      });
    },
  },
  computed: {},
  watch: {
    formInfo: {
      handler: function (newVal) {
        this.form = {};
        this.rules = {};
        newVal.forEach((i) => {
          if (i.field) {
            this.form[i.field] = "";
            if (i.validation instanceof Array && i.validation.length > 0) {
              this.rules[i.field] = [
                { required: true, message: `请填写${i.name}` },
              ];
            }
            if (i.edit_input === "file" || i.edit_input === "files") {
              this.form[i.field] = [];
            }
            if (i.edit_input === "checkbox") {
              this.form[i.field] = [];
            }
          }
        });
      },
      //immediate: true,
    },
    dialogVisible(val) {
      if (val) {
        if (this.type === "editor") {
          this.$nextTick(() => this.getDetail());
        }
      } else {
        this.id = "";
        this.type = "";
        this.init();
        this.$refs["elForm"].clearValidate();
        delete this.form.id;
      }
    },
  },
};
</script>

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