mooho-base-admin-plus 0.1.0

package/src/components/input/dialog-select.vue

@@ -0,0 +1,301 @@
+<template>
+  <div>
+    <Input
+      type="text"
+      :size="size"
+      readonly
+      :clearable="!readonly"
+      v-model="selected"
+      :style="{ width: controlWidth == null ? null : controlWidth + 'px' }"
+      @on-focus="dialogSelectOpen()"
+      @on-clear="dialogSelectRemove()"
+    >
+      <template #prepend>
+        <Button :size="size" custom-icon="fa fa-search" @click="dialogSelectOpen()"></Button>
+      </template>
+    </Input>
+    <modal-table ref="dialogTable" :view-code="source" :selectEnable="multi" :footerEnable="multi" v-if="dialogActive">
+      <template #command="{ row }">
+        <Button size="small" v-if="!multi" type="primary" custom-icon="fa fa-check" @click="dialogCheck(row)">选择</Button>
+      </template>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="multiSave">确定</Button>
+        <Button type="default" custom-icon="fa fa-times" @click="close()">关闭</Button>
+      </template>
+    </modal-table>
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import { mapActions } from 'vuex';
+  import modelApi from '../../api/model';
+  import customModelApi from '../../api/customModel';
+  import dataSourceApi from '../../api/dataSource';
+
+  /**
+   * @displayName dialog-select 弹出选择
+   */
+  export default {
+    mixins: [mixinPage],
+    data() {
+      return {
+        //changed: false,
+        selected: null,
+        selectedData: null,
+        dialogActive: false
+      };
+    },
+    props: {
+      /**
+       * @model
+       */
+      value: {
+        type: String
+      },
+      /**
+       * 数据源
+       */
+      source: {
+        type: String
+      },
+      /**
+       * 大小
+       * @values small, default, large
+       */
+      size: {
+        type: String
+      },
+      /**
+       * 数据源数据列名
+       */
+      sourceDataCode: {
+        type: String
+      },
+      /**
+       * 数据源显示列名
+       */
+      sourceDisplayCode: {
+        type: String
+      },
+      /**
+       * 参数
+       */
+      param: {
+        type: Object
+      },
+      /**
+       * 只读
+       */
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 控件宽度
+       */
+      controlWidth: {
+        type: Number
+      },
+      /**
+       * 能否多选
+       */
+      multi: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {},
+    watch: {
+      value() {
+        this.showSelected();
+
+        //this.changed = false;
+      }
+    },
+    mounted() {
+      this.showSelected();
+    },
+    methods: {
+      ...mapActions('admin/dataView', { loadDataView: 'load' }),
+      // 显示选择项
+      showSelected() {
+        if (this.value == null) {
+          this.selected = null;
+          this.selectedData = null;
+          return;
+        } else if (this.multi) {
+          let filter = {
+            page: 1,
+            per: 999
+          };
+          filter[this.sourceDataCode] = JSON.parse(this.value).join(',');
+
+          this.loadDataView(this.source).then(async view => {
+            if (view.dataView.isCustom) {
+              let res = await customModelApi.query(view.dataView.model, filter);
+              if (res.data.length > 0) {
+                this.selected = res.data
+                  .map(item => {
+                    return this.parseData(item, this.sourceDisplayCode);
+                  })
+                  .join(',');
+                this.selectedData = res.data;
+
+                //this.$forceUpdate();
+              }
+            } else if (view.dataView.isDataSource) {
+              let res = await dataSourceApi.query(view.dataView.dataSource, filter);
+              if (res.table.length > 0) {
+                this.selected = res.table
+                  .map(item => {
+                    return this.parseData(item, this.sourceDisplayCode);
+                  })
+                  .join(',');
+                this.selectedData = res.table;
+
+                //this.$forceUpdate();
+              }
+            } else {
+              let res = await modelApi.query(view.dataView.model, filter);
+              if (res.data.length > 0) {
+                this.selected = res.data
+                  .map(item => {
+                    return this.parseData(item, this.sourceDisplayCode);
+                  })
+                  .join(',');
+                this.selectedData = res.data;
+
+                //this.$forceUpdate();
+              }
+            }
+          });
+        } else {
+          let filter = {
+            page: 1,
+            per: 1
+          };
+          filter[this.sourceDataCode] = this.value;
+
+          this.loadDataView(this.source).then(async view => {
+            if (view.dataView.isCustom) {
+              let res = await customModelApi.query(view.dataView.model, filter);
+              if (res.data.length > 0) {
+                this.selected = this.parseData(res.data[0], this.sourceDisplayCode);
+                this.selectedData = res.data[0];
+
+                //this.$forceUpdate();
+              }
+            } else if (view.dataView.isDataSource) {
+              let res = await dataSourceApi.query(view.dataView.dataSource, filter);
+              if (res.table.length > 0) {
+                this.selected = this.parseData(res.table[0], this.sourceDisplayCode);
+                this.selectedData = res.table[0];
+
+                //this.$forceUpdate();
+              }
+            } else {
+              let res = await modelApi.query(view.dataView.model, filter);
+              if (res.data.length > 0) {
+                this.selected = this.parseData(res.data[0], this.sourceDisplayCode);
+                this.selectedData = res.data[0];
+
+                //this.$forceUpdate();
+              }
+            }
+          });
+        }
+      },
+      // 弹出选择框
+      dialogSelectOpen() {
+        if (!this.readonly && this.source) {
+          this.dialogActive = true;
+
+          setTimeout(async () => {
+            if (this.multi) {
+              if (this.selectedData != null) {
+                this.$refs.dialogTable.setSelected(this.selectedData);
+              } else {
+                this.$refs.dialogTable.setSelected([]);
+              }
+            }
+
+            this.$refs.dialogTable.open(this.param);
+          });
+        }
+      },
+      // 弹出选择框选中
+      dialogCheck(row) {
+        /**
+         * 输入事件
+         * @property {object} value 选中的值 }
+         */
+        this.$emit('input', this.parseData(row, this.sourceDataCode));
+        this.selected = this.parseData(row, this.sourceDisplayCode);
+        this.selectedData = row;
+
+        //this.$forceUpdate();
+
+        /**
+         * 选中项变化事件
+         * @property {object} row 选中行 }
+         */
+        this.$emit('on-change', row);
+
+        this.$refs.dialogTable.close();
+      },
+      // 弹出选择框移除内容
+      dialogSelectRemove() {
+        /**
+         * 拖动完成事件
+         * @property {object} args { index1 来源行序号, index2 目标行序号 }
+         */
+        this.$emit('input', null);
+        this.selected = null;
+        this.selectedData = null;
+
+        this.$emit('on-change');
+      },
+      // 多选保存
+      multiSave() {
+        let selectedData = this.$refs.dialogTable.getSelected();
+        let data =
+          selectedData.length == 0
+            ? null
+            : selectedData.map(item => {
+                return this.parseData(item, this.sourceDataCode);
+              });
+
+        let displayData =
+          selectedData.length == 0
+            ? null
+            : selectedData
+                .map(item => {
+                  return this.parseData(item, this.sourceDisplayCode);
+                })
+                .join(',');
+
+        /**
+         * 输入事件
+         * @property {object} value 选中的值 }
+         */
+        this.$emit('input', JSON.stringify(data));
+        this.selected = displayData;
+        this.selectedData = data;
+
+        //this.$forceUpdate();
+
+        /**
+         * 选中项变化事件
+         * @property {object} row 选中行 }
+         */
+        this.$emit('on-change', data);
+
+        this.$refs.dialogTable.close();
+      },
+      // 关闭
+      close() {
+        this.$refs.dialogTable.close();
+      }
+    }
+  };
+</script>

package/src/components/input/item-select.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="1500">
+      <template #header>
+        <div>
+          <span class="title">{{ title }}</span>
+          <span class="description">{{ description }}</span>
+        </div>
+      </template>
+      <Row :gutter="24">
+        <Col span="14">
+          <Card :bordered="false" dis-hover>
+            <template #title>
+              <div>
+                <Avatar icon="md-apps" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
+                <span class="ivu-pl-8">待选择</span>
+              </div>
+            </template>
+            <view-table
+              ref="selectSourceTable"
+              :view-code="sourceViewCode"
+              :selectEnable="true"
+              :autoLoad="false"
+              :filter="sourceFilter"
+              :height="480"
+              @on-select-change="selectedChange"
+            ></view-table>
+          </Card>
+        </Col>
+        <Col span="10">
+          <Card :bordered="false" dis-hover>
+            <template #title>
+              <div>
+                <Avatar icon="md-checkmark" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
+                <span class="ivu-pl-8">已选择</span>
+              </div>
+            </template>
+
+            <view-table ref="selectTargetTable" :view-code="targetViewCode" :static="true" :height="480">
+              <template #command="{ index }">
+                <Button size="small" title="删除" type="warning" custom-icon="fa fa-trash-alt" @click="selectedRemove(index)"></Button>
+              </template>
+            </view-table>
+          </Card>
+        </Col>
+      </Row>
+      <template #footer>
+        <div>
+          <Button type="primary" custom-icon="fa fa-save" @click="seve">确定</Button>
+          <Button type="default" custom-icon="fa fa-times" @click="opened = false">关闭</Button>
+        </div>
+      </template>
+    </Modal>
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+
+  /**
+   * @displayName item-select 项目选择
+   */
+  export default {
+    mixins: [mixinPage],
+    data() {
+      return {
+        opened: false, // 是否打开
+        sourceFilter: {} // 来源筛选
+      };
+    },
+    created() {},
+    props: {
+      /**
+       * 来源视图代码
+       */
+      sourceViewCode: {
+        type: String
+      },
+      /**
+       * 目标视图代码
+       */
+      targetViewCode: {
+        type: String
+      },
+      /**
+       * 标题
+       */
+      title: {
+        type: String,
+        default: '明细选择'
+      },
+      /**
+       * 描述
+       */
+      description: {
+        type: String,
+        default: 'Item Select'
+      }
+    },
+    computed: {},
+    methods: {
+      /**
+       * 初始化
+       *
+       * @param {string} sourceViewCode 来源视图代码
+       * @param {string} targetViewCode 目标视图代码
+       * @param {function} callback 完成后回调方法
+       * @public
+       */
+      init(sourceViewCode, targetViewCode, callback) {
+        this.$refs.selectSourceTable.init(sourceViewCode, () => {
+          this.$refs.selectSourceTable.loadData();
+
+          this.$refs.selectTargetTable.init(targetViewCode, () => {
+            this.setSelected([]);
+
+            if (typeof callback === 'function') {
+              callback();
+            }
+          });
+        });
+      },
+      /**
+       * 打开
+       *
+       * @public
+       */
+      open() {
+        this.opened = true;
+      },
+      /**
+       * 关闭
+       *
+       * @public
+       */
+      close() {
+        this.opened = false;
+      },
+      /**
+       * 获取已选项
+       *
+       * @public
+       */
+      getSelected() {
+        return this.$refs.selectTargetTable.data;
+      },
+      /**
+       * 设置已选项
+       *
+       * @param {object} data 已选项
+       * @public
+       */
+      setSelected(data) {
+        this.$refs.selectTargetTable.loadData(data);
+        this.$refs.selectSourceTable.setSelected(data);
+      },
+      /**
+       * 刷新来源数据
+       *
+       * @param {object} filter 筛选项
+       * @public
+       */
+      loadSource(filter) {
+        for (let key in this.sourceFilter) {
+          delete this.sourceFilter[key];
+        }
+
+        if (filter) {
+          for (let key in filter) {
+            this.sourceFilter[key] = filter[key];
+          }
+        }
+
+        this.$refs.selectSourceTable.loadData();
+      },
+      selectedChange() {
+        let selected = this.$refs.selectSourceTable.getSelected();
+
+        this.$refs.selectTargetTable.loadData(selected);
+      },
+      selectedRemove(index) {
+        let selectedSource = this.$refs.selectTargetTable.data;
+        selectedSource.splice(index, 1);
+        this.$refs.selectTargetTable.loadData(selectedSource);
+
+        this.$refs.selectSourceTable.setSelected(selectedSource);
+      },
+      seve() {
+        /**
+         * 保存
+         */
+        this.$emit('save');
+      }
+    }
+  };
+</script>

package/src/components/link/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <a
+    :href="linkUrl"
+    :target="target"
+    class="i-link"
+    :class="{ 'i-link-color': !linkColor }"
+    @click.exact="handleClickItem($event, false)"
+    @click.ctrl="handleClickItem($event, true)"
+    @click.meta="handleClickItem($event, true)"
+  >
+    <slot></slot>
+  </a>
+</template>
+<script>
+  import mixinsLink from 'view-ui-plus/src/mixins/link';
+
+  export default {
+    name: 'i-link',
+    mixins: [mixinsLink],
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 开启后，链接颜色为默认的蓝色，默认关闭为继承效果
+      linkColor: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      handleClickItem(event, new_window = false) {
+        if (this.disabled) {
+          event.preventDefault();
+          return;
+        }
+
+        this.handleCheckClick(event, new_window);
+      }
+    }
+  };
+</script>
+<style lang="less">
+  .i-link {
+    cursor: pointer;
+    &-color {
+      &,
+      &:hover,
+      &:active {
+        color: inherit;
+      }
+    }
+  }
+</style>

package/src/components/richEditor/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <ckeditor
+    :model-value="value"
+    @update:model-value="$event => $emit('input', $event)"
+    :readOnly="readonly"
+    :style="{ width: width == null ? null : width + 'px' }"
+    :editorUrl="editorUrl"
+    :config="config"
+  ></ckeditor>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import util from '../../libs/util';
+
+  export default {
+    mixins: [mixinPage],
+    props: {
+      value: {
+        type: String
+      },
+      // 只读
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number
+      },
+      height: {
+        type: Number
+      },
+      editorUrl: {
+        type: String,
+        default: 'https://cdn.ckeditor.com/4.13.0/full/ckeditor.js'
+      }
+    },
+    computed: {
+      config() {
+        const token = util.cookies.get('token');
+        return {
+          height: this.height == null ? 500 : this.height,
+          fileTools_requestHeaders: {
+            Authorization: 'Bearer ' + token
+          },
+          toolbar: [
+            { name: 'document', items: ['Preview', 'Print'] },
+            { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
+            { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
+            {
+              name: 'basicstyles',
+              items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat']
+            },
+            {
+              name: 'paragraph',
+              items: [
+                'NumberedList',
+                'BulletedList',
+                '-',
+                'Outdent',
+                'Indent',
+                '-',
+                'Blockquote',
+                'CreateDiv',
+                '-',
+                'JustifyLeft',
+                'JustifyCenter',
+                'JustifyRight',
+                'JustifyBlock',
+                '-',
+                'BidiLtr',
+                'BidiRtl'
+              ]
+            },
+            { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
+            { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
+            { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
+            { name: 'colors', items: ['TextColor', 'BGColor'] },
+            { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
+          ],
+          filebrowserUploadUrl: this.apiBaseURL + 'api/CKEditor?r=1'
+        };
+      }
+    },
+    methods: {}
+  };
+</script>