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.filter(i => i.form_show).forEach((i, index) => {
              dom.push(
                h(
                  "el-form-item",
                  {
                    ref: `elFormItem${i.field}`,
                    style: {
                      width: "100%",
                    },
                    props: {
                      label: i.name,
                      prop: i.field,
                      required:
                        i.validation instanceof Array
                          ? !!i.validation.find((i) => i === "required")
                          : false,
                    },
                  },
                  this.$scopedSlots[i.field]
                    ? this.$scopedSlots[i.field]({ fieldInfo: i, form: this.form })
                    : [
                      h(
                        domMap.get(i.edit_input),
                        {
                          ref: `elEdit_${i.field}`,
                          style: {
                            width: "100%",
                          },
                          props: {
                            ...addPropsMap.get(i.edit_input),
                            ...this.extraProps(i),
                            placeholder: i.help,
                            value: this.form[i.field],
                          },
                          attrs: {
                            placeholder: i.help || `请填写${i.name}`,
                          },
                          on: {
                            [this.getEventType(i.edit_input)]: (e) => {
                              if (i.field) {
                                this.form[i.field] = e;
                                this.form = Object.assign({}, this.form);
                              }
                            },
                          },
                          scopedSlots:
                            i.edit_input === "file" ||
                            i.edit_input === "files"
                              ? {
                                file: (scope) => {
                                  let { file } = scope;
                                  return [
                                    h("div", {}, [
                                      h("i", {
                                        class: {
                                          "el-icon-circle-check":
                                            file.status === "success",
                                          "el-icon-loading":
                                            file.status === "uploading",
                                        },
                                        style: {
                                          color:
                                            file.status === "success"
                                              ? "green"
                                              : "",
                                        },
                                      }),
                                      h(
                                        "a",
                                        {
                                          attrs: {
                                            href: file.url,
                                            download: file.name,
                                          },
                                          class: {
                                            "uploaded-a":
                                              file.status === "success",
                                          },
                                          style: {
                                            'padding': '0 4px'
                                          },
                                        },
                                        file.name
                                      ),
                                    ]),
                                    h("i", {
                                      class: "el-icon-close",
                                      on: {
                                        ["click"]: () =>
                                          this.fileRemoveHandler(
                                            file,
                                            i.field
                                          ),
                                      },
                                    }),
                                  ];
                                },
                              }
                              : "",
                        },
                        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: {},
      file: {},
    };
  },
  methods: {
    fileRemoveHandler(file, field) {
      this.file[field] = this.file[field].filter((item) => item !== file);
      this.file = Object.assign({}, this.file);
    },
    //on事件类别获取
    getEventType(info) {
      if (info === "checkbox") {
        return "change";
      }
      return "input";
    },

    //渲染一些组件内部需要选项等
    optionsRender(h, info) {
      if (info.edit_input === "checkbox" || info.edit_input === "radio") {
        return info._params && info._params instanceof Array
          ? info._params.map((i) =>
              h("el-option", {
                props: {
                  label:  i.key || i.value || i.name || i.no || i.mingcheng || i.id,
                  value: info._relations ? i[info._relations.foreign_key] : i.value,
                },
              })
            )
          : [];
      }
      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.fileList = this.file[info.field];
        props.beforeUpload = (file) => {
          if (file.size / 1000 > 500) {
            this.$message({
              type: "warning",
              message: "上传图片大小超过500kb！",
            });
            return false;
          }
        };

        props.onSuccess = (response, file, fileList) => {
          this.file[info.field] = fileList;
        };

        props.onRemove = (file, fileList) => {
          this.file[info.field] = fileList;
        };

        props.onError = (err, file, fileList) => {
          this.file[info.field] = fileList;
          this.$message({
            type: "warning",
            message: err,
          });
        };
      }
      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);

      this.formInfo.forEach((i) => {
        if (i && (i.edit_input === "file" || i.edit_input === 'files')) {
          res[i._relations.link_with_name] ? (
            this.file[i.field] =  res[i._relations.link_with_name] instanceof Array ? res[i._relations.link_with_name].map(i => {
              return {
                name: i?.original_name,
                url: i?.url,
                response: i
              }
            }) : [{
              name: res[i._relations.link_with_name]?.original_name,
              url: res[i._relations.link_with_name]?.url,
              response: res[i._relations.link_with_name]
            }]
          ) : this.file[i.field] = []

        }
      });
    },

    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] = this.file[info.field].map(
                (i) => i?.response?.id
              );
            }
            if (info.edit_input === "file") {
              this.form[info.field] = this.file[info.field][0]?.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 = {};
        this.file = {};
        newVal.forEach((i) => {
          if (i.field) {
            this.form[i.field] = "";
            if (
              i.validation instanceof Array &&
              i.validation.length > 0 &&
              !!i.validation.find((i) => i === "required")
            ) {
              this.rules[i.field] = [
                { required: true, message: `请填写${i.name}` },
              ];
            }
            if (i.edit_input === "files") {
              this.form[i.field] = [];
            }
            if (i.edit_input === "files" || i.edit_input === "file") {
              this.file[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.file = {};
        this.id = "";
        this.type = "";
        this.init();
        this.$refs["elForm"].clearValidate();
        delete this.form.id;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.uploaded-a {
  color: red;
  text-decoration: none;
  transition: all 0.2s;
}

.uploaded-a:hover {
  color: red;
  text-decoration: underline;
}
</style>