byte-sailing-vue/src/views/order-management/afterSales/index.vue

<script>
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";

import byTable from "@/components/by-table/index.js";
import addAfterSales from "./addAfterSales.vue";

import * as API from "@/api/order-management/afterSales/index.js";
// import { customerList } from "@/api/product-material/customer/index.js";

export default {
  components: {
    test,
    byTable,
    query,
    addAfterSales,
  },
  data() {
    return {
      afterSalesTypeList: [],
      orderStatusList: [],
      afterSalesStatusList: [],
      customerSelectList: [],
      btnForm: {
        otherButton: {
          list: [
            {
              name: "tiann",
              methodsText: "add",
              type: "primary",
              add: () => {
                this.handleAdd();
              },
            },
          ],
        },
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        type: "",
        status: "",
      },
      selectConfig: [
        {
          label: "售后类型",
          prop: "type",
          data: [],
        },
        {
          label: "状态",
          prop: "status",
          data: [],
        },
      ],
      tableList: [],
      total: 0,
      loading: false,
      titleText: "",
      open: false,
      form: {
        id: "",
        customerId: "",
        countryId: "",
        provinceId: "",
        cityId: "",
        detailedAddress: "",
        cause: "",
        afterSalesDetailsList: [],
      },
      isAdd: false,
      openOne: false,
      recordsList: [],
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.afterSalesTypeList = businessDictData.find(
      (item) => item.code === "afterSalesType"
    ).children;
    this.selectConfig[0].data = this.afterSalesTypeList.map((item) => ({
      label: item.dictValue,
      value: item.dictKey,
    }));
    this.orderStatusList = businessDictData.find(
      (item) => item.code === "orderStatus"
    ).children;
    this.afterSalesStatusList = businessDictData.find(
      (item) => item.code === "afterSalesStatus"
    ).children;
    this.selectConfig[1].data = this.afterSalesStatusList.map((item) => ({
      label: item.dictValue,
      value: item.dictKey,
    }));
    // customerList({ pageNum: 1, pageSize: 999 }).then((res) => {
    //   this.customerSelectList = res.data.data.records;
    // });
    API.customerSelectData().then((res) => {
      this.customerSelectList = res.data.data;
    });
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      API.afterSalesListV2(this.queryParams).then(
        (res) => {
          this.tableList = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        },
        (err) => {
          console.log("afterSalesListV2: " + err);
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.getList();
    },
    handleAdd() {
      this.titleText = "添加售后记录";
      this.isAdd = true;
      this.form = {
        id: "",
        customerId: "",
        countryId: "",
        provinceId: "",
        cityId: "",
        detailedAddress: "",
        cause: "",
        afterSalesDetailsList: [],
      };
      this.open = true;
    },
    handleCancel() {
      this.open = false;
    },
    handleFollow(row) {
      this.titleText = "跟进";
      this.isAdd = false;
      this.form = {
        afterSalesInfoId: row.id,
        afterSalesStatus: "",
        remark: "",
      };
      this.open = true;
    },
    handleSubmit() {
      if (this.isAdd) {
        API.afterSalesAddV2(this.form).then(
          () => {
            this.msgSuccess("添加成功");
            this.$refs.addAfterSales.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("afterSalesAddV2: " + err);
            this.$refs.addAfterSales.loading = false;
          }
        );
      } else {
        API.afterSalesFollowV2(this.form).then(
          () => {
            this.msgSuccess("操作成功");
            this.$refs.addAfterSales.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("afterSalesFollowV2: " + err);
            this.$refs.addAfterSales.loading = false;
          }
        );
      }
    },

    showAddress(row) {
      return (
        <div>
          {row.countryName} , {row.provinceName} , {row.cityName}
        </div>
      );
    },
    lookRecords(row) {
      this.msgSuccess("数据请求中，请稍后！");
      API.followRecords({ id: row.id }).then((res) => {
        this.recordsList = res.data.data;
        if (this.recordsList.length > 0) {
          this.openOne = true;
        } else {
          this.msgInfo("未有跟进记录！");
        }
      });
    },
  },
};
</script>


<template>
  <div class="box-card">
    <el-card class="header">
      <el-button type="primary" size="mini" @click="handleAdd">
        添加售后记录
      </el-button>
    </el-card>
    <el-card class="body-main">
      <query
        :selectConfig="selectConfig"
        :req="queryParams"
        :isShowMore="true"
        @handleQuery="handleQuery"
        @handleMore="
          () => {
            queryDialog = true;
          }
        "
      ></query>
      <el-table :data="tableList" v-loading="loading">
        <el-table-column
          label="售后类型"
          align="left"
          :formatter="(row) => dictDataEcho(row.type, afterSalesTypeList)"
        />
        <!-- <el-table-column label="订单编号" align="left" prop="code">
          <template slot-scope="scope">
            <div class="show_underline">
              {{ scope.row.code }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="客户名称" align="left" prop="customerName" />
        <el-table-column label="售货原因" align="left" prop="cause" />
        <!-- <el-table-column
          label="订单金额"
          align="left"
          prop="amountMoney"
          width="140"
        />
        <el-table-column
          label="收件城市"
          align="left"
          width="150"
          :formatter="showAddress"
        />
        <el-table-column label="详细地址" align="left" prop="detailedAddress" />
        <el-table-column
          label="下单时间"
          align="left"
          prop="orderTime"
          width="150"
        />
        <el-table-column
          label="登记时间"
          align="left"
          prop="createTime"
          width="150"
        /> -->
        <el-table-column
          label="状态"
          align="left"
          :formatter="(row) => dictDataEcho(row.status, afterSalesStatusList)"
        />
        <!-- <el-table-column
          label="订单状态"
          align="left"
          width="120"
          :formatter="(row) => dictDataEcho(row.status, orderStatusList)"
        /> -->
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button type="text" @click="lookRecords(scope.row)"
              >跟进记录
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.status !== 6"
              @click="handleFollow(scope.row)"
              >跟进
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      :title="titleText"
      :visible.sync="open"
      v-if="open"
      width="30%"
      top="60px"
    >
      <add-after-sales
        :form="form"
        :isAdd="isAdd"
        :customerSelectList="customerSelectList"
        :afterSalesTypeList="afterSalesTypeList"
        :afterSalesStatusList="afterSalesStatusList"
        @submit="handleSubmit"
        @cancel="handleCancel"
        ref="addAfterSales"
      ></add-after-sales>
    </el-dialog>

    <el-dialog
      title="跟进记录"
      :visible.sync="openOne"
      v-if="openOne"
      width="30%"
      top="100px"
    >
      <div v-for="item in recordsList" :key="item.id" class="record-item">
        <div class="head">
          <span class="time"> 跟进时间：{{ item.createTime }} </span>
          <span class="name"> {{ item.purchaseName }} </span>
        </div>
        <div class="body">{{ item.remark }}</div>
      </div>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .header {
    // height: 100px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .body-main {
    flex: 1;
    overflow-y: auto !important;
  }
}
.record-item {
  margin-bottom: 20px;
  .head {
    margin-bottom: 10px;
    display: flex;
    span {
      font-size: 12px;
      color: #8f8b8b;
    }
    .time {
      flex: 1;
    }
    .name {
      width: 50px;
    }
  }
  .body {
    color: #000;
    font-size: 14px;
  }
}
</style>