123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375 |
- <template>
- <a-card :bordered="false">
- <!-- 查询 -->
- <div class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="searchQuery">
- <a-row :gutter="24">
- <a-col :md="6" :sm="8">
- <a-form-item label="标题">
- <a-input placeholder="请输入标题查询" v-model="queryParam.title"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <a-form-item label="发布状态">
- <a-select v-model="queryParam.isRelease" placeholder="请选择发布状态">
- <a-select-option value="">请选择</a-select-option>
- <a-select-option value="0">未发布</a-select-option>
- <a-select-option value="1">已发布</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="12">
- <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-range-picker
- style="width: 100%"
- v-model="createTime"
- format="YYYY-MM-DD"
- :placeholder="['开始时间', '结束时间']"
- @change="onDateChange"
- />
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <span style="float: left;overflow: hidden;">
- <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 20px">重置</a-button>
- </span>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <!-- 新增 批量删除 -->
- <div class="table-add">
- <a-button @click="addAnn" type="primary">新增</a-button>
- <!-- 批量操作 -->
- <a-dropdown v-if="selectedRowKeys.length > 0">
- <a-menu slot="overlay">
- <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除 </a-menu-item>
- </a-menu>
- <a-button style="margin-left:24px">批量操作<a-icon type="down"/></a-button>
- </a-dropdown>
- </div>
- <!-- ------------------------------------------------------------ -->
- <div>
- <!-- 已选择 清空 -->
- <div class="ant-alert ant-alert-info" style="margin: 20px 0;background:#e6f7ff;">
- <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择
- <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
- >项
- <a style="margin-left: 24px" @click="onClearSelected">清空</a>
- </div>
- <!-- table -->
- <a-row>
- <a-table
- bordered
- :columns="columns"
- :dataSource="annList"
- :loading="loading"
- :pagination="pagination"
- :row-key="record => record.id"
- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
- @change="handleTableChange"
- >
- <!-- 发布时间 -->
- <span slot="releaseTimeSlot" slot-scope="text, record">
- <span v-if="record.isRelease == '0'">
-
- </span>
- <span v-else>
- {{text}}
- </span>
- </span>
- <!-- 发布人 -->
- <span slot="updataBySlot" slot-scope="text, record">
- <span v-if="record.isRelease == '0'">
-
- </span>
- <span v-else>
- {{text}}
- </span>
- </span>
- <!-- 发布 -->
- <span slot="isReleaseSlot" slot-scope="text, record">
- <a-tag color="#f50" v-if="record.isRelease == '0'">
- 未发布
- </a-tag>
- <a-tag color="#87d068" v-else>
- 已发布
- </a-tag>
- </span>
- <!-- 类型 -->
- <span slot="whatType" slot-scope="text, record">
- <a-tag color="orange" v-if="record.type == '项目'">
- 项目
- </a-tag>
- <a-tag color="purple" v-if="record.type == '人事'">
- 人事
- </a-tag>
- <a-tag color="cyan" v-if="record.type == '财务'">
- 财务
- </a-tag>
- <a-tag color="#87d068" v-else>
- {{record.type}}
- </a-tag>
-
- </span>
- <!-- 操作 -->
- <span slot="operationSlot" slot-scope="text, record">
- <a href="javascript:void(0);" @click="editAnn(record)">编辑</a>
- <a-divider type="vertical" v-if="record.isRelease == '0'" />
- <!-- 判断是否发布 -->
- <a-popconfirm
- v-if="record.isRelease == '0'"
- title="确定发布吗?"
- @confirm="sendAnn(record.id)"
- ok-text="是"
- cancel-text="否"
- >
- <a href="javascript:void(0);" class="sendGr">发布</a>
- </a-popconfirm>
- <!-- --------------------------------------------------- -->
- <a-divider type="vertical" v-if="record.isRelease == '1'" />
- <a-popconfirm
- v-if="record.isRelease == '1'"
- title="确定取消发布吗?"
- @confirm="saveAnn(record.id)"
- ok-text="是"
- cancel-text="否"
- >
- <a href="javascript:void(0);" class="sendGr">取消发布</a>
- </a-popconfirm>
- <a-divider type="vertical" />
- <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="delAnn(record)">
- <a href="javascript:void(0);" class="delRed">删除</a>
- </a-popconfirm>
- </span>
- </a-table>
- </a-row>
- </div>
- <addAnn-modal ref="AddAnnModal" @ok="modalFormOk" :fatherGetList="getAnnList"></addAnn-modal>
- </a-card>
- </template>
- <script>
- import AddAnnModal from '@views/oa/enter-ann/add/addAnnModal.vue'
- import {
- enterpriseEList,
- enterpriseEQueryById,
- enterpriseEReleseUpdate,
- enterpriseEDelete
- } from '@api/oa/cd-enterprise-announcement'
- export default {
- name: 'EnterpriseAnnouncement', // 企业公告
- components: {
- AddAnnModal
- },
- data () {
- return {
- id: '', // 唯一标识 双休绑定后自动生成,删除
- loading: false, // 表格加载
- createTime:[],
- // 表头
- columns: [
- {
- title: '标题',
- dataIndex: 'title',
- align: 'center'
- },
- {
- title: '类型',
- dataIndex: 'type',
- scopedSlots: { customRender: 'whatType' },
- align: 'center'
- },
- {
- title: '创建人',
- dataIndex: 'createBy',
- align: 'center'
- },
- {
- title: '创建日期',
- dataIndex: 'createTime',
- align: 'center'
- },
- {
- title: '发布人',
- dataIndex: 'updateBy',
- scopedSlots: { customRender: 'updataBySlot' },
- align: 'center'
- }, {
- title: '发布时间',
- dataIndex: 'releaseTime',
- scopedSlots: { customRender: 'releaseTimeSlot' },
- align: 'center'
- },
- {
- title: '发布',
- dataIndex: 'isRelease',
- scopedSlots: { customRender: 'isReleaseSlot' },
- align: 'center'
- },
- {
- title: '操作',
- dataIndex: 'operation',
- scopedSlots: { customRender: 'operationSlot' },
- align: 'center',
- width: '20%'
- }
- ],
- annList: [], // 公告数据
- // 分页参数
- pagination: {
- total: 0,
- current: 0,
- pageSize: 0
- },
- showInfo: {}, // 编辑时回显的公告数据
- // 查询条件
- queryParam: {
- parSelect: '2', // 查询参数
- pageNo: '1', // 页码
- title: '', // 标题
- isRelease: '' // 是否发布
- },
- selectedRowKeys: []
- }
- },
- created () {
- this.getAnnList() // 渲染公告
- },
- methods: {
- batchDel () {},
- // 勾选
- onSelectChange (keys, rows) {
- this.selectedRowKeys = keys
- this.selectedRows = rows
- },
- // 查询日程计划列表(根据参数不同,传递对应的数据)
- getAnnList () {
- this.$nextTick(() => {
- enterpriseEList(this.queryParam).then(res => {
- // console.log('>>>>', this.queryParam)
- if (res.success) {
- this.annList = res.result.records
- console.log('列表公告=====', this.annList)
- this.pagination = {
- total: res.result.total,
- current: res.result.current,
- pageSize: res.result.size
- }
- }
- })
- })
- },
- // 查询按钮
- searchQuery () {
- this.getAnnList() // 渲染公告
- },
- searchReset () {
- // console.log('>>>>重置')
- this.queryParam.title = ''
- this.queryParam.isRelease = ''
- this.getAnnList()
- },
- // 新增 按钮
- addAnn () {
- console.log('点击新增,负责打开弹框,剩下功能在子组件的保存按钮')
- this.$refs.AddAnnModal.addModalVisible = true
- this.$refs.AddAnnModal.title = '新增企业公告'
- },
- // 点击编辑 回显
- editAnn (obj) {
- console.log('打开编辑弹框,剩下功能在子组件的保存按钮')
- this.$refs.AddAnnModal.addModalVisible = true
- this.$refs.AddAnnModal.title = '编辑企业公告'
- // 根据id查询公告
- enterpriseEQueryById({ id: obj.id }).then(res => {
- if (res.success) {
- console.log(res)
- this.$refs.AddAnnModal.annInfo = res.result
- this.$refs.AddAnnModal.getAnnFormInfo() // enterpriseEQueryById父拿子
- }
- })
- },
- // 发布
- sendAnn (id) {
- enterpriseEReleseUpdate({ id: id, isRelease: '1' }).then(res => {
- console.log(res)
- this.getAnnList()
- this.$message.success('发布成功')
- })
- },
- // 删除公告
- delAnn (record) {
- console.log('点击公告对象', record)
- enterpriseEDelete({ id: record.id }).then(res => {
- if (res.success) {
- console.log(res)
- this.getAnnList()
- this.$message.success('删除成功')
- }
- })
- },
- // 取消发布
- saveAnn (id) {
- console.log('点击了取消发布')
- enterpriseEReleseUpdate({ id: id, isRelease: '0' }).then(res => {
- console.log(res)
- this.$message.success('取消发布')
- this.getAnnList() // 渲染公告
- })
- },
- onDateChange: function(value, dateString) {
- console.log(dateString[0], dateString[1])
- this.queryParam.createTime_begin = dateString[0]
- this.queryParam.createTime_end = dateString[1]
- },
- // 清空
- onClearSelected () {},
- // ??
- modalFormOk () {},
- // 分页、排序、筛选变化时触发
- handleTableChange (pagination, filters, sorter) {
- // console.log('当前页信息>>>>',pagination)
- this.queryParam.pageNo = pagination.current
- this.getAnnList()
- }
- },
- computed: {
- // 选中项
- rowSelection () {
- return {
- onChange: (selectedRowKeys, selectedRows) => {
- console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
- },
- getCheckboxProps: record => ({
- props: {
- disabled: record.title === 'Disabled User',
- // Column configuration not to be checked
- title: record.title
- }
- })
- }
- }
- },
- mounted () {}
- }
- </script>
- <style lang="less" scoped>
- @import '~@assets/less/common.less';
- </style>
|