enterpriseAnnouncement.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="searchQuery">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="8">
  8. <a-form-item label="标题">
  9. <a-input placeholder="请输入标题查询" v-model="queryParam.title"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="8">
  13. <a-form-item label="发布状态">
  14. <a-select v-model="queryParam.isRelease" placeholder="请选择发布状态">
  15. <a-select-option value="">请选择</a-select-option>
  16. <a-select-option value="0">未发布</a-select-option>
  17. <a-select-option value="1">已发布</a-select-option>
  18. </a-select>
  19. </a-form-item>
  20. </a-col>
  21. <a-col :md="6" :sm="12">
  22. <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
  23. <a-range-picker
  24. style="width: 100%"
  25. v-model="createTime"
  26. format="YYYY-MM-DD"
  27. :placeholder="['开始时间', '结束时间']"
  28. @change="onDateChange"
  29. />
  30. </a-form-item>
  31. </a-col>
  32. <a-col :md="6" :sm="8">
  33. <span style="float: left;overflow: hidden;">
  34. <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
  35. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 20px">重置</a-button>
  36. </span>
  37. </a-col>
  38. </a-row>
  39. </a-form>
  40. </div>
  41. <!-- 新增 批量删除 -->
  42. <div class="table-add">
  43. <a-button @click="addAnn" type="primary">新增</a-button>
  44. <!-- 批量操作 -->
  45. <a-dropdown v-if="selectedRowKeys.length > 0">
  46. <a-menu slot="overlay">
  47. <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除 </a-menu-item>
  48. </a-menu>
  49. <a-button style="margin-left:24px">批量操作<a-icon type="down"/></a-button>
  50. </a-dropdown>
  51. </div>
  52. <!-- ------------------------------------------------------------ -->
  53. <div>
  54. <!-- 已选择 清空 -->
  55. <div class="ant-alert ant-alert-info" style="margin: 20px 0;background:#e6f7ff;">
  56. <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择
  57. <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
  58. >项
  59. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  60. </div>
  61. <!-- table -->
  62. <a-row>
  63. <a-table
  64. bordered
  65. :columns="columns"
  66. :dataSource="annList"
  67. :loading="loading"
  68. :pagination="pagination"
  69. :row-key="record => record.id"
  70. :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  71. @change="handleTableChange"
  72. >
  73. <!-- 发布时间 -->
  74. <span slot="releaseTimeSlot" slot-scope="text, record">
  75. <span v-if="record.isRelease == '0'">
  76. </span>
  77. <span v-else>
  78. {{text}}
  79. </span>
  80. </span>
  81. <!-- 发布人 -->
  82. <span slot="updataBySlot" slot-scope="text, record">
  83. <span v-if="record.isRelease == '0'">
  84. </span>
  85. <span v-else>
  86. {{text}}
  87. </span>
  88. </span>
  89. <!-- 发布 -->
  90. <span slot="isReleaseSlot" slot-scope="text, record">
  91. <a-tag color="#f50" v-if="record.isRelease == '0'">
  92. 未发布
  93. </a-tag>
  94. <a-tag color="#87d068" v-else>
  95. 已发布
  96. </a-tag>
  97. </span>
  98. <!-- 类型 -->
  99. <span slot="whatType" slot-scope="text, record">
  100. <a-tag color="orange" v-if="record.type == '项目'">
  101. 项目
  102. </a-tag>
  103. <a-tag color="purple" v-if="record.type == '人事'">
  104. 人事
  105. </a-tag>
  106. <a-tag color="cyan" v-if="record.type == '财务'">
  107. 财务
  108. </a-tag>
  109. <a-tag color="#87d068" v-else>
  110. {{record.type}}
  111. </a-tag>
  112. </span>
  113. <!-- 操作 -->
  114. <span slot="operationSlot" slot-scope="text, record">
  115. <a href="javascript:void(0);" @click="editAnn(record)">编辑</a>
  116. <a-divider type="vertical" v-if="record.isRelease == '0'" />
  117. <!-- 判断是否发布 -->
  118. <a-popconfirm
  119. v-if="record.isRelease == '0'"
  120. title="确定发布吗?"
  121. @confirm="sendAnn(record.id)"
  122. ok-text="是"
  123. cancel-text="否"
  124. >
  125. <a href="javascript:void(0);" class="sendGr">发布</a>
  126. </a-popconfirm>
  127. <!-- --------------------------------------------------- -->
  128. <a-divider type="vertical" v-if="record.isRelease == '1'" />
  129. <a-popconfirm
  130. v-if="record.isRelease == '1'"
  131. title="确定取消发布吗?"
  132. @confirm="saveAnn(record.id)"
  133. ok-text="是"
  134. cancel-text="否"
  135. >
  136. <a href="javascript:void(0);" class="sendGr">取消发布</a>
  137. </a-popconfirm>
  138. <a-divider type="vertical" />
  139. <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="delAnn(record)">
  140. <a href="javascript:void(0);" class="delRed">删除</a>
  141. </a-popconfirm>
  142. </span>
  143. </a-table>
  144. </a-row>
  145. </div>
  146. <addAnn-modal ref="AddAnnModal" @ok="modalFormOk" :fatherGetList="getAnnList"></addAnn-modal>
  147. </a-card>
  148. </template>
  149. <script>
  150. import AddAnnModal from '@views/oa/enter-ann/add/addAnnModal.vue'
  151. import {
  152. enterpriseEList,
  153. enterpriseEQueryById,
  154. enterpriseEReleseUpdate,
  155. enterpriseEDelete
  156. } from '@api/oa/cd-enterprise-announcement'
  157. export default {
  158. name: 'EnterpriseAnnouncement', // 企业公告
  159. components: {
  160. AddAnnModal
  161. },
  162. data () {
  163. return {
  164. id: '', // 唯一标识 双休绑定后自动生成,删除
  165. loading: false, // 表格加载
  166. createTime:[],
  167. // 表头
  168. columns: [
  169. {
  170. title: '标题',
  171. dataIndex: 'title',
  172. align: 'center'
  173. },
  174. {
  175. title: '类型',
  176. dataIndex: 'type',
  177. scopedSlots: { customRender: 'whatType' },
  178. align: 'center'
  179. },
  180. {
  181. title: '创建人',
  182. dataIndex: 'createBy',
  183. align: 'center'
  184. },
  185. {
  186. title: '创建日期',
  187. dataIndex: 'createTime',
  188. align: 'center'
  189. },
  190. {
  191. title: '发布人',
  192. dataIndex: 'updateBy',
  193. scopedSlots: { customRender: 'updataBySlot' },
  194. align: 'center'
  195. }, {
  196. title: '发布时间',
  197. dataIndex: 'releaseTime',
  198. scopedSlots: { customRender: 'releaseTimeSlot' },
  199. align: 'center'
  200. },
  201. {
  202. title: '发布',
  203. dataIndex: 'isRelease',
  204. scopedSlots: { customRender: 'isReleaseSlot' },
  205. align: 'center'
  206. },
  207. {
  208. title: '操作',
  209. dataIndex: 'operation',
  210. scopedSlots: { customRender: 'operationSlot' },
  211. align: 'center',
  212. width: '20%'
  213. }
  214. ],
  215. annList: [], // 公告数据
  216. // 分页参数
  217. pagination: {
  218. total: 0,
  219. current: 0,
  220. pageSize: 0
  221. },
  222. showInfo: {}, // 编辑时回显的公告数据
  223. // 查询条件
  224. queryParam: {
  225. parSelect: '2', // 查询参数
  226. pageNo: '1', // 页码
  227. title: '', // 标题
  228. isRelease: '' // 是否发布
  229. },
  230. selectedRowKeys: []
  231. }
  232. },
  233. created () {
  234. this.getAnnList() // 渲染公告
  235. },
  236. methods: {
  237. batchDel () {},
  238. // 勾选
  239. onSelectChange (keys, rows) {
  240. this.selectedRowKeys = keys
  241. this.selectedRows = rows
  242. },
  243. // 查询日程计划列表(根据参数不同,传递对应的数据)
  244. getAnnList () {
  245. this.$nextTick(() => {
  246. enterpriseEList(this.queryParam).then(res => {
  247. // console.log('>>>>', this.queryParam)
  248. if (res.success) {
  249. this.annList = res.result.records
  250. console.log('列表公告=====', this.annList)
  251. this.pagination = {
  252. total: res.result.total,
  253. current: res.result.current,
  254. pageSize: res.result.size
  255. }
  256. }
  257. })
  258. })
  259. },
  260. // 查询按钮
  261. searchQuery () {
  262. this.getAnnList() // 渲染公告
  263. },
  264. searchReset () {
  265. // console.log('>>>>重置')
  266. this.queryParam.title = ''
  267. this.queryParam.isRelease = ''
  268. this.getAnnList()
  269. },
  270. // 新增 按钮
  271. addAnn () {
  272. console.log('点击新增,负责打开弹框,剩下功能在子组件的保存按钮')
  273. this.$refs.AddAnnModal.addModalVisible = true
  274. this.$refs.AddAnnModal.title = '新增企业公告'
  275. },
  276. // 点击编辑 回显
  277. editAnn (obj) {
  278. console.log('打开编辑弹框,剩下功能在子组件的保存按钮')
  279. this.$refs.AddAnnModal.addModalVisible = true
  280. this.$refs.AddAnnModal.title = '编辑企业公告'
  281. // 根据id查询公告
  282. enterpriseEQueryById({ id: obj.id }).then(res => {
  283. if (res.success) {
  284. console.log(res)
  285. this.$refs.AddAnnModal.annInfo = res.result
  286. this.$refs.AddAnnModal.getAnnFormInfo() // enterpriseEQueryById父拿子
  287. }
  288. })
  289. },
  290. // 发布
  291. sendAnn (id) {
  292. enterpriseEReleseUpdate({ id: id, isRelease: '1' }).then(res => {
  293. console.log(res)
  294. this.getAnnList()
  295. this.$message.success('发布成功')
  296. })
  297. },
  298. // 删除公告
  299. delAnn (record) {
  300. console.log('点击公告对象', record)
  301. enterpriseEDelete({ id: record.id }).then(res => {
  302. if (res.success) {
  303. console.log(res)
  304. this.getAnnList()
  305. this.$message.success('删除成功')
  306. }
  307. })
  308. },
  309. // 取消发布
  310. saveAnn (id) {
  311. console.log('点击了取消发布')
  312. enterpriseEReleseUpdate({ id: id, isRelease: '0' }).then(res => {
  313. console.log(res)
  314. this.$message.success('取消发布')
  315. this.getAnnList() // 渲染公告
  316. })
  317. },
  318. onDateChange: function(value, dateString) {
  319. console.log(dateString[0], dateString[1])
  320. this.queryParam.createTime_begin = dateString[0]
  321. this.queryParam.createTime_end = dateString[1]
  322. },
  323. // 清空
  324. onClearSelected () {},
  325. // ??
  326. modalFormOk () {},
  327. // 分页、排序、筛选变化时触发
  328. handleTableChange (pagination, filters, sorter) {
  329. // console.log('当前页信息>>>>',pagination)
  330. this.queryParam.pageNo = pagination.current
  331. this.getAnnList()
  332. }
  333. },
  334. computed: {
  335. // 选中项
  336. rowSelection () {
  337. return {
  338. onChange: (selectedRowKeys, selectedRows) => {
  339. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  340. },
  341. getCheckboxProps: record => ({
  342. props: {
  343. disabled: record.title === 'Disabled User',
  344. // Column configuration not to be checked
  345. title: record.title
  346. }
  347. })
  348. }
  349. }
  350. },
  351. mounted () {}
  352. }
  353. </script>
  354. <style lang="less" scoped>
  355. @import '~@assets/less/common.less';
  356. </style>