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

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

@@ -0,0 +1,81 @@
+<template>
+  <BwaSelect
+    v-bind="attrs"
+    v-model="modelValue"
+    :loading="loading"
+    remote
+    filterable
+    clearable
+    :remote-method="handleRemote"
+    :options="options"
+  />
+</template>
+
+<script setup>
+import { useService } from 'web-base-client-vue';
+import { useAttrs, ref, unref, computed } from 'vue';
+import BwaSelect from './bwa-select.vue';
+import { ElMessage } from 'element-plus';
+
+defineOptions({
+  name: 'BwaUserSelect',
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  modelValue: null,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const attrs = useAttrs();
+
+const userService = useService('UserService');
+
+const loading = ref(false);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => {
+    emit('update:modelValue', v);
+  },
+});
+
+const options = ref([]);
+
+const loadOptions = async (query, userIds = []) => {
+  const _userService = unref(userService);
+
+  if (!_userService) {
+    return;
+  }
+
+  try {
+    loading.value = true;
+    const userListResult = await _userService.getUserList({
+      name: query,
+      userIds,
+    });
+
+    if (userListResult.code != 0) {
+      ElMessage.error(userListResult.msg);
+      return;
+    }
+
+    options.value = userListResult.data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleRemote = loadOptions;
+
+loadOptions(
+  '',
+  Array.isArray(unref(modelValue))
+    ? unref(modelValue)
+    : unref(modelValue)
+    ? [unref(modelValue)]
+    : []
+);
+</script>

package/src/data-form/index.js

@@ -0,0 +1,35 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import DataForm from './data-form.vue';
+import DataFormItem from './data-form-item.vue';
+
+import DatePicker from './form-components/bwa-date-picker.vue';
+import DateTimePicker from './form-components/bwa-date-time-picker.vue';
+import InputInteger from './form-components/bwa-input-integer.vue';
+import InputFloat from './form-components/bwa-input-float.vue';
+import Input from './form-components/bwa-input.vue';
+import Select from './form-components/bwa-select.vue';
+import MultiSelect from './form-components/bwa-multi-select.vue';
+import Textarea from './form-components/bwa-textarea.vue';
+import UserSelect from './form-components/bwa-user-select.vue';
+import UserMultiSelect from './form-components/bwa-user-multi-select.vue';
+import Upload from './form-components/bwa-upload.vue';
+import RichText from './form-components/bwa-rich-text.vue';
+
+export const BwaDataForm = withInstall(DataForm, {
+  DataFormItem,
+  DatePicker,
+  DateTimePicker,
+  InputInteger,
+  InputFloat,
+  Input,
+  Select,
+  MultiSelect,
+  Textarea,
+  UserSelect,
+  UserMultiSelect,
+  Upload,
+  RichText,
+});
+export const BwaDataFormItem = withInstall(DataFormItem);
+
+export default BwaDataForm;

package/src/data-table/data-column-view.vue

@@ -0,0 +1,131 @@
+<template>
+  <span :class="[ns.b(), { nowrap: nowrap }, align]">
+    <template v-if="viewType == 'html'">
+      <span v-html="viewValue"></span>
+    </template>
+    <template v-else-if="viewType == 'image'">
+      <el-image
+        class="image"
+        :style="{ width: '100%', minHeight: '50px' }"
+        :z-index="999"
+        :preview-teleported="true"
+        :preview-src-list="[viewValue]"
+        fit="cover"
+        :src="viewValue"
+        :hide-on-click-modal="true"
+      >
+        <template #placeholder>
+          <el-icon :size="50"><PictureFilled /></el-icon>
+        </template>
+        <template #error>
+          <el-icon :size="50"><PictureFilled /></el-icon>
+        </template>
+      </el-image>
+    </template>
+    <template v-else :title="value" :class="ns.e('text')">
+      {{ viewValue }}
+    </template>
+    <div v-if="copy" class="copy-btn" @click="copyHandle(viewValue)">复制</div>
+  </span>
+</template>
+<script>
+import { computed } from 'vue';
+import { func, str, useNamespace } from 'web-base-client-vue';
+import { PictureFilled } from '@element-plus/icons';
+import { ElMessage } from 'element-plus';
+export default {
+  name: 'BwaDataColumnView',
+  props: {
+    value: [String, Boolean, Number, Object, Array],
+    type: {
+      type: String,
+      default: 'string',
+    },
+    template: {
+      type: String,
+      default: '',
+    },
+    //格式化规则
+    rule: {
+      type: String,
+      default: '',
+    },
+    align: {
+      type: String,
+      default: '',
+    },
+    nowrap: {
+      type: [Boolean, String],
+      default: true,
+    },
+    copy: {
+      type: [Boolean, String],
+      default: false,
+    },
+    defaultValue: {
+      type: String,
+      default: '-',
+    },
+  },
+  emits: ['update:modelValue'],
+  components: { PictureFilled },
+  setup(props) {
+    const ns = useNamespace('column-view');
+
+    //显示类型
+    const viewType = computed(() => props.type.toLocaleLowerCase());
+
+    //显示的值
+    const viewValue = computed(() => {
+      //值 主要是要先转成字符串处理
+      let value = props.value === 0 ? '0' : props.value ? props.value + '' : '';
+      let type = viewType.value;
+
+      if (['number', 'string'].includes(type)) {
+        //是否追加...
+        let isAppendChar = false;
+
+        if (type === 'string' && props.rule && value) {
+          isAppendChar = value.length > props.rule.replace('s:', '') * 1;
+        }
+
+        value = props.rule ? str.formatByRule(value, props.rule) : value;
+        value = value || props.defaultValue;
+
+        if (isAppendChar) {
+          value += '...';
+        }
+      } else if (type === 'date') {
+        value = value
+          ? func.formatDate(new Date(value), props.rule || 'yyyy-MM-dd')
+          : props.defaultValue;
+      } else if (type === 'html') {
+        value = value
+          ? value.replace(/[\r\n|\r|\n]/g, '<br/>')
+          : props.defaultValue;
+      }
+
+      //存在字符串模板的时候
+      if (props.template) {
+        value = props.template.replace('${value}', value);
+      }
+
+      return value;
+    });
+
+    //拷贝
+    const copyHandle = (text) => {
+      let input = document.createElement('input');
+      input.value = text;
+      document.body.appendChild(input);
+      input.select();
+      input.setSelectionRange(0, input.value.length),
+        document.execCommand('Copy');
+      document.body.removeChild(input);
+      ElMessage.info('复制成功!');
+    };
+
+    return { ns, viewType, viewValue, copyHandle };
+  },
+};
+</script>

package/src/data-table/data-table-card.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-card :class="ns.b('card')" v-loading="!dataTable.ready">
+    <template #header v-if="$slots.header">
+      <slot name="header" :dataTable="dataTable"></slot>
+    </template>
+    <el-table
+      class="content"
+      height="100%"
+      ref="elTable"
+      :data="dataTable.data"
+      :row-key="dataTable.primaryKey"
+      show-header
+      stripe
+    >
+      <el-table-column type="index" width="60" align="center" label="编号" />
+      <slot name="table-columns" :dataTable="dataTable">
+        <el-table-column
+          v-for="item in dataTable.getDisplayColumns()"
+          :column-key="item.attrName"
+          :key="item.attrName"
+          :label="item.title"
+          :prop="item.attrName"
+          :min-width="item.width"
+          :align="item.align"
+        >
+          <template #default="{ row, $index }">
+            <slot
+              :name="'table-col-' + item.attrName"
+              :row="row"
+              :index="$index"
+              :column="item"
+              :dataTable="dataTable"
+            >
+              <DynamicComponent :column="item" :record="row" />
+            </slot>
+          </template>
+        </el-table-column>
+      </slot>
+      <template #append>
+        <slot name="table-append" :dataTable="dataTable"></slot>
+      </template>
+    </el-table>
+    <div :class="ns.be('card', 'footer')">
+      <div class="left">
+        <div class="pagination-info">
+          共<b>{{ dataTable.totalRecCount }}</b
+          >条记录 | 当前第<b>{{ dataTable.pageNum }}</b
+          >页
+        </div>
+      </div>
+      <div class="right">
+        <el-pagination
+          :hide-on-single-page="true"
+          :currentPage="dataTable.pageNum"
+          @current-change="dataTable.pageTo($event)"
+          :page-size="dataTable.pageSize"
+          background
+          layout="prev, pager, next, jumper"
+          :total="dataTable.totalRecCount"
+        />
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import { inject } from 'vue';
+import { dataTableKey, useNamespace } from 'web-base-client-vue';
+import DynamicComponent from './dynamic-component.js';
+export default {
+  name: 'BwaDataTableCard',
+  components: { DynamicComponent },
+  setup() {
+    //创建dataTable
+    const dataTable = inject(dataTableKey);
+
+    const ns = useNamespace('datatable');
+
+    return { dataTable, ns };
+  },
+};
+</script>

package/src/data-table/data-table-column.vue

@@ -0,0 +1,52 @@
+<template>
+  <ElTableColumn
+    :align="align"
+    :show-overflow-tooltip="showOverflowTooltip"
+    v-bind="attrs"
+  >
+    <template #header="{ column, $index }">
+      <slot name="header" :column="column" :$index="$index">{{ column.label }}</slot>
+    </template>
+
+    <template #default="{ row, $index }">
+      <slot
+        v-if="$index !== -1"
+        :row="row"
+        :index="$index"
+        :column="column"
+        :dataTable="dataTable"
+      >
+      </slot>
+    </template>
+  </ElTableColumn>
+</template>
+
+<script setup>
+import { ElTableColumn } from 'element-plus';
+import { inject, useAttrs } from 'vue';
+import { dataTableKey } from 'web-base-client-vue';
+
+defineOptions({ name: 'BwaDataTableColumn' });
+
+const props = defineProps({
+  name: {
+    type: String,
+  },
+  align: {
+    type: String,
+    default: 'center',
+  },
+  showOverflowTooltip: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const attrs = useAttrs();
+
+const dataTable = inject(dataTableKey);
+
+const column =
+  dataTable.displayColumns.find((column) => column.attrName === props.name) ??
+  null;
+</script>