PriceSheet.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800
  1. <template>
  2. <div style="width: 100%; padding: 0px 15px">
  3. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
  4. <template #seller>
  5. <div style="width: 100%">
  6. <el-form-item prop="sellCorporationId">
  7. <el-select v-model="formData.data.sellCorporationId" style="width: 100%" disabled>
  8. <el-option v-for="item in corporationList" :key="item.value" :label="item.label" :value="item.value" />
  9. </el-select>
  10. </el-form-item>
  11. <el-row style="margin-top: 20px; width: 100%">
  12. <el-col :span="8">
  13. <el-form-item label="地址" prop="sellCountryName">
  14. <el-input v-model="formData.data.sellCountryName" placeholder="请输入国家" />
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="8">
  18. <el-form-item label=" " prop="sellProvinceName">
  19. <el-input v-model="formData.data.sellProvinceName" placeholder="请输入省/州" />
  20. </el-form-item>
  21. </el-col>
  22. <el-col :span="8">
  23. <el-form-item label=" " prop="sellCityName">
  24. <el-input v-model="formData.data.sellCityName" placeholder="请输入城市" />
  25. </el-form-item>
  26. </el-col>
  27. </el-row>
  28. <el-row style="margin-top: 20px; width: 100%">
  29. <el-col :span="24">
  30. <el-form-item prop="sellAddress">
  31. <el-input v-model="formData.data.sellAddress" type="textarea"> </el-input>
  32. </el-form-item>
  33. </el-col>
  34. </el-row>
  35. <el-row style="margin-top: 20px; width: 100%">
  36. <el-col :span="8">
  37. <el-form-item label="联系人" prop="sellContactName">
  38. <el-input v-model="formData.data.sellContactName" placeholder="请输入联系人" />
  39. </el-form-item>
  40. </el-col>
  41. <el-col :span="16">
  42. <el-form-item label=" " prop="sellContactNumber">
  43. <el-input v-model="formData.data.sellContactNumber" placeholder="请输入联系人电话" />
  44. </el-form-item>
  45. </el-col>
  46. </el-row>
  47. </div>
  48. </template>
  49. <template #buyer>
  50. <div style="width: 100%">
  51. <div style="width: 100%">
  52. <el-form-item prop="buyCorporationId">
  53. <el-select v-model="formData.data.buyCorporationId" style="width: 100%" @change="changeCustomer">
  54. <el-option v-for="item in customerList" :key="item.value" :label="item.label" :value="item.value" />
  55. </el-select>
  56. </el-form-item>
  57. <el-row style="margin-top: 20px; width: 100%">
  58. <el-col :span="6">
  59. <el-form-item label="地址" prop="countryId">
  60. <el-select v-model="formData.data.countryId" placeholder="国家" filterable allow-create @change="(val) => getCityData(val, '20', true)">
  61. <el-option v-for="item in countryData" :label="item.chineseName" :value="item.id"> </el-option>
  62. </el-select>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="6">
  66. <el-form-item label=" " prop="provinceName">
  67. <selectCity
  68. placeholder="省/洲"
  69. @change="(val) => getCityData(val, '30', true)"
  70. addressId="provinceId"
  71. addressName="provinceName"
  72. v-model="formData.data"
  73. :data="provinceData">
  74. </selectCity>
  75. </el-form-item>
  76. </el-col>
  77. <el-col :span="6">
  78. <el-form-item label=" " prop="cityName">
  79. <selectCity placeholder="城市" addressId="cityId" addressName="cityName" v-model="formData.data" :data="cityData"> </selectCity>
  80. </el-form-item>
  81. </el-col>
  82. <el-col :span="6">
  83. <el-form-item label=" " prop="buyPostalCode">
  84. <el-input v-model="formData.data.buyPostalCode" placeholder="请输入邮编" />
  85. </el-form-item>
  86. </el-col>
  87. </el-row>
  88. <el-row style="margin-top: 20px; width: 100%">
  89. <el-col :span="24">
  90. <el-form-item prop="buyAddress">
  91. <el-input v-model="formData.data.buyAddress" type="textarea"> </el-input>
  92. </el-form-item>
  93. </el-col>
  94. </el-row>
  95. <el-row style="margin-top: 20px; width: 100%">
  96. <el-col :span="8">
  97. <el-form-item label="联系人" prop="buyContactName">
  98. <el-autocomplete
  99. v-model="formData.data.buyContactName"
  100. :fetch-suggestions="querySearchPerson"
  101. clearable
  102. class="inline-input w-50"
  103. placeholder="请输入联系人"
  104. @select="handlePerson">
  105. </el-autocomplete>
  106. </el-form-item>
  107. </el-col>
  108. <el-col :span="16">
  109. <el-form-item label=" " prop="buyContactNumber">
  110. <el-input v-model="formData.data.buyContactNumber" placeholder="请输入联系人电话" />
  111. </el-form-item>
  112. </el-col>
  113. </el-row>
  114. </div>
  115. </div>
  116. </template>
  117. <template #commodity>
  118. <div style="width: 100%">
  119. <el-button @click="openProduct = true">添加商品</el-button>
  120. <el-table :data="formData.data.quotationProductList" style="width: 100%; margin-top: 16px">
  121. <el-table-column label="商品图片" width="80">
  122. <template #default="{ row }">
  123. <div v-if="row.productId">
  124. <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
  125. </div>
  126. <div v-else></div>
  127. </template>
  128. </el-table-column>
  129. <el-table-column prop="code" label="商品编码" width="120" />
  130. <el-table-column label="商品名称" min-width="200">
  131. <template #default="{ row, $index }">
  132. <div style="width: 100%">
  133. <el-form-item :prop="'quotationProductList.' + $index + '.productName'" :rules="rules.productName" :inline-message="true">
  134. <el-input v-model="row.productName" placeholder="请输入商品名称" />
  135. </el-form-item>
  136. </div>
  137. </template>
  138. </el-table-column>
  139. <el-table-column label="规格型号" width="180">
  140. <template #default="{ row, $index }">
  141. <div style="width: 100%">
  142. <el-form-item :prop="'quotationProductList.' + $index + '.productModel'" :rules="rules.productModel" :inline-message="true">
  143. <el-input v-model="row.productModel" placeholder="请输入规格型号" />
  144. </el-form-item>
  145. </div>
  146. </template>
  147. </el-table-column>
  148. <el-table-column prop="unit" label="单位" width="100" />
  149. <el-table-column label="数量" width="160">
  150. <template #default="{ row, $index }">
  151. <div style="width: 100%">
  152. <el-form-item :prop="'quotationProductList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true">
  153. <el-input-number
  154. v-model="row.quantity"
  155. placeholder="请输入数量"
  156. style="width: 100%"
  157. :precision="0"
  158. :controls="false"
  159. :min="0"
  160. @change="calculationAmount()" />
  161. </el-form-item>
  162. </div>
  163. </template>
  164. </el-table-column>
  165. <el-table-column label="单价" width="160">
  166. <template #default="{ row, $index }">
  167. <div style="width: 100%">
  168. <el-form-item :prop="'quotationProductList.' + $index + '.price'" :rules="rules.price" :inline-message="true">
  169. <el-input-number
  170. v-model="row.price"
  171. placeholder="请输入单价"
  172. style="width: 100%"
  173. :precision="2"
  174. :controls="false"
  175. :min="0"
  176. @change="calculationAmount()" />
  177. </el-form-item>
  178. </div>
  179. </template>
  180. </el-table-column>
  181. <el-table-column prop="amount" label="金额" width="140" />
  182. <el-table-column label="操作" width="80" fixed="right">
  183. <template #default="{ row, $index }">
  184. <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
  185. </template>
  186. </el-table-column>
  187. </el-table>
  188. </div>
  189. </template>
  190. <template #otherCharge>
  191. <div style="width: 100%">
  192. <el-button type="primary" @click="clickAdd()">添加行</el-button>
  193. <el-table :data="formData.data.quotationPayList" style="width: 100%; margin-top: 16px">
  194. <el-table-column label="收费项目" width="220">
  195. <template #default="{ row, $index }">
  196. <div style="width: 100%">
  197. <el-form-item :prop="'quotationPayList.' + $index + '.payName'" :rules="rules.payName" :inline-message="true">
  198. <el-autocomplete v-model="row.payName" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="请输入收费项目" />
  199. </el-form-item>
  200. </div>
  201. </template>
  202. </el-table-column>
  203. <el-table-column label="金额" width="180">
  204. <template #default="{ row, $index }">
  205. <div style="width: 100%">
  206. <el-form-item :prop="'quotationPayList.' + $index + '.amount'" :rules="rules.amount" :inline-message="true">
  207. <el-input-number
  208. v-model="row.amount"
  209. placeholder="请输入金额"
  210. style="width: 100%"
  211. :precision="2"
  212. :controls="false"
  213. :min="0"
  214. @change="totalAmount()" />
  215. </el-form-item>
  216. </div>
  217. </template>
  218. </el-table-column>
  219. <el-table-column label="备注">
  220. <template #default="{ row, $index }">
  221. <div style="width: 100%">
  222. <el-form-item :prop="'quotationPayList.' + $index + '.remark'">
  223. <el-input v-model="row.remark" placeholder="请输入备注" />
  224. </el-form-item>
  225. </div>
  226. </template>
  227. </el-table-column>
  228. <el-table-column label="操作" width="80" fixed="right">
  229. <template #default="{ row, $index }">
  230. <el-button type="primary" link @click="handleDelete($index)">删除</el-button>
  231. </template>
  232. </el-table-column>
  233. </el-table>
  234. </div>
  235. </template>
  236. <template #offerMoney>
  237. <div style="width: 100%">
  238. <el-row style="margin-top: 20px; width: 100%">
  239. <el-col :span="4">
  240. <el-form-item label="币种" prop="currency">
  241. <el-select v-model="formData.data.currency" placeholder="请选择币种" style="width: 100%">
  242. <el-option v-for="item in accountCurrency" :key="item.value" :label="item.label" :value="item.value" />
  243. </el-select>
  244. </el-form-item>
  245. </el-col>
  246. <el-col :span="6">
  247. <el-form-item label="合同总金额" prop="amount">
  248. <el-input v-model="formData.data.amount" placeholder="合同总金额" disabled />
  249. </el-form-item>
  250. </el-col>
  251. <el-col :span="4">
  252. <el-form-item label="报价有效期 (天)" prop="effective">
  253. <el-input-number v-model="formData.data.effective" placeholder="请输入有效期" style="width: 100%" :precision="0" :controls="false" :min="0" />
  254. </el-form-item>
  255. </el-col>
  256. </el-row>
  257. <el-row style="margin-top: 20px; width: 100%">
  258. <el-col :span="7">
  259. <el-form-item label="付款方式" prop="paymentMethod">
  260. <el-select v-model="formData.data.paymentMethod" placeholder="请选择付款方式" style="width: 100%">
  261. <el-option v-for="item in fundsPaymentMethod" :key="item.value" :label="item.label" :value="item.value" />
  262. </el-select>
  263. </el-form-item>
  264. </el-col>
  265. <el-col :span="7">
  266. <el-form-item label="预付比例 (%)" prop="advanceRatio">
  267. <el-input-number
  268. v-model="formData.data.advanceRatio"
  269. placeholder="请输入预付比例"
  270. style="width: 100%"
  271. :precision="2"
  272. :controls="false"
  273. :min="0"
  274. :max="100" />
  275. </el-form-item>
  276. </el-col>
  277. </el-row>
  278. </div>
  279. </template>
  280. <template #delivery>
  281. <div style="width: 100%">
  282. <el-row style="margin-top: 20px; width: 100%">
  283. <el-col :span="7">
  284. <el-form-item label="贸易方式" prop="tradeMethods">
  285. <el-select v-model="formData.data.tradeMethods" placeholder="请选择贸易方式" style="width: 100%">
  286. <el-option v-for="item in tradeMethods" :key="item.value" :label="item.label" :value="item.value" />
  287. </el-select>
  288. </el-form-item>
  289. </el-col>
  290. </el-row>
  291. <el-row style="margin-top: 20px; width: 100%">
  292. <el-col :span="7">
  293. <el-form-item label="运输方式" prop="transportMethod">
  294. <el-select v-model="formData.data.transportMethod" placeholder="请选择运输方式" style="width: 100%">
  295. <el-option v-for="item in shippingMethod" :key="item.value" :label="item.label" :value="item.value" />
  296. </el-select>
  297. </el-form-item>
  298. </el-col>
  299. <el-col :span="7">
  300. <el-form-item label="运输说明" prop="transportRemark">
  301. <el-input v-model="formData.data.transportRemark" placeholder="请输入运输说明" />
  302. </el-form-item>
  303. </el-col>
  304. </el-row>
  305. <el-row style="margin-top: 20px; width: 100%">
  306. <el-col :span="14">
  307. <el-form-item label="付款条件" prop="remark">
  308. <el-input v-model="formData.data.remark" :rows="2" type="textarea" placeholder="请输入付款条件" />
  309. </el-form-item>
  310. </el-col>
  311. </el-row>
  312. <el-row style="margin-top: 20px; width: 100%">
  313. <el-col :span="7">
  314. <el-form-item label="质保期 (天)" prop="warranty">
  315. <el-input-number v-model="formData.data.warranty" placeholder="请输入质保期" style="width: 100%" :precision="0" :controls="false" :min="0" />
  316. </el-form-item>
  317. </el-col>
  318. </el-row>
  319. </div>
  320. </template>
  321. </byForm>
  322. <el-dialog v-model="openProduct" title="选择商品" width="70%" append-to-body>
  323. <SelectGoods @cancel="openProduct = false" @pushGoods="pushGoods"></SelectGoods>
  324. </el-dialog>
  325. </div>
  326. </template>
  327. <script setup>
  328. import byForm from "@/components/byForm/index";
  329. import SelectGoods from "@/components/product/SelectGoods";
  330. import { ElMessage } from "element-plus";
  331. import selectCity from "@/components/selectCity/index.vue";
  332. const { proxy } = getCurrentInstance();
  333. const accountCurrency = ref([]);
  334. const fundsPaymentMethod = ref([]);
  335. const tradeMethods = ref([]);
  336. const shippingMethod = ref([]);
  337. const templateList = ref([]);
  338. const corporationList = ref([]);
  339. const customerList = ref([]);
  340. const countryData = ref([]);
  341. const provinceData = ref([]);
  342. const cityData = ref([]);
  343. const customerUserList = ref([]);
  344. const openProduct = ref(false);
  345. const formData = reactive({
  346. data: {
  347. amount: undefined,
  348. quotationProductList: [],
  349. quotationPayList: [],
  350. },
  351. });
  352. const submit = ref(null);
  353. const formOption = reactive({
  354. inline: true,
  355. labelWidth: 100,
  356. itemWidth: 100,
  357. rules: [],
  358. });
  359. const formConfig = computed(() => {
  360. return [
  361. {
  362. label: "合同模板",
  363. },
  364. {
  365. type: "select",
  366. label: "选择合同模板",
  367. prop: "contractTemplateId",
  368. data: templateList.value,
  369. fn: (val) => {
  370. changeTemplate(val);
  371. },
  372. },
  373. {
  374. type: "slot",
  375. slotName: "seller",
  376. label: "卖方信息",
  377. itemWidth: 50,
  378. },
  379. {
  380. type: "slot",
  381. slotName: "buyer",
  382. label: "买方信息",
  383. itemWidth: 50,
  384. },
  385. {
  386. type: "slot",
  387. slotName: "commodity",
  388. label: "商品信息",
  389. },
  390. {
  391. type: "slot",
  392. slotName: "otherCharge",
  393. label: "其他收费项目",
  394. },
  395. {
  396. type: "slot",
  397. slotName: "offerMoney",
  398. label: "报价金额",
  399. },
  400. {
  401. type: "slot",
  402. slotName: "delivery",
  403. label: "交付信息",
  404. },
  405. ];
  406. });
  407. const rules = ref({
  408. contractTemplateId: [{ required: true, message: "请选择合同模板", trigger: "change" }],
  409. buyCorporationId: [{ required: true, message: "请选择公司", trigger: "change" }],
  410. countryId: [{ required: true, message: "请选择国家", trigger: "change" }],
  411. buyContactName: [{ required: true, message: "请输入联系人", trigger: ["change", "blur"] }],
  412. buyContactNumber: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  413. productName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  414. productModel: [{ required: true, message: "请输入规格型号", trigger: "blur" }],
  415. quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  416. price: [{ required: true, message: "请输入单价", trigger: "blur" }],
  417. amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
  418. payName: [{ required: true, message: "请输入收费项目", trigger: ["change", "blur"] }],
  419. currency: [{ required: true, message: "请选择币种", trigger: "change" }],
  420. effective: [{ required: true, message: "请输入报价有效期", trigger: "blur" }],
  421. deliveryTime: [{ required: true, message: "请选择交货期限", trigger: "change" }],
  422. paymentMethod: [{ required: true, message: "请选择付款方式", trigger: "change" }],
  423. advanceRatio: [{ required: true, message: "请输入预付比例", trigger: "blur" }],
  424. tradeMethods: [{ required: true, message: "请选择贸易方式", trigger: "change" }],
  425. transportMethod: [{ required: true, message: "请选择运输方式", trigger: "change" }],
  426. transportRemark: [{ required: true, message: "请输入运输说明", trigger: "blur" }],
  427. remark: [{ required: true, message: "请输入付款条件", trigger: "blur" }],
  428. });
  429. const getDict = () => {
  430. proxy.getDictOne(["account_currency", "funds_payment_method", "trade_methods", "shipping_method"]).then((res) => {
  431. accountCurrency.value = res["account_currency"].map((x) => ({
  432. label: x.dictValue,
  433. value: x.dictKey,
  434. }));
  435. fundsPaymentMethod.value = res["funds_payment_method"].map((x) => ({
  436. label: x.dictValue,
  437. value: x.dictKey,
  438. }));
  439. tradeMethods.value = res["trade_methods"].map((x) => ({
  440. label: x.dictValue,
  441. value: x.dictKey,
  442. }));
  443. shippingMethod.value = res["shipping_method"].map((x) => ({
  444. label: x.dictValue,
  445. value: x.dictKey,
  446. }));
  447. });
  448. proxy.post("/contractTemplate/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  449. templateList.value = res.rows.map((item) => {
  450. return {
  451. ...item,
  452. label: item.templateName,
  453. value: item.id,
  454. };
  455. });
  456. });
  457. proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  458. corporationList.value = res.rows.map((item) => {
  459. return {
  460. ...item,
  461. label: item.name,
  462. value: item.id,
  463. };
  464. });
  465. });
  466. proxy.post("/customer/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  467. customerList.value = res.rows.map((item) => {
  468. return {
  469. ...item,
  470. label: item.name,
  471. value: item.id,
  472. };
  473. });
  474. });
  475. };
  476. getDict();
  477. const changeTemplate = (val) => {
  478. formData.data.sellCorporationId = "";
  479. formData.data.sellContactName = "";
  480. formData.data.sellContactNumber = "";
  481. formData.data.sellCountryName = "";
  482. formData.data.sellProvinceName = "";
  483. formData.data.sellCityName = "";
  484. formData.data.sellAddress = "";
  485. if (val) {
  486. proxy.post("/contractTemplate/detail", { id: val }).then((res) => {
  487. formData.data.sellCorporationId = res.corporationId;
  488. if (res.corporationId) {
  489. proxy.post("/corporation/detail", { id: res.corporationId }).then((detailCorporation) => {
  490. proxy.post("/customizeArea/list", { parentId: "0" }).then((resCountry) => {
  491. let sellCountryData = resCountry.filter((item) => item.id === detailCorporation.countryId);
  492. if (sellCountryData && sellCountryData.length > 0) {
  493. formData.data.sellCountryName = sellCountryData[0].chineseName;
  494. } else {
  495. formData.data.sellCountryName = "";
  496. }
  497. });
  498. if (detailCorporation.countryId) {
  499. proxy.post("/customizeArea/list", { parentId: detailCorporation.countryId }).then((resProvince) => {
  500. let sellProvinceData = resProvince.filter((item) => item.id === detailCorporation.provinceId);
  501. if (sellProvinceData && sellProvinceData.length > 0) {
  502. formData.data.sellProvinceName = sellProvinceData[0].name;
  503. } else {
  504. formData.data.sellProvinceName = "";
  505. }
  506. });
  507. } else {
  508. formData.data.sellProvinceName = "";
  509. }
  510. if (detailCorporation.provinceId) {
  511. proxy.post("/customizeArea/list", { parentId: detailCorporation.provinceId }).then((resCity) => {
  512. let sellCityData = resCity.filter((item) => item.id === detailCorporation.cityId);
  513. if (sellCityData && sellCityData.length > 0) {
  514. formData.data.sellCityName = sellCityData[0].name;
  515. } else {
  516. formData.data.sellCityName = "";
  517. }
  518. });
  519. } else {
  520. formData.data.sellCityName = "";
  521. }
  522. formData.data.sellAddress = detailCorporation.address;
  523. });
  524. }
  525. formData.data.sellContactName = res.contactName;
  526. formData.data.sellContactNumber = res.contactNumber;
  527. });
  528. }
  529. };
  530. const getCityData = (id, type, isChange) => {
  531. proxy.post("/customizeArea/list", { parentId: id }).then((res) => {
  532. if (type === "20") {
  533. provinceData.value = res;
  534. if (isChange) {
  535. formData.data.provinceId = "";
  536. formData.data.provinceName = "";
  537. formData.data.cityId = "";
  538. formData.data.cityName = "";
  539. }
  540. } else if (type === "30") {
  541. cityData.value = res;
  542. if (isChange) {
  543. formData.data.cityId = "";
  544. formData.data.cityName = "";
  545. }
  546. } else {
  547. countryData.value = res;
  548. }
  549. });
  550. };
  551. getCityData("0");
  552. const changeCustomer = (val) => {
  553. formData.data.buyContactName = "";
  554. formData.data.buyContactNumber = "";
  555. if (val) {
  556. proxy.post("/customer/detail", { id: val }).then(
  557. (res) => {
  558. if (res.customerUserList && res.customerUserList.length > 0) {
  559. formData.data.buyContactName = res.customerUserList[0].name;
  560. if (res.customerUserList[0].contactJson) {
  561. let contactJson = JSON.parse(res.customerUserList[0].contactJson);
  562. if (contactJson && contactJson.length > 0) {
  563. formData.data.buyContactNumber = contactJson[0].contactNo;
  564. }
  565. }
  566. customerUserList.value = res.customerUserList.map((item) => {
  567. return {
  568. ...item,
  569. value: item.name,
  570. };
  571. });
  572. }
  573. formData.data.countryId = res.countryId;
  574. formData.data.provinceId = res.provinceId;
  575. formData.data.cityId = res.cityId;
  576. formData.data.buyPostalCode = res.zipCode;
  577. formData.data.buyAddress = res.address;
  578. getCityData(formData.data.countryId, "20");
  579. getCityData(formData.data.provinceId, "30");
  580. },
  581. (err) => {
  582. console.log(err);
  583. formData.data.countryId = "";
  584. formData.data.provinceId = "";
  585. formData.data.cityId = "";
  586. formData.data.buyPostalCode = "";
  587. formData.data.buyAddress = "";
  588. }
  589. );
  590. } else {
  591. formData.data.countryId = "";
  592. formData.data.provinceId = "";
  593. formData.data.cityId = "";
  594. formData.data.buyPostalCode = "";
  595. formData.data.buyAddress = "";
  596. }
  597. };
  598. const createFilter = (queryString) => {
  599. return (restaurant) => {
  600. return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  601. };
  602. };
  603. const querySearchPerson = (queryString, callback) => {
  604. const results = queryString ? customerUserList.value.filter(createFilter(queryString)) : customerUserList.value;
  605. callback(results);
  606. };
  607. const handlePerson = (item) => {
  608. formData.data.buyContactNumber = item.phone;
  609. };
  610. const pushGoods = (goods) => {
  611. if (goods && goods.length > 0) {
  612. formData.data.quotationProductList = formData.data.quotationProductList.concat(
  613. goods.map((item) => {
  614. let fileUrl = "";
  615. if (item.fileList && item.fileList.length > 0) {
  616. fileUrl = item.fileList[0].fileUrl;
  617. }
  618. return {
  619. fileUrl: fileUrl,
  620. code: item.code,
  621. productId: item.id,
  622. productName: item.name,
  623. productModel: item.spec,
  624. unit: item.unit,
  625. quantity: undefined,
  626. price: undefined,
  627. amount: "",
  628. remark: item.remark,
  629. };
  630. })
  631. );
  632. ElMessage({
  633. message: "添加成功!",
  634. type: "success",
  635. });
  636. openProduct.value = false;
  637. } else {
  638. ElMessage("请选择至少一件商品");
  639. }
  640. };
  641. const onPicture = (path) => {
  642. window.open(path, "_blank");
  643. };
  644. const handleRemove = async (index) => {
  645. await formData.data.quotationProductList.splice(index, 1);
  646. totalAmount();
  647. };
  648. const calculationAmount = () => {
  649. nextTick(() => {
  650. if (formData.data.quotationProductList && formData.data.quotationProductList.length > 0) {
  651. for (let i = 0; i < formData.data.quotationProductList.length; i++) {
  652. let money = 0;
  653. if (formData.data.quotationProductList[i].quantity && formData.data.quotationProductList[i].price) {
  654. money = parseFloat(Number(formData.data.quotationProductList[i].quantity) * Number(formData.data.quotationProductList[i].price)).toFixed(2);
  655. }
  656. formData.data.quotationProductList[i].amount = money;
  657. }
  658. }
  659. nextTick(() => {
  660. totalAmount();
  661. });
  662. });
  663. };
  664. const totalAmount = () => {
  665. let money = 0;
  666. if (formData.data.quotationProductList && formData.data.quotationProductList.length > 0) {
  667. for (let i = 0; i < formData.data.quotationProductList.length; i++) {
  668. if (formData.data.quotationProductList[i].amount) {
  669. money = parseFloat(Number(money) + Number(formData.data.quotationProductList[i].amount)).toFixed(2);
  670. }
  671. }
  672. }
  673. if (formData.data.quotationPayList && formData.data.quotationPayList.length > 0) {
  674. for (let i = 0; i < formData.data.quotationPayList.length; i++) {
  675. if (formData.data.quotationPayList[i].amount) {
  676. money = parseFloat(Number(money) + Number(formData.data.quotationPayList[i].amount)).toFixed(2);
  677. }
  678. }
  679. }
  680. formData.data.amount = money;
  681. };
  682. const clickAdd = () => {
  683. if (formData.data.quotationPayList && formData.data.quotationPayList.length > 0) {
  684. formData.data.quotationPayList.push({
  685. payName: "",
  686. amount: undefined,
  687. remark: "",
  688. });
  689. } else {
  690. formData.data.quotationPayList = [{ payName: "", amount: undefined, remark: "" }];
  691. }
  692. };
  693. const handleDelete = async (index) => {
  694. await formData.data.quotationPayList.splice(index, 1);
  695. totalAmount();
  696. };
  697. const querySearch = (queryString, callback) => {
  698. proxy.post("/quotationPay/page", { payName: queryString }).then((res) => {
  699. if (res.rows && res.rows.length > 0) {
  700. res.rows = res.rows.map((item) => {
  701. return {
  702. ...item,
  703. value: item.payName,
  704. };
  705. });
  706. callback(res.rows);
  707. } else {
  708. callback([]);
  709. }
  710. });
  711. };
  712. const handleSubmit = async () => {
  713. let status = await submit.value.handleSubmit(() => {});
  714. if (status) {
  715. if (!(formData.data.quotationProductList && formData.data.quotationProductList.length > 0)) {
  716. ElMessage("请添加至少一件商品");
  717. return false;
  718. }
  719. return true;
  720. } else {
  721. setTimeout(() => {
  722. const errorDiv = document.getElementsByClassName("is-error");
  723. errorDiv[0].scrollIntoView();
  724. }, 0);
  725. }
  726. return status;
  727. };
  728. // 接收父组件的传值
  729. const props = defineProps({
  730. queryData: Object,
  731. });
  732. onMounted(() => {
  733. if (props.queryData.priceSheetId) {
  734. proxy.post("/saleQuotation/detail", { id: props.queryData.priceSheetId }).then((res) => {
  735. res.countryId = res.buyCountryId;
  736. res.provinceId = res.buyProvinceId;
  737. res.cityId = res.buyCityId;
  738. for (var text in res) {
  739. formData.data[text] = res[text];
  740. }
  741. if (formData.data.quotationProductList && formData.data.quotationProductList.length > 0) {
  742. for (let i = 0; i < formData.data.quotationProductList.length; i++) {
  743. proxy.post("/productInfo/detail", { id: formData.data.quotationProductList[i].productId }).then((resProduct) => {
  744. formData.data.quotationProductList[i].code = resProduct.code;
  745. });
  746. }
  747. let fileIds = formData.data.quotationProductList.map((item) => item.productId);
  748. proxy.post("/fileInfo/getList", { businessIdList: fileIds }).then((resFile) => {
  749. for (let i = 0; i < formData.data.quotationProductList.length; i++) {
  750. if (resFile[formData.data.quotationProductList[i].productId] && resFile[formData.data.quotationProductList[i].productId].length > 0) {
  751. formData.data.quotationProductList[i].fileUrl = resFile[formData.data.quotationProductList[i].productId][0].fileUrl;
  752. }
  753. }
  754. });
  755. }
  756. delete formData.data.id;
  757. delete formData.data.code;
  758. getCityData(formData.data.countryId, "20");
  759. getCityData(formData.data.provinceId, "30");
  760. if (formData.data.quotationProductList && formData.data.quotationProductList.length > 0) {
  761. formData.data.quotationProductList = formData.data.quotationProductList.map((item) => {
  762. delete item.id;
  763. return {
  764. ...item,
  765. };
  766. });
  767. }
  768. if (formData.data.quotationPayList && formData.data.quotationPayList.length > 0) {
  769. formData.data.quotationPayList = formData.data.quotationPayList.map((item) => {
  770. delete item.id;
  771. return {
  772. ...item,
  773. };
  774. });
  775. }
  776. });
  777. }
  778. });
  779. // 向父组件暴露
  780. defineExpose({
  781. submitData: formData.data,
  782. handleSubmit,
  783. });
  784. </script>
  785. <style lang="scss" scoped>
  786. ::v-deep(.el-input-number .el-input__inner) {
  787. text-align: left;
  788. }
  789. .pic {
  790. object-fit: contain;
  791. width: 50px;
  792. height: 50px;
  793. cursor: pointer;
  794. vertical-align: middle;
  795. }
  796. </style>