spfm-market-front/src/components/p-form.vue

<template>
  <div class="form-box">
    <div class="inner-box">
      <el-form
        :model="formData"
        :ref="form.formName"
        class="demo-dynamic"
        :label-width="form.labelWidth"
        :style="form.formStyle"
      >
        <el-form-item
          v-for="(item, index) in form.body"
          :label="item.label"
          :key="index"
          :rules="item.rules"
          :prop="item.value"
        >
          <el-input
            style="display: inline-block"
            v-if="item.el == 'input'"
            v-model="formData[item.value]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :clearable="item.clearable"
          ></el-input>
          <el-checkbox-group
            v-else-if="item.el == 'checkbox'"
            :placeholder="item.placeholder"
            v-model="formData[item.value]"
            :disabled="item.disabled"
            :clearable="item.clearable"
          >
            <el-checkbox
              v-for="items in item.options"
              :label="items.label"
              :key="items.value"
              >{{ items.label }}</el-checkbox
            >
          </el-checkbox-group>

          <el-select
            v-else-if="item.el == 'select'"
            v-model="formData[item.value]"
            :placeholder="item.placeholder"
            :multiple="item.multiple || false"
            filterable 
            style="width: 100%"
            :clearable="item.clearable"
          >
            <el-option
              v-for="items in item.options"
              :key="items.value"
              :label="items.label"
              :value="items.value"
              :disabled="items.disabled"
            >
            </el-option>
          </el-select>
          <el-switch
            v-else-if="item.el == 'switch'"
            v-model="formData[item.value]"
          ></el-switch>
          <el-radio-group
            v-else-if="item.el == 'radio'"
            v-model="formData[item.value]"
            :clearable="item.clearable"
          >
            <el-radio
              v-for="items in item.options"
              :key="items.value"
              :label="items.value"
              :disabled="items.disabled"
              >{{ items.label }}</el-radio
            >
          </el-radio-group>
          <el-date-picker
            v-else-if="item.el == 'datetime'"
            style="width:100% !important"
            v-model="formData[item.value]"
            :placeholder="item.placeholder"
            value-format="YYYY-MM-DD"
            type="datetime"
          ></el-date-picker>
          <el-input
            v-else-if="item.el == 'password'"
            v-model="formData[item.value]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :type="inputType"
          >
            <template slot="suffix">
              <el-tooltip
                class="item"
                effect="dark"
                content="点击查看密码"
                placement="top-start"
              >
                <i
                  @click="changeView"
                  :class="
                    inputType == 'text'
                      ? 'el-input__icon el-icon-success'
                      : 'el-input__icon el-icon-view'
                  "
                ></i>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="form.action" style="text-align: right;">
          <el-button type="primary" @click="submitForm(form.formName)"
            >{{form.subBtn}}</el-button
          >
          <el-button @click="resetForm(form.formName)">{{form.restBtn}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// form: {
//         initUrl: "/sysmgr/sys/login/addInit", // 初始化接口
//         url: "/market/cfgDataDict/queryList", // 提交接口
//         id: "", // 编辑时用的id 由初始化时获取
//         type: "post", // 请求方式
//         params: "", // get请求桉树
//         events: function () {
//           // 回调方法
//           $vm.$router.push("/leader");
//         },
//         data: {
//           // post请求参数
//           groupId: "",
//           groupName: "",
//           loginNameStr: "",
//           loginNoStr: "",
//           loginPasswd: "",
//           tenantId: null,
//         },
//         body: [
//           // 渲染表单
//           {
//             el: "input", //  dom类型
//             placeholder: "请输入", // 提示语
//             label: "输入框", // 表单title
//             value: "loginNoStr", // 表单model绑定的值
//             rules: [
//               // 校验
//               { required: true, message: "请输入工号", trigger: "blur" },
//             ],
//           },
//           {
//             el: "checkbox", // input radio checkbox select datePicker timePicker switch
//             placeholder: "请输入",
//             label: "复选框",
//             value: "checkbox",
//             rules: [
//               { required: true, message: "请输入邮箱地址", trigger: "blur" },
//             ],
//             options: [
//               {
//                 label: "选项1",
//                 value: "1",
//                 disabled: false,
//               },
//               {
//                 label: "选项2",
//                 value: "2",
//                 disabled: false,
//               },
//             ],
//           },
//           {
//             el: "select", // input radio checkbox select datePicker timePicker switch
//             placeholder: "请输入",
//             value: "select",
//             label: "下拉框",
//             rules: [
//               { required: true, message: "请输入邮箱地址", trigger: "blur" },
//             ],
//             options: [
//               {
//                 label: "选项1",
//                 value: "1",
//                 disabled: false,
//               },
//               {
//                 label: "选项2",
//                 value: "2",
//                 disabled: false,
//               },
//             ],
//           },
//           {
//             el: "switch", // input radio checkbox select datePicker timePicker switch
//             placeholder: "请输入",
//             value: "switch",
//             label: "switch",
//             rules: [
//               { required: true, message: "请输入邮箱地址", trigger: "blur" },
//             ],
//           },
//           {
//             el: "radio", // input radio checkbox select datePicker timePicker switch
//             placeholder: "请输入",
//             label: "单选框",
//             value: "radio",
//             rules: [
//               { required: true, message: "请输入邮箱地址", trigger: "blur" },
//             ],
//             options: [
//               {
//                 label: "选项1",
//                 value: "1",
//                 disabled: false,
//               },
//               {
//                 label: "选项2",
//                 value: "2",
//                 disabled: false,
//               },
//             ],
//           },
//         ],
//       },
export default {
  props: {
    formData: {
      required: true,
      type: Object,
    },
    form: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {
      inputType: "password",
    };
  },
  methods: {
    changeView() {
      if (this.inputType == "password") {
        this.inputType = "text";
      } else {
        this.inputType = "password";
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let config = {
            url: this.form.url,
            method: this.form.type,
          };
          if (this.form.type == "post") {
            config.headers = {
              "Content-Type": "application/json",
            };
            config.data = this.formData;
          } else {
            config = {
              url: this.form.url,
              method: this.form.type,
              params: this.form.params,
            };
          }
          this.$http(config).then((res) => {
            if (res.data.result == 0) {
              this.$notify({
                title: "成功",
                message: res.data.desc,
                type: "success",
              });
              this.form.events();
              this.$emit("closeDialog");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.form.body.map((item) => {
        item.disabled = false;
      });
      this.$refs[formName].resetFields();
      this.$emit("closeDialog");
    },
    initData() {
      this.$http({
        url: this.form.initUrl,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.form.data,
      }).then((res) => {
        console.log(res);
      });
    },
  },
  mounted() {
    // this.initData();
  },
};
</script>