pdms-oss-ui/src/views/device/info/details.vue

<template>
  <div class="app-container">
    <h1><i class="el-icon-arrow-left" @click="goBack"></i>批次电池详情</h1>
		<div class="top-info">
			共计电池 <span>{{totalData}}</span>，未入库电池 <span>{{storage}}</span>，批次号: {{listQuery.batchNum}} ，录入时间: {{inTime}}
		</div>

		<el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
			<el-row>
				<el-col :span="6">
					<el-form-item label="设备IMEI">
						<el-input v-model="listQuery.imei" placeholder="请输入设备IMEI" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="设备SN">
						<el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="状态">
						<el-select v-model="listQuery.statusStr" @change="changeHandle">
              <el-option v-for="item in statusOptins" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<div style="float: right;">
						<el-form-item>
							<el-button type="primary" @click="searchHandle()">搜索</el-button>
						</el-form-item>
						<el-form-item>
							<el-button @click="resetForm()">重置</el-button>
						</el-form-item>
					</div>
				</el-col>
			</el-row>
		</el-form>

    <el-table
      v-loading="loading"
      :data="data"
      element-loading-text="Loading"
			:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
			:cell-style="{'text-align':'center'}"
      fit
      highlight-current-row
      @sort-change="sortChange"
    >
			<el-table-column label="电池SN" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.sn || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="设备号IMEI" prop="plateNumber">
        <template slot-scope="scope">
          {{ scope.row.imei || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="电池类型" prop="vin">
        <template slot-scope="scope">
          {{ scope.row.typeTitle || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="PACK厂">
        <template slot-scope="scope">
          {{ scope.row.packTitle || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="产品规格">
        <template slot-scope="scope">
          {{ scope.row.specTitle || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="操作人">
        <template slot-scope="scope">
          {{ scope.row.operator || '-' }}
        </template>
      </el-table-column>

			<el-table-column label="产品拓展">
        <template slot-scope="scope">
          {{ scope.row.expandTitle || '-' }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.statusTitle || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="发货时间">
        <template slot-scope="scope">
          <span>{{ scope.row.deliverTime || '-' }}</span>
        </template>
      </el-table-column>
    </el-table>

		<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
			@current-change="pageCurrentChangeHandle">
		</el-pagination>
  </div>
</template>

<script>
import { getBatteryDetail } from '@/api/device/info'
import AddOrUpdate from '@/views/device/info/info-add-or-update.vue'
import UpLoad from '@/views/device/info/up-load.vue'

export default {
  name: 'InfoDetails',
  components: { AddOrUpdate, UpLoad },
  data() {
    return {
			/**录入时间 */
			inTime: '',
      //总条数
      total: 0,
      //列表加载动画
      loading: false,
      //列表数据
      data: [],
			/**查询条件对象 */
			listQuery: {
        index: 1,
        length: 20,
        importance: undefined,
        batchNum: '',/**批次Id */
        imei: '',
        status: [],
        sn: '',
        sort: '',
        statusStr: null,
        operateID: null
      },
      //状态选项
      statusOptins: [
        {label: '全部', value: null},
        {label: '已入库', value: 1},
        {label: '未入库', value: 0},
        {label: '已调拨', value: 2},
        {label: '已出库', value: 3},
        {label: '已处置', value: 4},
      ],
      //电池总量
      totalData: 0,
      //已入库电池
      storage: 0,
    }
  },
  created() {
    if (this.$route.query.operateId !== undefined) {
      this.listQuery.operateID = this.$route.query.operateId
    }
    if (this.$route.query.batchId !== undefined) {
      this.listQuery.batchNum = this.$route.query.batchId
    }
		if (this.$route.query.inTime !== undefined) {
      this.inTime = this.$route.query.inTime
    }
    if (this.$route.query.total !== undefined) {
      this.totalData = this.$route.query.total
    }
		if (this.$route.query.storage !== undefined) {
      this.storage = this.$route.query.storage
    }
    
    this.getDataList()
  },
  methods: {
    //选择状态
    changeHandle() {
      this.listQuery.status = []
      this.listQuery.status.push(this.listQuery.statusStr)
    },
    //搜索
    searchHandle() {
      this.listQuery.index = 1
      this.getDataList()
    },
    //重置
    resetForm() {
      this.listQuery = {
        index: 1,
        length: 20,
        importance: undefined,
        batchNum: this.listQuery.batchNum,/**批次Id */
        imei: '',
        status: null,
        sn: '',
        sort: ''
      }
      this.getDataList()
    },
		/**获取列表数据 */
		getDataList() {
      this.loading = true
      getBatteryDetail(this.listQuery).then(response => {
        if (response.code === 200) {
          this.data = response.data
          this.total = response.total
          this.loading = false
        } else {
          this.loading = false
          return this.$message.error(response.message)
        }
      })
		},

		// 分页, 每页条数
    pageSizeChangeHandle (val) {
      this.listQuery.index = 1
      this.listQuery.length = val
      this.getDataList()
    },
    // 分页, 当前页
    pageCurrentChangeHandle (val) {
      this.listQuery.index = val
      this.getDataList()
    },

		//打开新增弹窗
		cerateHandle() {
			this.addVisible = true
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init()
			});
		},

    /**打开上传弹窗 */
    upLoadHandle() {
      this.upVisible = true
      this.$nextTick(() => {
				this.$refs.upLoad.init()
			});
    },

    /**查看详情 */
    detailHandle(id) {
      this.$router.push({
        path: '/device/info/details',
        query: {
          batchId: id
        }
      })
    },
    //返回上一页
    goBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },

		dataFormSubmitHandle() {},

    search() {
      this.page.param.index = 1
      // this.fetchData()
    },
    fetchData() {
      this.page.loading = false
      postJson('/api/v1/carinfo/pageQuery', this.page.param).then(response => {
        if (response.code === 200) {
          this.page.data = response.data
          this.page.total = response.total
          this.page.loading = false
        }
      })
    },
    sortChange(data) {
      this.page.param.index = 1
      this.page.param.sort = getSort(data)
      this.fetchData()
    },
    add() {
      this.$router.push('/car/info/add')
    },
    edit(val) {
      this.$router.push({ path: '/car/info/add', query: { id: val, pageIndex: this.page.param.index, word: this.page.param.title }})
    },
    del(val) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postJson('/api/v1/carinfo/delete', { id: val }).then(response => {
          if (response.code === 200) {
            this.fetchData()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.top-info {
		height: 53px;
		line-height: 53px;
		width: 100%;
		background-color: rgba(242, 242, 242, 1);
		box-shadow: none;
		text-align: left;
		color: #7F7F7F;
		font-size: 13px;
		padding-left: 20px;
		margin-bottom: 20px;
		>span {
			color: #0000FF;
			font-size: 13px;
		}
	}
</style>