@jzt-packages/components 1.0.0

package/src/JztQueryTable/components/ColumnsSetting.vue

@@ -0,0 +1,404 @@
+<template>
+  <JztDialog
+    title="列配置"
+    v-model="visible"
+    width="700"
+    @close="_cancel"
+    :cancelText="false"
+    :is-show-fullscreen="false"
+    :disabled="!cancelEdit"
+    :show-footer="false"
+    @change-fullscreen="val => (isFullscreen = val)"
+  >
+    <DeployToAccountLevelSetting
+      v-model="deployVisible"
+      :mode="deployMode"
+      :grid-params="gridParams"
+      :page-size="setPageSize"
+      :config-value="dragListColumn"
+      :template-info="formData"
+      @success="onQueryTemplate"
+    />
+    <div class="table-box" v-loading="loading || templateLoading">
+      <div class="tips-box warning-bg flx-left-center">
+        <el-icon color="#FFA00C" class="mr4">
+          <WarningFilled />
+        </el-icon>
+        拖拽表格行来调整顺序，或双击标题/列宽直接进行编辑。
+      </div>
+      <el-form v-if="isAdmin && gridTemplateList.length > 0" :model="formData" ref="formRef" label-width="auto">
+        <el-form-item label="当前列配置模版名称" prop="templateId">
+          <el-select-v2
+            v-model="formData.templateId"
+            placeholder="请选择当前列配置模版名称"
+            filterable
+            style="width: 50%"
+            :options="gridTemplateList"
+            :props="{
+              value: 'id',
+              label: 'configName'
+            }"
+            @change="onChangeTemplate"
+          />
+        </el-form-item>
+      </el-form>
+      <el-table
+        row-key="prop"
+        :data="dragListColumn"
+        ref="dragTableRef"
+        id="table_uuid_setting_drag"
+        style="width: 100%"
+        :max-height="isFullscreen ? 'calc(100vh - 220px)' : 'calc(60vh - 100px)'"
+      >
+        <el-table-column label="排序" width="80" align="left" fixed="left">
+          <template #default="{ $index }">
+            <div class="move_allowDrag" style="cursor: move">
+              <i class="iconfont icon-paixu"></i>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="prop" label="ID" minWidth="130" />
+        <el-table-column prop="text" label="标题" minWidth="130">
+          <template #default="{ row, $index }">
+            <el-input
+              v-if="editIndex == $index"
+              v-model="row.label"
+              :maxlength="20"
+              @blur="saveEdit(row, 'label')"
+              class="label-edit-input"
+            ></el-input>
+            <div v-else @dblclick="startEdit(row, $index, 'label')" style="width: 100%; height: 30px">
+              {{ row.label }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="minWidth" label="列宽" width="110">
+          <template #default="{ row, $index }">
+            <el-input-number
+              v-if="editIndex == $index"
+              :controls="false"
+              v-model="row.minWidth"
+              :maxlength="20"
+              :min="60"
+              :max="800"
+              @blur="saveEdit(row, 'minWidth')"
+              style="width: 90px"
+              class="width-edit-input"
+            ></el-input-number>
+            <div v-else @dblclick="startEdit(row, $index, 'minWidth')" style="width: 100%; height: 30px">
+              {{ row.minWidth }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isSetShow" label="显示" width="100" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-switch v-if="row.isSetting" v-model="row.isSetShow" @change="changeSwitch(row)" />
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page-size flx-left-center">
+        默认每页记录数：
+        <el-select v-model="setPageSize" placeholder="请选择" style="width: 100px">
+          <el-option v-for="item in pageSizes" :key="item" :label="item" :value="item" />
+        </el-select>
+      </div>
+    </div>
+    <template v-if="isAdmin && gridTemplateList.length > 0" #footer>
+      <el-button v-if="formData.templateId === '0'" type="primary" plain @click="removeSetting">重置默认配置</el-button>
+      <el-button v-if="formData.templateId === '0'" type="primary" plain @click="onOpenDeployDialog('add')">
+        下发至用户
+      </el-button>
+      <template v-if="formData.templateId !== '0'">
+        <el-button type="primary" plain @click="onRemoveTemplate">删除模版</el-button>
+        <el-button type="primary" plain @click="onOpenDeployDialog('edit')">编辑模版</el-button>
+        <el-button type="primary" plain @click="onOpenDeployDialog('view')">查看生效账号</el-button>
+        <el-button type="primary" @click="onSaveTemplate">保存并下发</el-button>
+      </template>
+      <el-button v-if="formData.templateId === '0'" type="primary" @click="() => _saveColumn()">保存当前配置</el-button>
+    </template>
+    <template v-else #footer>
+      <el-button type="danger" @click="removeSetting">重置</el-button>
+      <el-button type="primary" @click="() => _saveColumn()">确定</el-button>
+    </template>
+  </JztDialog>
+</template>
+
+<script lang="tsx" setup>
+import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
+import * as _ from 'lodash-es'
+import Sortable from 'sortablejs'
+import { nextTick, onBeforeUnmount, readonly, ref, unref } from 'vue'
+import JztDialog from '../../JztDialog/index.vue'
+import { pageSizes } from '../const'
+import { useSettingTable } from '../hooks/useTableSetting'
+import { useTemplate } from '../hooks/useTemplate'
+import { ColumnProps, GridParams } from '../interface/index'
+import DeployToAccountLevelSetting from './DeployToAccountLevelSetting.vue'
+const $emit = defineEmits(['update:columns', 'refreshSetting', 'update:loading', 'changeColumns', 'refreshColumnTable'])
+const { getTableSetting, setTableSetting, removeGridConfig, currentTableColumns } = useSettingTable()
+const props = withDefaults(
+  defineProps<{
+    columns?: ColumnProps[]
+    loading: boolean
+    // gridParams?: GridParams
+  }>(),
+  {
+    columns: () => [],
+    loading: false
+  }
+)
+
+const backupColumnsList = ref<ColumnProps[]>([])
+const gridParams = ref<GridParams>({ gridId: '', url: '' })
+const isFullscreen = ref(false)
+const visible = ref(false)
+const dragListColumn = ref<any[]>([])
+const originalColumn = ref<any[]>([])
+
+const {
+  loading: templateLoading,
+  deployVisible,
+  deployMode,
+  isAdmin,
+  formData,
+  gridTemplateList,
+  onOpenDeployDialog,
+  onRemoveTemplate,
+  onSaveTemplate,
+  onQueryTemplate,
+  onChangeTemplate
+} = useTemplate(
+  () => gridParams.value,
+  () => setPageSize.value,
+  dragListColumn,
+  originalColumn,
+  async (columns: any) => processColumns(columns),
+  () => onValidIsAllHidden()
+)
+
+const changeDialog = async (gridParams1: GridParams) => {
+  visible.value = true
+  nextTick(() => {
+    gridParams.value = gridParams1
+    dragSort()
+    onQueryTemplate()
+  })
+}
+const changeSwitch = row => {
+  row.hidden = !row.isSetShow
+}
+
+const editIndex = ref(-1)
+const editProp = ref('')
+const cancelEdit = ref(true)
+const setPageSize = ref(10)
+const defaultPageSize = ref(10) // 用于恢复数据
+
+const startEdit = (row, index, prop) => {
+  if (!row.isSetting) return
+  editIndex.value = index
+  editProp.value = prop
+  nextTick(() => {
+    if (prop === 'label') {
+      ;(document?.querySelector('.label-edit-input .el-input__inner') as HTMLElement)?.focus()
+    } else {
+      ;(document?.querySelector('.width-edit-input .el-input__inner') as HTMLElement)?.focus()
+    }
+  })
+}
+
+const saveEdit = (row, prop) => {
+  editIndex.value = -1
+  editProp.value = ''
+  if (row[prop] === '') {
+    ElMessage.error('请输入列名')
+    cancelEdit.value = false
+  } else {
+    row.editing = false
+    cancelEdit.value = true
+  }
+}
+
+const dragTableRef = ref<InstanceType<typeof ElTable> | null>(null)
+
+let sortableInstance: Sortable | null = null
+function dragSort() {
+  const tbody = dragTableRef.value?.$el.querySelector('.el-table__body-wrapper tbody')
+  if (!tbody) return
+  sortableInstance = Sortable.create(tbody, {
+    handle: '.move_allowDrag',
+    animation: 150,
+    draggable: '.el-table__row',
+    onEnd(evt: any) {
+      if (evt.oldDraggableIndex !== evt.newDraggableIndex) {
+        let currRow = dragListColumn.value.splice(evt.oldDraggableIndex, 1)[0]
+        dragListColumn.value.splice(evt.newDraggableIndex, 0, currRow)
+      }
+    }
+  })
+}
+
+// 组件卸载时清理 Sortable 实例
+onBeforeUnmount(() => {
+  if (sortableInstance) {
+    sortableInstance.destroy()
+    sortableInstance = null
+  }
+})
+
+// 取消
+const _cancel = () => {
+  visible.value = false
+  editIndex.value = -1
+  editProp.value = ''
+  cancelEdit.value = true
+  setPageSize.value = defaultPageSize.value
+  const list = initEndColumns(originalColumn.value)
+  dragListColumn.value = _.cloneDeep(list)
+}
+
+const onValidIsAllHidden = () => {
+  const isAllHidden = dragListColumn.value.every(item => item.hidden)
+  if (isAllHidden) {
+    ElMessage.error('请至少显示一列')
+    return false
+  } else {
+    return true
+  }
+}
+
+// 保存
+const _saveColumn = async (toast?: boolean) => {
+  return new Promise<any>(async (resolve, reject) => {
+    $emit('refreshColumnTable', 'confirm')
+    if (!onValidIsAllHidden()) return
+    const { id, columns } = (await setTableSetting({
+      gridParams: gridParams.value,
+      tableColumns: dragListColumn.value,
+      pageSize: setPageSize.value,
+      toast: toast || false
+    })) as { id: string; columns: ColumnProps[] }
+    visible.value = false
+    getTableSettingFn()
+
+    resolve({
+      columns,
+      gridId: id
+    })
+  })
+}
+const gridId = ref('')
+const getTableSettingFn = async () => {
+  try {
+    dragListColumn.value = []
+    originalColumn.value = []
+    const cloneDeepBackupColumns = _.cloneDeep(backupColumnsList.value)
+    const { columns, pageSize, id } = await getTableSetting(
+      gridParams.value,
+      props.columns,
+      handleLoading,
+      cloneDeepBackupColumns
+    )
+    gridId.value = id
+    defaultPageSize.value = pageSize
+    setPageSize.value = pageSize
+    const list = initEndColumns(columns)
+    dragListColumn.value = _.cloneDeep(list)
+    originalColumn.value = readonly(_.cloneDeep(columns))
+    $emit('changeColumns', dragListColumn.value, pageSize, id)
+  } catch (error) {
+    // 获取表格配置失败
+    console.log(1233123, error)
+  }
+}
+const initEndColumns = columns => {
+  if (!columns || !columns.length) return []
+  const list = _.cloneDeep(columns)
+  dragListColumn.value = list.filter(item => item.isShow)
+  return list || []
+}
+const handleLoading = flag => {
+  $emit('update:loading', flag)
+}
+// 初始化列配置
+const removeSetting = () => {
+  ElMessageBox.confirm(`确认重置列配置吗？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      if (!gridParams.value) return
+      $emit('refreshColumnTable', 'remove')
+      removeGridConfig(gridParams.value, () => {
+        _cancel()
+        getTableSettingFn()
+      })
+    })
+    .catch(() => {
+      // 用户取消重置
+    })
+}
+// watch(
+//   () => props?.gridParams?.gridId,
+//   gridId => {
+//     if (gridId) {
+//       getTableSettingFn()
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )
+
+// 获取当时接口的内容
+const getCurrentTableColumns = () => {
+  return currentTableColumns.value
+}
+const changeTableColumns = async (columns: ColumnProps[], gridParams1: GridParams) => {
+  const tableColumns = await processColumns(columns)
+  handleLoading(true)
+  gridParams.value = gridParams1
+  backupColumnsList.value = tableColumns
+  onQueryTemplate()
+  getTableSettingFn()
+}
+
+// 初始化 处理数据
+const processColumns = async (columns: ColumnProps[]): Promise<ColumnProps[]> => {
+  const result: ColumnProps[] = []
+  for (const col of columns) {
+    if (col.prop && !col.type && col.isShow !== false && col.prop !== 'operation') {
+      const newCol: ColumnProps = {
+        ...col,
+        isShow: col.isShow ?? true,
+        isSetting: unref(col.isSetting) ?? true,
+        isFilterEnum: col.isFilterEnum ?? true
+      }
+      if (col._children?.length) {
+        newCol._children = await processColumns(col._children)
+      }
+      result.push(newCol)
+    }
+  }
+  return result
+}
+defineExpose({
+  changeDialog,
+  getCurrentTableColumns,
+  _saveColumn,
+  changeTableColumns
+})
+</script>
+<style lang="scss" scoped>
+.icon-paixu {
+  font-size: 20px;
+  margin-left: 2px;
+}
+
+.page-size {
+  border-top: 1px solid #f5f7fa;
+  padding: 10px 0 0 4px;
+}
+</style>

package/src/JztQueryTable/components/ColumnsSetting1.vue

@@ -0,0 +1,220 @@
+<template>
+  <el-popover
+    placement="bottom"
+    popper-class="interBarControl-setPopover"
+    :width="210"
+    :visible="visible"
+    trigger="click"
+    @click.stop=""
+  >
+    <template #reference>
+      <span @click.stop="visible = !visible">
+        <slot name="reference">
+          <el-button title="列设置" :icon="Setting" class="tool_btn" />
+        </slot>
+      </span>
+    </template>
+    <div class="popover-list" @click.stop>
+      <div class="search-box">
+        <el-input placeholder="搜索" size="small" v-model="inputValue" @input="querySearch" clearable>
+          <i class="el-icon-search el-input__icon" slot="prefix"></i>
+        </el-input>
+      </div>
+      <div class="switch-box">
+        <el-tree
+          :allow-drop="allowDrop"
+          :allow-drag="allowDrag"
+          :data="dragListColumn"
+          draggable
+          :props="{
+            children: '_children'
+          }"
+          default-expand-all
+          node-key="id"
+        >
+          <template #default="{ node, data }">
+            <div class="custom-tree-node">
+              <div class="operation-icon">
+                <el-icon><Operation /></el-icon>
+              </div>
+              <div class="text sle">{{ node.label }}</div>
+              <div class="show-icon">
+                <el-switch size="small" v-model="data.isShow" :key="data.prop"></el-switch>
+              </div>
+            </div>
+          </template>
+        </el-tree>
+      </div>
+      <div class="btn-group flx-between-center justify-content-between">
+        <el-button size="small" @click="_resetColumn">重置</el-button>
+        <div>
+          <el-button size="small" @click="_cancel">取消</el-button>
+          <el-button size="small" type="success" @click="_saveColumn">保存</el-button>
+        </div>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script lang="ts" setup>
+import * as _ from 'lodash-es'
+import { ref, watch, onMounted, onUnmounted, readonly } from 'vue'
+import { Setting } from '@element-plus/icons-vue'
+import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { AllowDropType } from 'element-plus/es/components/tree/src/tree.type'
+import { setTableSetting, getTableSetting } from '../hooks/useTableSetting'
+import { ColumnProps } from '../interface/index'
+const $emit = defineEmits(['update:columns', 'refreshSetting', 'update:loading'])
+const props = withDefaults(
+  defineProps<{
+    columns?: ColumnProps[]
+    columnTypes?: Array<any>
+    loading: boolean
+  }>(),
+  {
+    columns: () => [],
+    columnTypes: () => [],
+    loading: false
+  }
+)
+
+const visible = ref(false)
+const inputValue = ref('')
+const dragListColumn = ref([])
+const originalColumn = ref([])
+
+// 列表操作输入
+const querySearch = queryString => {
+  let tableColumn = props.columns
+  let results = queryString ? tableColumn.filter(createFilter(queryString)) : tableColumn
+  dragListColumn.value = _.cloneDeep([...results])
+}
+
+const createFilter = queryString => {
+  return tableColumn => {
+    return tableColumn.label.indexOf(queryString) === 0
+  }
+}
+
+const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType): boolean => {
+  if (type === 'inner') return false
+  if (draggingNode.parent?.id && draggingNode.parent?.id !== dropNode.parent?.id) return false
+  if (dropNode.data?.prop === 'operation' && type === 'next') return false
+  return true
+}
+const allowDrag = (node: Node) => {
+  if (props.columnTypes.includes(node.data?.type) || node.data?.prop === 'operation') return false
+  return node.data?.isSetting
+}
+
+// 重置
+const _resetColumn = () => {
+  dragListColumn.value = _.cloneDeep(originalColumn.value)
+  _saveColumn()
+}
+
+// 取消
+const _cancel = () => {
+  closePopover()
+}
+
+// 保存
+const _saveColumn = () => {
+  closePopover()
+  // TODO 暂时不走配置
+  // setTableSetting(dragListColumn.value)
+  // $emit('refreshSetting')
+  const newList = _.cloneDeep(dragListColumn.value)
+  $emit('update:columns', newList)
+}
+const loading = ref(true)
+const getTableSettingFn = () => {
+  getTableSetting(props.columns, handleLoading)
+}
+const handleLoading = flag => {
+  $emit('update:loading', flag)
+}
+watch(
+  () => props.columns,
+  value => {
+    if (value) {
+      // console.log("watch", value);
+      dragListColumn.value = _.cloneDeep(props.columns)
+    }
+  }
+)
+
+const closePopover = () => {
+  visible.value = false
+}
+
+onMounted(() => {
+  getTableSettingFn()
+  originalColumn.value = readonly(_.cloneDeep(props.columns)) // 不可修改
+  dragListColumn.value = _.cloneDeep(props.columns)
+  window.addEventListener('click', closePopover)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', closePopover)
+})
+</script>
+
+<style lang="scss" scoped>
+.popover-list {
+  margin: -12px;
+  padding: 8px 0 0;
+  .search-box {
+    padding: 0 8px;
+  }
+  .switch-box {
+    max-height: 300px;
+    overflow-y: auto;
+    margin-top: 4px;
+    // max-height: 246px;
+    // overflow-y: auto;
+  }
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: var(--el-popover-padding);
+  overflow: hidden;
+  height: 32px;
+  line-height: 32px;
+  margin-right: 4px;
+  .operation-icon {
+    width: 20px;
+    :deep(.el-icon) {
+      vertical-align: middle;
+    }
+  }
+  .text {
+    flex: 1;
+    text-align: left;
+    margin: 0 5px;
+  }
+  .show-icon {
+    width: 30px;
+    text-align: center;
+  }
+
+  &:hover {
+    color: var(--el-color-primary);
+    background-color: var(--theme-select-dropdown-item-hover);
+    border-radius: 10px;
+  }
+}
+
+.btn-group {
+  padding: 12px;
+  border-top: 1px solid #e4e7ed;
+  .el-button + .el-button {
+    margin-left: 8px;
+  }
+}
+</style>