imcs_yj_fe/imcs-ui/src/views/zuihou/lineSideLibrary/lineSideMgr/Index.vue

<template>
  <div class="app-container">
  	<el-row :gutter="20">
  		<!-- 左结构-Tree结构  -->
		  <el-col :span="5">
		  	<el-input
				  :placeholder='$t("lineSide.tips.treeTips")'
				  v-model="filterText">
				</el-input>
		  	<el-tree
				  :data="treeData"
				  show-checkbox
				  :highlight-current="true"
				  :default-expand-all="true"
				  :check-strictly="true"
				  :check-on-click-node="true"
				  node-key="id"
				  :props="defaultProps"
				  ref="tree"
				  :filter-node-method="filterNode"
				  @check="treeCheck"
				>
				</el-tree>
		  </el-col>
		  <!-- 右结构-主要内容 -->
		  <el-col :span="19">
				<!-- 搜索模块 -->
		    <div class="filter-container">
		    	<span>
		    		<span>{{$t("lineSide.searchForm.productName")}}：</span>
		    		<el-input v-model="queryParams.model.name" :placeholder='$t("common.pleaseEnter")' style="width: 150px;" size="medium"/>
		    	</span>
		    	<span style="margin-left: 15px;">
		    		<span>{{$t("lineSide.searchForm.wareType")}}：</span>
		    		<el-select v-model="queryParams.model.storgeTypeId" :placeholder='$t("common.pleaseSelect")' size="medium" style="width: 150px;">
		        	<el-option
					      v-for="item in wareTypeList"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
		      	</el-select>
		    	</span>
		      <span style="margin-left: 15px;">
			      <el-button plain type="primary" icon="el-icon-search" size="medium" @click="search">
			        {{ $t("common.search") }}
			      </el-button>
			      <el-button plain type="warning" icon="el-icon-refresh" size="medium" @click="reset">
			        {{ $t("common.reset") }}
			      </el-button>
		      </span>
		    </div>
		    <!-- 功能按钮 -->
		    <el-row class="filter-container">
		    	<el-col>
			      <el-button type="primary" icon="el-icon-download" size="medium" v-has-permission="['lineSide:stockin']" @click="add">{{ $t("lineSide.buttons.warehousing") }}</el-button>
			      <el-button type="success" icon="el-icon-download" size="medium" v-has-permission="['lineSide:batchStockin']" @click="editList">{{ $t("lineSide.buttons.warehousingList") }}</el-button>
			      <el-button type="success" icon="el-icon-upload2" size="medium" v-has-permission="['lineSide:taskStockin']" @click="editOne">{{ $t("lineSide.buttons.rewuWarehousing") }}</el-button>
			      <el-button type="success" icon="el-icon-unlock" size="medium" v-has-permission="['lineSide:unlockStorge']" @click="unlockProd">{{ $t("lineSide.buttons.unlock") }}</el-button>
			      <el-button type="danger" icon="el-icon-lock" size="medium" v-has-permission="['lineSide:lockStorge']" @click="lockingProd">{{ $t("lineSide.buttons.locking") }}</el-button>
		    	</el-col>
		    </el-row>
				<!-- 列表数据 -->
		    <el-table
		      :key="tableKey"
		      ref="table"
		      v-loading="loading"
		      :data="tableData.records"
		      border
		      fit
		      row-key="id"
		      style="width: 100%;"
		      highlight-current-row
    			@current-change="handleCurrentChange"
		    >
		    	<el-table-column :label='$t("common.serialNo")' width="55px" align="center">
			      <template slot-scope="scope">
			        <div>
			          {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
			        </div>
			      </template>
		      </el-table-column>
		      <el-table-column prop="no" :label='$t("lineSide.table.side.no")' :show-overflow-tooltip="true" width="200px"></el-table-column>
		      <el-table-column prop="name" :label='$t("lineSide.table.side.name")' :show-overflow-tooltip="true" width="150px"></el-table-column>
		      <el-table-column prop="storgeTypeDesc" :label='$t("lineSide.table.side.storgeTypeDesc")' :show-overflow-tooltip="true"></el-table-column>
		      <el-table-column prop="lockStatus" :label='$t("lineSide.table.side.lockStatus")' align="center" width="90px">
		      	<template slot-scope="{ row }">
		          <el-tag :type="row.lockStatus=='0' ? 'success' : 'danger'">
		          	{{ row.lockStatus=='0' ? $t("common.yes") : $t("common.no") }}
		          </el-tag>
		        </template>
		      </el-table-column>
		      <el-table-column prop="storgeNum" :label='$t("lineSide.table.side.storgeNum")' :show-overflow-tooltip="true"></el-table-column>
		    </el-table>
		    <!-- 【分页】组件 -->
		    <pagination
		      v-show="tableData.total > 0"
		      :limit.sync="queryParams.size"
		      :page.sync="queryParams.current"
		      :total="Number(tableData.total)"
		      @pagination="fetch"
		    />

		    <!-- 【库位产品】组件 -->
		    <Warehouse-product
		      ref="product"
		      :dialog-visible="dialogPro.isVisible"
		      :title="dialogPro.title"
		      @close="editProClose"
		      @success="editProSuccess"
		    />
		  </el-col>
		</el-row>

    <tenant-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      @close="editClose"
      @success="editSuccess"
    />
    <edit-list
      ref="editList"
      :dialog-visible="dialogList.isVisible"
      :title="dialogList.title"
      @close="editListClose"
      @success="editSuccess"
    />
    <tenant-view
      ref="view"
      :dialog-visible="tenantViewVisible"
      @close="viewClose"
    />
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :title='$t("common.preview")'
      width="80%"
      top="50px"
      :visible.sync="preview.isVisible"
    >
      <el-scrollbar>
        <div v-html="preview.context" />
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
	// 库位【分页】组件
	import Pagination from "@/components/Pagination"
	// 【库位产品】组件
	import WarehouseProduct from "./components/warehouseProduct/Index"
	import TenantEdit from "./components/Edit"
	import EditList from "./components/EditList"
	import TenantView from "./components/View"
	// 【仓库类型管理】-API
	import warehouseTypeMgrApi from "@/api/modelingCenter/warehouseTypeMgr"
	// 【货架管理】-API
	import goodsShelvesMgrApi from "@/api/modelingCenter/goodsShelvesMgr"
	// 【边线库管理】-API
	import lineSideMgrApi from "@/api/lineSideLibrary/lineSideMgr"
	// 【库位管理】-API
	import locationMgrApi from "@/api/lineSideLibrary/locationMgr"
	import elDragDialog from '@/directive/el-drag-dialog'
	import { downloadFile, initEnums, initDicts, initQueryParams } from '@/utils/commons'
	import axios from 'axios'
	export default {
	  name: "LineSideMgr",
	  directives: { elDragDialog },
	  components: { Pagination, WarehouseProduct, TenantEdit, EditList, TenantView },
	  props: {
	  },
	  data () {
	    return {
	    	wareTypeList: [], // 库位类型下拉数据
	    	audioStatus: [],
	    	dialogPro: {
	        isVisible: false,
	        title: ""
	      },
	      dialog: {
	        isVisible: false,
	        title: ""
	      },
	      dialogList: {
	        isVisible: false,
	        title: ""
	      },
	      preview: {
	        isVisible: false,
	        context: ''
	      },
	      tenantViewVisible: false,
	      tableKey: 0,
	      queryParams: initQueryParams({}),
	      selection: [],
	      loading: false,
	      tableData: {
	        total: 0
	      },
	      currentRow: null, // 当前选中的行
	      dicts: {
          NATION: {}
        },
	      enums: {
	        TenantTypeEnum: {},
	        TenantStatusEnum: {}
	      },
	      currNode: {}, //当前选择的树数据
	      filterText: '',
	      treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
	    }
	  },
	  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 【库位类型】
	  	this.getWareType()
	  	// 加载【字典】
	  	initDicts(['NATION'], this.dicts)	  	
	  	// 加载Tree数据
	  	this.getTreeData()
		// 加载列表数据
	  	//this.fetch()
		},
	  computed: {
	    currentUser () {
	      return this.$store.state.account.user
	    },
	    nationList() {
        return convertEnum(this.dicts.NATION)
      }
	  },
	  mounted () {

	  },
	  methods: {
	  	// 【解锁库位】按钮-事件
     	unlockProd(){
     		if (!this.currentRow) {
		        this.$message({
		          message: this.$t("tips.unSelected"),
		          type: "warning"
		        })
		        return
		    }
	    	// 调用API-函数
	    	this.locked({id: this.currentRow.id, lockStatus: '1'}, this.$t("tips.unlockSuccess"))
     	},
     	// 【锁定库位】按钮-事件
     	lockingProd(){
     		if (!this.currentRow) {
		        this.$message({
		          message: this.$t("tips.unSelected"),
		          type: "warning"
		        })
		        return
		    }
	    	// 调用API-函数
	    	this.locked({id: this.currentRow.id, lockStatus: '0'}, this.$t("tips.lockSuccess"))
     	},
     	// 调用【解锁和锁定】的API-函数
     	locked(obj, msg){
     		locationMgrApi.update(obj).then(res => {
     			res = res.data
     			if (res.isSuccess) {
            this.isVisible = false
            this.$message({
              message: msg,
              type: 'success'
            })
            // 重新加载数据
            this.search()
		      }
     		})
     	},
	  	// 【库位类型】
	  	getWareType(){
	  		warehouseTypeMgrApi.getList({}).then(res => {
	  			res = res.data
	  			if (res.isSuccess) {
	          this.wareTypeList = res.data
	        }
	  		})
	  	},
	  	// table的当前行变化-事件
	  	handleCurrentChange(val){
	  		this.currentRow = val
	  		// 如果值存在
	  		if(val){
	  			// 给下面的列表赋值
		  		this.$refs.product.storgeObj = val
		  		// 加载下面的列表
		  		this.$refs.product.fetch()
	  		}
	  	},
	  	// Tree搜索
	  	filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
     	},
     	// Tree的CheckBox选中事件
     	treeCheck(data, checkData){
     		// console.log("data == ", data)
     		// console.log("checkData == ", checkData)
     		// 当前选中的Node
     		this.currNode = data
     		// 永远只选择一个CheckBox节点
	  		this.$refs.tree.setCheckedKeys([data.id])
	  		// 加载列表数据
	  	  this.fetch()
     	},
     	// 【库位产品-关闭】事件
     	editProClose () {
	      this.dialogPro.isVisible = false
	    },
	    // 【库位产品-确认】事件
     	editProSuccess(data){
     	},
	    viewClose () {
	      this.tenantViewVisible = false
	    },
	    editClose () {
	      this.dialog.isVisible = false
	    },
	    editListClose () {
	      this.dialogList.isVisible = false
	    },
	    editSuccess () {
	      this.search()
	    },
	    onSelectChange (selection) {
	      this.selection = selection
	    },
	    search () {
	      this.fetch({
	        ...this.queryParams
	      })
	    },
	    reset () {
	      this.queryParams = initQueryParams({})
	      this.$refs.table.clearSort()
	      this.$refs.table.clearFilter()
	      this.search()
	    },
	    add () {
	      this.$refs.edit.type = "add"
	      this.$refs.edit.setTenant(this.currentRow, this.dicts)
	      this.dialog.title = this.$t("lineSide.common.inWare")
	      this.dialog.isVisible = true
	    },
	    singleDelete (row) {
	      this.$refs.table.clearSelection()
	      this.$refs.table.toggleRowSelection(row, true)
	      this.batchDelete()
	    },
	    batchDelete () {
	      if (!this.selection.length) {
	        this.$message({
	          message: this.$t("tips.noDataSelected"),
	          type: "warning"
	        })
	        return
	      }

	      const readonlyIndex = this.selection.findIndex(item => item.readonly)

	      if (readonlyIndex > -1) {
	        this.$message({
	          message: this.$t("tips.systemData"),
	          type: "warning"
	        })
	        return
	      }

	      this.$confirm(this.$t("lineSide.tips.delTips"), this.$t("common.tips"), {
	      	distinguishCancelAndClose: true,
	        confirmButtonText: this.$t("common.confirm"),
	        cancelButtonText: this.$t("common.cancel"),
	        type: "warning"
	      }).then(() => {
	      	const ids = []
		      this.selection.forEach(item => {
		        ids.push(item.id)
		      })
		      this.delete(ids)
	      }).catch(() => {})
	    },
	    clearSelections () {
	      this.$refs.table.clearSelection()
	    },
	    delete (ids) {
	      lineSideMgrApi.remove({ ids: ids }).then(response => {
	        const res = response.data
	        if (res.isSuccess) {
	          this.$message({
	            message: this.$t("tips.deleteSuccess"),
	            type: "success"
	          })
	          this.search()
	          // 清理已经删除的数据
	          this.$refs.table.clearSelection()
	        }
	      })
	    },
	    view (row) {
	      this.$refs.view.setTenant(row)
	      this.tenantViewVisible = true
	    },
	    // 【修改】表头上Btn-事件
	    editOne() {
	    	if (!this.selection.length) {
	        this.$message({
	          message: this.$t("tips.unSelected"),
	          type: "warning"
	        })
	        return
	      }
	    	if (this.selection.length > 1) {
	        this.$message({
	          message: this.$t("tips.mustOne"),
	          type: "warning"
	        })
	        return
	      }
	    	this.edit(this.selection[0]);
	    },
	    edit (row) {
	      this.$refs.edit.setTenant(row, this.currNode, this.dicts)
	      this.$refs.edit.type = "edit"
				// 【库位】赋值
  			this.$refs.edit.tenant.name2 = this.currNode.name
	      this.dialog.title = this.$t("lineSide.buttons.warehousing")
	      this.dialog.isVisible = true
	    },
	    // 【批量入库】
	    editList(){
	    	/*if (!this.currentRow) {
	        this.$message({
	          message: this.$t("tips.unSelected"),
	          type: "warning"
	        })
	        return
	      }*/
	    	// this.$refs.editList.setTenant(this.currentRow, this.currNode, this.dicts)
	      this.$refs.editList.type = "add"
	      this.dialogList.title = this.$t("lineSide.buttons.warehousingList")
	      this.dialogList.isVisible = true
	    },
	    fetch (params = {}) {
	      this.loading = true
	      if (this.queryParams.timeRange) {
	        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
	        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
	      }

	      this.queryParams.current = params.current ? params.current : this.queryParams.current
	      this.queryParams.size = params.size ? params.size : this.queryParams.size

	      // Tree的数据过滤
	      if(this.currNode){
	      	this.queryParams.model.shelvesId = this.currNode.id
	      }
	      locationMgrApi.page(this.queryParams).then(response => {
	        const res = response.data
	        if (res.isSuccess) {
	        	// 清除以前的table选中的数据
	        	this.$refs.table.setCurrentRow()
	          this.tableData = res.data
	          // 如果有值
	          if(this.tableData.records.length > 0){
	          	// 默认设置第一条为当前选择的数据
	          	this.$refs.table.setCurrentRow(this.tableData.records[0])
			  		}
	        }
	        // eslint-disable-next-line no-return-assign
	      }).finally(() => this.loading = false)

	    },
	    // 加载Tree数据
	    getTreeData(){
	    	// this.treeData = [{"children":[{"children":[{"children":[],"factoryId":"1314917506283995136","name":"测试001","id":"1315233786719371264","lev":"3","parentId":"1315107643102068736"},{"children":[{"children":[],"factoryId":"1314917506283995136","name":"盒子10010","id":"1315534899016368128","lev":"4","parentId":"1315531557968019456"},{"children":[],"factoryId":"1314917506283995136","name":"盒子边缘","id":"1315534970483113984","lev":"4","parentId":"1315531557968019456"},{"children":[],"factoryId":"1314917506283995136","name":"摸彩盒子","id":"1315537257989406720","lev":"4","parentId":"1315531557968019456"},{"children":[{"children":[],"factoryId":"1314917506283995136","name":"盒子10010","id":"1315577706552754176","lev":"5","parentId":"1315537310871191552"},{"children":[],"factoryId":"1314917506283995136","name":"资源1000号","id":"1315577965492305920","lev":"5","parentId":"1315537310871191552"},{"children":[],"factoryId":"1314917506283995136","name":"资源20000号","id":"1315578031858778112","lev":"5","parentId":"1315537310871191552"},{"children":[],"factoryId":"1314917506283995136","name":"资源888","id":"1315587186984222720","lev":"5","parentId":"1315537310871191552"}],"factoryId":"1314917506283995136","name":"龙须盒子","id":"1315537310871191552","lev":"4","parentId":"1315531557968019456"}],"factoryId":"1314917506283995136","name":"测试盒子2000","id":"1315531557968019456","lev":"3","parentId":"1315107643102068736"}],"factoryId":"1314917506283995136","name":"坦克炮管车间","id":"1315107643102068736","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"坦克履带车间","id":"1315126180059283456","lev":"2","parentId":"1314917506283995136"},{"children":[{"children":[],"factoryId":"1314917506283995136","name":"1323","id":"1315244115171999744","lev":"3","parentId":"1315126690388639744"},{"children":[],"factoryId":"1314917506283995136","name":"范文芳","id":"1315244167751794688","lev":"3","parentId":"1315126690388639744"},{"children":[],"factoryId":"1314917506283995136","name":"任务二千万","id":"1315244222521016320","lev":"3","parentId":"1315126690388639744"},{"children":[],"factoryId":"1314917506283995136","name":"产线10020","id":"1315520376557535232","lev":"3","parentId":"1315126690388639744"}],"factoryId":"1314917506283995136","name":"测试车间","id":"1315126690388639744","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"22222","id":"1315153838193246208","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"3333","id":"1315153862646038528","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"444","id":"1315154005038465024","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"55555","id":"1315154030778908672","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"888888","id":"1315154111124996096","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"44特瑞特","id":"1315218536334884864","lev":"2","parentId":"1314917506283995136"},{"children":[],"factoryId":"1314917506283995136","name":"777","id":"1315294039775379456","lev":"2","parentId":"1314917506283995136"}],"factoryId":"1314917506283995136","name":"测试数据工厂","id":"1314917506283995136","lev":"1","parentId":"0"}]
	    	goodsShelvesMgrApi.getTreeList({}).then(res => {
	    		res = res.data
	    		if(res.isSuccess){
	    			this.treeData = res.data
					if(res.data.length > 0){
                        let obj = res.data[0].children[0]											
						this.treeCheck(obj, {})					
					}
	    		}
	    	})
	    },
	    cellClick (row, column) {
	      if (column['columnKey'] === "operation") {
	        return
	      }
	      let flag = false
	      this.selection.forEach((item) => {
	        if (item.id === row.id) {
	          flag = true
	          this.$refs.table.toggleRowSelection(row)
	        }
	      })

	      if (!flag) {
	        this.$refs.table.toggleRowSelection(row, true)
	      }
	    }
	  }
	}
</script>
<style lang="scss" scoped></style>