Kaynağa Gözat

三甲评审拖拽排序

tianxinyu 6 ay önce
ebeveyn
işleme
de482a3bdf

+ 27 - 0
src/business/platform/data/templaterender/templates/list.vue

@@ -505,6 +505,18 @@ export default {
         pkKey () {
             return this.key || 'id_'
         },
+        isRoleFilter () {
+            const highRoles = this.$store.getters.userInfo.highRoles || [] // 高权限角色
+            const userRole = this.$store.getters.userInfo.role || [] // 用户权限角色
+            let isHighRole = false
+            userRole.forEach((el) => {
+                const roleAlias = el.alias
+                if (highRoles.includes(roleAlias)) {
+                    isHighRole = true
+                }
+            })
+            return this.$store.getters.isSuper || isHighRole
+        },
         formFieldMap () {
             if (this.$utils.isEmpty(this.fields)) {
                 return {}
@@ -1385,6 +1397,21 @@ export default {
                 rowHandle: rowHandle,
                 searchForm: searchForms.length > 0 ? { forms: searchForms } : null
             }
+            if (
+                this.isRoleFilter &&
+                rowHandle &&
+                rowHandle.actions &&
+                rowHandle.actions.some((t) => t.key === 'consult')
+            ) {
+                console.log(
+                    'rowHandle.actions.====>',
+                    this.isRoleFilter,
+                    rowHandle.actions,
+                    rowHandle.actions.some((t) => t.key === 'consult')
+                )
+                const consult = rowHandle.actions.find((t) => t.key === 'consult')
+                console.log('加快照按钮==>', consult.reportPath)
+            }
             // 判断地点是否第一层级
             const position = this.$store.getters.userInfo.positions
             let showBoolean = false

+ 1 - 0
src/business/platform/form/constants/fieldTypes.js

@@ -554,6 +554,7 @@ const fieldTypes = {
                 columns: [],
                 summary: false,
                 page: 'Y',
+                sortable: 'Y',
                 pageSize: 20,
                 index: true,
                 sum_text: '',

+ 4 - 0
src/business/platform/form/formbuilder/constants/helpTip.js

@@ -175,6 +175,10 @@ export default {
         title: '关于选项数据值来源',
         content: `此属性用于设置选项数据值来源是自定义固定的选项值/标签【静态数据】,还是通过【数据模版】的【值来源】类型。`
     },
+    sortable: {
+        title: '关于拖拽排序',
+        content: `此属性用于开启或关闭表格拖拽排序功能。`
+    },
     valueSource: {
         title: '关于值来源',
         content: '【值来源】的数据来源是“数据模版管理”中,模版类型为“值来源”信息。'

+ 9 - 0
src/business/platform/form/formbuilder/right-aside/editors/editor-base.vue

@@ -200,6 +200,15 @@
                 <el-switch v-model="isDisplay" />
             </el-form-item>
 
+            <el-form-item v-if="types.includes('sortable')" label="是否拖拽排序">
+                <template slot="label">是否拖拽排序<help-tip prop="sortable" /></template>
+                <el-switch
+                    v-model="fieldOptions.sortable"
+                    active-value="Y"
+                    inactive-value="N"
+                />
+            </el-form-item>
+
         </div>
         <!--公式编辑-->
         <formula-edit

+ 1 - 1
src/business/platform/form/formbuilder/right-aside/field-types/ibps-field-table.vue

@@ -6,7 +6,7 @@
                 :field-item="fieldItem"
                 :bo-data="boData"
                 :fields="fields"
-                types="label,name,desc,display"
+                types="label,name,desc,display,sortable"
             />
             <!-- 表单字段和按钮 -->
             <editor-field-table

+ 68 - 15
src/business/platform/form/formrender/dynamic-form/dynamic-form-table.vue

@@ -217,7 +217,6 @@
 </template>
 <script>
 import emitter from '@/plugins/element-ui/src/mixins/emitter'
-import { valueEquals } from '@/plugins/element-ui/src/utils/util'
 import { nestedFieldTypes } from '@/business/platform/form/constants/fieldTypes'
 import FormOptions from '../../constants/formOptions'
 import ActionUtils from '@/utils/action'
@@ -232,6 +231,7 @@ import FormrenderDialog from '@/business/platform/form/formrender/dialog'
 import ImportTable from './components/import-table'
 import IbpsExport from '@/plugins/export'
 import IbpsImport from '@/plugins/import'
+import sortableJs from '@/mixins/sortable'
 
 const JForm = window.JForm
 // 获取子表展示数据
@@ -246,7 +246,7 @@ export default {
         CustomDialog,
         ImportTable
     },
-    mixins: [emitter],
+    mixins: [emitter, sortableJs],
     props: {
         value: [Array, Object, String], // 值
         formData: [Array, Object], // 表单数据
@@ -315,6 +315,7 @@ export default {
 
             formEditVisible: false,
             formDialogVisible: false,
+            subDefaultFormData: {},
             dialogFormDef: {},
             dialogFormData: {},
             dialogFormIndex: -1,
@@ -326,7 +327,8 @@ export default {
             oldList: [], // 子表旧数据
             importList: [],
             importValue: null,
-            actionButton: null
+            actionButton: null,
+            sortFlag: false
         }
     },
     computed: {
@@ -421,6 +423,9 @@ export default {
         tableReadonly () {
             return this.readonlyRights ? true : this.tableRights === FormOptions.t.PERMISSIONS.READ
         },
+        canSortable () {
+            return !this.tableReadonly && this.fieldOptions.sortable === 'Y'
+        },
         tableHidden () {
             return this.tableRights === FormOptions.t.PERMISSIONS.HIDE
         },
@@ -535,8 +540,22 @@ export default {
     },
     mounted () {
         this.handleRefreshTable()
+        this.canSortable && this.initSortable()
     },
     methods: {
+        sortableEnd (evt) {
+            const { oldIndex, newIndex } = evt
+            // 处理数据交换
+            const tem = JSON.parse(JSON.stringify(this.copDataModel))
+            const currRow = tem.splice(oldIndex, 1)[0]
+            const num = new Date().getTime()
+            tem.splice(newIndex, 0, currRow)
+            tem.forEach((t, index) => {
+                t.tenantId = num + index
+            })
+            this.sortFlag = true
+            this.$emit('update:value', tem)
+        },
         handleRefreshTable () {
             this.$nextTick(() => {
                 if (this.$refs.elTable) {
@@ -556,23 +575,53 @@ export default {
             this.$emit('change-data', key, val)
         },
         handlePagination (val) {
-            this.totalCount = val.length
+            // this.totalCount = val.length
             // 限制最小页数为1
-            const pageCount = Math.ceil(this.totalCount / this.pageSize) || 1
+            // const pageCount = Math.ceil(this.totalCount / this.pageSize) || 1
             // 逻辑:删除后当前页大于总页数,替换为总页数,否则留在当前页
-            if (this.editFromType === 'add') {
+            // if (this.editFromType === 'add') {
                 // 新增按钮逻辑:前往最后一页
-                this.currentPage = pageCount
-            } else if (this.editFromType === 'import') {
+                // this.currentPage = pageCount
+            // } else if (this.editFromType === 'import') {
                 // 导入定位到第一页
-                this.currentPage = 1
-            } else {
+                // this.currentPage = 1
+            // } else {
                 // 其余逻辑(编辑、删除、整表赋值):操作后当前页大于总页数,替换为总页数,否则留在当前页
-                this.currentPage = this.currentPage > pageCount ? pageCount : this.currentPage
+                // this.currentPage = this.currentPage > pageCount ? pageCount : this.currentPage
+            // }
+            // this.copDataModel = this.getShowData(val, this.currentPage, this.pageSize)
+            // this.editFromType = ''
+            // this.$emit('update:value', val)
+            if (this.canSortable && this.sortFlag) {
+                this.copDataModel = []
+                this.sortFlag = false
             }
-            this.copDataModel = this.getShowData(val, this.currentPage, this.pageSize)
-            this.editFromType = ''
-            this.$emit('update:value', val)
+            this.$nextTick(() => {
+                this.totalCount = val.length
+                // 限制最小页数为1
+                const pageCount = Math.ceil(this.totalCount / this.pageSize) || 1
+                // 逻辑:删除后当前页大于总页数,替换为总页数,否则留在当前页
+                if (this.editFromType === 'add') {
+                    // 新增按钮逻辑:前往最后一页
+                    this.currentPage = pageCount
+                } else if (this.editFromType === 'import') {
+                    // 导入定位到第一页
+                    this.currentPage = 1
+                } else {
+                    // 其余逻辑(编辑、删除、整表赋值):操作后当前页大于总页数,替换为总页数,否则留在当前页
+                    this.currentPage =
+                        this.currentPage > pageCount ? pageCount : this.currentPage
+                }
+
+                this.copDataModel = this.getShowData(
+                    val,
+                    this.currentPage,
+                    this.pageSize
+                )
+                this.editFromType = ''
+            })
+
+            // this.$emit('update:value', val)
         },
         // 处理切换分页
         handleCurrentChange (val) {
@@ -1086,7 +1135,8 @@ export default {
         },
         // =====================对话框模式数据处理   金源信通改=====================
         handleDialogMode (index) {
-            const data = this.$utils.isNotEmpty(index) ? this.dataModel[index] : {}
+            // const data = this.$utils.isNotEmpty(index) ? this.dataModel[index] : {}
+            const data = this.$utils.isNotEmpty(index) ? this.dataModel[index] : this.subDefaultFormData
             this.dialogFormData = {
                 responses: JSON.parse(JSON.stringify(data)),
                 // 表单字段权限
@@ -1246,6 +1296,9 @@ export default {
         },
         // 后置脚本
         afterScript (action, position, params, callback) {
+            // 刷新拖拽表格排序实例
+            this.canSortable && this.refreshSortable()
+            this.$emit('update:value', this.dataModel)
             if (!this.hasScript()) {
                 if (callback) {
                     const flag = true

+ 22 - 1
src/components/ibps-crud/mixin/data.js

@@ -1,5 +1,6 @@
 import { cloneDeep, debounce, snakeCase, get, set } from 'lodash'
 import { on, off } from 'element-ui/lib/utils/dom'
+import Sortable from 'sortablejs'
 
 export default {
     props: {
@@ -43,7 +44,8 @@ export default {
             /**
              * @description 选中的选项
              */
-            selectionRadio: ''
+            selectionRadio: '',
+            sortable: null
         }
     },
     computed: {
@@ -97,6 +99,25 @@ export default {
                 this.ibpsData = cloneDeep(this.data)
             }
         },
+        // 初始化拖拽排序
+        initSortable () {
+            // 获取表格的tbody元素
+            const el = this.$refs.elTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+            this.sortable = new Sortable(el, {
+                // 拖拽时的类名
+                ghostClass: 'sortable-ghost',
+                // 拖拽动画时间
+                animation: 150,
+                // 结束拖拽时的回调
+                onEnd: (evt) => {
+                    const { oldIndex, newIndex } = evt
+                    // 处理数据交换
+                    const currRow = this.ibpsData.splice(oldIndex, 1)[0]
+                    this.ibpsData.splice(newIndex, 0, currRow)
+                    console.log('排序已变更', this.ibpsData)
+                }
+            })
+        },
         /**
          * @description 排序状态
          */

+ 33 - 33
src/mixins/sortable.js

@@ -3,41 +3,41 @@ import Sortable from 'sortablejs'
  * 组件必须提供一个sortableEnd方法用于拖拽数据更新
  */
 export default {
-  data() {
-    return {
-      sortable: null
-    }
-  },
-  methods: {
-    // 初始化拖拽排序
-    initSortable() {
-      // 获取表格的tbody元素
-      const el = this.$refs.elTable.$el.querySelectorAll(
-        '.el-table__body-wrapper > table > tbody'
-      )[0]
-      this.sortable = new Sortable(el, {
-        // 拖拽时的类名
-        ghostClass: 'sortable-ghost',
-        // 拖拽动画时间
-        animation: 150,
-        // 结束拖拽时的回调
-        onEnd: this.sortableEnd
-      })
+    data () {
+        return {
+            sortable: null
+        }
     },
-    // 重新实例化sortable
-    refreshSortable() {
-      this.$nextTick(() => {
+    methods: {
+        // 初始化拖拽排序
+        initSortable () {
+            // 获取表格的tbody元素
+            const el = this.$refs.elTable.$el.querySelectorAll(
+                '.el-table__body-wrapper > table > tbody'
+            )[0]
+            this.sortable = new Sortable(el, {
+                // 拖拽时的类名
+                ghostClass: 'sortable-ghost',
+                // 拖拽动画时间
+                animation: 150,
+                // 结束拖拽时的回调
+                onEnd: this.sortableEnd
+            })
+        },
+        // 重新实例化sortable
+        refreshSortable () {
+            this.$nextTick(() => {
+                if (this.sortable) {
+                    this.sortable.destroy()
+                }
+                this.initSortable()
+            })
+        }
+    },
+    // 销毁实例
+    beforeDestroy () {
         if (this.sortable) {
-          this.sortable.destroy()
+            this.sortable.destroy()
         }
-        this.initSortable()
-      })
-    }
-  },
-  // 销毁实例
-  beforeDestroy() {
-    if (this.sortable) {
-      this.sortable.destroy()
     }
-  }
 }

+ 6 - 0
src/views/component/trainingManage/index.vue

@@ -307,4 +307,10 @@ export default {
     }
 }
 </script>
+<style lang="scss" scoped>
+.el-form-item--small .el-form-item__label  ::v-deep {
+    width: auto !important;
+    color: red;
+}
+</style>