舱单弹窗
parent
5f99ad50ca
commit
7a79138839
@ -0,0 +1,56 @@
|
|||||||
|
/*
|
||||||
|
* @Description:
|
||||||
|
* @Author: lijj
|
||||||
|
* @Date: 2024-04-25 15:48:33
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { request } from '/@/utils/request'
|
||||||
|
import { DataResult, PageRequest } from '/@/api/model/baseModel'
|
||||||
|
enum Api {
|
||||||
|
list = '/mainApi/ClientParam/GetClientParamList',
|
||||||
|
edit = '/mainApi/ClientParam//EditClientParam',
|
||||||
|
info = '/mainApi/ClientParam/GetClientParamInfo',
|
||||||
|
delete = '/mainApi/ClientParam/BatchDelClientParam',
|
||||||
|
GetTenantParamDataSelectList = '/mainApi/ClientParam/GetTenantParamDataSelectList'
|
||||||
|
}
|
||||||
|
// 列表 (Auth)
|
||||||
|
export function GetClientParamList(data: PageRequest) {
|
||||||
|
return request<DataResult>({
|
||||||
|
url: Api.list,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 编辑 (Auth)
|
||||||
|
export function EditClientParam(data: PageRequest) {
|
||||||
|
return request<DataResult>({
|
||||||
|
url: Api.edit,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 详情 (Auth)
|
||||||
|
export function GetClientParamInfo(query) {
|
||||||
|
return request<DataResult>({
|
||||||
|
url: Api.info,
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除 (Auth)
|
||||||
|
export function BatchDelClientParam(data: PageRequest) {
|
||||||
|
return request<DataResult>({
|
||||||
|
url: Api.delete,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GetTenantParamDataSelectList(query) {
|
||||||
|
return request<DataResult>({
|
||||||
|
url: Api.GetTenantParamDataSelectList,
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
/*
|
||||||
|
* @Description:
|
||||||
|
* @Author: lijj
|
||||||
|
* @Date: 2024-04-25 15:48:33
|
||||||
|
*/
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||||
|
// 引入字典数据
|
||||||
|
import { getDictOption } from '/@/utils/dictUtil'
|
||||||
|
import { useOptionsStore } from '/@/store/modules/options'
|
||||||
|
import { GetTenantParamDataSelectList } from './api'
|
||||||
|
const optionsStore = useOptionsStore()
|
||||||
|
const itemNameOption = ref([])
|
||||||
|
// 模块字典
|
||||||
|
const modulesDict = await getDictOption('modules')
|
||||||
|
export const columns: BasicColumn[] = [
|
||||||
|
{
|
||||||
|
title: '客户名称',
|
||||||
|
dataIndex: 'customerName',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户参数类型',
|
||||||
|
dataIndex: 'paramType',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户参数名称',
|
||||||
|
dataIndex: 'paramName',
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
dataIndex: 'note',
|
||||||
|
width: 200
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const searchFormSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'paramName',
|
||||||
|
label: '客户参数名称',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
component: 'Input'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export const formSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
defaultValue: '',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'paramCode',
|
||||||
|
label: '客户参数类别',
|
||||||
|
required: true,
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 12 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
option: optionsStore.getOptionsByCode('GetTenantParamSelectList'),
|
||||||
|
labelField: 'paramName',
|
||||||
|
valueField: 'paramCode',
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
|
},
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
GetTenantParamDataSelectList({ code: e }).then(res => {
|
||||||
|
itemNameOption.value = res.data
|
||||||
|
})
|
||||||
|
if (obj) {
|
||||||
|
formModel.paramName = obj.label
|
||||||
|
formModel.paramId = obj.id
|
||||||
|
formModel.paramType = obj.type
|
||||||
|
} else {
|
||||||
|
formModel.paramName = ''
|
||||||
|
formModel.paramId = ''
|
||||||
|
formModel.paramType = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'itemCode',
|
||||||
|
label: '客户参数名称',
|
||||||
|
required: true,
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 12 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
option: itemNameOption.value,
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemCode',
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
|
},
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (obj) {
|
||||||
|
formModel.itemName = obj.label
|
||||||
|
} else {
|
||||||
|
formModel.itemName = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'itemName',
|
||||||
|
component: 'Input',
|
||||||
|
defaultValue: '',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'customerId',
|
||||||
|
component: 'Input',
|
||||||
|
defaultValue: '',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'paramId',
|
||||||
|
component: 'Input',
|
||||||
|
defaultValue: '',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'paramName',
|
||||||
|
component: 'Input',
|
||||||
|
defaultValue: '',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'paramType',
|
||||||
|
component: 'Input',
|
||||||
|
defaultValue: '',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'customerName',
|
||||||
|
label: '客户名称',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 12 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'orderNo',
|
||||||
|
label: '排序',
|
||||||
|
required: true,
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 12 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'note',
|
||||||
|
label: '备注',
|
||||||
|
component: 'InputTextArea',
|
||||||
|
colProps: { span: 24 }
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<BasicModal
|
||||||
|
v-bind="$attrs"
|
||||||
|
:use-wrapper="true"
|
||||||
|
:title="getTitle"
|
||||||
|
:form-schema="formSchema"
|
||||||
|
width="50%"
|
||||||
|
@register="registerModal"
|
||||||
|
@ok="handleSave"
|
||||||
|
>
|
||||||
|
<!-- 包装表单 -->
|
||||||
|
<BasicForm @register="registerForm" />
|
||||||
|
<!--右下角按钮-->
|
||||||
|
<template #footer>
|
||||||
|
<a-button
|
||||||
|
pre-icon="ant-design:close-outlined"
|
||||||
|
type="warning"
|
||||||
|
:loading="loading"
|
||||||
|
ghost
|
||||||
|
style="margin-right: 0.8rem"
|
||||||
|
@click="closeModal"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
type="success"
|
||||||
|
:loading="loading"
|
||||||
|
pre-icon="ant-design:check-outlined"
|
||||||
|
style="margin-right: 0.8rem"
|
||||||
|
@click="handleSave(false)"
|
||||||
|
>
|
||||||
|
仅保存
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
pre-icon="ant-design:check-circle-outlined"
|
||||||
|
type="primary"
|
||||||
|
:loading="loading"
|
||||||
|
@click="handleSave(true)"
|
||||||
|
>
|
||||||
|
保存并关闭
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</BasicModal>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, unref } from 'vue'
|
||||||
|
// 弹窗组件
|
||||||
|
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||||
|
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||||
|
// 表单字段数据
|
||||||
|
import { formSchema } from '../columns'
|
||||||
|
// 相关接口
|
||||||
|
import { EditClientParam, GetClientParamInfo } from '../api'
|
||||||
|
// 提示消息混入
|
||||||
|
import { useMessage } from '/@/hooks/web/useMessage'
|
||||||
|
// 声明Emits
|
||||||
|
const emit = defineEmits(['success', 'register'])
|
||||||
|
const isUpdate = ref(true)
|
||||||
|
// 按钮loading
|
||||||
|
const loading = ref(false)
|
||||||
|
const rowId = ref('')
|
||||||
|
const { createMessage } = useMessage()
|
||||||
|
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] =
|
||||||
|
useForm({
|
||||||
|
labelWidth: 100,
|
||||||
|
schemas: formSchema,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const [registerModal, { setModalProps, closeModal, updateFormField }] = useModalInner(async (data) => {
|
||||||
|
resetFields()
|
||||||
|
setModalProps({ confirmLoading: false, loading: true })
|
||||||
|
isUpdate.value = !!data?.isUpdate
|
||||||
|
if (unref(isUpdate)) {
|
||||||
|
setModalProps({ confirmLoading: true });
|
||||||
|
updateFormField(updateSchema)
|
||||||
|
rowId.value = data.record.id
|
||||||
|
const res: API.DataResult = await GetClientParamInfo({ id: unref(rowId) })
|
||||||
|
if (res.succeeded) {
|
||||||
|
setFieldsValue({
|
||||||
|
...res.data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setFieldsValue({
|
||||||
|
customerId: data.clientId,
|
||||||
|
customerName: data.customerName
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setModalProps({ loading: false })
|
||||||
|
})
|
||||||
|
|
||||||
|
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
|
||||||
|
|
||||||
|
async function handleSave(exit) {
|
||||||
|
try {
|
||||||
|
const values = await validate()
|
||||||
|
loading.value = true
|
||||||
|
setModalProps({ confirmLoading: true, loading: true })
|
||||||
|
const res: API.DataResult = await EditClientParam(values)
|
||||||
|
loading.value = false
|
||||||
|
if (res.succeeded) {
|
||||||
|
createMessage.success(res.message)
|
||||||
|
emit('success')
|
||||||
|
} else {
|
||||||
|
createMessage.error(res.message)
|
||||||
|
}
|
||||||
|
exit && closeModal()
|
||||||
|
} finally {
|
||||||
|
setModalProps({ confirmLoading: false, loading: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<BasicTable
|
||||||
|
@register="registerTable"
|
||||||
|
>
|
||||||
|
<template #toolbar>
|
||||||
|
<a-button type="link" @click="handleCreate">
|
||||||
|
<span class="iconfont icon-tianjia"></span>
|
||||||
|
新建
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
icon: 'clarity:note-edit-line',
|
||||||
|
tooltip: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'ant-design:delete-outlined',
|
||||||
|
tooltip: '删除',
|
||||||
|
color: 'error',
|
||||||
|
popConfirm: {
|
||||||
|
title: '是否要删除此条数据？',
|
||||||
|
okText: '是',
|
||||||
|
cancelText: '否',
|
||||||
|
confirm: handleDelete.bind(null, record)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
<Modal @register="registerModal" @success="handleSuccess" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, defineProps } from 'vue'
|
||||||
|
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
||||||
|
import { formatParams } from '/@/hooks/web/common'
|
||||||
|
import { GetClientParamList, BatchDelClientParam } from './api'
|
||||||
|
import { useModal } from '/@/components/Modal'
|
||||||
|
import Modal from './components/Modal.vue'
|
||||||
|
import { columns, searchFormSchema } from './columns'
|
||||||
|
import { useMessage } from '/@/hooks/web/useMessage'
|
||||||
|
const { notification } = useMessage()
|
||||||
|
const [registerModal, { openModal }] = useModal()
|
||||||
|
const props = defineProps({
|
||||||
|
// 客户id
|
||||||
|
clientId: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
// 客户名称
|
||||||
|
customerName: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const [registerTable, { reload, getForm, getPaginationRef }] = useTable({
|
||||||
|
api: async (p) => {
|
||||||
|
const res: API.DataResult = await GetClientParamList(p)
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve({ data: [...res.data], total: res.count })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeFetch: (p) => {
|
||||||
|
return formatParams(p)
|
||||||
|
},
|
||||||
|
columns,
|
||||||
|
isTreeTable: false,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
useSearchForm: false,
|
||||||
|
showTableSetting: false,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
actionColumn: {
|
||||||
|
width: 80,
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
},
|
||||||
|
id: 10
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleCreate() {
|
||||||
|
openModal(true, {
|
||||||
|
customerName: props.customerName,
|
||||||
|
clientId: props.clientId,
|
||||||
|
isUpdate: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
openModal(true, {
|
||||||
|
record,
|
||||||
|
isUpdate: true,
|
||||||
|
customerName: props.customerName,
|
||||||
|
clientId: props.clientId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 删除
|
||||||
|
async function handleDelete(record: Recordable) {
|
||||||
|
const res: API.DataResult = await BatchDelClientParam({
|
||||||
|
id: '',
|
||||||
|
ids: [record.id],
|
||||||
|
})
|
||||||
|
if (res.succeeded) {
|
||||||
|
notification.success({ message: res.message, duration: 3 })
|
||||||
|
reload()
|
||||||
|
} else {
|
||||||
|
notification.error({ message: res.message, duration: 3 })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
//初始化字典选项
|
||||||
|
})
|
||||||
|
function handleSuccess() {
|
||||||
|
reload()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
Loading…
Reference in New Issue