ol-base-components 2.5.1 → 2.7.0

package/src/package/form/src/index.vue

@@ -0,0 +1,396 @@
+<template>
+  <div>
+    <el-form
+      ref="formRef"
+      :model="form.value"
+      :rules="form.rules"
+      style="display: flex; flex-wrap: wrap"
+      v-bind="{
+        labelWidth: '130px',
+        disabled: !form.type,
+        ...$attrs,
+        ...form.attrs,
+      }"
+      v-on="$listeners"
+    >
+      <template v-for="(item, index) in form.model">
+        <el-form-item
+          v-if="!item.hidden"
+          :key="index"
+          :label="item.label"
+          :prop="item.prop"
+          :required="item.required || false"
+          :style="{ width: width(item) }"
+        >
+          <el-input
+            v-if="item.type == 'input'"
+            v-model="form.value[item.prop]"
+            :placeholder="
+              item.readonly
+                ? item.placeholder || item.label
+                : `请输入${item.placeholder || item.label}`
+            "
+            :clearable="item.clearable || true"
+            :readonly="item.readonly || false"
+            :show-password="item.showPassword || false"
+            v-bind="{
+              ...item.props,
+              disabled: inputDisabled(item),
+            }"
+          />
+          <el-input-number
+            v-else-if="item.type == 'number'"
+            v-model="form.value[item.prop]"
+            :placeholder="`请输入${item.placeholder || item.label}`"
+            :clearable="item.clearable || true"
+            :readonly="item.readonly || false"
+            v-bind="{ min: 0, ...item.props }"
+          />
+          <el-input
+            v-else-if="item.type == 'textarea'"
+            v-model="form.value[item.prop]"
+            type="textarea"
+            :placeholder="`请输入${item.placeholder || item.label}`"
+            :autosize="item.autosize"
+            :readonly="item.readonly || false"
+            :clearable="item.clearable || true"
+            :maxlength="item.length || ''"
+          />
+          <el-switch
+            v-else-if="item.type == 'switch'"
+            v-model="form.value[item.prop]"
+            class="switchStyle"
+            active-text="启用"
+            inactive-text="禁用"
+            v-bind="item.props || {}"
+          />
+          <el-radio-group v-else-if="item.type == 'radio'" v-model="form.value[item.prop]">
+            <el-radio v-for="ctem in item.child" :key="ctem.key" :label="ctem.key">{{
+              ctem.value
+            }}</el-radio>
+          </el-radio-group>
+          <!-- v-bind="item.props || { type: 'date' }" -->
+          <el-date-picker
+            v-else-if="item.type == 'date'"
+            v-model="form.value[item.prop]"
+            :placeholder="item.placeholder || '请选择日期'"
+            style="width: 100%"
+            v-bind="{ type: 'date', ...item.props }"
+            :clearable="item.clearable || true"
+            v-on="{
+              ...item.listeners,
+              change: event => changeHandle(event, item),
+            }"
+          />
+          <Tree-select
+            v-else-if="item.type == 'treeSelect'"
+            v-model="form.value[item.prop]"
+            v-bind="item.props || {}"
+            :options="item.child"
+            @getValue="item.change && item.change(form.value[item.prop])"
+          />
+          <!-- <el-select v-else-if="item.type == 'select'" v-model="form.value[item.prop]"
+                  :placeholder="`请选择${item.placeholder || item.label}`"
+                  :clearable="'clearable' in item ? item.clearable : true" :disabled="item.disabled || false"
+                  v-bind="item.props || {}" v-on="{ ...item.listeners, change: selectChangeHandle(item) }">
+                  <el-option v-for="(jtem, jindex) in item.child" :key="jindex" :label="jtem.value"
+                      :value="jtem.key"></el-option>
+              </el-select> -->
+          <!-- v-on="{ ...item.listeners, change: (event) => selectChangeHandle(event,
+          item), }" -->
+          <el-select
+            v-else-if="item.type == 'select'"
+            v-model="form.value[item.prop]"
+            :placeholder="`请选择${item.placeholder || item.label}`"
+            :clearable="'clearable' in item ? item.clearable : true"
+            v-bind="{ disabled: !!item.disabled, ...(item.props || {}) }"
+            v-on="{
+              ...item.listeners,
+              change: event => selectChangeHandle(event, item),
+            }"
+            @keyup.native="
+              $event =>
+                item.keyup({
+                  event: $event,
+                  item,
+                  form: form.value,
+                })
+            "
+          >
+            <el-option
+              v-for="(jtem, jindex) in item.child"
+              :key="jindex"
+              :label="jtem.value"
+              :value="jtem.key"
+            />
+          </el-select>
+          <div v-else-if="item.type == 'inputSpecial'">
+            <el-col :span="6">
+              <el-form-item :prop="item.layerprop">
+                <el-input
+                  v-model="form.value[item.layerprop]"
+                  :clearable="item.clearable || true"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col class="line" style="text-align: center" :span="3">- </el-col>
+            <el-col :span="6">
+              <el-form-item :prop="item.rowprop">
+                <el-input v-model="form.value[item.rowprop]" :clearable="item.clearable || true" />
+              </el-form-item>
+            </el-col>
+            <el-col class="line" style="text-align: center" :span="3">- </el-col>
+            <el-col :span="6">
+              <el-form-item :prop="item.columnprop">
+                <el-input
+                  v-model="form.value[item.columnprop]"
+                  :clearable="item.clearable || true"
+                />
+              </el-form-item>
+            </el-col>
+          </div>
+          <!-- 自定义输入框插槽 -->
+          <template v-else-if="item.type == 'slot'">
+            <slot :name="item.name" :item="item" />
+          </template>
+          <!-- 兜底 -->
+          <div v-else style="color: red">"{{ item.type }}"类型暂不支持，请手动添加</div>
+        </el-form-item>
+      </template>
+    </el-form>
+    <div v-if="showBtn" slot="footer" class="dialog-footer">
+      <slot v-if="$slots.btnSlot" name="btnSlot" :form="form" />
+      <template v-else>
+        <el-button @click="onCancel">取消</el-button>
+        <el-button v-if="form.type" type="primary" @click="onConfirm">确定</el-button>
+      </template>
+      <slot name="btnAfterSlot" />
+    </div>
+  </div>
+</template>
+  <!--
+  # BaseForm 基础表单组件
+  
+  ## Props 属性
+  | 属性名        | 类型      | 默认值  | 必填  | 说明          |
+  |-------------|----------|---------|------|--------------|
+  | form        | Object   | -       | 是    | 表单配置对象    |
+  | defaultValue| Object   | {}      | 否    | 表单默认值      |
+  | showBtn     | Boolean  | true    | 否    | 是否显示底部按钮 |
+  
+  ## form 对象结构
+  {
+    type: Number,      // 表单类型：0-详情，1-新建，2-编辑
+    title: String,     // 表单标题（会根据type自动设置）
+    value: Object,     // 表单数据对象
+    rules: Object,     // 表单验证规则
+    attrs: Object,     // el-form的属性配置
+    model: Array       // 表单项配置数组
+  }
+  
+  ## model 项配置
+  | 字段         | 类型            | 说明    |
+  |-------------|----------------|---------|
+  | type        | String         | 表单项类型：input/number/textarea/switch/radio/date/treeSelect/select/projectCodeSelect/inputSpecial/slot |
+  | label       | String         | 表单项标签 |
+  | prop        | String         | 表单项字段名 |
+  | placeholder | String         | 占位文本 |
+  | required    | Boolean        | 是否必填 |
+  | hidden      | Boolean        | 是否隐藏 |
+  | clearable   | Boolean        | 是否可清空 |
+  | readonly    | Boolean        | 是否只读 |
+  | disabled    | Boolean/Function| 是否禁用 |
+  | props       | Object         | 对应表单控件的属性配置 |
+  | listeners   | Object         | 事件监听器配置 |
+  
+  ## Events 事件
+  | 事件名        | 说明          | 回调参数 |
+  |-------------|---------------|---------|
+  | onSubmit    | 表单提交事件    | {form: 表单配置, data: 表单数据} |
+  | onCancel    | 取消按钮点击事件 | - |
+  | selectChange| 选择器值变化事件 | {obj: 当前项配置, val: 变化后的值} |
+  -->
+  <script>
+import { getData } from "../../index.js";
+import { initForm } from "../../../utils/initData.js";
+
+// interface FormItem {
+//   type: Number;
+//   title?: String;
+//   model: IModelItem[]; //src\utils\interface\dialogInterface.ts
+//   rules:Form.rules;
+//   attrs: Form; //import { Form } from "element-ui";
+// }
+export default {
+  name: "form",
+  props: {
+    url: {
+      type: String,
+      // default: "/api/app/warehouse/warehouse",
+      default: "",
+    },
+    form: Object,
+    // 默认值
+    defaultValue: {
+      type: Object,
+      default: () => ({}),
+    },
+    showBtn: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      // model: [],
+      formInit: {}, // 初始化表单，用于重置表单用
+      // formValue: {}, // 表单数据
+    };
+  },
+  computed: {
+    width() {
+      return function (item) {
+        if (this.form.model.length > 18 && item.type != "textarea") {
+          return "25%";
+        } else if (
+          this.form.model.length > 10 &&
+          this.form.model.length <= 18 &&
+          item.type != "textarea"
+        ) {
+          return "calc(100% / 3)";
+        } else if (
+          this.form.model.length > 6 &&
+          this.form.model.length <= 10 &&
+          item.type != "textarea"
+        ) {
+          return "50%";
+        } else {
+          return item.type == "textarea" && item.width ? item.width : "100%";
+        }
+      };
+    },
+  },
+  watch: {
+    // 副作用以便父级直接使用
+    "form.type": {
+      handler(newValue) {
+        // 如果没有type则默认值为1
+        if (!Object.keys(this.form).includes("type")) {
+          this.$set(this.form, "type", 1);
+        }
+        let result;
+        switch (newValue) {
+          case 0:
+            result = "详情"; // 当 newValue 为 0 时，标题为 "详情"
+            break;
+          case 1:
+            result = "新建";
+            break;
+          case 2:
+            result = "编辑";
+            break;
+          default:
+            result = "弹框";
+            break;
+        }
+        this.form.title = result;
+      },
+      immediate: true,
+    },
+    // "form.model": {
+    //   handler() {
+
+    //   },
+    //   immediate: true,
+    //   deep: true
+    // }
+  },
+  created() {
+    // 默认值复制
+    if (Object.keys(this.defaultValue)?.length) {
+      Object.keys(this.defaultValue).forEach(key => {
+        form.value[key] = this.defaultValue[key];
+      });
+    }
+    initForm({
+      url: this.url,
+      form: this.form,
+    });
+  },
+  // beforeDestroy() {},
+  methods: {
+    // 保留之前的change调用方式，并添扩展新的
+    selectChangeHandle(val, item) {
+      (item &&
+        item.listeners &&
+        item.listeners.change &&
+        item.listeners.change(item, this.form.value[item.prop])) ||
+      item.change
+        ? item.change(val)
+        : this.selectChange(item, val);
+    },
+    changeHandle(val, item) {
+      if (
+        item &&
+        item.listeners &&
+        item.listeners.change &&
+        item.listeners.change(item, this.form.value[item.prop])
+      ) {
+        this.selectChange(item, val);
+      }
+    },
+    selectChange(obj, val) {
+      let temp = {
+        obj: obj,
+        val: val,
+      };
+      this.$emit("selectChange", temp);
+    },
+    inputDisabled(item) {
+      if (!item.props) return false;
+      if (!Object.keys(item.props).includes("disabled")) return false;
+      // disabled是函数还是Boolean值，如果boolean值直接返回，如果是函数执行函数并返回boolean
+      return typeof item.props.disabled === "function"
+        ? item.props.disabled({ item, form: this.form })
+        : item.props.disabled;
+    },
+    validate() {
+      return new Promise((resolve, reject) => {
+        this.$refs.formRef.validate(valid => {
+          if (valid) {
+            resolve({
+              valid,
+              formData: this.form?.value || {},
+            });
+          } else {
+            reject("表单验证失败");
+          }
+        });
+      });
+    },
+    onCancel() {
+      this.$refs.formRef.resetFields();
+      this.$refs.formRef.clearValidate();
+      this.$emit("onCancel");
+    },
+    onConfirm() {
+      console.log("BaseForm数据", this.form);
+      this.validate()
+        .then(() => {
+          this.$emit("onSubmit", { form: this.form, data: this.form.value });
+        })
+        .catch(err => {
+          console.log("校验失败", err);
+        });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+  

package/src/package/index.js

@@ -1,6 +1,7 @@
 import OlTable from "./table";
 import OlSearch from "./formSearch";
 import Dialog from "./dialog";
+import OlForm from "./form";
 import SwaggerClient from "swagger-client";
 
 const consoleTooltip = () => {
@@ -143,7 +144,6 @@ const swaggerUnload = async function () {
   await clearData(); // 清空 IndexedDB 中的缓存数据
 };
 
-const components = [OlTable, OlSearch, Dialog];
 
 // 自定义加载指示器
 function showLoading() {
@@ -203,6 +203,8 @@ function hideLoading() {
   }
 }
 
+
+const components = [OlTable, OlSearch, Dialog, OlForm];
 const install = async function (Vue) {
   // 设置全局数据
   components.map((item) => {
@@ -212,5 +214,5 @@ const install = async function (Vue) {
 };
 
 export default install;
-export { OlTable, OlSearch, Dialog };
+export { OlTable, OlSearch, Dialog, OlForm };
 export { swaggerInstall, swaggerUnload };

package/src/utils/initData.js

@@ -0,0 +1,84 @@
+import { getData } from "../package/index.js";
+// java数据类型转成js数据类型
+const javaTypeToJsType = javaType => {
+  switch (javaType) {
+    case "integer":
+      return "number";
+    case "array":
+      return "Array";
+    case "object":
+      return "Object";
+    default:
+      return javaType;
+  }
+};
+
+const javaTypeToformType = javaType => {
+  switch (javaType) {
+    case "integer":
+      return "number";
+    case "boolean":
+      return "switch";
+    case "string":
+      return "input";
+    default:
+      return javaType;
+  }
+};
+
+export const initForm = options => {
+  const { url, form } = options;
+  getData().then(swaggerData => {
+    const entity = swaggerData.paths[url].post;
+    // 添加title
+    // if (!form.title) form.title = entity.summary;
+    const schema = entity.requestBody.content["application/json"].schema;
+    const properties = schema.properties;
+    // 生成model
+    // 1.循环model，将properties中prop相同的匹配，属性合并，model权限大，properties权限小，且保持响应式
+    form.model.forEach(item => {
+      const property = properties[item.prop];
+      if (property) {
+        Object.assign(item, {
+          prop: item.prop,
+          label: property.description,
+          type: javaTypeToformType(property.type),
+          hidden: false,
+          listeners: () => {},
+          props: {},
+          ...item,
+        });
+      }
+    });
+    //  2.将properties都push到model中（只提取swagger中有的type和description）
+    Object.keys(properties).forEach(key => {
+      const property = properties[key];
+      if (!form.model.find(item => item.prop == key) && property.description) {
+        // 删除对象的某些属性
+        const temp = {
+          prop: key,
+          label: property.description,
+          type: javaTypeToformType(property.type),
+          hidden: false,
+          listeners: () => {},
+          props: {},
+        };
+        form.model.push(temp);
+      }
+    });
+
+    // 校验规则
+    if (schema.required && Array.isArray(schema.required)) {
+      schema.required.forEach(item => {
+        if (!Object.keys(form.rules).includes(item)) {
+          form.rules[item] = [
+            {
+              required: true,
+              message: `${properties[item].description}不能为空`,
+            },
+          ];
+        }
+      });
+    }
+  });
+};