Skip to content

Z
zhxf_vue
Commit 6d982ee7 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

页面调整

parent beaf5d45
Hide whitespace changes
Inline Side-by-side
Showing with 818 additions and 500 deletions
src/pages/sys/road/add-or-update.vue
View file @ 6d982ee7
<template lang="pug"> <template lang="pug">
el-dialog.myDialog( width='60%' :close-on-click-modal='false', :visible.sync='visible' append-to-body :modal-append-to-body='false') el-dialog.myDialog( width='60%' :close-on-click-modal='false', :visible.sync='visible' append-to-body :modal-append-to-body='false')
div(slot='title') div(slot='title')
span.title-bold {{!dataForm.id ? '新增' : '编辑'}} span.title-bold.title-left-color 楼栋编辑
el-form(:model='dataForm', :rules='dataRule', ref='dataForm', label-width='100px') el-main.box_main
el-row(:gutter='20') el-card()
el-col(:span='12') el-form(:model='dataForm', :rules='dataRule', ref='dataForm', label-width='100px')
el-form-item(label="所属线路:" prop="lineName") el-row(:gutter='20')
el-input(v-model='dataForm.lineName' disabled) el-col(:span='12')
el-row(:gutter='20') el-form-item(label="名称:" prop="stationName")
el-col(:span='12') el-input(v-model='dataForm.stationName' placeholder="请输入名称" clearable )
el-form-item(label="站点名称:" prop="stationName") el-col(:span='12')
el-input(disabled v-model='dataForm.stationName' placeholder="请输入站点名称" clearable ) el-form-item(label="编码:" prop="code")
el-col(:span='12') el-input(v-model='dataForm.code' placeholder="请输入编码" clearable)
el-form-item(label="车站编码:" prop="code") el-col(:span='12')
el-input(v-model='dataForm.code' placeholder="请输入车站编码" clearable ) el-form-item(label="简称:" prop="shortName")
el-row(:gutter='20') el-input(v-model='dataForm.shortName' placeholder="请输入简称" clearable )
el-col(:span='12') el-col(:span='12')
el-form-item(label="车站类型:" prop="type") el-form-item(label="排序:" prop="orderNum")
el-select(style='width:100%;' v-model='dataForm.type' placeholder="请选择车站类型" clearable) el-input(v-model.number='dataForm.orderNum' clearable )
el-option(v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id") el-col(:span='24')
el-col(:span='12') el-form-item(label="描述:" prop="remark")
el-form-item(label="站点简称:" prop="shortName") el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="" )
el-input(v-model='dataForm.shortName' placeholder="请输入站点简称" clearable ) el-row(style="padding-bottom:15px;" :span="24")
el-col(:span='24') el-col(:md='23' :sm="5")
el-form-item(label="站点描述:" prop="remark") div.title-bold(style='line-height: 40px;') 场景地图
el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="请输入站点描述") //- el-divider(style='margin-top:0')
el-row(style="padding-bottom:15px;" :span="24") <div class="fileDiv">
el-col(:md='23' :sm="5") <div class="fileList" v-for="(item,index) in fileList">
div(style='line-height: 40px;') 站点地图 <el-input size="mini" v-model='item.name' clearable></el-input>
el-divider(style='margin-top:0') <img :src="item.readPath" :onerror="logo" @click="changeImage(item)">
<div class="fileDiv"> <div class="imgButton">
<div class="fileList" v-for="(item,index) in fileList"> <el-button type="text" size="mini" :disabled="index == 0" icon="el-icon-back" @click='leftClick(index,item)'></el-button>
<el-input size="mini" v-model='item.name' clearable maxlength="20"></el-input> <el-button type="text" size="mini" icon="el-icon-delete" @click='removeClick(item,index)'></el-button>
<img :src="item.readPath" :onerror="logo" v-image-preview> <el-button type="text" size="mini" :disabled="index == fileList.length-1" icon="el-icon-right" @click='rightClick(index,item)'></el-button>
<div class="imgButton"> </div>
<el-button type="text" size="mini" :disabled="index == 0" icon="el-icon-back" @click='leftClick(index,item)'></el-button> </div>
<el-button type="text" size="mini" icon="el-icon-delete" @click='removeClick(item,index)'></el-button> <div class="shangchuan" @click="fileClick" v-if="fileList.length < 7">
<el-button type="text" size="mini" :disabled="index == fileList.length-1" icon="el-icon-right" @click='rightClick(index,item)'></el-button> <span class="el-icon-plus"></span>
</div> </div>
</div> <div>
<div class="shangchuan" @click="fileClick" v-if="fileList.length < 5"> el-alert(title="上传图片格式仅支持jpg,jpeg,png,单个照片大小不超过10M" effect='light' :closable="false" style="margin-top:10px;")
<span class="el-icon-plus"></span> </div>
</div> <input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/>
<input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/> </div>
</div> el-button(type='primary' size='medium' @click='dataFormSubmit()' v-if="isAuth('line:station:save')" v-prevent-re-click style="margin-top:10px;margin-left:900px;") 保存
span.dialog-footer(slot='footer')
el-button(type='primary' size='medium' @click='cancel') 取消
el-button(type='primary' size='medium' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template> </template>
<script> <script>
...@@ -56,39 +52,66 @@ import Vue from 'vue' ...@@ -56,39 +52,66 @@ import Vue from 'vue'
export default { export default {
computed: { computed: {
...mapState('d2admin/user', [ ...mapState('d2admin/user', ['info'])
'info'
])
}, },
data () { data() {
let validateNumber = (rule, value, callback) => {
if (value < 0) {
callback(new Error('只能输入正整数'))
} else if (value > 10000) {
callback(new Error('排序值超出范围'))
} else {
callback()
}
}
return { return {
clickFlag: false,
visible: false, visible: false,
clickFlag: false,
dataList: [], dataList: [],
dataListLoading: false, dataListLoading: false,
currentRow: {}, currentRow: {},
fileList: [],
urlPath: window.CONFIG.urlPath, urlPath: window.CONFIG.urlPath,
cImage: '',
fileList: [],
stationId: localStorage.getItem('stationId'),
imageUrl: '', imageUrl: '',
logo: 'this.src="' + require('../../../assets/images/videoImg.png') + '"', logo: 'this.src="' + require('../../../assets/images/videoImg.png') + '"',
typeList: [ typeList: [
{ id: '1', name: '正线站点' }, { id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' } { id: '2', name: '换乘站点' }
], ],
masterList: [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' }
],
dataForm: {}, dataForm: {},
dataRule: { dataRule: {
// stationName: [ stationName: [
// { required: true, message: '站点名称不能为空', trigger: 'blur' }, { required: true, message: '名称不能为空', trigger: 'blur' },
// { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' } { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
// ], ],
orderNum: [
{ required: true, message: '排序值不能为空' },
{ type: 'number', message: '排序值必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] }
],
shortName: [ shortName: [
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' } {
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur'
}
], ],
code: [ code: [
{ required: true, message: '车站编码不能为空', trigger: 'blur' }, { required: true, message: '编码不能为空', trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' } {
min: 1,
max: 30,
message: '长度在 1 到 30 个字符',
trigger: 'blur'
}
], ],
type: [{ required: true, message: '车站类型不能为空', trigger: 'blur' }],
remark: [ remark: [
{ {
min: 1, min: 1,
...@@ -100,45 +123,51 @@ export default { ...@@ -100,45 +123,51 @@ export default {
} }
} }
}, },
created() {
// this.initDataFrom(this.stationId)
// this.cImage = ''
},
methods: { methods: {
init (id) { init(id) {
this.visible = true this.visible = true
this.clickFlag = false this.cImage = ''
this.dataForm.id = id
this.initData()
if (this.dataForm.id) {
this.initDataFrom()
}
},
initDataFrom () {
this.$http({ this.$http({
url: this.$http.adornUrl(`/liStation/getId/${this.dataForm.id}`), url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get', method: 'get',
params: this.$http.adornParams() params: this.$http.adornParams()
}).then(data => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataForm = data.bean this.dataForm = data.bean
this.fileList = data.bean.mapList this.fileList = data.bean.mapList
this.fileList.forEach(element => { this.fileList.forEach((element) => {
element.readPath = this.urlPath + element.filePath element.readPath = this.urlPath + element.filePath
}) })
} }
}) })
}, },
initData () { initData() {
this.typeList = [ this.typeList = [
{ id: '1', name: '正线站点' }, { id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' } { id: '2', name: '换乘站点' }
] ]
this.masterList = [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' }
]
}, },
// 表单提交 // 表单提交
dataFormSubmit (id) { dataFormSubmit(id) {
this.$refs['dataForm'].validate(valid => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
let errorflag = false let errorflag = false
this.fileList.forEach(e => { this.fileList.forEach((e) => {
if (e.name && e.name.length > 10) {
this.$message.warning('地图名称长度在1到10个字符之间')
errorflag = true
return false
}
if (!e.name) { if (!e.name) {
this.$message.error('请填写地图名称！') this.$message.error('请填写区域名称！')
errorflag = true errorflag = true
return false return false
} }
...@@ -160,29 +189,40 @@ export default { ...@@ -160,29 +189,40 @@ export default {
method: 'post', method: 'post',
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: this.dataForm data: this.dataForm
}).then(data => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500
onClose: () => {
this.visible = false
this.$emit('refreshdatalist')
}
}) })
} else { } else {
this.clickFlag = false
this.$message.error(data.msg) this.$message.error(data.msg)
} }
this.clickFlag = false
}) })
} }
}) })
}, },
fileClick () { changeImage(item) {
document.getElementById('upload_file').click() this.cImage = item.id
// console.log('id:' + item.id)
if (this.cImage) {
document.getElementById('upload_file').click()
}
},
fileClick() {
this.cImage = ''
if (
this.cImage === '' ||
this.cImage === null ||
this.cImage === undefined
) {
document.getElementById('upload_file').click()
}
}, },
fileChange (el) { fileChange(el) {
// console.log('上传图片后的cImage', this.cImage)
this.$showLoading() this.$showLoading()
if (!el.target.files[0].size) return if (!el.target.files[0].size) return
let file = el.target.files[0] let file = el.target.files[0]
...@@ -190,63 +230,88 @@ export default { ...@@ -190,63 +230,88 @@ export default {
if (this.beforeAvatarUpload(file)) { if (this.beforeAvatarUpload(file)) {
let fd = new FormData() let fd = new FormData()
fd.append('type', 'stationMap') fd.append('type', 'stationMap')
// fd.append('stationId', this.dataForm.id) fd.append('id', this.cImage)
fd.append('stationId', this.dataForm.id)
fd.append('file', file) fd.append('file', file)
this.$http({ this.$http({
url: this.$http.adornUrl(`/liStationMap/uploadFile`), url: this.$http.adornUrl(`/liStationMap/uploadFile`),
method: 'post', method: 'post',
data: fd data: fd
}).then(data => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.currentRow = data.bean this.currentRow = data.bean
this.currentRow.readPath = this.urlPath + this.currentRow.filePath this.currentRow.readPath = this.urlPath + this.currentRow.filePath
this.fileList.push(this.currentRow) // console.log('上传图片后的currentRow', this.currentRow)
console.log('上传图片后的fileList', this.fileList) var num = 0
var flag = false
var updateRes = {}
this.fileList.forEach((res, index) => {
if (res.id === this.currentRow.id) {
num = index
updateRes = res
flag = true
return false
}
})
// console.log('上传图片后的updateRes', updateRes)
if (flag) {
updateRes.fileName = this.currentRow.fileName
updateRes.filePath = this.currentRow.filePath
updateRes.readPath = this.currentRow.readPath
updateRes.updateTime = this.currentRow.updateTime
updateRes.updateUserId = this.currentRow.updateUserId
Vue.set(this.fileList, num, updateRes)
} else {
this.fileList.push(this.currentRow)
}
// console.log('上传图片后的fileList', this.fileList)
this.$message.success('上传成功!') this.$message.success('上传成功!')
} else { } else {
this.$message.error('上传失败!') this.$message.error('上传失败!')
} }
}) })
} }
this.cImage = ''
el.target.value = '' el.target.value = ''
}, },
removeClick (item, index) { removeClick(item, index) {
var ids = [item.id] var ids = [item.id]
this.$confirm(`确认删除地图?`, '提示', { this.$confirm(`确认删除区域地图?`, '删除区域地图', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
closeOnClickModal: true closeOnClickModal: true
}).then(() => {
this.$http({
url: this.$http.adornUrl('/liStationMap/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.fileList.splice(index, 1)
}
})
} else {
this.$message.error(data.msg)
}
})
}).catch(() => {
}) })
.then(() => {
this.$http({
url: this.$http.adornUrl('/liStationMap/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.fileList.splice(index, 1)
}
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
}, },
leftClick (index, row) { leftClick(index, row) {
let front = JSON.parse(JSON.stringify(this.fileList[index - 1])) let front = JSON.parse(JSON.stringify(this.fileList[index - 1]))
Vue.set(this.fileList, index - 1, row) Vue.set(this.fileList, index - 1, row)
Vue.set(this.fileList, index, front) Vue.set(this.fileList, index, front)
// console.log(this.fileList) // console.log(this.fileList)
}, },
rightClick (index, row) { rightClick(index, row) {
let after = JSON.parse(JSON.stringify(this.fileList[index + 1])) let after = JSON.parse(JSON.stringify(this.fileList[index + 1]))
Vue.set(this.fileList, index + 1, row) Vue.set(this.fileList, index + 1, row)
...@@ -254,7 +319,7 @@ export default { ...@@ -254,7 +319,7 @@ export default {
// console.log(this.fileList) // console.log(this.fileList)
}, },
//文件上传前的验证 //文件上传前的验证
beforeAvatarUpload (file) { beforeAvatarUpload(file) {
const isJPG = const isJPG =
file.type === 'image/jpg' || file.type === 'image/jpg' ||
file.type === 'image/png' || file.type === 'image/png' ||
...@@ -268,33 +333,19 @@ export default { ...@@ -268,33 +333,19 @@ export default {
this.$message.error('上传图片大小不能超过10MB!') this.$message.error('上传图片大小不能超过10MB!')
} }
return isJPG && isLt2M return isJPG && isLt2M
},
//取消
cancel() {
this.$confirm('确认取消?', !this.dataForm.id ? '新增' : '编辑', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.visible = false
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消退出'
})
})
} }
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.fileDiv { .fileDiv {
height: 200px; height: 200px;
width: 100%;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
background-color: #f6f7fb;
display: table-cell;
vertical-align: middle;
width: 1%;
.fileList { .fileList {
height: 130px; height: 130px;
...@@ -304,6 +355,10 @@ export default { ...@@ -304,6 +355,10 @@ export default {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
/deep/ .el-input--mini .el-input__inner {
text-align: center !important;
}
.el-button { .el-button {
padding-left: 8px; padding-left: 8px;
font-size: 14px; font-size: 14px;
...@@ -333,22 +388,9 @@ export default { ...@@ -333,22 +388,9 @@ export default {
margin-left: 10px; margin-left: 10px;
border-radius: 5px; border-radius: 5px;
} }
}
.el-table__header { /deep/ .el-alert--info.is-light {
width: 100% !important; background-color: #f6f7fb;
}
.el-table__body {
width: 100% !important;
}
.el-divider {
margin-top: 0px;
}
.myDialog{
/deep/.el-dialog{
margin-top:4vh !important;
} }
} }
</style> </style>
src/pages/sys/road/index copy 2.vue 0 → 100644
View file @ 6d982ee7
<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
el-header( style="height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(195, 195, 195, 1);" )
span.title-bold.title-left-color 站点维护
el-main.box_main
el-card()
el-form(:model='dataForm', :rules='dataRule', ref='dataForm', label-width='100px')
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="所属线路:" prop="lineName")
el-input(v-model='dataForm.lineName' disabled)
el-col(:span='12')
el-form-item(label="站点排序:" prop="orderNum")
el-input(v-model.number='dataForm.orderNum' clearable disabled)
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="站点名称:" prop="stationName")
el-input(disabled v-model='dataForm.stationName' placeholder="请输入站点名称" clearable )
el-col(:span='12')
el-form-item(label="车站编码:" prop="code")
el-input(v-model='dataForm.code' placeholder="请输入车站编码" clearable disabled)
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="车站类型:" prop="type")
el-select(style='width:100%;' v-model='dataForm.type' placeholder="请选择车站类型" clearable disabled)
el-option(v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id")
el-col(:span='12')
el-form-item(label="站点简称:" prop="shortName")
el-input(v-model='dataForm.shortName' placeholder="请输入站点简称" clearable disabled)
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="主站/从站:" prop="isMaster")
el-select(style='width:100%;' v-model='dataForm.isMaster' placeholder="请选择主站/从站" disabled)
el-option(v-for="(item,index) in masterList" :key="index" :label="item.name" :value="item.id")
el-col(:span='24')
el-form-item(label="站点描述:" prop="remark")
el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="" disabled)
el-row(style="padding-bottom:15px;" :span="24")
el-col(:md='23' :sm="5")
div.title-bold(style='line-height: 40px;') 区域地图
//- el-divider(style='margin-top:0')
<div class="fileDiv">
<div class="fileList" v-for="(item,index) in fileList">
<el-input size="mini" v-model='item.name' clearable></el-input>
<img :src="item.readPath" :onerror="logo" @click="changeImage(item)">
<div class="imgButton">
<el-button type="text" size="mini" :disabled="index == 0" icon="el-icon-back" @click='leftClick(index,item)'></el-button>
<el-button type="text" size="mini" icon="el-icon-delete" @click='removeClick(item,index)'></el-button>
<el-button type="text" size="mini" :disabled="index == fileList.length-1" icon="el-icon-right" @click='rightClick(index,item)'></el-button>
</div>
</div>
<div class="shangchuan" @click="fileClick" v-if="fileList.length < 7">
<span class="el-icon-plus"></span>
</div>
<div>
el-alert(title="上传图片格式仅支持jpg,jpeg,png,单个照片大小不超过10M" effect='light' :closable="false" style="margin-top:10px;")
</div>
<input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/>
</div>
el-button(type='primary' size='medium' @click='dataFormSubmit()' v-if="isAuth('line:station:save')" v-prevent-re-click style="margin-top:10px;margin-left:900px;") 保存
</template>
<script>
import { mapState } from 'vuex'
import Vue from 'vue'
export default {
computed: {
...mapState('d2admin/user', ['info']),
},
data() {
let validateNumber = (rule, value, callback) => {
if (value < 0) {
callback(new Error('只能输入正整数'))
} else if (value > 10000) {
callback(new Error('排序值超出范围'))
} else {
callback()
}
}
return {
clickFlag: false,
dataList: [],
dataListLoading: false,
currentRow: {},
urlPath: window.CONFIG.urlPath,
cImage: '',
fileList: [],
stationId: localStorage.getItem('stationId'),
imageUrl: '',
logo: 'this.src="' + require('../../../assets/images/videoImg.png') + '"',
typeList: [
{ id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' },
],
masterList: [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' },
],
dataForm: {},
dataRule: {
// stationName: [
// { required: true, message: '站点名称不能为空', trigger: 'blur' },
// { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
// ],
orderNum: [
{ required: true, message: '排序值不能为空' },
{ type: 'number', message: '排序值必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] },
],
shortName: [
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur',
},
],
code: [
{ required: true, message: '车站编码不能为空', trigger: 'blur' },
{
min: 1,
max: 30,
message: '长度在 1 到 30 个字符',
trigger: 'blur',
},
],
type: [
{ required: true, message: '车站类型不能为空', trigger: 'blur' },
],
remark: [
{
min: 1,
max: 300,
message: '长度在 1 到 300 个字符',
trigger: 'blur',
},
],
},
}
},
created() {
this.initDataFrom(this.stationId)
this.cImage = ''
},
methods: {
initDataFrom(id) {
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
params: this.$http.adornParams(),
}).then((data) => {
if (data && data.code === 0) {
this.dataForm = data.bean
this.fileList = data.bean.mapList
this.fileList.forEach((element) => {
element.readPath = this.urlPath + element.filePath
})
}
})
},
initData() {
this.typeList = [
{ id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' },
]
this.masterList = [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' },
]
},
// 表单提交
dataFormSubmit(id) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
let errorflag = false
this.fileList.forEach((e) => {
if (e.name && e.name.length > 10) {
this.$message.warning('地图名称长度在1到10个字符之间')
errorflag = true
return false
}
if (!e.name) {
this.$message.error('请填写区域名称！')
errorflag = true
return false
}
})
if (errorflag) {
return
}
this.clickFlag = true
for (var i in this.fileList) {
this.fileList[i].orderNum = Number(i) + 1
}
this.dataForm.mapList = this.fileList
this.$http({
url: this.$http.adornUrl(
`/liStation/${!this.dataForm.id ? 'save' : 'update'}`
),
method: 'post',
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: this.dataForm,
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
})
} else {
this.$message.error(data.msg)
}
this.clickFlag = false
})
}
})
},
changeImage(item) {
this.cImage = item.id
// console.log('id:' + item.id)
if (this.cImage) {
document.getElementById('upload_file').click()
}
},
fileClick() {
this.cImage = ''
if (
this.cImage === '' ||
this.cImage === null ||
this.cImage === undefined
) {
document.getElementById('upload_file').click()
}
},
fileChange(el) {
// console.log('上传图片后的cImage', this.cImage)
this.$showLoading()
if (!el.target.files[0].size) return
let file = el.target.files[0]
if (this.beforeAvatarUpload(file)) {
let fd = new FormData()
fd.append('type', 'stationMap')
fd.append('id', this.cImage)
fd.append('stationId', this.dataForm.id)
fd.append('file', file)
this.$http({
url: this.$http.adornUrl(`/liStationMap/uploadFile`),
method: 'post',
data: fd,
}).then((data) => {
if (data && data.code === 0) {
this.currentRow = data.bean
this.currentRow.readPath = this.urlPath + this.currentRow.filePath
// console.log('上传图片后的currentRow', this.currentRow)
var num = 0
var flag = false
var updateRes = {}
this.fileList.forEach((res, index) => {
if (res.id === this.currentRow.id) {
num = index
updateRes = res
flag = true
return false
}
})
// console.log('上传图片后的updateRes', updateRes)
if (flag) {
updateRes.fileName = this.currentRow.fileName
updateRes.filePath = this.currentRow.filePath
updateRes.readPath = this.currentRow.readPath
updateRes.updateTime = this.currentRow.updateTime
updateRes.updateUserId = this.currentRow.updateUserId
Vue.set(this.fileList, num, updateRes)
} else {
this.fileList.push(this.currentRow)
}
// console.log('上传图片后的fileList', this.fileList)
this.$message.success('上传成功!')
} else {
this.$message.error('上传失败!')
}
})
}
this.cImage = ''
el.target.value = ''
},
removeClick(item, index) {
var ids = [item.id]
this.$confirm(`确认删除区域地图?`, '删除区域地图', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: true,
})
.then(() => {
this.$http({
url: this.$http.adornUrl('/liStationMap/delete'),
method: 'post',
data: this.$http.adornData(ids, false),
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.fileList.splice(index, 1)
},
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
},
leftClick(index, row) {
let front = JSON.parse(JSON.stringify(this.fileList[index - 1]))
Vue.set(this.fileList, index - 1, row)
Vue.set(this.fileList, index, front)
// console.log(this.fileList)
},
rightClick(index, row) {
let after = JSON.parse(JSON.stringify(this.fileList[index + 1]))
Vue.set(this.fileList, index + 1, row)
Vue.set(this.fileList, index, after)
// console.log(this.fileList)
},
//文件上传前的验证
beforeAvatarUpload(file) {
const isJPG =
file.type === 'image/jpg' ||
file.type === 'image/png' ||
file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 10
if (!isJPG) {
this.$message.error('上传图片只能是 jpg,jpeg,png 格式!')
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过10MB!')
}
return isJPG && isLt2M
},
},
}
</script>
<style lang="scss" scoped>
.fileDiv {
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f6f7fb;
display: table-cell;
vertical-align: middle;
width: 1%;
.fileList {
height: 130px;
width: 100px;
margin: 10px 0 0 10px;
float: left;
border-radius: 5px;
overflow: hidden;
/deep/ .el-input--mini .el-input__inner {
text-align: center !important;
}
.el-button {
padding-left: 8px;
font-size: 14px;
}
img {
height: 100px;
width: 100px;
}
.imgButton {
position: relative;
top: -30px;
background: #ccc;
}
}
.shangchuan {
line-height: 100px;
text-align: center;
font-size: 30px;
height: 100px;
width: 100px;
float: left;
border: 1px solid #ccc;
margin-top: 40px;
margin-left: 10px;
border-radius: 5px;
}
/deep/ .el-alert--info.is-light {
background-color: #f6f7fb;
}
}
</style>
src/pages/sys/road/index.vue
View file @ 6d982ee7
<template lang="pug"> <template lang="pug">
el-container(style="padding:0px;height:77.6vh;") el-container(style="padding:0px;height:77.6vh;")
el-container
el-header( style="height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(195, 195, 195, 1);" ) el-header( style="height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(195, 195, 195, 1);" )
span.title-bold.title-left-color 站点维护 span.title-bold.title-left-color 楼栋维护
el-main.box_main el-main.box_main
el-card() el-card()
el-form(:model='dataForm', :rules='dataRule', ref='dataForm', label-width='100px') el-table( :data="dataList", :stripe="true", @sort-change="sortChange", v-loading="dataListLoading", style="width:100%;", :header-cell-style="{ background: '#EEF8FF', color: '#333333' }" )
el-row(:gutter='20') el-table-column(type="index",header-align="center", align="center", label="序号", width=50 )
el-col(:span='12') template(scope="scope")
el-form-item(label="所属线路:" prop="lineName") span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
el-input(v-model='dataForm.lineName' disabled) el-table-column( prop="stationName", columnKey="station_name", header-align="center", align="center", label="名称", sortable="custom" )
el-col(:span='12') el-table-column( prop="code", header-align="center", align="center", label="编码", sortable="custom" )
el-form-item(label="站点排序:" prop="orderNum") el-table-column( prop="map", header-align="center", align="center", label="地图" )
el-input(v-model.number='dataForm.orderNum' clearable disabled) template(slot-scope="scope")
el-row(:gutter='20') el-button( type="text", size="mini", @click="showMap(scope.row.id)" ) 点击预览
el-col(:span='12') el-table-column( prop="remark", header-align="center", align="center", label="描述", sortable="custom" )
el-form-item(label="站点名称:" prop="stationName") el-table-column( prop="remark", header-align="center", align="center", label="操作", width=150 )
el-input(disabled v-model='dataForm.stationName' placeholder="请输入站点名称" clearable ) template(slot-scope="scope")
el-col(:span='12') el-button( type="text", size="mini", index="1-1", v-if="isAuth('line:station:info')", @click="queryDetailHandle(scope.row)" ) 详情
el-form-item(label="车站编码:" prop="code") el-button( type="text", size="mini", index="1-1", v-if="isAuth('line:station:update')", @click="addOrUpdateHandle(scope.row)" ) 编辑
el-input(v-model='dataForm.code' placeholder="请输入车站编码" clearable disabled) el-footer.box_footer
el-row(:gutter='20') el-pagination( @size-change="sizeChangeHandle", background, @current-change="currentChangeHandle", :current-page="pageIndex", :page-sizes="[10, 20, 50, 100]", :page-size="pageSize", :total="totalPage", layout="total, sizes, prev, pager, next, jumper" )
el-col(:span='12') //- <!-- 弹窗, 新增 / 修改 -->
el-form-item(label="车站类型:" prop="type") add-or-update( v-if="addOrUpdateVisible", ref="addOrUpdate", @refreshdatalist="getDataList" )
el-select(style='width:100%;' v-model='dataForm.type' placeholder="请选择车站类型" clearable disabled) //- 详情
el-option(v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id") query-detail( v-if="queryDetailVisible", ref="queryDetail", @refreshdatalist="getDataList" )
el-col(:span='12') //- 查看地图
el-form-item(label="站点简称:" prop="shortName") query-image( v-if="queryImageVisible", ref="queryImage", @refreshdatalist="getDataList" )
el-input(v-model='dataForm.shortName' placeholder="请输入站点简称" clearable disabled)
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="主站/从站:" prop="isMaster")
el-select(style='width:100%;' v-model='dataForm.isMaster' placeholder="请选择主站/从站" disabled)
el-option(v-for="(item,index) in masterList" :key="index" :label="item.name" :value="item.id")
el-col(:span='24')
el-form-item(label="站点描述:" prop="remark")
el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="" disabled)
el-row(style="padding-bottom:15px;" :span="24")
el-col(:md='23' :sm="5")
div.title-bold(style='line-height: 40px;') 区域地图
//- el-divider(style='margin-top:0')
<div class="fileDiv">
<div class="fileList" v-for="(item,index) in fileList">
<el-input size="mini" v-model='item.name' clearable></el-input>
<img :src="item.readPath" :onerror="logo" @click="changeImage(item)">
<div class="imgButton">
<el-button type="text" size="mini" :disabled="index == 0" icon="el-icon-back" @click='leftClick(index,item)'></el-button>
<el-button type="text" size="mini" icon="el-icon-delete" @click='removeClick(item,index)'></el-button>
<el-button type="text" size="mini" :disabled="index == fileList.length-1" icon="el-icon-right" @click='rightClick(index,item)'></el-button>
</div>
</div>
<div class="shangchuan" @click="fileClick" v-if="fileList.length < 7">
<span class="el-icon-plus"></span>
</div>
<div>
el-alert(title="上传图片格式仅支持jpg,jpeg,png,单个照片大小不超过10M" effect='light' :closable="false" style="margin-top:10px;")
</div>
<input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/>
</div>
el-button(type='primary' size='medium' @click='dataFormSubmit()' v-if="isAuth('line:station:save')" v-prevent-re-click style="margin-top:10px;margin-left:900px;") 保存
</template> </template>
<script> <script>
import { mapState } from 'vuex' import AddOrUpdate from './add-or-update'
import Vue from 'vue' import QueryDetail from './query-detail'
import QueryImage from './query-image'
export default { export default {
computed: { components: {
...mapState('d2admin/user', ['info']), AddOrUpdate,
QueryDetail,
QueryImage
}, },
data() { data() {
let validateNumber = (rule, value, callback) => {
if (value < 0) {
callback(new Error('只能输入正整数'))
} else if (value > 10000) {
callback(new Error('排序值超出范围'))
} else {
callback()
}
}
return { return {
clickFlag: false, word: '', //查询
dataList: [], dataList: [], //列表
dataListLoading: false, dataListLoading: false,
currentRow: {}, pageIndex: 1,
urlPath: window.CONFIG.urlPath, pageSize: 10,
cImage: '', totalPage: 0,
fileList: [], addOrUpdateVisible: false,
stationId: localStorage.getItem('stationId'), queryDetailVisible: false,
imageUrl: '', queryImageVisible: false,
logo: 'this.src="' + require('../../../assets/images/videoImg.png') + '"', ruleForm: {},
visible: false,
lineId: '', //选中的线路id
data: [],
defaultProps: {
children: 'children',
label: 'name'
},
typeList: [ typeList: [
{ id: '1', name: '正线站点' }, { id: 1, name: '正线站点' },
{ id: '2', name: '换乘站点' }, { id: 2, name: '换乘站点' }
],
masterList: [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' },
], ],
dataForm: {}, bean: ''
dataRule: {
// stationName: [
// { required: true, message: '站点名称不能为空', trigger: 'blur' },
// { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
// ],
orderNum: [
{ required: true, message: '排序值不能为空' },
{ type: 'number', message: '排序值必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] },
],
shortName: [
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur',
},
],
code: [
{ required: true, message: '车站编码不能为空', trigger: 'blur' },
{
min: 1,
max: 30,
message: '长度在 1 到 30 个字符',
trigger: 'blur',
},
],
type: [
{ required: true, message: '车站类型不能为空', trigger: 'blur' },
],
remark: [
{
min: 1,
max: 300,
message: '长度在 1 到 300 个字符',
trigger: 'blur',
},
],
},
} }
}, },
created() { created() {
this.initDataFrom(this.stationId) this.getDataList()
this.cImage = ''
}, },
methods: { methods: {
initDataFrom(id) { //排序
sortChange(column) {
if (column.order === 'descending') {
this.order = 'desc'
} else {
this.order = 'asc'
}
if (column.column.columnKey) {
this.sort = column.column.columnKey
} else {
this.sort = column.prop
}
this.getDataList()
},
//线路树节点点击事件
handleNodeClick(data) {
this.lineId = data.id
this.pageIndex = 1
this.getDataList()
},
//添加或修改事件
addOrUpdateHandle(row, flagType) {
// console.log('addOrUpdateHandle:', row.id)
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(row.id)
})
},
//查看详情
queryDetailHandle(row) {
this.queryDetailVisible = true
this.$nextTick(() => {
this.$refs.queryDetail.init(row.id)
})
},
//查看地图
showMap(id) {
this.queryImageVisible = true
this.$nextTick(() => {
this.$refs.queryImage.init(id)
})
},
getDataList() {
let data = {
page: this.pageIndex,
rows: this.pageSize
}
this.$http({ this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`), url: this.$http.adornUrl('/liStation/list'),
method: 'get', method: 'post',
params: this.$http.adornParams(), data: data
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.dataForm = data.bean this.dataList = data.page.rows
this.fileList = data.bean.mapList this.totalPage = data.page.total
this.fileList.forEach((element) => { } else {
element.readPath = this.urlPath + element.filePath this.dataList = []
}) this.totalPage = 0
} }
this.dataListLoading = false
}) })
}, },
initData() { // 提交
this.typeList = [ addsave() {
{ id: '1', name: '正线站点' }, this.$refs['ruleForm'].validate((valid) => {
{ id: '2', name: '换乘站点' },
]
this.masterList = [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' },
]
},
// 表单提交
dataFormSubmit(id) {
this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
let errorflag = false
this.fileList.forEach((e) => {
if (e.name && e.name.length > 10) {
this.$message.warning('地图名称长度在1到10个字符之间')
errorflag = true
return false
}
if (!e.name) {
this.$message.error('请填写区域名称！')
errorflag = true
return false
}
})
if (errorflag) {
return
}
this.clickFlag = true
for (var i in this.fileList) {
this.fileList[i].orderNum = Number(i) + 1
}
this.dataForm.mapList = this.fileList
this.$http({ this.$http({
url: this.$http.adornUrl( url: this.$http.adornUrl(
`/liStation/${!this.dataForm.id ? 'save' : 'update'}` `/liStation/${!this.ruleForm.id ? 'save' : 'update'}`
), ),
method: 'post', method: 'post',
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: this.ruleForm
data: this.dataForm,
}).then((data) => { }).then((data) => {
console.log(data)
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => {
this.visible = false
this.getDataList()
}
}) })
} else { } else {
this.$message.error(data.msg) this.$message.error(data.msg)
} }
this.clickFlag = false
}) })
} }
}) })
}, },
changeImage(item) { closeForm() {
this.cImage = item.id console.log('取消')
// console.log('id:' + item.id) this.visible = false
if (this.cImage) {
document.getElementById('upload_file').click()
}
}, },
fileClick() { // 每页数
this.cImage = '' sizeChangeHandle(val) {
if ( this.pageSize = val
this.cImage === '' || this.pageIndex = 1
this.cImage === null || this.getDataList()
this.cImage === undefined
) {
document.getElementById('upload_file').click()
}
}, },
fileChange(el) { // 当前页
// console.log('上传图片后的cImage', this.cImage) currentChangeHandle(val) {
this.$showLoading() this.pageIndex = val
if (!el.target.files[0].size) return this.getDataList()
let file = el.target.files[0] }
}
}
</script>
<style lang="scss" scoped>
.tree_warp {
overflow: auto;
height: 100%;
box-sizing: border-box;
background: #f4f4f4;
}
if (this.beforeAvatarUpload(file)) { .infopage {
let fd = new FormData() margin: 24px;
fd.append('type', 'stationMap') padding: 24px;
fd.append('id', this.cImage) height: 750px;
fd.append('stationId', this.dataForm.id) background-color: rgba(7, 58, 116, 0.596);
fd.append('file', file) }
this.$http({
url: this.$http.adornUrl(`/liStationMap/uploadFile`),
method: 'post',
data: fd,
}).then((data) => {
if (data && data.code === 0) {
this.currentRow = data.bean
this.currentRow.readPath = this.urlPath + this.currentRow.filePath
// console.log('上传图片后的currentRow', this.currentRow)
var num = 0
var flag = false
var updateRes = {}
this.fileList.forEach((res, index) => {
if (res.id === this.currentRow.id) {
num = index
updateRes = res
flag = true
return false
}
})
// console.log('上传图片后的updateRes', updateRes)
if (flag) {
updateRes.fileName = this.currentRow.fileName
updateRes.filePath = this.currentRow.filePath
updateRes.readPath = this.currentRow.readPath
updateRes.updateTime = this.currentRow.updateTime
updateRes.updateUserId = this.currentRow.updateUserId
Vue.set(this.fileList, num, updateRes)
} else {
this.fileList.push(this.currentRow)
}
// console.log('上传图片后的fileList', this.fileList)
this.$message.success('上传成功!')
} else {
this.$message.error('上传失败!')
}
})
}
this.cImage = ''
el.target.value = ''
},
removeClick(item, index) {
var ids = [item.id]
this.$confirm(`确认删除区域地图?`, '删除区域地图', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: true,
})
.then(() => {
this.$http({
url: this.$http.adornUrl('/liStationMap/delete'),
method: 'post',
data: this.$http.adornData(ids, false),
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.fileList.splice(index, 1)
},
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
},
leftClick(index, row) {
let front = JSON.parse(JSON.stringify(this.fileList[index - 1]))
Vue.set(this.fileList, index - 1, row) .tree_house {
Vue.set(this.fileList, index, front) width: 12px;
// console.log(this.fileList) height: 18px;
}, display: inline-block;
rightClick(index, row) {
let after = JSON.parse(JSON.stringify(this.fileList[index + 1]))
Vue.set(this.fileList, index + 1, row) img {
Vue.set(this.fileList, index, after) width: 20px;
// console.log(this.fileList) height: 20px;
}, vertical-align: middle;
//文件上传前的验证 // transform: translateY(-8px);
beforeAvatarUpload(file) { transform: translateX(-40px);
const isJPG = }
file.type === 'image/jpg' || }
file.type === 'image/png' ||
file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 10
if (!isJPG) { .tree_point {
this.$message.error('上传图片只能是 jpg,jpeg,png 格式!') width: 12px;
} height: 18px;
if (!isLt2M) { display: inline-block;
this.$message.error('上传图片大小不能超过10MB!')
} img {
return isJPG && isLt2M width: 12px;
}, height: 18px;
}, vertical-align: middle;
transform: translateY(-2px);
}
} }
</script>
<style lang="scss" scoped>
.fileDiv {
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f6f7fb;
display: table-cell;
vertical-align: middle;
width: 1%;
.fileList { .dic_tree {
height: 130px; background: #f4f4f4;
width: 100px; width: 330px;
margin: 10px 0 0 10px; }
float: left;
border-radius: 5px;
overflow: hidden;
/deep/ .el-input--mini .el-input__inner { .dic_tree_header {
text-align: center !important; font-size: 14px;
} font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(54, 54, 54, 1);
text-indent: 25px;
}
.el-button { .dic_tree /deep/ .el-tree-node__expand-icon.expanded {
padding-left: 8px; display: none;
font-size: 14px; }
}
img { .dic_tree /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
height: 100px; display: none;
width: 100px; }
}
.imgButton { .dic_tree /deep/ .el-tree-node__expand-icon.is-leaf {
position: relative; display: none;
top: -30px; }
background: #ccc;
}
}
.shangchuan { .dic_tree
line-height: 100px; /deep/
text-align: center; .el-tree-node
font-size: 30px; > .el-tree-node__children
height: 100px; .el-tree-node__content {
width: 100px; width: 280px;
float: left; height: 30px;
border: 1px solid #ccc; line-height: 30px;
margin-top: 40px; border-radius: 15px 0 0 15px;
margin-left: 10px; font-size: 14px;
border-radius: 5px; font-family: Microsoft YaHei;
} font-weight: bold;
color: rgba(0, 0, 0, 1);
background: white;
margin-top: 10px;
margin-left: 30px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
}
/deep/ .el-alert--info.is-light { .el-tree--highlight-current
background-color: #f6f7fb; /deep/
} .el-tree-node.is-current
> .el-tree-node__content {
background-color: #35aff8;
color: white;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment