<template>
|
<!-- <el-row>
|
<el-form :inline="true" :model="formSearch">
|
<el-form-item label="区县">
|
<el-select v-model="formSearch.district" placeholder="区县">
|
<el-option
|
v-for="s in districts"
|
:key="s.value"
|
:label="s.label"
|
:value="s.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="场景类型">
|
<el-select v-model="formSearch.sceneTypeId" placeholder="场景类型">
|
<el-option
|
v-for="s in sceneTypes"
|
:key="s.value"
|
:label="s.label"
|
:value="s.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSearch">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</el-row> -->
|
<el-row>
|
<el-col :span="18">
|
<el-menu
|
:default-active="activeType"
|
class="el-menu-demo"
|
mode="horizontal"
|
@select="onNoticeType"
|
>
|
<template v-for="(n, i) in noticeTypes" :key="i">
|
<!-- <el-menu-item-group v-if="n.children" :title="n.label"> -->
|
<template v-if="n.children">
|
<el-menu-item
|
v-for="(c, t) in n.children"
|
:key="`${i}-${t}`"
|
:index="`${n.value}-${c.value}`"
|
>
|
{{ c.label }}
|
</el-menu-item>
|
</template>
|
<!-- </el-menu-item-group> -->
|
<el-menu-item v-else :index="`${n.value}`">
|
{{ n.label }}
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</el-col>
|
<el-col :span="6">
|
<el-row justify="end" align="middle" style="height: 56px">
|
<el-button type="success" @click="drawer = true">新增通知</el-button>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-table :data="tableData" stripe border v-loading="loading">
|
<el-table-column type="expand">
|
<template #default="props">
|
<div class="table-expand">
|
<el-divider content-position="left"> 通知内容 </el-divider>
|
<el-row>
|
<el-col :span="16">
|
{{ props.row.ecNoticecontent }}
|
</el-col>
|
<el-col :span="8">
|
<el-row justify="end">
|
<el-space>
|
<el-tag size="small">{{ props.row.ecNoticetypename }}</el-tag>
|
<el-tag size="small" type="success">{{
|
props.row.ecNoticesubtypename
|
}}</el-tag>
|
</el-space>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="ecNoticetitle" label="通知标题" />
|
<!-- <el-table-column prop="ecNoticecontent" label="通知内容" /> -->
|
<!-- <el-table-column width="90" prop="ecNoticetypename" label="通知类型" /> -->
|
<!-- <el-table-column width="100" prop="ecNoticesubtypename" label="通知子类型" /> -->
|
<el-table-column
|
width="90"
|
prop="ecExtension1"
|
label="签收区县"
|
:formatter="districtFormatter"
|
/>
|
<el-table-column
|
width="180"
|
prop="ecReceivertype"
|
label="签收场景"
|
:formatter="sceneFormatter"
|
/>
|
<!-- <el-table-column
|
width="90"
|
prop="ecIsinuse"
|
label="是否可用"
|
:formatter="boolFormatter"
|
/> -->
|
<el-table-column
|
width="120"
|
prop="ecNeedsign"
|
label="是否需要签收"
|
:formatter="boolFormatter"
|
/>
|
<!-- <el-table-column prop="ecCreatedate" label="创建时间"/> -->
|
<el-table-column
|
width="170"
|
prop="ecUpdatedate"
|
label="更新时间"
|
:formatter="timeFormatter"
|
/>
|
<el-table-column width="160" prop="ecCreator" label="创建人" />
|
<!-- <el-table-column prop="ecPicurl" label="图片" /> -->
|
<!-- <el-table-column prop="ecReceiverid" label="签收人" /> -->
|
</el-table>
|
<!-- <el-affix :offset="0" position="bottom"> -->
|
<el-pagination
|
class="el-pagination"
|
v-model:current-page="currentPage"
|
v-model:page-size="pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:background="true"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
/>
|
<!-- </el-affix> -->
|
<CompNoticeAddDrawer
|
v-model:drawer="drawer"
|
@submited="onAddNotice"
|
></CompNoticeAddDrawer>
|
</template>
|
|
<script>
|
import noticeApi from '@/api/noticeApi';
|
import { useDateFormat } from '@vueuse/core';
|
import { enumScene_1 } from '@/enum/scene';
|
import { enumDistrict } from '@/enum/district';
|
import { enumNotice } from '@/enum/notice';
|
|
import CompNoticeAddDrawer from './CompNoticeAddDrawer.vue';
|
|
export default {
|
components: { CompNoticeAddDrawer },
|
data() {
|
return {
|
currentPage: 1,
|
pageSize: 20,
|
total: 0,
|
loading: false,
|
drawer: false,
|
districts: enumDistrict(),
|
sceneTypes: enumScene_1(),
|
noticeTypes: enumNotice(),
|
formSearch: {
|
district: '',
|
sceneTypeId: '',
|
noticeType: '',
|
noticeSubType: '',
|
},
|
tableData: [],
|
};
|
},
|
watch: {
|
// drawer(nValue) {
|
// console.log(nValue);
|
// }
|
currentPage(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onNoticeType()
|
}
|
},
|
pageSize(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onNoticeType()
|
}
|
},
|
},
|
computed: {
|
activeType() {
|
return this.noticeTypes[0].value + '';
|
},
|
},
|
methods: {
|
onSearch() {},
|
onNoticeType(index) {
|
this.loading = true;
|
const noticeType = index
|
? parseInt(index.split('-')[0])
|
: this.noticeType;
|
const noticeSubType = index
|
? parseInt(index.split('-')[1])
|
: this.noticeSubType;
|
this.noticeType = noticeType;
|
this.noticeSubType = noticeSubType;
|
noticeApi
|
.getNoticeHistory({
|
type: noticeType,
|
subtype: noticeSubType,
|
page: this.currentPage,
|
perPage: this.pageSize
|
})
|
.then((res) => {
|
if (res.success) {
|
this.tableData = res.data;
|
this.currentPage = res.head.page
|
this.total = res.head.totalCount
|
}
|
})
|
.finally(() => {
|
this.loading = false;
|
});
|
// noticeApi.getNotification().then()
|
},
|
districtFormatter(row) {
|
let district = '未设置';
|
this.districts.forEach((d) => {
|
if (d.value == row.ecExtension1) {
|
district = d.label;
|
return;
|
}
|
});
|
if (row.ecExtension1 == null) {
|
district = '全部';
|
}
|
return district;
|
},
|
sceneFormatter(row) {
|
let scene = '';
|
if (row.ecReceivertype == null) {
|
scene = '全部';
|
} else if (row.ecReceivertype == '-1') {
|
scene = '未设置';
|
} else {
|
row.ecReceivertype.split(';').forEach((t) => {
|
this.sceneTypes.forEach((d) => {
|
if (d.value == t) {
|
scene += d.label + '、';
|
return;
|
}
|
});
|
});
|
}
|
return scene;
|
},
|
boolFormatter(row, column, cellValue) {
|
return cellValue ? '是' : '否';
|
},
|
timeFormatter(row, column, cellValue) {
|
const f = useDateFormat(cellValue, 'YYYY-MM-DD HH:mm:ss');
|
return f.value;
|
},
|
onAddNotice() {
|
// this.tableData.unshift(notice)
|
this.onNoticeType();
|
},
|
},
|
mounted() {
|
this.formSearch.district = this.districts[0].value;
|
this.formSearch.sceneTypeId = this.sceneTypes[0].value;
|
this.onNoticeType(this.noticeTypes[0].value + '');
|
},
|
};
|
</script>
|
<style scoped>
|
.table-expand {
|
padding-left: 58px;
|
}
|
.el-pagination {
|
background-color: var(--el-color-white);
|
/* background-color: aqua; */
|
padding: 20px 0;
|
border-top: 1px solid rgba(0, 0, 0, 0.096);
|
/* margin-top: 2px; */
|
}
|
</style>
|
