doway-coms 1.6.71 → 1.6.73

package/packages/BaseGrid/src/SeqSetting.vue

@@ -0,0 +1,262 @@
+<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-160+'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 && showField(x.title))"
+              :key="item.currentKey"
+              :data-id="item.currentKey"
+              class="drag-row show-sort"
+            >
+              <div style="margin-right: 7px;">
+                <img src="../../styles/icon/drag.svg" alt="" style="width: 20px" >
+              </div>
+              <div>{{ 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 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.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,
+        width: item.width,
+        filters: item.filters,
+        order: item.order,
+      }
+      this.columns.push(column);
+    })
+  },
+  mounted() {
+    // 初始排序数组
+    this.currentSortKeys = this.columns.map(x=>x.currentKey)
+    this.setOptions()
+  },
+  methods: {
+    // 配置方法
+    setOptions() {
+        var vm = this
+        //获取对象
+        var el = vm.$refs.dragForm
+        //设置配置
+        vm.options = {
+          group:'sortableDrag',
+          animation: 200,
+          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 {
+  padding-right: 5px;
+  font-size: 15px;
+  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;
+  .card-tltle {
+    margin-bottom: 10px;
+  }
+}
+</style>