mooho-base-admin-plus 0.1.0

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

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <modal-table ref="table" view-code="TableFilterColumn" :static="true" :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-plus" @click="add">新增</Button>
+        <Button type="primary" custom-icon="fa fa-save" @click="save">保存</Button>
+      </template>
+    </modal-table>
+    <filter-edit ref="filterEdit" :data-view="dataView" />
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import filterEdit from './filter-edit';
+  import { mapActions } from 'vuex';
+
+  export default {
+    mixins: [mixinPage],
+    components: { filterEdit },
+    data() {
+      return {
+        active: false,
+        dataView: {}
+      };
+    },
+    created() {},
+    props: {},
+    computed: {},
+    methods: {
+      ...mapActions('admin/dataView', {
+        resetDataView: 'reset',
+        saveDataView: 'save',
+        saveUserView: 'saveUserView',
+        saveDataViewSetting: 'saveSetting',
+        saveFilterColumn: 'saveFilterColumn'
+      }),
+      // 打开
+      open(dataView, columns) {
+        this.dataView = dataView;
+        this.active = true;
+
+        setTimeout(async () => {
+          this.$refs.table.loadData(columns);
+          this.$refs.table.open();
+        });
+      },
+      // 新增
+      add() {
+        this.$refs.filterEdit.open(null, data => {
+          let columns = this.$refs.table.data;
+          columns.push(data);
+
+          this.$refs.table.loadData(columns);
+        });
+      },
+      // 打开字段设置界面
+      edit(row, index) {
+        this.$refs.filterEdit.open(row, 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);
+      },
+      // 保存
+      save() {
+        this.confirm('确定要保存设置吗？', async () => {
+          let columns = this.$refs.table.data;
+          await this.saveFilterColumn({
+            code: this.dataView.code,
+            columns
+          });
+
+          this.$emit('on-change', this.dataView.code);
+
+          this.success('保存成功！', () => {
+            this.$refs.table.close();
+          });
+        });
+      }
+    }
+  };
+</script>

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

@@ -0,0 +1,375 @@
+<template>
+  <div>
+    <Modal
+      ref="modal"
+      v-model="opened"
+      scrollable
+      :mask-closable="layout.maskClosable"
+      :draggable="layout.draggable"
+      :sticky="true"
+      :reset-drag-position="true"
+      :width="(dataView && dataView.width ? dataView.width : 800) + 350"
+    >
+      <template #header>
+        <div>
+          <slot name="header">
+            <span class="title">{{ dataView.name }}</span>
+            <span class="description">{{ dataView.description }}</span>
+          </slot>
+        </div>
+      </template>
+      <div class="container">
+        <div class="left">
+          <Card :bordered="false" dis-hover class="toolbox">
+            <Divider :plain="true" dashed class="title" size="small">默认列宽</Divider>
+            <RadioGroup v-model="columnWidth" @on-change="columnWidthChange">
+              <Radio label="Column12">整行</Radio>
+              <Radio label="Column6">二分之一</Radio>
+              <Radio label="Column4">三分之一</Radio>
+              <Radio label="Column3">四分之一</Radio>
+              <Radio label="Column2">六分之一</Radio>
+            </RadioGroup>
+            <template v-for="(componentGroup, index) in componentGroups" :key="index">
+              <Divider :plain="true" dashed class="title" size="small">{{ componentGroup.name }}</Divider>
+              <div style="width: 100%; display: flex">
+                <draggable
+                  :animation="500"
+                  v-model="componentGroup.components"
+                  item-key="index"
+                  :scroll="true"
+                  :group="{
+                    name: 'sort',
+                    pull: 'clone',
+                    put: false
+                  }"
+                  :sort="false"
+                  :clone="clone"
+                  filter=""
+                >
+                  <template #item="{ element: component }">
+                    <div style="width: 50%; float: left">
+                      <Button icon="md-list-box" @dblclick="dblclick(component)" class="component">{{ component.name }}</Button>
+                    </div>
+                  </template>
+                </draggable>
+              </div>
+            </template>
+          </Card>
+        </div>
+        <div class="right">
+          <div class="ivu-ml-8 ivu-mr-8">
+            <view-form-draggable ref="form" @edit="({ column, index }) => edit(column, index)" @remove="({ column, index }) => remove(column, index)" />
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div>
+          <Button type="primary" ghost custom-icon="fa fa-bars" @click="listMode">列表模式</Button>
+          <Button type="primary" v-if="!dataView.isVirtual" ghost custom-icon="fa fa-indent" @click="openColumnSelect">选择字段</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>
+        </div>
+      </template>
+    </Modal>
+    <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 { mapActions } from 'vuex';
+  import mixinPage from '../../mixins/page';
+  import columnEdit from './column-edit';
+  import columnSelect from './column-select';
+  import viewFormDraggable from './view-form-draggable';
+  import draggable from 'vuedraggable';
+  import enumApi from '../../api/enum';
+
+  export default {
+    mixins: [mixinPage],
+    components: { columnEdit, columnSelect, viewFormDraggable, draggable },
+    data() {
+      return {
+        columnWidth: 'Column6',
+        opened: false,
+        dataView: {},
+        columns: [],
+        componentGroups: []
+      };
+    },
+    async created() {},
+    props: {
+      // 是否公共配置界面
+      isSetting: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {},
+    methods: {
+      ...mapActions('admin/dataView', {
+        saveDataView: 'save',
+        saveDataViewSetting: 'saveSetting'
+      }),
+      // 打开
+      async open(dataView, columns) {
+        this.dataView = dataView;
+        this.columns = this.copy(columns);
+        this.$refs.form.init(this.dataView, this.columns);
+        this.opened = true;
+
+        const res = await enumApi.query('ControlType');
+
+        this.componentGroups = [
+          {
+            key: 'Normal',
+            name: '一般控件',
+            components: []
+          },
+          {
+            key: 'Datasource',
+            name: '数据源控件',
+            components: []
+          },
+          {
+            key: 'DateTime',
+            name: '日期时间控件',
+            components: []
+          },
+          {
+            key: 'Other',
+            name: '其他控件',
+            components: []
+          }
+        ];
+
+        res.forEach(item => {
+          let component = {
+            code: null,
+            name: item.name,
+            controlType: item.id,
+            isShow: true,
+            isVirtual: dataView.isVirtual,
+            columnWidth: this.columnWidth,
+            dataView
+          };
+
+          if (
+            item.id == 'Label' ||
+            item.id == 'TextInput' ||
+            item.id == 'NumberInput' ||
+            item.id == 'Check' ||
+            item.id == 'Switch' ||
+            item.id == 'Slider' ||
+            item.id == 'TextArea'
+          ) {
+            this.componentGroups.find(componentGroup => componentGroup.key == 'Normal').components.push(component);
+          } else if (
+            item.id == 'Select' ||
+            item.id == 'SelectWithOther' ||
+            item.id == 'MultiSelect' ||
+            item.id == 'ComboSelect' ||
+            item.id == 'DialogSelect' ||
+            item.id == 'MultiDialogSelect' ||
+            item.id == 'AutoComplete' ||
+            item.id == 'Radio' ||
+            item.id == 'CheckGroup'
+          ) {
+            this.componentGroups.find(componentGroup => componentGroup.key == 'Datasource').components.push(component);
+          } else if (item.id == 'Date' || item.id == 'Time' || item.id == 'DateTime' || item.id == 'Year' || item.id == 'YearMonth' || item.id == 'DateRange') {
+            this.componentGroups.find(componentGroup => componentGroup.key == 'DateTime').components.push(component);
+          } else if (
+            item.id == 'Table' ||
+            item.id == 'List' ||
+            item.id == 'Attachment' ||
+            item.id == 'Image' ||
+            item.id == 'RichEditor' ||
+            item.id == 'Placeholder' ||
+            item.id == 'Custom'
+          ) {
+            this.componentGroups.find(componentGroup => componentGroup.key == 'Other').components.push(component);
+          }
+        });
+      },
+      // 关闭
+      close() {
+        this.opened = false;
+      },
+      // 打开字段设置界面
+      edit(row, index) {
+        this.$refs.columnEdit.open(row, index, this.columns, data => {
+          let columns = this.$refs.form.columns;
+          columns.splice(index, 1, data);
+        });
+      },
+      // 移除
+      remove(row, index) {
+        this.confirm('确认要删除该组件吗？', async () => {
+          let columns = this.$refs.form.columns;
+          columns.splice(index, 1);
+          //this.$forceUpdate();
+        });
+      },
+      // 打开字段选择界面
+      openColumnSelect() {
+        this.$refs.columnSelect.open(this.dataView, this.columns, checked => {
+          // 移除未勾选的
+          let columns = this.columns.filter(column => {
+            return (
+              checked.some(item => {
+                return column.code === item.code;
+              }) || column.isVirtual
+            );
+          });
+
+          this.columns.splice(0, this.columns.length);
+          columns.forEach(item => {
+            this.columns.push(item);
+          });
+
+          // 添加新勾选的
+          checked.forEach(item => {
+            if (
+              !this.columns.some(column => {
+                return column.code === item.code;
+              })
+            ) {
+              this.columns.push({
+                code: item.code,
+                name: item.name,
+                dataType: item.dataType,
+                dataView: this.dataView,
+                isShow: true,
+                controlType: this.getDefaultControlType(item.dataType),
+                columnWidth: this.columnWidth, // 默认宽度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
+              });
+            }
+          });
+
+          //this.$forceUpdate();
+        });
+      },
+      // 全局保存
+      globalSave() {
+        this.confirm('确定要保存全局设置吗？', () => {
+          this.confirm('本次操作将修改全局设置，确认要保存吗？', async () => {
+            await this.saveDataView({
+              code: this.dataView.code,
+              columns: this.columns
+            });
+
+            this.$emit('on-change', this.dataView.code);
+            this.success('保存成功！', () => {
+              this.close();
+            });
+          });
+        });
+      },
+      // 保存
+      save() {
+        this.confirm('确定要保存设置吗？', async () => {
+          await this.saveDataView({
+            code: this.dataView.code,
+            columns: this.columns
+          });
+
+          this.success('保存成功！', () => {
+            this.close();
+          });
+        });
+      },
+      // 默认列宽变更
+      columnWidthChange() {
+        this.componentGroups.forEach(componentGroup => {
+          componentGroup.components.forEach(component => {
+            component.columnWidth = this.columnWidth;
+          });
+        });
+      },
+      // 拖动克隆
+      clone(item) {
+        return this.copy(item);
+      },
+      // 双击
+      dblclick(item) {
+        this.columns.push(this.copy(item));
+      },
+      // 设置
+      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();
+          });
+        });
+      },
+      // 切换至列表模式
+      listMode() {
+        this.$emit('list-mode', {
+          dataView: this.dataView,
+          columns: this.columns
+        });
+      },
+      // 获取默认控件类型
+      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>
+
+<style scoped>
+  .container {
+    width: 100%;
+    display: flex;
+  }
+
+  .container .left .toolbox {
+    width: 350px;
+    margin-right: 8px;
+  }
+
+  .container .left .toolbox .title {
+    font-weight: bold;
+  }
+
+  .container .right {
+    width: 100%;
+  }
+
+  .component {
+    margin: 5px;
+    width: 150px;
+    text-align: left;
+  }
+</style>