yiliangyiyun-pc-jj/src/views/record/record.vue

<template>
  <div class="bg" id="index">
    <div class="row1">
      <div class="left">
        <el-date-picker @change="datechange" format="yyyy-MM-dd" v-model="value2" type="daterange" unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-input :placeholder="'可按业务编号、车牌号、客户名查找'" clearable v-model="searchKeyWord" class="search_css"></el-input>
        <el-button type="primary" size="small" @click="lookup" class="search">查找</el-button>
      </div>
      <div class="right">
        <el-button type="primary" size="small" @click="batchPay(1)">批量收款</el-button>
        <el-button type="primary" size="small" @click="batchPay(2)">批量付款</el-button>
        <el-button type="primary" size="small" @click="exportExcel()">导出</el-button>
        <el-button type="primary" size="small" @click="handlestatus(1)">盘亏</el-button>
        <el-button type="primary" size="small" @click="handlestatus(2)">盘盈</el-button>
      </div>
    </div>
    <div class="row2">
      <div class="left">
        <el-button type="primary" size="small" @click="search(0)">全部</el-button>
        <el-button type="primary" size="small" @click="search(1)">入库记录</el-button>
        <el-button type="primary" size="small" @click="search(2)">出库记录</el-button>
        <el-button type="primary" size="small" @click="search('已付')">已付</el-button>
        <el-button type="primary" size="small" @click="search('未付')">未付</el-button>
        <el-button type="primary" size="small" @click="search('已收')">已收</el-button>
        <el-button type="primary" size="small" @click="search('未收')">未收</el-button>
      </div>
      <div class="right">
        <el-select v-model="value" placeholder="请选择" @change="changeGoodsName">
          <el-option v-for="item in goodsList" :key="item.id" :label="item.goodsName" :value="item.goodsName">
          </el-option>
        </el-select>
        <div class="text">库存{{ goodsObj.storage }}吨</div>
        <div class="text">加权成本{{ goodsObj.weightedCost }}元/吨</div>
        <el-button type="primary" size="small" @click="zero()">归零</el-button>
      </div>
    </div>
    <div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" class="table">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="业务编号" width="120" prop="businessNo">
        </el-table-column>
        <el-table-column prop="positionNo" label="仓位"></el-table-column>
        <el-table-column prop="address" label="类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.inOutFlag == 1">出库</div>
            <div v-else>入库</div>
          </template>
        </el-table-column>
        <el-table-column prop="carNumber" label="车牌号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="customerName" label="客户" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="color:cornflowerblue" v-if="scope.row.customerId" @click="selectCustomer(scope.row)">
              {{ scope.row.customerName }}</div>
            <div v-else>{{ scope.row.customerName }}</div>
          </template>

        </el-table-column>
        <el-table-column prop="goodsName" label="货名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="grossWeight" label="毛重（吨）" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="trae" label="皮重（吨）" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="netWeight" label="净重（吨）" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="bulkDensity" label="容重（克/升）" width="100">
        </el-table-column>
        <el-table-column prop="waterContent" label="水分（%）" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="更多指标" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="color:cornflowerblue" @click="moreInfo(scope.row)">查看</div>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价（元/吨）" width="100">
        </el-table-column>
        <el-table-column prop="grainFund" label="粮款（元）" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="备注" show-overflow-tooltip>
          <template slot-scope="scope" v-if="scope.row.remark">
            <div style="color:cornflowerblue" @click="lookRemark(scope.row.remark)">查看</div>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="status" label="收款状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="display:flex;align-items: center">
              <div style="color:cornflowerblue">{{ scope.row.status }}</div>
              <img src="../../../public/img/change.png" alt="" width="18" height="20"
                style="vertical-align: text-top; position: relative; top: -1px" @click="changeStatus(scope.row)">
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="address" label="附件" show-overflow-tooltip>
          <template slot-scope="scope">
            <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
              src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
            <span v-if="scope.row.addressUrlArray != null">
              {{
                scope.row.addressUrlArray.length == 0
                ? ''
                : scope.row.addressUrlArray.length
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" show-overflow-tooltip>
          <template scope="scope">
            <span style="color: red;" @click="del(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center; padding: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
      </el-pagination>
      <WinseaContentModal v-model="accessoryTFs" @on-cancel="handleClose">
        <div>
          <ws-upload ref="upload" :size-limit="size" @onChange="onChange" :comp-id="compId" :appendix-ids="appendixIdss"
            accept=".jpg, .jpeg, .png, .pdf, .doc, .docx, .zip, .rar" />
        </div>
      </WinseaContentModal>
    </div>
    <el-dialog width="320px" title="客户信息" :visible.sync="isShowCustomer" :append-to-body="true" :close="customerclose">
      <el-form class="customer" label-position="right" label-width="120px">
        <el-form-item class="customer-item" label="姓名">
          <el-input disabled maxlength="100" size="small" v-model="customerObj.customerName" />
        </el-form-item>
        <el-form-item class="customer-item" label="手机号">
          <el-input disabled size="small" v-model="customerObj.customerPhone" />
        </el-form-item>
        <el-form-item class="customer-item" label="银行卡号">
          <el-input disabled v-model="customerObj.bankCard" size="small" />
        </el-form-item>
        <el-form-item class="customer-item" label="开户行">
          <el-input disabled v-model="customerObj.bankDeposit" size="small" />
        </el-form-item>
        <el-form-item class="customer-item" label="开户支行">
          <el-input disabled v-model="customerObj.bankDepositBranch" size="small" />
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog width="320px" title="备注信息" :visible.sync="isShowRemark" :append-to-body="true" :close="remarkClose">
      {{ remarkVal }}
    </el-dialog>
    <el-dialog width="320px" title="指标信息" :visible.sync="isShowMoreInfo" :append-to-body="true" :close="moreInfoClose">
      <el-form class="customer" label-position="right" label-width="80px">
        <el-form-item label="水分">
          <el-input disabled size="small" v-model="moreInfoObj.waterContent" />
        </el-form-item>
        <el-form-item label="杂质">
          <el-input disabled size="small" v-model="moreInfoObj.impurity" />
        </el-form-item>
        <el-form-item label="霉变粒">
          <el-input disabled size="small" v-model="moreInfoObj.mildewGrain" />
        </el-form-item>
        <el-form-item label="不完善粒">
          <el-input disabled size="small" v-model="moreInfoObj.imperfectGrain" />
        </el-form-item>
        <el-form-item label="容重">
          <el-input disabled size="small" v-model="moreInfoObj.bulkDensity" />
        </el-form-item>
        <el-form-item label="热损伤">
          <el-input disabled size="small" v-model="moreInfoObj.jiaorenli" />
        </el-form-item>
        <el-form-item label="蛋白">
          <el-input disabled size="small" v-model="moreInfoObj.protein" />
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog width="320px" :title="inventoryTitle" :visible.sync="isShowInventory" :append-to-body="true"
      :close="inventoryClose">
      <el-form class="customer" label-position="right" label-width="120px">
        <el-form-item class="customer-item" label="货名">
          <el-select v-model="pSubmitObj.goodsName" placeholder="请选择" @change="changeGoodsName1">
            <el-option v-for="item in goodsList" :key="item.id" :label="item.goodsName" :value="item.goodsName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="customer-item" label="现有库存">
          <el-input disabled size="small" v-model="goodsObj1.storage" />
        </el-form-item>
        <el-form-item class="customer-item" label="盘亏重量（吨）" v-if="inventoryTitle == '盘亏'">
          <el-input placeholder="输入盘亏重量" maxlength="100" size="small" v-model="pSubmitObj.netWeight" @input="inputVal"
            type="number" />
        </el-form-item>
        <el-form-item class="customer-item" label="单价（元/吨）" v-if="inventoryTitle == '盘亏'">
          <el-input placeholder="输入盘亏重量单价" size="small" v-model="pSubmitObj.unitPrice" @input="inputVal" type="number" />
        </el-form-item>
        <el-form-item class="customer-item" label="货值（元）" v-if="inventoryTitle == '盘亏'">
          <el-input disabled placeholder="自动计算盘亏重量的货值" size="small" v-model="pSubmitObj.grainFund" />
        </el-form-item>
        <el-form-item class="customer-item" label="盘亏重量（吨）" v-if="inventoryTitle == '盘盈'">
          <el-input placeholder="输入盘盈重量" maxlength="100" size="small" v-model="pSubmitObj.netWeight" @input="inputVal"
            type="number" />
        </el-form-item>
        <el-form-item class="customer-item" label="单价（元/吨）" v-if="inventoryTitle == '盘盈'">
          <el-input placeholder="输入盘盈重量单价" size="small" v-model="pSubmitObj.unitPrice" @input="inputVal" type="number" />
        </el-form-item>
        <el-form-item class="customer-item" label="货值（元）" v-if="inventoryTitle == '盘盈'">
          <el-input disabled placeholder="自动计算盘盈重量的货值" size="small" v-model="pSubmitObj.grainFund" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="panSubmit" type='primary'>提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import WsUpload from '@/components/WsUpload'
import {
  downloadFile
} from '@/utils/batchDown'
import {
  dayjs,
  EventBus
} from 'base-core-lib'
import {
  speedWarehouseInOutInfoList,
  speedWarehouseInOutInfoAdd,
  speedWarehouseInOutInfoEdit,
  speedWarehouseInOutInfoDel,
  makeZero,
  // selectInOutCount,
  exportOrder,
  speedCustomerInfo,
  speedGoodsList
} from '@/model/speedGoods'
export default {
  components: {
    WsUpload
  },
  data() {
    return {
      moreInfoObj:{},
      isShowMoreInfo:false,
      remarkVal: '',
      isShowRemark: false,
      dataObj: {},
      size: 10,
      pSubmitObj: {
        goodsName: ''
      },
      goodsObj: {},
      goodsObj1: {},
      date: {
        year: dayjs().format('YYYY'),
        month: dayjs().format('MM'),
      },
      startDate: '',
      endDate: '',
      inventoryTitle: '',
      isShowInventory: false,
      isShowCustomer: false,
      customerObj: {},
      compId: localStorage.getItem('ws-pf_compId'),
      appendixIdss: [],
      applstatus: false,
      accessoryTFs: false,
      deptCircularPage: {},
      deptBudgetTotal: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      multipleSelection: [],
      goodsList: [],
      value: '',
      searchKeyWord: '',
      value2: '',
      status: ''
    };
  },
  created() {
    this.getGoodSName()
    this.getList()

  },
  mounted() {

  },
  beforeDestroy() {


  },
  methods: {
    moreInfoClose(){
      this.isShowMoreInfo = false
    },
    //更多指标
    moreInfo(val) { 
      this.moreInfoObj = val
      console.log(this.moreInfoObj)
      this.isShowMoreInfo = true
    },
    // 查看备注
    lookRemark(val) {
      this.remarkVal = val
      this.isShowRemark = true
    },
    // 更改已付、未付、已收、未收状态
    changeStatus(val) {
      if (val.status == '已付') {
        val.status = "未付"
      } else if (val.status == '未付') {
        val.status = "已付"
        val.flag = 1
      } else if (val.status == '已收') {
        val.status = "未收"
      } else if (val.status == '未收') {
        val.status = "已收"
        val.flag = 2
      }
      speedWarehouseInOutInfoEdit(val).toPromise()
        .then((res) => {
          if (res == "ok") {
            this.$message.success('提交成功！')
            this.isShowInventory = false
          }
        })
    },
    //计算盘盈盘亏货值
    inputVal() {
      if (this.pSubmitObj.netWeight && this.pSubmitObj.unitPrice) {
        this.pSubmitObj.grainFund = this.pSubmitObj.netWeight * this.pSubmitObj.unitPrice
      }
    },
    //盘亏盘盈
    async panSubmit() {
      this.pSubmitObj.compId = this.compId
      if (this.pSubmitObj == '盘亏') {
        this.pSubmitObj.inOutFlag = 1
      } else {
        this.pSubmitObj.inOutFlag = 2
      }
      await speedWarehouseInOutInfoAdd(this.pSubmitObj).toPromise()
        .then((res) => {
          if (res == "ok") {
            this.$message.success('提交成功！')
            this.isShowInventory = false
          }
        })
    },
    // 查看客户
    selectCustomer(val) {
      speedCustomerInfo({
        customerId: val.customerId
      })
        .toPromise()
        .then((response) => {
          this.isShowCustomer = true
          this.customerObj = response
        })
    },
    //搜索
    search(type) {
      switch (type) {
        case 0:
          this.searchType = ''
          this.status = ''
          break
        case 1:
          this.searchType = 1
          break;
        case 2:
          this.searchType = 2
          break;
        default:
          this.status = type
          break
      }
      this.getList()
    },
    //选择货名
    changeGoodsName(val) {
      this.goodsObj = this.goodsList.filter((item) => {
        if (val == item.goodsName) return item
      })[0]
    },
    //盘盈盘亏选择货名
    changeGoodsName1(val) {
      this.goodsObj1 = this.goodsList.filter((item) => {
        if (val == item.goodsName) return item
      })[0]
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        // 'H+': date.getHours().toString(), // 时
        // "M+": date.getMinutes().toString(),         // 分
        // "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    },
    datechange(e) {
      if (this.value2) {
        this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
        this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
      } else {
        this.startDate = ''
        this.endDate = ''
      }
      this.getList()
    },
    //货名下拉
    getGoodSName() {
      speedGoodsList({
        compId: localStorage.getItem('ws-pf_compId')
      })
        .toPromise()
        .then((response) => {
          this.goodsList = response
          if (this.goodsList.length != 0) {
            this.value = this.goodsList[0].goodsName
            this.pSubmitObj.goodsName = this.goodsList[0].goodsName
            this.goodsObj = this.goodsList[0]
            this.goodsObj1 = this.goodsList[0]
          }
        })
    },
    getList() {
      speedWarehouseInOutInfoList({
        compId: this.compId,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        searchKeyWord: this.searchKeyWord,
        searchType: this.searchType,
        startDate: this.startDate,
        endDate: this.endDate,
        status: this.status
      })
        .toPromise()
        .then((response) => {
          if (response.records) {
            for (let i = 0; i < response.records.length; i++) {
              response.records[i].addressUrlArray = []
              response.records[i].addressUrlArray = response.records[i].addressUrl ? response.records[i].addressUrl.split(",") : []
            }
          }
          this.tableData = response.records
          this.deptBudgetTotal = response.total


        })
    },
    async exportExcel() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选导出条目！")
        return
      }
      const {
        data
      } = await exportOrder({
        speedWarehouseInOutInfoList: this.multipleSelection
      }, {}, {
        responseType: 'blob',
      }).toPromise()
      downloadFile({
        res: data,
        fileName: `${this.date.year + (this.date.month ? `-${this.date.month}` : '')
          }_出入库记录`,
        type: 'xls',
      })
    },
    // 批量收付款
    batchPay(val) {
      let _flag = ''
      let _text = ""
      if (val == 1) {
        _text = '收款'
        _flag = 4
        for (let i = 0; i < this.multipleSelection.length; i++) {
          if (this.multipleSelection[i].status == '已付' || this.multipleSelection[i].status == '未付' || this.multipleSelection[i].status == '已收') {
            this.$message.error('存在已付或未付或已收项，请重新勾选！')
            return
          }
        }
      } else {
        _text = '付款'
        _flag = 3
        for (let i = 0; i < this.multipleSelection.length; i++) {
          if (this.multipleSelection[i].status == '已收' || this.multipleSelection[i].status == '未收' || this.multipleSelection[i].status == '已付') {
            this.$message.error('存在已收或未收或已付项，请重新勾选！')
            return
          }
        }
      }

      this.$confirm('确定勾选的条目均已' + _text + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        speedWarehouseInOutInfoEdit({ flag: _flag, speedWarehouseInOutInfoList: this.multipleSelection }).toPromise()
          .then((res) => {
            if (res == "OK") {
              this.$message.success('提交成功！')
              this.isShowInventory = false
              this.getList()
            }
          })

      }).catch(() => {
        return false
      });
    },
    del(val) {
      this.$confirm('确定删除出入库记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        speedWarehouseInOutInfoDel({ id: val.id}).toPromise()
          .then((res) => {
              this.$message.success('删除成功！')
              this.getList()
          })

      }).catch(() => {
        return false
      });
    },
    // 归零
    zero() {
      this.$confirm('确定将【' + this.goodsObj.goodsName + '】的库存和成本归零？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        makeZero({
          id: this.goodsObj.id
        }).toPromise()
          .then((response) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getGoodSName()
          })
      }).catch(() => {
        return false
      });
    },
    inventoryClose() {
      this.isShowInventory = false
    },
    //盘亏盘盈
    handlestatus(type) {
      if (type == 1) {
        this.inventoryTitle = '盘亏'
      } else {
        this.inventoryTitle = '盘盈'
      }
      this.isShowInventory = true
    },
    remarkClose() {
      this.isShowRemark = false
    },
    customerclose() {
      this.isShowCustomer = false
    },
    // 查看客户
    customerClick(val) {
      this.isShowCustomer = true
    },
    onChange() {
      this.$refs.upload
        .handleSaveBill()
        .then(async (response) => {
          this.dataObj.addressUrl = response
          this.dataObj.flag = 0
          speedWarehouseInOutInfoEdit(this.dataObj)
            .toPromise()
            .then((response) => {
              this.accessoryTFs = false
              this.$message.success('上传成功')
              this.getList()
            })
        })
        .catch((res) => {
          EventBus.$emit('error', (JSON.parse(res) || {}).message)
          this.$refs.upload.clearFiles()
        })
    },
    // 上传附件
    uploadSuccess(data, files, url) {
      console.log(data, files, url)
    },
    handleClose() {
      this.dialogViewSpareMoney = false
    },
    fujian(row) {
      this.id = row.id
      this.accessoryTFs = true
      this.dataObj = row
      this.appendixIdss = row.addressUrl
    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    lookup() {
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 10px 16px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center center;

  .row1 {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
    }
  }

  .row2 {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .right {
      display: flex;
      align-items: center;

      .text {
        margin: 0 10px;
      }
    }
  }
}

.search,
.search_css {
  margin-left: 10px;
}

.table {
  margin-top: 20px;
}
</style>