html代码
定义prop="shifandiqu"
<el-col :span="24">
<el-form-item label="平台示范地区" style="margin-bottom: 6px;" prop="shifandiqu">
<el-select v-model="form.provinceid" filterable placeholder="请选择省/直辖市" :disabled="isDisabled" style="width: 28%; margin-right: 8px;" @change="provincechange(form.provinceid)">
<el-option v-for="( item ) in provinceArr" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
</el-select>
<el-select v-model="form.cityAreaId" filterable placeholder="请选择市" :disabled="isDisabled" style="width: 28%; margin-right: 8px;" @change="countychange(form.cityAreaId)">
<el-option v-for="( item ) in countyArr" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
</el-select>
<el-select v-model="form.areaId" filterable placeholder="请选择区县" :disabled="isDisabled" style="width: 28%; margin-right: 8px;">
<el-option v-for="( item ) in regionArr" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
</el-select>
<span v-show="!isDisabled" class="addKeywords" @click="addAreasFun">添加地区</span>
<!-- <div v-show="!isDisabled">示范地区为城市群，请<span class="clickhere" @click="centerDialogVisible = true">点击这里</span></div> -->
</el-form-item>
</el-col>js代码
rules中定义shifandiqu的验证规则
shifandiqu: [{ required: true, validator: shifandiqu, trigger: 'blur' }],
自定义规则：
const shifandiqu = (rule, value, callback) => {
if (this.areasArr.length < 1 && this.selectedCityComplete.length < 1) {
callback(new Error('请选择示范地区/城市群'))
} else {
callback()
}
}
完整js代码
<script>
export default {
data() {
const kaifadanwei = (rule, value, callback) => {
if (this.danweiNameArr.length < 1) {
callback(new Error('请选择系统开发单位'))
} else {
callback()
}
}
const fujian = (rule, value, callback) => {
if (this.form.attachments.length < 1) {
callback(new Error('请上传附件'))
} else {
callback()
}
}
const shifandiqu = (rule, value, callback) => {
if (this.areasArr.length < 1 && this.selectedCityComplete.length < 1) {
callback(new Error('请选择示范地区/城市群'))
} else {
callback()
}
}
return {
tempRoute: {},
tablabel: '应用示范系统添加',
activeName: 'first',
form: {
name: '',
systemType: 'Bs',
systemUrl: '',
demoVideo: '', // 演示视频
systemIntroduction: '',
isAdaptation1: '',
pageResolution: '',
provinceid: '',
cityAreaId: '',
areaId: '',
browserType: '',
hardwareEnvironment: '',
contact: '',
contactCellphone: '',
attachments: [] // 上传文件列表
},
companyList: [], // 企业名称数组
systemTypeFlag: false, // 不同系统类型
isAdaptation1Flag: false, // 是否页面自适应
rules: {
name: [{ required: true, message: '平台名称不能为空', trigger: 'blur' }],
systemUrl: [{ required: true, message: '平台网址不能为空', trigger: 'blur' }],
// demoVideo: [{ required: false, message: '请上传演示视频', trigger: 'blur' }],
systemIntroduction: [{ required: true, message: '平台简介不能为空', trigger: 'blur' }],
// kaifadanwei: [{ required: true, message: '请选择系统开发单位', trigger: 'blur' }],
kaifadanwei: [{ required: true, validator: kaifadanwei, trigger: 'blur' }],
browserType: [{ required: true, message: '请选择最佳适配浏览器类型', trigger: 'blur' }],
pageResolution0: [{ required: true, message: '请选择是否屏幕自适应', trigger: 'blur' }],
pageResolution: [{ required: false, message: '请选择屏显比例', trigger: 'blur' }],
hardwareEnvironment: [{ required: true, message: '请填写运行硬件环境', trigger: 'blur' }],
// fujian: [{ required: true, message: '请上传附件', trigger: 'blur' }],
fujian: [{ required: true, validator: fujian, trigger: 'blur' }],
// shifandiqu: [{ required: true, message: '请选择示范地区/城市群', trigger: 'blur' }],
shifandiqu: [{ required: true, validator: shifandiqu, trigger: 'blur' }],
contact: [{ required: true, message: '请填写系统联系人', trigger: 'blur' }],
contactCellphone: [{ required: true, message: '请填写联系人电话', trigger: 'blur' }]
},
isDisabled: false,
jianchengArr: [], // 平台简称数组
danweiArr: [], // 系统开发单位数组_id
danweiNameArr: [], // 系统开发单位数组_name
totalNum: 1, // 添加论文作者计数
count: 1,
pageResolutionArr: [], // 分辨率数组
browserTypesArr: [], // 适配浏览器类型数组
provinceArr: [], // 省
countyArr: [], // 市
regionArr: [], // 区
areasArr: [], // 所选地区数组
fileUrl: '', // 当前修改文件url
centerDialogVisible: false, // 示范城市群弹窗
cityGroupArr: [], // 城市群数组数据
selectedCityGroup: [], // 已选城市群
selectedCityComplete: [], // 选择城市群传值数组
checkAll: false, // 全选
isIndeterminate: false, // 用以表示 checkbox 的不确定状态，一般用于实现全选的效果
AreaScopes: [] // 城市群上传用数组
}
},
mounted() {
// this.getAreasFun('', 1)
this.getProvinceFun()
this.getCityGroupFun()
this.getResolutionTypesFun()
this.getBrowserTypesFun()
this.getCompanyNameFun()
this.tempRoute = Object.assign({}, this.$route)
if (this.$route.query.type === 'view') {
this.isDisabled = true
this.$route.meta.title = '查看应用示范系统信息'
this.tablabel = '查看应用示范系统信息'
this.getInfo()
} else if (this.$route.query.type === 'edit') {
this.isDisabled = false
this.$route.meta.title = '编辑应用示范系统信息'
this.tablabel = '编辑应用示范系统信息'
this.getInfo()
} else if (this.$route.query.type === 'add') {
this.isDisabled = false
this.$route.meta.title = '应用示范系统添加'
this.tablabel = '应用示范系统添加'
}
document.title = this.$route.meta.title
this.setTagsViewTitle()
},
methods: {
changebrowserType() {
if (this.form.browserType && this.form.browserType !== '') {
this.$refs.form.clearValidate('browserType')
}
},
changepageResolution() {
if (this.form.pageResolution && this.form.pageResolution !== '') {
this.$refs.form.clearValidate('pageResolution')
}
},
// 修改tags
setTagsViewTitle() {
const title = this.$route.meta.title
const route = Object.assign({}, this.tempRoute, { title: `${title}` })
this.$store.dispatch('tagsView/updateVisitedView', route)
},
// 系统类型切换
systemTypeFun() {
const str = this.form.systemType
this.systemTypeFlag = str !== 'Bs'
if (str === 'Cs') {
this.rules.hardwareEnvironment[0].required = false
this.rules.browserType[0].required = false
this.rules.systemUrl[0].required = false
this.rules.pageResolution0[0].required = false
this.rules.demoVideo[0].required = true
} else {
this.rules.hardwareEnvironment[0].required = true
this.rules.browserType[0].required = true
this.rules.systemUrl[0].required = true
this.rules.pageResolution0[0].required = true
this.rules.demoVideo[0].required = false
}
},
// 页面切换是否自适应
isAdaptation1Fun() {
this.rules.pageResolution0[0].required = false
this.$refs.form.clearValidate('pageResolution0')
const str = this.form.isAdaptation1
this.isAdaptation1Flag = str !== '是'
if (str === '是') {
this.rules.pageResolution[0].required = false
} else {
this.rules.pageResolution[0].required = true;
}
},
// 获取企业名称下拉框
getCompanyNameFun() {
const params = {}
params.projectId = localStorage.getItem('projectId') === 'null' ? '' : localStorage.getItem('projectId')
// params.ExcludeCompanyId = this.ExcludeCompanyId
// params.CompanyName = this.ExcludeCompanyName // 模糊搜索
getProjectCompanies(params).then((res) => {
this.companyList = res.data
})
},
// 平台页面分辨率
getResolutionTypesFun() {
getResolutionTypes().then((res) => {
this.pageResolutionArr = res.data
})
},
// 获取最佳适配浏览器类型
getBrowserTypesFun() {
getBrowserTypes().then((res) => {
this.browserTypesArr = res.data
})
},
// 获取示范地区为省
getProvinceFun() {
getDemoSystemsProvince().then((res) => {
this.provinceArr = res.data
})
},
// 获取示范地区为城市群
getCityGroupFun() {
getCityGroup().then((res) => {
this.cityGroupArr = res.data
})
},
// 获取地区
getAreasFun(val, type) {
getAreas({ parentId: val }).then((res) => {
if (type === 1) {
this.provinceArr = [{ areaId: '', areaName: '无' }].concat(res.data)
} else if (type === 2) {
this.countyArr = [{ areaId: '', areaName: '无' }].concat(res.data)
} else if (type === 3) {
this.regionArr = [{ areaId: '', areaName: '无' }].concat(res.data)
}
})
},
// 选择省/直辖市
provincechange(val) {
this.form.cityAreaId = ''
this.form.areaId = ''
this.regionArr = []
this.getAreasFun(val, 2)
},
// 选择city
countychange(val) {
this.form.areaId = ''
this.getAreasFun(val, 3)
},
// 回显信息
getInfo() {
const id = this.$route.query.id
const that = this
getDemoSystemsDetails(id).then((res) => {
const tarobj = res.data
that.form.name = tarobj.name
that.form.systemIntroduction = tarobj.systemIntroduction
that.form.pageResolution = tarobj.pageResolution
// 简称
that.jianchengArr = tarobj.applicationDemoSystemAliases
that.form.systemType = tarobj.systemType
// 系统类型——平台网址、演示地址
if (tarobj.systemType === 'Bs') {
that.systemTypeFlag = false
that.form.systemUrl = tarobj.systemUrl
} else {
that.systemTypeFlag = true
that.form.demoVideo = tarobj.systemUrl
}
// 示范城市群
tarobj.areaScopes.forEach((item, index) => {
const obj = {}
obj.areaId = item.provinceAreaId
obj.areaName = item.fullAreaName
that.selectedCityComplete.push(obj)
that.selectedCityGroup.push(item.provinceAreaId)
const checkedCount = that.selectedCityGroup.length
that.isIndeterminate = checkedCount > 0 && checkedCount < this.cityGroupArr.length
})
// 适配浏览器类型
that.form.browserType = tarobj.browserType
// 系统开发单位
tarobj.companyIds.forEach((item, index) => {
that.danweiArr.push(item.companyId)
const obj = {}
obj.id = item.companyId
obj.name = item.companyName
that.danweiNameArr.push(obj)
})
// 运行硬件环境
that.form.hardwareEnvironment = tarobj.hardwareEnvironment
// 系统联系人及电话
that.form.contact = tarobj.contact
that.form.contactCellphone = tarobj.contactCellphone
// 是否页面自适应
if (tarobj.isAdaptation === true) {
that.form.isAdaptation1 = '是'
that.isAdaptation1Flag = false
} else if (tarobj.isAdaptation === false) {
that.form.isAdaptation1 = '否'
that.isAdaptation1Flag = true
}
that.rules.pageResolution0[0].required = false
// 平台示范地区
const arr = tarobj.demoSystemAreas
arr.forEach(function(item, index) {
const key = item.areaId ? item.areaId : item.cityAreaId ? item.cityAreaId : item.provinceAreaId
item.key = key
})
that.areasArr = arr // 应用示范地区
// 附件
that.form.attachments = tarobj.attachments
},
err => {
if (err.response.status === 403) {
this.$message.error(err.response.data.error.message)
} else {
const errmsg = err.response.data.error.validationErrors
let errtext = ''
errmsg.forEach((item, index) => {
errtext += item.message
})
this.$message.error(errtext)
}
})
},
// 添加地区
addAreasFun() {
if (this.form.provinceid === '') {
this.$message({
message: '请选择地区',
type: 'warning'
})
} else {
const obj = {}
obj.provinceAreaId = this.form.provinceid ? this.form.provinceid : null
obj.cityAreaId = this.form.cityAreaId ? this.form.cityAreaId : null
obj.areaId = this.form.areaId ? this.form.areaId : null
obj.key = this.form.areaId ? this.form.areaId : this.form.cityAreaId ? this.form.cityAreaId : this.form.provinceid
const thisLabel1 = this.form.provinceid ? this.provinceArr.find(item => item.areaId === this.form.provinceid).areaName : ''
const thisLabel2 = this.form.cityAreaId ? this.countyArr.find(item => item.areaId === this.form.cityAreaId).areaName : ''
const thisLabel3 = this.form.areaId ? this.regionArr.find(item => item.areaId === this.form.areaId).areaName : ''
obj.fullAreaName = thisLabel1 + '' + thisLabel2 + '' + thisLabel3
obj.cityName=thisLabel2 + thisLabel3;
if(this.areasArr.find(s=>s.fullAreaName==obj.fullAreaName)!==undefined||
this.areasArr.find(s=>s.fullAreaName==obj.cityName)!==undefined)
{
this.$message({message: '请勿重复添加：'+obj.fullAreaName+'',type: 'warning'});
}else{
this.areasArr.push(obj)
if (this.areasArr.length > 0) {
this.$refs.form.clearValidate('shifandiqu')
}
}
this.form.provinceid = ''
this.form.cityAreaId = ''
this.form.areaId = ''
this.countyArr = []
this.regionArr = []
console.log(this.areasArr);
}
},
// 删除地区
delAreaFun(val) {
const arr = this.areasArr
arr.forEach(function(item, index) {
if (val === item.key) {
arr.splice(index, 1)
}
})
},
// 删除城市群
delcityGroupFun(val) {
const that = this
this.selectedCityGroup = []
const arr = this.selectedCityComplete
arr.forEach(function(item, index) {
if (val === item.areaId) {
arr.splice(index, 1)
}
})
arr.forEach((item, index) => {
that.selectedCityGroup.push(item.areaId)
})
const checkedCount = that.selectedCityGroup.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityGroupArr.length
},
// 表单提交
checkForm() {
// if (this.form.systemUrl === 'Cs') {
// this.rules.systemUrl[0].required = false
// } else if (this.form.systemUrl === 'Bs') {
// this.rules.demoVideo[0].required = false
// }
const proId = localStorage.getItem('projectId')
this.$refs['form'].validate((valid) => {
if (!valid) return
const tarObj = { ...this.form }
// 项目id
tarObj.projectId = proId
// 是否页面自适应
if (tarObj.isAdaptation1 === '是') {
tarObj.isAdaptation = true
tarObj.pageResolution="";
} else if (tarObj.isAdaptation1 === '否') {
tarObj.isAdaptation = false
}
// 平台示范地区
tarObj.demoSystemAreas = this.areasArr
// 附件上传
tarObj.attachments = this.form.attachments
// 简称录入
tarObj.applicationDemoSystemAliases = this.jianchengArr
// 系统类型
if (tarObj.systemType === 'Bs') {
tarObj.systemUrl = this.form.systemUrl
} else {
tarObj.systemUrl = this.form.demoVideo
}
// 城市群
const AreaScopesarr = []
this.selectedCityComplete.forEach((item, index) => {
const obj = {}
obj.provinceAreaId = item.areaId
obj.fullAreaName = item.areaName
AreaScopesarr.push(obj)
})
tarObj.AreaScopes = AreaScopesarr
// 系统开发单位
tarObj.companyIds = this.danweiArr
// 判断是添加还是修改
if (this.$route.query.type === 'add') {
createDemoSystems(tarObj).then((res) => {
if (res.status === 204) {
// this.$router.go(-1)
this.$router.push({
name: 'resultRegister',
query: {
tabval: 2
}
})
}
},
err => {
if (err.response.status === 403) {
this.$message.error(err.response.data.error.message)
} else {
const errmsg = err.response.data.error.validationErrors
let errtext = ''
errmsg.forEach((item, index) => {
errtext += item.message
})
this.$message.error(errtext)
}
})
} else if (this.$route.query.type === 'edit') {
tarObj.id = this.$route.query.id
updateDemoSystems(tarObj).then((res) => {
// this.$router.go(-1)
this.$router.push({
name: 'resultRegister',
query: {
tabval: 2
}
})
},
err => {
if (err.response.status === 403) {
this.$message.error(err.response.data.error.message)
} else {
const errmsg = err.response.data.error.validationErrors
let errtext = ''
errmsg.forEach((item, index) => {
errtext += item.message
})
this.$message.error(errtext)
}
})
}
})
},
// 返回
returnFun() {
// this.$router.go(-1)
this.$router.push({
name: 'resultRegister',
query: {
tabval: 2
}
})
},
// 文件上传
uploadFile(val) {
const FormDatas = new FormData()
// console.log('file------', val)
// FormDatas.append('fileName', 'ceshi1')
FormDatas.append('achievementType', 'DemoSystem')
FormDatas.append('file', val.file)
uploadFlie(FormDatas).then((res) => {
const tarobj = {}
const str = val.file.name
tarobj.name = str.substring(0, str.length - 4)
tarobj.url = res.data
console.log('type---', val.file.type)
if (val.file.type === 'application/pdf') {
tarobj.type = 'Pdf'
} else {
tarobj.type = 'Video'
}
const arr = this.form.attachments
arr.push(tarobj)
if (this.form.attachments.length > 0) {
this.$refs.form.clearValidate('fujian')
}
// console.log('this.form.attachments---', this.form.attachments)
},
err => {
if (err.response.status === 403) {
this.$message.error(err.response.data.error.message)
} else {
const errmsg = err.response.data.error.validationErrors
let errtext = ''
errmsg.forEach((item, index) => {
errtext += item.message
})
this.$message.error(errtext)
}
})
},
// 视频上传
uploadMp4FileFun(val) {
const FormDatas = new FormData()
FormDatas.append('achievementType', 'Video')
FormDatas.append('file', val.file)
uploadMp4Flie(FormDatas).then((res) => {
this.form.demoVideo = res.data
},
err => {
if (err.response.status === 403) {
this.$message.error(err.response.data.error.message)
} else {
const errmsg = err.response.data.error.validationErrors
let errtext = ''
errmsg.forEach((item, index) => {
errtext += item.message
})
this.$message.error(errtext)
}
})
},
// 视频预览
viewVedioFun() {
const videourl = this.form.demoVideo
if (videourl === '') {
this.$message({
message: '请上传视频',
type: 'warning'
})
} else {
window.open(videourl)
}
},
// 修改文件名
editName(val) {
this.fileUrl = val
},
// 保存文件名
saveName() {
this.fileUrl = ''
},
// 预览pdf
previewFun(val) {
getAttachmentsUrl(val).then((res) => {
window.open(res.data)
})
},
// 文件删除
handleRemove(val) {
deleteUploadFlie(val).then((res) => {
if (res.status === 204) {
const arr = this.form.attachments
arr.forEach(function(item, index) {
if (val === item.url) {
arr.splice(index, 1)
}
})
}
},
err => {
const errmsg = err.response.data.error.validationErrors
let errtext = ''
errmsg.forEach((item, index) => {
errtext += item.message
})
this.$message.error(errtext)
})
},
handleSuccess(val) {
},
// 示范城市群弹窗——全选方法
handleCheckAllChange(val) {
// val === true/false
// this.checkedCities = val ? cityOptions : []
// this.selectedCityGroup = val ? this.cityGroupArr : []
const newarr = []
const newarr2 = []
this.cityGroupArr.forEach((item, index) => {
// newarr.push(item.areaName)
newarr.push(item.areaId)
newarr2.push(item)
})
this.selectedCityGroup = val ? newarr : []
this.selectedCityComplete = val ? newarr2 : []
this.isIndeterminate = false
},
// 示范城市群弹窗——单选方法
handleCheckedCitiesChange(value) {
this.selectedCityComplete = []
this.cityGroupArr.forEach((item, index) => {
if (value.indexOf(item.areaId) !== -1) {
this.selectedCityComplete.push(item)
}
})
const checkedCount = value.length
this.checkAll = checkedCount === this.cityGroupArr.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityGroupArr.length
},
// 城市群弹窗——确定
confirmFun() {
this.centerDialogVisible = false
if (this.selectedCityComplete.length > 0) {
this.$refs.form.clearValidate('shifandiqu')
}
// console.log('selectedCityGroup===', this.selectedCityGroup)
// console.log('cityGroupArr===', this.cityGroupArr)
},
cityDialogClose() {
// this.centerDialogVisible = false
this.selectedCityGroup = []
this.selectedCityComplete = []
this.checkAll = false
this.handleCheckAllChange(false)
},
// 添加平台简称
addKeywordsFun() {
if (this.form.jiancheng === '' || this.form.jiancheng === undefined) return
if (this.jianchengArr.indexOf(this.form.jiancheng) !== -1) {
this.$message.error('该简称已存在，请勿重复添加！')
} else {
this.jianchengArr.push(this.form.jiancheng)
this.form.jiancheng = ''
}
},
// 删除平台简称
delkeywordFun(val) {
const arr = this.jianchengArr
arr.forEach(function(item, index) {
if (val === item) {
arr.splice(index, 1)
}
})
},
// 添加系统开发单位
addKeywordsDanweiFun() {
if (this.form.danwei === '' || this.form.danwei === undefined) return
if (this.danweiArr.indexOf(this.form.danwei) !== -1) {
this.$message.error('该单位已添加，请勿重复添加！')
this.form.danwei = ''
return
} else {
this.danweiArr.push(this.form.danwei)
// this.form.danwei = ''
}
// this.danweiArr.push(this.form.danwei)
const obj = {}
obj.name = this.companyList.find(item => item.id === this.form.danwei).companyName
obj.id = this.form.danwei
this.danweiNameArr.push(obj)
if (this.danweiNameArr.length > 0) {
this.$refs.form.clearValidate('kaifadanwei')
}
this.form.danwei = ''
},
// 删除系统开发单位
delDanweikeywordFun(val) {
const arr = this.danweiArr
arr.forEach(function(item, index) {
if (val === item) {
arr.splice(index, 1)
}
})
const arr2 = this.danweiNameArr
arr2.forEach(function(item, index) {
if (val === item.id) {
arr2.splice(index, 1)
}
})
}
}
}
</script>
2335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
