angelo
/
web-base-admin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

450
src/views/announcement/noticeList/index.vue
View File

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