supply-front/src/views/basic_data/warehouse/warehouse_book.vue

<template>
  <div class="app-container">
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button
          v-if="$checkBtnRole('add', $route.meta.roles)"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="
            dialogVisible = true
            type = 1
          "
          >新增</el-button
        >
      </div>
    </div>
    <el-card class="box-card mymain-container">
      <div slot="header" class="clearfix">
        <span>仓库每天预约提货设置</span>
      </div>
      <!-- 列表 -->
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="left" label="序号" type="index" min-width="60" show-overflow-tooltip />
          <el-table-column align="left" label="仓库" prop="correspondName" min-width="160" show-overflow-tooltip />
          <el-table-column
            align="left"
            label="预约存货类型"
            prop="categoryName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column align="right" label="最大预约单量(1天)" prop="number" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input
                size="mini"
                class="yinput"
                v-model.number="scope.row.number"
                type="number"
                @mousewheel.native.prevent
                :disabled="scope.row.isDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="right"
            label="最大预约台数(1天)"
            prop="towerNum"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                size="mini"
                class="yinput"
                v-model.number="scope.row.towerNum"
                type="number"
                @mousewheel.native.prevent
                :disabled="scope.row.isDisabled"
              />
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" class="textColor" @click="hanleEidt(scope.row.id, scope.row)">编辑</el-button>
              <!--              <el-button type="text" class="textColor" @click="hanleSave(scope.row)">保存</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" @close="resetForm">
      <el-form ref="ruleForm" :rules="rulue" :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="仓库" prop="correspondId">
          <el-select
            v-model="ruleForm.correspondId"
            filterable
            placeholder="请选择仓库"
            class="select"
            @change="handleStock"
          >
            <el-option v-for="item in stockList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="存货" prop="categoryId">
          <el-select
            v-model="ruleForm.categoryId"
            filterable
            placeholder="请选择存货"
            class="select"
            @change="handleCategory"
          >
            <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="预约单量" prop="number">
          <el-input v-model="ruleForm.number" placeholder="请输入最大预约单量" />
        </el-form-item>
        <el-form-item label="台数量" prop="towerNum">
          <el-input v-model="ruleForm.towerNum" placeholder="请输入预约台数量" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogVisible = false
            resetForm()
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="handleAddInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Mixin from '@/mixin/index'
// updateReserve getListStock categoryList
import { addReserve, categoryList, getListReserve, getListStock, updateReserve } from '@/api/basic_data/warehouse'

export default {
  mixins: [Mixin],
  data() {
    return {
      dialogVisible: false,
      dataList: [],
      index: 0,
      ruleForm: {
        categoryId: '',
        categoryName: '',
        correspondId: '',
        correspondName: '',
        id: '',
        number: '',
        towerNum: ''
      },
      stockList: [],
      cateList: [],
      rulue: {
        correspondId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
        // categoryId: [
        //   { required: true, message: '请选择存货', trigger: 'change' }
        // ],
        number: [{ required: true, message: '请输入最大预约单量', trigger: 'blur' }]
        // towerNum: [
        //   { required: true, message: '请输入预约台数量', trigger: 'blur' }
        // ]
      },
      type: '',
      editData: {}
    }
  },
  created() {
    this.getList()
    this.getCommonList()
  },
  methods: {
    hanleEidt(id, row) {
      this.type = 2
      this.dialogVisible = true
      this.ruleForm = {
        ...row
      }
      // this.dataList.forEach(e => {
      //   e.isDisabled = true
      // })
      // this.dataList[i].isDisabled = false
    },
    hanleSave(row) {
      const params = {
        ...row
      }
      addReserve(params).then(res => {
        this.$successMsg('保存成功')
        this.dataList.forEach(e => {
          e.isDisabled = true
        })
      })
    },
    handleAddInfo() {
      this.$refs.ruleForm.validate(valid => {
        console.log(this.ruleForm)
        if (valid) {
          if (this.type === 1) {
            addReserve({
              ...this.ruleForm
            }).then(res => {
              this.$successMsg('新增成功')
              this.getList()
            })
          } else {
            updateReserve({
              ...this.ruleForm
            }).then(res => {
              this.$successMsg('编辑成功')
              this.getList()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogVisible = false
        this.resetForm()
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        categoryId: '',
        categoryName: '',
        correspondId: '',
        correspondName: '',
        id: '',
        number: '',
        towerNum: ''
      }
    },
    getList() {
      this.listLoading = true
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      getListReserve(params).then(res => {
        res.data.records.forEach(el => {
          el.isDisabled = true
        })
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
        console.log(this.dataList, 1233)
      })
    },
    getCommonList() {
      getListStock({
        pageNum: 1,
        pageSize: -1,
        name: '',
        stockName: ''
      }).then(res => {
        this.stockList = res.data.records
      })
      categoryList({
        pageNum: 1,
        pageSize: -1,
        keyword: ''
      }).then(res => {
        console.log(res)
        this.cateList = res.data.records
      })
    },
    handleStock(e) {
      this.ruleForm.correspondName = this.stockList.filter(k => {
        return e === k.id
      })[0].name
    },
    handleCategory(e) {
      this.ruleForm.categoryName = this.cateList.filter(k => {
        return e === k.id
      })[0].name
    }
  }
}
</script>

<style lang="scss" scoped>
.yinput {
  ::v-deep input {
    text-align: right;
  }
}
.btn-group {
  margin: 20px 0;
}
.select {
  width: 100%;
}
</style>