lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

全局添加表单设置组件

Browse Source
szh-new
lijingjia 7 months ago
parent 6122e54f1d bdef40d587
commit 37cce66dc0
12 changed files with 489 additions and 116 deletions
Show Stats Download Patch File Download Diff File

10
.env.development
Unescape Escape View File

@ -1,11 +1,9 @@
###
# @Author: 张同海 14166000+zhangtonghai@user.noreply.gitee.com
# @Date: 2024-04-17 10:30:29
# @LastEditors: Please set LastEditors
# @LastEditTime: 2024-05-10 10:57:02
# @FilePath: \ds-wms-client-web\.env.development
# @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
# @Description:
# @Author: lijj
# @Date: 2024-05-10 17:05:02
###
# Whether to open mock
VITE_USE_MOCK = true

106
src/components/ConfigForm/index.vue
Unescape Escape View File

@ -0,0 +1,106 @@
<!--
* @Description: 将表单添加到表单设置组件中
* @Author: lijj
* @Date: 2024-05-07 15:19:07
-->
<template>
<div class="config-form" @click="addFormToSet">
<slot>
<Tooltip
v-if="formSchema && formSchema.length"
:title="t('component.modal.edit')"
placement="bottom"
>
<DiffOutlined />
</Tooltip>
</slot>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { FormSchema } from '/@/components/Table'
// 表单编辑接口
import { editCodeGoodsType } from '/@/views/baseinfo/formset/api'
// 引入表格权限信息（包含id和name）
import { permissionsInfo } from '/@/hooks/web/usePermission'
// 引入提升信息
import { useMessage } from '/@/hooks/web/useMessage'
// 默认图标
import { DiffOutlined } from '@ant-design/icons-vue'
import { useI18n } from '/@/hooks/web/useI18n'
const { createMessage } = useMessage()
export default defineComponent({
name: 'ConfigForm',
components: { DiffOutlined },
props: {
// 单个表单字段集合
formSchema: {
type: Array,
default: () => {
return []
}
},
// 表单id
id: {
type: String,
default: ''
},
// 表单名称
name: {
type: String,
default: ''
}
},
setup(props) {
const { t } = useI18n()
// 添加表单到表单设置
const addFormToSet = () => {
const columns = props.formSchema.map((item: FormSchema) => {
const res = {
defaultValue: item.defaultValue || '',
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component
}
// 定义默认显示字段
if (item.show !== false) {
res['show'] = true
}
// 判断若是下拉框、raido组返回option
if (/^Select|RadioButtonGroup$/.test(item.component)) {
res['options'] = item?.componentProps?.options
}
return res
})
const Apidata = {
id: props.id,
permissionId: permissionsInfo().permissionId,
templateName: props.name,
permissionName: permissionsInfo().permissionName,
content: JSON.stringify({
columns: columns
})
}
editCodeGoodsType(Apidata).then(res => {
if (res.succeeded) {
createMessage.success('添加成功！')
}
}).catch(() => {
createMessage.error('添加失败！')
})
}
return {
t,
addFormToSet
}
}
})
</script>
<style lang="scss">
.config-form {
cursor: pointer;
}
</style>

7
src/components/registerGlobComp.ts
Unescape Escape View File

@ -2,6 +2,7 @@ import type { App } from 'vue'
import { Icon } from './Icon'
import { Button } from './Button'
import VXETable from 'vxe-table'
import ConfigForm from './ConfigForm/index.vue'
import 'vxe-table/lib/style.css'
import {
// Need
@ -50,10 +51,12 @@ import {
Popconfirm,
Skeleton,
Cascader,
Rate,
Rate
} from 'ant-design-vue'
const compList = [AntButton.Group, Icon]
const compList = [AntButton.Group, Icon, ConfigForm]
console.log(compList)
export function registerGlobComp(app: App) {
// app.use(Input).use(Button).use(Layout)
compList.forEach((comp) => {

5
src/views/baseinfo/issuetype/TenantAuditStepModal.vue
Unescape Escape View File

@ -8,6 +8,11 @@
@register="registerModal"
@ok="handleSave"
>
<ConfigForm
:form-schema="formSchema"
id="1"
name="基础表单"
></ConfigForm>
<BasicForm @register="registerForm" />
<!--右下角按钮-->
<template #footer>

182
src/views/fee/template/components/feeField.vue
Unescape Escape View File

@ -360,97 +360,97 @@
return null;
}
onMounted(() => {
document.getElementById('tba').addEventListener('click', (event) => {
console.log(event.target)
})
document.onkeydown = (event) => {
console.log(event)
const curel = document.activeElement
const td = findDirectParentTd(curel)
const tdIndex = td.cellIndex
const tr = td?.parentNode
const trIndex = tr.sectionRowIndex
const tbody = tr.parentNode
console.log(tbody)
if (event.keyCode == 39) {
event.preventDefault()
if (tdIndex + 1 == curel.parentElement.children.length) {
return
} else {
const input = td.parentElement.children[tdIndex + 1].querySelector('.ant-input')
const select = td.parentElement.children[tdIndex + 1].querySelector('.ant-select-selection-search-input')
const swit = td.parentElement.children[tdIndex + 1].querySelector('.ant-switch')
const number = td.parentElement.children[tdIndex + 1].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (swit) {
swit.focus()
}
if (number) {
number.focus()
}
}
// console.log(td.parentElement.children[tdIndex + 1].querySelector('.ant-select-selection-search-input').focus())
// curel.parentElement.children[curcellIndex + 1].focus();
} else if (event.keyCode == 37) {
event.preventDefault()
if (tdIndex == 0) {
return
} else {
const input = td.parentElement.children[tdIndex - 1].querySelector('.ant-input')
const select = td.parentElement.children[tdIndex - 1].querySelector('.ant-select-selection-search-input')
const number = td.parentElement.children[tdIndex - 1].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (number) {
number.focus()
}
// td.parentElement.children[tdIndex - 1].querySelector('.ant-input').focus()
}
} else if (event.keyCode == 40) {
if (trIndex + 1 == tbody.length) {
return
} else {
const input = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-input')
const select = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-select-selection-search-input')
const number = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (number) {
number.focus()
}
}
} else if (event.keyCode == 38) {
if (trIndex == 1) {
return
} else {
const input = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-input')
const select = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-select-selection-search-input')
const number = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (number) {
number.focus()
}
}
}
}
// document.addEventListener('click', (event) => {
// console.log(event.target)
// })
// document.onkeydown = (event) => {
// console.log(event)
// const curel = document.activeElement
// const td = findDirectParentTd(curel)
// const tdIndex = td.cellIndex
// const tr = td?.parentNode
// const trIndex = tr.sectionRowIndex
// const tbody = tr.parentNode
// console.log(tbody)
// if (event.keyCode == 39) {
// event.preventDefault()
// if (tdIndex + 1 == curel.parentElement.children.length) {
// return
// } else {
// const input = td.parentElement.children[tdIndex + 1].querySelector('.ant-input')
// const select = td.parentElement.children[tdIndex + 1].querySelector('.ant-select-selection-search-input')
// const swit = td.parentElement.children[tdIndex + 1].querySelector('.ant-switch')
// const number = td.parentElement.children[tdIndex + 1].querySelector('.ant-input-number-input')
// if (input) {
// input.focus()
// }
// if (select) {
// select.focus()
// }
// if (swit) {
// swit.focus()
// }
// if (number) {
// number.focus()
// }
// }
// // console.log(td.parentElement.children[tdIndex + 1].querySelector('.ant-select-selection-search-input').focus())
// // curel.parentElement.children[curcellIndex + 1].focus();
// } else if (event.keyCode == 37) {
// event.preventDefault()
// if (tdIndex == 0) {
// return
// } else {
// const input = td.parentElement.children[tdIndex - 1].querySelector('.ant-input')
// const select = td.parentElement.children[tdIndex - 1].querySelector('.ant-select-selection-search-input')
// const number = td.parentElement.children[tdIndex - 1].querySelector('.ant-input-number-input')
// if (input) {
// input.focus()
// }
// if (select) {
// select.focus()
// }
// if (number) {
// number.focus()
// }
// // td.parentElement.children[tdIndex - 1].querySelector('.ant-input').focus()
// }
// } else if (event.keyCode == 40) {
// if (trIndex + 1 == tbody.length) {
// return
// } else {
// const input = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-input')
// const select = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-select-selection-search-input')
// const number = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-input-number-input')
// if (input) {
// input.focus()
// }
// if (select) {
// select.focus()
// }
// if (number) {
// number.focus()
// }
// }
// } else if (event.keyCode == 38) {
// if (trIndex == 1) {
// return
// } else {
// const input = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-input')
// const select = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-select-selection-search-input')
// const number = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-input-number-input')
// if (input) {
// input.focus()
// }
// if (select) {
// select.focus()
// }
// if (number) {
// number.focus()
// }
// }
// }
// }
// 初始化方法
init()
})

221
src/views/operation/seaexport/detail/index.vue
Unescape Escape View File

@ -29,6 +29,8 @@
@handleSaveCtnList="handleSaveCtnList"
@handleSetCtnList="handleSetCtnList"
@frompre="frompre"
@SetDefault="setDefault"
@GetDefault="getDefault"
>
</operationArea>
<ul class="parent-tabs-box">
@ -237,6 +239,19 @@
import pending from './modules/pending.vue'
import rightContent from './modules/rightContent.vue'
import sedOrder from './modules/sedOrder.vue'
import { permissionsInfo } from '/@/hooks/web/usePermission'
import { editCodeGoodsType, getFormSetInfoByModule } from '/@/views/baseinfo/formset/api'
import {
basicInfoFormSchema,
mailingInfoFormSchemaL,
mailingInfoFormSchemaR,
cargoInfoFormSchema1,
cargoInfoFormSchema2,
cargoInfoFormSchema3,
cargoInfoFormSchema4,
ediMoreFormSchema,
mastetMoreFormSchema,
} from '/@/views/operation/seaexport/columns'
const initDetail = {
cntrNo: '',
// ----------
@ -809,6 +824,211 @@
lastPages[key] = $data
appStore.setneedSavePages(lastPages)
}
//存默认值
function setDefault() {
let _data: any = []
basicInfoFormSchema.forEach((item) => {
Object.keys(RefbasicInfo.value.getFieldsValue()).forEach((e) => {
if (
item.field == e &&
e !== 'id' &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
// _data.push({ ...item, defaultValue: RefbasicInfo.value.getFieldsValue()[e] })
}
})
})
console.log(_data)
mailingInfoFormSchemaL.forEach((item) => {
Object.keys(RefmailingInfo.value.getFieldsValueL()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
mailingInfoFormSchemaR.forEach((item) => {
Object.keys(RefmailingInfo.value.getFieldsValueR()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
cargoInfoFormSchema1.forEach((item) => {
Object.keys(RefcargoInfo.value.getFieldsValue()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
cargoInfoFormSchema2.forEach((item) => {
Object.keys(RefcargoInfo.value.getFieldsValue()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
cargoInfoFormSchema3.forEach((item) => {
Object.keys(RefcargoInfo.value.getFieldsValue()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
cargoInfoFormSchema4.forEach((item) => {
Object.keys(RefcargoInfo.value.getFieldsValue()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
ediMoreFormSchema.forEach((item) => {
Object.keys(RefediMore.value.getFieldsValue()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
mastetMoreFormSchema.forEach((item) => {
Object.keys(RefmastetMore.value.getFieldsValue()).forEach((e) => {
if (
item.field == e &&
RefbasicInfo.value.getFieldsValue()[e] !== '' &&
RefbasicInfo.value.getFieldsValue()[e] !== null
) {
_data.push({
defaultValue: RefbasicInfo.value.getFieldsValue()[e],
field: item.field || '',
label: item.label || '',
required: item.required || false,
colProps: item.colProps || { span: 24 },
component: item.component,
})
}
})
})
console.log(_data)
const Apidata: any = {
// id: 0,
permissionId: permissionsInfo().permissionId,
templateName: permissionsInfo().permissionName,
permissionName: permissionsInfo().permissionName,
content: JSON.stringify({
columns: _data,
}),
}
editCodeGoodsType(Apidata).then((res) => {
if (res.succeeded) {
notification.success({ message: '添加成功！', duration: 3 })
}
})
}
function updateSchema(data) {
console.log(data, 'updateSchema')
RefbasicInfo.value.updateSchema(data)
// RefmailingInfo.value.updateSchemaL(data)
// RefmailingInfo.value.updateSchemaR(data)
// RefcargoInfo.value.updateSchema(data)
// RefediMore.value.updateSchema(data)
// RefmastetMore.value.updateSchema(data)
}
function getDefault() {
console.log('getDefault')
getFormSetInfoByModule({ permissionId: permissionsInfo().permissionId }).then((res) => {
if (res?.data?.content) {
const content = JSON.parse(res.data.content)
updateSchema(content.columns)
}
})
}
// ============================================
function getRouterHis() {
inChildLoading.value = true
@ -1976,6 +2196,7 @@
</script>
<script lang="ts">
import { defineComponent } from 'vue'
import { object } from 'vue-types'
export default defineComponent({
beforeRouteEnter(to, from, next) {
next((vm) => {

15
src/views/operation/seaexport/detail/modules/basicInfo.vue
Unescape Escape View File

@ -564,12 +564,14 @@
agentFilter: { type: Array, default: [] },
inSave: { type: Boolean, default: false },
})
const [registerForm, { getFieldsValue, validateFields, resetFields, setFieldsValue, validate }] =
useForm({
labelWidth: 80,
schemas: basicInfoFormSchema,
showActionButtonGroup: false,
})
const [
registerForm,
{ getFieldsValue, updateSchema, validateFields, resetFields, setFieldsValue, validate },
] = useForm({
labelWidth: 80,
schemas: basicInfoFormSchema,
showActionButtonGroup: false,
})
const emit = defineEmits(['handleSaveService', 'editLineName', 'changeDetail'])
let { ctx: that, proxy }: any = getCurrentInstance()
watch(
@ -1129,6 +1131,7 @@
defineExpose({
// RefbasicFrom,
getFieldsValue,
updateSchema,
validateFields,
})
</script>

11
src/views/operation/seaexport/detail/modules/cargoInfo.vue
Unescape Escape View File

@ -636,6 +636,7 @@
registerForm1,
{
getFieldsValue: getFieldsValue1,
updateSchema: updateSchema1,
validateFields: validateFields1,
setFieldsValue: setFieldsValue1,
},
@ -648,6 +649,7 @@
registerForm2,
{
getFieldsValue: getFieldsValue2,
updateSchema: updateSchema2,
validateFields: validateFields2,
setFieldsValue: setFieldsValue2,
},
@ -660,6 +662,7 @@
registerForm3,
{
getFieldsValue: getFieldsValue3,
updateSchema: updateSchema3,
validateFields: validateFields3,
setFieldsValue: setFieldsValue3,
validate: validate3,
@ -834,6 +837,7 @@
registerForm4,
{
getFieldsValue: getFieldsValue4,
updateSchema: updateSchema4,
validateFields: validateFields4,
setFieldsValue: setFieldsValue4,
},
@ -1225,10 +1229,17 @@
validateFields3()
validateFields4()
}
function updateSchema(data) {
updateSchema1(data)
updateSchema2(data)
updateSchema3(data)
updateSchema4(data)
}
defineExpose({
// RefcargoFrom,
validateFields,
getFieldsValue,
updateSchema,
})
</script>
<style lang="less" scoped>

15
src/views/operation/seaexport/detail/modules/ediMore.vue
Unescape Escape View File

@ -890,12 +890,14 @@
default: '',
},
})
const [registerForm, { getFieldsValue, validateFields, resetFields, setFieldsValue, validate }] =
useForm({
labelWidth: 200,
schemas: ediMoreFormSchema,
showActionButtonGroup: false,
})
const [
registerForm,
{ getFieldsValue, updateSchema, validateFields, resetFields, setFieldsValue, validate },
] = useForm({
labelWidth: 200,
schemas: ediMoreFormSchema,
showActionButtonGroup: false,
})
const PropsDetails = ref(props.details)
const emit = defineEmits(['changeDetail'])
const RefediFrom = ref()
@ -960,6 +962,7 @@
defineExpose({
// RefediFrom,
getFieldsValue,
updateSchema,
validateFields,
})
</script>

4
src/views/operation/seaexport/detail/modules/mailingInfo.vue
Unescape Escape View File

@ -1162,6 +1162,7 @@
{
getFieldsValue: getFieldsValueL,
validateFields: validateFieldsL,
updateSchema: updateSchemaL,
resetFieldsL,
setFieldsValue: setFieldsValueL,
validateL,
@ -1176,6 +1177,7 @@
{
getFieldsValue: getFieldsValueR,
validateFields: validateFieldsR,
updateSchema: updateSchemaR,
resetFieldsR,
setFieldsValue: setFieldsValueR,
validateR,
@ -1757,6 +1759,8 @@
getFieldsValueR,
validateFieldsL,
validateFieldsR,
updateSchemaL,
updateSchemaR,
})
</script>
<style lang="less" scoped>

12
src/views/operation/seaexport/detail/modules/mastetMore.vue
Unescape Escape View File

@ -24,11 +24,12 @@
ishd: { type: Boolean, default: false },
inSave: { type: Boolean, default: false },
})
const [registerForm, { getFieldsValue, resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 80,
schemas: mastetMoreFormSchema,
showActionButtonGroup: false,
})
const [registerForm, { getFieldsValue, updateSchema, resetFields, setFieldsValue, validate }] =
useForm({
labelWidth: 80,
schemas: mastetMoreFormSchema,
showActionButtonGroup: false,
})
const emit = defineEmits(['pkgsEnCapital', 'editLineName', 'spliceMore', 'changeDetail'])
let { ctx: that, proxy }: any = getCurrentInstance()
const RefmastetFrom = ref()
@ -576,6 +577,7 @@
defineExpose({
// RefmailingFrom,
getFieldsValue,
updateSchema,
})
</script>
<style lang="less" scoped>

17
src/views/operation/seaexport/detail/modules/operationArea.vue
Unescape Escape View File

@ -128,6 +128,14 @@
<span class="iconfont icon-xia" :style="{ fontSize: '17px' }"></span>下一票
</button>
</div>
<div class="btn-list single-view-1" :class="{ inLoad: props.inChildLoading || !changeFlag }">
<button @click="SetDefault">
<span class="iconfont icon-icon_baocun"></span> 存默认
</button>
<button @click="GetDefault">
<span class="iconfont icon-icon_baocun"></span> 设默认
</button>
</div>
<div v-if="props.scrollTop > 100" class="btn-list single-view-2">
<div>提单号:{{ props.details.mblno }}</div>
<div>委托单位:{{ props.details.customername }}</div>
@ -740,6 +748,7 @@
import { useMessage } from '/@/hooks/web/useMessage'
const { notification } = useMessage()
let { ctx: that, proxy }: any = getCurrentInstance()
const emit = defineEmits([
'refresh',
'copy',
@ -749,6 +758,7 @@
'removeOrder',
'addSedList',
'changePage',
'GetData',
])
const props = defineProps({
details: {
@ -853,6 +863,13 @@
emit('save')
}
}
// 存默认值
function SetDefault() {
emit('SetDefault')
}
function GetDefault(){
emit('GetDefault')
}
// ============================================
function refreshPage() {
emit('refresh')

Write Preview
Loading…
Cancel
Save