|
|
@@ -6,7 +6,10 @@
|
|
|
* @Describe: 数据设置器
|
|
|
-->
|
|
|
<script lang="ts" setup>
|
|
|
-import { Icon } from '@iconify/vue'
|
|
|
+import { computed, ref } from 'vue'
|
|
|
+import { IconButton, Icon } from '@repo/ui'
|
|
|
+import SelectTableModal from '@/features/selectTableModal/index.vue'
|
|
|
+
|
|
|
const props = withDefaults(
|
|
|
defineProps<{
|
|
|
data: any
|
|
|
@@ -20,16 +23,241 @@ const props = withDefaults(
|
|
|
const emit = defineEmits<{
|
|
|
'update:visible': [value: boolean]
|
|
|
}>()
|
|
|
+
|
|
|
+const selectTableModalRef = ref<InstanceType<typeof SelectTableModal> | null>(null)
|
|
|
+// 数据表
|
|
|
+const tableList = ref<any[]>([])
|
|
|
+// 查询字段
|
|
|
+const fieldList = ref<any[]>([])
|
|
|
+// 查询条件
|
|
|
+const conditionList = ref<any[]>([])
|
|
|
+// 排序方式
|
|
|
+const sortList = ref<any[]>([])
|
|
|
+// 查询上限
|
|
|
+const limit = ref<number>(100)
|
|
|
+// 输出
|
|
|
+const outputList = ref<any[]>([])
|
|
|
+
|
|
|
+// 异常处理
|
|
|
+const exceptionConfig = ref<{
|
|
|
+ timeout: number
|
|
|
+ retry: number
|
|
|
+ handler: number
|
|
|
+}>({
|
|
|
+ timeout: 60,
|
|
|
+ retry: 3,
|
|
|
+ handler: 0
|
|
|
+})
|
|
|
+
|
|
|
+const columns = computed(() => {
|
|
|
+ return (tableList.value?.[0]?.columns || []).filter(
|
|
|
+ (item: any) => !fieldList.value.find((field: any) => field.name === item.name)
|
|
|
+ )
|
|
|
+})
|
|
|
+
|
|
|
+const addDatabase = () => {
|
|
|
+ selectTableModalRef.value?.open()
|
|
|
+}
|
|
|
+
|
|
|
+const onAddTable = (table: unknown) => {
|
|
|
+ tableList.value = [table]
|
|
|
+}
|
|
|
</script>
|
|
|
+
|
|
|
<template>
|
|
|
- <div class="w-full">
|
|
|
- <el-collapse>
|
|
|
- <el-collapse-item title="数据表" name="1">
|
|
|
- <el-empty description="暂无数据表配置" :image-size="40" />
|
|
|
+ <el-scrollbar class="w-full">
|
|
|
+ <el-collapse expand-icon-position="left" :model-value="['1', '2', '3', '4', '5', '6', '7']">
|
|
|
+ <el-collapse-item name="1">
|
|
|
+ <template #title="{ isActive }">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <span>数据表</span>
|
|
|
+ <IconButton
|
|
|
+ size="large"
|
|
|
+ v-show="isActive"
|
|
|
+ icon="iconoir:plus"
|
|
|
+ link
|
|
|
+ @click.stop="addDatabase"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-for="table in tableList" :key="table">
|
|
|
+ <div
|
|
|
+ class="px-12px flex items-center justify-between cursor-pointer mb-12px p-12px hover:bg-gray-100 border border-solid border-gray-300 rounded-8px"
|
|
|
+ >
|
|
|
+ <div class="left flex items-center gap-24px">
|
|
|
+ <div class="icon w-40px h-40px bg-#ffb800 rounded-md grid place-items-center">
|
|
|
+ <Icon icon="iconoir:database-solid" color="#fff" height="24" width="24" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-#333 text-xs">{{ table.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <IconButton icon="ep:delete" size="small" />
|
|
|
+ </div>
|
|
|
+ <div class="flex gap-4px">
|
|
|
+ <el-tag
|
|
|
+ v-for="column in table.columns"
|
|
|
+ :key="column.name"
|
|
|
+ effect="light"
|
|
|
+ size="small"
|
|
|
+ >{{ column.name }}</el-tag
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-empty v-if="!tableList.length" description="请添加一个数据表到此处" :image-size="40" />
|
|
|
+ </el-collapse-item>
|
|
|
+
|
|
|
+ <el-collapse-item name="2">
|
|
|
+ <template #title="{ isActive }">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <span>查询字段查询字段</span>
|
|
|
+ <el-dropdown popper-class="w-200px" placement="bottom-end">
|
|
|
+ <IconButton size="large" v-show="isActive" icon="iconoir:plus" link @click.stop />
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-for="column in columns"
|
|
|
+ :key="column.name"
|
|
|
+ @click="fieldList.push(column)"
|
|
|
+ >{{ column.name }}</el-dropdown-item
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-for="field in fieldList" :key="field.name" class="flex gap-4px mb-12px">
|
|
|
+ <span>{{ field.name }}</span>
|
|
|
+ <el-tag effect="light">{{ field.type }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <el-empty v-if="!fieldList.length" description="请添加查询字段" :image-size="40" />
|
|
|
+ </el-collapse-item>
|
|
|
+
|
|
|
+ <el-collapse-item title="查询条件" name="3"> </el-collapse-item>
|
|
|
+
|
|
|
+ <el-collapse-item name="5">
|
|
|
+ <template #title="{ isActive }">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <span>排序方式</span>
|
|
|
+ <el-dropdown popper-class="w-200px" placement="bottom-end">
|
|
|
+ <IconButton size="large" v-show="isActive" icon="iconoir:plus" link @click.stop />
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-for="column in fieldList"
|
|
|
+ :key="column.name"
|
|
|
+ @click="
|
|
|
+ sortList.push({
|
|
|
+ name: column.name,
|
|
|
+ type: column.type,
|
|
|
+ sort: 'asc'
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >{{ column.name }}</el-dropdown-item
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-for="field in sortList" :key="field.name" class="flex items-center gap-4px mb-12px">
|
|
|
+ <div class="flex-1 flex justify-between">
|
|
|
+ <span>{{ field.name }}</span>
|
|
|
+ <el-tag effect="light">{{ field.type }}</el-tag>
|
|
|
+ </div>
|
|
|
+ <el-select style="width: 120px" v-model="field.sort" placeholder="请选择">
|
|
|
+ <el-option label="升序" value="asc"></el-option>
|
|
|
+ <el-option label="降序" value="desc"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <el-empty v-if="!sortList.length" description="请添加排序字段" :image-size="40" />
|
|
|
+ </el-collapse-item>
|
|
|
+
|
|
|
+ <el-collapse-item title="查询上限" name="6">
|
|
|
+ <el-input-number
|
|
|
+ v-model="limit"
|
|
|
+ :min="1"
|
|
|
+ :max="1000"
|
|
|
+ style="width: 100%"
|
|
|
+ controls-position="right"
|
|
|
+ placeholder="请输入查询上限"
|
|
|
+ />
|
|
|
+ </el-collapse-item>
|
|
|
+
|
|
|
+ <el-collapse-item title="输出" name="7">
|
|
|
+ <el-collapse-item name="7-1">
|
|
|
+ <template #title="{ isActive }">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <span>outputList</span>
|
|
|
+ <el-dropdown popper-class="w-200px" placement="bottom-end">
|
|
|
+ <IconButton size="large" v-show="isActive" icon="iconoir:plus" link @click.stop />
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-for="column in fieldList"
|
|
|
+ :key="column.name"
|
|
|
+ @click="
|
|
|
+ outputList.push({
|
|
|
+ name: column.name,
|
|
|
+ type: column.type
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >{{ column.name }}</el-dropdown-item
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ v-for="field in outputList"
|
|
|
+ :key="field.name"
|
|
|
+ class="flex items-center gap-4px mb-12px"
|
|
|
+ >
|
|
|
+ <span>{{ field.name }}</span>
|
|
|
+ <el-tag effect="light">{{ field.type }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse-item>
|
|
|
+
|
|
|
+ <el-collapse-item title="异常处理" name="8">
|
|
|
+ <el-form>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="超时时间">
|
|
|
+ <el-input-number
|
|
|
+ v-model="exceptionConfig.timeout"
|
|
|
+ :min="1"
|
|
|
+ :max="1000"
|
|
|
+ style="width: 100%"
|
|
|
+ controls-position="right"
|
|
|
+ placeholder="请输入"
|
|
|
+ suffix="s"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="重试次数">
|
|
|
+ <el-input-number
|
|
|
+ v-model="exceptionConfig.retry"
|
|
|
+ :min="0"
|
|
|
+ :max="5"
|
|
|
+ style="width: 100%"
|
|
|
+ controls-position="right"
|
|
|
+ placeholder="请输入"
|
|
|
+ suffix="s"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="异常处理方式">
|
|
|
+ <el-select v-model="exceptionConfig.handler" placeholder="请选择">
|
|
|
+ <el-option label="中断流程" :value="0" />
|
|
|
+ <el-option label="返回设定内容" :value="1" />
|
|
|
+ <el-option label="执行异常流程" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
</el-collapse-item>
|
|
|
- <el-collapse-item title="输出" name="2"> </el-collapse-item>
|
|
|
- <el-collapse-item title="异常处理" name="3"> </el-collapse-item>
|
|
|
</el-collapse>
|
|
|
- </div>
|
|
|
+ </el-scrollbar>
|
|
|
+
|
|
|
+ <SelectTableModal ref="selectTableModalRef" @add="onAddTable" />
|
|
|
</template>
|
|
|
-<style lang="less" scoped></style>
|
jiaxing.liao