¶Ô±ÈÐÂÎļþ |
| | |
| | | |
| | | <template> |
| | | <a-modal :title="title" width="70%" :visible="visible" :maskClosable="false" @ok="handleOk" @cancel="handleCancel" |
| | | cancelText="å
³é"> |
| | | <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="8" :sm="8"> |
| | | <a-form-item label="æ¶é´"> |
| | | <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-form-item label="设å¤ç¼ç "> |
| | | <a-input placeholder="请è¾å
¥è®¾å¤ç¼ç æ£ç´¢" v-model="queryParam.equipmentId"></a-input> |
| | | </a-form-item> |
| | | </a-col> |
| | | |
| | | <a-col :md="6" :sm="6"> |
| | | <a-form-item label="设å¤åç§°"> |
| | | <a-input placeholder="请è¾å
¥è®¾å¤åç§°æ£ç´¢" v-model="queryParam.equipmentName"></a-input> |
| | | </a-form-item> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | <!-- æä½æé®åºå --> |
| | | <div class="table-operator"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">æ¥è¯¢</a-button> |
| | | <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">éç½®</a-button> |
| | | </div> |
| | | <!-- tableåºå-begin --> |
| | | <div> |
| | | <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{Â y: 400Â }" :columns="columns" |
| | | :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | <span slot="isDaySpan" slot-scope="text, record"> |
| | | <span v-if="text == 'true'">æ¯</span> |
| | | <span v-if="text == 'false'">å¦</span> |
| | | </span> |
| | | |
| | | </a-table> |
| | | </div> |
| | | <!-- tableåºå-end --> |
| | | </a-card> |
| | | </a-modal> |
| | | </template> |
| | | |
| | | <script> |
| | | import {mapActions} from 'vuex' |
| | | import { filterObj } from '@/utils/util'; |
| | | import { |
| | | ajaxGetSelectItems |
| | | } from '@/api/api' |
| | | import JDictSelectTag from '@/components/dict/JDictSelectTag' |
| | | import { |
| | | deleteAction, |
| | | requestPut, |
| | | getAction, |
| | | postAction |
| | | } from '@/api/manage' |
| | | import { |
| | | JeecgListMixin |
| | | } from '@/mixins/JeecgListMixin' |
| | | import JInput from '@/components/jeecg/JInput' |
| | | import JEllipsis from '@/components/jeecg/JEllipsis' |
| | | import Tooltip from 'ant-design-vue/es/tooltip' |
| | | import JDate from '@/components/jeecg/JDate' |
| | | import moment from 'moment' |
| | | |
| | | export default { |
| | | name: 'DeviceCalendarListModel', |
| | | // mixins: [JeecgListMixin], |
| | | components: { |
| | | JDictSelectTag, |
| | | JEllipsis, |
| | | JInput, |
| | | Tooltip, |
| | | JDate |
| | | }, |
| | | props: { |
| | | status: { |
| | | type: Number, |
| | | default: 1 |
| | | } |
| | | }, |
| | | data() { |
| | | return{ |
| | | /* æ¥è¯¢æ¡ä»¶-请ä¸è¦å¨queryParamä¸å£°æéå符串å¼ç屿§ */ |
| | | queryParam: {}, |
| | | /* æ°æ®æº */ |
| | | dataSource:[], |
| | | /* å页忰 */ |
| | | ipagination:{ |
| | | current: 1, |
| | | pageSize: 10, |
| | | pageSizeOptions: ['10', '20', '30'], |
| | | showTotal: (total, range) => { |
| | | return range[0] + "-" + range[1] + " å
±" + total + "æ¡" |
| | | }, |
| | | showQuickJumper: true, |
| | | showSizeChanger: true, |
| | | total: 0 |
| | | }, |
| | | /* æåºåæ° */ |
| | | isorter:{ |
| | | column: 'createTime', |
| | | order: 'desc', |
| | | }, |
| | | /* çéåæ° */ |
| | | filters: {}, |
| | | /* tableå è½½ç¶æ */ |
| | | loading:false, |
| | | /* tableéä¸keys*/ |
| | | selectedRowKeys: [], |
| | | /* tableéä¸records*/ |
| | | selectionRows: [], |
| | | /* æ¥è¯¢æå */ |
| | | toggleSearchStatus:false, |
| | | /* é«çº§æ¥è¯¢æ¡ä»¶çæç¶æ */ |
| | | superQueryFlag:false, |
| | | /* é«çº§æ¥è¯¢æ¡ä»¶ */ |
| | | superQueryParams: '', |
| | | dates:[], |
| | | isDepartType:'', |
| | | /*readOnly:true,*/ |
| | | title:'', |
| | | visible: false, |
| | | SelectedList:[], |
| | | treeData:[], |
| | | /*disableMixinCreated: true, |
| | | queryParam: {},*/ |
| | | columns: [ |
| | | { |
| | | title: '#', |
| | | dataIndex: '', |
| | | key: 'rowIndex', |
| | | width: 60, |
| | | align: "center", |
| | | customRender: function (t, r, index) { |
| | | return parseInt(index) + 1; |
| | | } |
| | | }, { |
| | | title: 'æ¥æ', |
| | | align: 'center', |
| | | dataIndex: 'effectiveDate', |
| | | }, |
| | | { |
| | | title: '设å¤ç¼å·', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | }, |
| | | { |
| | | title: '设å¤åç§°', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | }, |
| | | { |
| | | title: 'çå¶', |
| | | align: 'center', |
| | | dataIndex: 'shiftName' |
| | | }, |
| | | { |
| | | title: 'çæ¬¡', |
| | | align: 'center', |
| | | dataIndex: 'shiftSubName' |
| | | }, |
| | | { |
| | | title: 'å¼å§æ¶é´', |
| | | align: 'center', |
| | | dataIndex: 'startDate' |
| | | }, |
| | | { |
| | | title: 'ç»ææ¶é´', |
| | | align: 'center', |
| | | dataIndex: 'endDate' |
| | | }, |
| | | { |
| | | title: 'æ¯å¦è·¨å¤©', |
| | | align: 'center', |
| | | dataIndex: 'isDaySpan', |
| | | scopedSlots: { customRender: 'isDaySpan' } |
| | | }, |
| | | { |
| | | title: 'å¼å§ä¼æ¯æ¶é´', |
| | | align: 'center', |
| | | dataIndex: 'sleepStartDate' |
| | | }, |
| | | { |
| | | title: 'ç»æä¼æ¯æ¶é´', |
| | | align: 'center', |
| | | dataIndex: 'sleepEndDate' |
| | | } |
| | | ], |
| | | sectionPData: [], |
| | | sectionData: [], |
| | | url: { |
| | | list: '/mdc/mdcDeviceCalendar/list', |
| | | loadOptions: '/sys/sysDepart/loadDepartTreeOptions', |
| | | loadProductionOptions:'/mdc/mdcProduction/loadProductionTreeOptions' |
| | | }, |
| | | value:undefined, |
| | | valueProduct:undefined |
| | | } |
| | | }, |
| | | created(){ |
| | | // this.dates = [moment().subtract('days', 0), moment().subtract('days', 0)] |
| | | // this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') |
| | | // this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | // this.queryTreeData() |
| | | this.loadData() |
| | | }, |
| | | watch: { |
| | | value(value) { |
| | | // console.log(value); |
| | | this.queryParam.departId = value |
| | | }, |
| | | valueProduct(value){ |
| | | this.queryParam.productionId = value |
| | | } |
| | | }, |
| | | methods: { |
| | | ...mapActions(['QueryDepartTree']), |
| | | queryTreeData() { |
| | | this.QueryDepartTree().then(res => { |
| | | if (res.success) { |
| | | this.isDepartType = res.result[0].value |
| | | } else { |
| | | // this.$message.warn(res.message) |
| | | this.$notification.warning({ |
| | | message:'æ¶æ¯', |
| | | description:res.message |
| | | }); |
| | | } |
| | | }).finally(() =>{ |
| | | }) |
| | | }, |
| | | getQueryParams() { |
| | | //è·åæ¥è¯¢æ¡ä»¶ |
| | | let sqp = {} |
| | | if(this.superQueryParams){ |
| | | sqp['superQueryParams']=encodeURI(this.superQueryParams) |
| | | sqp['superQueryMatchType'] = this.superQueryMatchType |
| | | } |
| | | var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters); |
| | | param.field = this.getQueryField(); |
| | | param.pageNo = this.ipagination.current; |
| | | param.pageSize = this.ipagination.pageSize; |
| | | //è·åç¨æ·å®å¶ç忰屿§ |
| | | if (this.getCustomQueryParams) { |
| | | param = this.getCustomQueryParams(param); |
| | | if(!param){ |
| | | return false; |
| | | } |
| | | } |
| | | |
| | | return filterObj(param); |
| | | }, |
| | | getQueryField() { |
| | | //TODO åæ®µæéæ§å¶ |
| | | var str = "id,"; |
| | | this.columns.forEach(function (value) { |
| | | str += "," + value.dataIndex; |
| | | }); |
| | | return str; |
| | | }, |
| | | loadData(arg) { |
| | | this.dataSource = []; |
| | | if(!this.url.list){ |
| | | this.$message.error("请设置url.list屿§!") |
| | | return |
| | | } |
| | | //å è½½æ°æ® è¥ä¼ å
¥åæ°1åå 载第ä¸é¡µçå
容 |
| | | if (arg === 1) { |
| | | this.ipagination.current = 1; |
| | | } |
| | | |
| | | var params = this.getQueryParams();//æ¥è¯¢æ¡ä»¶ |
| | | |
| | | if(!params){ |
| | | return false; |
| | | } |
| | | params.startTime = this.queryParam.startTime; |
| | | params.endTime = this.queryParam.endTime; |
| | | params.orderByName = "ascend"; |
| | | this.loading = true; |
| | | getAction(this.url.list, params).then((res) => { |
| | | if (res.success) { |
| | | // console.log(res) |
| | | //update-begin---author:zhangyafei Date:20201118 forï¼éé
ä¸åé¡µçæ°æ®å表------------ |
| | | |
| | | this.dataSource = res.result.records||res.result; |
| | | if(res.result.total) |
| | | { |
| | | this.ipagination.total = res.result.total; |
| | | }else{ |
| | | this.ipagination.total = 0; |
| | | } |
| | | //update-end---author:zhangyafei Date:20201118 forï¼éé
ä¸åé¡µçæ°æ®å表------------ |
| | | }else{ |
| | | this.$message.warning(res.message) |
| | | } |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | dateParamChange(v1, v2) { |
| | | this.queryParam.startTime = v2[0] |
| | | this.queryParam.endTime = v2[1] |
| | | }, |
| | | onSelectChange(selectedRowKeys, selectionRows) { |
| | | // this.SelectedList.push(selectedRowKeys); |
| | | this.selectedRowKeys = selectedRowKeys; |
| | | this.selectionRows = selectionRows |
| | | // this.SelectedList =[...this.SelectedList,...selectionRows]; |
| | | // console.log(this.SelectedList); |
| | | }, |
| | | handleTableChange(pagination, filters, sorter) { |
| | | // this.onClearSelected() |
| | | //å页ãæåºãçéååæ¶è§¦å |
| | | //TODO çé |
| | | if (Object.keys(sorter).length > 0) { |
| | | this.isorter.column = sorter.field; |
| | | this.isorter.order = "ascend" == sorter.order ? "asc" : "desc" |
| | | } |
| | | this.ipagination = pagination; |
| | | this.loadData(); |
| | | }, |
| | | onClearSelected() { |
| | | this.selectedRowKeys = []; |
| | | this.selectionRows = []; |
| | | }, |
| | | openPage() { |
| | | this.visible = true |
| | | this.onClearSelected() |
| | | this.dataSource = []; |
| | | // this.queryParam = { |
| | | // status: this.status |
| | | // }; |
| | | |
| | | this.loadData(); |
| | | this.initOptions(); |
| | | this.initGroupOptions() |
| | | }, |
| | | loadData(arg) { |
| | | if(!this.url.list){ |
| | | this.$message.error("请设置url.list屿§!") |
| | | return |
| | | } |
| | | //å è½½æ°æ® è¥ä¼ å
¥åæ°1åå 载第ä¸é¡µçå
容 |
| | | if (arg === 1) { |
| | | this.ipagination.current = 1; |
| | | } |
| | | var params = this.getQueryParams();//æ¥è¯¢æ¡ä»¶ |
| | | |
| | | if(!params){ |
| | | return false; |
| | | } |
| | | |
| | | this.loading = true; |
| | | getAction(this.url.list, params).then((res) => { |
| | | if (res.success) { |
| | | // console.log(res) |
| | | //update-begin---author:zhangyafei Date:20201118 forï¼éé
ä¸åé¡µçæ°æ®å表------------ |
| | | this.dataSource = res.result.records||res.result; |
| | | if(res.result.total) |
| | | { |
| | | this.ipagination.total = res.result.total; |
| | | }else{ |
| | | this.ipagination.total = 0; |
| | | } |
| | | //update-end---author:zhangyafei Date:20201118 forï¼éé
ä¸åé¡µçæ°æ®å表------------ |
| | | }else{ |
| | | // this.$message.warning(res.message) |
| | | this.$notification.warning({ |
| | | message:'æ¶æ¯', |
| | | description:res.message |
| | | }); |
| | | } |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | modalFormOk(val) { |
| | | // æ°å¢/ä¿®æ¹ æåæ¶ï¼éè½½å表 |
| | | this.loadData(); |
| | | |
| | | this.selectedRowKeys = [val.id]; |
| | | }, |
| | | searchQuery() { |
| | | this.loadData(); |
| | | this.onClearSelected() |
| | | }, |
| | | searchReset() { |
| | | // this.queryParam = { |
| | | // status: 1 |
| | | // }; |
| | | this.dates = [] |
| | | this.queryParam = {} |
| | | this.loadData(); |
| | | this.onClearSelected() |
| | | }, |
| | | close() { |
| | | this.$emit('close') |
| | | this.visible = false |
| | | }, |
| | | handleCancel() { |
| | | this.close() |
| | | }, |
| | | handleOk() { |
| | | // this.selectionRows = this.SelectedList; |
| | | // console.log(this.selectionRows); |
| | | this.$emit('sendSelectionRows', this.selectionRows) |
| | | this.close() |
| | | }, |
| | | initOptions() { |
| | | getAction(this.url.loadOptions).then(res => { |
| | | if (res.success) { |
| | | this.treeData = res.result |
| | | } else { |
| | | // this.$message.warning(res.message) |
| | | this.$notification.warning({ |
| | | message:'æ¶æ¯', |
| | | description:res.message |
| | | }); |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | |
| | | initGroupOptions() { |
| | | getAction(this.url.loadProductionOptions).then(res => { |
| | | if (res.success) { |
| | | this.sectionData = res.result |
| | | } else { |
| | | // this.$message.warning(res.message) |
| | | this.$notification.warning({ |
| | | message:'æ¶æ¯', |
| | | description:res.message |
| | | }); |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | } |
| | | </script> |
| | | <style> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .frozenRowClass { |
| | | color: #c9c9c9; |
| | | } |
| | | |
| | | .success { |
| | | color: green; |
| | | } |
| | | |
| | | .error { |
| | | color: red; |
| | | } |
| | | </style> |