|
|
@@ -0,0 +1,274 @@
|
|
|
+<template>
|
|
|
+ <n-modal v-model:show="settingVisible" preset="card" title="事件影响设置" style="width: 70%">
|
|
|
+ <n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel">
|
|
|
+ <n-space style="display: flex; flex-direction: column">
|
|
|
+ <n-button type="primary" @click="addEventSetting">添加事件</n-button>
|
|
|
+ <n-data-table :columns="columns" :data="tableData" />
|
|
|
+ </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 { computed, h, reactive, ref, watch } from 'vue';
|
|
|
+import type { FormInst, DataTableColumns } from 'naive-ui';
|
|
|
+import { NButton, NSelect, NTag, NSpace } from 'naive-ui';
|
|
|
+export interface Props {
|
|
|
+ /** 弹窗可见性 */
|
|
|
+ settingVisible: boolean;
|
|
|
+ /**
|
|
|
+ * 弹窗类型
|
|
|
+ * add: 新增
|
|
|
+ * edit: 编辑
|
|
|
+ */
|
|
|
+ type?: 'add' | 'edit';
|
|
|
+ /** 编辑的表格行数据 */
|
|
|
+ editData?: BackgroundEvent.Event | null;
|
|
|
+}
|
|
|
+
|
|
|
+export type ModalSettingType = NonNullable<Props['type']>;
|
|
|
+
|
|
|
+defineOptions({ name: 'TableSettingModal' });
|
|
|
+
|
|
|
+const createColumns = (): DataTableColumns<RowField.Data> => [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ key: 'index',
|
|
|
+ // 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: [
|
|
|
+ { label: 'OK', value: '1' },
|
|
|
+ { label: 'No', value: '2' }
|
|
|
+ ],
|
|
|
+ // value: tableData.value[index].column_name,
|
|
|
+ onUpdateTableValue(value: string) {
|
|
|
+ console.log('选择事件', value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '选择字段',
|
|
|
+ key: 'isRequired',
|
|
|
+ maxWidth: 100,
|
|
|
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
+ render(row, index) {
|
|
|
+ return h(NSelect, {
|
|
|
+ options: [
|
|
|
+ { label: 'OK', value: '1' },
|
|
|
+ { label: 'No', value: '2' }
|
|
|
+ ],
|
|
|
+ // value: tableData.value[index].column_name,
|
|
|
+ onUpdateTableValue(value: string) {
|
|
|
+ console.log('选择事件', value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '影响方式',
|
|
|
+ key: 'dataSource',
|
|
|
+ maxWidth: 200,
|
|
|
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
+ render(row, index) {
|
|
|
+ return h(NSelect, {
|
|
|
+ options: [
|
|
|
+ { label: 'OK', value: '1' },
|
|
|
+ { label: 'No', value: '2' }
|
|
|
+ ],
|
|
|
+ // value: tableData.value[index].column_name,
|
|
|
+ onUpdateTableValue(value: string) {
|
|
|
+ console.log('选择事件', value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '条件类型',
|
|
|
+ key: 'isList',
|
|
|
+ maxWidth: 200,
|
|
|
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
+ render(row, index) {
|
|
|
+ return h(NSelect, {
|
|
|
+ options: [
|
|
|
+ { label: 'OK', value: '1' },
|
|
|
+ { label: 'No', value: '2' }
|
|
|
+ ],
|
|
|
+ // value: tableData.value[index].column_name,
|
|
|
+ onUpdateTableValue(value: string) {
|
|
|
+ console.log('选择事件', value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '满足条件',
|
|
|
+ key: 'isDetails',
|
|
|
+ maxWidth: 200,
|
|
|
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
+ render(row, index) {
|
|
|
+ return h(NSelect, {
|
|
|
+ options: [
|
|
|
+ { label: 'OK', value: '1' },
|
|
|
+ { label: 'No', value: '2' }
|
|
|
+ ],
|
|
|
+ // value: tableData.value[index].column_name,
|
|
|
+ onUpdateTableValue(value: string) {
|
|
|
+ console.log('选择事件', value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'actions',
|
|
|
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
+ render(row, index) {
|
|
|
+ return [
|
|
|
+ h(
|
|
|
+ NButton,
|
|
|
+ {
|
|
|
+ type: 'info',
|
|
|
+ size: 'small',
|
|
|
+ onClick: () => editData(index) // 点击按钮后的回调
|
|
|
+ },
|
|
|
+ { default: () => '编辑' } // 按钮显示名称
|
|
|
+ ),
|
|
|
+ h(
|
|
|
+ NButton,
|
|
|
+ {
|
|
|
+ type: 'error',
|
|
|
+ size: 'small',
|
|
|
+ onClick: () => deleteData(index) // 点击按钮后的回调
|
|
|
+ },
|
|
|
+ { default: () => '删除' } // 按钮显示名称
|
|
|
+ )
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ }
|
|
|
+];
|
|
|
+
|
|
|
+const columns = ref(createColumns());
|
|
|
+
|
|
|
+const createData = (): RowSettingEvent.Data[] => [
|
|
|
+ {
|
|
|
+ event_name: '',
|
|
|
+ field_name: '',
|
|
|
+ impact_mode: 1,
|
|
|
+ impact_value: '',
|
|
|
+ where_type: 1,
|
|
|
+ condition: []
|
|
|
+ }
|
|
|
+];
|
|
|
+
|
|
|
+const tableData = ref(createData());
|
|
|
+
|
|
|
+interface Emits {
|
|
|
+ (e: 'update:settingVisible', visible: boolean): void;
|
|
|
+}
|
|
|
+
|
|
|
+const emit = defineEmits<Emits>();
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+ type: 'add',
|
|
|
+ editData: null
|
|
|
+});
|
|
|
+
|
|
|
+const settingVisible = computed({
|
|
|
+ get() {
|
|
|
+ return props.settingVisible;
|
|
|
+ },
|
|
|
+ set(visible) {
|
|
|
+ emit('update:settingVisible', visible);
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const closeModal = () => {
|
|
|
+ settingVisible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+function handleSubmit() {
|
|
|
+ console.log('handleSubmit');
|
|
|
+}
|
|
|
+
|
|
|
+const formRef = ref<HTMLElement & FormInst>();
|
|
|
+type FormModel = Pick<BackgroundEvent.Event, 'name'>;
|
|
|
+
|
|
|
+const formModel = reactive<FormModel>(createDefaultFormModel());
|
|
|
+function handleUpdateFormModel(model: Partial<FormModel>) {
|
|
|
+ Object.assign(formModel, model);
|
|
|
+}
|
|
|
+
|
|
|
+function createDefaultFormModel(): FormModel {
|
|
|
+ return {
|
|
|
+ name: ''
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+function deleteData(index: number) {
|
|
|
+ console.log('==index=====', index);
|
|
|
+}
|
|
|
+
|
|
|
+function editData(index: number) {
|
|
|
+ console.log('==index=====', index);
|
|
|
+}
|
|
|
+
|
|
|
+function handleUpdateFormModelByModalType() {
|
|
|
+ const handlers: Record<ModalSettingType, () => void> = {
|
|
|
+ add: () => {
|
|
|
+ const defaultFormModel = createDefaultFormModel();
|
|
|
+ handleUpdateFormModel(defaultFormModel);
|
|
|
+ },
|
|
|
+ edit: () => {
|
|
|
+ if (props.editData) {
|
|
|
+ handleUpdateFormModel(props.editData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ handlers[props.type]();
|
|
|
+}
|
|
|
+
|
|
|
+// 添加条件
|
|
|
+async function addEventSetting() {
|
|
|
+ tableData.value.push(createData()[0]);
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.settingVisible,
|
|
|
+ newValue => {
|
|
|
+ if (newValue) {
|
|
|
+ handleUpdateFormModelByModalType();
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+</script>
|
|
|
+<style scoped></style>
|
Yi