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

<script>
import { save, show } from "@/api/system/baseForm";
import { getparameter } from "@/api/system/dictionary";
export default {
  props: {
    formInfo: {
      type: Array,
      default: () => [],
    },
    tableName: String
  },
  render(h) {
    let domMap = new Map([
      ['text', 'el-input'],
      ['textarea', 'el-input'],
      ['checkbox', 'el-select'],
      ['date', 'el-date-picker'],
      ['datetime', 'el-time-select']
    ])
    let typeMap = new Map([
      ['text', ''],
      ['textarea', 'textarea'],
      ['checkbox', ''],
      ['date', 'date'],
      ['datetime', '']
    ])
    return h(
      "el-dialog",
      {
        props: {
          title: "新增",
          visible: this.dialogVisible,
          width: "30%",
        },
        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"
            },
          },
          this.formInfo.map((i,index) => {
            return h("el-form-item",{
              ref: `elFormItem${i.field}`,
              props: {
                label: i.name,
                prop: i.field
              }
            },[
              h(domMap.get(i.edit_input),{
                props: {
                  value: this.form[i.field],
                  type: typeMap.get(i.edit_input),
                  placeholder: `请填写${i.name}`,
                  valueFormat: (() => {
                    if(i.edit_input === 'date') {
                      return 'yyyy-MM-dd'
                    }
                  })(),
                },
                attrs: {
                  placeholder: `请填写${i.name}`
                },
                on: {
                  ['input']:e => {
                    if(i.field) {
                      this.form[i.field] = e
                      this.form = Object.assign({}, this.form)
                    }
                  }
                }
              },(i.edit_input === 'checkbox' && i.paramters) ? i.paramters.map(param => {
                return h('el-option',{
                  props: {
                    label: param.value,
                    value: param.id,
                    key: param.id
                  }
                })
              }) : '')
            ])
          })
        ),
        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: {
    init() {
      for(let key in this.form) {
        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) {
          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] = "";
            this.rules[i.field] = [{ required:true,message: `请填写${i.name}` }]

            if(i.edit_input === 'checkbox' && i.parameter_id) {
              getparameter({ id: i.parameter_id }).then(res => {
                i.paramters = res.detail ?? []
              })
            }
          }
        })
      },
      //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>