doway-coms 2.3.2 → 2.3.3

package/packages/BaseGrid/index.js

@@ -1,10 +1,10 @@
-// 导入组件，组件必须声明 name
-import BaseGrid from './src/index.vue';
-import VXETable from 'vxe-table'
-// 为组件提供 install 安装方法，供按需引入
-BaseGrid.install = function(Vue) {
-    Vue.use(VXETable)
-    Vue.component(BaseGrid.name, BaseGrid);
-};
-// 默认导出组件
+// 导入组件，组件必须声明 name
+import BaseGrid from './src/index.vue';
+import VXETable from 'vxe-table'
+// 为组件提供 install 安装方法，供按需引入
+BaseGrid.install = function(Vue) {
+    Vue.use(VXETable)
+    Vue.component(BaseGrid.name, BaseGrid);
+};
+// 默认导出组件
 export default BaseGrid;

package/packages/BaseGrid/src/SeqSetting.vue

@@ -1,279 +1,279 @@
-<template>
-  <div class="content-card">
-    <!-- 查询框 -->
-    <div style="margin: 10px 10px 10px 0px">
-      <a-input
-        ref="searchInput"
-        v-model="searchField"
-        placeholder="搜索添加更多字段"
-      ><a-icon slot="prefix" type="search" />
-      </a-input>
-    </div>
-    <div :style="{ height: height-250+'px', overflow:'auto' }" class="field-content">
-       <div class="field-card">
-          <div class="card-tltle">显示字段</div>
-          <div ref="dragForm">
-            <div
-              :class="{ 'not-sort': searchField }"  
-              v-for="item in columns.filter(x=> x.visible)"
-              :key="item.currentKey"
-              :data-id="item.currentKey"
-              class="drag-row show-sort"
-              v-show="showField(item.title)"
-            >
-              <div style="margin-right: 7px;"  class="move">
-                <img src="../../styles/icon/drag.svg" alt="" style="width: 20px" >
-              </div>
-              <div style="flex: 1;" class="move">{{ item.title }}</div>
-              <div style="margin-left: auto;"><a-switch v-model="item.visible" @change="onCheckboxChange(item)" size="small"/></div>
-            </div>
-          </div>
-       </div>
-       <div class="field-card">
-         <div class="card-tltle">未显示字段</div>
-         <div ref="notShownField">
-           <div
-             v-for="(item, index) in columns.filter(x=> !x.visible)"
-             :key="index"
-             :data-id="index"
-             class="drag-row"
-           >
-             <div>{{ item.title }}</div>
-             <div style="margin-left: auto;">
-                <a-switch
-                  :disabled="!item.sysVisible"
-                  v-model="item.visible"
-                  @change="onCheckboxChange(item)"
-                  size="small"
-                /></div>
-           </div>
-         </div>
-       </div>
-    </div>
-  </div>
-</template>
-<script>
-import {
-  Row,
-  Col,
-  Input,
-  Checkbox,
-  Button,
-  Icon,
-  Switch,
-} from "ant-design-vue";
-import Sortable from 'sortablejs'
-import { saveUserModuleDataFieldApi } from "../../utils/api";
-export default {
-  components: {
-    "a-icon": Icon,
-    "a-row": Row,
-    "a-col": Col,
-    "a-input": Input,
-    "a-checkbox": Checkbox,
-    "a-button": Button,
-    "a-switch": Switch,
-  },
-  props: {
-    userDefineColumns: {
-        type: Array,
-        default: function () {
-            return [];
-        },
-    },
-    height: {
-        type: Number,
-        default: function () {
-            return 0;
-        },
-    },
-    moduleCode: {
-        type: String,
-        default: function () {
-            return '';
-        },
-    },
-    dataCode: {
-        type: String,
-        default: function () {
-            return '';
-        },
-    },
-  },
-  data() {
-    return {
-      searchField: null,
-      // 接收所有字段数据
-      adjustUserDefineColumns: [],
-      // 可显示字段数据
-      columns:[],
-      // 改变后顺序记录数组
-      currentSortKeys: [],
-      // 拖拽表单配置
-      options: {}
-    }
-  },
-  created() {
-    this.setColumnsOptions()
-  },
-  mounted() {
-    // 初始排序数组
-    this.currentSortKeys = this.columns.map(x=>x.currentKey)
-    this.setOptions()
-  },
-  methods: {
-    updateColumns(currentColumns) {
-      this.adjustUserDefineColumns = JSON.parse(JSON.stringify(currentColumns))
-      this.setColumnsOptions()
-    },
-    setColumnsOptions() {
-      this.adjustUserDefineColumns = this.userDefineColumns
-      // 设置唯一标识，用于保存时找到字段并重新排序
-      this.adjustUserDefineColumns.forEach((x, index)=> x.currentKey = index + x.field)
-      this.columns = [];
-      this.adjustUserDefineColumns.forEach((item) => {
-        // 去除操作列和序号、多选框列
-        if (item.field === "operation" || item.field == undefined) {
-            return;
-        }
-        const column = {
-          currentKey: item.currentKey,
-          field: item.field,
-          title: item.title,
-          visible: item.visible,
-          sysVisible: item.params.sysVisible, // 系统隐藏字段不可操作
-          width: item.width,
-          filters: item.filters,
-          order: item.order,
-        }
-        this.columns.push(column);
-      })
-    },
-    // 配置方法
-    setOptions() {
-        var vm = this
-        //获取对象
-        var el = vm.$refs.dragForm
-        //设置配置
-        vm.options = {
-          group:'sortableDrag',
-          animation: 200,
-          handle:".move",
-          sort: true,
-          filter: ".not-sort",  // not-sort用来控制筛选时不可拖拽
-          forceFallback: true,  // 禁用html5原生拖拽行为，使得可以同时使用拖拽及鼠标滚轴
-          //拖动结束
-          onEnd: function (evt) {
-            //获取拖动后的排序
-            vm.currentSortKeys = sortable.toArray()
-            // 调取保存
-            vm.saveSortable()
-          },
-        };
-        //初始化
-        var sortable = Sortable.create(el, vm.options);
-    },
-    onCheckboxChange() {
-      let vm = this
-      // 在渲染切换后获取渲染后div内容，进行赋值
-      this.$nextTick(()=>{
-        let sortableElement = vm.$refs.dragForm
-        let sortKeys = []
-        for (let i = 0; i < sortableElement.children.length; i++) {
-          sortKeys.push(sortableElement.children[i].dataset.id)
-        }
-        vm.currentSortKeys = sortKeys
-        this.saveSortable()
-      })
-      // 保存之前将显示字段数组删除当前的
-    },
-    // 保存拖拽后排序
-    saveSortable() {
-      let vm = this
-      let postData = {
-        moduleCode: vm.moduleCode,
-        dataCode: vm.dataCode,
-        fields: [],
-      }
-      let currentDrag = JSON.parse(JSON.stringify(vm.currentSortKeys))
-      // 将不显示数组最后放入
-      let notShowColumns = vm.columns.filter(x=>!x.visible).map(i=>i.currentKey)
-      currentDrag.push(...notShowColumns)
-      // 循环按照当前顺序赋值序号
-      currentDrag.forEach((item, index) => {
-        let tempObject = vm.columns.find(x => x.currentKey == item)
-        let tempData = {
-          field: tempObject.field,
-          sort: index + 1,
-          hidden: !tempObject.visible,
-          width: tempObject.width,
-          extraInfo:{}
-        }
-        if (tempObject.filters && tempObject.filters[0].data.bindingValues.length) {
-          tempObject.filters[0].checked = true;
-          tempData.extraInfo.filterExpression = tempObject.filters
-        }
-        if (tempObject.order) {
-          tempData.extraInfo.order = tempObject.order
-        }
-        postData.fields.push(tempData)
-      })
-      saveUserModuleDataFieldApi(postData)
-        .then(res => {
-          // 返回表格组件触发更新
-          vm.$emit('saveSeqConfig',postData, res.content)
-        })
-        .catch((err) => {
-          console.debug(err)
-        })
-        .finally(() => {})
-    },
-    showField(title) {
-      let isShow = true
-      if (this.searchField && (title.indexOf(this.searchField) == -1)) {
-        isShow = false
-      }
-      return isShow
-    }
-  },
-}
-</script>
-<style scoped lang="scss">
-.content-card {
-  font-weight: 600;
-  min-width: 240px;
-}
-.show-sort:hover {
-  background-color: #f7f7f7;
-}
-.drag-row {
-  cursor: pointer;
-  padding-right: 5px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-}
-/* 修改滚动条整体样式 */
-.field-content::-webkit-scrollbar {
-  width: 7px; /* 设置滚动条宽度 */
-}
-/* 修改滚动条轨道样式 */
-.field-content::-webkit-scrollbar-track {
-  background-color: #f1f1f1; /* 设置轨道背景色 */
-}
-/* 修改滚动条滑块样式 */
-.field-content::-webkit-scrollbar-thumb {
-  background-color: #888; /* 设置滑块背景色 */
-}
-/* 修改滚动条滑块在hover状态下的样式 */
-.field-content::-webkit-scrollbar-thumb:hover {
-  background-color: #555; /* 设置滑块hover时背景色 */
-}
-.field-card {
-  margin: 10px 10px 0px 0px;
-  font-size: 15px;
-  .card-tltle {
-    margin-bottom: 10px;
-  }
-}
+<template>
+  <div class="content-card">
+    <!-- 查询框 -->
+    <div style="margin: 10px 10px 10px 0px">
+      <a-input
+        ref="searchInput"
+        v-model="searchField"
+        placeholder="搜索添加更多字段"
+      ><a-icon slot="prefix" type="search" />
+      </a-input>
+    </div>
+    <div :style="{ height: height-250+'px', overflow:'auto' }" class="field-content">
+       <div class="field-card">
+          <div class="card-tltle">显示字段</div>
+          <div ref="dragForm">
+            <div
+              :class="{ 'not-sort': searchField }"  
+              v-for="item in columns.filter(x=> x.visible)"
+              :key="item.currentKey"
+              :data-id="item.currentKey"
+              class="drag-row show-sort"
+              v-show="showField(item.title)"
+            >
+              <div style="margin-right: 7px;"  class="move">
+                <img src="../../styles/icon/drag.svg" alt="" style="width: 20px" >
+              </div>
+              <div style="flex: 1;" class="move">{{ item.title }}</div>
+              <div style="margin-left: auto;"><a-switch v-model="item.visible" @change="onCheckboxChange(item)" size="small"/></div>
+            </div>
+          </div>
+       </div>
+       <div class="field-card">
+         <div class="card-tltle">未显示字段</div>
+         <div ref="notShownField">
+           <div
+             v-for="(item, index) in columns.filter(x=> !x.visible)"
+             :key="index"
+             :data-id="index"
+             class="drag-row"
+           >
+             <div>{{ item.title }}</div>
+             <div style="margin-left: auto;">
+                <a-switch
+                  :disabled="!item.sysVisible"
+                  v-model="item.visible"
+                  @change="onCheckboxChange(item)"
+                  size="small"
+                /></div>
+           </div>
+         </div>
+       </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Row,
+  Col,
+  Input,
+  Checkbox,
+  Button,
+  Icon,
+  Switch,
+} from "ant-design-vue";
+import Sortable from 'sortablejs'
+import { saveUserModuleDataFieldApi } from "../../utils/api";
+export default {
+  components: {
+    "a-icon": Icon,
+    "a-row": Row,
+    "a-col": Col,
+    "a-input": Input,
+    "a-checkbox": Checkbox,
+    "a-button": Button,
+    "a-switch": Switch,
+  },
+  props: {
+    userDefineColumns: {
+        type: Array,
+        default: function () {
+            return [];
+        },
+    },
+    height: {
+        type: Number,
+        default: function () {
+            return 0;
+        },
+    },
+    moduleCode: {
+        type: String,
+        default: function () {
+            return '';
+        },
+    },
+    dataCode: {
+        type: String,
+        default: function () {
+            return '';
+        },
+    },
+  },
+  data() {
+    return {
+      searchField: null,
+      // 接收所有字段数据
+      adjustUserDefineColumns: [],
+      // 可显示字段数据
+      columns:[],
+      // 改变后顺序记录数组
+      currentSortKeys: [],
+      // 拖拽表单配置
+      options: {}
+    }
+  },
+  created() {
+    this.setColumnsOptions()
+  },
+  mounted() {
+    // 初始排序数组
+    this.currentSortKeys = this.columns.map(x=>x.currentKey)
+    this.setOptions()
+  },
+  methods: {
+    updateColumns(currentColumns) {
+      this.adjustUserDefineColumns = JSON.parse(JSON.stringify(currentColumns))
+      this.setColumnsOptions()
+    },
+    setColumnsOptions() {
+      this.adjustUserDefineColumns = this.userDefineColumns
+      // 设置唯一标识，用于保存时找到字段并重新排序
+      this.adjustUserDefineColumns.forEach((x, index)=> x.currentKey = index + x.field)
+      this.columns = [];
+      this.adjustUserDefineColumns.forEach((item) => {
+        // 去除操作列和序号、多选框列
+        if (item.field === "operation" || item.field == undefined) {
+            return;
+        }
+        const column = {
+          currentKey: item.currentKey,
+          field: item.field,
+          title: item.title,
+          visible: item.visible,
+          sysVisible: item.params.sysVisible, // 系统隐藏字段不可操作
+          width: item.width,
+          filters: item.filters,
+          order: item.order,
+        }
+        this.columns.push(column);
+      })
+    },
+    // 配置方法
+    setOptions() {
+        var vm = this
+        //获取对象
+        var el = vm.$refs.dragForm
+        //设置配置
+        vm.options = {
+          group:'sortableDrag',
+          animation: 200,
+          handle:".move",
+          sort: true,
+          filter: ".not-sort",  // not-sort用来控制筛选时不可拖拽
+          forceFallback: true,  // 禁用html5原生拖拽行为，使得可以同时使用拖拽及鼠标滚轴
+          //拖动结束
+          onEnd: function (evt) {
+            //获取拖动后的排序
+            vm.currentSortKeys = sortable.toArray()
+            // 调取保存
+            vm.saveSortable()
+          },
+        };
+        //初始化
+        var sortable = Sortable.create(el, vm.options);
+    },
+    onCheckboxChange() {
+      let vm = this
+      // 在渲染切换后获取渲染后div内容，进行赋值
+      this.$nextTick(()=>{
+        let sortableElement = vm.$refs.dragForm
+        let sortKeys = []
+        for (let i = 0; i < sortableElement.children.length; i++) {
+          sortKeys.push(sortableElement.children[i].dataset.id)
+        }
+        vm.currentSortKeys = sortKeys
+        this.saveSortable()
+      })
+      // 保存之前将显示字段数组删除当前的
+    },
+    // 保存拖拽后排序
+    saveSortable() {
+      let vm = this
+      let postData = {
+        moduleCode: vm.moduleCode,
+        dataCode: vm.dataCode,
+        fields: [],
+      }
+      let currentDrag = JSON.parse(JSON.stringify(vm.currentSortKeys))
+      // 将不显示数组最后放入
+      let notShowColumns = vm.columns.filter(x=>!x.visible).map(i=>i.currentKey)
+      currentDrag.push(...notShowColumns)
+      // 循环按照当前顺序赋值序号
+      currentDrag.forEach((item, index) => {
+        let tempObject = vm.columns.find(x => x.currentKey == item)
+        let tempData = {
+          field: tempObject.field,
+          sort: index + 1,
+          hidden: !tempObject.visible,
+          width: tempObject.width,
+          extraInfo:{}
+        }
+        if (tempObject.filters && tempObject.filters[0].data.bindingValues.length) {
+          tempObject.filters[0].checked = true;
+          tempData.extraInfo.filterExpression = tempObject.filters
+        }
+        if (tempObject.order) {
+          tempData.extraInfo.order = tempObject.order
+        }
+        postData.fields.push(tempData)
+      })
+      saveUserModuleDataFieldApi(postData)
+        .then(res => {
+          // 返回表格组件触发更新
+          vm.$emit('saveSeqConfig',postData, res.content)
+        })
+        .catch((err) => {
+          console.debug(err)
+        })
+        .finally(() => {})
+    },
+    showField(title) {
+      let isShow = true
+      if (this.searchField && (title.indexOf(this.searchField) == -1)) {
+        isShow = false
+      }
+      return isShow
+    }
+  },
+}
+</script>
+<style scoped lang="scss">
+.content-card {
+  font-weight: 600;
+  min-width: 240px;
+}
+.show-sort:hover {
+  background-color: #f7f7f7;
+}
+.drag-row {
+  cursor: pointer;
+  padding-right: 5px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+}
+/* 修改滚动条整体样式 */
+.field-content::-webkit-scrollbar {
+  width: 7px; /* 设置滚动条宽度 */
+}
+/* 修改滚动条轨道样式 */
+.field-content::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* 设置轨道背景色 */
+}
+/* 修改滚动条滑块样式 */
+.field-content::-webkit-scrollbar-thumb {
+  background-color: #888; /* 设置滑块背景色 */
+}
+/* 修改滚动条滑块在hover状态下的样式 */
+.field-content::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* 设置滑块hover时背景色 */
+}
+.field-card {
+  margin: 10px 10px 0px 0px;
+  font-size: 15px;
+  .card-tltle {
+    margin-bottom: 10px;
+  }
+}
 </style>