lingji-work-fe/src/components/custom-table-column-modal/index.vue

<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-30 10:54:49
-->
<template>
  <Modal
    v-model:open="visible"
    title="自定义列"
    width="960px"
    unmountOnClose
    titleAlign="start"
    centered
    wrapClassName="custom-table-column-modal"
    @cancel="close"
  >
    <div class="modal-body">
      <!-- 左侧分组 -->
      <div class="left">
        <div v-for="group in dataSource" :key="group.label" class="group-item">
          <div class="title-row">
            <span class="text">{{ group.label }}</span>
          </div>
          <div class="fields">
            <Checkbox
              v-for="option in group.columns"
              :key="option.value"
              :checked="isCheck(option)"
              :value="option.value"
              :disabled="option.is_require === ENUM_STATUS.NO"
              @change="(e) => onCheckChange(e.target.checked, option)"
            >
              {{ option.label }}
            </Checkbox>
          </div>
        </div>
      </div>
      <!-- 右侧已选 -->
      <div class="right">
        <span class="checked-title mb-16px">
          已添加<span class="count">（{{ checkColumns.length }}）</span>
        </span>
        <div class="checked-list">
          <div v-for="(groupName, index) in requiredGroupNames" :key="index" class="checked-item !cursor-default">
            <div class="flex items-center">
              <img :src="icon1" alt="icon" class="mr-8px" width="16" height="16" />
              <span>{{ groupName }}</span>
            </div>
          </div>
          <VueDraggable v-model="checkColumns">
            <div
              v-for="item in checkColumns"
              :key="item"
              class="checked-item justify-between"
              :class="isRequiredColumn(item) ? '!display-none' : ''"
            >
              <div class="flex items-center">
                <icon-menu size="16" class="mr-8px" />
                <span>{{ getCheckColumnLabel(item) }}</span>
              </div>
              <icon-close size="16" class="color-#737478 cursor-pointer" @click="removeCheckedField(item)" />
            </div>
          </VueDraggable>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="flex">
        <Button @click="close">取消</Button>
        <Button type="primary" @click="onSubmit">确定</Button>
      </div>
    </template>
  </Modal>
</template>

<script setup>
import { Checkbox, Modal, Button } from 'ant-design-vue';
import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';

import { getCustomColumns, updateCustomColumns } from '@/api/all/common';

import icon1 from './img/icon-lock.png';

const props = defineProps({
  type: {
    type: String,
    default: '',
    required: true,
  },
});

const emit = defineEmits(['success']);

const ENUM_STATUS = {
  YES: 0,
  NO: 1,
};

const visible = ref(false);

const dataSource = ref([]);
const checkColumns = ref([]); // 选中字段
const allColumns = ref([]); // 所有字段
const requiredGroupNames = ref([]); // 必选分组名称

const open = () => {
  initData();
  visible.value = true;
};

const close = () => {
  visible.value = false;

  dataSource.value = [];
  checkColumns.value = [];
  allColumns.value = [];
  requiredGroupNames.value = [];
};

const initData = async () => {
  const { code, data } = await getCustomColumns({ type: props.type });
  if (code === 200) {
    const { selected_columns, groups } = data;
    dataSource.value = groups;
    setDefaultCheckColumns(groups, selected_columns);
    allColumns.value = groups.flatMap((group) => group.columns);
  }
};

const isCheck = (option) => {
  return checkColumns.value.includes(option.value);
};
const getCheckColumnLabel = (value) => {
  const column = allColumns.value.find((column) => column.value === value);
  return column?.label;
};
const isRequiredColumn = (value) => {
  const column = allColumns.value.find((column) => column.value === value);
  return column?.is_require === 1;
};

const removeCheckedField = (value) => {
  checkColumns.value = checkColumns.value.filter((column) => column !== value);
};

// 勾选/取消
const onCheckChange = (checked, option) => {
  if (checked) {
    checkColumns.value.push(option.value);
  } else {
    checkColumns.value = checkColumns.value.filter((item) => item !== option.value);
  }
};

// 提交
const onSubmit = async () => {
  const { code } = await updateCustomColumns({ type: props.type, selected_columns: checkColumns.value });
  if (code === 200) {
    emit('success', checkColumns.value);
    close();
  }
};

const setDefaultCheckColumns = (groups, selected_columns) => {
  const requiredGroups = groups.filter((group) => group.is_require === 1);
  const requiredValues = requiredGroups
    .flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
    .map((col) => col.value);

  const merged = union(requiredValues, selected_columns);

  checkColumns.value = merged;
  requiredGroupNames.value = requiredGroups.map((group) => group.label);
};

// 暴露方法
defineExpose({ open });
</script>

<style lang="scss">
@import './style.scss';
</style>