You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

321 lines
13 KiB

<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>
<template v-if="lists.row.code !== 'otherLink'">
{{ item.title }}
</template>
<template v-else>
<el-input v-if="statusCode === 'value' && statusIndex === lists.$index" :value="item.title" @blur="changeTitle($event,index,lists.row)" />
<span v-else>{{ item.title }}</span>
</template>
</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>
{{ item.title }}
</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";
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: {
// 修改content
changeTitle(e,index,item) {
let strList = JSON.parse(item.value)
strList[index].content = e.target.value
const params = {
code: item.code,
constantId: item.constantId,
value: JSON.stringify(strList)
}
this.updateData(params)
},
// 修改当前正在编辑的文本框
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) {
console.log('res: ', res);
this.params = {
...this.params,
pageNum: res,
};
this.getList()
},
}
}
</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>