123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680 |
- <template>
- <div>
- <div>
- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
- <el-tab-pane label="入库明细" name="second"></el-tab-pane>
- <el-tab-pane label="出库明细" name="first"></el-tab-pane>
- </el-tabs>
- </div>
- <div class="btn"></div>
- <div class="search">
- <el-form ref="advancedForm" :model="advancedForm" label-width="160px">
- <el-row>
- <el-col :span="activeName == 'first' ? 12 : 8">
- <el-form-item label="出入时间">
- <el-date-picker
- v-model="advancedForm.goodsExchange_time_range"
- type="daterange"
- align="center"
- :editable="false"
- unlink-panels
- :clearable="true"
- :default-time="['00:00:00', '23:59:59']"
- range-separator="-"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- value-format="timestamp"
- :picker-options="{
- disabledDate(time) {
- return (
- time.getTime() - 1 >=
- new Date(
- new Date().getFullYear(),
- new Date().getMonth(),
- new Date().getDate()
- ).getTime() +
- 86400000 -
- 1
- );
- },
- shortcuts: MixinPickerShortcuts,
- }"
- >
- </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="仓库">
- <el-select v-model="advancedForm.warehouse_id" clearable>
- <el-option
- v-for="item in warehouseList"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="6" v-if="activeName == 'second'">
- <el-form-item label="入库类型">
- <el-select v-model="advancedForm.type" clearable>
- <el-option
- v-for="item in entryList"
- :key="item.id"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8" v-if="activeName == 'second'">
- <el-form-item label="客户名称">
- <el-input
- v-model="advancedForm.customer_name"
- clearable
- placeholder="请输入客户名称"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="8" v-if="activeName == 'second'">
- <el-form-item label="手机号">
- <el-input
- v-model="advancedForm.customer_phone"
- clearable
- placeholder="请输入手机号"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <el-button @click="advancedSearchEvent"> 搜索 </el-button>
- </div>
- <en-table-layout
- :tableData="tableData.data"
- :loading="loading"
- @selection-change="handleSelectionChange"
- >
- <div slot="toolbar" class="inner-toolbar">
- <div class="toolbar-btns">
- <el-button
- size="mini"
- v-if="checkPermission(['addInventory']) && activeName == 'second'"
- type="primary"
- @click="handleAddGoodsExchange"
- >新增入库</el-button
- >
- <el-button
- size="mini"
- v-if="
- checkPermission(['goodsExchangeAdd']) && activeName == 'first'
- "
- type="primary"
- @click="handleShiftGoodsExchange"
- >新增出库</el-button
- >
- <!-- <el-button
- v-if="checkPermission(['goodsExchange:del'])"
- size="mini"
- @click="handleDeleteGoodsExchange()"
- type="danger"
- :disabled="multipleSelection.length === 0"
- >删除</el-button
- > -->
- </div>
- </div>
- <template slot="table-columns">
- <el-table-column type="selection" width="55" />
- <el-table-column
- v-if="activeName == 'first'"
- prop="sn"
- label="出库单号"
- >
- <template slot-scope="scope">
- {{ scope.row.sn }}
- </template>
- </el-table-column>
- <el-table-column v-else prop="sn" label="入库单号">
- <template slot-scope="scope">
- {{ scope.row.sn }}
- </template>
- </el-table-column>
- <el-table-column prop="warehouse_id" label="仓库名称">
- <template slot-scope="scope">
- {{ warehouseName(scope.row.warehouse_id) }}
- </template>
- </el-table-column>
- <el-table-column prop="warehouse_id" label="客户名称">
- <template slot-scope="scope">
- {{ scope.row.customer_name }}
- </template>
- </el-table-column>
- <el-table-column prop="warehouse_id" label="客户手机号">
- <template slot-scope="scope">
- {{ scope.row.customer_phone }}
- </template>
- </el-table-column>
- <el-table-column
- prop="memo"
- label="出库类型"
- v-if="activeName == 'first'"
- >
- <template slot-scope="scope">
- <span>{{ outName(scope.row.type) }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="memo" label="入库类型" v-else>
- <template slot-scope="scope">
- <span>{{ entryName(scope.row.type) }}</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="memo"
- label="入库时间"
- v-if="activeName == 'second'"
- >
- <template slot-scope="scope">
- <span>{{ scope.row.create_time | unixToDate }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="order_id_list" label="订单编号" />
- <el-table-column label="状态">
- <template slot-scope="scope">
- <span v-if="activeName == 'first'">{{
- scope.row.has_submit == "Y" ? "已出库" : "未出库"
- }}</span>
- <span v-else>{{
- scope.row.has_submit == "Y" ? "已入库" : "未入库"
- }}</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="memo"
- label="出库时间"
- v-if="activeName == 'first'"
- >
- <template slot-scope="scope">
- <span>{{ scope.row.create_time | unixToDate }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="goodsName" label="商品名称"></el-table-column>
- <el-table-column prop="memo" label="备注">
- <template slot-scope="scope">
- <span v-if="activeName == 'first'">{{ scope.row.notes }}</span>
- <span v-else>{{ scope.row.memo }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="450">
- <template slot-scope="scope">
- <el-button
- size="mini"
- v-if="checkPermission(['checkInventory'])"
- @click="handleAuditGoodsExchange(scope.row)"
- >查看</el-button
- >
- <el-button
- size="mini"
- v-if="
- scope.row.has_submit == 'N' &&
- checkPermission(['editInventory']) &&
- checkPermission(['goodsExchangeEdit']) &&
- activeName == 'first'
- "
- @click="handleEditGoodsExchange(scope.row)"
- >出库</el-button
- >
- <el-button
- size="mini"
- v-if="
- scope.row.has_submit == 'N' &&
- checkPermission(['editInventory']) &&
- checkPermission(['goodsExchangeEdit']) &&
- activeName == 'second'
- "
- @click="handleEditGoodsExchange(scope.row)"
- >入库</el-button
- >
- </template>
- </el-table-column>
- </template>
- <el-pagination
- v-if="tableData"
- slot="pagination"
- @size-change="handlePageSizeChange"
- @current-change="handlePageCurrentChange"
- :current-page="tableData.page_no"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="tableData.page_size"
- layout="total, sizes, prev, pager, next, jumper"
- :total="tableData.data_total"
- >
- </el-pagination>
- </en-table-layout>
- </div>
- </template>
- <script>
- import * as API_GoodsExchange from "@/api/goodsExchange";
- import Print from "print-js";
- import * as API_Setting from "@/api/setting";
- import { Foundation } from "~/ui-utils";
- import * as API_BasicSetting from "@/api/basicSetting";
- export default {
- name: "goodsExchange",
- data() {
- return {
- //仓库列表
- warehouseList: [],
- deptList: [],
- // 列表loading状态
- loading: false,
- // 列表参数
- params: {
- page_no: 1,
- page_size: 10,
- },
- // 高级搜索数据
- advancedForm: {},
- // 列表数据
- tableData: "",
- dialogVisible: false,
- // 当前已选择的行
- multipleSelection: [],
- goodsExchangeForm: {},
- activeName: "second",
- entryList: [],
- outList: [],
- };
- },
- mounted() {
- if (this.activeName == "first") {
- this.GET_GoodsExchangeList();
- } else {
- this.GET_WarehouseEntry();
- }
- this.GET_DeptList();
- this.GET_WarehouseList();
- },
- watch: {
- $route: function ({ query }) {
- this.params.page_no = 1;
- if (this.activeName == "first") {
- this.GET_GoodsExchangeList();
- } else {
- this.GET_WarehouseEntry();
- }
- },
- },
- methods: {
- //获取仓库名称
- outName(val) {
- let name = "";
- this.outList.map((el) => {
- if (el.value == val) {
- return (name = el.label);
- }
- });
- return name;
- },
- //获取仓库名称
- entryName(val) {
- let name = "";
- this.entryList.map((el) => {
- if (el.value == val) {
- return (name = el.label);
- }
- });
- return name;
- },
- //获取仓库名称
- warehouseName(val) {
- let name = "";
- this.warehouseList.map((el) => {
- if (el.id == val) {
- return (name = el.name);
- }
- });
- return name;
- },
- handleClick(tab, event) {
- this.activeName = tab.name;
- this.params.page_no = 1;
- if (tab.name == "first") {
- this.GET_GoodsExchangeList();
- } else {
- this.GET_WarehouseEntry();
- }
- },
- /** 状态 */
- statusFilter(val) {
- switch (val) {
- case "WAIT":
- return "待审核";
- case "NEW":
- return "新创建";
- case "CONFIRMED":
- return "已确认";
- case "RETURNED":
- return "已归还";
- case "COMPLETE":
- return "已完成";
- case "PASS":
- return "审核通过";
- case "REJECT":
- return "审核拒绝";
- default:
- return "";
- }
- },
- /** 编辑 */
- handleEditGoodsExchange(row) {
- if (this.activeName == "first") {
- this.$router.push({
- name: "goodsExchangeEdit",
- params: { id: row.id },
- });
- } else {
- this.$router.push({
- name: "editInventory",
- params: { id: row.id },
- });
- }
- },
- /** 提交审核 */
- handleSubmitGoodsExchange(row) {
- API_GoodsExchange.submitAuditGoodsExchange(row.id).then(() => {
- this.$message.success("提交成功!");
- this.GET_GoodsExchangeList();
- });
- },
- /** 撤回审核 */
- handleCancelGoodsExchange(row) {
- API_GoodsExchange.cancelGoodsExchange(row.id).then(() => {
- this.$message.success("撤回成功!");
- this.GET_GoodsExchangeList();
- });
- },
- handleAuditGoodsExchange(row) {
- if (this.activeName == "first") {
- this.$router.push({
- name: "checkInventory",
- params: {
- id: row.id,
- type: this.activeName,
- },
- });
- } else {
- //auditInventory
- this.$router.push({
- name: "checkInventory",
- params: {
- id: row.id,
- type: this.activeName,
- },
- });
- }
- },
- /** 获取仓库 */
- GET_WarehouseList() {
- API_BasicSetting.getWarehouseListAll().then((response) => {
- this.warehouseList = response;
- });
- },
- /** 获取部门 */
- GET_DeptList() {
- /* API_Setting.getDeptList().then((response) => {
- this.deptList = Foundation.buildTree(response, "0");
- }); */
- /* 入库类型 */
- API_Setting.getPage({ dictType: "warehouse_entry_type" }).then((res) => {
- this.entryList = res.data;
- });
- /* 出库类型 */
- API_Setting.getPage({ dictType: "out_warehouse_type" }).then((res) => {
- this.outList = res.data;
- });
- },
- /** 打印对账详情 */
- handlePrintGoodsExchange() {
- Print({
- printable: "deliverySheet",
- type: "html",
- targetStyles: ["*"],
- ignoreElements: ["no-logs", "goods-image", "no-btn"],
- });
- },
- handleDeleteGoodsExchange() {
- if (!this.multipleSelection || !this.multipleSelection.length)
- return this.$message.error("请先选择!");
- this.$confirm("确定要删除这些换货单吗?", "提示", { type: "warning" })
- .then(() => {
- const ids = this.multipleSelection.map((item) => item.id);
- API_GoodsExchange.deleteGoodsExchange(ids).then(() => {
- this.$message.success("删除成功!");
- this.GET_GoodsExchangeList();
- });
- })
- .catch(() => {});
- },
- /** 多选改变 */
- handleSelectionChange(val) {
- console.log("val=-", val);
- this.multipleSelection = val;
- },
- /** 分页大小发生改变 */
- handlePageSizeChange(size) {
- this.params.page_size = size;
- if (this.activeName == "first") {
- this.GET_GoodsExchangeList();
- } else {
- this.GET_WarehouseEntry();
- }
- },
- /** 分页页数发生改变 */
- handlePageCurrentChange(page) {
- this.params.page_no = page;
- if (this.activeName == "first") {
- this.GET_GoodsExchangeList();
- } else {
- this.GET_WarehouseEntry();
- }
- },
- // 新增出库
- handleShiftGoodsExchange() {
- this.$router.push({
- name: "goodsExchangeAdd",
- params: { callback: this.GET_GoodsExchangeList, type: "first" },
- });
- },
- /** 新增入库 */
- handleAddGoodsExchange() {
- this.$router.push({
- name: "addInventory",
- params: { callback: this.GET_GoodsExchangeList, type: "second" },
- });
- },
- /** 打印换货单 */
- handlePrintGoodsExchangeDialog(row) {
- this.GET_GoodsExchangeDetail(row.id);
- },
- /** 获取换货单详情页面数据 */
- GET_GoodsExchangeDetail(id) {
- API_GoodsExchange.getGoodsExchangeInfo(id).then((response) => {
- this.goodsExchangeForm = response;
- if (response.change_list && response.change_list.length) {
- var str = "";
- response.change_list.forEach(function (i) {
- str += i.product_name + "、";
- });
- }
- this.goodsExchangeForm.illustrate = str;
- this.dialogVisible = true;
- });
- },
- /** 搜索事件触发 */
- searchEvent(data) {
- this.params = {
- ...this.params,
- sn: data,
- };
- Object.keys(this.advancedForm).forEach((key) => delete this.params[key]);
- this.params.page_no = 1;
- this.GET_GoodsExchangeList();
- },
- /** 高级搜索事件触发 */
- advancedSearchEvent() {
- this.params = {
- ...this.params,
- ...this.advancedForm,
- };
- delete this.params.start_time;
- delete this.params.end_time;
- if (this.advancedForm.goodsExchange_time_range) {
- this.params.start_time = parseInt(
- Number(this.advancedForm.goodsExchange_time_range[0]) / 1000
- );
- this.params.end_time = parseInt(
- Number(this.advancedForm.goodsExchange_time_range[1]) / 1000
- );
- }
- delete this.params.goodsExchange_time_range;
- this.params.page_no = 1;
- if (this.activeName == "first") {
- this.GET_GoodsExchangeList();
- } else {
- this.GET_WarehouseEntry();
- }
- },
-
- /** 获取出库单列表 */
- GET_GoodsExchangeList() {
- this.loading = true;
- API_GoodsExchange.getWarehouseOut(this.params)
- .then((response) => {
- this.loading = false;
- this.tableData = response;
- })
- .catch(() => {
- this.loading = false;
- });
- },
- /* 获取入库单列表 */
- GET_WarehouseEntry() {
- this.loading = true;
- API_GoodsExchange.getWarehouseEntry(this.params)
- .then((response) => {
- this.loading = false;
- // 使用 Promise.all 处理所有异步请求
- Promise.all(
- response.data.map((el) => {
- return API_GoodsExchange.getGoodsExchangeInfo(el.id)
- .then((res) => {
- try {
- // 使用 map 获取所有商品名称,然后用逗号连接
- if (res && res.product_list && Array.isArray(res.product_list)) {
- el.goodsName = res.product_list
- .map((e) => (e && e.product_vo ? e.product_vo.name : '未知商品'))
- .join(", ");
- } else {
- el.goodsName = '无商品信息';
- }
- } catch (error) {
- console.error('处理商品名称时出错:', error);
- el.goodsName = '获取商品信息失败';
- }
- return el;
- })
- .catch((error) => {
- console.error(`获取ID为${el.id}的商品信息失败:`, error);
- el.goodsName = '获取商品信息失败';
- return el; // 即使请求失败也返回原始元素
- });
- })
- )
- .then((results) => {
- console.log(response);
- this.tableData = response;
- })
- .catch((error) => {
- console.error('处理商品列表时出错:', error);
- this.tableData = response; // 确保即使出错也能显示基本数据
- });
- })
- .catch(() => {
- this.loading = false;
- });
- },
- },
- };
- </script>
- <style type="text/scss" lang="scss" scoped>
- .btn {
- padding: 30px 20px 5px;
- border-radius: 5px;
- background-color: #fff;
- .el-button {
- width: 100px;
- }
- }
- .search {
- display: flex;
- align-items: center;
- background: #fff;
- overflow: hidden;
- padding: 30px 10px 10px 10px;
- /deep/ .el-form-item {
- .el-form-item__content {
- .el-input {
- width: 200px;
- }
- }
- }
- .el-button {
- margin-top: -19px;
- margin-left: 20px;
- }
- }
- .print {
- margin-left: 790px;
- }
- .tips-t {
- display: flex;
- padding: 10px 0;
- div {
- flex: 1;
- text-align: left;
- padding-left: 70px;
- }
- }
- .tips-f {
- padding: 20px 0;
- }
- .face-image {
- display: block;
- width: 50px;
- height: 50px;
- margin: 0 auto;
- }
- /deep/ .el-dialog__body {
- padding: 10px 20px;
- }
- .el-table {
- min-height: 500px !important;
- }
- </style>
|