lab-ops-ui-web/src/views/goodsManagement/warehouseList.vue

<template>
  <basic-container style="max-height: 800px; overflow: hidden">
    <avue-crud :option="option" :table-loading="loading" :data="data" :search.sync="searchForm" :page.sync="page"
      ref="crud" v-model="form" :permission="permissionList"
      @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
      @size-change="sizeChange" @refresh-change="refreshChange" @selection-change="selectionChange" @on-load="onLoad">
      <template slot-scope="{row}" slot="produceTime">
        {{ row.produceTime.substring(0, 10) }}
      </template>
      <template slot-scope="{ row }" slot="status">
        <el-tag size="small" :type="row.status == 0
          ? 'warning'
          : row.status == 1
            ? ''
            : ''
          ">
          {{
            row.status == 0
              ? "待确认"
              : row.status == 1
                ? "已确认"
                : ""
          }}
        </el-tag>
      </template>
      <template slot-scope="{ row }" slot="runStatus">
        <el-tag size="small" :type="row.runStatus == 0
          ? 'info'
          : row.runStatus == 1
            ? 'success'
            : row.runStatus == 2
              ? 'danger'
              : ''
          ">
          {{
            row.runStatus == 0
              ? "关机"
              : row.runStatus == 1
                ? "运行中"
                : row.runStatus == 2
                  ? '报警中'
                  : ""
          }}
        </el-tag>
      </template>
      <template slot-scope="scope" slot="menuLeft">
        <el-button  size="small" @click="handlleAdd" type="primary">新 增</el-button>
        <el-button  size="small" @click="handlleDeletes" type="danger">删 除</el-button>
      </template>
      <template slot-scope="{ row }" slot="menu">
        <el-button v-show="permission.deviceView" @click="handleView(row)">查看</el-button>
        <el-button v-show="permission.deviceEdit" @click="handleEdit(row)">编辑</el-button>
        <el-button v-show="permission.deviceDelete" @click="handleDelete(row)">删除</el-button>
      </template>
    </avue-crud>
    <el-dialog :title="addTitle" :visible.sync="addVisible" :append-to-body="true" width="50%" :close-on-click-modal="false">
      <el-form ref="form" :model="addForm" :rules="addRules" label-width="80px" label-position="left">
        <el-form-item label="仓库编码" prop="code">
          <el-input placeholder="请输入仓库编码" v-model="addForm.code" :disabled="addTitle == '查看仓库'"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" prop="name">
          <el-input placeholder="请输入仓库名称" v-model="addForm.name" style="width: 98%;" :disabled="addTitle == '查看仓库'"></el-input>
        </el-form-item>
        <el-form-item label="仓库地址" prop="address">
          <el-input placeholder="请输入仓库地址" v-model="addForm.address" style="width: 98%;" :disabled="addTitle == '查看仓库'"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
        <el-button v-show="addTitle != '查看仓库'" type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import {getList,addWare,getDetail,editWare,deleteWare} from '@/api/goodsManagement/warehouse'
export default {
  data(){
    return {
      form:{},
      searchForm:{},
      loading:true,
      addVisible:false,
      addTitle:'仓库新增',
      addRules:{
        code: { required: true, message: '请输入仓库编码', trigger: 'blur' },
        name: { required: true, message: '请输入仓库名称', trigger: 'blur' },
        address:{required:true,message:'请输入仓库地址',trigger:'blur'},
      },
      addForm:{},
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        dialogType: "dialog",
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menuWidth: 400,
        selection: true,
        searchEnter:true,
        gridBtn:false,
        column: [
          {
            label: "仓库编码",
            labelWidth: 120,
            prop: "code",
            search: true,
            overHidden: true,
          },
          {
            label: "仓库名称",
            labelWidth: 120,
            prop: "name",
            overHidden: true,
          },
          {
            label: "仓库地址",
            labelWidth: 120,
            prop: "address",
            overHidden: true,
          },
        ],
      },
      page:{
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      data:[],
      selectionList:[]
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
  mounted(){

  },
  methods:{
    // 多选数据
    selectionChange(list){
      this.selectionList = list
    },
    searchChange(params, done){
      this.page.currentPage = 1;
      this.onLoad();
      done();
    },
    searchReset(params, done) {
      this.onLoad();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad()
    },
    sizeChange(pageSize){
      this.page.pageSize = pageSize;
      this.onLoad()
    },
    // 查询数据
    onLoad(){
      console.log('searchForm',this.searchForm)
      this.loading = true
      let query = {
        current:this.page.currentPage,
        size:this.page.pageSize,
        ...this.searchForm
      }
      getList(query).then(res =>{
        this.data = res.data.data.records
        this.page.total = res.data.data.total
        this.loading = false
      })
    },
    // 点击新增按钮
    handlleAdd(){
      this.addForm = {}
      this.addVisible = true
    },
    // 关闭弹窗
    handleClose(){
      this.addVisible = false
      this.addForm = {}
      this.$refs['form'].resetFields()
    },
    // 点击弹窗确定按钮
    handleConfirm(){
      this.$refs['form'].validate((valid) => {
        if(valid){
          if(this.addForm.id){
            let query = {
              id:this.addForm.id,
              name:this.addForm.name,
              code:this.addForm.code,
              address:this.addForm.address
            }
            editWare(query).then(res =>{
              if(res.data.code == 200){
                this.$message.success("仓库编辑成功")
                this.addVisible = false
                this.onLoad()
              }
            })
          }else{
            addWare(this.addForm).then(res =>{
              if(res.data.code == 200){
                this.$message.success("仓库新增成功")
                this.addVisible = false
                this.onLoad()
              }
            })
          }
        }
      })
    },
    // 点击编辑按钮
    handleEdit(row){
      getDetail({id:row.id}).then(res =>{
        this.addForm = res.data.data
        this.addVisible = true
        this.addTitle = '编辑仓库'
      })
    },
    // 点击查看按钮
    handleView(row){
      getDetail({id:row.id}).then(res =>{
        this.addForm = res.data.data
        this.addVisible = true
        this.addTitle = '查看仓库'
      })
    },
    // 点击行内删除按钮
    handleDelete(row){
      this.$confirm('请确认是否删除该仓库?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWare({ids:row.id}).then(res => {
          if (res.data.code == 200) {
            this.onLoad()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
      });
    },
    // 点击行外删除按钮
    handlleDeletes(){
      if(this.selectionList.length == 0){
        this.$message.warning('请至少选择一条数据')
      }else{
        let ids = this.selectionList.map(item => item.id).join(',')
        this.$confirm('请确认是否删除选中的仓库?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteWare({ids:ids}).then(res => {
            if (res.data.code == 200) {
              this.onLoad()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          })
        }).catch(() => {
        });
      }
    },
  }
}
</script>

<style>

</style>