<template> <!-- 申报列表 --> <div id="declareList"> <!-- 查询 --> <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.proCode"></a-input> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <a-form-item label="种类"> <a-select v-model="queryParam.kind"> <a-select-option value="">请选择</a-select-option> <a-select-option :value="0">种类A</a-select-option> <a-select-option :value="1">种类B</a-select-option> </a-select> </a-form-item> </a-col> <a-col :md="6" :sm="8"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> <a @click="handleToggleSearch" style="margin-left: 8px"> {{ toggleSearchStatus ? '收起' : '展开' }} <a-icon :type="toggleSearchStatus ? 'up' : 'down'" /> </a> </span> </a-col> </a-row> </a-form> </div> </a-card> <!-- 操作按钮区域 新增申报--> <a-card :bordered="false" style="margin:10px 0"> <div class="table-operator"> <a-button type="primary" @click="addDeclare" icon="plus">新增申报</a-button> </div> <!-- 子表 :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"--> <a-table bordered :columns="declareListColumns" :data-source="declareListData" :loading="loading" :pagination="ipagination" :row-key="record => record.id" @change="handleTableChange" > <!-- 状态 --> <!-- slot-scope="text, record" --> <span slot="stateSlot"> <!-- v-if="record.isRelease == '0'" --> <a-tag color="green">已推送</a-tag> <!-- <a-tag color="orange" v-else>保存</a-tag> --> </span> <!-- 操作 --> <span slot="operationSlot" slot-scope="text, record"> <a @click="derive(record)" style="color:green;">导出</a> <a-divider type="vertical" /> <a-dropdown> <a class="ant-dropdown-link">更多 <a-icon type="down"/></a> <a-menu slot="overlay"> <a-menu-item><a @click="details(record)">详情</a></a-menu-item> <a-menu-item><a @click="edit(record)">编辑</a></a-menu-item> <a-menu-item> <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)"> <a href="javascript:void(0);" style="color:red;">删除</a> </a-popconfirm> </a-menu-item> <a-menu-item><a @click="submit(record)">提交</a></a-menu-item> </a-menu-item> </a-menu> </a-dropdown> </span> </a-table> </a-card> <!-- 抽屉 --> <div> <addDeclare-drawer ref="addDeclareDrawer" :father="aa" @ok="modalFormOk"></addDeclare-drawer> <detailsDeclare-drawer ref="detailsDeclareDrawer" :father="bb" @ok="modalFormOk"></detailsDeclare-drawer> <editDeclare-drawer ref="editDeclareDrawer" :father="cc" @ok="modalFormOk"></editDeclare-drawer> </div> </div> </template> <script> import { JeecgListMixin } from '@/mixins/JeecgListMixin' import JEllipsis from '@/components/jeecg/JEllipsis' import moment from 'moment' import addDeclareDrawer from '@views/declare-elements/addDeclareDrawer.vue' import detailsDeclareDrawer from '@views/declare-elements/detailsDeclareDrawer.vue' import editDeclareDrawer from '@views/declare-elements/editDeclareDrawer.vue' export default { name: 'DeclareList', // 申报列表 mixins: [JeecgListMixin], components: { JEllipsis, moment, addDeclareDrawer, detailsDeclareDrawer, editDeclareDrawer }, data() { let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略 return { // 表头 declareListColumns: [ { title: '商品编码', dataIndex: 'proCode', width: 120, className: 'replacecolor' }, { title: '商品描述', dataIndex: 'proDesc', width: 120, customRender: t => ellipsis(t), className: 'replacecolor' }, { title: '托书编号', dataIndex: 'bookNum', width: 120, className: 'replacecolor' }, { title: '状态', dataIndex: 'smallPo', width: 120, scopedSlots: { customRender: 'stateSlot' }, className: 'replacecolor' }, { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operationSlot' }, width: 160, className: 'replacecolor' } ], declareListData: [{}, {}, {}, {}], // selectedRowKeys: [], // 勾选航 loading: false, // 表格加载 // 查询条件 queryParam: { proCode: '', kind: '' }, url: { // syncUser: '/act/process/extActProcess/doSyncUser', list: '/sys/user/list', // delete: '/sys/user/delete', // deleteBatch: '/sys/user/deleteBatch', exportXlsUrl: '/sys/user/exportXls', // 导出 importExcelUrl: 'sys/user/importExcel' // 导入 } } }, created() { // this.getAdPaListClothes() }, methods: { searchQuery() { // this.getAnnList() // 渲染公告 }, // 重置 searchReset() { // console.log('>>>>重置') this.queryParam = {} // this.getAnnList() }, // ----------------------------- // 新增申报 addDeclare() { console.log('点击新增申报') this.$refs.addDeclareDrawer.visible = true }, // 操作 导出 derive() {}, // 操作 详情 details(record) { console.log('详情') console.log('点击的record', record.id) this.$refs.detailsDeclareDrawer.visible = true }, // 操作 编辑 edit(record) { console.log('编辑') this.$refs.editDeclareDrawer.visible = true }, // 操作 删除 handleDelete() {}, // 操作 提交 submit(record) {}, // 选中行 // onSelectChange(keys, rows) { // this.selectedRowKeys = keys // this.selectedRows = rows // }, // -------------------------------------- aa() {}, bb() {}, cc() {} // 分页、排序、筛选变化时触发 // handleTableChange(pagination, filters, sorter) { // // console.log('当前页信息>>>>',pagination) // this.queryParam.pageNo = pagination.current // // this.getAnnList() // } }, computed: { // 导入 importExcelUrl: function() { return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}` } // 选中项 // 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'; @import '~@assets/less/overwriter.less'; /deep/ .ant-table-thead > tr > th { text-align: center; // font-weight: 700; } /deep/ .ant-table-tbody { text-align: center; } // /deep/ th.replacecolor { // background-color: #ccc; // } </style>