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