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="small"
          @click="dialogVisible=true;type=1"
        >新增</el-button>
      </div>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>仓库每天预约提货设置</span>
      </div>
      <!-- 列表 -->
      <div class="">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            min-width="60"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="仓库"
            prop="correspondName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="预约存货类型"
            prop="categoryName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="最大预约单量(1天)"
            prop="number"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.number" type="number" :disabled="scope.row.isDisabled" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="最大预约台数(1天)"
            prop="towerNum"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.towerNum" type="number" :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" size="small">
        <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>

.btn-group{
  margin: 20px 0;
}
.select{
  width: 100%;
}
</style>