index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <script>
  2. import { TableColumns } from "./column";
  3. import { initDicts, initColumns } from "@/utils/init";
  4. import { FIRSTDIRECT, ADD } from "@/api/business/purchase/task";
  5. export default {
  6. name: "FirstDirectPurchaseDrawer",
  7. dicts: initDicts(TableColumns),
  8. components: {},
  9. data() {
  10. return {
  11. size: "mini",
  12. title: "首次协议直采",
  13. width: "100%",
  14. column: 3,
  15. visible: false,
  16. loading: false,
  17. tableColumns: initColumns(TableColumns),
  18. data: [],
  19. };
  20. },
  21. computed: {},
  22. watch: {},
  23. methods: {
  24. //
  25. async open(prop) {
  26. this.visible = await this.fetchItem(prop);
  27. },
  28. //
  29. hide() {
  30. this.visible = false;
  31. },
  32. //
  33. async fetchItem(prop) {
  34. try {
  35. // try
  36. this.loading = true;
  37. const { code, data } = await FIRSTDIRECT(prop);
  38. if (code === 200) {
  39. this.data = data;
  40. return true;
  41. } else {
  42. return false;
  43. }
  44. } catch (err) {
  45. // catch
  46. console.error(err);
  47. } finally {
  48. // finally
  49. this.loading = false;
  50. }
  51. },
  52. //
  53. async submit(prop) {
  54. const params = prop
  55. .map((item) => ({
  56. ...item,
  57. orderPriceVos: item.orderPriceVos.filter(
  58. (citem) => citem.purchaseQuantity
  59. ),
  60. }))
  61. .filter((item) => item.orderPriceVos.length);
  62. try {
  63. // try
  64. const { msg, code } = await ADD(params);
  65. if (code === 200) {
  66. this.hide();
  67. this.$emit("success");
  68. this.$notify.success({ title: msg, duration: 3000 });
  69. }
  70. } catch (err) {
  71. // catch
  72. } finally {
  73. // finally
  74. }
  75. },
  76. },
  77. created() {},
  78. mounted() {},
  79. destroyed() {},
  80. };
  81. </script>
  82. <template>
  83. <el-drawer
  84. :size="width"
  85. :title="title"
  86. :show-close="false"
  87. :visible.sync="visible"
  88. >
  89. <template slot="title">
  90. <span>{{ title }}</span>
  91. <span>
  92. <el-button
  93. :size="size"
  94. circle
  95. icon="el-icon-close"
  96. @click="visible = false"
  97. ></el-button>
  98. <el-button
  99. :size="size"
  100. circle
  101. icon="el-icon-check"
  102. @click="submit(data)"
  103. >
  104. </el-button>
  105. </span>
  106. </template>
  107. <div v-for="(item, index) in data" :key="index" style="margin: 10px">
  108. <el-descriptions :size="size" :column="column" border>
  109. <template #title>
  110. <span style="margin-right: 10px">{{ item.materialName }}</span>
  111. <span style="color: tomato">{{ item.puQty }}</span>
  112. <span> {{ item.puUnitName }}</span>
  113. </template>
  114. <el-descriptions-item label="需求组织">
  115. {{ item.demandOrgName }}
  116. </el-descriptions-item>
  117. <el-descriptions-item label="采购组织">
  118. {{ item.puOrgName }}
  119. </el-descriptions-item>
  120. <el-descriptions-item label="需求时间">
  121. {{ item.demandDate }}
  122. </el-descriptions-item>
  123. </el-descriptions>
  124. <el-table
  125. v-loading="loading"
  126. :size="size"
  127. :data="item.orderPriceVos"
  128. style="width: 100%"
  129. >
  130. <el-table-column
  131. v-for="(cItem, cIndex) in tableColumns"
  132. :key="cIndex"
  133. :prop="cItem.key"
  134. :label="cItem.title"
  135. :fixed="cItem.fixed"
  136. :width="cItem.width || 180"
  137. show-overflow-tooltip
  138. >
  139. <template slot-scope="scope">
  140. <el-input-number
  141. v-if="cItem.inputType === 'InputNumber'"
  142. v-model="scope.row[cItem.key]"
  143. :size="size"
  144. :min="cItem.min(item)"
  145. :max="cItem.max(item)"
  146. :placeholder="cItem.placeholder"
  147. :controls-position="cItem.controlsPosition"
  148. style="width: 90%"
  149. ></el-input-number>
  150. <el-date-picker
  151. v-else-if="cItem.inputType === 'DatePicker'"
  152. v-model="scope.row[cItem.key]"
  153. :size="size"
  154. :type="cItem.type"
  155. :placeholder="cItem.placeholder"
  156. :value-format="cItem.valueFormat"
  157. :picker-options="cItem.pickerOptions"
  158. style="width: 90%"
  159. ></el-date-picker>
  160. <el-input
  161. v-else-if="cItem.inputType === 'Textarea'"
  162. v-model="scope.row[cItem.key]"
  163. :size="size"
  164. autosize
  165. type="textarea"
  166. style="width: 90%"
  167. ></el-input>
  168. <dict-tag
  169. v-else-if="cItem.inputType === 'Select'"
  170. :size="size"
  171. :value="scope.row[cItem.key]"
  172. :options="dict.type[cItem.referName]"
  173. />
  174. <span v-else>{{ scope.row[cItem.key] }}</span>
  175. </template>
  176. </el-table-column>
  177. </el-table>
  178. </div>
  179. </el-drawer>
  180. </template>
  181. <style scoped></style>