erp_wdly/src/views/WDLY/jd/backOrder/index.vue

<template>
  <div class="tenant">
    <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
             :selectConfig="selectConfig" :table-events="{
                    select: select,
                }" :action-list="[]" @get-list="getList" @moreSearch="() => (queryDialogVisible = true)">
    </byTable>
    <!--详情-->
    <el-dialog z-index="1100" title="退货单详情" v-if="dialogVisible" v-model="formData.data" width="1500px" v-loading="loading">
      <el-descriptions title="基础信息" />
      <el-form label-width="auto" :rules="rules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="退货单号：" :span="8">
              {{formData.data.returnId}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称：" :span="8">
              {{formData.data.providerName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建日期：" :span="8">
              {{formData.data.createDate}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="退货地配送中心名称：" :span="8">
              {{formData.data.fromDeliverCenterName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地配送中心名称：" :span="8">
              {{formData.data.toDeliverCenterName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货单状态名称：" :span="8">
              {{formData.data.returnStateName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="退货总数量：" :span="8">
              {{formData.data.totalNum}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货总金额：" :span="8">
              {{formData.data.totalPrice}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品库房名称：" :span="8">
              {{formData.data.stockName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="退货地仓库地址：" :span="8">
              {{formData.data.wareHouseAddress}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓储联系人电话：" :span="8">
              {{formData.data.wareHouseCell}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓储联系人：" :span="8">
              {{formData.data.wareHouseContact}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="退货单出库时间：" :span="8">
              {{formData.data.outStoreRoomDate}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货单品种数：" :span="8">
              {{formData.data.wareVariety}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货结算状态名称：" :span="8">
              {{formData.data.balanceStateName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="退货单结算时间：" :span="8">
              {{formData.data.balanceDate}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-descriptions title="退货单明细" />
          <el-table :data="formData.data.jdBackDetailsList" stripe style="width: 100%">
            <!--            <el-table stripe style="width: 100%">-->
            <el-table-column prop="wareId" label="京东商品编号" width="180">
              <template #default="scope">
                <span
                      :style="scope.row.productName=='' || scope.row.productName == undefined || scope.row.productName == 'undefined'?'color: red':''">{{scope.row.wareId}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="wareName" label="京东商品名称">
              <template #default="scope">
                <span
                      :style="scope.row.productName=='' || scope.row.productName == undefined || scope.row.productName == 'undefined'?'color: red':''">{{scope.row.wareName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="brandName" label="京东品牌名称" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="returnsPrice" label="申请退货价格" />
            <el-table-column prop="returnsNum" label="申请退货数量" />
            <el-table-column prop="factNum" label="实际退货数量" />
            <el-table-column prop="totalPrice" label="退货总金额" />
          </el-table>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
      </template>
    </el-dialog>

    <!--高级搜索-->
    <el-dialog :title="'高级检索'" v-model="queryDialogVisible" width="500px" destroy-on-close>
      <el-form :model="sourceList.pagination" label-width="100px" label-position="top">
        <el-form-item label="退货单号">
          <el-input v-model="sourceList.pagination.returnId" placeholder="请输入退货单号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleReset" size="large">重置</el-button>
        <el-button @click="handleQuery" type="primary" size="large">搜索</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { computed, nextTick, reactive, ref } from "vue";
const { proxy } = getCurrentInstance();

const router = useRouter();
const loading = ref(false);
const returnStates = ref([]);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});

let rules = ref({});
let dialogVisible = ref(false);
let queryDialogVisible = ref(false);

let modalType = ref("add");
const selectConfig = computed(() => {
  return [
    {
      label: "退货单状态",
      prop: "returnStateName",
      data: returnStates.value,
    },
  ];
});

const config = computed(() => {
  return [
    {
      attrs: {
        label: "退货单号",
        align: "left",
        width: 110,
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: row.returnId,
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              getDtl(row);
            },
          },
        ];
      },
    },
    {
      attrs: {
        label: "创建日期",
        prop: "createDate",
        align: "left",
        width: 160,
      },
    },
    {
      attrs: {
        label: "供应商名称",
        prop: "providerName",
        align: "left",
        width: 220,
      },
    },
    {
      attrs: {
        label: "退货地配送中心名称",
        prop: "fromDeliverCenterName",
        align: "left",
        "min-width": 220,
      },
    },
    {
      attrs: {
        label: "目的地配送中心名称",
        prop: "toDeliverCenterName",
        align: "left",
        "min-width": 220,
      },
    },
    {
      attrs: {
        label: "退货总数量",
        prop: "totalNum",
        align: "left",
        width: 100,
      },
    },
    {
      attrs: {
        label: "退货总金额",
        prop: "totalPrice",
        align: "left",
        width: 110,
      },
      render(totalPrice) {
        return proxy.moneyFormat(totalPrice, 2);
      },
    },
    {
      attrs: {
        label: "退货单出库时间",
        prop: "outStoreRoomDate",
        align: "left",
        width: 155,
      },
    },
    {
      attrs: {
        label: "退货单品种数",
        prop: "wareVariety",
        align: "left",
        width: 110,
      },
    },
    {
      attrs: {
        label: "是否确认",
        prop: "businessStatus",
        align: "left",
        width: 80,
      },
      render(value) {
        return value == "1" ? "已确认" : "未确认";
      },
    },
    {
      attrs: {
        label: "操作",
        width: "100",
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          //   {
          //     attrs: {
          //       label: "详情",
          //       type: "primary",
          //       text: true,
          //     },
          //     el: "button",
          //     click() {
          //       getDtl(row);
          //     },
          //   },
          row.businessStatus != 1
            ? {
                attrs: {
                  label: "退货单确认",
                  type: "danger",
                  text: true,
                },
                el: "button",
                click() {
                  ElMessageBox.confirm("是否确认当前退货单?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  }).then(() => {
                    confirmBusinessStatus(row);
                  });
                },
              }
            : {},
        ];
      },
    },
  ];
});

let formData = reactive({
  data: {
    coverList: [],
    audioList: [],
  },
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});

const getDictlist = async () => {
  proxy.getDictOne(["jd_return_states"]).then((res) => {
    returnStates.value = res["jd_return_states"].map((x) => ({
      label: x.dictValue,
      value: x.dictValue,
    }));
  });
};

const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/jdBack/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};

const openModal = () => {
  dialogVisible.value = true;
  modalType.value = "add";
  formData.data = {
    content: "",
  };
};
const selection = ref({
  data: [],
});
const select = (_selection, row) => {
  selection.value.data = _selection;
};

const getDtl = (row) => {
  modalType.value = "edit";
  proxy.post("/jdBack/detail", { id: row.id }).then((res) => {
    formData.data = res;
    dialogVisible.value = true;
  });
};

const confirmBusinessStatus = (row) => {
  let businessStatus = row.businessStatus == "1" ? 0 : 1;

  proxy
    .post("/jdBack/confirmBusinessStatus", {
      id: row.id,
      businessStatus: businessStatus,
    })
    .then(
      () => {
        ElMessage({
          message: "确认成功",
          type: "success",
        });
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => {
        console.log(err);
        submitLoading.value = false;
      }
    );
};

//高级搜索
const handleReset = () => {
  sourceList.value.pagination = {
    pageNum: sourceList.value.pagination.pageNum,
    pageSize: sourceList.value.pagination.pageSize,
    arr: [],
  };
  handleQuery();
};

const handleQuery = () => {
  if (
    sourceList.value.pagination.arr &&
    sourceList.value.pagination.arr.length > 1
  ) {
    sourceList.value.pagination.purchaseStartTime =
      sourceList.value.pagination.arr[0];
    sourceList.value.pagination.purchaseEndTime =
      sourceList.value.pagination.arr[1];
  }
  queryDialogVisible.value = false;
  getList();
};

getDictlist();
getList();
</script>

<style lang='scss' scoped>
.tenant {
  padding: 20px;
}
</style>