@ctzy-web-client/plugin-component-vue 1.0.0

package/src/data-form/data-form.vue

@@ -0,0 +1,212 @@
+<template>
+  <ElForm
+    ref="dataFormElRef"
+    v-bind="attrs"
+    :model="dataForm.data"
+    :label-position="labelPosition"
+    :label-width="computedLabelWidth"
+    :rules="rules"
+    :validate-on-rule-change="validateOnRuleChange"
+    :disabled="dataForm.disabled"
+  >
+    <slot :dataForm="dataForm">
+      <BwaDataFormItem
+        v-for="column in dataForm.getDisplayColumns()"
+        :key="column.fullAttrName"
+        :name="column.fullAttrName"
+        :isShowLabelColon="isShowLabelColon"
+      >
+        <slot
+          :name="'form-item-' + column.fullAttrName"
+          :column="column"
+          :record="dataForm.data"
+          :dataForm="dataForm"
+        >
+        </slot>
+      </BwaDataFormItem>
+    </slot>
+  </ElForm>
+</template>
+<script setup>
+import {
+  provide,
+  ref,
+  computed,
+  watch,
+  useAttrs,
+  onMounted,
+  unref,
+  onBeforeUnmount,
+} from 'vue';
+import { ElMessage, ElForm } from 'element-plus';
+import { dataFormKey } from 'web-base-client-vue';
+import { mergeWith, isArray } from 'lodash';
+import BwaDataFormItem from './data-form-item.vue';
+
+defineOptions({ name: 'BwaDataForm' });
+
+const props = defineProps({
+  dataForm: {
+    type: Object,
+  },
+  autoLoad: {
+    type: Boolean,
+    default: true,
+  },
+  //注册id 和 记录数据
+  record: {
+    type: Object,
+  },
+  recID: {
+    type: String,
+  },
+  labelPosition: {
+    type: String,
+  },
+  labelWidth: {
+    type: String,
+    default: '',
+  },
+  rules: {
+    type: Object,
+    default: () => ({}),
+  },
+  validateOnRuleChange: {
+    type: Boolean,
+    default: false,
+  },
+    isShowLabelColon: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const attrs = useAttrs();
+
+const dataForm = props.dataForm;
+
+//表单对象的引用
+const dataFormElRef = ref();
+
+//验证规则
+const rules = computed(() => {
+  let data = {};
+
+  dataForm.getDisplayColumns().forEach((item) => {
+    data[item.fullAttrName] = (
+      item.required ? [{ required: true, message: item.title + '必填!' }] : []
+    ).concat(item.rules);
+  });
+
+  return mergeWith(
+    {},
+    data,
+    props.rules,
+    function customizer(objValue, srcValue) {
+      if (isArray(objValue)) {
+        return objValue.concat(srcValue);
+      }
+    }
+  );
+});
+
+//计算后的描述宽度
+const computedLabelWidth = computed(() => {
+  if (props.labelWidth) {
+    return props.labelWidth;
+  }
+
+  let labelWidth = 0;
+
+  if (props.labelPosition != 'top') {
+    let maxLabelCharCount = 0;
+    dataForm.getDisplayColumns().forEach((item) => {
+      maxLabelCharCount = Math.max(
+        maxLabelCharCount,
+        item.title.length + (item.required ? 1 : 0)
+      );
+    });
+    labelWidth = (maxLabelCharCount + 1) * 18;
+  }
+  return labelWidth + 'px';
+});
+
+if (props.autoLoad) {
+  //监听recid的变化 是否自动加载数据
+  watch(
+    computed(() => props.record),
+    async () => {
+      if (props.recID) {
+        try {
+          await dataForm.loadDataByRecId(props.recID);
+        } catch (e) {
+          console.error(e);
+          ElMessage.error('获取记录失败。');
+        }
+        return;
+      }
+
+      if (props.record) {
+        dataForm.setData(props.record);
+        return;
+      }
+
+      dataForm.setData();
+    },
+    { immediate: true }
+  );
+}
+
+//当前data table 上下文对象
+provide(dataFormKey, dataForm);
+
+/**
+ * 表单验证
+ * @param {*} data
+ */
+const validate = (callback) => {
+  return dataFormElRef.value.validate(callback);
+};
+
+window.dataFormElRef = dataFormElRef;
+window.aaavvv = validate;
+
+/**
+ * 提交表单
+ * @param {Object} 额外附加的提交数据
+ */
+const submit = (data) => {
+  return validate()
+    .then(() => {
+      dataForm
+        .submit(data)
+        .then(() => {
+          ElMessage.info('保存成功!');
+        })
+        .catch((e) => ElMessage.error(e.message));
+    })
+    .catch((result) => {
+      console.log(result);
+    });
+};
+
+onMounted(() => {
+  unref(dataForm).formValivators.push(unref(dataFormElRef));
+});
+
+onBeforeUnmount(() => {
+  const _dataFormEl = unref(dataFormElRef);
+  unref(dataForm).formValivators = unref(dataForm).formValivators.filter(
+    (validate) => validate !== _dataFormEl
+  );
+});
+
+defineExpose({
+  dataForm,
+  dataFormElRef,
+  validate,
+  submit,
+  rules,
+  computedLabelWidth,
+});
+</script>

package/src/data-form/dynamic-component.js

@@ -0,0 +1,24 @@
+import { h, unref } from 'vue';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import { useDynamicComponent } from '../utils.js';
+export default {
+  props: {
+    column: Object,
+    record: Object,
+  },
+  emits: ['on-change'],
+  setup(props, context) {
+    //组件信息
+    const { component, params } = useDynamicComponent(
+      props,
+      context,
+      'BwaInput',
+      'fullAttrName'
+    );
+
+    return () => {
+      return h(unref(component), unref(params));
+    };
+  },
+};

package/src/data-form/form-components/Blots/AtBlot.js

@@ -0,0 +1,32 @@
+import Quill from 'quill';
+
+const Parchment = Quill.imports.parchment;
+// const BlockEmbed = Quill.import('blots/block/embed');
+
+class AtBlot extends Parchment.Embed {
+  static blotName = 'at';
+  static tagName = 'span';
+
+  static create(options) {
+    options = options || '';
+    let node = super.create();
+    node.setAttribute('d-id', options.id);
+    node.setAttribute('class', options.class || 'ptp-at-item');
+    options.style && node.setAttribute('style', options.style);
+    node.innerHTML = options.desc.startsWith('@')
+      ? options.desc
+      : '@' + options.desc;
+    return node;
+  }
+
+  static value(node) {
+    return {
+      id: node.getAttribute('d-id'),
+      desc: node.innerHTML,
+      style: node.getAttribute('style'),
+      class: node.getAttribute('ptp-at-item'),
+    };
+  }
+}
+
+Quill.register(AtBlot, true);

package/src/data-form/form-components/bwa-date-picker.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-date-picker
+    v-model="modelValue"
+    type="date"
+    :placeholder="placeholder"
+    v-bind="attrs"
+    :teleported="false"
+    style="width: 100%"
+  />
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue';
+import { ElDatePicker, dayjs } from 'element-plus';
+
+defineOptions({
+  name: 'BwaDatePicker',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date],
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: '请选择',
+  },
+});
+
+const attrs = useAttrs();
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) =>
+    emit(
+      'update:model-value',
+        v ? dayjs(new Date(v.getTime())).format('YYYY-MM-DD') : ''
+    ),
+});
+</script>

package/src/data-form/form-components/bwa-date-time-picker.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-date-picker
+    v-bind="attrs"
+    v-model="modelValue"
+    type="datetime"
+    :placeholder="placeholder"
+    :teleported="false"
+    style="width: 100%"
+  />
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue';
+import { ElDatePicker, dayjs } from 'element-plus';
+
+defineOptions({
+  name: 'BwaDateTimePicker',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date],
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: '请选择',
+  },
+});
+
+const attrs = useAttrs();
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => {
+    if (!v) {
+      emit('update:model-value', '');
+      return;
+    }
+
+    emit(
+      'update:model-value',
+      dayjs(new Date(v.getTime())).format('YYYY-MM-DD HH:mm:ss')
+    );
+  },
+});
+</script>

package/src/data-form/form-components/bwa-input-float.vue

@@ -0,0 +1,41 @@
+<template>
+  <BwaInputInteger
+    v-bind="attrs"
+    v-model="modelValue"
+    :precision="precision"
+    :step="step"
+  />
+</template>
+
+<script setup>
+import { useAttrs, computed } from 'vue';
+import BwaInputInteger from './bwa-input-integer.vue';
+
+defineOptions({
+  name: 'BwaInputFloat',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: 0,
+  },
+  precision: {
+    type: Number,
+    default: 1,
+  },
+  step: {
+    type: Number,
+    default: 0.1,
+  },
+});
+
+const attrs = useAttrs();
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:model-value', v),
+});
+</script>

package/src/data-form/form-components/bwa-input-integer.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-input-number v-bind="attrs" v-model="value" />
+</template>
+
+<script setup>
+import { useAttrs, computed, unref, watch, ref } from 'vue';
+import { ElInputNumber } from 'element-plus';
+
+defineOptions({
+  name: 'BwaInputInteger',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: 0,
+  },
+});
+
+const attrs = useAttrs();
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => {
+    emit('update:model-value', v);
+  },
+});
+
+const value = ref(modelValue.value);
+
+watch(value, (newValue) => {
+  if (newValue === unref(modelValue)) {
+    return;
+  }
+
+  modelValue.value = newValue;
+});
+
+watch(
+  modelValue,
+  (newValue) => {
+    if (typeof newValue === 'string') {
+      newValue = Number.parseFloat(newValue);
+
+      newValue = Number.isNaN(newValue) ? 0 : newValue;
+    }
+
+    if (value.value === newValue && value.value !== unref(modelValue)) {
+      modelValue.value = newValue;
+    }
+
+    value.value = newValue;
+  },
+  { immediate: true }
+);
+</script>

package/src/data-form/form-components/bwa-input.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-input v-bind="attrs" v-model="modelValue" :placeholder="placeholder" />
+</template>
+
+<script setup>
+import { useAttrs, computed } from 'vue';
+import { ElInput } from 'element-plus';
+
+defineOptions({
+  name: 'BwaInput',
+});
+
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+    placeholder: {
+        type: String,
+        default: '请输入'
+    }
+});
+
+const attrs = useAttrs();
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:model-value', v),
+});
+</script>

package/src/data-form/form-components/bwa-multi-select.vue

@@ -0,0 +1,27 @@
+<template>
+  <BwaSelect v-model="modelValue" v-bind="attrs" multiple>
+    <slot></slot>
+  </BwaSelect>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue';
+import BwaSelect from './bwa-select.vue';
+
+defineOptions({
+  name: 'BwaMultiSelect',
+});
+
+const props = defineProps({
+  modelValue: null,
+});
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:model-value', v),
+});
+
+const attrs = useAttrs();
+</script>