Merge remote-tracking branch 'origin/main'
This commit is contained in:
zhangzq
116
nl-vue/src/views/mock/mockconfig/form.vue
Normal file
116
nl-vue/src/views/mock/mockconfig/form.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<xn-form-container
|
||||
:title="formData.id ? '编辑Mock配置表' : '增加Mock配置表'"
|
||||
:width="700"
|
||||
v-model:open="open"
|
||||
:destroy-on-close="true"
|
||||
@close="onClose"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" layout="horizontal">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="接口路径" name="apiPath">
|
||||
<a-input v-model:value="formData.apiPath" placeholder="请输入接口路径，如：/api/user/info" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="请求方法" name="apiMethod">
|
||||
<a-input v-model:value="formData.apiMethod" placeholder="请输入请求方法：GET, POST, PUT, DELETE" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="返回数据：" name="responseJson">
|
||||
<a-input v-model:value="formData.responseJson" placeholder="请输入返回的JSON数据" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="是否启用" name="isEnabled">
|
||||
<a-radio-group
|
||||
v-model:value="formData.isEnabled"
|
||||
placeholder="请选择是否启用"
|
||||
:options="isEnabledOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
|
||||
<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
|
||||
</template>
|
||||
</xn-form-container>
|
||||
</template>
|
||||
|
||||
<script setup name="mockConfigForm">
|
||||
import tool from '@/utils/tool'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { required } from '@/utils/formRules'
|
||||
import mockConfigApi from '@/api/mock/mockConfigApi'
|
||||
// 抽屉状态
|
||||
const open = ref(false)
|
||||
const emit = defineEmits({ successful: null })
|
||||
const formRef = ref()
|
||||
// 表单数据
|
||||
const formData = ref({})
|
||||
const submitLoading = ref(false)
|
||||
const isEnabledOptions = ref([])
|
||||
|
||||
// 打开抽屉
|
||||
const onOpen = (record) => {
|
||||
open.value = true
|
||||
// 加载是否启用字典（0=否，1=是）
|
||||
isEnabledOptions.value = tool.dictList('IS_USED')
|
||||
if (record) {
|
||||
const recordData = cloneDeep(record)
|
||||
// 后端/表格里是布尔值 true/false，这里统一转换成字典需要的 '0' / '1'
|
||||
if (typeof recordData.isEnabled === 'boolean') {
|
||||
recordData.isEnabled = recordData.isEnabled ? '1' : '0'
|
||||
} else if (recordData.isEnabled === 1 || recordData.isEnabled === 0) {
|
||||
recordData.isEnabled = String(recordData.isEnabled)
|
||||
}
|
||||
formData.value = Object.assign({}, recordData)
|
||||
} else {
|
||||
// 新增时默认启用：'1'
|
||||
formData.value = {}
|
||||
formData.value.isEnabled = '1'
|
||||
}
|
||||
}
|
||||
// 关闭抽屉
|
||||
const onClose = () => {
|
||||
formRef.value.resetFields()
|
||||
formData.value = {}
|
||||
open.value = false
|
||||
}
|
||||
// 默认要校验的
|
||||
const formRules = {
|
||||
}
|
||||
// 验证并提交数据
|
||||
const onSubmit = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
submitLoading.value = true
|
||||
const formDataParam = cloneDeep(formData.value)
|
||||
// 提交前将 '0' / '1' 转回数字 0 / 1（如果后端需要的话）
|
||||
if (formDataParam.isEnabled === '1') {
|
||||
formDataParam.isEnabled = 1
|
||||
} else if (formDataParam.isEnabled === '0') {
|
||||
formDataParam.isEnabled = 0
|
||||
}
|
||||
mockConfigApi
|
||||
.mockConfigSubmitForm(formDataParam, formDataParam.id)
|
||||
.then(() => {
|
||||
onClose()
|
||||
emit('successful')
|
||||
})
|
||||
.finally(() => {
|
||||
submitLoading.value = false
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
// 抛出函数
|
||||
defineExpose({
|
||||
onOpen
|
||||
})
|
||||
</script>
|
||||
164
nl-vue/src/views/mock/mockconfig/index.vue
Normal file
164
nl-vue/src/views/mock/mockconfig/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<a-form-item label="接口路径" name="apiPath">
|
||||
<a-input v-model:value="searchFormState.apiPath" placeholder="请输入接口路径，如：/api/user/info" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="请求方法" name="apiMethod">
|
||||
<a-input v-model:value="searchFormState.apiMethod" placeholder="请输入请求方法：GET, POST, PUT, DELETE" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="是否启用" name="isEnabled">
|
||||
<a-select v-model:value="searchFormState.isEnabled" placeholder="请选择是否启用" :options="isEnabledOptions" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
|
||||
<a-button style="margin: 0 8px" @click="reset">重置</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<s-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:alert="options.alert.show"
|
||||
bordered
|
||||
:row-key="(record) => record.id"
|
||||
:tool-config="toolConfig"
|
||||
:row-selection="options.rowSelection"
|
||||
>
|
||||
<template #operator class="table-operator">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('mockConfigAdd')">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<xn-batch-button
|
||||
v-if="hasPerm('mockConfigBatchDelete')"
|
||||
buttonName="批量删除"
|
||||
icon="DeleteOutlined"
|
||||
:selectedRowKeys="selectedRowKeys"
|
||||
@batchCallBack="deleteBatchMockConfig"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'isEnabled'">
|
||||
{{ $TOOL.dictTypeData('IS_USED', record.isEnabled === true ? '1' : record.isEnabled === false ? '0' : record.isEnabled) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a @click="formRef.onOpen(record)" v-if="hasPerm('mockConfigEdit')">编辑</a>
|
||||
<a-divider type="vertical" v-if="hasPerm(['mockConfigEdit', 'mockConfigDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteMockConfig(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('mockConfigDelete')">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-card>
|
||||
<Form ref="formRef" @successful="tableRef.refresh()" />
|
||||
</template>
|
||||
|
||||
<script setup name="mockconfig">
|
||||
import tool from '@/utils/tool'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import Form from './form.vue'
|
||||
import mockConfigApi from '@/api/mock/mockConfigApi'
|
||||
const searchFormState = ref({})
|
||||
const searchFormRef = ref()
|
||||
const tableRef = ref()
|
||||
const formRef = ref()
|
||||
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
|
||||
const columns = [
|
||||
{
|
||||
title: '接口路径',
|
||||
dataIndex: 'apiPath'
|
||||
},
|
||||
{
|
||||
title: '请求方法',
|
||||
dataIndex: 'apiMethod',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '返回数据',
|
||||
dataIndex: 'responseJson'
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
dataIndex: 'isEnabled',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
width: 150
|
||||
},
|
||||
]
|
||||
// 操作栏通过权限判断是否显示
|
||||
if (hasPerm(['mockConfigEdit', 'mockConfigDelete'])) {
|
||||
columns.push({
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 150
|
||||
})
|
||||
}
|
||||
const selectedRowKeys = ref([])
|
||||
// 列表选择配置
|
||||
const options = {
|
||||
// columns数字类型字段加入 needTotal: true 可以勾选自动算账
|
||||
alert: {
|
||||
show: true,
|
||||
clear: () => {
|
||||
selectedRowKeys.value = ref([])
|
||||
}
|
||||
},
|
||||
rowSelection: {
|
||||
onChange: (selectedRowKey, selectedRows) => {
|
||||
selectedRowKeys.value = selectedRowKey
|
||||
}
|
||||
}
|
||||
}
|
||||
const loadData = (parameter) => {
|
||||
const searchFormParam = cloneDeep(searchFormState.value)
|
||||
return mockConfigApi.mockConfigPage(Object.assign(parameter, searchFormParam)).then((data) => {
|
||||
return data
|
||||
})
|
||||
}
|
||||
// 重置
|
||||
const reset = () => {
|
||||
searchFormRef.value.resetFields()
|
||||
tableRef.value.refresh(true)
|
||||
}
|
||||
// 删除
|
||||
const deleteMockConfig = (record) => {
|
||||
let params = [
|
||||
{
|
||||
id: record.id
|
||||
}
|
||||
]
|
||||
mockConfigApi.mockConfigDelete(params).then(() => {
|
||||
tableRef.value.refresh(true)
|
||||
})
|
||||
}
|
||||
// 批量删除
|
||||
const deleteBatchMockConfig = (params) => {
|
||||
mockConfigApi.mockConfigDelete(params).then(() => {
|
||||
tableRef.value.clearRefreshSelected()
|
||||
})
|
||||
}
|
||||
const isEnabledOptions = tool.dictList('IS_USED')
|
||||
</script>
|
||||
Reference in New Issue
Block a user