123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <template>
- <div class='gcfz2'>
- <div class='table-2-input'>
- <Select
- width='200'
- tipPlace='top'
- @change='changelc'
- caption='楼层:'
- v-model='cg.floors'
- size='small'
- style='margin-right:12px'
- :selectdata='floorSelect'
- :placeholder='"选择楼层"'
- ></Select>
- <el-input
- @keyup.enter.native='changelc'
- placeholder='搜索区域'
- size='small'
- style='width:200px;margin-right:12px;'
- prefix-icon='el-icon-search'
- v-model='cg.searVal'
- ></el-input>
- <div class='picker-box'>
- <span class='picker-span'>记录日期:</span>
- <el-date-picker
- v-model='cg.dateVal'
- value-format='yyyyMMdd'
- type='daterange'
- size='mini'
- style='width:190px'
- range-separator='-'
- start-placeholder
- end-placeholder
- @change='changelc'
- ></el-date-picker>
- </div>
- </div>
- <div class='table-2-table'>
- <el-table
- :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
- v-loading='loading'
- :data='bgjlTable'
- style='width: 100%'
- border
- >
- <el-table-column label='序号' type='index' width='60' :index='indexMethod'></el-table-column>
- <el-table-column prop label='楼层' width='130'>
- <template slot-scope='{row}'>{{row.floor||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='库存变化' align='center'>
- <el-table-column prop label='新增(间)'>
- <template slot-scope='{row}'>{{row.xzkf||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='减少(间)'>
- <template slot-scope='{row}'>{{row.jskf||'--'}}</template>
- </el-table-column>
- </el-table-column>
- <el-table-column prop label='区域(㎡)'>
- <template slot-scope='{row}'>{{row.region||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='面积(㎡)'>
- <template slot-scope='{row}'>{{row.area||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='调整后库房总数(间)' width='170'>
- <template slot-scope='{row}'>{{row.afterkf||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='记录日期' width='100' :sortable='true'>
- <template slot-scope='{row}'>{{row.recordtime?formatter(row.recordtime):'--'}}</template>
- </el-table-column>
- </el-table>
- </div>
- <div class='table-2-p'>注:广场辅助用房使用信息变更时,需同步调整对应楼层辅助用房管理平面图</div>
- <div class='foot'>
- <el-pagination
- background
- layout='prev, pager, next'
- :total='total'
- :page-size='size'
- @prev-click='pageChanged'
- @next-click='pageChanged'
- @current-change='pageChanged'
- ></el-pagination>
- </div>
- </div>
- </template>
- <script>
- // import Select from '@/components/Select/Select.vue'
- import { Select } from 'meri-design'
- import { mapGetters } from 'vuex'
- import moment from 'moment'
- export default {
- data() {
- return {
- dateVal: '',
- searVal: '',
- cg: {
- dateVal: '',
- floors: '',
- searVal: ''
- }
- }
- },
- computed: {
- ...mapGetters(['floorSelect'])
- },
- props: ['bgjlTable', 'total', 'page', 'size', 'loading'],
- components: { Select },
- methods: {
- formatter(date) {
- return moment.unix(date / 1000).format('YYYY.MM.DD')
- },
- pageChanged(page) {
- this.page = page
- this.$emit('queryChange')
- },
- changelc() {
- this.$emit('changeEmit', this.cg)
- },
- indexMethod(index) {
- return (this.page - 1) * this.size + index + 1
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .gcfz2 {
- .table-2-input {
- display: flex;
- align-items: center;
- }
- .table-2-table {
- margin-top: 10px;
- }
- .table-2-p {
- height: 48px;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(31, 36, 41, 1);
- line-height: 48px;
- }
- .foot {
- height: 32px;
- display: flex;
- justify-content: flex-end;
- margin-top: 28px;
- }
- .picker-box {
- display: flex;
- align-items: center;
- background: #fff;
- padding: 0 6px;
- border: 1px solid #dcdfe6;
- border-radius: 4px;
- height: 32px;
- box-sizing: border-box;
- margin-right: 12px;
- .picker-span {
- margin-right: 6px;
- color: rgba(0, 0, 0, 0.65);
- }
- }
- }
- </style>
- <style lang="less">
- .gcfz2 {
- .picker-box {
- .el-input__inner {
- border: none;
- }
- .el-range-editor.el-input__inner {
- padding: 3px 0px;
- }
- .el-icon-date {
- display: none;
- }
- .el-range__close-icon {
- position: absolute;
- right: 0px;
- top: 2px;
- }
- .el-range-editor--mini .el-range-input {
- font-size: 14px;
- color: rgb(31, 36, 41);
- }
- }
- }
- </style>
|