crud.tsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. import * as api from './api'
  2. import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
  3. import {inject} from 'vue'
  4. import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
  5. import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
  6. import XEUtils from 'xe-utils'
  7. export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
  8. const pageRequest = async (query: UserPageQuery) => {
  9. const params = parseQueryParams(context.value)
  10. XEUtils.assign(query, params)
  11. return await api.GetList(query)
  12. }
  13. const editRequest = async ({form, row}: EditReq) => {
  14. form.id = row.id
  15. return await api.UpdateObj(form)
  16. }
  17. const delRequest = async ({row}: DelReq) => {
  18. return await api.DelObj(row.id)
  19. }
  20. const addRequest = async ({form}: AddReq) => {
  21. return await api.AddObj(form)
  22. }
  23. //权限判定
  24. const hasPermissions = inject('$hasPermissions')
  25. return {
  26. crudOptions: {
  27. table: {
  28. height: 800,
  29. showSummary: true,
  30. stripe: false,
  31. headerCellStyle: {
  32. backgroundColor: '#f6f7fa', // 直接设置背景颜色
  33. borderRight: 'none',
  34. },
  35. // rowClassName() {
  36. // return '.el-table__footer td.el-table__cell'
  37. // },
  38. cellStyle: {
  39. border: 'none',
  40. borderBottom: '0.5px solid #ddd'
  41. },
  42. },
  43. container: {
  44. fixedHeight: false
  45. },
  46. actionbar: {
  47. show: false,
  48. buttons: {
  49. add: {
  50. show: false
  51. },
  52. }
  53. },
  54. search: {
  55. show: false
  56. },
  57. toolbar: {
  58. buttons: {
  59. search: {
  60. show: true
  61. },
  62. compact: {
  63. show: false
  64. }
  65. }
  66. },
  67. request: {
  68. pageRequest,
  69. addRequest,
  70. editRequest,
  71. delRequest,
  72. },
  73. rowHandle: {
  74. show: false,
  75. },
  76. columns: {
  77. id: {
  78. title: 'ID',
  79. column: {
  80. show: false
  81. },
  82. form: {
  83. show: false
  84. }
  85. },
  86. Name: {
  87. title: '日期',
  88. column: {
  89. width: 100,
  90. align: 'left',
  91. fixed: 'left',
  92. // border: '0.5px solid #ddd',
  93. cellStyle: {
  94. border: '1px solid #ddd',
  95. }
  96. },
  97. },
  98. Spend: {
  99. title: '花费',
  100. column: {
  101. align: 'center',
  102. width: 100,
  103. sortable: true,
  104. border: '0.5px solid #ddd',
  105. renderHeader() {
  106. return (
  107. <span>
  108. <el-tooltip placement="top"
  109. content="来自亚马逊广告API,亚马逊系统会在3天内将无效点击从统计数据中删除,因此过去3天内的花费可能会有所变化">
  110. <span>
  111. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  112. </span>
  113. </el-tooltip>
  114. <span>花费</span>
  115. </span>
  116. )
  117. }
  118. }
  119. },
  120. TotalSales: {
  121. title: '销售额',
  122. column: {
  123. align: 'center',
  124. width: 130,
  125. sortable: true,
  126. renderHeader() {
  127. return (
  128. <span>
  129. <el-tooltip placement="top" content="
  130. Seller类型店铺:<br />
  131. 销售额,来自亚马逊广告API。<br />
  132. 在点击广告后的7天内(商品推广)、14天内(品牌推广)、浏览或点击广告后的14天内(展示型推广)售<br/>出的广告商品及库存中其他商品的销售额;<br />
  133. 亚马逊系统此项数据最多可能延迟12小时更新。因此,“今天”日期范围内的销售数据可能会延迟。<br />
  134. 付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。<br />
  135. <br />
  136. Vendor类型店铺:<br />
  137. 销售额,来自亚马逊广告API。<br />
  138. 在点击广告后的14天内(商品推广)、14天内(品牌推广)、浏览或点击广告后的14天内(展示型推广)售<br />出的广告商品及库存中其他商品的销售额;<br />
  139. 亚马逊系统此项数据最多可能延迟12小时更新。因此,“今天”日期范围内的销售数据可能会延迟。<br />
  140. 付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。" raw-content>
  141. <span>
  142. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  143. </span>
  144. </el-tooltip>
  145. <span>销售额</span>
  146. </span>
  147. )
  148. }
  149. }
  150. },
  151. ACOS: {
  152. title: 'ACOS',
  153. column: {
  154. align: 'center',
  155. width: 130,
  156. sortable: true,
  157. renderHeader() {
  158. return (
  159. <span>
  160. <el-tooltip placement="top" content="广告投入产出比,系统计算,广告花费/广告带来的销售额。">
  161. <span>
  162. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  163. </span>
  164. </el-tooltip>
  165. <span>ACOS</span>
  166. </span>
  167. )
  168. }
  169. }
  170. },
  171. ROAS: {
  172. title: 'ROAS',
  173. column: {
  174. align: 'center',
  175. width: 130,
  176. sortable: true,
  177. renderHeader() {
  178. return (
  179. <span>
  180. <el-tooltip placement="top" content="广告支出回报,系统计算,广告带来的销售额/广告花费。">
  181. <span>
  182. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  183. </span>
  184. </el-tooltip>
  185. <span>ROAS</span>
  186. </span>
  187. )
  188. }
  189. }
  190. },
  191. CPC: {
  192. title: '点击成本',
  193. column: {
  194. align: 'center',
  195. sortable: true,
  196. width: 130,
  197. renderHeader() {
  198. return (
  199. <span>
  200. <el-tooltip placement="top" content="单次点击成本,系统计算,花费/点击量">
  201. <span>
  202. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  203. </span>
  204. </el-tooltip>
  205. <span>点击成本</span>
  206. </span>
  207. )
  208. }
  209. }
  210. },
  211. CPA: {
  212. title: '订单成本',
  213. column: {
  214. align: 'center',
  215. sortable: true,
  216. width: 130,
  217. renderHeader() {
  218. return (
  219. <span>
  220. <el-tooltip placement="top" content="平均每笔订单的花费,系统计算,花费/广告订单量">
  221. <span>
  222. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  223. </span>
  224. </el-tooltip>
  225. <span>订单成本</span>
  226. </span>
  227. )
  228. }
  229. }
  230. },
  231. Click: {
  232. title: '点击量',
  233. column: {
  234. align: 'center',
  235. width: 130,
  236. sortable: true,
  237. renderHeader() {
  238. return (
  239. <span>
  240. <el-tooltip placement="top" content="来自亚马逊广告API,广告被点击的次数。亚马逊系统会在3天内将无效点击去除。">
  241. <span>
  242. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  243. </span>
  244. </el-tooltip>
  245. <span>点击量</span>
  246. </span>
  247. )
  248. }
  249. }
  250. },
  251. CTR: {
  252. title: '点击率',
  253. column: {
  254. align: 'center',
  255. width: 130,
  256. sortable: true,
  257. renderHeader() {
  258. return (
  259. <span>
  260. <el-tooltip placement="top" content="点击率,系统计算,点击量/曝光量。">
  261. <span>
  262. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  263. </span>
  264. </el-tooltip>
  265. <span>点击率</span>
  266. </span>
  267. )
  268. }
  269. }
  270. },
  271. TotalPurchases: {
  272. title: '订单数',
  273. column: {
  274. align: 'center',
  275. width: 130,
  276. sortable: true,
  277. renderHeader() {
  278. return (
  279. <span>
  280. <el-tooltip placement="top" content="
  281. Seller类型店铺:<br />
  282. 订单数,来自亚马逊广告API。<br />
  283. 在点击广告后的7天内(商品推广)、14天内(品牌推广)、浏览或点击广告后的14天内(展示型推广)售<br />出的广告商品及库存中其他商品的订单数量;<br />
  284. 亚马逊系统此项数据最多可能延迟12小时更新。因此,“今天”日期范围内的销售数据可能会延迟。<br />
  285. 付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除。<br />
  286. <br />
  287. Vendor类型店铺:<br />
  288. 订单数,来自亚马逊广告API。<br />
  289. 在点击广告后的14天内(商品推广)、14天内(品牌推广)、浏览或点击广告后的14天内(展示型推广)售<br />出的广告商品及库存中其他商品的订单数量;<br />
  290. 亚马逊系统此项数据最多可能延迟12小时更新。因此,“今天”日期范围内的销售数据可能会延迟。<br />
  291. 付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除" raw-content>
  292. <span>
  293. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  294. </span>
  295. </el-tooltip>
  296. <span>订单数</span>
  297. </span>
  298. )
  299. }
  300. }
  301. },
  302. TotalUnitOrdered: {
  303. title: '销量',
  304. column: {
  305. align: 'center',
  306. width: 100,
  307. sortable: true,
  308. renderHeader() {
  309. return (
  310. <span>
  311. <el-tooltip placement="top" content="
  312. Seller类型店铺:<br />
  313. 销售件数,来自亚马逊广告API。<br />
  314. 在点击广告后的7天内(商品推广)、14天内(品牌推广)、浏览或点击广告后的14天内(展示型推广)售<br />出的广告商品及库存中其他商品的件数;<br />
  315. 亚马逊系统此项数据最多可能延迟12小时更新。因此,“今天”日期范围内的销售数据可能会延迟。<br />
  316. 付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。<br />
  317. <br />
  318. Vendor类型店铺:<br />
  319. 销售件数,来自亚马逊广告API。<br />
  320. 在点击广告后的14天内(商品推广)、14天内(品牌推广)、浏览或点击广告后的14天内(展示型推广)售<br />出的广告商品及库存中其他商品的件数;<br />
  321. 亚马逊系统此项数据最多可能延迟12小时更新。因此,“今天”日期范围内的销售数据可能会延迟。<br />
  322. 付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。" raw-content>
  323. <span>
  324. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  325. </span>
  326. </el-tooltip>
  327. <span>销量</span>
  328. </span>
  329. )
  330. }
  331. }
  332. },
  333. Impression: {
  334. title: '曝光量',
  335. column: {
  336. align: 'center',
  337. width: 130,
  338. sortable: true,
  339. renderHeader() {
  340. return (
  341. <span>
  342. <el-tooltip placement="top" content="来自亚马逊广告API,广告被展示的次数。">
  343. <span>
  344. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  345. </span>
  346. </el-tooltip>
  347. <span>曝光量</span>
  348. </span>
  349. )
  350. }
  351. }
  352. },
  353. PurchasesRate: {
  354. title: '转化率',
  355. column: {
  356. align: 'center',
  357. width: 130,
  358. sortable: true,
  359. renderHeader() {
  360. return (
  361. <span>
  362. <el-tooltip placement="top" content="广告转化率,系统计算,广告订单量/点击量*100%,展示型推广vCPM成本类型的广告活动不予计算。">
  363. <span>
  364. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  365. </span>
  366. </el-tooltip>
  367. <span>转化率</span>
  368. </span>
  369. )
  370. }
  371. }
  372. },
  373. CPM: {
  374. title: '千次曝光成本',
  375. column: {
  376. align: 'center',
  377. sortable: true,
  378. width: 150,
  379. renderHeader() {
  380. return (
  381. <span>
  382. <el-tooltip placement="top" content="点击率,系统计算,点击量/曝光量。">
  383. <span>
  384. <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
  385. </span>
  386. </el-tooltip>
  387. <span>千次曝光成本</span>
  388. </span>
  389. )
  390. }
  391. }
  392. }
  393. }
  394. }
  395. }
  396. }