order.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <div>
  3. <!-- <ul class="flex space-x-2 rtl:space-x-reverse">
  4. <li>
  5. <a href="javascript:;" class="text-primary hover:underline">首页</a>
  6. </li>
  7. <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
  8. <span>订单列表</span>
  9. </li>
  10. </ul> -->
  11. <div class="panel pb-0 mt-6">
  12. <div class="flex md:items-center md:flex-row flex-col mb-5 gap-5">
  13. <div class="flex items-center gap-5 ltr:ml-auto rtl:mr-auto">
  14. <div class="dropdown">
  15. <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="0"
  16. class="align-middle">
  17. <button type="button"
  18. class="flex items-center border font-semibold border-[#e0e6ed] dark:border-[#253b5c] rounded-md px-4 py-2 text-sm dark:bg-[#1b2e4b] dark:text-white-dark">
  19. <span class="ltr:mr-1 rtl:ml-1">Columns</span>
  20. <icon-caret-down class="w-5 h-5" />
  21. </button>
  22. <template #content>
  23. <ul class="whitespace-nowrap">
  24. <template v-for="(col, i) in cols" :key="i">
  25. <li>
  26. <div class="flex items-center px-4 py-1">
  27. <label class="cursor-pointer mb-0">
  28. <input type="checkbox" class="form-checkbox" :id="`chk-${i}`"
  29. :value="col.field" @change="col.hide = !$event.target.checked"
  30. :checked="!col.hide" />
  31. <span :for="`chk-${i}`" class="ltr:ml-2 rtl:mr-2">{{ col.title
  32. }}</span>
  33. </label>
  34. </div>
  35. </li>
  36. </template>
  37. </ul>
  38. </template>
  39. </Popper>
  40. </div>
  41. <div>
  42. <input v-model="search" type="text" class="form-input" placeholder="Search..." />
  43. </div>
  44. </div>
  45. </div>
  46. <div class="datatable">
  47. <vue3-datatable :rows="rows" :columns="cols" :totalRows="rows?.length" :sortable="true" :search="search"
  48. skin="whitespace-nowrap bh-table-hover"
  49. firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
  50. lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
  51. previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
  52. nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'>
  53. <template #order_vo.order_time="data">
  54. {{ formatDate(data.value.order_vo.order_time) }}
  55. </template>
  56. <template #order_vo.member_id="data">
  57. {{ customerName(data.value.order_vo.member_id) }}
  58. </template>
  59. <template #warehouse_id="data">
  60. {{ warehouseName(data.value.warehouse_id) }}
  61. </template>
  62. <template #order_vo.pay_type="data">
  63. {{ collectingAccountName(data.value.order_vo.pay_type) }}
  64. </template>
  65. <template #order_vo.send_type="data">
  66. {{ deliveryName(data.value.order_vo.send_type) }}
  67. </template>
  68. <template #order_vo.status="data">
  69. {{ orderTypeName(data.value.order_vo.status) }}
  70. </template>
  71. <!-- 定义操作栏的模板 -->
  72. <template #actions="data">
  73. <button @click="deliveryOrder(data)" class="btn btn-primary">发货</button>
  74. </template>
  75. <template #isActive="data">
  76. <!-- <span class="capitalize" :class="data.value.isActive ? 'text-success' : 'text-danger'">{{
  77. data._rawValue }}</span> -->
  78. </template>
  79. </vue3-datatable>
  80. </div>
  81. </div>
  82. </div>
  83. </template>
  84. <script setup lang="ts">
  85. import { ref, onMounted } from 'vue';
  86. import Vue3Datatable from '@bhplugin/vue3-datatable';
  87. import { useAppStore } from '@/stores/index';
  88. import { useRouter } from 'vue-router';
  89. import { useMeta } from '@/composables/use-meta';
  90. import { orderApi, infoApi, dictionaryAPI } from '@/api/api'
  91. import IconBell from '@/components/icon/icon-bell.vue';
  92. import IconCaretDown from '@/components/icon/icon-caret-down.vue';
  93. useMeta({ title: 'Column Chooser Table' });
  94. const router = useRouter();
  95. const store = useAppStore();
  96. const search = ref('');
  97. const rows = ref([]); // 初始化rows为响应式引用
  98. const customerList = ref([])//初始化客户列表
  99. const warehouseList = ref([])//初始化客户列表
  100. const collectingAccountList = ref([])//初始化客户列表
  101. const deliveryList = ref([])//初始化客户列表
  102. const orderTypeList = ref([])//初始化客户列表
  103. const cols = ref([
  104. { field: 'sn', title: '订单编号', isUnique: true, hide: false },
  105. { field: 'order_vo.member_id', title: '客户', hide: false },
  106. { field: 'order_vo.order_time', title: '下单时间', hide: false },
  107. { field: 'warehouse_id', title: '仓库名称', hide: false },
  108. { field: 'order_vo.send_type', title: '配送方式', hide: false },
  109. { field: 'order_vo.pay_type', title: '付款方式', hide: false },
  110. /* { field: 'pay_price', title: '实付金额', hide: false }, */
  111. { field: 'order_vo.status', title: '订单状态', type: '', hide: true },
  112. /* { field: 'extension', title: '延期次数', type: '', hide: true },
  113. { field: 'type', title: '订单类型', type: '', hide: true }, */
  114. { field: 'actions', title: '操作', hide: false }
  115. ]);
  116. /* 处理订单时间格式 */
  117. const formatDate = (date) => {
  118. if (date) {
  119. const dt = new Date(date * 1000);
  120. const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
  121. const day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
  122. return dt.getFullYear() + '/' + month + '/' + day;
  123. }
  124. return '';
  125. };
  126. /* 处理客户名称 */
  127. const customerName = (value) => {
  128. if (value && customerList.value && customerList.value.data && customerList.value.data.data) {
  129. const type = customerList.value.data.data.find(type => type.id === value);
  130. return type ? type.name : '';
  131. }
  132. }
  133. /* 仓库名称 */
  134. const warehouseName = (value) => {
  135. if (value && warehouseList.value && warehouseList.value.data) {
  136. const type = warehouseList.value.data.find(type => type.id === value);
  137. return type ? type.name : '';
  138. }
  139. }
  140. /* 支付列表*/
  141. const collectingAccountName = (value) => {
  142. if (value && collectingAccountList.value && collectingAccountList.value.data && collectingAccountList.value.data.data) {
  143. const type = collectingAccountList.value.data.data.find(type => type.id === value);
  144. return type ? type.name : '';
  145. }
  146. }
  147. /* 配送方式*/
  148. const deliveryName = (value) => {
  149. if (value && deliveryList.value && deliveryList.value.data && deliveryList.value.data.data) {
  150. const type = deliveryList.value.data.data.find(type => type.value === value);
  151. return type ? type.label : '';
  152. }
  153. }
  154. /* 订单状态*/
  155. const orderTypeName = (value) => {
  156. if (value && orderTypeList.value && orderTypeList.value.data && orderTypeList.value.data.data) {
  157. const type = orderTypeList.value.data.data.find(type => type.value === value);
  158. return type ? type.label : '';
  159. }
  160. }
  161. onMounted(() => {
  162. getOrderList()
  163. getInforList()
  164. });
  165. /* 获取订单列表的值 */
  166. const getOrderList = async () => {
  167. orderApi.orderList({ page_no: 1, page_size: 10, selectType: 'to_be_send' }).then((res: any) => {
  168. rows.value = res.data.records; // 更新rows的值
  169. });
  170. };
  171. /* 获取仓库,字典,客户信息 */
  172. const getInforList = async () => {
  173. warehouseList.value = await infoApi.warehouseList({})//获取仓库列表
  174. customerList.value = await infoApi.customer({})//获取客户列表
  175. collectingAccountList.value = await infoApi.collectingAccount({})//获取支付方式列表
  176. deliveryList.value = await dictionaryAPI.getPage({ dictType: "order_send_type" })//获取配送方式
  177. orderTypeList.value = await dictionaryAPI.getPage({ dictType: "Sale_order_send_status" })//获取订单状态
  178. }
  179. const deliveryOrder = async (row) => {
  180. router.replace({
  181. name: 'shippingPage',
  182. params: { id: row.value.id }
  183. });
  184. }
  185. </script>