list.vue 28 KB

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