mooho-base-admin-plus 0.1.0

package/src/components/view/modal-form-filter.vue

@@ -0,0 +1,319 @@
+<template>
+  <!-- 字段筛选table展示 -->
+  <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" :width="formView.width || '800'">
+    <template #header>
+      <div>
+        <span class="title">筛选字段设置</span>
+        <span class="description">Filtering Setting</span>
+      </div>
+    </template>
+
+    <div class="i-table-no-border">
+      <Table stripe :columns="columnsFiltering" :data="dataFiltering">
+        <template #action="{ row, index }">
+          <Button size="small" title="编辑" type="primary" ghost custom-icon="fa fa-edit" @click="filteringFmModalopen(row)"></Button>
+          <Button size="small" title="上移" type="primary" ghost custom-icon="fa fa-chevron-up" @click="upfiltering(row, index)"></Button>
+          <Button size="small" title="下移" type="primary" ghost custom-icon="fa fa-chevron-down" @click="downfiltering(row, index)"></Button>
+          <Button size="small" title="移除" type="primary" ghost custom-icon="fa fa-times" @click="removefiltering(row, index)"></Button>
+        </template>
+      </Table>
+    </div>
+    <template #footer>
+      <Button type="primary" ghost custom-icon="fa fa-plus" @click="filteringFmModalopen(null)">新增</Button>
+      <Button type="primary" custom-icon="fa fa-check" @click="SaveFiltering">确定</Button>
+    </template>
+    <!-- 对筛选条件进行处理 -->
+    <Modal v-model="filteringFmModal" 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">sorting add</span>
+        </div>
+      </template>
+      <Form ref="filteringform">
+        <Row :gutter="24" type="flex">
+          <Col>
+            <FormItem label="字段" prop="Code">
+              <Input type="text" v-model="data.code">
+                <template #prepend>
+                  <Button custom-icon="fa fa-search" @click="openSelect()"></Button>
+                </template>
+              </Input>
+            </FormItem>
+          </Col>
+          <Col>
+            <FormItem label="操作符" prop="Operator">
+              <Select v-model="data.operator" :transfer="true">
+                <Option v-for="item in getEnumList('Operator')" :key="item.value" :value="item.id">{{ item.name }}</Option>
+              </Select>
+            </FormItem>
+          </Col>
+          <Col>
+            <FormItem label="关键词" prop="KeyValue">
+              <Input type="text" v-model="data.keyValue" maxlength="200" />
+            </FormItem>
+          </Col>
+        </Row>
+      </Form>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-check" @click="saveFilteringForm($event)">确定</Button>
+      </template>
+      <column-check ref="columnCheck" />
+    </Modal>
+  </Modal>
+</template>
+
+<script>
+  import mixinPage from '../../mixins/page';
+  import columnCheck from './column-check';
+
+  export default {
+    mixins: [mixinPage],
+    components: { columnCheck },
+
+    props: {
+      filter: String, //原表单筛选字段json值
+      dataView: {} //原表单对象
+    },
+    computed: {},
+    data() {
+      return {
+        opened: false,
+        formView: {},
+        filteringFmModal: false,
+        columnsFiltering: [
+          {
+            type: 'index',
+            width: 100,
+            title: '序号',
+            align: 'center'
+          },
+          {
+            title: '字段',
+            key: 'column'
+          },
+          {
+            title: '操作符',
+            key: 'operatorType'
+          },
+          {
+            title: '关键词',
+            key: 'keyValue'
+          },
+          {
+            title: ' ',
+            slot: 'action',
+            width: 200,
+            fixed: 'right',
+            align: 'center'
+          }
+        ],
+        dataFiltering: [],
+        data: {}
+      };
+    },
+    methods: {
+      open() {
+        this.toData();
+        this.opened = true;
+      },
+      close() {
+        this.opened = false;
+      },
+      // 将数据库获取的json字符串转换为数组对象
+      toData() {
+        let filterArr = [];
+        if (this.filter != '' && this.filter != null) {
+          let json = JSON.parse(this.filter);
+          for (let key in json) {
+            let operatorArr = [];
+            operatorArr = this.operatorChange(key);
+            filterArr.push({
+              column: operatorArr[0],
+              operatorType: operatorArr[1],
+              rule: operatorArr[2],
+              operator: operatorArr[3],
+              keyValue: json[key]
+            });
+          }
+        }
+        this.dataFiltering = filterArr;
+      },
+      // 操作符数据转换（ companyType_g  --->  companyType，_g，大于，GreaterThan）
+      operatorChange(operator) {
+        let operatorArr = new Array(4);
+        if (operator.indexOf('_g') >= 0 && operator.indexOf('_ge') == -1) {
+          operatorArr[0] = operator.replace('_g', '');
+          operatorArr[1] = '大于';
+          operatorArr[2] = '_g';
+          operatorArr[3] = 'GreaterThan';
+        } else if (operator.indexOf('_l') >= 0 && operator.indexOf('_le') == -1) {
+          operatorArr[0] = operator.replace('_l', '');
+          operatorArr[1] = '小于';
+          operatorArr[2] = '_l';
+          operatorArr[3] = 'LessThan';
+        } else if (operator.indexOf('_ge') >= 0) {
+          operatorArr[0] = operator.replace('_ge', '');
+          operatorArr[1] = '大于等于';
+          operatorArr[2] = '_ge';
+          operatorArr[3] = 'GreaterThanOrEqual';
+        } else if (operator.indexOf('_le') >= 0) {
+          operatorArr[0] = operator.replace('_le', '');
+          operatorArr[1] = '小于等于';
+          operatorArr[2] = '_le';
+          operatorArr[3] = 'LessThanOrEqual';
+        } else if (operator.indexOf('_n') >= 0) {
+          operatorArr[0] = operator.replace('_n', '');
+          operatorArr[1] = '不等于';
+          operatorArr[2] = '_n';
+          operatorArr[3] = 'NotEqual';
+        } else if (operator.indexOf('_c') >= 0) {
+          operatorArr[0] = operator;
+          operatorArr[1] = '文字包含';
+          operatorArr[2] = '_c';
+          operatorArr[3] = 'Contains';
+        } else {
+          operatorArr[0] = operator;
+          operatorArr[1] = '等于';
+          operatorArr[2] = '';
+          operatorArr[3] = 'Equal';
+        }
+        return operatorArr;
+      },
+      // 操作符数据转换 （ companyType，_g，大于，GreaterThan --->  companyType_g ）
+      operatorReChange(operator) {
+        let operatorArr = new Array(2);
+        if (operator == 'GreaterThan') {
+          operatorArr[0] = '大于';
+          operatorArr[1] = '_g';
+        } else if (operator == 'LessThan') {
+          operatorArr[0] = '小于';
+          operatorArr[1] = '_l';
+        } else if (operator == 'GreaterThanOrEqual') {
+          operatorArr[0] = '大于等于';
+          operatorArr[1] = '_ge';
+        } else if (operator == 'LessThanOrEqual') {
+          operatorArr[0] = '小于等于';
+          operatorArr[1] = '_le';
+        } else if (operator == 'NotEqual') {
+          operatorArr[0] = '不等于';
+          operatorArr[1] = '_n';
+        } else if (operator == 'Contains') {
+          operatorArr[0] = '文字包含';
+          operatorArr[1] = '_c';
+        } else {
+          operatorArr[0] = '等于';
+          operatorArr[1] = '';
+        }
+        return operatorArr;
+      },
+
+      // 筛选结果 将table对象转换为json字符串
+      toFilteringJson() {
+        let jsonStr = '{';
+        if (this.dataFiltering.length > 0) {
+          for (let key in this.dataFiltering) {
+            jsonStr += '"' + this.dataFiltering[key].column + this.dataFiltering[key].rule + '":"' + this.dataFiltering[key].keyValue + '",';
+          }
+          jsonStr = jsonStr.substring(0, jsonStr.length - 1);
+          jsonStr += '}';
+        } else {
+          jsonStr = '';
+        }
+        this.$emit('bindFilter', jsonStr);
+        this.close();
+      },
+
+      // 打开筛选编辑表单
+      filteringFmModalopen(row) {
+        // // row = null表示新增
+        if (row != null) {
+          this.data.code = row.column;
+          this.data.operator = row.operator;
+          this.data.keyValue = row.keyValue;
+        }
+        // 表示新增
+        else {
+          this.data.code = '';
+          this.data.rule = '';
+          this.data.operator = 'Equal';
+          this.data.keyValue = '';
+        }
+        this.filteringFmModal = true;
+      },
+
+      // 添加筛选字段表单确认
+      async saveFilteringForm() {
+        if (!!(this.data.code || '').trim() && !!(this.data.keyValue || '').trim() && !!(this.data.operator || '').trim()) {
+          let ope = this.operatorReChange(this.data.operator);
+          let checkSort = false;
+          this.dataFiltering.forEach(item => {
+            // 如果编辑列与原数据中有相同列，则做更新不做添加
+            if (item.column == this.data.code) {
+              checkSort = true;
+              (item.operatorType = ope[0]), (item.rule = ope[1]), (item.operator = this.data.operator), (item.keyValue = this.data.keyValue);
+            }
+          });
+          if (!checkSort) {
+            this.dataFiltering.push({
+              column: this.data.code,
+              operatorType: ope[0],
+              rule: ope[1],
+              operator: this.data.operator,
+              keyValue: this.data.keyValue
+            });
+          }
+
+          this.filteringFmModal = false;
+        } else {
+          this.error('字段或筛选关键词不能为空，请正确填写！');
+        }
+      },
+      SaveFiltering() {
+        this.toFilteringJson();
+      },
+
+      // 筛选字段的移动操作
+      // 移除一行数据
+      removefiltering(row, index) {
+        if (row != null) {
+          this.dataFiltering.splice(index, 1);
+        }
+      },
+      // 上移
+      upfiltering(row, index) {
+        if (index > 0) {
+          this.dataFiltering.splice(index, 1);
+          this.dataFiltering.splice(index - 1, 0, row);
+        }
+      },
+      // 下移
+      downfiltering(row, index) {
+        if (index < this.dataFiltering.length - 1) {
+          this.dataFiltering.splice(index, 1);
+          this.dataFiltering.splice(index + 1, 0, row);
+        }
+      },
+      // 打开字段选择界面
+      openSelect() {
+        this.$refs.columnCheck.open(this.dataView.model, checked => {
+          this.data.code = checked.code;
+          this.data.name = checked.name;
+          this.data.dataType = checked.dataType;
+          this.data.source = checked.objColumn != null ? checked.objColumn.dataType : null;
+          this.data.sourceDataCode = checked.objColumn != null ? 'id' : null;
+          this.data.sourceDisplayCode =
+            checked.objColumn != null &&
+            checked.objColumn.columns.some(function (column) {
+              return column.code === checked.objColumn.code + '.name';
+            })
+              ? 'name'
+              : null;
+          setTimeout(() => {
+            //this.$forceUpdate();
+          });
+        });
+      }
+    }
+  };
+</script>

package/src/components/view/modal-form-sort.vue

@@ -0,0 +1,248 @@
+<template>
+  <!-- 字段排序table展示 -->
+  <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" :width="formView.width || '800'">
+    <template #header>
+      <div>
+        <span class="title">排序字段设置</span>
+        <span class="description">Sorting Setting</span>
+      </div>
+    </template>
+    <div class="i-table-no-border">
+      <Table stripe :columns="columnsSorting" :data="dataSorting">
+        <template #action="{ row, index }">
+          <Button size="small" title="编辑" type="primary" ghost custom-icon="fa fa-edit" @click="sortingFmModalopen(row)"></Button>
+          <Button size="small" title="上移" type="primary" ghost custom-icon="fa fa-chevron-up" @click="upSorting(row, index)"></Button>
+          <Button size="small" title="下移" type="primary" ghost custom-icon="fa fa-chevron-down" @click="downSorting(row, index)"></Button>
+          <Button size="small" title="移除" type="primary" ghost custom-icon="fa fa-times" @click="removeSorting(row, index)"></Button>
+        </template>
+      </Table>
+    </div>
+    <template #footer>
+      <Button type="primary" ghost custom-icon="fa fa-plus" @click="sortingFmModalopen(null)">新增</Button>
+      <Button type="primary" custom-icon="fa fa-check" @click="SaveSorting">确定</Button>
+    </template>
+    <!-- 对排序字段进行处理 -->
+    <Modal v-model="sortingFmModal" 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">sorting add</span>
+        </div>
+      </template>
+      <Form ref="sortingform">
+        <Row :gutter="24" type="flex">
+          <Col>
+            <FormItem label="字段" prop="Code">
+              <Input type="text" readonly v-model="data.code" @on-focus="openSelect()">
+                <template #prepend>
+                  <Button custom-icon="fa fa-search" @click="openSelect()"></Button>
+                </template>
+              </Input>
+            </FormItem>
+          </Col>
+          <Col>
+            <FormItem label="操作符" prop="SortingRule">
+              <Select v-model="data.rule" :transfer="true">
+                <Option v-for="item in sortingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+              </Select>
+            </FormItem>
+          </Col>
+        </Row>
+      </Form>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-check" @click="saveSortingForm($event)">确定</Button>
+      </template>
+    </Modal>
+    <column-check ref="columnCheck" />
+  </Modal>
+</template>
+
+<script>
+  import mixinPage from '../../mixins/page';
+  import columnCheck from './column-check';
+
+  export default {
+    mixins: [mixinPage],
+    components: { columnCheck },
+    props: {
+      sort: String, //原排序字段json值
+      dataView: {} //原表单对象
+    },
+    computed: {},
+    data() {
+      return {
+        opened: false,
+        formView: {},
+        sortingFmModal: false,
+        columnsSorting: [
+          {
+            type: 'index',
+            width: 100,
+            title: '序号',
+            align: 'center'
+          },
+          {
+            title: '字段',
+            key: 'column'
+          },
+          {
+            title: '规则',
+            key: 'rule'
+          },
+          {
+            title: ' ',
+            slot: 'action',
+            width: 200,
+            fixed: 'right',
+            align: 'center'
+          }
+        ],
+        dataSorting: [],
+        sortingList: [
+          {
+            value: 'asc',
+            label: '升序(从小到大)'
+          },
+          {
+            value: 'desc',
+            label: '降序(从大到小)'
+          }
+        ],
+        data: {}
+      };
+    },
+    async created() {},
+    methods: {
+      open() {
+        this.toData();
+        this.opened = true;
+      },
+      close() {
+        this.opened = false;
+      },
+      // 打开排序字段设置表单
+      sortingFmModalopen(row) {
+        // row = null表示新增
+        if (row != null) {
+          this.data.code = row.column;
+          this.data.rule = row.rule;
+        }
+        // 表示新增
+        else {
+          this.data.code = '';
+          this.data.rule = '';
+        }
+        this.sortingFmModal = true;
+      },
+      // 将数据库获取的json字符串转换为数组对象
+      toData() {
+        let array = [];
+        // 如果该字段为空，则如下转换不进行
+        if (this.sort != '' && this.sort != null) {
+          let json = JSON.parse(this.sort);
+          for (let key in json) {
+            array.push({
+              column: key,
+              rule: json[key]
+            });
+          }
+        }
+        this.dataSorting = array;
+      },
+      // 添加排序规则确认
+      async saveSortingForm() {
+        // 保存前字段均不为空
+        if (this.data.code != '' && this.data.code != null && this.data.rule != null && this.data.rule != '') {
+          let checkSort = false;
+          // 遍历原排序对象 dataSorting 中是否有与新增的字段相同的
+          // 暂时不做此判断，后续再优化2021年3月19日18:39:13
+          // this.dataSorting.forEach(item => {
+          //     if (item.column == this.data.code) {
+          //         checkSort = true;
+          //     }
+          // });
+          this.dataSorting.forEach(item => {
+            // 如果编辑列与原数据中有相同列，则做更新不做添加
+            if (item.column == this.data.code) {
+              checkSort = true;
+              item.rule = this.data.rule;
+            }
+          });
+          if (!checkSort) {
+            // 将新加的字段对象添加到原排序对象 dataSorting 中
+            this.dataSorting.push({
+              column: this.data.code,
+              rule: this.data.rule
+            });
+          }
+          // 确认后关闭modal
+          this.sortingFmModal = false;
+        } else {
+          this.error('字段或排序规则不能为空，请正确填写！');
+        }
+      },
+      // 添加排序字段table确认
+      SaveSorting() {
+        this.toSortingJson();
+      },
+      // 排序数据的移动操作
+      // 移除一行数据
+      removeSorting(row, index) {
+        if (row != null) {
+          this.dataSorting.splice(index, 1);
+        }
+      },
+      // 上移
+      upSorting(row, index) {
+        if (index > 0) {
+          this.dataSorting.splice(index, 1);
+          this.dataSorting.splice(index - 1, 0, row);
+        }
+      },
+      // 下移
+      downSorting(row, index) {
+        if (index < this.dataSorting.length - 1) {
+          this.dataSorting.splice(index, 1);
+          this.dataSorting.splice(index + 1, 0, row);
+        }
+      },
+      // 打开字段选择界面
+      openSelect() {
+        this.$refs.columnCheck.open(this.dataView.model, checked => {
+          this.data.code = checked.code;
+          this.data.name = checked.name;
+          this.data.dataType = checked.dataType;
+          this.data.source = checked.objColumn != null ? checked.objColumn.dataType : null;
+          this.data.sourceDataCode = checked.objColumn != null ? 'id' : null;
+          this.data.sourceDisplayCode =
+            checked.objColumn != null &&
+            checked.objColumn.columns.some(function (column) {
+              return column.code === checked.objColumn.code + '.name';
+            })
+              ? 'name'
+              : null;
+          setTimeout(() => {
+            //this.$forceUpdate();
+          });
+        });
+      },
+      //[{column: 'type.orderNo',rule: 'asc'},{column: 'orderNo',rule: 'asc'}]
+      // { "type.orderNo": "asc", "orderNo": "asc" }
+      // 排序结果 将table对象转换为json字符串
+      toSortingJson() {
+        let jsonStr = '{';
+        if (this.dataSorting.length > 0) {
+          for (let key in this.dataSorting) {
+            jsonStr += '"' + this.dataSorting[key].column + '":"' + this.dataSorting[key].rule + '",';
+          }
+          jsonStr = jsonStr.substring(0, jsonStr.length - 1);
+          jsonStr += '}';
+        } else {
+          jsonStr = '';
+        }
+        this.$emit('bindSort', jsonStr);
+        this.close();
+      }
+    }
+  };
+</script>