kz-ui-base 1.0.13 → 1.0.16

package/common/src/components/customForm/editTable.vue

@@ -0,0 +1,324 @@
+<template>
+  <el-form :model="form" ref="form" size="small" :rules="rules">
+    <el-table :data="form.list" border>
+      <el-table-column
+        v-for="x in columns"
+        :key="x.prop"
+        :label="x.text"
+        :prop="x.prop"
+        v-bind="x.attr"
+        :show-overflow-tooltip="true"
+      >
+        <template slot-scope="{ row, $index }">
+          <t-text v-if="!x.edit" :row="{ x, row }" />
+          <template v-else>
+            <t-text v-if="isDetail" :row="{ x, row }" />
+            <template v-else>
+              <t-input
+                v-if="x.prop !== 'opt'"
+                v-model="row[`${x.prop}`]"
+                v-bind="componentAttrs(x, row, $index)"
+                class="width100"
+                @change="iptchange(row)"
+              />
+              <template v-else>
+                <!-- <el-link
+                  type="primary"
+                  :underline="false"
+                  @click="save(row, $index)"
+                  >保存</el-link
+                > -->
+                <el-link
+                  type="primary"
+                  :underline="false"
+                  v-if="row.isAdd"
+                  @click="del($index)"
+                  >删除</el-link
+                >
+                <el-link
+                  type="primary"
+                  :underline="false"
+                  @click="resetField($index)"
+                  >重置</el-link
+                >
+              </template>
+            </template>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-form-item v-if="buttomShow">
+      <template v-if="isSubmit">
+        <el-button type="primary" @click="add">新增</el-button>
+        <!-- <el-button type="primary" @click="submit">提交</el-button> -->
+        <el-button @click="reset">重置</el-button>
+      </template>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  props: { config: Object },
+  components: {
+    TInput: {
+      functional: true,
+      props: ["prop", "rules", "type", "options", "row", "cb"],
+      render: (
+        h,
+        {
+          props: {
+            prop,
+            rules,
+            type = "default",
+            options = [],
+            row,
+            cb = () => {},
+          },
+          data,
+          listeners: { input = () => {} },
+        }
+      ) => {
+        const children = {
+          checkbox: (h) =>
+            h(
+              "el-checkbox-group",
+              {
+                props: { ...data.attrs },
+                on: {
+                  input(v) {
+                    input(v);
+                  },
+                },
+              },
+              options.map((o) =>
+                h(
+                  "el-checkbox",
+                  { props: { ...o, label: o.value, key: o.value } },
+                  [o.label]
+                )
+              )
+            ),
+          select: (h) =>
+            h(
+              "el-select",
+              {
+                class: "width100",
+                props: { ...data.attrs },
+                on: {
+                  change(v) {
+                    input(v);
+                  },
+                },
+              },
+              options.map((o) =>
+                h("el-option", { props: { ...o, key: o.value } })
+              )
+            ),
+          date: (h) =>
+            h("el-date-picker", {
+              props: { type: "date", valueFormat: "yyyy-MM-dd" },
+              ...data,
+            }),
+
+          switch: (h) =>
+            h("el-switch", { props: { activeColor: "#13ce66" }, ...data }),
+          mixInput: (h) =>
+            h("el-input", data, [
+              h("el-button", {
+                slot: "append",
+                props: { icon: "el-icon-search" },
+                on: {
+                  click() {
+                    cb(row);
+                  },
+                },
+              }),
+            ]),
+          opt: () => "-",
+          default: (h) => h("el-input", data),
+        };
+
+        return h("el-form-item", { props: { prop, rules } }, [
+          children[type](h),
+        ]);
+      },
+    },
+    TText: {
+      functional: true,
+      props: ["row"],
+      render: (
+        h,
+        {
+          props: {
+            row: { x, row },
+          },
+        }
+      ) => {
+        if (!row[`${x.prop}`]) return h("span", "-");
+        else if (x.format && typeof x.format == "function")
+          return h("span", x.format(row));
+        else return h("span", row[`${x.prop}`]);
+      },
+    },
+  },
+  data() {
+    const {
+      columns = [],
+      data = [],
+      isDetail = false,
+      isSubmit = true,
+      buttomShow = false,
+    } = this.config || {};
+
+    return {
+      form: {
+        list: data,
+        //  && data.length > 0
+        //   ? data.map((n) =>
+        //       columns.reduce(
+        //         (r, c) => ({
+        //           ...r,
+        //           [c.prop]:
+        //             n[c.prop] == false
+        //               ? n[c.prop]
+        //               : n[c.prop] || (c.type == "checkbox" ? [] : ""),
+        //         }),
+        //         {}
+        //       )
+        //     )
+        //   : [
+        //       columns.reduce(
+        //         (r, c) => ({
+        //           ...r,
+        //           [c.prop]:
+        //             c.type == "checkbox"
+        //               ? []
+        //               : c.type == "switch"
+        //               ? false
+        //               : "",
+        //         }),
+        //         { isAdd: true }
+        //       ),
+        //     ],
+      },
+      columns,
+      rules: columns.reduce(
+        (r, c) => ({
+          ...r,
+          //input校验
+          // [c.prop]: {
+          //   required: c.required == false ? false : true,
+          //   message: c.label + "必填",
+          //   trigger: "blur",
+          // },
+        }),
+        {}
+      ),
+      isDetail,
+      isSubmit,
+      buttomShow,
+    };
+  },
+  created() {},
+  methods: {
+    iptchange(row) {
+      this.$emit("iptchange", row);
+    },
+    componentAttrs(item, row, idx) {
+      const { type, text } = item,
+        attrs = Object.fromEntries(
+          Object.entries(item).filter(
+            (n) => !/^(prop|edit|text|attr|format)/.test(n[0])
+          )
+        ),
+        placeholder =
+          (/^(select|el-date-picker)/.test(type) ? "请选择" : "请输入") + text;
+      Object.assign(attrs, {
+        prop: `list.${idx}.${item.prop}`,
+        rules: this.rules[item.prop],
+      });
+
+      return { ...attrs, row, placeholder };
+    },
+    add() {
+      const { columns = [] } = this.config || {},
+        obj = columns.reduce(
+          (r, c) => ({
+            ...r,
+            [c.prop]:
+              c.type == "checkbox" ? [] : c.type == "switch" ? false : "",
+          }),
+          { isAdd: true }
+        );
+      this.form.list.push(obj);
+    },
+    save(row, idx) {
+      let ret = Object.keys(row)
+          .map((r) => `list.${idx}.${r}`)
+          .filter((r) => !/isAdd|opt/g.test(r)),
+        {
+          $refs: { form },
+        } = this,
+        num = 0;
+
+      form.validateField(ret, (valid) => {
+        if (valid) {
+          num++;
+        }
+      });
+
+      if (num == 0)
+        this.$emit(
+          "submit",
+          Object.fromEntries(
+            Object.entries(row).filter((n) => !/^(isAdd|opt)/.test(n[0]))
+          )
+        );
+    },
+    del(idx) {
+      this.form.list.splice(idx, 1);
+      this.$refs.form.fields.forEach((n) => {
+        if (n.prop.split(".")[1] == idx) {
+          n.clearValidate();
+        }
+      });
+    },
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit(
+            "submit",
+            this.form.list
+            // this.form.list.map((m) =>
+            //   Object.fromEntries(
+            //     Object.entries(m).filter((n) => !/^(isAdd|opt)/.test(n[0]))
+            //   )
+            // )
+          );
+        }
+      });
+    },
+    resetField(idx) {
+      console.log(this.$refs.form);
+      this.$refs.form.fields.forEach((n) => {
+        if (n.prop.split(".")[1] == idx) {
+          n.resetField();
+        }
+      });
+    },
+    reset() {
+      this.$refs.form.resetFields();
+    },
+  },
+};
+</script>
+<style scoped>
+.width100 {
+  width: 100%;
+}
+.el-form-item--small.el-form-item {
+  margin-bottom: 0px;
+}
+</style>

package/common/src/components/customForm/lookup.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-form-item :label="column.text" :prop="column.property">
+    <el-input v-model="displayText" :placeholder="column.text" :disabled="true">
+      <input type="text" v-model="entity[column.property]" hidden />
+      <el-button
+        type="primary"
+        icon="el-icon-search"
+        slot="append"
+        @click="handleQuery"
+      ></el-button>
+    </el-input>
+  </el-form-item>
+</template>
+
+<script>
+import formMixins from "./formMixins";
+import LookupDialog from "../base/dialog/lookupDialog";
+import eventHub from "@utils/eventHub";
+import * as Utils from "@utils/utils";
+export default {
+  name: "Lookup",
+  props: {
+    setting: {
+      type: Object,
+      default: function () {
+        return undefined;
+      },
+    },
+  },
+  mixins: [formMixins],
+  component: [LookupDialog],
+  data() {
+    return {
+      currentValue: this.value,
+      displayValue: undefined,
+      clickNum: true, //是否为第一次点击
+      //url，若Url中有变量，则使用此Url保存原始Url
+      url: undefined,
+    };
+  },
+  created() {},
+  computed: {
+    displayText(val) {
+      return (
+        this.displayValue ||
+        this.entity[this.setting.displayProperty] ||
+        this.entity[this.column.property]
+      );
+    },
+  },
+    methods: {
+
+      replaceUrl(url, entity) {
+        for (var k in entity) {
+          //替换文本属性值
+          if (url.indexOf("{" + k + "}") > 0) {
+            url = url.replaceAll(
+              "{" + k + "}",
+              entity[k]
+            );
+          }
+        }
+        return url;
+      },
+    handleQuery() {
+      //第二次点击还原数据
+      if (this.clickNum) {
+        this.newSetting = JSON.stringify(this.setting);
+        this.clickNum = false;
+      } else {
+        this.setting = JSON.parse(this.newSetting);
+      }
+      var self = this;
+      if (this.setting.url && this.setting.url.indexOf("{") > -1 && !this.url) {
+        if (this.setting.url.indexOf("{") > -1) {
+          this.url = this.setting.url;
+        }
+      }
+      if (this.url) {
+        this.setting.url = this.replaceUrl(this.url, this.entity);
+      }
+      this.Dialog.open({
+        component: LookupDialog,
+        setting: this.setting,
+        data: { entity: this.entity },
+        //beforeClose: (done) => {
+        //  //点右上角关闭按钮后触发
+        //  console.log("1");
+        //  done();
+        //},
+        //close: () => {
+        //  //关闭后触发
+        //  console.log("2");
+        //},
+        confirm: (result) => {
+          //显式$emit('confirm')时触发
+          console.log("3 ", result);
+          var newValue = result.data[self.setting.valueField];
+          this.$set(self.entity, self.column.property, newValue);
+          // self.entity[self.column.property] = newValue;
+          self.displayValue = result.data[self.setting.displayField];
+          if (self.setting.displayProperty)
+            this.$set(
+              self.entity,
+              self.setting.displayProperty,
+              self.displayValue
+            );
+          // self.entity[self.setting.displayProperty] = self.displayValue;
+          if (self.setting && self.setting.relationFields) {
+            var data = result.data;
+            if (self.setting.relationFieldsIgnoreNull) {
+              for (var key in self.setting.relationFields) {
+                var keyField = Utils.firstSpellToLower(key);
+                var valueField = Utils.firstSpellToLower(
+                  self.setting.relationFields[key]
+                );
+                var Ignorekey = self.setting.relationFieldsIgnoreNull.find(
+                  (x) => x == key
+                );
+                if (Ignorekey == undefined) {
+                  var value = Utils.GetPropertyValue(data, valueField);
+                  if (data && value != undefined) self.entity[keyField] = value;
+                  // else self.entity[keyField] = undefined;
+                  else this.$set(self.entity, keyField, undefined);
+                } else {
+                  var value = Utils.GetPropertyValue(data, valueField);
+                  // if (data && value != undefined) self.entity[keyField] = value;
+                  if (data && value != undefined)
+                    this.$set(self.entity, keyField, value);
+                }
+              }
+            } else {
+              for (var key in self.setting.relationFields) {
+                var keyField = Utils.firstSpellToLower(key);
+                var valueField = Utils.firstSpellToLower(
+                  self.setting.relationFields[key]
+                );
+                var value = Utils.GetPropertyValue(data, valueField);
+                if (data && value != undefined) this.$set(self.entity, keyField, value);
+                // else self.entity[keyField] = undefined;
+                else this.$set(self.entity, keyField, undefined);
+              }
+            }
+          }
+          eventHub.$emit("entityValueChange", {
+            property: self.column.property,
+            value: newValue,
+            data: result.data,
+            column: self.column,
+          });
+          self.$emit("change", {
+            property: self.column.property,
+            value: newValue,
+            data: result.data,
+            column: self.column,
+          });
+        },
+      });
+    },
+  },
+};
+</script>