4 changed files with 428 additions and 23 deletions
@ -0,0 +1,48 @@ |
|||||
|
<template> |
||||
|
<div class="form-container"> |
||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
||||
|
<el-form-item label="类别"> |
||||
|
<el-select v-model="formInline.locationId" value="" placeholder="场地"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="其他链接" value="otherLink"></el-option> |
||||
|
<el-option label="漂浮窗" value="piaochuang"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="描述"> |
||||
|
<el-input v-model="formInline.description" placeholder="描述" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="padding-left:30px"> |
||||
|
<el-button type="primary" @click="onSubmit">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'form-container', |
||||
|
props: ['label'], |
||||
|
data() { |
||||
|
return { |
||||
|
formInline: { |
||||
|
locationId: '', |
||||
|
description: '', |
||||
|
}, |
||||
|
locationId: '', |
||||
|
description: '', |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
this.$emit('submit', this.formInline) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.form-container { |
||||
|
padding: 20px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,306 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<form-container @submit="submitForm"></form-container> |
||||
|
<div class="table"> |
||||
|
<el-table :data="lists" style="width: 100%"> |
||||
|
<el-table-column prop="code" label="类型"> |
||||
|
<template slot-scope="lists"> |
||||
|
<span v-if="lists.row.code === 'piaochuang'">漂浮窗</span> |
||||
|
<span v-else-if="lists.row.code === 'otherLink'">其他链接</span> |
||||
|
<span v-else>其他</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="startTime" label="开始时间"> |
||||
|
<template slot-scope="lists"> |
||||
|
<div @click="changeStatus(lists.$index,'startTime')"> |
||||
|
<!-- <el-input v-if="statusCode === 'startTime' && statusIndex === lists.$index" :value="lists.row.startTime" /> --> |
||||
|
<el-date-picker |
||||
|
v-if="statusCode === 'startTime' && statusIndex === lists.$index" |
||||
|
v-model="lists.row.startTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择开始时间" |
||||
|
@change="changeTime(lists.row,'startTime',$event)" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<div v-else> |
||||
|
<span v-if="lists.row.startTime-0"> |
||||
|
{{ $moment(lists.row.startTime-0).format("YYYY-MM-DD HH:mm") }} |
||||
|
</span> |
||||
|
<span v-else> |
||||
|
暂无 |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="endTime" label="结束时间"> |
||||
|
<template slot-scope="lists"> |
||||
|
<div @click="changeStatus(lists.$index,'endTime')"> |
||||
|
<el-date-picker |
||||
|
v-if="statusCode === 'endTime' && statusIndex === lists.$index" |
||||
|
v-model="lists.row.endTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择开始时间" |
||||
|
@change="changeTime(lists.row,'endTime',$event)" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<div v-else> |
||||
|
<span v-if="lists.row.endTime-0"> |
||||
|
{{ $moment(lists.row.endTime-0).format("YYYY-MM-DD HH:mm") }} |
||||
|
</span> |
||||
|
<span v-else> |
||||
|
暂无 |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="value" label="常量值"> |
||||
|
<template slot-scope="lists"> |
||||
|
<div v-for="(item,index) in getValue(lists.row.value)" :key="index" @click="changeStatus(lists.$index,'value')"> |
||||
|
<div>{{ item.title }}</div> |
||||
|
<template v-if="Array.isArray(item.value)"> |
||||
|
<div v-for="(itemA,indexA) in item.value" :key="indexA"> |
||||
|
<el-input v-if="statusCode === 'value' && statusIndex === lists.$index" :value="itemA" @blur="changeValue($event,item.title,lists.row,indexA)" /> |
||||
|
<span v-else>{{ itemA }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<div> |
||||
|
<el-input v-if="statusCode === 'value' && statusIndex === lists.$index" :value="item.value" @blur="changeValue($event,item.title,lists.row)" /> |
||||
|
<span v-else>{{ item.value }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="description" label="描述"> |
||||
|
<template slot-scope="lists"> |
||||
|
<div @click="changeStatus(lists.$index,'description')"> |
||||
|
<el-input v-if="statusCode === 'description' && statusIndex === lists.$index" :value="lists.row.description" @blur="changeTime(lists.row,'description',$event)" /> |
||||
|
<span v-else> {{ lists.row.description }} </span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="modifyName" label="最后修改人登录名"> |
||||
|
<template slot-scope="lists"> |
||||
|
<span> {{ lists.row.modifyName }} </span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
:page-size="params.pageSize" |
||||
|
layout="prev, pager, next" |
||||
|
:total="dataList.total - 0" |
||||
|
@current-change="currentChange" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- <el-dialog |
||||
|
width="400px" |
||||
|
:show-close="false" |
||||
|
:visible.sync="isEdit" |
||||
|
> |
||||
|
<details-of-distribution ref="distribution" :currId="id" v-if="isEdit"></details-of-distribution> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="isEdit = false">取消</el-button> |
||||
|
<el-button type="primary" @click="determine('ruleForm')">确定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> --> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
const FormContainer = () => import('./form.vue'); |
||||
|
import { GET_LIST,UPDATE_DATA } from '@/api/otherPage'; |
||||
|
import Alert from "@/utils/alert"; |
||||
|
import {pageSize} from '../../config'; |
||||
|
|
||||
|
export default { |
||||
|
name: "index", |
||||
|
data() { |
||||
|
return { |
||||
|
count: 0, |
||||
|
id: '', |
||||
|
isEdit: false, |
||||
|
lists: [], |
||||
|
dataList: {}, |
||||
|
params: { |
||||
|
locationId: '', |
||||
|
description: '', |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
}, |
||||
|
statusIndex: -1, |
||||
|
statusCode: '', |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getList() |
||||
|
}, |
||||
|
components: { FormContainer }, |
||||
|
methods: { |
||||
|
// 修改当前正在编辑的文本框 |
||||
|
changeStatus(index,code) { |
||||
|
this.statusIndex= index; |
||||
|
this.statusCode= code; |
||||
|
}, |
||||
|
// 修改开始/结束时间 |
||||
|
changeTime(item,type,e) { |
||||
|
const params = { |
||||
|
code: item.code, |
||||
|
constantId: item.constantId, |
||||
|
} |
||||
|
if(type === 'startTime') { |
||||
|
params.startTime = this.$moment(e).valueOf() |
||||
|
} else if (type === 'emdTime') { |
||||
|
params.endTime = this.$moment(e).valueOf() |
||||
|
} else if (type === 'description') { |
||||
|
params.description = e.target.value |
||||
|
} |
||||
|
this.updateData(params) |
||||
|
}, |
||||
|
// 搜索查询按钮 |
||||
|
submitForm(res) { |
||||
|
this.params = { |
||||
|
...this.params, |
||||
|
pageNum: 1, |
||||
|
description: res.description, |
||||
|
locationId: res.locationId, |
||||
|
}; |
||||
|
this.getList() |
||||
|
}, |
||||
|
// 获取数组 |
||||
|
async getList() { |
||||
|
await GET_LIST(this.params).then(res => { |
||||
|
const { code,msg,data } = res |
||||
|
if(code === 200) { |
||||
|
this.lists = data.list |
||||
|
this.dataList = data |
||||
|
} else { |
||||
|
Alert(msg) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 将常量值JSON字符串解析 |
||||
|
getValue(value) { |
||||
|
const arr = JSON.parse(value) |
||||
|
let itemList = [] |
||||
|
if(Array.isArray(arr)) { |
||||
|
for(let i = 0; i < arr.length; i++) { |
||||
|
const item = arr[i] |
||||
|
for(let key in item) { |
||||
|
if(Array.isArray(item[key])) { |
||||
|
const obj = { |
||||
|
title: key, |
||||
|
value: item[key] |
||||
|
} |
||||
|
itemList.push(obj) |
||||
|
} else { |
||||
|
const obj = { |
||||
|
title: item.content, |
||||
|
value: item.url |
||||
|
} |
||||
|
itemList.push(obj) |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
for(let key in arr) { |
||||
|
const obj = { |
||||
|
title: key, |
||||
|
value: arr[key] |
||||
|
} |
||||
|
itemList.push(obj) |
||||
|
} |
||||
|
} |
||||
|
return itemList |
||||
|
}, |
||||
|
// 修改常量值,将其反转成JSON后提交 |
||||
|
changeValue(e,title,defaultValue,index) { |
||||
|
let dValue = JSON.parse(defaultValue.value); |
||||
|
if(Array.isArray(dValue)) { |
||||
|
for(let i = 0; i < dValue.length; i++) { |
||||
|
const item = dValue[i] |
||||
|
for(let key in item) { |
||||
|
if(Array.isArray(item[key]) && key === title) { |
||||
|
item[key][index] = e.target.value |
||||
|
} else { |
||||
|
if(item.content === title) { |
||||
|
item.url = e.target.value |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
for(let key in dValue) { |
||||
|
if(key === title) { |
||||
|
dValue[key] = e.target.value |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
const params = { |
||||
|
code: defaultValue.code, |
||||
|
constantId: defaultValue.constantId, |
||||
|
value: JSON.stringify(dValue) |
||||
|
} |
||||
|
this.updateData(params) |
||||
|
}, |
||||
|
// 常量修改 |
||||
|
async updateData(params) { |
||||
|
await UPDATE_DATA(params).then(res => { |
||||
|
const { code } = res |
||||
|
if(code === 200) { |
||||
|
Alert.success('修改成功') |
||||
|
this.getList() |
||||
|
this.statusIndex= -1; |
||||
|
this.statusCode= ''; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 分页 |
||||
|
*/ |
||||
|
currentChange(res) { |
||||
|
this.params = { |
||||
|
...this.params, |
||||
|
from: parseInt(res - 1) * this.params.size, |
||||
|
size: pageSize, |
||||
|
}; |
||||
|
this.getList() |
||||
|
}, |
||||
|
|
||||
|
editModal(id) { |
||||
|
this.isEdit = true; |
||||
|
this.id = id; |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.table { |
||||
|
margin-top: 20px; |
||||
|
padding: 30px; |
||||
|
background: #fff; |
||||
|
|
||||
|
.option-span { |
||||
|
color: #a90500; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue