shzg_projectManage/src/views/wisdom/borrow/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch">
      <el-row :gutter="40">
        <el-col :span="5">
          <el-form-item label="借用时间" prop="borrowTime">
            <el-date-picker v-model="borrowTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" clearable placeholder="请选择借用时间" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目号" prop="xmNo">
            <el-input v-model="queryParams.xmNo" placeholder="请输入项目号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单编号" prop="sapNo">
            <el-input v-model="queryParams.sapNo" placeholder="请输入订单编号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="单据号" prop="billNo">
            <el-input v-model="queryParams.billNo" placeholder="请输入单据号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          v-hasPermi="['wisdom:borrow:add']">新增借料</el-button>
      </el-col>


      <el-col :span="1.5">
        <el-button type="success" plain icon="Printer" @click="handlePrint" v-print="printViewInfo"
          v-hasPermi="['wisdom:borrow:print']">打印单据</el-button>
      </el-col>

      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="outboundList" @selection-change="printSelectionChange" border
      show-overflow-tooltip>
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="单据号" align="center" prop="billNo" width="180" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <dict-tag :options="dictTagData()" :value="scope.row.isBorrowed" />
        </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center" prop="sapNo" width="150" />
      <el-table-column label="项目号" align="center" prop="xmNo" width="150" />
      <el-table-column label="项目描述" align="center" prop="xmMs" width="150" />
      <el-table-column label="（借用方）项目号" align="center" prop="xmNoCk" width="150" />
      <el-table-column label="（借用方）项目描述" align="center" prop="xmMsCk" width="150" />
      <el-table-column label="物料号" align="center" prop="wlNo" width="100" />
      <el-table-column label="物料描述" align="center" prop="wlMs" width="150" />
      <el-table-column label="供应商编码" align="center" prop="gysNo" width="150" />
      <el-table-column label="供应商名称" align="center" prop="gysMc" width="150" />
      <el-table-column label="合同单价" align="center" prop="htDj" />

      <el-table-column label="计量单位" align="center" prop="dw" />
      <el-table-column label="借用数量" align="center" prop="realQty" width="120" />
      <el-table-column label="所属大库" align="center" prop="parentWarehouseName" width="150" />
      <el-table-column label="所属小库" align="center" prop="warehouseName" width="150" />
      <el-table-column label="库位码" align="center" prop="pcode" width="120" />
      <el-table-column label="托盘码" align="center" prop="trayCode" />
      <el-table-column label="身份码" align="center" prop="entityId" width="150" />
      <el-table-column label="出库类型" align="center" prop="operationTypeName" />
      <el-table-column label="借用时间" align="center" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.borrowTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="理货员" align="center" prop="operatorName" />
      <el-table-column label="备注" align="center" prop="remark" width="150" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button v-show="scope.row.isBorrowed == 1" link type="primary" icon="Edit"
            @click="handleReturn(scope.row)">还料</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
    <!-- 打印 -->
    <div id="printMe" class="printMeBox" v-show="showContent">
      <printBill :billAllObj="printList" />
    </div>
    <!-- 添加或修改库存单据主对话框 -->
    <el-dialog :title="title" v-model="open" append-to-body width="70%">
      <el-form ref="stockRef" :model="storeData" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目号">
              <el-input v-model="outQueryParams.xmNo" placeholder="请输入项目号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单号">
              <el-input v-model="outQueryParams.sapNo" placeholder="请输入订单号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料号">
              <el-input v-model="outQueryParams.wlNo" placeholder="请输入物料号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="searchPlan">查询</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出库类型" prop="ckType">
              <el-select v-model="storeData.ckType" placeholder="请选择出库类型" disabled>
                <el-option v-for="dict in storeTypeList" :key="dict.id" :label="dict.typeName" :value="dict.typeCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="施工队" prop="teamCode">
              <el-select v-model="storeData.teamCode" placeholder="请选择施工队" clearable>
                <el-option v-for="dict in wzTypeList" :key="dict.id" :label="dict.teamName" :value="dict.teamCode" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="理货员" prop="operator">
              <el-select v-model="storeData.operator" placeholder="请选择理货员" clearable>
                <el-option v-for="dict in personList" :key="dict.userId" :label="dict.userName"
                  :value="dict.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="借用时间" prop="borrowTime">
              <el-date-picker clearable v-model="storeData.borrowTime" type="date" value-format="YYYY-MM-DD"
                placeholder="请选择借用时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="归还时间">
              <el-date-picker clearable v-model="storeData.returnTime" type="date" value-format="YYYY-MM-DD"
                placeholder="请选择归还时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目号">
              <el-input v-model="storeData.xmNoCk" placeholder="请输入项目号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称">
              <el-input v-model="storeData.xmMsCk" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="planList" height="400" show-overflow-tooltip style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="物料号" align="center" prop="wlNo" width="100" />
        <el-table-column label="订单号" align="center" prop="sapNo" width="100" />
        <el-table-column label="物料描述" align="center" prop="wlMs" width="300" />
        <el-table-column label="出库数量" align="center" prop="realQty" width="120">
          <template #default="scope">
            <el-input v-model="scope.row.realQty" placeholder="请输入出库数量" />
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="htDj" />
        <el-table-column label="单位" align="center" prop="dw" />
        <el-table-column label="库位" align="center" prop="pcode" width="150"></el-table-column>
        <el-table-column label="容器码" align="center" prop="trayCode"></el-table-column>

        <el-table-column label="身份码" align="center" prop="entityId" width="200"></el-table-column>

        <el-table-column label="项目号" align="center" prop="xmNo" width="150" />
        <el-table-column label="项目名称" align="center" prop="xmMs" width="250" />
        <el-table-column label="供应商" align="center" prop="gysMc" width="200" />
        <el-table-column label="备注" align="center" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">出 库</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 还料弹框 -->
    <el-dialog title="还料" v-model="returnOpen" append-to-body width="40%">
      <el-form ref="returnRef" :model="returnData" label-width="100px">
        <el-form-item label="还料时间">
          <el-date-picker style="width: 100%" v-model="returnData.returnTime" value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss" type="date" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="returnForm">还 料</el-button>
          <el-button @click="cancelReturn">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="outbound">
import { returnBill ,listStockByXm} from "@/api/wisdom/borrow";    //列表
import { warehouseAll } from "@/api/information/warehouseinfo";
import { listOuttype } from "@/api/information/outtype";  //出库类型
import { listConstruction } from "@/api/information/construction";    //施工队
import { personListDict } from "@/api/system/user";    //理货员
import { getKwAllList } from "@/api/information/pcdedetail";    //库位下拉数据
import printBill from '@/components/printBill/bill.vue'
import { ref } from "vue";
import { listStock } from "@/api/wisdom/record"
import { addOutbound } from "@/api/wisdom/outbound"

const { proxy } = getCurrentInstance();

const outboundList = ref([]);
const open = ref(false);

const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);

const total = ref(0);
const title = ref("");

const planList = ref([]); //从供应计划中添加列表

const storeTypeList = ref([]);  //出库类型下拉数据
const wzTypeList = ref([]);   //施工队下拉数据

const personList = ref([]);   //理货员下拉数据
const orderNum = ref("")    //搜索条件：订单号
const showContent = ref(false); // 控制打印内容是否显示
const dateStr = ref("")   //打印单据生成的日期
const printList = ref([]) //要打印的数据列表
const kwOptions = ref([]);  //库位下拉
const borrowTime = ref([])
const data = reactive({
  form: {},
  storeData: {
    ckType: "JLCK"
  },   //借料数据
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    isBorrowed: "1",
    //   borrowTime:[],     //借料时间
    xmNo: "",
    sapNo: "",
    billNo: "",
    ids: []
  },
  outQueryParams: {
    xmNo: "",
    wlNo: "",
    sapNo: "",
    pageNum: 1,
    pageSize: 50,
    isChuku: 0,
  },
  rules: {
    ckType: [{ required: true, message: "出库类型不能为空", trigger: "change" }],
    teamCode: [{ required: true, message: "施工队不能为空", trigger: "change" }],
    borrowTime: [{ required: true, message: "借用时间不能为空", trigger: "change" }],
    operator: [{ required: true, message: "理货员不能为空", trigger: "change" }]
  },
  printViewInfo: {
    id: "printMe", //打印区域的唯一的id属性
    popTitle: '入库信息打印',


    beforeOpenCallback() {
      showContent.value = false;
    }, // 开始打印之前的callback
    openCallback() { }, // 调用打印时的callback
    closeCallback() { }, // 关闭打印的callback(无法区分确认or取消)
    clickMounted() { },

    standard: '',
    extarCss: ''
  }
});

const { queryParams, storeData, rules, form, printViewInfo, outQueryParams } = toRefs(data);

const statusList = ref([
  { value: 1, label: '未还料', elTagType: "danger", elTagClass: null },
  { value: 2, label: '已还料', elTagType: "primary", elTagClass: null }
])

const dictTagData = () => {
  return statusList.value.map(item => ({
    ...item,
    value: String(item.value)
  }));
}

/** 查询库存单据主列表 */
function getList() {
  loading.value = true;
  listStock({ ...queryParams.value, bizType: '2' }).then(response => {
    outboundList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
getList();

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  planList.value = []
  storeData.value = {
    ckType: "JLCK"
  }
  orderNum.value = ""
  proxy.resetForm("stockRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  if (borrowTime.value && borrowTime.value.length > 0) {
    queryParams.value.startDate = borrowTime.value[0]
    queryParams.value.endDate = borrowTime.value[1]
  } else {
    queryParams.value.startDate = ""
    queryParams.value.endDate = ""
  }
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  borrowTime.value = []
  handleQuery();
}

//出库 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(info => info.id)
}
//打印单据  多选框选中数据
function printSelectionChange(selection) {
  printList.value = selection
  queryParams.value.ids = selection.map(item => item.id)
  // console.log(queryParams.value.ids)
}
//打印单据
function handlePrint() {
  if (printList.value.length == 0) {
    proxy.$modal.msgError("请勾选数据");
    return
  }
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份从0开始，需要加1
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  dateStr.value = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
  showContent.value = true
}


/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加借料单据";
  //获取出库类型下拉数据
  listOuttype({ pageNum: 1, pageSize: 50 }).then(response => {
    storeTypeList.value = response.rows
  })
  //获取施工队下拉数据
  listConstruction({ pageNum: 1, pageSize: 50 }).then(response => {
    wzTypeList.value = response.rows
  })

  //理货员下拉数据
  personListDict().then(response => {
    personList.value = response.data
  })


}
//查询库存中数据 搜索
function searchPlan() {
  if (!outQueryParams.value.xmNo && !outQueryParams.value.wlNo && !outQueryParams.value.sapNo) {
    proxy.$modal.msgWarning("查询条件不能为空");
    return
  }
  listStockByXm(outQueryParams.value).then(response => {
    response.rows.forEach(e => {
      e.remark = e.remark
    });
    if (response.rows.length == 0) {
      proxy.$modal.msgWarning("库存无数据");
      planList.value = []
    } else {
      planList.value = response.rows
    }
  })


}


/** 借料出库 提交按钮 */
function submitForm() {
  proxy.$refs["stockRef"].validate(valid => {

    if (valid) {
      if (ids.value.length == 0) {
        proxy.$modal.msgError("请勾选数据");
        return
      } 
      let dataList = planList.value.filter(x => ids.value.includes(x.id)).map(info => ({
        id: info.id,
        realQty: info.realQty,
        remark: info.remark
      }))
      let submitData = {
        rkBill: {
          borrowTime: storeData.value.borrowTime,  //借用时间
          returnTime: storeData.value?.returnTime ,	// 归还时间
          teamCode: storeData.value.teamCode,  //施工队
          operator: storeData.value.operator,  //理货员
          xmNoCk: storeData.value.xmNoCk ? storeData.value.xmNoCk : "",  //原本要出的项目号-借用方项目
          xmMsCk: storeData.value.xmMsCk ? storeData.value.xmMsCk : "",   //原本要出的项目描述-借用方项目号
          bizType: '2',
          operationType:'JLCK'
        },
        rkInfoList: dataList,
      }
      addOutbound(submitData).then(response => {
        proxy.$modal.msgSuccess("操作成功");
        open.value = false;
        getList();
      });
    }
  });
}

const returnId = ref([])
const returnData = ref({})
const returnOpen = ref(false)
//打开还料弹框
function handleReturn(row) {
  returnId.value[0] = row.id
  returnData.value.returnTime = ''
  returnOpen.value = true
}
//还料保存
function returnForm() {
  if (!returnData.value.returnTime) {
    proxy.$modal.msgError("请选择还料时间");
    return
  }
  let ids = JSON.parse(JSON.stringify(returnId.value))
  let items = ids.map(item => {
    return {
      recordId: item,
      returnTime: returnData.value.returnTime
    }
  });
  returnBill({items}).then(response => {
    proxy.$modal.msgSuccess("操作成功");
    returnOpen.value = false;
    getList();
  });
}
//取消还料弹框
function cancelReturn() {
  returnOpen.value = false
}


/** 导出按钮操作 */
function handleExport() {
  proxy.download('wisdom/stock/export', {
    ...queryParams.value
  }, `stock_${new Date().getTime()}.xlsx`)
}

const warehouseData = ref([])   //仓库下拉列表
function warehouseFun() {
  //所属仓库下拉数据
  warehouseAll().then(response => {
    warehouseData.value = response.data
  })
}
warehouseFun()
//库位字典
function pcodeList(value) {
  console.log(value)
  getKwAllList(value[1]).then(response => {
    kwOptions.value = response.data
    returnData.value.pcode = ""
  })
}



</script>
<style scoped lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.titleBox {
  text-align: center;
  margin-bottom: 20px;
}

.printMeBox {
  div {
    line-height: 30px;
  }
}

.topBox {
  display: flex;
  flex-wrap: wrap;
}

.topEveryBox {
  width: 50%;
}

.tableBox {
  margin-top: 10px;
}

.oneLineBox {
  display: flex;
}

.everyBox {
  width: 25%;
}

.bottomBox {
  margin-top: 10px;
}
</style>