erp/resources/frontend/src/views/stock/stockTacks.vue

<template>
  <div class="goods">
    <el-card class="boxcard" shadow="never">
      <r-search ref="searchalt" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"  />
    </el-card>
    
    <div :style="{height:`${this.contentHeight}px`}" style="padding-top:30px;">
        <r-table  class="page" :isIndex="false" isHandle :tableData="tableData" :tableCols="tableCols" :tableHandles="tableHandles"  :isPagination="true" :tablePage="pagination" @refresh="init()">
          <el-upload slot="tip" ref="newset" action="/api/uploadStockTacks" :multiple="false" name="file"
              :show-file-list="false" :on-success="inventorySuccess" :before-upload="beforeInventory"
              :on-error="inventoryError" style="display:inline-block;margin: 0 10px 0 10px;"
              :headers="headers">
              <el-button type="primary" plain>报损导入</el-button>
          </el-upload>
        </r-table>
      
    </div>
    <r-form
      :isHandle="true"
      :formRules="formRules"
      :formCols="formCols"
      :formHandle="formHandle"
      :formData="formData"
            labelWidth="100px"
      dialogWidth="550px"
      :inline="false"
      ref="elForm"
    />
  </div>
</template>
<script>

export default {

    data() {
        return {
          load:false,
          flag:false,
          title:'',
          param:{},
          supplierType:[],
          pagination: { size: 10, page: 1, total: 0 },
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem("token")
          },
          searchData: {
            keyWord:"",
          },
          searchForm: [
            { type: "input",label: "关键词", prop: "keyWord",placeholder:'商品名、规格、品牌',width:500},
          ],
          searchHandle: [
            {type: "info",icon: "el-icon-refresh", handle: e => this.init(true) },
            {label: "搜索",type: "primary",icon: "el-icon-search",handle: e => this.seach()},  
          ],
          
          tableData: [],
          formCols: [
            { label: "商品/规格", prop: "good_type",width:350,type:'cascader',options:[]},
            { label: "报损数量", prop: "stock",width:350,type:'number'},
            { label: "采购成本", prop: "buyer_price",width:350,type:'number'},
            { label: "入库成本", prop: "price",width:350,type:'number'},
            { label: "报损日期", prop: "tack_date",width:350,type:'date'},
            { label: "采购员", prop: "buyer_by",width:350,type:'select',options:[]},
            { label: "备注", prop: "remark",width:350,type: "textarea"},
          ],
          tableCols:[
            { label: "报损日期", prop: "tack_date",width:150},  
            { label: "商品类型", prop: "type_name",width:150},
            { label: "品牌", prop: "brand_name",width:150},
            { label: "商品名称", prop: "good_name",width:150},
            { label: "商品sku", prop: "sku_name",width:200},
            { label: "采购数量", prop: "stock",width:200},
            { label: "采购成本", prop: "buyer_price",width:150},
            { label: "入库成本", prop: "price",width:150},
            { label: "采购员", prop: "username",width:200},
            { label: "备注", prop: "remark",width:250},
            { label: "创建时间", prop: "created_at",width:200},
            { label: "操作",type: "button",width: 300,
              btnList: [
                // {label: "修改",type: "primary",size: "mini",handle: (row) => this.elFormChange(row)},
                {label: "删除",type: "danger",size: "mini",handle: (row) => this.elFormDelete(row)},
              ]
            },
          ],
          
          tableHandles: [
            {
              label: "新增报损",
              type: "primary",
              handle: e => {this.elFormVisible(e)} ,
            },
          ],
          formData: {
            good_type:[],
            stock:'',
            buyer_price:'',
            price:'',
            tack_date:"",
            buyer_by:"",
            remark:"",
          },
          
          formRules: {
          },
          formHandle: [
            {
              label: "确认",
              type: "primary",
              icon: "el-icon-circle-plus-outline",
              handle: e => this.elFormSubmit(),
            },
            {
              label: "取消",
              icon: "el-icon-circle-close",
              handle: e => this.elFormVisible(),
            },
          ],
          width:500,
          height:500,
          contentHeight:500,
      }
    },
    mounted() {
      let  element = document.querySelector('.box-card');
      this.width=element.offsetWidth
      this.height=element.offsetHeight
      let  topEl = document.querySelector('.boxcard');
      this.contentHeight=element.offsetHeight-topEl.offsetHeight

      this.$http.post('/getProSku').then(res=>{
        this.formCols[0].options=res.data.product;
        this.formCols[5].options=res.data.user;
      })
      
      this.init()
    },
    methods: {
      init(param={}) {
        // console.log(localStorage.getItem("token"));return;
        // console.log(this.$store.state.token);return;
        let data=Object.assign(this.pagination,param)
        this.$http.get('/listStockTacks',data).then(res=>{
          this.pagination.page=res.data.page
          this.pagination.size=res.data.size
          this.pagination.total=res.data.total
          this.tableData=res.data.list;
          console.log(this.tableData);
        })
      },
      beforeInventory() {
            this.loadingModule = this.$loading({
                lock: true,
                text: '导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
      },
      inventorySuccess(response) {
          this.$message({
              message: '导入成功！',
              type: "success",
          });
          this.loadingModule.close();
      },
      inventoryError(err) {
          this.$message({
              message: err.errorMessage,
              type: "error",
          });
          this.loadingModule.close();
      },
    seach(){
      this.init(this.searchData)
    },
    elFormUpload(e){
      console.log('导入',e);
    },
    elFormVisible(title){
      if (title==undefined) {
        this.title='新增'
        this.formData = { ...{} };
      }
      this.$refs.elForm.dialogFormTitle=this.title
      this.$refs.elForm.dialogFormVisible =!this.$refs.elForm.dialogFormVisible
    },
    elFormChange(e){
      this.title='修改'
      this.formData={...e}
      console.log(this.formData);
      this.elFormVisible("修改");
      
    },
    elFormDelete(e){
      this.$confirm('您确定要删除吗？','提示').then(()=>{
        this.$http.post('/delStockTacks',{id:e.id}).then(res=>{
          if (res.code == 200) {
            this.$msg.success('删除成功！')
            this.tableData=this.tableData.filter((obj)=>{
              return obj.id!=e.id
            })
          }
        })
      }).catch(()=>{})
    },
    elFormSubmit(e) {
      this.$refs.elForm.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // console.log(this.formData);return;
          this.$http.post('/saveStockTacks', this.formData).then((res) => {
            console.log(res);
            if (res.code==200) {
              this.$message({
                type: "success",
                message: `${this.title}报损成功！`,
                duration: 1300,
                onClose: (res) => {
                  this.elFormVisible();
                  this.init();
                },
              });
            }
          });
                    // this.treeUpload()
        }
      });
    },
  
    
  },
};
</script>