mooho-base-admin-plus 0.1.0

package/src/components/view/form-setting.vue

@@ -0,0 +1,247 @@
+<template>
+  <div>
+    <modal-table ref="table" :static="true" :setting-enable="false" :footer-enable="true" :draggable="true" :sticky="true" @on-drag-drop="dragDrop" v-if="active">
+      <template #command="{ row, index }">
+        <Button size="small" title="编辑" type="primary" ghost custom-icon="fa fa-edit" @click="edit(row, index)"></Button>
+        <Button size="small" title="上移" type="primary" ghost custom-icon="fa fa-chevron-up" @click="up(row, index)"></Button>
+        <Button size="small" title="下移" type="primary" ghost custom-icon="fa fa-chevron-down" @click="down(row, index)"></Button>
+        <Button size="small" title="移除" type="primary" ghost custom-icon="fa fa-times" @click="remove(row, index)"></Button>
+      </template>
+      <template #footer>
+        <Button type="primary" ghost custom-icon="fa fa-eye" @click="layoutMode">预览模式</Button>
+        <Button type="primary" v-if="!dataView.isVirtual" ghost custom-icon="fa fa-indent" @click="openColumnSelect">选择字段</Button>
+        <Button type="primary" custom-icon="fa fa-bookmark" @click="createVirtual">虚拟字段</Button>
+        <Button type="primary" custom-icon="fa fa-save" v-if="!isSetting" @click="save">保存</Button>
+        <Button type="error" custom-icon="fa fa-save" v-if="isSetting" @click="globalSave">全局保存</Button>
+        <Button type="error" custom-icon="fa fa-cog" v-if="isSetting" @click="setting">表单设置</Button>
+      </template>
+    </modal-table>
+    <column-select ref="columnSelect" />
+    <column-edit ref="columnEdit" view-type="FormView" />
+    <modal-form ref="setting" view-code="FormViewSetting" v-if="isSetting">
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="saveSetting">保存</Button>
+      </template>
+    </modal-form>
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import columnSelect from './column-select';
+  import columnEdit from './column-edit';
+  import { mapActions } from 'vuex';
+
+  export default {
+    mixins: [mixinPage],
+    components: { columnSelect, columnEdit },
+    data() {
+      return {
+        active: false,
+        dataView: {}
+      };
+    },
+    created() {},
+    props: {
+      // 是否公共配置界面
+      isSetting: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {},
+    methods: {
+      ...mapActions('admin/dataView', {
+        saveDataView: 'save',
+        saveDataViewSetting: 'saveSetting'
+      }),
+      // 打开
+      open(dataView, columns) {
+        this.dataView = dataView;
+        this.active = true;
+
+        setTimeout(async () => {
+          await this.$refs.table.init('FormViewColumn');
+          this.$refs.table.loadData(columns);
+          this.$refs.table.open();
+        });
+      },
+      // 关闭
+      close() {
+        this.$refs.table.close();
+      },
+      // 打开字段设置界面
+      edit(row, index) {
+        this.$refs.columnEdit.open(row, index, this.$refs.table.data, data => {
+          let columns = this.$refs.table.data;
+          columns.splice(index, 1, data);
+
+          this.$refs.table.loadData(columns);
+        });
+      },
+      // 上移
+      up(row, index) {
+        let columns = this.$refs.table.data;
+        if (index > 0) {
+          columns.splice(index, 1);
+          columns.splice(index - 1, 0, row);
+
+          this.$refs.table.loadData(columns);
+        }
+      },
+      // 下移
+      down(row, index) {
+        let columns = this.$refs.table.data;
+        if (index < columns.length - 1) {
+          columns.splice(index, 1);
+          columns.splice(index + 1, 0, row);
+
+          this.$refs.table.loadData(columns);
+        }
+      },
+      // 拖动完成
+      dragDrop({ index1, index2 }) {
+        if (index1 != index2) {
+          let columns = this.$refs.table.data;
+          let row = columns[index1];
+
+          columns.splice(index1, 1);
+          columns.splice(index2, 0, row);
+        }
+      },
+      // 移除
+      remove(row, index) {
+        let columns = this.$refs.table.data;
+        columns.splice(index, 1);
+
+        this.$refs.table.loadData(columns);
+      },
+      // 打开字段选择界面
+      openColumnSelect() {
+        let columns = this.$refs.table.data;
+        this.$refs.columnSelect.open(this.dataView, columns, checked => {
+          // 移除未勾选的
+          columns = columns.filter(column => {
+            return (
+              checked.some(item => {
+                return column.code === item.code;
+              }) || column.isVirtual
+            );
+          });
+
+          // 添加新勾选的
+          checked.forEach(item => {
+            if (
+              !columns.some(column => {
+                return column.code === item.code;
+              })
+            ) {
+              columns.push({
+                code: item.code,
+                name: item.name,
+                dataType: item.dataType,
+                dataView: this.dataView,
+                isShow: true,
+                controlType: this.getDefaultControlType(item.dataType),
+                columnWidth: 'Column6', // 默认宽度1/2
+                source: item.objColumn != null ? item.objColumn.dataType : null,
+                sourceDataCode: item.objColumn != null ? 'id' : null,
+                sourceModel: item.objColumn != null ? item.objColumn.dataType : null,
+                sourceDisplayCode:
+                  item.objColumn != null &&
+                  item.objColumn.columns.some(function (column) {
+                    return column.code === item.objColumn.code + '.name';
+                  })
+                    ? 'name'
+                    : null
+              });
+            }
+          });
+
+          setTimeout(() => {
+            this.$refs.table.loadData(columns);
+          });
+        });
+      },
+      // 创建虚拟字段
+      createVirtual() {
+        let columns = this.$refs.table.data;
+
+        let row = {
+          isShow: true,
+          isVirtual: true,
+          dataType: 'String',
+          dataView: this.dataView
+        };
+
+        this.$refs.columnEdit.open(row, -1, this.$refs.table.data, data => {
+          columns.push(data);
+          this.$refs.table.loadData(columns);
+        });
+      },
+      // 全局保存
+      globalSave() {
+        this.confirm('确定要保存全局设置吗？', () => {
+          this.confirm('本次操作将修改全局设置，确认要保存吗？', async () => {
+            await this.saveDataView({
+              code: this.dataView.code,
+              columns: this.$refs.table.data
+            });
+
+            this.$emit('on-change', this.dataView.code);
+            this.success('保存成功！', () => {
+              this.$refs.table.close();
+            });
+          });
+        });
+      },
+      // 保存
+      save() {
+        this.confirm('确定要保存设置吗？', async () => {
+          await this.saveDataView({
+            code: this.dataView.code,
+            columns: this.$refs.table.data
+          });
+
+          this.success('保存成功！', () => {
+            this.$refs.table.close();
+          });
+        });
+      },
+      // 设置
+      setting() {
+        this.$refs.setting.open(this.copy(this.dataView));
+      },
+      // 保存设置
+      saveSetting() {
+        this.confirm('确定要保存设置吗？', async () => {
+          let res = await this.saveDataViewSetting(this.$refs.setting.data);
+          this.dataView = res.dataView;
+
+          this.$emit('on-change', this.dataView.code);
+          this.success('保存成功！', () => {
+            this.$refs.setting.close();
+          });
+        });
+      },
+      // 切换至预览模式
+      layoutMode() {
+        this.$emit('layout-mode', {
+          dataView: this.dataView,
+          columns: this.$refs.table.data
+        });
+      },
+      // 获取默认控件类型
+      getDefaultControlType(dataType) {
+        if (dataType == 'Integer' || dataType == 'BigInteger' || dataType == 'Decimal' || dataType == 'Float' || dataType == 'Double') {
+          return 'NumberInput';
+        } else if (dataType == 'Boolean') {
+          return 'Check';
+        } else if (dataType == 'DateTime') {
+          return 'Date';
+        } else {
+          return 'TextInput';
+        }
+      }
+    }
+  };
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <modal-table ref="table" view-code="GroupColumn" :static="true" :footer-enable="true" @create="editItem()" @edit="({ row, index }) => editItem(row, index)">
+      <template #command="{ row, index }">
+        <Button size="small" title="删除" type="warning" custom-icon="fa fa-trash-alt" @click="removeItem(row, index)"></Button>
+      </template>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="save">保存</Button>
+      </template>
+    </modal-table>
+    <modal-form ref="form" view-code="GroupColumnEdit">
+      <template #column="{ data, code }">
+        <div v-if="code == 'columnExp'">
+          <Input type="text" v-model="data.columnExp" :readonly="true" @click="columnCheck(model, data)">
+            <template #prepend>
+              <Button custom-icon="fa fa-search" @click="columnCheck(model, data)"></Button>
+            </template>
+          </Input>
+        </div>
+      </template>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="saveItem">保存</Button>
+      </template>
+    </modal-form>
+    <column-check ref="columnCheck" />
+  </div>
+</template>
+
+<script>
+  import mixinPage from '../../mixins/page';
+  import columnCheck from './column-check';
+
+  export default {
+    mixins: [mixinPage],
+    components: { columnCheck },
+    props: {},
+    computed: {},
+    data() {
+      return {
+        model: null,
+        data: [],
+        editIndex: null,
+        callback: null
+      };
+    },
+    async created() {},
+    methods: {
+      open(model, json, callback) {
+        if (!(model || '').trim()) {
+          this.error('请先选择模型！');
+          return;
+        }
+
+        this.model = model;
+        this.callback = callback;
+
+        if (json) {
+          this.data = JSON.parse(json);
+        } else {
+          this.data = [];
+        }
+        this.$refs.table.loadData(this.data);
+        this.$refs.table.open();
+      },
+      editItem(row, index) {
+        this.editIndex = index;
+        this.$refs.form.open(row);
+      },
+      async saveItem() {
+        let isOK = await this.$refs.form.validate();
+
+        if (!isOK) {
+          this.error('有内容不符合要求，请正确填写！');
+        } else {
+          if (this.editIndex == null) {
+            this.data.push(this.$refs.form.data);
+          } else {
+            this.data.splice(this.editIndex, 1, this.$refs.form.data);
+          }
+          this.$refs.table.loadData(this.data);
+          this.$refs.form.close();
+        }
+      },
+      removeItem(row, index) {
+        this.data.splice(index, 1);
+        this.$refs.table.loadData(this.data);
+      },
+      save() {
+        let json = this.data.length > 0 ? JSON.stringify(this.data) : null;
+        this.callback(json);
+        this.$refs.table.close();
+      },
+      columnCheck(model, data) {
+        this.$refs.columnCheck.open(model, column => {
+          data.columnExp = column.code;
+          data.property = column.code.split('.').pop();
+          data.dataType = column.dataType;
+
+          this.$refs.form.refresh();
+        });
+      }
+    }
+  };
+</script>

package/src/components/view/group-method.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <modal-table ref="table" view-code="GroupMethod" :static="true" :footer-enable="true" @create="editItem()" @edit="({ row, index }) => editItem(row, index)">
+      <template #command="{ row, index }">
+        <Button size="small" title="删除" type="warning" custom-icon="fa fa-trash-alt" @click="removeItem(row, index)"></Button>
+      </template>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="save">保存</Button>
+      </template>
+    </modal-table>
+    <modal-form ref="form" view-code="GroupMethodEdit">
+      <template #column="{ data, code }">
+        <div v-if="code == 'columnExp'">
+          <Input type="text" v-model="data.columnExp" :readonly="true" @click="columnCheck(model, data)">
+            <template #prepend>
+              <Button custom-icon="fa fa-search" @click="columnCheck(model, data)"></Button>
+            </template>
+          </Input>
+        </div>
+      </template>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="saveItem">保存</Button>
+      </template>
+    </modal-form>
+    <column-check ref="columnCheck" />
+  </div>
+</template>
+
+<script>
+  import mixinPage from '../../mixins/page';
+  import columnCheck from './column-check';
+
+  export default {
+    mixins: [mixinPage],
+    components: { columnCheck },
+    props: {},
+    computed: {},
+    data() {
+      return {
+        model: null,
+        data: [],
+        editIndex: null,
+        callback: null
+      };
+    },
+    async created() {},
+    methods: {
+      open(model, json, callback) {
+        if (!(model || '').trim()) {
+          this.error('请先选择模型！');
+          return;
+        }
+
+        this.model = model;
+        this.callback = callback;
+
+        if (json) {
+          this.data = JSON.parse(json);
+        } else {
+          this.data = [];
+        }
+        this.$refs.table.loadData(this.data);
+        this.$refs.table.open();
+      },
+      editItem(row, index) {
+        this.editIndex = index;
+        this.$refs.form.open(row);
+      },
+      async saveItem() {
+        let isOK = await this.$refs.form.validate();
+
+        if (!isOK) {
+          this.error('有内容不符合要求，请正确填写！');
+        } else {
+          if (this.editIndex == null) {
+            this.data.push(this.$refs.form.data);
+          } else {
+            this.data.splice(this.editIndex, 1, this.$refs.form.data);
+          }
+          this.$refs.table.loadData(this.data);
+          this.$refs.form.close();
+        }
+      },
+      removeItem(row, index) {
+        this.data.splice(index, 1);
+        this.$refs.table.loadData(this.data);
+      },
+      save() {
+        let json = this.data.length > 0 ? JSON.stringify(this.data) : null;
+        this.callback(json);
+        this.$refs.table.close();
+      },
+      columnCheck(model, data) {
+        this.$refs.columnCheck.open(model, column => {
+          data.columnExp = column.code;
+          data.property = column.code.split('.').pop();
+          data.dataType = column.dataType;
+
+          //this.$forceUpdate();
+        });
+      }
+    }
+  };
+</script>

package/src/components/view/mixin.js

@@ -0,0 +1,72 @@
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {
+    // 获取表格宽度
+    getGrid(columnWidth) {
+      switch (columnWidth) {
+        case 'Column12':
+          return this.grid24;
+        case 'Column9':
+          return this.grid18;
+        case 'Column8':
+          return this.grid16;
+        case 'Column6':
+          return this.grid12;
+        case 'Column4':
+          return this.grid8;
+        case 'Column3':
+          return this.grid6;
+        case 'Column2':
+          return this.grid4;
+        default:
+          return this.grid6;
+      }
+    },
+    // 获取参数
+    getParam(data, column, parentData) {
+      let param = {};
+
+      if (!!(column.param || '').trim()) {
+        // 有参数
+        param = JSON.parse(column.param);
+
+        // 填充参数
+        for (let key in param) {
+          // 常量
+          let index = param[key].search(/^\[.*?\]$/);
+          if (index === 0) {
+            param[key] = param[key].substring(1, param[key].length - 1);
+            continue;
+          }
+
+          // 变量
+          if (param[key].substr(0, 2) == '$.' && parentData != null) {
+            // 父对象
+            let paramData = this.parseData(parentData, param[key].substr(2));
+
+            if (paramData != null) {
+              param[key] = paramData;
+              continue;
+            }
+          } else {
+            // 自身对象
+            let paramData = this.parseData(data, param[key]);
+
+            if (paramData != null) {
+              param[key] = paramData;
+              continue;
+            }
+          }
+
+          // 参数不完整
+          return null;
+        }
+      }
+
+      return param;
+    }
+  }
+};