FE-V2-PC/src/views/studentViews/chemicalManagement/studentOutboundRecord/index.vue

<!--出库记录-->
<template>
  <div class="app-container OutboundRecord">
    <advanced-search :searchData="searchData"></advanced-search>
    <div class="OutboundRecord-min">
      <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
        <el-table-column label="出库时间" align="center" prop="outTime" width="183"/>
        <el-table-column label="化学品编号" align="center" prop="joinNum" width="130"/>
        <el-table-column label="化学品名" align="center" prop="chemicalName" width="180"/>
        <el-table-column label="CAS号" align="center" prop="casNum" width="180"/>
        <el-table-column label="分类" align="center" prop="classifyName" width="181"/>
        <el-table-column label="属性" align="center" prop="classifyAttribute" width="220" show-overflow-tooltip/>
        <el-table-column label="形态" align="center" prop="chemicalShape" width="120"/>
        <el-table-column label="容量规格" align="center" prop="chemicalAmountUnit" width="121"/>
        <el-table-column label="容器规格" align="center" prop="tareUnit" width="121"/>
        <el-table-column label="标签类型" align="center" prop="labelType" width="121"/>
        <el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>
        <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
        <el-table-column label="化学品柜位置" align="center" prop="posi" width="280" show-overflow-tooltip/>
        <el-table-column label="出库净重" align="center" prop="outUsages" width="120"/>
        <el-table-column label="出库方式" align="center" prop="stockStatus" width="120"/>
        <el-table-column label="操作人" align="center" prop="operator" width="220" show-overflow-tooltip/>
        <el-table-column label="身份验证" align="center" prop="verify" width="220" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.verify?scope.row.verify:'无'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="operator" width="114">
          <template slot-scope="scope">
            <div class="button-box">
              <p class="table-min-button"
                 style="margin:0!important;"
                 @click="lockVideo(scope.row)"
              >开关锁视频</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;height:32px;margin-top:15px;">
        <!--<p style="flex:4;"></p>-->
        <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
          <i class="el-icon-warning" style="color:#0183FA;"></i>
          已选择 {{selectedNum}} 项
        </p>
        <div style="flex:5;">
          <pagination :page-sizes="[20, 30, 40, 50]"
            v-show="total>0"
            :total="total"
            style="margin:0;"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <el-dialog :title="videoTitle" :visible.sync="videoType" v-if="videoType"
               width="840px" append-to-body id="operationRecord-dialog-box">
      <video style="width:800px;height:450px;" controls="" autoplay="" name="media" :poster="videoCover">
        <source :src="videoData.url" type="video/mp4">
      </video>
    </el-dialog>
  </div>
</template>

<script>
  import { classifyList,getNoauthList } from "@/api/medicUniversity-3_1/index";
  import { getListOut } from "@/api/studentApi/chemicalManagement/index";
  import { listDepartments } from "@/api/system/dept";
  import advancedSearch from "@/components/ZDcomponents/advancedSearch.vue"
  export default {
    name: "OutboundRecord",
    components: {
      advancedSearch
    },
    data() {
      return {
        searchData:{
          searchList:[//搜索数组
            {
              name:"关键字",//描述名称
              key:"searchValue",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"化学品名/别名/CAS号/编号/实验室",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"1",//类型 1.input 2.select 3.TimePicker
              universal:'20',//通用参数 input时为最大长度 //TimePicker时可不传
              labelWidth:'68px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'260',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"化学品分类",//描述名称
              key:"chemicalClassify",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择化学品分类",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"属性",//描述名称
              key:"classifyAttribute",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择属性",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"学院",//描述名称
              key:"deptId",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择学院",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"化学品柜",//描述名称
              key:"cabinetId",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择化学品柜",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"出库方式",//描述名称
              key:"status",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择出库方式",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[ //通用参数 select时为列表数据 //TimePicker时可不传
                {label:"用结",value:"2"},{label:"作废",value:"3"}
              ],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"标签类型",//描述名称
              key:"labelType",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择标签类型",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[ //通用参数 select时为列表数据 //TimePicker时可不传
                {label:"RFID",value:"1"},{label:"二维码",value:"2"}
              ],
              labelWidth:'68px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'260',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"出库时间",//描述名称
              key:"timeOne",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择出库时间",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"3",//类型 1.input 2.select 3.TimePicker
              labelWidth:'82px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'260',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
          ],
        },
        // 搜索实际发送数据
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        //数据数量
        total:0,
        //数据数组
        tableList:[],
        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
        selectedNum:0,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //视频操作
        videoType:false,
        videoData:{},
        videoTitle:"",
      };
    },
    created() {

    },
    mounted(){
      this.classifyList();
      this.listDepartments();
      this.getNoauthList();
      this.getHxpClassifyattribute();
      this.getList();
    },
    methods: {
      //视频按钮
      lockVideo(row){
        if(!row.closeLockVideo){
          this.msgError('开关锁视频异常无法观看');
          return
        }
        let obj = {
          url:row.closeLockVideo
        }
        this.$set(this,'videoTitle','开关锁视频');
        this.$set(this,'videoData',obj);
        this.videoType = true;
      },
      //获取属性列表
      getHxpClassifyattribute(){
        this.getDicts("hxp_classifyattribute").then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let obj ={
              value:response.data[i].dictValue,
              label:response.data[i].dictLabel,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[2],'universal',list);
        })
      },
      //获取化学品柜列表
      getNoauthList(){
        getNoauthList().then(response => {
          let list = [];
          for(let i=0;i<response.rows.length;i++){
            let obj ={
              value:response.rows[i].id,
              label:response.rows[i].cabinetName,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[4],'universal',list);
        });
      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let obj ={
              value:response.data[i].deptId,
              label:response.data[i].deptName,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[3],'universal',list);

        });
      },
      //获取化学品分类列表
      classifyList(){
        classifyList().then(response => {
          let list = [];
          for(let i=0;i<response.rows.length;i++){
            let obj ={
              value:response.rows[i].id,
              label:response.rows[i].classifyName,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[1],'universal',list);
        });
      },
      getList(){
        getListOut(this.queryParams).then(response => {
          this.total = response.total;
          this.tableList = response.rows;
        });
      },
      //父组件必要此方法用于接收参数
      searchClick(type,data){
        let self = this;
        if(type == 1){ //type  1.查询
          this.queryParams = JSON.parse(JSON.stringify(data));
          if(data.timeOne){
            this.queryParams.outTimeBegin = data.timeOne[0];
            this.queryParams.outTimeEnd = data.timeOne[1];
            delete this.queryParams.timeOne
          }else{
            delete this.queryParams.timeOne
          }
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 20;
          this.getList();
        }else if(type == 2){ //type  1.重置
          this.queryParams = {
            pageNum : 1,
            pageSize:20,
          };
          this.getList();
        }else if(type == 'export'){ //type  其他 自定义按钮
          let currentDate = this.getCurrentTime()
          if(data == 1){
            //导出全部
            self.$confirm(`确认导出全部数据?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              self.download('/chemical/hxpStock/exportOut/', {...self.queryParams}, '出库记录-'+currentDate+'.xlsx')
            }).catch(() => {})
          }else if(data == 2){
            //导出选中
            if(self.ids.length>0) {
              self.$confirm(`确认导出选中数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(async () => {
                let ids = self.ids.join(',');
                let obj = {
                  ids :ids
                }
                self.download(`/chemical/hxpStock/exportOut/`,obj, '出库记录-'+currentDate+'.xlsx')
              }).catch(() => {})
            }else {
              this.msgError('请选择要导出的数据')
            }
          }
        }
      },
      /** 当前时间 */
      getCurrentTime () {
        const yy = new Date().getFullYear()
        const mm = new Date().getMonth() + 1
        const dd = new Date().getDate()
        const hh = new Date().getHours()
        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        return yy + '-' + mm + '-' + dd
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
    }
  }
</script>

<style scoped lang="scss">
  .OutboundRecord{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    padding-top:20px!important;
    p{
      margin:0;
      padding:0;
    }
    .OutboundRecord-min{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden!important;
      padding:0 20px 20px!important;

    }
  }
</style>