|
|
@@ -1,28 +1,198 @@
|
|
|
<template>
|
|
|
- <n-space :vertical="true" :size="16">
|
|
|
- <n-card title="Tab Detail" :bordered="false" size="small" class="shadow-sm rounded-16px">
|
|
|
- <n-space :vertical="true" :size="12">
|
|
|
- <div>当前路由的描述数据(meta)：</div>
|
|
|
- <div>{{ route.meta }}</div>
|
|
|
- <div>当前路由的查询数据(query)：</div>
|
|
|
- <div>{{ route.query }}</div>
|
|
|
- <n-button @click="handleToTab">返回Tab</n-button>
|
|
|
+ <n-modal v-model:show="conditionVisible" preset="card" 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-grid>
|
|
|
+ <n-space :size="25" justify="end">
|
|
|
+ <n-button type="primary" @click="addCondition">添加条件</n-button>
|
|
|
+ <n-button type="primary" @click="addConditionGroup">添加条件组</n-button>
|
|
|
</n-space>
|
|
|
- </n-card>
|
|
|
- </n-space>
|
|
|
+ <n-data-table :columns="columns" :data="data" style="margin-top: 20px" />
|
|
|
+ <!-- <pre>{{ JSON.stringify(data, null, 2) }}</pre> -->
|
|
|
+ </n-form>
|
|
|
+ </n-modal>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { useRoute } from 'vue-router';
|
|
|
-import { routeName } from '@/router';
|
|
|
-import { useRouterPush } from '@/composables';
|
|
|
+import { ref, computed, reactive, watch, h } from 'vue';
|
|
|
+import { NSelect, NInput } from 'naive-ui';
|
|
|
+import type { DataTableColumns, FormInst, FormItemRule } from 'naive-ui';
|
|
|
+import { createRequiredFormRule } from '@/utils';
|
|
|
+export interface Props {
|
|
|
+ /** 弹窗可见性 */
|
|
|
+ conditionVisible: boolean;
|
|
|
+ /**
|
|
|
+ * 弹窗类型
|
|
|
+ * add: 新增
|
|
|
+ * edit: 编辑
|
|
|
+ */
|
|
|
+ type?: 'add' | 'edit';
|
|
|
+ /** 编辑的表格行数据 */
|
|
|
+ editData?: BackgroundEvent.Event | null;
|
|
|
+}
|
|
|
+
|
|
|
+export type ModalConditionType = NonNullable<Props['type']>;
|
|
|
+
|
|
|
+defineOptions({ name: 'TableConditionModal' });
|
|
|
+
|
|
|
+type RowData = { key: number; name: string; age: string; address: string };
|
|
|
+const createData = (): RowData[] => [
|
|
|
+ {
|
|
|
+ key: 0,
|
|
|
+ name: 'John Brown',
|
|
|
+ age: '32',
|
|
|
+ address: 'New York No. 1 Lake Park'
|
|
|
+ },
|
|
|
+ { key: 1, name: 'Jim Green', age: '42', address: 'London No. 1 Lake Park' },
|
|
|
+ { key: 2, name: 'Joe Black', age: '32', address: 'Sidney No. 1 Lake Park' }
|
|
|
+];
|
|
|
+const data = ref(createData());
|
|
|
+const createColumns = (): DataTableColumns<RowData> => [
|
|
|
+ {
|
|
|
+ title: '条件组',
|
|
|
+ key: 'name',
|
|
|
+ render(row, index) {
|
|
|
+ return h(NInput, {
|
|
|
+ value: row.name,
|
|
|
+ onUpdateValue(v) {
|
|
|
+ data.value[index].name = v;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '选择事件',
|
|
|
+ key: 'age',
|
|
|
+ render(row, index) {
|
|
|
+ return h(NSelect, {
|
|
|
+ value: row.age,
|
|
|
+ onUpdateValue(v) {
|
|
|
+ data.value[index].age = v;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '选择字段',
|
|
|
+ key: 'address',
|
|
|
+ render(row, index) {
|
|
|
+ return h(NSelect, {
|
|
|
+ value: row.address,
|
|
|
+ onUpdateValue(v) {
|
|
|
+ data.value[index].address = v;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '条件',
|
|
|
+ key: 'address',
|
|
|
+ render(row, index) {
|
|
|
+ return h(NSelect, {
|
|
|
+ value: row.address,
|
|
|
+ onUpdateValue(v) {
|
|
|
+ data.value[index].address = v;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '条件值',
|
|
|
+ key: 'address',
|
|
|
+ render(row, index) {
|
|
|
+ return h(NInput, {
|
|
|
+ value: row.address,
|
|
|
+ onUpdateValue(v) {
|
|
|
+ data.value[index].address = v;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+];
|
|
|
+const columns = ref(createColumns());
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+ type: 'add',
|
|
|
+ editData: null
|
|
|
+});
|
|
|
+
|
|
|
+interface Emits {
|
|
|
+ (e: 'update:conditionVisible', eventModelVisible: boolean): void;
|
|
|
+}
|
|
|
+
|
|
|
+const emit = defineEmits<Emits>();
|
|
|
+
|
|
|
+const conditionVisible = computed({
|
|
|
+ get() {
|
|
|
+ return props.conditionVisible;
|
|
|
+ },
|
|
|
+ set(visible) {
|
|
|
+ emit('update:conditionVisible', visible);
|
|
|
+ }
|
|
|
+});
|
|
|
+const closeModal = () => {
|
|
|
+ conditionVisible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const formRef = ref<HTMLElement & FormInst>();
|
|
|
|
|
|
-const route = useRoute();
|
|
|
-const { routerPush } = useRouterPush();
|
|
|
+type FormModel = Pick<BackgroundEvent.Event, 'name'>;
|
|
|
|
|
|
-function handleToTab() {
|
|
|
- routerPush({ name: routeName('function_tab') });
|
|
|
+const formModel = reactive<FormModel>(createDefaultFormModel());
|
|
|
+
|
|
|
+const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
|
|
|
+ name: createRequiredFormRule('请输入事件名称')
|
|
|
+};
|
|
|
+
|
|
|
+function createDefaultFormModel(): FormModel {
|
|
|
+ return {
|
|
|
+ name: ''
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+function handleUpdateFormModel(model: Partial<FormModel>) {
|
|
|
+ Object.assign(formModel, model);
|
|
|
+}
|
|
|
+
|
|
|
+function handleUpdateFormModelByModalType() {
|
|
|
+ const handlers: Record<ModalConditionType, () => void> = {
|
|
|
+ add: () => {
|
|
|
+ const defaultFormModel = createDefaultFormModel();
|
|
|
+ handleUpdateFormModel(defaultFormModel);
|
|
|
+ },
|
|
|
+ edit: () => {
|
|
|
+ if (props.editData) {
|
|
|
+ handleUpdateFormModel(props.editData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ handlers[props.type]();
|
|
|
+}
|
|
|
+
|
|
|
+// 添加条件
|
|
|
+async function addCondition() {
|
|
|
+ await formRef.value?.validate();
|
|
|
+ window.$message?.success('添加成功!');
|
|
|
+ closeModal();
|
|
|
+}
|
|
|
+// 添加条件组
|
|
|
+async function addConditionGroup() {
|
|
|
+ await formRef.value?.validate();
|
|
|
+ window.$message?.success('添加成功!');
|
|
|
+ closeModal();
|
|
|
}
|
|
|
+watch(
|
|
|
+ () => props.conditionVisible,
|
|
|
+ newValue => {
|
|
|
+ if (newValue) {
|
|
|
+ handleUpdateFormModelByModalType();
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style scoped></style>
|
Yi