index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <script>
  2. import { TableColumns ,BasicColumns} from "./column";
  3. import { initDicts } from "@/utils/init.js";
  4. import { FIRSTDIRECT, ADD } from "@/api/business/purchase/task";
  5. export default {
  6. name: "FirstDirectPurchaseDrawer",
  7. dicts: [...initDicts(TableColumns)],
  8. props: {
  9. selectData: {
  10. type: [Array],
  11. require: true,
  12. },
  13. },
  14. components: {
  15. ElSuperTable: () => import("@/components/super-table/index.vue"),
  16. ElDictTag: () => import("@/components/DictTag/index.vue"),
  17. ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
  18. },
  19. data() {
  20. return {
  21. title: "订单生成",
  22. width: "100%",
  23. column: 1,
  24. visible: false,
  25. loading: false,
  26. tableColumns: TableColumns,
  27. basicColumns:BasicColumns,
  28. data: [],
  29. showData:[],
  30. supplier:'',
  31. size:'mini',
  32. };
  33. },
  34. computed: {
  35. disabled: {
  36. get() {
  37. return !this.selectData.length;
  38. },
  39. set() {},
  40. },
  41. restaurants:{
  42. get(){
  43. let allSupplier = [];
  44. this.data.forEach(item =>{
  45. let orderPriceVos = item.orderPriceVos.map(order => ({
  46. value:order.supplierName,
  47. id:order.supplier
  48. }))
  49. allSupplier.push(...orderPriceVos);
  50. })
  51. allSupplier = this.uniqueFunc(allSupplier,'id');
  52. console.log(allSupplier,'allSupplier');
  53. return allSupplier;
  54. },
  55. set(){},
  56. }
  57. },
  58. watch: {},
  59. methods: {
  60. //
  61. async open(prop) {
  62. this.visible = await this.fetchItem(prop);
  63. },
  64. //
  65. hide() {
  66. this.visible = false;
  67. },
  68. //
  69. async fetchItem(prop) {
  70. try {
  71. // try
  72. this.loading = true;
  73. const { code, data } = await FIRSTDIRECT(prop);
  74. if (code === 200) {
  75. this.data = data.map((item) => ({
  76. ...item,
  77. orderPriceVos: item.orderPriceVos.map((cItem) => ({
  78. ...item,
  79. customerName:'',
  80. customer:'',
  81. ...cItem,
  82. purchaseQuantity: item.orderPriceVos.length === 1 ? (item.puQty - item.executeQty) : undefined
  83. })),
  84. }));
  85. this.showData = _.cloneDeep(this.data);
  86. console.log(this.data,'this.data');
  87. return true;
  88. } else {
  89. return false;
  90. }
  91. } catch (err) {
  92. // catch
  93. console.error(err);
  94. } finally {
  95. // finally
  96. this.loading = false;
  97. }
  98. },
  99. //
  100. async submit(prop) {
  101. const params = prop
  102. .map((item) => ({
  103. ...item,
  104. orderPriceVos: item.orderPriceVos.filter(
  105. (citem) => citem.purchaseQuantity
  106. ),
  107. }))
  108. .filter((item) => item.orderPriceVos.length);
  109. try {
  110. // try
  111. const { msg, code } = await ADD(params);
  112. if (code === 200) {
  113. this.hide();
  114. this.$emit("success");
  115. this.$notify.success({ title: msg, duration: 3000 });
  116. }
  117. } catch (err) {
  118. // catch
  119. } finally {
  120. // finally
  121. }
  122. },
  123. hide(){
  124. this.visible = false;
  125. },
  126. supplierChange(value){
  127. console.log(value,'value');
  128. },
  129. // 建议值
  130. querySearch(queryString, cb){
  131. let results = this.restaurants;
  132. results = queryString
  133. ? results.filter(this.createFilter(queryString))
  134. : results;
  135. //cb是回调函数,返回筛选出的结果数据到输入框下面的输入列表
  136. cb(results);
  137. },
  138. createFilter(queryString) {
  139. return (item) => {
  140. return item.value.toUpperCase().match(queryString.toUpperCase());
  141. };
  142. },
  143. handleSelect(prop){
  144. console.log(prop,'prop');
  145. this.showData = this.data.map(item => {
  146. return {
  147. ...item,
  148. orderPriceVos:item.orderPriceVos.filter(order => order.supplier === prop.id),
  149. }
  150. })
  151. },
  152. handleClear(){
  153. this.showData = _.cloneDeep(this.data);
  154. },
  155. // 对象数组去重
  156. uniqueFunc(arr, uniId){
  157. const res = new Map();
  158. return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
  159. },
  160. },
  161. created() {},
  162. mounted() {},
  163. destroyed() {},
  164. };
  165. </script>
  166. <template>
  167. <el-button
  168. v-bind="$attrs"
  169. v-on="$listeners"
  170. :disabled="disabled"
  171. @click="open(selectData)"
  172. >
  173. {{ title }}
  174. <el-drawer
  175. :show-close="false"
  176. :size="width"
  177. :title="title"
  178. :visible.sync="visible"
  179. append-to-body
  180. >
  181. <template slot="title">
  182. <span>{{ title }}</span>
  183. <el-button
  184. type="primary"
  185. :size="$attrs.size"
  186. :loading="loading"
  187. @click="submit(data)"
  188. >确 认</el-button
  189. >
  190. <el-button
  191. :size="$attrs.size"
  192. :loading="loading"
  193. @click="hide"
  194. >取 消</el-button
  195. >
  196. </template>
  197. <el-row style="padding: 0 16px;">
  198. <el-col>
  199. <el-autocomplete
  200. class="inline-input"
  201. :size="size"
  202. v-model="supplier"
  203. clearable
  204. :fetch-suggestions="querySearch"
  205. placeholder="请输入供应商"
  206. @select="handleSelect"
  207. @clear="handleClear"
  208. ></el-autocomplete>
  209. </el-col>
  210. </el-row>
  211. <div v-for="(item, index) in showData" :key="index" class="m-4">
  212. <template v-if="item.orderPriceVos.length">
  213. <el-descriptions>
  214. <template slot="title" >
  215. <template>
  216. <span style="margin-right: 10px">{{ item.materialName }}</span>
  217. <span style="color: tomato">{{ item.puQty }}</span>
  218. (<span style="color: tomato">{{
  219. item.puQty - (item.executeQty || 0)
  220. }}</span
  221. >) <span> {{ item.puUnitName }}</span>
  222. </template>
  223. </template>
  224. <el-descriptions-item
  225. v-for="(basic,bIndex) in basicColumns"
  226. :key="bIndex"
  227. :label="basic.item.title"
  228. >{{ item[basic.item.key] }}
  229. </el-descriptions-item>
  230. <el-descriptions-item
  231. label="需求数量"
  232. >{{ item.puQty - (item.executeQty || 0) }}
  233. </el-descriptions-item>
  234. </el-descriptions>
  235. <el-super-table
  236. v-model="item.orderPriceVos"
  237. :columns="tableColumns"
  238. :size="$attrs.size"
  239. :dict="dict"
  240. >
  241. <!-- showSummary -->
  242. <template slot="purchaseQuantity" slot-scope="scope">
  243. <component
  244. v-bind="scope.attr"
  245. v-model="scope.row[scope.item.key]"
  246. :size="$attrs.size"
  247. :max="scope.attr.max(scope.row)"
  248. >
  249. </component>
  250. </template>
  251. </el-super-table>
  252. </template>
  253. </div>
  254. </el-drawer>
  255. </el-button>
  256. </template>
  257. <style scoped></style>