mooho-base-admin-plus 0.1.0

package/src/components/upload/file-upload.vue

@@ -0,0 +1,84 @@
+<template>
+  <Upload
+    :action="fileUploadURL"
+    :headers="uploadHeaders"
+    :accept="accept"
+    :show-upload-list="false"
+    :on-success="importFileSuccess"
+    :on-error="importFileError"
+    :before-upload="beforeUpload"
+    style="display: inline-block; margin-left: 8px; margin-right: 8px"
+  >
+    <slot></slot>
+  </Upload>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import { mapMutations } from 'vuex';
+
+  /**
+   * @displayName file-upload 单文件上传
+   */
+  export default {
+    mixins: [mixinPage],
+    data() {
+      return {
+        opened: false, // 是否打开
+        sourceFilter: {} // 来源筛选
+      };
+    },
+    created() {},
+    props: {
+      /**
+       * 请求地址
+       */
+      url: {
+        type: String
+      },
+      /**
+       * 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传
+       */
+      beforeUploadFunc: {
+        type: Function
+      },
+      /**
+       * 接受上传的文件类型
+       */
+      accept: {
+        type: String
+      }
+    },
+    computed: {
+      fileUploadURL() {
+        return this.apiBaseURL + this.url;
+      }
+    },
+    methods: {
+      ...mapMutations('admin/loader', ['start', 'end']),
+      // 导入之前
+      beforeUpload(file) {
+        if (typeof this.beforeUploadFunc == 'function') {
+          if (!this.beforeUploadFunc(file)) {
+            return false;
+          }
+        }
+
+        this.start();
+      },
+      // 导入成功
+      importFileSuccess(res) {
+        this.end();
+        /**
+         * 成功
+         * @property {object} res 返回数据
+         */
+        this.$emit('on-success', res);
+      },
+      // 导入失败
+      importFileError(error) {
+        this.end();
+        this.error(error.message);
+      }
+    }
+  };
+</script>

package/src/components/upload/upload-attachment.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <Upload
+      :action="uploadURL"
+      :headers="uploadHeaders"
+      :default-file-list="defaultList"
+      :before-upload="beforeUpload"
+      :on-success="onUploadSuccess"
+      :on-preview="onUploadPreview"
+      :on-remove="onUploadRemove"
+      :disabled="readonly"
+      :accept="accept"
+    >
+      <Button v-if="!readonly" :size="size" icon="ios-cloud-upload-outline">上传文件...</Button>
+    </Upload>
+    <Input type="text" :model-value="value" :size="size" v-show="false" />
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+
+  export default {
+    mixins: [mixinPage],
+    props: {
+      // 值
+      value: {
+        type: String
+      },
+      // 只读
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      // 最大上传数量
+      maxCount: {
+        type: Number
+      },
+      /**
+       * 大小
+       * @values small, default, large
+       */
+      size: {
+        type: String
+      },
+      /**
+       * 允许的文件类型
+       */
+      accept: {
+        type: String
+      }
+    },
+    computed: {
+      fileList() {
+        let list = [];
+        if (this.value && this.value !== '') {
+          try {
+            list = JSON.parse(this.value);
+          } catch (e) {
+            // console.log(e);
+          }
+        }
+
+        return list;
+      },
+      defaultList() {
+        return this.fileList.map(item => {
+          return {
+            ...item,
+            url: this.getAttachmentUrl(item.file, item.name)
+          };
+        });
+      }
+    },
+    methods: {
+      // 上传之前
+      beforeUpload() {
+        if (this.maxCount != null) {
+          let list = this.fileList;
+          if (list.length >= this.maxCount) {
+            this.error('数量不能大于' + this.maxCount + '！');
+            return false;
+          }
+        }
+      },
+      // 上传成功
+      onUploadSuccess(res, file) {
+        let list = this.fileList;
+
+        list.push({
+          file: file.response.data[0],
+          name: file.name,
+          user: this.info.id
+        });
+
+        this.$emit('input', JSON.stringify(list));
+      },
+      // 上传预览
+      onUploadPreview(file) {
+        window.location.href = this.getAttachmentUrl(file.file, file.name);
+      },
+      // 移除上传文件
+      onUploadRemove(file) {
+        let list = this.fileList;
+
+        let index = list.findIndex(item => {
+          return item.file === file.file;
+        });
+
+        list.splice(index, 1);
+
+        if (list.length === 0) {
+          this.$emit('input', null);
+        } else {
+          this.$emit('input', JSON.stringify(list));
+        }
+      }
+    }
+  };
+</script>

package/src/components/upload/upload-image.vue

@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <div class="form-image-group">
+      <div
+        class="form-image"
+        v-for="(item, index) in fileList"
+        :key="index"
+        :style="{ width: width == null ? '250px' : width + 'px', height: height == null ? '250px' : height + 'px' }"
+      >
+        <img v-if="item" :src="getImgUrl(item)" />
+        <div class="action" :style="{ width: width == null ? '250px' : width + 'px', height: height == null ? '250px' : height + 'px' }">
+          <Icon v-if="!readonly" custom="fa fa-times-circle" @click="removeImage(index)"></Icon>
+          <Icon v-if="!readonly && index < fileList.length - 1 && fileList.length > 1" custom="fa fa-arrow-circle-right" @click="forwardImage(index)"></Icon>
+          <Icon v-if="!readonly && index > 0 && fileList.length > 1" custom="fa fa-arrow-circle-left" @click="backwardImage(index)"></Icon>
+          <Icon custom="fa fa-eye" @click="previewImage(item)"></Icon>
+        </div>
+      </div>
+      <Upload v-if="!readonly" accept="image/*" :action="uploadURL" :headers="uploadHeaders" :show-upload-list="false" :before-upload="beforeUpload" :on-success="onUploadSuccess">
+        <div
+          class="form-image"
+          v-if="fileList.length < maxCount || maxCount == null"
+          :style="{ width: width == null ? '250px' : width + 'px', height: height == null ? '250px' : height + 'px' }"
+        >
+          <Icon custom="fa fa-plus-circle" color="#999" :style="{ 'font-size': width == null ? '25px' : width / 3 + 'px', cursor: 'pointer' }"></Icon>
+        </div>
+      </Upload>
+      <Input type="text" :model-value="value" v-show="false" />
+    </div>
+    <Modal title="预览" v-model="preview" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="70%">
+      <div style="text-align: center">
+        <a href="#" :download="imageUrl" onClick="return false;">
+          <img :src="getImgUrl(imageUrl)" v-if="preview" style="max-width: 100%" />
+        </a>
+      </div>
+      <template #footer>
+        <Button type="default" custom-icon="fa fa-times" @click="preview = false">关闭</Button>
+      </template>
+    </Modal>
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+
+  export default {
+    mixins: [mixinPage],
+    data() {
+      return {
+        preview: false,
+        imageUrl: null
+      };
+    },
+    props: {
+      // 值
+      value: {
+        type: String
+      },
+      // 只读
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      // 最大上传数量
+      maxCount: {
+        type: Number
+      },
+      // 图片宽度
+      width: {
+        type: Number
+      },
+      // 图片高度
+      height: {
+        type: Number
+      }
+    },
+    computed: {
+      // 文件列表
+      fileList() {
+        let list = [];
+        if (this.value && this.value !== '') {
+          try {
+            list = this.value.split(',');
+          } catch (e) {
+            // console.log(e);
+          }
+        }
+
+        return list;
+      },
+      // 显示列表
+      showList() {
+        if (this.fileList === []) {
+          return [null];
+        } else {
+          return this.fileList;
+        }
+      }
+    },
+    methods: {
+      // 上传之前
+      beforeUpload() {
+        if (this.maxCount != null) {
+          let list = this.fileList;
+          if (list.length >= this.maxCount) {
+            this.error('数量不能大于' + this.maxCount + '！');
+            return false;
+          }
+        }
+      },
+      // 上传成功
+      onUploadSuccess(res, file) {
+        let list = this.fileList;
+
+        list.push(file.response.data[0]);
+
+        this.$emit('input', list.join(','));
+      },
+      // 前移图片
+      forwardImage(index) {
+        let list = this.fileList;
+        if (index < list.length - 1) {
+          let id = list.splice(index, 1);
+          list.splice(index + 1, 0, id);
+
+          if (list.length === 0) {
+            this.$emit('input', null);
+          } else {
+            this.$emit('input', list.join(','));
+          }
+        }
+      },
+      // 后移图片
+      backwardImage(index) {
+        let list = this.fileList;
+        if (index > 0) {
+          let id = list.splice(index, 1);
+          list.splice(index - 1, 0, id);
+
+          if (list.length === 0) {
+            this.$emit('input', null);
+          } else {
+            this.$emit('input', list.join(','));
+          }
+        }
+      },
+      // 移除图片
+      removeImage(index) {
+        // this.confirm('确定要移除吗？', () => {
+        let list = this.fileList;
+
+        list.splice(index, 1);
+
+        if (list.length === 0) {
+          this.$emit('input', null);
+        } else {
+          this.$emit('input', list.join(','));
+        }
+        // })
+      },
+      // 预览
+      previewImage(item) {
+        this.imageUrl = item;
+        this.preview = true;
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  /* 图片 */
+  .form-image-group {
+    display: flex;
+  }
+
+  .form-image-group div + div {
+    margin-left: 4px;
+  }
+
+  .form-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: solid 1px #ccc;
+    margin-top: 8px;
+  }
+
+  .form-image img {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  .form-image .action {
+    /* display: block; */
+    display: none;
+    background-color: #000;
+    opacity: 0.75;
+    position: absolute;
+    float: right;
+  }
+
+  .form-image:hover .action {
+    display: block;
+  }
+
+  .form-image .action i {
+    float: right;
+    color: #fff;
+    font-size: 24px;
+    margin-top: 4px;
+    margin-right: 4px;
+    cursor: pointer;
+  }
+</style>

package/src/components/view/column-check.vue

@@ -0,0 +1,223 @@
+<template>
+  <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" :width="800">
+    <template #header>
+      <div>
+        <span class="title">字段选择</span>
+        <span class="description">Column Select</span>
+      </div>
+    </template>
+    <div class="ivu-ml-8 ivu-mr-8">
+      <Tree :data="data" @on-select-change="select"></Tree>
+    </div>
+    <template #footer>
+      <div>
+        <Button type="default" custom-icon="fa fa-times" @click="close">关闭</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import dataViewApi from '../../api/dataView';
+
+  // 转换为tree列表对象
+  var convertList = nodes => {
+    if (!nodes) {
+      return null;
+    }
+
+    return nodes.map(item => {
+      return {
+        column: {
+          code: item.code,
+          name: item.name,
+          dataType: item.dataType,
+          columns: item.columns
+        },
+        title: item.name + ' (' + item.code + ')',
+        children: convertList(item.columns)
+      };
+    });
+  };
+
+  // 聚合属性列表对象
+  var convertGroup = (nodes, groupColumns) => {
+    let results = [];
+
+    groupColumns.forEach(groupColumn => {
+      results.push({
+        column: {
+          code: groupColumn.property,
+          name: groupColumn.property,
+          dataType: groupColumn.dataType == 'DateTime' && groupColumn.dateTimeGroupType != 'Day' ? 'Integer' : groupColumn.dataType,
+          columns: []
+        },
+        title: groupColumn.property + ' (' + groupColumn.property + ')'
+        // children: convertGroup(item.columns, columns, isGroupBy, groupColumns)
+      });
+
+      if (groupColumn.property.endsWith('ID')) {
+        // 外键
+        let objColumnExp = groupColumn.columnExp.substr(0, groupColumn.columnExp.length - 2);
+        let objProperty = groupColumn.property.substr(0, groupColumn.property.length - 2);
+        let node = findNode(nodes, objColumnExp);
+
+        if (node != null) {
+          // 找到外键节点
+          results.push({
+            column: {
+              code: objProperty,
+              name: node.name,
+              dataType: node.dataType,
+              columns: node.columns
+            },
+            title: node.name + ' (' + objProperty + ')',
+            children: convertList(node.columns)
+          });
+        }
+      }
+    });
+
+    return results;
+  };
+
+  var findNode = (nodes, columnExp) => {
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].code == columnExp) {
+        return nodes[i];
+      }
+
+      if (nodes[i].columns) {
+        let node = findNode(nodes[i].columns, columnExp);
+        if (node) {
+          return node;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  // 获取对象字段
+  var getObjColumn = (code, data) => {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].column.code + 'ID' === code) {
+        return data[i].column;
+      }
+
+      if (data[i].children) {
+        let result = getObjColumn(code, data[i].children);
+        if (result) {
+          return result;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  export default {
+    mixins: [mixinPage],
+    components: {},
+    data() {
+      return {
+        data: [],
+        opened: false,
+        callback: null
+      };
+    },
+    props: {},
+    computed: {},
+    methods: {
+      // 打开字段选择
+      open(model, callback) {
+        dataViewApi.queryColumnByModel(model).then(data => {
+          // if (columns && columns.length > 0) {
+          //     data = data.filter(p => !columns.includes(p.code));
+          // }
+          this.data = convertList(data);
+          this.opened = true;
+        });
+
+        this.callback = callback;
+      },
+      // 根据视图代码打开选择字段
+      openViewCode(viewCode, callback) {
+        dataViewApi.queryColumnByView(viewCode).then(data => {
+          // if (columns && columns.length > 0) {
+          //     data = data.filter(p => !columns.includes(p.code));
+          // }
+          this.data = convertList(data);
+          this.opened = true;
+        });
+
+        this.callback = callback;
+      },
+      // 根据视图代码打开选择字段
+      openDataSourceFilter(dataSource, callback) {
+        dataViewApi.queryFilterByDataSource(dataSource).then(data => {
+          this.data = convertList(data);
+          this.opened = true;
+        });
+
+        this.callback = callback;
+      },
+      // 根据视图打开选择字段
+      async openView(dataView, callback) {
+        if (!dataView.isDataSource) {
+          // 对象
+          let res = await dataViewApi.queryColumnByModel(dataView.model);
+          let groupColumns = [];
+          let groupMethods = [];
+
+          if (dataView.isGroupBy) {
+            groupColumns = JSON.parse(dataView.groupColumn);
+            groupMethods = JSON.parse(dataView.groupMethod);
+
+            this.data = convertGroup(res, groupColumns);
+          } else {
+            this.data = convertList(res);
+          }
+
+          // 聚合函数生成的字段
+          groupMethods.forEach(groupMethod => {
+            this.data.push({
+              column: {
+                code: groupMethod.property,
+                name: groupMethod.property,
+                dataType: groupMethod.aggregateType == 'Count' ? 'Integer' : groupMethod.dataType
+              },
+              title: groupMethod.aggregateType + (groupMethod.aggregateType == 'Count' ? '' : ' - ' + groupMethod.columnExp) + ' (' + groupMethod.property + ')'
+              // children: convertList(item.columns, columns, isGroupBy, groupColumns)
+            });
+          });
+        } else {
+          // 数据源
+          let res = await dataViewApi.queryColumnByDataSource(dataView.dataSource);
+          this.data = convertList(res);
+        }
+
+        this.opened = true;
+        this.callback = callback;
+      },
+      select(selected, checked) {
+        if (checked.children) {
+          return;
+        }
+
+        let column = checked.column;
+        // 外键字段
+        if (column.dataType === 'BigInteger') {
+          column.objColumn = getObjColumn(column.code, this.data);
+        }
+
+        this.callback(column);
+        this.opened = false;
+        //this.$forceUpdate();
+      },
+      close() {
+        this.opened = false;
+      }
+    }
+  };
+</script>