前台必填项设置

This commit is contained in:
gaoyuanwei 2022-07-26 10:07:39 +08:00
parent b7fd109210
commit 73ed69f315
8 changed files with 812 additions and 355 deletions

View File

@ -37,6 +37,8 @@
'部门联系人',
'部门联系人电话',
]"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '算法优势'"
@ -46,6 +48,8 @@
:configure="sfys"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '应用场景'"
@ -55,6 +59,8 @@
:configure="yycj"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '部署与使用'"
@ -68,6 +74,8 @@
:configure="bs"
@submit="submit()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<!-- <algorithm-essential-information
v-if="showView === '基本信息' && refData.name"
@ -356,6 +364,25 @@
type: '组件服务',
deptId: '',
})
const required = ref([
'归属部门',
'部门联系人',
'部门联系人电话',
'应用领域',
'共享条件',
'算法名称',
'算法描述',
'图层名称',
'图层描述',
'组件名称',
'组件描述',
'组件地址',
'服务地址',
'服务接口',
'接口请求方式',
'算法类别',
])
const notFilled = ref([])
getUser().then((res) => {
dataFrom.value.deptId = res.data.data.deptId
})
@ -374,6 +401,45 @@
})
}
const next = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (!dataFrom.value.name) {
notFilled.value.push('算法名称')
}
if (!dataFrom.value.description) {
notFilled.value.push('算法描述')
}
if (!dataFrom.value.shareCondition) {
notFilled.value.push('共享条件')
}
if (!dataFrom.value.deptContacts) {
notFilled.value.push('部门联系人')
}
if (!dataFrom.value.deptPhone) {
notFilled.value.push('部门联系人电话')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '算法类别'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '算法类别')[0]
.attrValue
) {
notFilled.value.push('算法类别')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '应用领域'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
.attrValue
) {
notFilled.value.push('应用领域')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
let i = -1
navList.value.forEach((val, index) => {
if (val.key === showView.value && index < navList.value.length - 1) {
@ -388,6 +454,7 @@
console.log('表单数据=============>', dataFrom.value, refData.value)
}
}
}
//
const preview = () => {
dataFrom.value.infoList = dataFrom.value.infoList.filter(
@ -401,6 +468,30 @@
window.open(newpage.href, '_blank')
}
const submit = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (
dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0] &&
dataFrom.value.infoList.filter((val) => val.attrType === '使用方式')[0]
.attrValue == '调用接口'
) {
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '服务接口'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '服务接口')[0]
.attrValue
) {
notFilled.value.push('服务接口')
}
if (!dataFrom.value.apiMethodType) {
notFilled.value.push('接口请求方式')
}
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
console.log('提交数据=============>', dataFrom.value)
if (submitFlag.value) {
submitFlag.value = false
@ -437,6 +528,7 @@
})
}
}
}
const init = () => {
getCategoryTree().then((res) => {
// console.clear()

View File

@ -36,6 +36,8 @@
'部门联系人',
'部门联系人电话',
]"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '功能介绍'"
@ -45,6 +47,8 @@
:configure="gnjs"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '关联组件'"
@ -54,6 +58,8 @@
:configure="glzj"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
ref="refPutOnTheShelf"
@ -64,6 +70,8 @@
:configure="bs"
@submit="submit()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<!-- <application-essential-information
v-if="showView === '基本信息' && refData.name"
@ -260,6 +268,18 @@
],
},
])
const required = ref([
'归属部门',
'部门联系人',
'部门联系人电话',
'应用领域',
'共享条件',
'应用名称',
'应用描述',
'应用状态',
'应用类型',
])
const notFilled = ref([])
getUser().then((res) => {
dataFrom.value.deptId = res.data.data.deptId
})
@ -275,6 +295,60 @@
})
}
const next = () => {
notFilled.value = []
console.log(dataFrom.value, notFilled.value, 'dataFrom.value.name')
if (!dataFrom.value.name) {
notFilled.value.push('应用名称')
}
if (!dataFrom.value.description) {
notFilled.value.push('应用描述')
}
if (!dataFrom.value.deptContacts) {
notFilled.value.push('部门联系人')
}
if (!dataFrom.value.deptPhone) {
notFilled.value.push('部门联系人电话')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '应用领域'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
.attrValue
) {
notFilled.value.push('应用领域')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '应用状态'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '应用状态')[0]
.attrValue
) {
notFilled.value.push('应用状态')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '应用类型'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '应用类型')[0]
.attrValue
) {
notFilled.value.push('应用类型')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '共享条件'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '共享条件')[0]
.attrValue
) {
notFilled.value.push('共享条件')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
let i = -1
navList.value.forEach((val, index) => {
if (val.key === showView.value && index < navList.value.length - 1) {
@ -289,6 +363,7 @@
console.log('表单数据=============>', dataFrom.value, refData.value)
}
}
}
const submit = () => {
console.log('提交数据=============>', dataFrom.value)
if (submitFlag.value) {

View File

@ -37,6 +37,8 @@
'部门联系人',
'部门联系人电话',
]"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '功能介绍'"
@ -46,6 +48,8 @@
:configure="gnjs"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '应用场景'"
@ -55,6 +59,8 @@
:configure="yycj"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '部署与使用'"
@ -67,6 +73,8 @@
:configure="bs"
@submit="submit()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
</div>
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
@ -327,6 +335,25 @@
type: '组件服务',
deptId: '',
})
const required = ref([
'归属部门',
'部门联系人',
'部门联系人电话',
'应用领域',
'共享条件',
'算法名称',
'算法描述',
'图层名称',
'图层描述',
'组件名称',
'组件描述',
'组件地址',
'服务地址',
'服务接口',
'接口请求方式',
'算法类别',
])
const notFilled = ref([])
const close = () => {
window.close()
@ -346,6 +373,36 @@
})
}
const next = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (!dataFrom.value.name) {
notFilled.value.push('组件名称')
}
if (!dataFrom.value.description) {
notFilled.value.push('组件描述')
}
if (!dataFrom.value.shareCondition) {
notFilled.value.push('共享条件')
}
if (!dataFrom.value.deptContacts) {
notFilled.value.push('部门联系人')
}
if (!dataFrom.value.deptPhone) {
notFilled.value.push('部门联系人电话')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '应用领域'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
.attrValue
) {
notFilled.value.push('应用领域')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
let i = -1
navList.value.forEach((val, index) => {
if (val.key === showView.value && index < navList.value.length - 1) {
@ -360,6 +417,7 @@
console.log('表单数据=============>', dataFrom.value, refData.value)
}
}
}
//
const preview = () => {
dataFrom.value.infoList = dataFrom.value.infoList.filter(
@ -373,6 +431,21 @@
window.open(newpage.href, '_blank')
}
const submit = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '组件地址'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '组件地址')[0]
.attrValue
) {
notFilled.value.push('组件地址')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
console.log('提交数据=============>', dataFrom.value)
if (submitFlag.value) {
submitFlag.value = false
@ -409,6 +482,7 @@
})
}
}
}
//
const refPutOnTheShelf = ref(null)
const changeGnjs = (type) => {

View File

@ -37,6 +37,8 @@
'部门联系人',
'部门联系人电话',
]"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '功能介绍'"
@ -46,6 +48,8 @@
:configure="gnjs"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '应用场景'"
@ -55,6 +59,8 @@
:configure="yycj"
@next="next()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '部署与使用'"
@ -66,6 +72,8 @@
:configure="bs"
@submit="submit()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
</div>
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
@ -326,6 +334,25 @@
type: '组件服务',
deptId: '',
})
const required = ref([
'归属部门',
'部门联系人',
'部门联系人电话',
'应用领域',
'共享条件',
'算法名称',
'算法描述',
'图层名称',
'图层描述',
'组件名称',
'组件描述',
'组件地址',
'服务地址',
'服务接口',
'接口请求方式',
'算法类别',
])
const notFilled = ref([])
const close = () => {
window.close()
@ -345,6 +372,36 @@
})
}
const next = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (!dataFrom.value.name) {
notFilled.value.push('组件名称')
}
if (!dataFrom.value.description) {
notFilled.value.push('组件描述')
}
if (!dataFrom.value.shareCondition) {
notFilled.value.push('共享条件')
}
if (!dataFrom.value.deptContacts) {
notFilled.value.push('部门联系人')
}
if (!dataFrom.value.deptPhone) {
notFilled.value.push('部门联系人电话')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '应用领域'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
.attrValue
) {
notFilled.value.push('应用领域')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
let i = -1
navList.value.forEach((val, index) => {
if (val.key === showView.value && index < navList.value.length - 1) {
@ -359,6 +416,7 @@
console.log('表单数据=============>', dataFrom.value, refData.value)
}
}
}
//
const preview = () => {
dataFrom.value.infoList = dataFrom.value.infoList.filter(
@ -385,6 +443,21 @@
refPutOnTheShelf.value.add('常见问题', true, type)
}
const submit = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '组件地址'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '组件地址')[0]
.attrValue
) {
notFilled.value.push('组件地址')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
console.log('提交数据=============>', dataFrom.value)
if (submitFlag.value) {
submitFlag.value = false
@ -421,6 +494,7 @@
})
}
}
}
const init = () => {
getCategoryTree().then((res) => {
// console.clear()

View File

@ -37,12 +37,16 @@
'部门联系人',
'部门联系人电话',
]"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '图层信息'"
ref="refPutOnTheShelf"
:refData="refData"
:dataFrom="dataFrom"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
<put-on-the-shelf
v-else-if="showView === '应用场景'"
@ -50,6 +54,8 @@
:refData="refData"
:dataFrom="dataFrom"
:configure="yycj"
:required="required"
:notFilled="notFilled"
@next="next()"
@back="back()"
></put-on-the-shelf>
@ -63,6 +69,8 @@
:configure="bs"
@submit="submit()"
@back="back()"
:required="required"
:notFilled="notFilled"
></put-on-the-shelf>
</div>
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
@ -224,6 +232,26 @@
type: '组件服务',
deptId: '',
})
const required = ref([
'归属部门',
'部门联系人',
'部门联系人电话',
'应用领域',
'共享条件',
'算法名称',
'算法描述',
'图层名称',
'图层描述',
'组件名称',
'组件描述',
'组件地址',
'服务地址',
'服务接口',
'接口请求方式',
'算法类别',
])
const notFilled = ref([])
getUser().then((res) => {
dataFrom.value.deptId = res.data.data.deptId
})
@ -243,6 +271,36 @@
window.close()
}
const next = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (!dataFrom.value.name) {
notFilled.value.push('图层名称')
}
if (!dataFrom.value.description) {
notFilled.value.push('图层描述')
}
if (!dataFrom.value.shareCondition) {
notFilled.value.push('共享条件')
}
if (!dataFrom.value.deptContacts) {
notFilled.value.push('部门联系人')
}
if (!dataFrom.value.deptPhone) {
notFilled.value.push('部门联系人电话')
}
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '应用领域'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '应用领域')[0]
.attrValue
) {
notFilled.value.push('应用领域')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
let i = -1
navList.value.forEach((val, index) => {
if (val.key === showView.value && index < navList.value.length - 1) {
@ -257,6 +315,7 @@
console.log('表单数据=============>', dataFrom.value, refData.value)
}
}
}
//
const preview = () => {
dataFrom.value.infoList = dataFrom.value.infoList.filter(
@ -280,6 +339,21 @@
refPutOnTheShelf.value.add('常见问题', true, type)
}
const submit = () => {
notFilled.value = []
console.log(dataFrom.value, 'dataFrom.value.name')
if (
!dataFrom.value.infoList.filter(
(val) => val.attrType === '服务地址'
)[0] ||
!dataFrom.value.infoList.filter((val) => val.attrType === '服务地址')[0]
.attrValue
) {
notFilled.value.push('服务地址')
}
if (notFilled.value.length > 0) {
message.warning('请填写必填字段')
console.log(notFilled.value)
} else {
console.log('提交数据=============>', dataFrom.value)
if (submitFlag.value) {
submitFlag.value = false
@ -316,6 +390,7 @@
})
}
}
}
const init = () => {
getCategoryTree().then((res) => {
// console.clear()

View File

@ -204,7 +204,7 @@
<template v-else>
<div class="bottom">
<div
class="form"
class="form item"
v-for="item in title.children"
:key="item.id"
v-show="
@ -220,11 +220,18 @@
)
"
>
<span>{{ item.name }}</span>
<div class="box">
<div>
<b class="required" v-if="required.indexOf(item.name) > -1">
*
</b>
{{ item.name }}
</div>
<a-input
v-if="item.type == 'input' && item.name.indexOf('名称') == -1"
v-model:value="item.note1"
:placeholder="'请输入' + item.name"
@change="changeIiem(name, data.note1)"
/>
<a-input
v-else-if="
@ -233,6 +240,7 @@
:maxLength="50"
v-model:value="item.note1"
:placeholder="'请输入' + item.name + '不超过50个字符'"
@change="changeIiem(name, data.note1)"
/>
<a-radio-group
v-else-if="item.type == 'radio'"
@ -362,6 +370,7 @@
style="width: 2.4rem"
v-model:value="item.note1"
:placeholder="'请选择' + item.name"
@change="changeIiem(name, data.note1)"
>
<a-select-option
v-for="(itemSelect, indexSelect) in item.options"
@ -381,7 +390,7 @@
:filter-option="filterOption"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange2"
@change="changeIiem(name, data.note1)"
></a-select>
<div
v-else-if="item.type == 'checkBox'"
@ -404,6 +413,29 @@
</div>
</div>
</div>
<div
class="requiredTips"
v-show="
notFilled.indexOf(item.name) > -1 &&
(item.type == 'input' || item.type == 'textArea') &&
changeField.indexOf(item.name) == -1
"
>
请填写{{ item.name }}
</div>
<div
class="requiredTips"
v-show="
notFilled.indexOf(item.name) > -1 &&
(item.type == 'select' ||
item.type == 'checkBox' ||
item.type == 'radio') &&
changeField.indexOf(item.name) == -1
"
>
请选择{{ item.name }}
</div>
</div>
<!-- 来源应用 -->
<div class="AssociatedApplication">
<a-modal
@ -466,7 +498,6 @@
import upload from '@/views/components/upload'
import { message } from 'ant-design-vue'
import { getUserInfo, getDeptAll } from '@/api/user'
import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo.vue'
import {
getCategoryTreePage,
queryApplicationRelByResourceId,
@ -477,6 +508,7 @@
const router = useRouter()
const abilityToType = router.currentRoute.value.query.abilityToType
const componentTypeValue = router.currentRoute.value.query.componentTypeValue
const changeField = ref([])
const props = defineProps({
//
refData: { type: Object, default: null },
@ -495,6 +527,8 @@
externalField: { type: Array, default: null },
//
configure: { type: Array, default: null },
required: { type: Array, default: null },
notFilled: { type: Array, default: null },
// [{
// name:'',
// list:[
@ -551,6 +585,15 @@
const radioChange = (e) => {
numType.value = e.target.value
}
const changeIiem = (name, value) => {
if (value && value !== '' && changeField.value.indexOf(name) == -1) {
changeField.value.push(name)
} else if (!value || value == '') {
if (changeField.value.indexOf(name) > -1) {
changeField.value.splice(changeField.value.indexOf(name), 1)
}
}
}
props.refData.children.map((item) => {
if (item.name == '基本信息') {
item.children.map((val) => {
@ -979,9 +1022,6 @@
}
})
})
const handleChange2 = (value) => {
console.log(`selected ${value}`)
}
const applicationsChange = (value) => {
data.value.list.map((item) => {
if (item.name === '来源应用') {
@ -1275,4 +1315,31 @@
cursor: pointer;
}
}
.item {
position: relative;
span:first-child {
width: unset;
}
.box {
display: flex;
align-items: center;
// margin: 15px 0;
& > div:nth-of-type(1) {
width: 105px;
display: flex;
align-items: center;
}
.required {
color: #f56c6c;
margin-right: 3px;
}
}
.requiredTips {
font-size: 14px;
color: #f56c6c;
position: absolute;
bottom: -20px;
left: 110px;
}
}
</style>

View File

@ -287,7 +287,7 @@
message.config({
top: '100px', //
})
message.error('暂未上传使用手册')
message.error('暂未开放使用手册')
}
}
function SDKClick() {
@ -300,7 +300,7 @@
message.config({
top: '100px', //
})
message.error('SDK安装包')
message.error('暂未上传SDK安装包')
}
}
</script>

View File

@ -204,7 +204,7 @@
message.config({
top: '100px', //
})
message.error('暂未上传接口文档')
message.error('暂未开放技术文档')
}
}
function technicalNew() {
@ -228,7 +228,7 @@
message.config({
top: '100px', //
})
message.error('暂未上传使用手册')
message.error('暂未开放新手指引')
}
}
</script>