@scenetechnology/cj_element_table 0.0.1

package/packages/components/tablesetting.vue

@@ -0,0 +1,344 @@
+<template>
+    <el-dialog v-model="modelValue" title="列表设置" :width="800">
+        <div class="content">
+            <div style="flex: 3;">
+                <div class="classTitle">
+                    选择列表显示字段
+                    <ElCheckbox style="margin-left:5px;font-weight: 400;font-size: 14px;color: #666666;" :indeterminate="indeterminate" v-model="checkAll" @click.prevent.native="handleCheckAll">全选</ElCheckbox>
+                </div>
+                <ElCheckboxGroup v-model="checkAllGroup" >
+                    <el-checkbox :disabled="item.require" @change="change_check(item, $event)" v-for="(item, index) in columnsList"  :key="index" :label="item.label">
+                        {{ item.label }} {{ item.checked }}
+                        <span v-if="item.require">（必选字段）</span>
+                    </el-checkbox>
+                </ElCheckboxGroup>
+            </div>
+            <div style="flex:2;">
+                <div style="display: flex;align-items: center;justify-content: space-between;">
+                    <span style="font-weight: 400;font-size: 15px;color: #333333;">已选择字段</span>
+                    <div style="margin-left: 10px;">
+                        <span style="font-weight: 400;font-size: 14px;color: #333333;">冻结列数：</span>
+                        <ElSelect v-model="freeze" style="width: 100px;" filterable clearable>
+                            <ElOption v-for="(item,index) in columnsOptionList" :value="item.value" :key="index">{{item.label}}</ElOption>
+                        </ElSelect>
+                    </div>
+                </div>
+                <tuo-drag v-if="modelValue" :freeze="freeze" @updatesortColumns="updatesortColumns" ref="tuoDrags"  :initialSortColumns="sortColumns"></tuo-drag>
+            </div>
+        </div>
+        <template #footer>
+            <ElButton @click="handleReset">取消</ElButton>
+            <ElButton type="primary" @click="handleSubmit()" :loading="exportBtnLoading" style="margin-left: 8px">确定</ElButton>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted,nextTick} from 'vue'
+import {
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElPagination,
+  ElButton,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElInput,
+  ElDialog,
+  ElSelect,
+  ElOption
+} from 'element-plus'
+import { useRoute } from 'vue-router'
+import model_title_icon from '@/assets/images/model_title_icon.png'
+import { UserQuery_update, UserQuery_save, UserQuery_index } from '@/api/All.ts'
+// import { getToken } from '@/libs/util'
+import tuoDrag from './tuo-drag.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  columnsList: {
+    type: Array,
+    default: () => []
+  },
+  columnSetting: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: '800px'
+  }
+})
+
+const emit = defineEmits(['update:modelValue',"updateTable"])
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+const exportBtnAllLoading = ref(false)
+const exportBtnLoading = ref(false)
+const sortColumns = ref([])
+const columnsOptionList = ref([])
+const modalLoading = ref(false)
+const indeterminate = ref(false)
+const checkAll = ref(false)
+const checkAllGroup = ref([])
+const tempCheckAllGroup=ref([])
+const checkRequireGroup=ref([])
+const dropSortColumns = ref([])
+const freeze = ref('')
+const tuoDrags = ref(null)
+let route_path = ''
+const route = useRoute()
+if(route&&route.name)
+{
+    route_path = route.name
+}
+const project = ref(JSON.parse(localStorage.getItem('selectedProject')))
+const initColumns = (val: any[]) => {
+    checkAllGroup.value = []
+    sortColumns.value = []
+    checkRequireGroup.value=[]
+    tempCheckAllGroup.value=[]
+    const tempColumnsOptionList = []
+    val.forEach((item, index) => {
+      tempCheckAllGroup.value.push(item.label)
+      if (item.require) {
+        checkAllGroup.value.push(item.label)
+        checkRequireGroup.value.push(item.label)
+      }
+      tempColumnsOptionList.push({
+        label: '至第' + (index + 1) + '列',
+        value: index + 1
+      })
+    })
+    tempColumnsOptionList.push({
+      label: '不冻结',
+      value: '不冻结'
+    })
+    if (props.columnSetting.id) {
+      // console.log(props.columnSettingObj)
+      checkAllGroup.value = [...props.columnSetting.content.checkColumnData]
+      freeze.value = props.columnSetting.content.freeze
+    }else{ //没有列表设置数据默认全部显示
+      nextTick(()=>{
+        handleCheckAll('nodata')
+      });
+    }
+    columnsOptionList.value = tempColumnsOptionList
+    sortColumns.value = [...checkAllGroup.value]
+
+    if (checkAllGroup.value.length === val.length) {
+      checkAll.value = true
+      checkAllGroup.value = tempCheckAllGroup.value
+      indeterminate.value = false
+    } else if (checkAllGroup.value.length > 1) {
+      checkAll.value = false
+      indeterminate.value = true
+    } else {
+      checkAll.value = false
+      indeterminate.value = false
+    }
+}
+
+watch(
+  () => props.columnsList,
+    (val) => {
+      console.log('props.columnsList-watch',props.columnsList)
+      initColumns(val)
+    }
+)
+
+watch(
+  () => props.columnSetting,
+  (newVal) => {
+    if (newVal !== undefined) {
+      initColumns(props.columnsList)
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  initColumns(props.columnsList)
+  console.log('props.columnsList',props.columnsList)
+})
+
+const handleCheckAll = (init) => {
+  if(checkAllGroup.value.length!=tempCheckAllGroup.value.length||init=='nodata'){ //全选
+    tempCheckAllGroup.value.map(item=>{
+      let status=sortColumns.value.some(sort=>{
+        return item==sort
+      })
+      if(!status){
+        sortColumns.value.push(item)
+      }
+    })
+    sortColumns.value=sortColumns.value.concat([])
+    checkAllGroup.value=tempCheckAllGroup.value
+    checkAllGroup.value=checkAllGroup.value.concat([])
+    checkAll.value=true
+    indeterminate.value=false
+  }else{ //取消全选
+    checkAllGroup.value=checkRequireGroup.value
+    checkAllGroup.value=checkAllGroup.value.concat([])
+    let sort=[]
+    sortColumns.value.map(item=>{
+      checkRequireGroup.value.map(require=>{
+        if(require==item){
+          sort.push(item) 
+        }
+      })
+    })
+    sortColumns.value=sort
+    sortColumns.value= sortColumns.value.concat([])
+    if(checkRequireGroup.value.length==0){ 
+      indeterminate.value=false
+      checkAll.value=false
+    }else{
+      indeterminate.value=true
+      checkAll.value=false
+    }
+    
+  }
+}
+const change_check = (item: any,event) => {
+  if(event){
+    sortColumns.value.push(item.label)
+  }else{
+    sortColumns.value.map((col,index)=>{
+      if(col==item.label){
+        sortColumns.value.splice(index,1)
+      }
+    })
+  }
+  sortColumns.value=sortColumns.value.concat([])
+  console.log(sortColumns.value,event,2222)
+  if (checkAllGroup.value.length === tempCheckAllGroup.value.length) { //判断全选按钮状态
+    indeterminate.value = false
+    checkAll.value = true
+  } else if (checkAllGroup.value.length > 0) {
+    indeterminate.value = true
+    checkAll.value = false
+  } else {
+    indeterminate.value = false
+    checkAll.value = false
+  }
+}
+// const checkAllGroupChange = (data: string[]) => {
+//   sortColumns.value= data
+//   console.log(sortColumns.value,1111)
+//   if (data.length === tempCheckAllGroup.value.length) {
+//     indeterminate.value = false
+//     checkAll.value = true
+//   } else if (data.length > 0) {
+//     indeterminate.value = true
+//     checkAll.value = false
+//   } else {
+//     indeterminate.value = false
+//     checkAll.value = false
+//   }
+// }
+
+const handleReset = () => {
+  modelValue.value = false
+}
+
+const updatesortColumns = (val: string[]) => {
+  dropSortColumns.value = val
+  console.log(dropSortColumns.value,'dropSortColumns.value')
+}
+
+const handleSubmit = async () => {
+
+  if (dropSortColumns.value .length === 0) {
+    message.warning('请选择')
+    return
+  }
+
+  exportBtnLoading.value = true
+  const obj = {
+    tag: route_path + '-table',
+    name: route_path,
+    content: JSON.stringify({checkColumnData: dropSortColumns.value,freeze: freeze.value}),
+  }
+
+  try {
+    if (props.columnSetting.id) {
+      const res = await UserQuery_update({ ...obj, id: props.columnSetting.id })
+      if (res.code === 200) {
+        modelValue.value = false
+        emit("updateTable")
+        // 需要实现父组件的handleGetUserQuery方法
+      } else {
+        message.error(res.msg)
+      }
+    } else {
+      const res = await UserQuery_save(obj)
+      if (res.code === 200) {
+        modelValue.value = false
+        emit("updateTable")
+        // 需要实现父组件的handleGetUserQuery方法
+      } else {
+        message.error(res.msg)
+      }
+    }
+  } finally {
+    exportBtnLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.dialog-content {
+  padding: 20px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* :deep(.el-checkbox-group) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+} */
+.classTitle::before{
+    content: "*";
+    display: inline-block;
+    margin-right: 4px;
+    line-height: 1;
+    font-family: SimSun;
+    font-size: 12px;
+    color: #ed4014;
+}
+.classTitle{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #333;
+    }
+.content {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+.headerTitle{
+    font-weight: 500;
+    font-size: 16px;
+    color: #1D2027;
+}
+</style>

package/packages/components/tuo-drag.vue

@@ -0,0 +1,197 @@
+<template>
+    <div style="max-height: 300px;overflow-y: auto;">
+        <ul :id="random_id">
+            <li class="ele" style="width: 100%;" v-for="(item,index) in sortColumns" :draggable="true" :data-key="item">
+                  <div class="ele_content" style="max-width: 150px;">
+                    <img @dragstart.stop.prevent style="width: 8px;height: 15px;vertical-align: middle;margin-right: 5px;pointer-events: none" :src="tuozhui_icon"/>
+                    <span title="拖动可调整顺序" :style="{verticalAlign:'middle',color:activeColumns.includes(item)?'#0072D6':'#333'}" style="vertical-align: middle;">{{item||'--'}}</span>
+                  </div>
+                 <img v-if="activeColumns.includes(item)" :src="bluckLock" style="width: 12px;height: 16px;"/>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import tuozhui_icon from '@/assets/images/tuozhui_icon.png'
+import bluckLock from '@/assets/images/blue_lock.png'
+
+const props = defineProps(['initialSortColumns', 'freeze'])
+const emit = defineEmits(['updatesortColumns', 'updateCheckAllGroup',"stopDrag"])
+const random_id=ref('drag_comp_'+(Math.random()+'').split(".")[1])
+let node = ref(null)
+let draging = ref(null)
+
+const activeColumns = ref([])
+const sortColumns = ref([...props.initialSortColumns])
+
+const sortedColumns = computed(() => {
+  return sortColumns.value.map((item, index) => ({
+    key: item,
+    freezeStatus: props.freeze >= index + 1,
+  }))
+})
+
+watch(() => props.initialSortColumns, (newVal) => {
+  // console.log('newVal---', newVal)
+  sortColumns.value = [...newVal]
+  setTimeout(() => {
+    updateAction()
+  }, 1);
+})
+
+watch(() => props.freeze, () => {
+  updateAction()
+})
+const updateAction = () => {
+  // console.log('updateAction-----',getOrder())
+  emit('updatesortColumns', getOrder())
+  const tempActiveColumns = []
+  for(let i = 0; i < props.freeze; i++) {
+    tempActiveColumns.push(getOrder()[i])
+  }
+  activeColumns.value = tempActiveColumns
+}
+
+const handleDragEnd = () => {
+  console.log('执行----结束拖动')
+  emit("stopDrag",getOrder())
+  updateAction()
+}
+
+const getOrder = () => {
+    const items = document.querySelectorAll(`#${random_id.value} .ele`)
+    const order = Array.from(items).map(item => item.dataset.key)
+    // console.log("当前顺序: " + order)
+    return order
+}
+
+const _index = (el) => {
+  let index = 0
+  if (!el || !el.parentNode) return -1
+  while (el && (el = el.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const _css = (el, prop, val) => {
+  const style = el && el.style
+  if (style) {
+    if (val === void 0) {
+      if (document.defaultView && document.defaultView.getComputedStyle) {
+        val = document.defaultView.getComputedStyle(el, '')
+      } else if (el.currentStyle) {
+        val = el.currentStyle
+      }
+      return prop === void 0 ? val : val[prop]
+    } else {
+      if (!(prop in style)) {
+        prop = '-webkit-' + prop
+      }
+      style[prop] = val + (typeof val === 'string' ? '' : 'px')
+    }
+  }
+}
+
+const _animate = (prevRect, target) => {
+  const ms = 300
+  if (ms) {
+    const currentRect = target.getBoundingClientRect()
+    if (prevRect.nodeType === 1) {
+      prevRect = prevRect.getBoundingClientRect()
+    }
+    _css(target, 'transition', 'none')
+    _css(target, 'transform', 'translate3d(' +
+      (prevRect.left - currentRect.left) + 'px,' +
+      (prevRect.top - currentRect.top) + 'px,0)'
+    )
+    target.offsetWidth
+    _css(target, 'transition', 'all ' + ms + 'ms')
+    _css(target, 'transform', 'translate3d(0,0,0)')
+    clearTimeout(target.animated)
+    target.animated = setTimeout(() => {
+      _css(target, 'transition', '')
+      _css(target, 'transform', '')
+      target.animated = false
+    }, ms)
+  }
+}
+
+const updateFatherCheckAllGroupObj = () => {
+  // const orderList = getOrder()
+  console.log('updateFatherCheckAllGroupObj------')
+  emit('updateCheckAllGroup', getOrder())
+}
+
+onMounted(() => {
+  node.value = document.querySelector(`#${random_id.value}`)
+  node.value.ondragend = handleDragEnd
+  
+  node.value.ondragstart = (event) => {
+    console.log("start")
+    event.dataTransfer.setData("te", event.target.innerText)
+    draging.value = event.target
+  }
+  
+  node.value.ondragover = (event) => {
+    event.preventDefault()
+    let target = event.target
+    if (target.nodeName === "DIV") {
+      target = target.parentNode
+    }
+    if (target.nodeName === "LI" && target !== draging.value) {
+      const targetRect = target.getBoundingClientRect()
+      const dragingRect = draging.value.getBoundingClientRect()
+      if (target && target.animated) return
+      
+      if (_index(draging.value) < _index(target)) {
+        target.parentNode.insertBefore(draging.value, target.nextSibling)
+      } else {
+        target.parentNode.insertBefore(draging.value, target)
+      }
+      _animate(dragingRect, draging.value)
+      _animate(targetRect, target)
+    }
+  }
+  
+  node.value.ondrop = (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    console.log("drop",getOrder())
+    
+  }
+  
+  updateAction()
+})
+</script>
+
+<style lang="less" scoped>
+::-webkit-scrollbar {
+    display: none;
+}
+.ele_content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.ele{
+    cursor: pointer;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.ele:hover{
+    background-color: #F7F8FB;
+}
+* {
+    list-style: none;
+}
+
+</style>