商品出库管理系统 - 平调和零售功能

<script type="module">
const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 1000,
})
new Vue({
  el: '#app',
  dataType: 'json',
  data: {
    isValidInput: false,
    name: '',
    dialogVisible: false,
    selectedImageUrl: '',
    from1: {
      branchname: ''
    },
    dialogFormVisible: false,
    num: '',
    total: '',
    pagenum: 1,
    index: 1,
    size: 5,
    yc: true,
    input: '',
    getname: [],
    formInline: {
      branchname: ''
    },
    coun: null, // 添加coun变量存储出库数量
    k: 0,
    from: [],
    branchname: '',
    tableData: [],
    dialogFormVisible: false,
    title: '添加部门',
    show: false,
    form: {
      branchname: ''
    },
    formLabelWidth: '120px'
  },
  methods: {
    handleMouseMove() {
      if (this.input != '') {
        this.isValidInput = true
      } else {
        this.isValidInput = false
      }
    },
    showImage(url) {
      this.selectedImageUrl = url;
      this.dialogVisible = true;
    },
    /*点击平调获取参数*/
    pingdiao(index, row) {
      if (this.input == '' || this.input.length == 0) {
        this.$message({
          showClose: true,
          message: '格式错误',
          type: 'warning'
        });
        return;
      } else {
        if (row.counts >= this.input & this.input != 0) {
          console.log(row.branchname)
          if (this.name != row.branchname) {
            this.$message({
              showClose: true,
              message: '您不是本店员工，无法进行操作',
              type: 'warning'
            });
            return;
          }
          if (this.input <= 5) {
            this.$message({
              showClose: true,
              message: '平调数量不能小于5',
              type: 'warning'
            });
            return
          }
          this.dialogFormVisible = true
          this.coun = row.counts // 更新coun变量的值
          this.num = this.input
          this.total = row.sprice * this.input
          row.counts = row.counts - this.input;
          var a = row.counts;
          this.from = {
            count: a,
            goodsid: row.goodsid,
            branchid: row.branchid,
            num: this.num,
            total: this.total,
            branchname: '',
            coun: this.coun
          }
          this.input = ''
        }
      }
    },
    /*点击平调确认向后端传参*/
    pingdia() {
      this.from.branchname = this.from1.branchname
      instance.put(`/goods?count={this.from.count}&goodsid={this.from.goodsid}&branchid=${this.from.branchid}`).then(res => {
        if (res.data.code == 0) {
          instance.get("/goods")
            .then(function (res) {
              this.tableData = res.data.data.list;
              this.k = res.data.data.total
            })
          this.input = ''
          instance.post(`/goods/post2`, this.from).then(res => {
          })
          instance.put(`/outfers/shu?coun={this.from.coun}&goodsid={this.from.goodsid}&branchid=${this.from.branchid}`).then(res => {
          })
          this.input = ''
          this.dialogFormVisible = false
          this.handleCurrentChange(this.index)
        }
      })
    },
    /*刷新到第一页*/
    refresh() {
      this.handleCurrentChange(1)
    },
    /*零售*/
    handleEdit: function (index, row) {
      if (this.input == '' || this.input.length == 0) {
        this.$message({
          showClose: true,
          message: '格式错误',
          type: 'warning'
        });
        return;
      } else {
        if (row.counts >= this.input & this.input != 0) {
          if (this.name != row.branchname) {
            this.$message({
              showClose: true,
              message: '您不是本店员工，无法进行操作',
              type: 'warning'
            });
            return;
          }
          if (this.input > 5) {
            this.$message({
              showClose: true,
              message: '零售数量不能大于5',
              type: 'warning'
            });
            return
          }
          this.coun = row.counts
          this.num = this.input
          this.total = row.sprice * this.input
          row.counts = row.counts - this.input;
          var a = row.counts;
          instance.put(`/goods?count={a}&goodsid={row.goodsid}&branchid=${row.branchid}`).then(res => {
            if (res.data.code == 0) {
              instance.get("/goods")
                .then(function (res) {
                  this.tableData = res.data.data.list;
                  this.k = res.data.data.total
                })
              this.input = ''
              instance.post(`/goods/post?branchid={row.branchid}&goodsid={row.goodsid}&num={this.num}&total={this.total}`).then(res => {
              })
              instance.put(`/outfers/shu?coun={this.coun}&goodsid={row.goodsid}&branchid=${row.branchid}`).then(res => {
              })
            }
          })
          this.handleCurrentChange(this.index)
          this.input = ''
        }
      }
    },
    /*查询*/
    onSubmit(row) {
      this.handleCurrentChange(1)
    },
    /*分页*/
    handleSizeChange(val) {
      this.size = val
      this.pages() /* instance.get(`/goods?size={this.size}&index={this.index}`, {params: this.formInline}).then(res => { this.tableData = res.data.data.list; this.pagenum = res.data.data.pageNum this.k = res.data.data.total })*/
    },
    /*分页*/
    handleCurrentChange(val) {
      this.index = val
      this.pages() /* instance.get(`/goods?index=${val}`, {params: this.formInline}).then(res => { this.tableData = res.data.data.list; this.pagenum = res.data.data.pageNum this.k = res.data.data.total })*/
    },
    pages() {
      instance.get(`/goods?size={this.size}&index={this.index}`, { params: this.formInline }).then(res => {
        this.tableData = res.data.data.list;
        this.pagenum = res.data.data.pageNum
        this.k = res.data.data.total
      })
    }
  },
  created() {
    var jl = this;
    instance.get("/logincontroller/getStaff")
      .then(res => {
        console.log(res.data.data)
        jl.name = res.data.data.branchname; // 将获取到的员工姓名赋值给name变量
      });
    instance.get("/goods")
      .then(function (res) {
        jl.tableData = res.data.data.list;
        jl.k = res.data.data.total
      })
      .catch(function (res) {
        console.log(res);
      });
    /*获取店铺名称*/
    instance.get("/goods/getname")
      .then(function (res) {
        jl.getname = res.data.data;
      })
  }
});
</script>
<template>
  <div id="app">
    <div style="margin: 20px 0;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="店铺名称:">
          <el-select v-model="formInline.branchname" placeholder="请选择店铺">
            <el-option
              v-for="item in getname"
              :key="item.branchname"
              :label="item.branchname"
              :value="item.branchname"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f0f9ff', color: '#333' }"
      :row-style="{ height: '40px' }"
    >
      <el-table-column prop="goodsid" label="商品编号" width="180" :sortable="true" align="center"></el-table-column>
      <el-table-column prop="gname" label="商品名称" width="180" :sortable="true" align="center"></el-table-column>
      <el-table-column prop="sprice" label="商品单价" width="180" :sortable="true" align="center"></el-table-column>
      <el-table-column prop="counts" label="库存数量" width="180" :sortable="true" align="center"></el-table-column>
      <el-table-column prop="branchname" label="店铺名称" width="180" :sortable="true" align="center"></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="pingdiao(scope.$index, scope.row)">平调</el-button>
          <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">零售</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px 0;">
      <el-button type="primary" @click="refresh">刷新</el-button>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="index"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="k"
    ></el-pagination>
    <!-- 平调弹框 -->
    <el-dialog
      title="平调"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form :model="form1" label-width="80px">
        <el-form-item label="店铺名称:">
          <el-select v-model="form1.branchname" placeholder="请选择店铺">
            <el-option
              v-for="item in getname"
              :key="item.branchname"
              :label="item.branchname"
              :value="item.branchname"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库数量:">
          <el-input v-model.number="num" disabled></el-input>
        </el-form-item>
        <el-form-item label="总价:">
          <el-input v-model.number="total" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="pingdia()" :disabled="coun === null">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看图片弹窗 -->
    <el-dialog
      title="查看图片"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <img :src="selectedImageUrl" alt="商品图片" style="width: 100%; height: auto; display: block; margin: 0 auto;" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <div v-if="yc">
      <div style="margin: 20px 0;">
        <el-input
          v-model="input"
          placeholder="请输入出库数量"
          @keyup.enter="onSubmit"
          clearable
          style="width: 200px"
        ></el-input>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </div>
    </div>
    <div v-if="!yc">
      <div style="margin: 20px 0;">
        <el-button type="primary" @click="refresh">刷新</el-button>
      </div>
    </div>
  </div>
</template>
<style>
  #app {
    margin: 20px;
  }
  .dialog-footer {
    text-align: right;
  }
</style>
<pre><code></code></pre>