index.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <script>
  2. import test from "@/components/form-test/index.vue";
  3. import query from "@/components/query/index.vue";
  4. import byTable from "@/components/by-table/index.js";
  5. import addAfterSales from "./addAfterSales.vue";
  6. import * as API from "@/api/order-management/afterSales/index.js";
  7. // import { customerList } from "@/api/product-material/customer/index.js";
  8. export default {
  9. components: {
  10. test,
  11. byTable,
  12. query,
  13. addAfterSales,
  14. },
  15. data() {
  16. return {
  17. afterSalesTypeList: [],
  18. orderStatusList: [],
  19. afterSalesStatusList: [],
  20. customerSelectList: [],
  21. btnForm: {
  22. otherButton: {
  23. list: [
  24. {
  25. name: "tiann",
  26. methodsText: "add",
  27. type: "primary",
  28. add: () => {
  29. this.handleAdd();
  30. },
  31. },
  32. ],
  33. },
  34. },
  35. queryParams: {
  36. pageNum: 1,
  37. pageSize: 10,
  38. keyword: "",
  39. type: "",
  40. afterSalesStatus: "",
  41. },
  42. selectConfig: [
  43. {
  44. label: "售后类型",
  45. prop: "type",
  46. data: [],
  47. },
  48. {
  49. label: "状态",
  50. prop: "afterSalesStatus",
  51. data: [],
  52. },
  53. ],
  54. tableList: [],
  55. total: 0,
  56. loading: false,
  57. titleText: "",
  58. open: false,
  59. form: {
  60. id: "",
  61. type: "",
  62. remark: "",
  63. },
  64. isAdd: false,
  65. };
  66. },
  67. created() {
  68. const businessDictData = JSON.parse(
  69. window.localStorage.getItem("businessDict")
  70. );
  71. this.afterSalesTypeList = businessDictData.find(
  72. (item) => item.code === "afterSalesType"
  73. ).children;
  74. this.selectConfig[0].data = this.afterSalesTypeList.map((item) => ({
  75. label: item.dictValue,
  76. value: item.dictKey,
  77. }));
  78. this.orderStatusList = businessDictData.find(
  79. (item) => item.code === "orderStatus"
  80. ).children;
  81. this.afterSalesStatusList = businessDictData.find(
  82. (item) => item.code === "afterSalesStatus"
  83. ).children;
  84. this.selectConfig[1].data = this.afterSalesStatusList.map((item) => ({
  85. label: item.dictValue,
  86. value: item.dictKey,
  87. }));
  88. // customerList({ pageNum: 1, pageSize: 999 }).then((res) => {
  89. // this.customerSelectList = res.data.data.records;
  90. // });
  91. API.customerSelectData().then((res) => {
  92. this.customerSelectList = res.data.data;
  93. });
  94. this.getList();
  95. },
  96. methods: {
  97. getList() {
  98. this.loading = true;
  99. API.afterSalesList(this.queryParams).then(
  100. (res) => {
  101. console.log(res, "ss");
  102. this.tableList = res.data.data.records;
  103. this.total = res.data.data.total;
  104. this.loading = false;
  105. },
  106. (err) => {
  107. console.log("afterSalesList: " + err);
  108. this.loading = false;
  109. }
  110. );
  111. },
  112. handleQuery() {
  113. this.getList();
  114. },
  115. handleAdd() {
  116. this.titleText = "添加售后记录";
  117. this.form = {
  118. id: "",
  119. type: "",
  120. remark: "",
  121. };
  122. this.isAdd = true;
  123. this.open = true;
  124. },
  125. handleCancel() {
  126. this.open = false;
  127. },
  128. handleFollow(row) {
  129. this.titleText = "售后跟进";
  130. this.form = {
  131. customerInfoId: row.customerInfoId,
  132. id: row.code,
  133. type: String(row.type),
  134. remarkOne: row.remark,
  135. orderInfoId: row.id,
  136. afterSalesStatus: "",
  137. remark: "",
  138. };
  139. this.isAdd = false;
  140. this.open = true;
  141. },
  142. handleSubmit() {
  143. if (this.isAdd) {
  144. API.afterSalesAdd(this.form).then(
  145. () => {
  146. this.msgSuccess("添加成功");
  147. this.$refs.addAfterSales.loading = false;
  148. this.open = false;
  149. this.getList();
  150. },
  151. (err) => {
  152. console.log("afterSalesAdd: " + err);
  153. this.$refs.addAfterSales.loading = false;
  154. }
  155. );
  156. } else {
  157. delete this.form.customerInfoId;
  158. delete this.form.remarkOne;
  159. delete this.form.id;
  160. delete this.form.type;
  161. API.afterSalesFollow(this.form).then(
  162. () => {
  163. this.msgSuccess("操作成功");
  164. this.$refs.addAfterSales.loading = false;
  165. this.open = false;
  166. this.getList();
  167. },
  168. (err) => {
  169. console.log("afterSalesFollow: " + err);
  170. this.$refs.addAfterSales.loading = false;
  171. }
  172. );
  173. }
  174. },
  175. showAddress(row) {
  176. return (
  177. <div>
  178. {row.countryName} , {row.provinceName} , {row.cityName}
  179. </div>
  180. );
  181. },
  182. },
  183. };
  184. </script>
  185. <template>
  186. <div class="box-card">
  187. <el-card class="header">
  188. <el-button type="primary" size="mini" @click="handleAdd">
  189. 添加售后记录
  190. </el-button>
  191. </el-card>
  192. <el-card class="body-main">
  193. <query
  194. :selectConfig="selectConfig"
  195. :req="queryParams"
  196. :isShowMore="true"
  197. @handleQuery="handleQuery"
  198. @handleMore="
  199. () => {
  200. queryDialog = true;
  201. }
  202. "
  203. ></query>
  204. <el-table :data="tableList" v-loading="loading">
  205. <el-table-column
  206. label="售后类型"
  207. align="left"
  208. width="120"
  209. :formatter="(row) => dictDataEcho(row.type, afterSalesTypeList)"
  210. />
  211. <el-table-column label="订单编号" align="left" prop="code">
  212. <template slot-scope="scope">
  213. <div
  214. style="
  215. color: #0084ff;
  216. cursor: pointer;
  217. text-decoration: underline;
  218. "
  219. >
  220. {{ scope.row.code }}
  221. </div>
  222. </template>
  223. </el-table-column>
  224. <el-table-column
  225. label="客户名称"
  226. align="left"
  227. prop="customerName"
  228. width="130"
  229. />
  230. <el-table-column
  231. label="订单金额"
  232. align="left"
  233. prop="amountMoney"
  234. width="140"
  235. />
  236. <el-table-column
  237. label="收件城市"
  238. align="left"
  239. width="150"
  240. :formatter="showAddress"
  241. />
  242. <el-table-column label="详细地址" align="left" prop="detailedAddress" />
  243. <el-table-column
  244. label="下单时间"
  245. align="left"
  246. prop="orderTime"
  247. width="150"
  248. />
  249. <el-table-column
  250. label="登记时间"
  251. align="left"
  252. prop="createTime"
  253. width="150"
  254. />
  255. <el-table-column
  256. label="状态"
  257. align="left"
  258. width="120"
  259. :formatter="
  260. (row) => dictDataEcho(row.afterSalesStatus, afterSalesStatusList)
  261. "
  262. />
  263. <el-table-column
  264. label="订单状态"
  265. align="left"
  266. width="120"
  267. :formatter="(row) => dictDataEcho(row.status, orderStatusList)"
  268. />
  269. <el-table-column label="操作" align="center" width="120">
  270. <template slot-scope="scope">
  271. <el-button type="text" @click="handleFollow(scope.row)"
  272. >跟进
  273. </el-button>
  274. </template>
  275. </el-table-column>
  276. </el-table>
  277. <pagination
  278. v-show="total > 0"
  279. :total="total"
  280. :page.sync="queryParams.pageNum"
  281. :limit.sync="queryParams.pageSize"
  282. @pagination="getList"
  283. />
  284. </el-card>
  285. <el-dialog
  286. :title="titleText"
  287. :visible.sync="open"
  288. v-if="open"
  289. width="30%"
  290. top="60px"
  291. >
  292. <add-after-sales
  293. :form="form"
  294. :isAdd="isAdd"
  295. :customerSelectList="customerSelectList"
  296. :afterSalesTypeList="afterSalesTypeList"
  297. :afterSalesStatusList="afterSalesStatusList"
  298. @submit="handleSubmit"
  299. @cancel="handleCancel"
  300. ref="addAfterSales"
  301. ></add-after-sales>
  302. </el-dialog>
  303. </div>
  304. </template>
  305. <style lang="scss" scoped>
  306. .box-card {
  307. height: calc(100vh - 110px);
  308. overflow-y: auto;
  309. display: flex;
  310. flex-direction: column;
  311. .header {
  312. // height: 100px;
  313. margin-bottom: 10px;
  314. box-sizing: border-box;
  315. }
  316. .body-main {
  317. flex: 1;
  318. }
  319. }
  320. </style>