list.vue 27 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052
  1. <template>
  2. <div class="page-indent-list py-4 px-2 shadow max-w-[1800px] mx-auto">
  3. <el-form
  4. ref="searchForm"
  5. v-loading="loading"
  6. :inline="true"
  7. :model="form"
  8. label-width="120px"
  9. >
  10. <div class="flex flex-wrap items-center search-form">
  11. <el-form-item :label="$t(prefix + 'label_project_name') + ':'">
  12. <el-input v-model="form.deal_name"></el-input>
  13. </el-form-item>
  14. <el-form-item :label="$t(prefix + 'label_customer_name') + ':'">
  15. <el-input v-model="form.custom_name"></el-input>
  16. </el-form-item>
  17. <el-form-item :label="$t(prefix + 'label_product_name') + ':'">
  18. <el-input v-model="form.product_name"></el-input>
  19. </el-form-item>
  20. <el-form-item
  21. :label="$t(prefix + 'label_supplier_product') + ':'"
  22. label-width="130px"
  23. >
  24. <el-input
  25. v-model="form.enquiry_product_name"
  26. style="width: 180px"
  27. ></el-input>
  28. </el-form-item>
  29. <el-form-item :label="$t(prefix + 'label_category') + ':'">
  30. <el-select v-model="form.product_category">
  31. <el-option
  32. v-for="item in categoryOptions"
  33. :key="item.value"
  34. :label="item.label"
  35. :value="item.value"
  36. ></el-option>
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item :label="$t(prefix + 'label_supplier') + ':'">
  40. <el-input v-model="form.vendor_name"></el-input>
  41. </el-form-item>
  42. <el-form-item :label="$t(prefix + 'label_print_method') + ':'">
  43. <el-select v-model="form.print_method">
  44. <el-option
  45. v-for="item in printOptions"
  46. :key="item.value"
  47. :label="item.label"
  48. :value="item.value"
  49. ></el-option>
  50. </el-select>
  51. </el-form-item>
  52. <el-form-item :label="$t(prefix + 'label_require_material') + ':'">
  53. <el-select v-model="form.require_material">
  54. <el-option
  55. v-for="item in materialOptions"
  56. :key="item.value"
  57. :label="item.label"
  58. :value="item.value"
  59. ></el-option>
  60. </el-select>
  61. </el-form-item>
  62. <el-form-item label="SKU: ">
  63. <el-input v-model="form.product_sku"></el-input>
  64. </el-form-item>
  65. <el-form-item :label="$t(prefix + 'label_number') + ':'">
  66. <div class="flex justify-between items-center">
  67. <el-input
  68. v-model="form.number_min"
  69. style="width: 80px"
  70. ></el-input>
  71. <span>&nbsp;-&nbsp;</span>
  72. <el-input
  73. v-model="form.number_max"
  74. style="width: 80px"
  75. ></el-input>
  76. </div>
  77. </el-form-item>
  78. <el-form-item
  79. :label="$t('table_created_time') + ':'"
  80. label-width="100px"
  81. >
  82. <el-date-picker
  83. v-model="form.date_range"
  84. style="width: 210px; padding-right: 0"
  85. format="YYYY-MM-DD"
  86. value-format="YYYY-MM-DD"
  87. type="daterange"
  88. range-separator="~"
  89. :start-placeholder="$t(prefix + 'ph_time_start')"
  90. :end-placeholder="$t(prefix + 'ph_time_end')"
  91. ></el-date-picker>
  92. </el-form-item>
  93. <el-form-item :label="$t(prefix + 'label_quoter') + ':'">
  94. <el-select
  95. v-model="form.creator"
  96. filterable
  97. >
  98. <el-option
  99. v-for="item in creatorOptions"
  100. :key="item.value"
  101. :label="item.label"
  102. :value="item.value"
  103. ></el-option>
  104. </el-select>
  105. </el-form-item>
  106. <el-form-item :label="$t(prefix + 'label_status') + ':'">
  107. <el-select v-model="form.status">
  108. <el-option
  109. v-for="item in stateOptions"
  110. :key="item.value"
  111. :label="item.label"
  112. :value="item.value"
  113. ></el-option>
  114. </el-select>
  115. </el-form-item>
  116. <div class="flex items-center btn-group">
  117. <el-button
  118. type="primary"
  119. @click="search"
  120. >
  121. {{ $t('btn_search') }}
  122. </el-button>
  123. <el-button
  124. type="success"
  125. @click="create"
  126. >
  127. {{ $t(prefix + 'btn_new_indent') }}
  128. </el-button>
  129. <el-button
  130. :disabled="checkedQuotes.length < 1"
  131. type="primary"
  132. @click="quota"
  133. >
  134. {{ $t(prefix + 'btn_quote') }}
  135. </el-button>
  136. <el-button
  137. :disabled="checkedIndent.length < 1 && checkedQuotes.length < 1"
  138. type="danger"
  139. @click="onDeleteIndent"
  140. >
  141. {{ $t('btn_delete') }}
  142. </el-button>
  143. <el-button @click="reset">
  144. {{ $t('btn_reset') }}
  145. </el-button>
  146. <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  147. <el-button
  148. type="warning"
  149. @click="componentFreightVisible = true"
  150. >
  151. {{ $t(prefix + 'btn_set_freight') }}
  152. </el-button>
  153. </div>
  154. </div>
  155. </el-form>
  156. <el-table
  157. ref="tableIndent"
  158. v-loading="loading"
  159. :header-cell-style="{ backgroundColor: '#F2F6FC' }"
  160. :row-style="{ backgroundColor: '#F2F6FC' }"
  161. :data="indentList"
  162. default-expand-all
  163. border
  164. >
  165. <!-- 子表格内容 -->
  166. <el-table-column type="expand">
  167. <template #default="props">
  168. <el-table
  169. v-if="props.row.lists && props.row.lists.length"
  170. :ref="`tableSubIndent-${props.row.id}`"
  171. :data="props.row.lists"
  172. class="tableSubIndent"
  173. :class="`tableSubIndent-${props.row.id}`"
  174. :row-class-name="
  175. ({ row }) => {
  176. return props.row.default_quote === row.id
  177. ? 'default-quote-row'
  178. : 'ddd-ddd'
  179. }
  180. "
  181. style="margin-left: 48px"
  182. stripe
  183. border
  184. >
  185. <el-table-column
  186. v-for="value in subTableConfig"
  187. :key="value.field"
  188. :align="value.align || 'center'"
  189. :width="value.width || ''"
  190. :prop="value.field"
  191. :label="$t(value.label)"
  192. >
  193. <template #default="scope">
  194. <div v-if="value.type === 'checkbox'">
  195. <el-checkbox
  196. v-model="scope.row[value.field]"
  197. @change="($e) => onSubSelect($e, props.row)"
  198. ></el-checkbox>
  199. </div>
  200. <div
  201. v-else-if="value.type === 'imageList'"
  202. class="table-img-wrap"
  203. :style="{
  204. width: `${Number(value.width) - 20}px`,
  205. }"
  206. >
  207. <el-tooltip content="点击可查看大图">
  208. <img
  209. style="width: 100%; cursor: pointer"
  210. :src="scope.row[value.field][0]"
  211. @click="imgClick(scope.row[value.field][0])"
  212. />
  213. </el-tooltip>
  214. </div>
  215. <div
  216. v-else-if="value.field === 'vendor_name'"
  217. style="text-align: left"
  218. >
  219. <div>{{ scope.row[value.field] }}</div>
  220. <div v-show="scope.row.vendor_contact">
  221. 联系人:&nbsp;{{ scope.row.vendor_contact }}
  222. </div>
  223. <div v-show="scope.row.vendor_phone">
  224. 联系电话:&nbsp;{{ scope.row.vendor_phone }}
  225. </div>
  226. </div>
  227. <div
  228. class=""
  229. v-else-if="value.field === 'product_url'"
  230. >
  231. <a
  232. :href="scope.row.product_url"
  233. target="_blank"
  234. >
  235. {{ scope.row.product_url }}
  236. </a>
  237. </div>
  238. <el-tooltip
  239. v-else
  240. :content="$t(value.label)"
  241. >
  242. <div
  243. class="table-cell-content"
  244. :style="value.style || {}"
  245. >
  246. {{ scope.row[value.field] }}
  247. </div>
  248. </el-tooltip>
  249. </template>
  250. </el-table-column>
  251. <el-table-column
  252. prop="status"
  253. width="280"
  254. :label="$t('table_operation')"
  255. >
  256. <template #default="scope">
  257. <el-button
  258. size="small"
  259. type="warning"
  260. @click="editInfo(scope.row)"
  261. >
  262. {{ $t('btn_edit') }}
  263. </el-button>
  264. <el-button
  265. size="small"
  266. type="primary"
  267. @click="valuation(scope.row)"
  268. >
  269. {{ $t(prefix + 'btn_calc_price') }}
  270. </el-button>
  271. <el-button
  272. v-if="props.row.default_quote !== scope.row.id"
  273. size="small"
  274. type="success"
  275. :disabled="props.row.default_quote === scope.row.id"
  276. @click="adopt(scope.row, props.row)"
  277. >
  278. {{
  279. props.row.default_quote === scope.row.id
  280. ? $t(prefix + 'btn_adopted')
  281. : $t(prefix + 'btn_adopt')
  282. }}
  283. </el-button>
  284. <el-button
  285. v-if="props.row.default_quote === scope.row.id"
  286. size="small"
  287. type="warning"
  288. @click="onBtnChangeOrderClick(scope.row, props.row)"
  289. >
  290. 转单
  291. </el-button>
  292. </template>
  293. </el-table-column>
  294. </el-table>
  295. <div
  296. v-else
  297. class="flex justify-center items-center"
  298. >
  299. <div>暂无报价</div>
  300. </div>
  301. </template>
  302. </el-table-column>
  303. <!-- 子表格内容 end -->
  304. <!-- 主表格 内容 -->
  305. <el-table-column
  306. v-for="value in mainTableConfig"
  307. :key="value.field"
  308. :align="value.align || 'center'"
  309. :width="value.width || ''"
  310. :prop="value.field"
  311. :label="$t(value.label)"
  312. >
  313. <template
  314. v-if="value.type === 'checkbox'"
  315. #header
  316. >
  317. <el-checkbox
  318. v-model="checkedAll"
  319. @change="onSelectAll"
  320. ></el-checkbox>
  321. </template>
  322. <template #default="scope">
  323. <div v-if="value.type === 'checkbox'">
  324. <el-checkbox
  325. v-model="scope.row[value.field]"
  326. @change="($e) => onSelect($e, scope.$index)"
  327. ></el-checkbox>
  328. </div>
  329. <el-tooltip
  330. v-else-if="value.field === 'quote_name'"
  331. :content="$t(value.label) + ', 双击可编辑'"
  332. >
  333. <div
  334. class="table-cell-content"
  335. :style="value.style || {}"
  336. @dblclick="onEdit(scope.row)"
  337. >
  338. {{ scope.row[value.field] }}
  339. </div>
  340. </el-tooltip>
  341. <el-tooltip
  342. v-else
  343. :content="$t(value.label)"
  344. >
  345. <div
  346. class="table-cell-content"
  347. :style="value.style || {}"
  348. >
  349. {{ scope.row[value.field] }}
  350. </div>
  351. </el-tooltip>
  352. </template>
  353. </el-table-column>
  354. </el-table>
  355. <div class="flex justify-end my-4">
  356. <el-pagination
  357. v-show="total > 0"
  358. v-model:current-page="pageForm.page"
  359. v-model:page-size="pageForm.limit"
  360. v-model:total="total"
  361. layout="prev, pager, next, jumper, sizes"
  362. @current-change="getList"
  363. @size-change="getList"
  364. />
  365. </div>
  366. <edit
  367. v-model:visible="componentEditVisible"
  368. :indent-data="indentData"
  369. :quota-data="quotaData"
  370. :category-options="categoryOptions"
  371. :print-options="printOptions"
  372. :material-options="materialOptions"
  373. @create="getList"
  374. ></edit>
  375. <freight v-model:visible="componentFreightVisible"></freight>
  376. <compEditInfo
  377. v-model:visible="componentEditInfoVisible"
  378. :data-for-edit="[quoteForEdit]"
  379. :parent-id="infoParentId"
  380. @create="getList"
  381. ></compEditInfo>
  382. <calcPrice
  383. v-model:visible="componentCalcPriceVisible"
  384. :creator-options="creatorOptions"
  385. :data-for-calc="quoteForEdit"
  386. @save-price-calc="getList"
  387. ></calcPrice>
  388. <el-dialog
  389. v-model="bigImageVisible"
  390. style="margin: 5vh auto"
  391. width="800"
  392. >
  393. <div class="flex justify-center">
  394. <img
  395. :src="currentBigImage"
  396. style="max-width: 100%; height: auto"
  397. alt=""
  398. />
  399. </div>
  400. </el-dialog>
  401. <dialogQuoteRecord
  402. :id="changeOrderID"
  403. :indent-data="indentData"
  404. v-model:visible="dialogChangeOrderVisible"
  405. @success="onDialogChangeOrderClose"
  406. ></dialogQuoteRecord>
  407. </div>
  408. </template>
  409. <script setup lang="ts">
  410. import { defineComponent, ref, computed, watch, inject } from 'vue'
  411. import {
  412. ElButton,
  413. ElForm,
  414. ElFormItem,
  415. ElInput,
  416. ElTable,
  417. ElTableColumn,
  418. ElSelect,
  419. ElOption,
  420. ElMessageBox,
  421. ElTooltip,
  422. ElNotification,
  423. ElPagination,
  424. ElDatePicker,
  425. ElCheckbox,
  426. ElDialog,
  427. } from 'element-plus'
  428. import { $t } from '@/i18n/index'
  429. import {
  430. getIndentList,
  431. getCreator,
  432. deleteIndent,
  433. cloneQuote,
  434. setDefaultQuote,
  435. } from '@/api/indent'
  436. import userAPI from '@/api/user'
  437. import edit from './edit.vue'
  438. import freight from './components/freight.vue'
  439. import compEditInfo from './components/info.vue'
  440. import calcPrice from './components/calcPrice/index.vue'
  441. import dialogQuoteRecord from './components/quoteRecord.vue'
  442. defineComponent({
  443. name: 'PageIndentList',
  444. })
  445. const $mediaRegExp = inject('mediaRegExp') as RegExp
  446. const prefix = 'order.indent.'
  447. const form = ref({
  448. product_name: '',
  449. product_sku: '',
  450. deal_name: '',
  451. custom_name: '',
  452. product_category: '',
  453. require_material: '',
  454. print_method: '',
  455. date_range: [],
  456. creator: '',
  457. enquiry_product_name: '',
  458. vendor_name: '',
  459. number_min: '',
  460. number_max: '',
  461. status: '',
  462. })
  463. const total = ref(0)
  464. const pageForm = ref({
  465. page: 1,
  466. limit: 20,
  467. })
  468. const categoryOptions = [
  469. {
  470. label: $t('text_please_select'),
  471. value: '',
  472. },
  473. {
  474. label: 'Lanyards',
  475. value: 'Lanyards',
  476. },
  477. {
  478. label: 'PIN BADGES',
  479. value: 'PIN BADGES',
  480. },
  481. {
  482. label: 'WRISTBANDS',
  483. value: 'WRISTBANDS',
  484. },
  485. {
  486. label: 'KEYRINGS',
  487. value: 'KEYRINGS',
  488. },
  489. {
  490. label: 'NEOPRENE',
  491. value: 'NEOPRENE',
  492. },
  493. {
  494. label: 'STATIONERY',
  495. value: 'STATIONERY',
  496. },
  497. {
  498. label: 'LIFESTYLE',
  499. value: 'LIFESTYLE',
  500. },
  501. {
  502. label: 'POS',
  503. value: 'POS',
  504. },
  505. {
  506. label: '其它',
  507. value: '其它',
  508. },
  509. ]
  510. const printOptions = [
  511. {
  512. label: $t('text_please_select'),
  513. value: '',
  514. },
  515. {
  516. label: '全彩印刷',
  517. value: '全彩印刷',
  518. },
  519. {
  520. label: '专色印刷',
  521. value: '专色印刷',
  522. },
  523. {
  524. label: '热转印',
  525. value: '热转印',
  526. },
  527. {
  528. label: '丝印',
  529. value: '丝印',
  530. },
  531. {
  532. label: '镭雕',
  533. value: '镭雕',
  534. },
  535. {
  536. label: '凹印',
  537. value: '凹印',
  538. },
  539. {
  540. label: '刺绣',
  541. value: '刺绣',
  542. },
  543. {
  544. label: '其它',
  545. value: '其它',
  546. },
  547. ]
  548. const materialOptions = [
  549. {
  550. label: $t('text_please_select'),
  551. value: '',
  552. },
  553. {
  554. label: '布料',
  555. value: '布料',
  556. },
  557. {
  558. label: '塑料',
  559. value: '塑料',
  560. },
  561. {
  562. label: '纸质',
  563. value: '纸质',
  564. },
  565. {
  566. label: '五金',
  567. value: '五金',
  568. },
  569. {
  570. label: '其它',
  571. value: '其它',
  572. },
  573. ]
  574. const stateOptions = [
  575. {
  576. label: '全部',
  577. value: '',
  578. },
  579. {
  580. label: '未报价',
  581. value: '0',
  582. },
  583. {
  584. label: '已报价',
  585. value: '1',
  586. },
  587. ]
  588. const mainTableConfig: any[] = [
  589. {
  590. type: 'checkbox',
  591. field: 'checked',
  592. width: '55',
  593. },
  594. {
  595. label: 'Reference',
  596. field: 'Reference',
  597. width: '110',
  598. },
  599. {
  600. label: 'order.indent.table_indent_name',
  601. field: 'quote_name',
  602. style: 'cursor: default',
  603. },
  604. {
  605. label: 'order.indent.label_project_name',
  606. field: 'deal_name',
  607. width: '120',
  608. },
  609. {
  610. label: 'order.indent.label_customer_name',
  611. field: 'custom_name',
  612. width: '180',
  613. },
  614. {
  615. label: 'order.indent.label_product_name',
  616. field: 'product_name',
  617. },
  618. {
  619. label: 'order.indent.label_status',
  620. field: 'status',
  621. width: '80',
  622. style: 'font-weight: bold;',
  623. },
  624. {
  625. label: 'order.indent.table_creator',
  626. field: 'creator',
  627. width: '90',
  628. style: 'font-weight: bold;',
  629. },
  630. {
  631. label: 'table_created_time',
  632. field: 'create_time',
  633. width: '120',
  634. },
  635. ]
  636. const subTableConfig: any = [
  637. {
  638. type: 'checkbox',
  639. field: 'checked',
  640. width: '55',
  641. },
  642. {
  643. label: 'order.indent.table_image',
  644. type: 'imageList',
  645. width: '80',
  646. field: 'product_image',
  647. },
  648. {
  649. label: 'order.indent.table_supplier',
  650. field: 'vendor_name',
  651. },
  652. {
  653. label: 'order.indent.table_url',
  654. field: 'product_url',
  655. },
  656. {
  657. label: 'order.indent.table_price',
  658. field: 'quote_price',
  659. width: '75',
  660. },
  661. {
  662. label: 'order.indent.label_number',
  663. field: 'quote_num',
  664. width: '150',
  665. },
  666. {
  667. label: 'order.indent.table_days',
  668. field: 'large_days',
  669. width: '90',
  670. },
  671. {
  672. label: 'order.indent.label_quoter',
  673. field: 'creator',
  674. width: '90',
  675. style: 'font-weight: bold;',
  676. },
  677. {
  678. label: 'table_updated_time',
  679. field: 'update_time',
  680. width: '115',
  681. },
  682. ]
  683. const componentEditVisible = ref(0) // 1 新增, 2编辑. 0关闭
  684. const componentFreightVisible = ref(false) // 设置运费参数
  685. const componentEditInfoVisible = ref(0) // 编辑报价信息
  686. const componentCalcPriceVisible = ref(false) // 计价
  687. const indentData = ref({}) // 修改询价和转单的时候使用, 记录的是询价的行数据.
  688. const quoteForEdit = ref({}) // 修改和计价时共用, 只是用作传递给子组件数据的变量
  689. const infoParentId = ref(0)
  690. const loading = ref(false)
  691. const checkedAll = ref(false)
  692. const quotaData = ref({}) // 引用报价信息后得到的克隆数据, 传递给创建询价组件, 当作新创建的报价信息.
  693. const indentList = ref([] as any[])
  694. const checkedQuotes = computed(() => {
  695. return indentList.value.reduce((total: any, current: any) => {
  696. if (current.lists?.length) {
  697. current.lists.forEach((i: any) => {
  698. if (i.checked) {
  699. total.push(i)
  700. }
  701. })
  702. }
  703. return total
  704. }, [])
  705. })
  706. const checkedIndent = computed(() => {
  707. return indentList.value.filter((i: any) => i.checked)
  708. })
  709. const getList = function (flag = 0) {
  710. quotaData.value = {} // 重置引用数据, 否则创建询价完成之后再次创建询价, 会把之前的引用数据再次带到创建询价组件
  711. const timeSeparator = '~'
  712. const temp = JSON.parse(JSON.stringify(form.value))
  713. const p = Object.assign({}, temp, pageForm.value)
  714. // 组装日期范围数据
  715. if (Array.isArray(p.date_range) && p.date_range.length) {
  716. p.date_range = p.date_range.join(timeSeparator)
  717. } else {
  718. p.date_range = ''
  719. }
  720. if (flag === 1) p.is_search = 1
  721. loading.value = true
  722. // const getlist = function () {
  723. getIndentList(p)
  724. .then((res: any) => {
  725. indentList.value =
  726. res.result?.data.map((main: any) => {
  727. return {
  728. ...main,
  729. create_time: main.create_time.split(' ')[0],
  730. checked: false,
  731. lists: main.lists.map((i: any) => {
  732. const temp = { ...i, checked: false }
  733. if (
  734. Array.isArray(temp.product_image) &&
  735. temp.product_image.length
  736. ) {
  737. temp.product_image = temp.product_image.map((img: string) =>
  738. $mediaRegExp.test(img)
  739. ? img
  740. : import.meta.env.VITE_APP_OSS_PREFIX + img,
  741. )
  742. } else {
  743. temp.product_image = []
  744. }
  745. return temp
  746. }),
  747. }
  748. }) || []
  749. total.value = res.result.total
  750. })
  751. .finally(() => {
  752. loading.value = false
  753. })
  754. }
  755. const creatorOptions = ref([] as any[])
  756. // 获取报价人下拉框候选数据.
  757. const getCreatorOption = function () {
  758. getCreator().then((res: any) => {
  759. creatorOptions.value = res.result.map((i: any) => {
  760. return { label: i.username, value: i.id }
  761. })
  762. creatorOptions.value.unshift({
  763. label: $t(prefix + 'ph_quoter'),
  764. value: '',
  765. })
  766. })
  767. }
  768. const search = function () {
  769. pageForm.value = {
  770. page: 1,
  771. limit: 20,
  772. }
  773. getList(1)
  774. }
  775. const create = function () {
  776. componentEditVisible.value = 1
  777. }
  778. const onEdit = function (row: any) {
  779. quotaData.value = {}
  780. indentData.value = row
  781. componentEditVisible.value = 2
  782. }
  783. const quota = function () {
  784. const ids = checkedQuotes.value.map((i: any) => i.id)
  785. cloneQuote({ ids }).then((response: any) => {
  786. if (response.code === 1) {
  787. quotaData.value = response.result
  788. create()
  789. }
  790. })
  791. }
  792. const onDeleteIndent = function () {
  793. ElMessageBox.confirm('将删除该报价, 是否继续?', '提示', {
  794. confirmButtonText: '确定',
  795. cancelButtonText: '取消',
  796. type: 'warning',
  797. }).then(() => {
  798. const p = {
  799. indent_ids: checkedIndent.value.map((i: any) => `${i.id}`), // 询价id
  800. quote_ids: checkedQuotes.value.map((i: any) => `${i.parent_id}_${i.id}`), // 报价id数据. 单个格式为 '询价id_报价id'
  801. }
  802. deleteIndent(p).then((response: any) => {
  803. if (response.code === 1) {
  804. getList()
  805. ElNotification({
  806. title: '删除成功',
  807. message: '删除成功',
  808. duration: 3000,
  809. })
  810. }
  811. })
  812. })
  813. }
  814. const reset = function () {
  815. form.value = {
  816. product_name: '',
  817. product_sku: '',
  818. deal_name: '',
  819. custom_name: '',
  820. product_category: '',
  821. require_material: '',
  822. print_method: '',
  823. date_range: [],
  824. creator: '',
  825. enquiry_product_name: '',
  826. vendor_name: '',
  827. number_min: '',
  828. number_max: '',
  829. status: '',
  830. }
  831. pageForm.value = {
  832. page: 1,
  833. limit: 20,
  834. }
  835. total.value = 0
  836. getList()
  837. }
  838. const editInfo = function (row: any) {
  839. infoParentId.value = row.parent_id
  840. quoteForEdit.value = row
  841. componentEditInfoVisible.value = 2
  842. }
  843. // 计价
  844. const valuation = function (row: any) {
  845. quoteForEdit.value = row
  846. componentCalcPriceVisible.value = true
  847. }
  848. // 采纳
  849. const adopt = function (row: any, parentRow: any) {
  850. const p = {
  851. id: parentRow.id,
  852. quote_id: row.id,
  853. }
  854. setDefaultQuote(p).then((res: any) => {
  855. if (res.code === 1) {
  856. ElNotification({
  857. type: 'success',
  858. title: '操作成功',
  859. message: '正在刷新数据',
  860. duration: 3000,
  861. })
  862. } else {
  863. ElNotification({
  864. type: 'error',
  865. title: '操作出错了',
  866. message: '请稍后重试, 或者联系管理员',
  867. duration: 3000,
  868. })
  869. }
  870. getList()
  871. })
  872. }
  873. const onSelect = function (bool: any, index: number) {
  874. // console.log('onSelect', bool, index)
  875. // 每次勾选主表的某行, 立刻计算主表的全选
  876. checkedAll.value = indentList.value.every((i) => i.checked)
  877. // 勾选主表格的某行, 将该行所属的 子表格 给全部勾选/取消勾选
  878. indentList.value[index].lists = indentList.value[index].lists.map(
  879. (i: any) => {
  880. return {
  881. ...i,
  882. checked: bool,
  883. }
  884. },
  885. )
  886. }
  887. // 主表格全勾选, 遍历数据将所有子表格全勾选
  888. const onSelectAll = function (boolean: any) {
  889. // console.log('onSelectAll', boolean)
  890. indentList.value = indentList.value.map((i: any) => {
  891. return {
  892. ...i,
  893. checked: boolean,
  894. lists: i.lists.map((j: any) => {
  895. return {
  896. ...j,
  897. checked: boolean,
  898. }
  899. }),
  900. }
  901. })
  902. }
  903. // 勾选子表格的某行
  904. const onSubSelect = function (bool: any, row: any) {
  905. // console.log('onSelect-sub', bool, row)
  906. // 判断该行对应 在主表的父行 的勾选状态
  907. row.checked = row.lists.every((i: any) => i.checked)
  908. // 变更主表某行的勾选状态后, 立刻计算主表的全选
  909. checkedAll.value = indentList.value.every((i: any) => i.checked)
  910. }
  911. getList()
  912. getCreatorOption()
  913. const currentBigImage = ref('')
  914. const bigImageVisible = ref(false)
  915. const imgClick = (url: string) => {
  916. currentBigImage.value = url
  917. bigImageVisible.value = true
  918. }
  919. watch(bigImageVisible, () => {
  920. if (!bigImageVisible.value) currentBigImage.value = ''
  921. })
  922. const changeOrderID = ref('')
  923. const dialogChangeOrderVisible = ref(false)
  924. const onBtnChangeOrderClick = (row: any, parentRow: any) => {
  925. // console.log(row, 'row', parentRow, 'parentRow')
  926. if (['Temporary Indent Product', '申请中'].includes(parentRow.product_sku)) {
  927. ElNotification({
  928. type: 'warning',
  929. title: '提示',
  930. message: `SKU在申请中无法直接转单, 需要联系: ${auditUser.value}`,
  931. duration: 6000,
  932. })
  933. } else {
  934. if (parentRow.crm_so_id) {
  935. ElMessageBox.confirm(
  936. '当前报价已转单, 如果二次转单将会全面覆盖之前的SO',
  937. '提示',
  938. {
  939. confirmButtonText: '确定重新转单',
  940. cancelButtonText: '取消',
  941. type: 'warning',
  942. },
  943. ).then(() => {
  944. changeOrderID.value = row.id
  945. indentData.value = parentRow
  946. dialogChangeOrderVisible.value = true
  947. })
  948. } else {
  949. changeOrderID.value = row.id
  950. indentData.value = parentRow
  951. dialogChangeOrderVisible.value = true
  952. }
  953. }
  954. }
  955. const onDialogChangeOrderClose = () => {
  956. getList()
  957. dialogChangeOrderVisible.value = false
  958. changeOrderID.value = ''
  959. indentData.value = {}
  960. }
  961. watch(dialogChangeOrderVisible, () => {
  962. if (!dialogChangeOrderVisible.value) {
  963. indentData.value = {}
  964. changeOrderID.value = ''
  965. }
  966. })
  967. const auditUser = ref('')
  968. const getCurrentAuditUser = () => {
  969. userAPI.getAuditUser().then((res: any) => {
  970. // console.log(res, 'res')
  971. if (
  972. res.code === 1 &&
  973. Array.isArray(res.result.data) &&
  974. res.result.data.length
  975. ) {
  976. const temp = res.result.data.filter((i: any) => i.type === 2)
  977. // console.log(temp, 'temp')
  978. if (temp.length) auditUser.value = temp[0].email
  979. }
  980. })
  981. }
  982. getCurrentAuditUser()
  983. </script>
  984. <style lang="scss">
  985. .page-indent-list {
  986. .default-quote-row {
  987. color: #ef4135;
  988. }
  989. }
  990. </style>
  991. <style lang="scss" scoped>
  992. .search-form {
  993. .el-form-item {
  994. width: 310px;
  995. }
  996. .el-input,
  997. .el-select,
  998. .el-date-editor {
  999. width: 190px;
  1000. }
  1001. .btn-group {
  1002. margin: 0 0 22px 8px;
  1003. }
  1004. }
  1005. .table-cell-content {
  1006. word-break: break-word;
  1007. }
  1008. </style>