index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  1. <script lang="ts" setup>
  2. import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
  3. import { onMounted, reactive, ref } from 'vue';
  4. import { VxeGridInstance, VxeGridListeners, VxeGridProps, VXETable } from 'vxe-table';
  5. import {
  6. exportTaskData,
  7. getCurrencyCodeSelect,
  8. getOperationSelect,
  9. getTasks,
  10. postCreateTask,
  11. postDeleteTask, postSendMessage,
  12. postUpdateTask,
  13. postUpdateTaskStatus
  14. } from '/src/views/reportManage/TaskManage/api.ts';
  15. import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
  16. import { Delete, Plus } from '@element-plus/icons-vue';
  17. import { message } from '/@/utils/message';
  18. import { labelInner } from 'echarts/types/src/label/labelStyle';
  19. import { dateType } from '/@/views/reportManage/TaskManage/utils/enum';
  20. const selectorRef = ref(null);
  21. const message = ref('');
  22. //表单
  23. interface taskRuleForm {
  24. number: string;
  25. name: string;
  26. country: string;
  27. brand: string;
  28. operation: string[];
  29. currency: string;
  30. currencyCodePlatform: string;
  31. line: string;
  32. ipaddress: string;
  33. company: string;
  34. platform: string;
  35. }
  36. const formSize = ref<ComponentSize>('default');
  37. const dialogFormVisible = ref(false);
  38. const taskRuleFormRef = ref<FormInstance>();
  39. const taskRuleForm = reactive({
  40. number: '',
  41. name: '',
  42. country: '',
  43. brand: '',
  44. operation: [],
  45. currency: '',
  46. currencyCodePlatform: '',
  47. });
  48. const resetForm = (formEl: FormInstance | undefined) => {
  49. if (!formEl) return;
  50. formEl.resetFields();
  51. };
  52. const rules = reactive<FormRules>({
  53. number: [{ required: true, message: '请输入平台编号', trigger: 'blur' },],
  54. name: [{ required: true, message: '请输入平台名称', trigger: 'blur' }],
  55. country: [{ required: true, message: '请输入国家', trigger: 'blur' }],
  56. brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
  57. operation: [{ required: true, message: '请选择运营', trigger: 'change' }],
  58. currency: [{ required: true, message: '请输入回款/余额币种', trigger: 'blur' }],
  59. currencyCodePlatform: [{ required: true, message: '请输入平台货币', trigger: 'blur' }],
  60. line: [{ required: true, message: '请输入线路', trigger: 'blur' }],
  61. ipaddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
  62. company: [{ required: true, message: '请输入注册公司', trigger: 'blur' }],
  63. platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
  64. });
  65. const currencyList = ref([]);
  66. //表格
  67. interface RowVO {
  68. platformNumber: string;
  69. platformName: string;
  70. country: string;
  71. brandName: string;
  72. user_name: string;
  73. currencyCode: string;
  74. currencyCodePlatform: string;
  75. child_user_number: number;
  76. user: [];
  77. line: string;
  78. ipaddress: string;
  79. company: string;
  80. platform: string;
  81. }
  82. const xGrid = ref<VxeGridInstance<RowVO>>();
  83. const originalDataMap = new Map();
  84. let allTasks = []; // 用于存储所有任务数据
  85. const gridOptions = reactive<VxeGridProps<RowVO>>({
  86. border: 'inner',
  87. keepSource: true,
  88. //showOverflow: true,
  89. height: 900,
  90. loading: false,
  91. round: true,
  92. toolbarConfig: {
  93. zoom: {
  94. iconIn: 'vxe-icon-fullscreen',
  95. iconOut: 'vxe-icon-minimize'
  96. },
  97. slots: {
  98. buttons: 'toolbar_buttons',
  99. tools: 'toolbar_tools'
  100. }
  101. },
  102. rowConfig: {
  103. isHover: true,
  104. },
  105. columnConfig: {
  106. resizable: true,
  107. },
  108. pagerConfig: {
  109. enabled: true,
  110. total: 20,
  111. currentPage: 1,
  112. pageSize: 20,
  113. pageSizes: [10, 20, 30],
  114. },
  115. editConfig: {
  116. trigger: 'manual',
  117. mode: 'row',
  118. showStatus: true,
  119. autoClear: false,
  120. },
  121. checkboxConfig: {
  122. reserve: true,
  123. highlight: true,
  124. range: true,
  125. },
  126. columns: [
  127. { type: 'checkbox', width: 50 },
  128. {
  129. field: 'platformNumber',
  130. title: '平台编号',
  131. editRender: { autofocus: '.vxe-input--inner' },
  132. slots: { edit: 'number_edit' },
  133. minWidth: 97
  134. },
  135. {
  136. field: 'platformName',
  137. title: '平台名称',
  138. editRender: { autofocus: '.vxe-input--inner' },
  139. slots: { edit: 'name_edit' },
  140. align: 'center',
  141. minWidth: 150
  142. },
  143. {
  144. field: 'country',
  145. title: '国家',
  146. editRender: { autofocus: '.vxe-input--inner' },
  147. slots: { edit: 'country_edit' },
  148. minWidth: 89,
  149. align: 'center'
  150. },
  151. {
  152. field: 'brandName',
  153. title: '品牌',
  154. editRender: {},
  155. slots: { edit: 'brand_edit' },
  156. align: 'center',
  157. minWidth: 89,
  158. },
  159. {
  160. field: 'user_name',
  161. title: '填写人',
  162. editRender: {},
  163. slots: { edit: 'operation_edit' },
  164. align: 'center',
  165. minWidth: 104
  166. },
  167. {
  168. field: 'operater',
  169. title: '运营',
  170. editRender: {},
  171. slots: { edit: 'operater_name_edit' },
  172. align: 'center',
  173. minWidth: 104
  174. },
  175. {
  176. field: 'currencyCode',
  177. title: '平台币种',
  178. editRender: {},
  179. slots: { edit: 'currency_edit' },
  180. align: 'center',
  181. minWidth: 89
  182. },
  183. {
  184. field: 'currencyCodePlatform',
  185. title: '回款/余额币种',
  186. editRender: {},
  187. slots: { edit: 'currencyCodePlatform_edit' },
  188. minWidth: 130,
  189. align: 'center'
  190. },
  191. { field: 'line', title: '线路', editRender: {}, slots: { edit: 'line_edit' }, align: 'center', minWidth: 89 },
  192. { field: 'ipaddress', title: 'IP地址', editRender: {}, slots: { edit: 'ipaddress_edit' }, minWidth: 138 },
  193. {
  194. field: 'company',
  195. title: '注册公司',
  196. editRender: {},
  197. slots: { edit: 'company_edit' },
  198. align: 'center',
  199. minWidth: 89
  200. },
  201. {
  202. field: 'platform',
  203. title: '平台',
  204. editRender: {},
  205. slots: { edit: 'platform_edit' },
  206. align: 'center',
  207. minWidth: 89
  208. },
  209. { field: 'status', title: '状态', slots: { default: 'status_default' }, align: 'center', minWidth: 89 },
  210. { title: '操作', width: 120, slots: { default: 'operate' } },
  211. ],
  212. data: [],
  213. });
  214. const operationList = ref([]);
  215. const gridEvents: VxeGridListeners<RowVO> = {
  216. pageChange({ currentPage, pageSize }) {
  217. if (gridOptions.pagerConfig) {
  218. gridOptions.pagerConfig.currentPage = currentPage;
  219. gridOptions.pagerConfig.pageSize = pageSize;
  220. getTaskList();
  221. }
  222. },
  223. };
  224. async function getTaskList(filters = {}) {
  225. try {
  226. gridOptions.loading = true;
  227. const response = await getTasks({
  228. page: gridOptions.pagerConfig.currentPage,
  229. limit: gridOptions.pagerConfig.pageSize,
  230. ...filters,
  231. });
  232. gridOptions.data = response.data;
  233. gridOptions.pagerConfig.total = response.total;
  234. } catch (error) {
  235. console.error('Error fetching task data:', error);
  236. } finally {
  237. gridOptions.loading = false;
  238. }
  239. }
  240. function filteredDataChange(newList) {
  241. if (selectorRef.value) {
  242. // 重置页码到第一页
  243. if (gridOptions.pagerConfig) {
  244. gridOptions.pagerConfig.currentPage = 1;
  245. }
  246. getTaskList(newList.value);
  247. }
  248. }
  249. const hasActiveEditRow = (row: RowVO) => {
  250. const $grid = xGrid.value;
  251. if ($grid) {
  252. return $grid.isEditByRow(row);
  253. }
  254. return false;
  255. };
  256. const editRowEvent = (row: RowVO) => {
  257. const $grid = xGrid.value;
  258. if ($grid) {
  259. // 在进入编辑状态前保存原始数据
  260. originalDataMap.set(row.id, { ...row });
  261. // 初始化 row.user 确保其与 row.user_name 同步
  262. if (!row.user || row.user.length === 0) {
  263. row.user = operationList.value
  264. .filter(op => row.user_name.includes(op.label))
  265. .map(op => op.value);
  266. }
  267. $grid.setEditRow(row);
  268. }
  269. };
  270. const clearRowEvent = (row: RowVO) => {
  271. const $grid = xGrid.value;
  272. if ($grid) {
  273. const originalData = originalDataMap.get(row.id);
  274. if (originalData) {
  275. // 恢复原始数据
  276. Object.assign(row, originalData);
  277. originalDataMap.delete(row.id);
  278. }
  279. $grid.clearEdit();
  280. }
  281. };
  282. async function deleteTask() {
  283. const $grid = xGrid.value;
  284. if ($grid) {
  285. const selectRecords = $grid.getCheckboxRecords();
  286. const selectedIds = selectRecords.map(record => record.id);
  287. // console.log(selectedIds);
  288. const obj = { keys: selectedIds };
  289. try {
  290. const resp = await postDeleteTask(obj);
  291. if (resp.code === 2000) {
  292. ElMessage({
  293. message: '删除成功',
  294. type: 'success',
  295. });
  296. await getTaskList();
  297. }
  298. } catch (e) {
  299. ElMessage({
  300. message: '删除失败',
  301. type: 'error',
  302. });
  303. }
  304. }
  305. }
  306. const isDeleteDisabled = computed(() => {
  307. const $grid = xGrid.value;
  308. return !$grid || $grid.getCheckboxRecords().length === 0;
  309. });
  310. const removeEvent = async () => {
  311. const $grid = xGrid.value;
  312. if ($grid) {
  313. const selectRecords = $grid.getCheckboxRecords();
  314. if (selectRecords.length > 0) {
  315. const type = await VXETable.modal.confirm('您确定要删除选中的数据?');
  316. if (type === 'confirm') {
  317. await deleteTask(selectRecords);
  318. await $grid.removeCheckboxRow();
  319. }
  320. } else {
  321. await VXETable.modal.message({ content: '请选择要删除的数据', status: 'error' });
  322. }
  323. }
  324. };
  325. const requiredFields = [
  326. { field: 'platformNumber', title: '平台编号' },
  327. { field: 'platformName', title: '平台名称' },
  328. { field: 'country', title: '国家' },
  329. { field: 'brandName', title: '品牌' },
  330. { field: 'user', title: '填写人' },
  331. { field: 'currencyCode', title: '平台币种' },
  332. { field: 'currencyCodePlatform', title: '回款/余额币种' },
  333. { field: 'line', title: '线路' },
  334. { field: 'ipaddress', title: 'IP地址' },
  335. { field: 'company', title: '注册公司' },
  336. { field: 'platform', title: '平台' },
  337. ];
  338. const validateRow = (row) => {
  339. for (const { field, title } of requiredFields) {
  340. if (!row[field] || (Array.isArray(row[field]) && row[field].length === 0)) {
  341. ElMessage.error(`${ title }不能为空`);
  342. return;
  343. }
  344. }
  345. if (!currencyList.value.includes(row.currencyCode)) {
  346. ElMessage.error('回款币种格式不正确,请重新选择');
  347. return;
  348. }
  349. if (!currencyList.value.includes(row.currencyCodePlatform)) {
  350. ElMessage.error('回款/余额币种格式不正确,请重新选择');
  351. return;
  352. }
  353. return true;
  354. };
  355. async function updateRow(row) {
  356. const $grid = xGrid.value;
  357. if ($grid) {
  358. const updatedRowData = {
  359. id: row.id,
  360. platformNumber: row.platformNumber,
  361. platformName: row.platformName,
  362. country: row.country,
  363. brandName: row.brandName,
  364. user: row.user,
  365. currencyCode: row.currencyCode,
  366. currencyCodePlatform: row.currencyCodePlatform,
  367. line: row.line,
  368. ipaddress: row.ipaddress,
  369. company: row.company,
  370. platform: row.platform,
  371. };
  372. //console.log('updatedRowData', updatedRowData);
  373. try {
  374. const response = await postUpdateTask(updatedRowData);
  375. if (response.code === 2000) {
  376. ElMessage.success('更新成功');
  377. } else if (response.code == 400) {
  378. ElMessage.warning(`${ response.data.description }`);
  379. } else {
  380. ElMessage.error('更新失败');
  381. }
  382. } catch (error) {
  383. console.log('error:', error);
  384. }
  385. }
  386. }
  387. async function handleStatusChange(row) {
  388. const $grid = xGrid.value;
  389. if ($grid) {
  390. const updatedData = {
  391. id: row.id,
  392. status: row.status,
  393. };
  394. const query = { partial: 1, };
  395. try {
  396. const response = await postUpdateTaskStatus(query, updatedData);
  397. if (response.code === 2000) {
  398. ElMessage.success('状态更新成功');
  399. } else if (response.code == 400) {
  400. ElMessage.warning(`${ response.data.description }`);
  401. } else {
  402. ElMessage.error('状态更新失败');
  403. }
  404. } catch (error) {
  405. console.log('error:', error);
  406. }
  407. }
  408. }
  409. const saveRowEvent = async (row: RowVO) => {
  410. const $grid = xGrid.value;
  411. if ($grid) {
  412. if (!validateRow(row)) {
  413. return;
  414. }
  415. await $grid.clearEdit();
  416. await updateRow(row);
  417. await getTaskList();
  418. gridOptions.loading = true;
  419. setTimeout(() => {
  420. gridOptions.loading = false;
  421. }, 300);
  422. }
  423. };
  424. async function createTask() {
  425. const body = {
  426. country: taskRuleForm.country,
  427. platformNumber: taskRuleForm.number,
  428. platformName: taskRuleForm.name,
  429. brandName: taskRuleForm.brand,
  430. currencyCode: taskRuleForm.currency,
  431. currencyCodePlatform: taskRuleForm.currencyCodePlatform,
  432. line: taskRuleForm.line,
  433. ipaddress: taskRuleForm.ipaddress,
  434. company: taskRuleForm.company,
  435. platform: taskRuleForm.platform,
  436. user: taskRuleForm.operation,
  437. };
  438. try {
  439. const resp = await postCreateTask(body);
  440. if (resp.code === 2000) {
  441. dialogFormVisible.value = false;
  442. gridOptions.data.push(body);
  443. await getTaskList(); // 重新获取任务列表
  444. ElMessage({ message: '创建成功', type: 'success', });
  445. }
  446. } catch (error) {
  447. ElMessage({ message: '创建失败', type: 'error', });
  448. }
  449. }
  450. const submitForm = async (formEl) => {
  451. if (!formEl) return;
  452. await formEl.validate(async (valid, fields) => {
  453. if (valid) {
  454. const isDuplicate = allTasks.some(task => String(task.platformNumber) === String(taskRuleForm.number));
  455. if (isDuplicate) {
  456. await ElMessage({ message: '平台编号已存在,请重新输入', type: 'warning' });
  457. return;
  458. }
  459. if (!currencyList.value.includes(taskRuleForm.currency)) {
  460. await ElMessage({ message: '回款币种无效,请重新选择', type: 'warning' });
  461. return;
  462. }
  463. if (!currencyList.value.includes(taskRuleForm.currencyCodePlatform)) {
  464. await ElMessage({ message: '回款/余额币种无效,请重新选择', type: 'warning' });
  465. return;
  466. }
  467. await createTask();
  468. taskRuleFormRef.value.resetFields();
  469. }
  470. });
  471. };
  472. async function handleExport() {
  473. gridOptions.loading = true;
  474. const response = await exportTaskData();
  475. const url = window.URL.createObjectURL(new Blob([response.data]));
  476. const link = document.createElement('a');
  477. link.href = url;
  478. link.setAttribute('download', '店铺数据.xlsx');
  479. document.body.appendChild(link);
  480. link.click();
  481. gridOptions.loading = false;
  482. ElMessage.success('导出数据成功');
  483. }
  484. function handleClose(done: Function) {
  485. if (taskRuleFormRef.value) taskRuleFormRef.value.resetFields();
  486. done();
  487. }
  488. async function fetchOperationSelect() {
  489. try {
  490. const resp = await getOperationSelect();
  491. operationList.value = resp.data.map((item: any) => {
  492. return { value: item.id, label: item.name };
  493. });
  494. } catch (e) {
  495. console.error('Failed to fetch operation select:', e);
  496. }
  497. }
  498. async function fetchCurrencyList() {
  499. try {
  500. const response = await getCurrencyCodeSelect(); // 替换为你的后端接口
  501. currencyList.value = response.data;
  502. } catch (error) {
  503. ElMessage.error('请求失败');
  504. }
  505. }
  506. const querySearch = (queryString, cb) => {
  507. const results = queryString
  508. ? currencyList.value.filter(currency => currency.toLowerCase().includes(queryString.toLowerCase()))
  509. : currencyList.value;
  510. cb(results);
  511. };
  512. const handleSelect = item => {
  513. taskRuleForm.currency = item;
  514. };
  515. const handleCurrencyCodePlatformSelect = item => {
  516. taskRuleForm.currencyCodePlatform = item;
  517. };
  518. function handleRowSelect(item, row) {
  519. row.currencyCode = item;
  520. }
  521. function handelRowCurrencyCodePlatformSelect(item, row) {
  522. row.currencyCodePlatform = item;
  523. }
  524. const cellStyle = () => {
  525. return {
  526. fontSize: '13px',
  527. fontWeight: '500',
  528. };
  529. };
  530. const headerCellStyle = () => {
  531. return {
  532. fontSize: '14px',
  533. };
  534. };
  535. //发送通知
  536. async function sendMessage(selectedValue: string) {
  537. const body = {
  538. date_type: selectedValue,
  539. };
  540. try {
  541. const response = await postSendMessage(body);
  542. if (response.code === 2000) {
  543. ElMessage.success('发送成功');
  544. } else if (response.code == 400) {
  545. ElMessage.warning(`${ response.data.description }`);
  546. } else {
  547. ElMessage.error('发送失败');
  548. }
  549. }catch (error) {
  550. }
  551. }
  552. onMounted(() => {
  553. getTaskList();
  554. fetchOperationSelect();
  555. fetchCurrencyList();
  556. });
  557. </script>
  558. <template>
  559. <el-card class="custom-card-style flex gap-1.5 justify-between mx-8">
  560. <Selector ref="selectorRef" @update:filteredData="filteredDataChange" :showOperationSearch="true" />
  561. </el-card>
  562. <el-card class="mx-8 my-3">
  563. <div style="position: relative">
  564. <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"
  565. v-on="gridEvents">
  566. <template #toolbar_buttons>
  567. <el-button :icon="Plus" plain type="success" @click="dialogFormVisible = true"> 添加任务</el-button>
  568. <el-dropdown style="padding: 0 10px;" trigger="click">
  569. <el-button type="primary" plain>
  570. <el-icon class="el-icon--left"><arrow-down /></el-icon>发送通知
  571. </el-button>
  572. <template #dropdown>
  573. <el-dropdown-menu>
  574. <el-dropdown-item v-for="info of dateType" @click="sendMessage(info.value)">{{ info.label }}</el-dropdown-item>
  575. </el-dropdown-menu>
  576. </template>
  577. </el-dropdown>
  578. <el-button :disabled="isDeleteDisabled" :icon="Delete" plain type="danger" @click="removeEvent">删除
  579. </el-button>
  580. </template>
  581. <template #toolbar_tools>
  582. <div class="mx-3.5">
  583. <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
  584. </div>
  585. </template>
  586. <template #operate="{ row }">
  587. <template v-if="hasActiveEditRow(row)">
  588. <vxe-button content="取消" type="text" @click="clearRowEvent(row)"></vxe-button>
  589. <vxe-button content="保存" status="success" type="text" @click="saveRowEvent(row)"></vxe-button>
  590. </template>
  591. <template v-else>
  592. <el-button icon="Edit" type="text" @click="editRowEvent(row)"></el-button>
  593. </template>
  594. </template>
  595. <template #number_edit="{ row }">
  596. <vxe-input v-model="row.platformNumber"></vxe-input>
  597. </template>
  598. <template #name_edit="{ row }">
  599. <vxe-input v-model="row.platformName"></vxe-input>
  600. </template>
  601. <template #country_edit="{ row }">
  602. <vxe-input v-model="row.country"></vxe-input>
  603. </template>
  604. <template #brand_edit="{ row }">
  605. <vxe-input v-model="row.brandName"></vxe-input>
  606. </template>
  607. <template #line_edit="{ row }">
  608. <vxe-input v-model="row.line"></vxe-input>
  609. </template>
  610. <template #ipaddress_edit="{ row }">
  611. <vxe-input v-model="row.ipaddress"></vxe-input>
  612. </template>
  613. <template #company_edit="{ row }">
  614. <vxe-input v-model="row.company"></vxe-input>
  615. </template>
  616. <template #platform_edit="{ row }">
  617. <vxe-input v-model="row.platform"></vxe-input>
  618. </template>
  619. <template #status_default="{ row }">
  620. <el-switch
  621. v-model="row.status"
  622. :active-value="1"
  623. :inactive-value="0"
  624. inline-prompt
  625. @change="handleStatusChange(row)"
  626. />
  627. </template>
  628. <template #operation_edit="{ row }">
  629. <vxe-select v-model="row.user" multiple>
  630. <vxe-option v-for="item in operationList" :key="item.value" :label="item.label"
  631. :value="item.value"></vxe-option>
  632. </vxe-select>
  633. </template>
  634. <template #operater_name_edit="{ row }">
  635. <vxe-input v-model="row.operater"></vxe-input>
  636. </template>
  637. <template #currency_edit="{ row }">
  638. <!--<vxe-input v-model="row.currencyCode"></vxe-input>-->
  639. <el-autocomplete
  640. v-model="row.currencyCode"
  641. :debounce="100"
  642. :fetch-suggestions="querySearch"
  643. :trigger-on-focus="false"
  644. clearable
  645. @select="item => handleRowSelect(item, row)"
  646. >
  647. <template v-slot="{ item }">
  648. <div>{{ item }}</div>
  649. </template>
  650. </el-autocomplete>
  651. </template>
  652. <template #currencyCodePlatform_edit="{ row }">
  653. <el-autocomplete
  654. v-model="row.currencyCodePlatform"
  655. :debounce="100"
  656. :fetch-suggestions="querySearch"
  657. :trigger-on-focus="false"
  658. clearable
  659. @select="item => handelRowCurrencyCodePlatformSelect(item,row)"
  660. >
  661. <template v-slot="{ item }">
  662. <div>{{ item }}</div>
  663. </template>
  664. </el-autocomplete>
  665. </template>
  666. </vxe-grid>
  667. </div>
  668. </el-card>
  669. <el-dialog v-model="dialogFormVisible" :before-close="handleClose" style="border-radius: 10px;" title="新建任务"
  670. width="500">
  671. <el-form
  672. ref="taskRuleFormRef"
  673. :model="taskRuleForm"
  674. :rules="rules"
  675. :size="formSize"
  676. class="demo-taskRuleForm"
  677. label-width="auto"
  678. status-icon
  679. style="max-width: 600px">
  680. <el-form-item label="平台编号" prop="number">
  681. <el-input v-model="taskRuleForm.number" placeholder="请输入平台编号" />
  682. </el-form-item>
  683. <el-form-item label="平台名称" prop="name">
  684. <el-input v-model="taskRuleForm.name" placeholder="请输入平台名称" />
  685. </el-form-item>
  686. <el-form-item label="国家" prop="country">
  687. <el-input v-model="taskRuleForm.country" placeholder="请输入国家" />
  688. </el-form-item>
  689. <el-form-item label="品牌" prop="brand">
  690. <el-input v-model="taskRuleForm.brand" placeholder="请输入品牌" />
  691. </el-form-item>
  692. <el-form-item label="录入人员" prop="operation">
  693. <el-select v-model="taskRuleForm.operation" collapse-tags collapse-tags-tooltip multiple
  694. placeholder="请选择录入人员">
  695. <el-option v-for="item in operationList" :key="item.value" :label="item.label"
  696. :value="item.value"></el-option>
  697. </el-select>
  698. </el-form-item>
  699. <el-form-item label="平台币种" prop="currency">
  700. <el-autocomplete
  701. v-model="taskRuleForm.currency"
  702. :debounce="100"
  703. :fetch-suggestions="querySearch"
  704. :trigger-on-focus="false"
  705. clearable
  706. placeholder="请输入回款币种"
  707. @select="handleSelect"
  708. >
  709. <template v-slot="{ item }">
  710. <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
  711. </template>
  712. </el-autocomplete>
  713. </el-form-item>
  714. <el-form-item label="回款/余额币种" prop="currencyCodePlatform">
  715. <el-autocomplete
  716. v-model="taskRuleForm.currencyCodePlatform"
  717. :debounce="100"
  718. :fetch-suggestions="querySearch"
  719. :trigger-on-focus="false"
  720. clearable
  721. placeholder="请输入回款/余额币种"
  722. @select="handleCurrencyCodePlatformSelect"
  723. >
  724. <template v-slot="{ item }">
  725. <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
  726. </template>
  727. </el-autocomplete>
  728. </el-form-item>
  729. <el-form-item label="线路" prop="line">
  730. <el-input v-model="taskRuleForm.line" placeholder="请输入线路" />
  731. </el-form-item>
  732. <el-form-item label="IP地址" prop="ipaddress">
  733. <el-input v-model="taskRuleForm.ipaddress" placeholder="请输入IP地址" />
  734. </el-form-item>
  735. <el-form-item label="注册公司" prop="company">
  736. <el-input v-model="taskRuleForm.company" placeholder="请输入注册公司" />
  737. </el-form-item>
  738. <el-form-item label="平台" prop="platform">
  739. <el-input v-model="taskRuleForm.platform" placeholder="请输入平台" />
  740. </el-form-item>
  741. </el-form>
  742. <template #footer>
  743. <div class="dialog-footer">
  744. <el-button @click="dialogFormVisible = false ;resetForm(taskRuleFormRef)">取消</el-button>
  745. <el-button type="primary" @click="submitForm(taskRuleFormRef)"> 确认</el-button>
  746. </div>
  747. </template>
  748. </el-dialog>
  749. </template>
  750. <style scoped>
  751. .custom-card-style {
  752. z-index: 999;
  753. position: sticky;
  754. margin-top: 15px;
  755. margin-bottom: 5px;
  756. }
  757. .el-card {
  758. border: none;
  759. box-shadow: none;
  760. }
  761. .el-card:hover {
  762. box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
  763. 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  764. border-color: #eee;
  765. transition: all 0.2s ease-in-out;
  766. }
  767. </style>