mooho-base-admin-plus 0.1.0

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

@@ -0,0 +1,206 @@
+<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" show-checkbox></Tree>
+    </div>
+    <template #footer>
+      <div>
+        <Button type="primary" custom-icon="fa fa-save" @click="finish">确定</Button>
+        <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, columns) => {
+    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 + ')',
+        checked: columns.some(column => {
+          return column.code === item.code;
+        }),
+        children: convertList(item.columns, columns)
+      };
+    });
+  };
+
+  // 聚合属性列表对象
+  var convertGroup = (nodes, columns, 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 + ')',
+        checked: columns.some(column => {
+          return column.code === 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 + ')',
+            checked: columns.some(column => {
+              return column.code === objProperty;
+            }),
+            children: convertList(node.columns, columns)
+          });
+        }
+      }
+    });
+
+    return results;
+  };
+
+  // 获取选中项目
+  var getChecked = data => {
+    let checked = [];
+
+    data.forEach(item => {
+      if (item.checked) {
+        // 外键字段
+        if (item.column.dataType === 'BigInteger') {
+          let obj = data.find(x => {
+            return x.column.code + 'ID' === item.column.code;
+          });
+          if (obj) {
+            item.column.objColumn = obj.column;
+          }
+        }
+
+        checked.push({
+          ...item.column
+        });
+      }
+
+      if (item.children) {
+        checked = checked.concat(getChecked(item.children));
+      }
+    });
+
+    return checked;
+  };
+
+  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;
+  };
+
+  export default {
+    mixins: [mixinPage],
+    components: {},
+    data() {
+      return {
+        data: [],
+        columns: null,
+        opened: false,
+        callback: null
+      };
+    },
+    props: {},
+    computed: {},
+    methods: {
+      async open(dataView, columns, 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, columns, groupColumns);
+          } else {
+            this.data = convertList(res, columns);
+          }
+
+          // 聚合函数生成的字段
+          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 + ')',
+              checked: columns.some(column => {
+                return column.code === groupMethod.property;
+              })
+              // children: convertList(item.columns, columns, isGroupBy, groupColumns)
+            });
+          });
+        } else {
+          // 数据源
+          let res = await dataViewApi.queryColumnByDataSource(dataView.dataSource);
+          this.data = convertList(res, columns);
+        }
+
+        this.opened = true;
+        this.columns = columns;
+        this.callback = callback;
+      },
+      finish() {
+        let checked = getChecked(this.data);
+
+        this.callback(checked);
+        this.opened = false;
+      },
+      close() {
+        this.opened = false;
+      }
+    }
+  };
+</script>

package/src/components/view/condition-edit.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <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">Condition Setting</span>
+        </div>
+      </template>
+      <div class="ivu-ml-8 ivu-mr-8">
+        <Form ref="form" :model="data" label-position="top" label-colon="：" class="ivu-mt" :rules="rules" @submit.prevent>
+          <Row :gutter="24" type="flex">
+            <Col v-bind="grid24">
+              <FormItem label="判断条件" key="type" prop="type">
+                <RadioGroup v-model="data.type" @on-change="onTypeChange">
+                  <Radio v-for="item in getEnumList('ConditionType')" :key="item.id" :label="item.id">{{ item.name }}</Radio>
+                </RadioGroup>
+              </FormItem>
+            </Col>
+            <Col v-bind="grid24" v-if="data.type == 'Expression'">
+              <FormItem label="表达式" key="expression" prop="expression">
+                <Input type="text" v-model="data.expression" maxlength="500" />
+              </FormItem>
+            </Col>
+          </Row>
+        </Form>
+        <div v-show="data.type == 'Condition'">
+          <Divider :plain="true" dashed orientation="left" size="small">
+            <span class="title">条件</span>
+          </Divider>
+          <view-table ref="conditionTable" :static="true" view-code="ColumnCondition" :pageEnable="false" :embedded="true">
+            <template #column="{ row, code }">
+              <template v-if="code == 'code'">
+                <Input type="text" size="small" v-model="row.code">
+                  <template #prepend>
+                    <Button size="small" custom-icon="fa fa-search" @click="openColumnSelect(row)"></Button>
+                  </template>
+                </Input>
+              </template>
+            </template>
+          </view-table>
+        </div>
+      </div>
+      <template #footer>
+        <div>
+          <Button type="primary" custom-icon="fa fa-check" @click="save">确定</Button>
+          <Button type="default" custom-icon="fa fa-times" @click="opened = false">关闭</Button>
+        </div>
+      </template>
+    </Modal>
+    <column-check ref="columnCheck" />
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import columnCheck from './column-check';
+
+  export default {
+    mixins: [mixinPage],
+    components: { columnCheck },
+    data() {
+      return {
+        parentData: null,
+        jsonKey: null,
+        checkKey: null,
+        json: null,
+        model: null,
+        data: {},
+        opened: false,
+        rules: {
+          expression: {
+            type: 'string',
+            required: true,
+            message: '请输入表达式',
+            trigger: 'blur,change'
+          }
+        }
+      };
+    },
+    async created() {},
+    props: {},
+    computed: {},
+    methods: {
+      // 打开
+      open(parentData, jsonKey, checkKey, model) {
+        this.parentData = parentData;
+        this.jsonKey = jsonKey;
+        this.checkKey = checkKey;
+        let json = parentData[jsonKey];
+        if (!!(json || '').trim()) {
+          this.data = JSON.parse(json);
+        } else {
+          this.data = {
+            type: parentData[checkKey] ? 'True' : 'False'
+          };
+        }
+
+        this.model = model;
+        this.onTypeChange();
+        this.opened = true;
+        this.$refs.form.resetFields();
+      },
+      // 类型变更
+      onTypeChange() {
+        if (this.data.type == 'Condition') {
+          if (!this.data.condition) {
+            this.data.condition = [];
+          }
+
+          this.$refs.conditionTable.loadData(this.data.condition);
+        }
+
+        //this.$forceUpdate();
+      },
+      // 打开变量字段选择界面
+      openColumnSelect(row) {
+        if (this.model != null) {
+          this.$refs.columnCheck.open(this.model, checked => {
+            row.code = checked.code;
+            //this.$forceUpdate();
+          });
+        }
+      },
+      // 保存
+      async save() {
+        let isOK = await this.$refs.form.validate();
+
+        if (!isOK) {
+          this.error('有内容不符合要求，请正确填写！');
+          return;
+        }
+
+        if (this.data.type == 'Condition') {
+          if (!this.$refs.conditionTable.validate()) {
+            return;
+          }
+
+          let condition = this.$refs.conditionTable.getData();
+
+          if (condition.length == 0) {
+            this.error('至少需要包含一项条件！');
+            return;
+          }
+
+          this.data.condition = this.$refs.conditionTable.getData();
+        } else {
+          this.data.condition = [];
+        }
+
+        this.parentData[this.jsonKey] = JSON.stringify(this.data);
+
+        if (this.data.type == 'True') {
+          this.parentData[this.checkKey] = true;
+        } else if (this.data.type == 'False') {
+          this.parentData[this.checkKey] = false;
+        } else {
+          this.parentData[this.checkKey] = null;
+        }
+
+        this.opened = false;
+      }
+    }
+  };
+</script>