feat(noticeList): update table props

This commit is contained in:
woody 2025-04-23 09:23:43 +08:00
parent 46bfa08760
commit 37292af72b
1 changed files with 233 additions and 217 deletions

View File

@ -8,9 +8,9 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:top-list="topList"
:moren="moren"
></topBar>
/>
<div v-if="topList[0].changed == true">
<div class="main">
<el-form
@ -23,78 +23,78 @@
<!-- 一层 -->
<el-col :span="8">
<el-form-item :label="'公告标题'">
<el-input clearable v-model="select.title"></el-input>
<el-input v-model="select.title" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'显示类型'">
<el-select
v-model="select.websiteType"
clearable
:placeholder="'请选择'"
v-model="select.websiteType"
>
<el-option
v-for="item in webList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'发布位置'">
<el-select
v-model="select.publishLocation"
clearable
:placeholder="'请选择'"
v-model="select.publishLocation"
>
<el-option
v-for="item in localList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'结算等级'">
<el-select clearable :placeholder="'请选择'" v-model="select.grade">
<el-select v-model="select.grade" clearable :placeholder="'请选择'">
<el-option
v-for="item in gradeList"
:key="item.pkId"
:label="item.gradeName"
:value="item.pkId"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'强制弹窗'">
<el-select
v-model="select.isPopScreen"
clearable
:placeholder="'请选择'"
v-model="select.isPopScreen"
>
<el-option
v-for="item in popList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'状态'">
<el-select clearable :placeholder="'请选择'" v-model="select.state">
<el-select v-model="select.state" clearable :placeholder="'请选择'">
<el-option
v-for="item in stateList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
@ -102,65 +102,65 @@
<el-form-item :label="'创建日期'">
<el-date-picker
v-model="creationTime"
@change="changeTime"
value-format="yyyy-MM-dd"
type="daterange"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
@change="changeTime"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'起止日期'">
<el-date-picker
v-model="creationTime1"
@change="changeTime1"
value-format="yyyy-MM-dd"
type="daterange"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
@change="changeTime1"
/>
</el-form-item>
</el-col>
<el-col :span="4" >
<el-button type="primary" class="searchbtn" @click="getDataList"
> {{ '搜索' }}</el-button
>
<el-col :span="4">
<el-button
type="primary"
class="searchbtn"
@click="getDataList"
> {{ '搜索' }}</el-button>
<el-button @click="reset"> {{ '重置' }}</el-button>
</el-col>
</el-row>
</el-form>
<div class="maintop">
<div class="mainbtn">
<el-button size="small" @click="openDig" class="thebtn1"
v-has-buttons="['NoticeAdd']"
>{{'添加'}}</el-button
>
<el-button
v-has-buttons="['NoticeAdd']"
size="small"
class="thebtn1"
@click="openDig"
>{{ '添加' }}</el-button>
</div>
</div>
<div class="maintable">
<el-table
:data="tableData"
v-loading="loading"
:data="tableData"
style="width: 100%"
height="720px"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column align="center" prop="title" :label="'公告标题'">
</el-table-column>
<el-table-column type="selection" width="55" />
<el-table-column align="center" prop="title" :label="'公告标题'" />
<el-table-column
align="center"
prop="websiteTypeVal"
:label="'显示类型'"
>
</el-table-column>
/>
<el-table-column align="center" prop="locationVOList" :label="'发布位置'">
<template slot-scope="scope">
<div
@ -171,42 +171,45 @@
</div>
</template>
</el-table-column>
<el-table-column align="center" width="200" prop="noticeGradeVOList" :label="'结算等级'">
<el-table-column
align="center"
width="200"
prop="noticeGradeVOList"
:label="'结算等级'"
show-overflow-tooltip
>
<template slot-scope="scope">
<div v-if="scope.row.noticeGradeVOList.length>2">
{{ scope.row.noticeGradeVOList[0].gradeKeyVal }}{{ scope.row.noticeGradeVOList[1].gradeKeyVal }}...
</div>
<div v-else-if="scope.row.noticeGradeVOList.length==2"> {{ scope.row.noticeGradeVOList[0].gradeKeyVal }}{{ scope.row.noticeGradeVOList[1].gradeKeyVal }}</div>
<div v-else-if="scope.row.noticeGradeVOList.length==1"> {{ scope.row.noticeGradeVOList[0].gradeKeyVal }}</div>
<span>
{{ scope.row.noticeGradeVOList.map(item => item.gradeKeyVal).join('、') }}
</span>
</template>
</el-table-column>
<el-table-column align="center" width="200" prop="awardsVOList" :label="'真实奖衔'">
<el-table-column
align="center"
width="200"
prop="awardsVOList"
:label="'真实奖衔'"
show-overflow-tooltip
>
<template slot-scope="scope">
<div v-if="scope.row.awardsVOList.length>2">
{{ scope.row.awardsVOList[0].awardKeyVal }}{{ scope.row.awardsVOList[1].awardKeyVal }}...
</div>
<div v-else-if="scope.row.awardsVOList.length==2"> {{ scope.row.awardsVOList[0].awardKeyVal }}{{ scope.row.awardsVOList[1].awardKeyVal }}</div>
<div v-else-if="scope.row.awardsVOList.length==1"> {{ scope.row.awardsVOList[0].awardKeyVal }}</div>
<span>
{{ scope.row.awardsVOList.map(item => item.awardKeyVal).join('、') }}
</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="isPopScreenVal"
:label="'强制弹窗'"
>
</el-table-column>
<el-table-column align="center" prop="stateVal" :label="'状态'">
</el-table-column>
<el-table-column align="center" prop="approveStateVal" :label="'审核状态'">
</el-table-column>
<el-table-column align="center" prop="endTime" :label="'起止日期'">
/>
<el-table-column align="center" prop="stateVal" :label="'状态'" />
<el-table-column align="center" prop="approveStateVal" :label="'审核状态'" />
<el-table-column align="center" prop="endTime" :min-width="160" :label="'起止日期'">
<template slot-scope="scope">
<div>{{ scope.row.startTime }}-{{ scope.row.endTime }}</div>
</template>
</el-table-column>
<el-table-column align="center" prop="creationTime" :label="'创建日期'">
</template>
</el-table-column>
<el-table-column align="center" :min-width="160" prop="creationTime" :label="'创建日期'" />
<el-table-column
align="center"
prop="time"
@ -216,57 +219,70 @@
>
<template slot-scope="scope">
<div class="btnHeng">
<div v-if="scope.row.approveState == 3||scope.row.approveState == 2" style="color:#48B2FD"
v-has-buttons="['noticeEdit']"
@click="toFixed(scope.row.pkId, 0)"
>
{{ '修改' }}
<div
v-if="scope.row.approveState == 3||scope.row.approveState == 2"
v-has-buttons="['noticeEdit']"
style="color:#48B2FD"
@click="toFixed(scope.row.pkId, 0)"
>
修改
</div>
<div
v-has-buttons="['noticeOpen']"
style="color:#48B2FD"
@click="toFixed(scope.row.pkId, 1)"
>
查看
</div>
<div
v-if="scope.row.approveState == 2"
v-has-buttons="['noticeDel']"
style="color: #c73030"
@click="toFixed(scope.row.pkId,2)"
>
删除
</div>
</div>
<div
@click="toFixed(scope.row.pkId, 1)"
style="color:#48B2FD"
v-has-buttons="['noticeOpen']"
>
{{ '查看' }}
</div>
<div v-if="scope.row.approveState == 2"
@click="toFixed(scope.row.pkId,2)"
style="color: #c73030"
v-has-buttons="['noticeDel']"
>
{{'删除'}}
</div>
</div>
<div class="btnHeng">
<div @click="upOrUnder(scope.row,0)"
type="text"
size="small"
v-has-buttons="['noticeUp']"
style="color: #108EE9">
{{'上移'}}
<div
v-has-buttons="['noticeUp']"
type="text"
size="small"
style="color: #108EE9"
@click="upOrUnder(scope.row,0)"
>
上移
</div>
<div
v-has-buttons="['noticeDown']"
type="text"
size="small"
style="color: #108EE9"
@click="upOrUnder(scope.row,1)"
>
下移
</div>
<div
v-if="scope.row.top==1&&scope.row.approveState == 2"
v-has-buttons="['noticeTop']"
type="text"
size="small"
style="color: #009B58"
@click="upOrUnder(scope.row,2)"
>
置顶
</div>
<div
v-if="scope.row.top==0&&scope.row.approveState == 2"
v-has-buttons="['noticeOff']"
type="text"
size="small"
style="color: #009B58"
@click="upOrUnder(scope.row,3)"
>
取消置顶
</div>
</div>
<div @click="upOrUnder(scope.row,1)"
type="text"
size="small"
v-has-buttons="['noticeDown']"
style="color: #108EE9">
{{'下移'}}
</div>
<div v-if="scope.row.top==1&&scope.row.approveState == 2" @click="upOrUnder(scope.row,2)"
type="text"
size="small"
v-has-buttons="['noticeTop']"
style="color: #009B58">
{{'置顶'}}
</div>
<div v-if="scope.row.top==0&&scope.row.approveState == 2" @click="upOrUnder(scope.row,3)"
type="text"
size="small"
v-has-buttons="['noticeOff']"
style="color: #009B58">
{{'取消置顶'}}
</div>
</div>
</template>
</el-table-column>
@ -294,193 +310,193 @@
<el-col>
<el-form-item :label="'审核状态'" prop="name">
<el-input
clearable
v-model="form.name"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">{{'取消'}}</el-button>
<el-button type="primary" @click="onSubmit('form')">{{'确认'}}</el-button>
<el-button @click="handleClose">{{ '取消' }}</el-button>
<el-button type="primary" @click="onSubmit('form')">{{ '确认' }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import topBar from "@/components/topBarRole";
import * as api from "@/api/notice.js";
import { classifyUpdate, classifySave } from "@/api/product";
import {getRouters} from "@/api/settle";
import topBar from '@/components/topBarRole'
import * as api from '@/api/notice.js'
import { classifyUpdate, classifySave } from '@/api/product'
import { getRouters } from '@/api/settle'
export default {
name: "Bzpz",
name: 'Bzpz',
components: {
topBar,
topBar
},
filters: {
isAgree(val) {
if (!val) {
return '允许';
return '允许'
} else {
return '禁止';
return '禁止'
}
},
}
},
data() {
return {
typeList: [
{
value: 0,
label: '前台',
label: '前台'
},
{
value: 1,
label: '后台',
},
label: '后台'
}
],
digList: [
{
value: 0,
label: '允许',
label: '允许'
},
{
value: 1,
label: '禁止',
},
label: '禁止'
}
],
creationTime: [],
creationTime1: [],
select: {
functionType: 1,
functionType: 1
},
//
queryParams: {
pageNum: 1,
pageSize: 50,
pageSize: 50
},
addOrEdit: "",
addOrEdit: '',
total: 0,
dialogVisible: false,
loading:false,
loading: false,
tableData: [],
moren: "/announcement/noticeList",
moren: '/announcement/noticeList',
topList: [
{
name: '前台公告',
path: "/announcement/noticeList",
url: "Notice",
changed: false,
path: '/announcement/noticeList',
url: 'Notice',
changed: false
},
{
name: '后台公告',
path: "/announcement/noticeList/admin",
url: "NoticeAdmin",
changed: false,
},
path: '/announcement/noticeList/admin',
url: 'NoticeAdmin',
changed: false
}
],
form: {
name: "",
name: ''
},
rules: {
name: [{ required: true, message: '请输入规格类型', trigger: "blur" }],
name: [{ required: true, message: '请输入规格类型', trigger: 'blur' }]
},
webList: [],
localList: [],
popList: [],
gradeList: [],
stateList: [],
};
stateList: []
}
},
mounted() {
//
this.getData();
this.getData()
//
this.getDataList();
this.getDataList()
this.getUserRoute()
},
methods: {
upOrUnder(item,index){
upOrUnder(item, index) {
let url
if(index == 0){
url=api.upMove
}else if(index == 1){
url=api.dowmMove
}else if(index == 2){
url=api.topMove
}else if(index == 3){
url=api.cancelMove
if (index == 0) {
url = api.upMove
} else if (index == 1) {
url = api.dowmMove
} else if (index == 2) {
url = api.topMove
} else if (index == 3) {
url = api.cancelMove
}
url({
pkId:item.pkId,
sort:item.sort,
}).then(res=>{
if(res.code == 200){
this.getDataList();
pkId: item.pkId,
sort: item.sort
}).then(res => {
if (res.code == 200) {
this.getDataList()
}
})
},
getUserRoute() {
getRouters().then((res)=>{
res.data.forEach((item)=>{
this.topList.forEach((items)=>{
if (item.routeName == items.url){
getRouters().then((res) => {
res.data.forEach((item) => {
this.topList.forEach((items) => {
if (item.routeName == items.url) {
items.changed = true
}
})
})
})
},
//
//
reset() {
this.select = {
websiteType: 1,
functionType: 1,
};
this.creationTime = [];
this.creationTime1 = [];
functionType: 1
}
this.creationTime = []
this.creationTime1 = []
this.getDataList()
},
getData() {
api.noticeWebsite().then((res) => {
this.webList = res.data;
});
this.webList = res.data
})
api.noticeLocation().then((res) => {
this.localList = res.data;
});
this.localList = res.data
})
api.noticePopup().then((res) => {
this.popList = res.data;
});
this.popList = res.data
})
api.getGradeRanglist().then((res) => {
this.gradeList = res.data;
});
this.gradeList = res.data
})
api.noticeState().then((res) => {
this.stateList = res.data;
});
this.stateList = res.data
})
},
changeTime(val) {
this.select.startDate = val[0];
this.select.endDate = val[1];
this.select.startDate = val[0]
this.select.endDate = val[1]
},
changeTime1(val) {
this.select.startFinishtDate = val[0];
this.select.endFinishDate = val[1];
this.select.startFinishtDate = val[0]
this.select.endFinishDate = val[1]
},
//
toFixed(id, index) {
// this.addOrEdit = false
// this.dialogVisible = true
this.$router.push({
path: "noticeList/details",
path: 'noticeList/details',
query: {
pkId: id,
type: index,
type: index
// functionType:this.select.functionType
},
});
}
})
},
//
handleDelete(id) {
@ -494,50 +510,50 @@ export default {
// });
// });
this.$router.push({
path: "noticeList/details",
path: 'noticeList/details',
query: {
pkId: id,
type: index,
type: index
// functionType:this.select.functionType
},
});
}
})
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let url = "";
let url = ''
if (this.addOrEdit == true) {
url = classifySave;
url = classifySave
} else {
url = classifyUpdate;
url = classifyUpdate
}
url(this.form).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: "success",
});
this.dialogVisible = false;
type: 'success'
})
this.dialogVisible = false
//
this.$refs[formName].resetFields();
this.$refs[formName].resetFields()
//
this.getDataList();
this.getDataList()
}
});
})
} else {
return false;
return false
}
});
})
},
handleClose() {
this.dialogVisible = false;
this.$refs["form"].clearValidate();
this.$refs["form"].resetFields();
this.dialogVisible = false
this.$refs['form'].clearValidate()
this.$refs['form'].resetFields()
},
openDig() {
this.$router.push({
path: "noticeList/details",
});
path: 'noticeList/details'
})
},
getDataList() {
this.loading = true
@ -545,36 +561,36 @@ export default {
.noticeMemberList(Object.assign({}, this.queryParams, this.select))
.then((res) => {
this.loading = false
this.tableData = res.rows;
this.total = res.total;
});
this.tableData = res.rows
this.total = res.total
})
},
handleSelectionChange(val) {},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
const queryParams = this.queryParams
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
type: 'warning'
})
.then(function () {
return api.exportClassIfy(queryParams);
.then(function() {
return api.exportClassIfy(queryParams)
})
.then((response) => {
this.download(response);
});
this.download(response)
})
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return "success-row";
return 'success-row'
}
return "";
},
},
};
return ''
}
}
}
</script>
<style scoped lang="scss">
::v-deep .el-table .warning-row {