kpt-system-web/src/views/background/event/components/table-action-modal.vue

<template>
  <n-modal v-model:show="modalVisible" preset="card" :title="title" style="width: 70%">
    <n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
      <n-grid :cols="48" :x-gap="18">
        <n-form-item-grid-item :span="25" label="事件名称" path="name">
          <n-input v-model:value="formModel.name" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="25" label="是否启用" path="is_show">
          <n-radio-group v-model:value="formModel.is_show">
            <n-radio v-for="item in EventIsShowOptions" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
          </n-radio-group>
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="25" label="事件描述" path="remarks">
          <n-input v-model:value="formModel.remarks" type="textarea" placeholder="请输入字段描述" />
        </n-form-item-grid-item>
      </n-grid>
      <n-space style="display: flex; flex-direction: column">
        <n-button type="primary" @click="addEventField">添加事件字段</n-button>
        <n-data-table :columns="columns" :data="tableData" :pagination="pagination" />
      </n-space>
      <n-space class="w-full pt-16px" :size="25" justify="end">
        <n-button class="w-72px" @click="closeModal">取消</n-button>
        <n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
      </n-space>
    </n-form>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch, h } from 'vue';
import type { FormInst, FormItemRule, DataTableColumns, PaginationProps } from 'naive-ui';
import { NButton, NTag, NInput, NSelect } from 'naive-ui';
import { EditSelectBoxDataSource, EditSelectBoxIsShow, EditSelectBoxShowLine, EventIsShowOptions } from '@/constants';
import { createRequiredFormRule } from '@/utils';
import { basicEventColumnName, fetchEventAdd, fetchEventEdit } from '@/service/api/event';
export interface Props {
  /** 弹窗可见性 */
  visible: boolean;
  /**
   * 弹窗类型
   * add: 新增
   * edit: 编辑
   */
  type?: 'add' | 'edit';
  /** 编辑的表格行数据 */
  editData?: BackgroundEvent.Event | null;
}

export type ModalType = NonNullable<Props['type']>;

defineOptions({ name: 'TableActionModal' });

const props = withDefaults(defineProps<Props>(), {
  type: 'add',
  editData: null
});

interface Emits {
  (e: 'update:visible', visible: boolean): void;
}
/*  */
const emit = defineEmits<Emits>();

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible) {
    emit('update:visible', visible);
  }
});

const titles: Record<ModalType, string> = {
  add: '添加事件',
  edit: '编辑事件'
};

const title = computed(() => {
  return titles[props.type];
});

const formRef = ref<HTMLElement & FormInst>();

type FormModel = Pick<BackgroundEvent.Event, 'name' | 'is_show' | 'remarks' | 'event_field' | 'is_delete' | 'id'>;

const formModel = reactive<FormModel>(createDefaultFormModel());

const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
  name: createRequiredFormRule('请输入事件名称'),
  is_show: createRequiredFormRule('请选择是否启用'),
  is_delete: createRequiredFormRule('请选择是否删除'),
  remarks: createRequiredFormRule('请输入事件描述'),
  event_field: createRequiredFormRule('请输入事件关联字段'),
  id: createRequiredFormRule('请输入事件id')
};

const selectBoxData: EventSelectBox.Data = {
  cowFieldData: [],
  isDetails: EditSelectBoxIsShow,
  isList: EditSelectBoxIsShow,
  dataSource: EditSelectBoxDataSource,
  isRequired: EditSelectBoxIsShow,
  showLine: EditSelectBoxShowLine
};

function setCowFieldData(data: ApiBackground.BasicCowField[] | null) {
  selectBoxData.cowFieldData = data;
}

function getCowFieldData() {
  const data = basicEventColumnName('animals_cow');
  data.then(res => {
    setCowFieldData(res.data);
  });
}

function createDefaultFormModel(): FormModel {
  return {
    id: 0,
    name: '',
    is_show: 1,
    is_delete: 2,
    remarks: '',
    event_field: null
  };
}

function handleUpdateFormModel(model: Partial<FormModel>) {
  Object.assign(formModel, model);
}

function handleUpdateFormModelByModalType() {
  const handlers: Record<ModalType, () => void> = {
    add: () => {
      const defaultFormModel = createDefaultFormModel();
      handleUpdateFormModel(defaultFormModel);
    },
    edit: () => {
      if (props.editData) {
        handleUpdateFormModel(props.editData);
        if (props.editData.event_field) {
          // eslint-disable-next-line @typescript-eslint/no-use-before-define
          tableData.value = props.editData.event_field;
        }
      }
    }
  };

  handlers[props.type]();
}

const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
});
const createData = (): RowField.Data[] => [
  {
    is_required: 1,
    field_id: 0,
    field_name: '',
    column_name: '',
    data_source: 1,
    is_list: 1,
    is_details: 1,
    show_line: 1
  }
];
const tableData = ref(createData());
const createColumns = (): DataTableColumns<RowField.Data> => [
  {
    title: '序号',
    key: 'orderNum',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
            background: 'none',
            color: 'rgb(31, 34, 37)'
          },
          type: 'info',
          bordered: false
        },
        {
          default: () => index + 1
        }
      );
    }
  },
  {
    title: '字段名称',
    key: 'columnName',
    maxWidth: 300,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return h(NSelect, {
        options: selectBoxData.cowFieldData,
        value: tableData.value[index].column_name,
        onUpdateValue(value: string) {
          tableData.value[index].column_name = value;
        }
      });
    }
  },
  {
    title: '是否必选/填',
    key: 'isRequired',
    maxWidth: 100,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return h(NSelect, {
        options: selectBoxData.isRequired,
        value: tableData.value[index].is_required,
        onUpdateValue(value: number) {
          tableData.value[index].is_required = value;
        }
      });
    }
  },
  {
    title: '数据来源',
    key: 'dataSource',
    maxWidth: 200,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return h(NSelect, {
        options: selectBoxData.dataSource,
        value: tableData.value[index].data_source,
        onUpdateValue(value: number) {
          tableData.value[index].data_source = value;
        }
      });
    }
  },
  {
    title: '列表是否可见',
    key: 'isList',
    maxWidth: 200,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return h(NSelect, {
        options: selectBoxData.isList,
        value: tableData.value[index].is_list,
        onUpdateValue(value: number) {
          tableData.value[index].is_list = value;
        }
      });
    }
  },
  {
    title: '详情页是否可见',
    key: 'isDetails',
    maxWidth: 200,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return h(NSelect, {
        options: selectBoxData.isDetails,
        value: tableData.value[index].is_details,
        onUpdateValue(value: number) {
          tableData.value[index].is_details = value;
        }
      });
    }
  },
  {
    title: '显示分布',
    key: 'showLine',
    maxWidth: 200,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return h(NSelect, {
        options: selectBoxData.showLine,
        value: tableData.value[index].show_line,
        onUpdateValue(value: number) {
          tableData.value[index].show_line = value;
        }
      });
    }
  },
  {
    title: '操作',
    key: 'actions',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(row, index) {
      return [
        h(
          NButton,
          {
            type: 'error',
            size: 'small',
            onClick: () => deleteData(index) // 点击按钮后的回调
          },
          { default: () => '删除' } // 按钮显示名称
        )
      ];
    }
  }
];

const columns = ref(createColumns());
// 添加事件字段
function addEventField() {
  tableData.value.push(createData()[0]);
}

// 删除
function deleteData(indexKey: number) {
  tableData.value.splice(indexKey, 1);
}

const closeModal = () => {
  tableData.value = [];
  modalVisible.value = false;
};

getCowFieldData();

async function handleSubmit() {
  await formRef.value?.validate();
  formModel.event_field = tableData.value;

  if (props.type === 'add') {
    const data = fetchEventAdd(formModel);
    data.then(res => {
      if (res.data) {
        window.$message?.success(`${titles[props.type]}成功！`);
      }
    });
  }

  if (props.type === 'edit') {
    const data = fetchEventEdit(formModel);
    data.then(res => {
      if (res.data) {
        window.$message?.success(`${titles[props.type]}成功！`);
      }
    });
  }
  closeModal();
}

watch(
  () => props.visible,
  newValue => {
    if (newValue) {
      handleUpdateFormModelByModalType();
    }
  }
);
</script>

<style scoped></style>