pdms-oss-ui/src/views/device/storage/index.vue

<template>
  <div class="app-container">
    <h1>设备入库</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="电池" name="first">
        <div class="top-info">
          总录入电池 <span>{{dataTotle.total}}</span>，库存电池 <span>{{dataTotle.inStorage}}</span>，未入库电池 <span style="color: #D9001B;">{{dataTotle.notInStorage}}</span>
        </div>

        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
          <el-row>
            <el-col :span="5">
              <el-form-item label="设备SN">
                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="自检">
                <el-select v-model="listQuery.checkStatus">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>  
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="入库时间">
                <el-date-picker
                  v-model="listQuery.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="timeChange">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <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-row>
            <el-form-item>
              <el-button type="primary" @click="cerateHandle()">新增入库</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="gotoHandle()">批次入库</el-button>
            </el-form-item>
          </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
        >
          <el-table-column label="设备SN">
            <template slot-scope="scope">
              {{ scope.row.sn || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="入库时间">
            <template slot-scope="scope">
              {{ scope.row.add_time || '-' }}
            </template>
          </el-table-column>

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

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

          <el-table-column label="批次编号">
            <template slot-scope="scope">
              {{ scope.row.batch_num || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ scope.row.status | statusStr }}
            </template>
          </el-table-column>

          <el-table-column label="发送地">
            <template slot-scope="scope">
              {{ scope.row.received_place || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="updateTime" label="操作时间">
            <template slot-scope="scope">
              <span>{{ scope.row.add_time || '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button v-if="scope.row.check_status === 1" @click="checked(scope.row.sn, 1)" type="text">已通过</el-button>
              <el-button v-if="scope.row.check_status === 0" @click="checked(scope.row.sn, 2)" type="text">未通过</el-button>
            </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>
      </el-tab-pane>
      <el-tab-pane label="电动车" name="second">
        <div class="top-info">
          总录入电动车 <span>1864</span>，库存电动车 <span>200</span>，未入库电动车 <span style="color: #D9001B;">200</span>
        </div>

        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
          <el-row>
            <el-col :span="5">
              <el-form-item label="设备SN">
                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="自检">
                <el-select v-model="listQuery.checkStatus">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>  
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="入库时间">
                <el-date-picker
                  v-model="listQuery.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <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-row>
            <el-form-item>
              <el-button type="primary" @click="cerateHandle()">新增入库</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="gotoHandle()">批次入库</el-button>
            </el-form-item>
          </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
        >
          <el-table-column label="设备SN">
            <template slot-scope="scope">
              {{ scope.row.sn || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="入库时间">
            <template slot-scope="scope">
              {{ scope.row.updateTime || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="电池类型" prop="deptId">
            <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.batchNum || '-' }}
            </template>
          </el-table-column>

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

          <el-table-column label="发送地">
            <template slot-scope="scope">
              {{ scope.row.receivedPlace || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="updateTime" label="操作时间">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime || '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button v-if="scope.row.checkStatus === 1" @click="edit(scope.row.id)" type="text">已通过</el-button>
              <el-button v-if="scope.row.checkStatus === 0" @click="edit(scope.row.id)" type="text">未通过</el-button>
            </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>
      </el-tab-pane>
      <el-tab-pane label="配件" name="third">
        <div class="top-info">
          总录入配件 <span>1864</span>，库存配件 <span>200</span>，未入库配件 <span style="color: #D9001B;">200</span>
        </div>

        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
          <el-row>
            <el-col :span="5">
              <el-form-item label="设备SN">
                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="自检">
                <el-select v-model="listQuery.checkStatus">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>  
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="入库时间">
                <el-date-picker
                  v-model="listQuery.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <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-row>
            <el-form-item>
              <el-button type="primary" @click="cerateHandle()">新增入库</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="gotoHandle()">批次入库</el-button>
            </el-form-item>
          </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
        >
          <el-table-column label="设备SN">
            <template slot-scope="scope">
              {{ scope.row.sn || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="入库时间">
            <template slot-scope="scope">
              {{ scope.row.updateTime || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="电池类型" prop="deptId">
            <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.batchNum || '-' }}
            </template>
          </el-table-column>

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

          <el-table-column label="发送地">
            <template slot-scope="scope">
              {{ scope.row.receivedPlace || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="updateTime" label="操作时间">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime || '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button v-if="scope.row.check_status === 1" @click="edit(scope.row.id)" type="text">已通过</el-button>
              <el-button v-if="scope.row.check_status === 0" @click="edit(scope.row.id)" type="text">未通过</el-button>
            </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>
      </el-tab-pane>
    </el-tabs>  
		<Create v-if="addVisible" ref="create" @refreshDataList="getDataList"></Create>
    <Check v-if="checkVisible" ref="check" @refreshDataList="getDataList"></Check>
  </div>
</template>

<script>
import { storageInList, selfCheck } from '@/api/device/storage'
import { dataTotle } from '@/api/device/info'
import Create from '@/views/device/storage/create.vue'
import Check from '@/views/device/storage/checkModal.vue'

export default {
  components: { Create, Check },
  name: 'Storage',
  data() {
    return {
      //列表加载动画
      loading: false,
      //列表数据
      data: [],
			/**查询条件对象 */
			listQuery: {
        index: 1,
        length: 20,
        sn: '',
        orderBy: 'add_time desc',
        sort: '',
        checkStatus: null,
        recordTimeStart: '',
        recordTimeEnd: '',
        // checkStatus: []
      },
      //总条数
      total: 0,
			/**是否显示新增弹窗 */
			addVisible: false,
      //状态选项
      statusOptins: [
        {label: '全部', value: null},
        {label: '库存', value: 1},
        {label: '未入库', value: 2}
      ],
      //自检选项
      options: [
        {label: '全部', value: null},
        {label: '已通过', value: 1},
        {label: '未通过', value: 0}
      ],
      activeName: 'first',
      dataTotle: {},
      checkVisible: false,
    }
  },
  created() {
    this.getDataList()
    this.getDataTotle()
  },
  methods: {
    //时间选择
    timeChange(data) {
      this.listQuery.recordTimeStart = this.DateToStr(data[0])
      this.listQuery.recordTimeEnd = this.DateToStr(data[1])
    },
    //日期转字符串
    DateToStr(date) {
     var year = date.getFullYear();//年
     var month = date.getMonth();//月
     var day = date.getDate();//日
     var hours = date.getHours();//时
     var min = date.getMinutes();//分
     var second = date.getSeconds();//秒
     return year + "-" +
         ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
         (day > 9 ? day : ("0" + day)) + " " +
         (hours > 9 ? hours : ("0" + hours)) + ":" +
         (min > 9 ? min : ("0" + min)) + ":" +
         (second > 9 ? second : ("0" + second));
    },
    //切换tab页
    handleClick(tab) {
      this.activeName = tab.name
    },
    //数据统计
    getDataTotle() {
      dataTotle().then(res => {
        if (res.code === 200) {
          this.dataTotle = res.data
        } else {
          return this.$message.error(res.message)
        }
      })
    },
    //搜索
    searchHandle() {
      this.listQuery.index = 1
      this.getDataList()
    },
    //重置
    resetForm() {
      this.listQuery = {
        index: 1,
        length: 20,
        sn: '',
        sort: '',
        orderBy: 'add_time desc',
        checkStatus: null,
        recordTimeStart: '',
        recordTimeEnd: '',
      }
      this.getDataList()
    },
    /**请求列表数据 */
    getDataList() {
      this.loading = true
      
      storageInList(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.create.init()
			});
		},

    /**跳转批次入库页面 */
    gotoHandle() {
      this.$router.push('/device/storage/batchWarehousing')
    },

    async checked(sn, type) {
      await selfCheck({sn: sn}).then(res => {
        if(res.code === 200) {
          this.getDataList()
        }
      })
      this.checkVisible = true
      this.$nextTick(() => {
				this.$refs.check.init()
        this.$refs.check.dataForm.sn = sn
        this.$refs.check.type = type
			});
      
    }
  },
  filters: {
    statusStr(value) {
      if(value === 1) {
        return '库存'
      } else if(value === 2) {
        return '已调拨'
      } else if(value === 3) {
        return '已出库'
      } else if(value === 4) {
        return '已处置'
      } 
    }
  }
}
</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>