index.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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-check"
  96. @click="submit(data)"
  97. >
  98. </el-button>
  99. <el-button
  100. :size="size"
  101. circle
  102. type="danger"
  103. icon="el-icon-close"
  104. @click="visible = false"
  105. ></el-button>
  106. </span>
  107. </template>
  108. <div v-for="(item, index) in data" :key="index" style="margin: 10px">
  109. <el-descriptions :size="size" :column="column" border>
  110. <template #title>
  111. <span style="margin-right: 10px">{{ item.materialName }}</span>
  112. <span style="color: tomato">{{ item.puQty }}</span>
  113. <span> {{ item.puUnitName }}</span>
  114. </template>
  115. <el-descriptions-item label="需求组织">
  116. {{ item.demandOrgName }}
  117. </el-descriptions-item>
  118. <el-descriptions-item label="采购组织">
  119. {{ item.puOrgName }}
  120. </el-descriptions-item>
  121. <el-descriptions-item label="需求时间">
  122. {{ item.demandDate }}
  123. </el-descriptions-item>
  124. </el-descriptions>
  125. <el-table
  126. v-loading="loading"
  127. :size="size"
  128. :data="item.orderPriceVos"
  129. style="width: 100%"
  130. >
  131. <el-table-column
  132. v-for="(cItem, cIndex) in tableColumns"
  133. :key="cIndex"
  134. :prop="cItem.key"
  135. :label="cItem.title"
  136. :fixed="cItem.fixed"
  137. :width="cItem.width || 200"
  138. show-overflow-tooltip
  139. >
  140. <template slot-scope="scope">
  141. <el-input-number
  142. v-if="cItem.inputType === 'InputNumber'"
  143. v-model="scope.row[cItem.key]"
  144. :size="size"
  145. :min="cItem.min(item)"
  146. :max="cItem.max(item)"
  147. :placeholder="cItem.placeholder"
  148. :controls-position="cItem.controlsPosition"
  149. style="width: 90%"
  150. ></el-input-number>
  151. <el-date-picker
  152. v-else-if="cItem.inputType === 'DatePicker'"
  153. v-model="scope.row[cItem.key]"
  154. :size="size"
  155. :type="cItem.type"
  156. :placeholder="cItem.placeholder"
  157. :value-format="cItem.valueFormat"
  158. :picker-options="cItem.pickerOptions"
  159. style="width: 90%"
  160. ></el-date-picker>
  161. <el-input
  162. v-else-if="cItem.inputType === 'Textarea'"
  163. v-model="scope.row[cItem.key]"
  164. :size="size"
  165. autosize
  166. type="textarea"
  167. style="width: 90%"
  168. ></el-input>
  169. <dr-computed-input
  170. v-else-if="cItem.inputType === 'ComputedInput'"
  171. v-model="scope.row[cItem.key]"
  172. :source="scope.row"
  173. :computed="cItem.computed"
  174. :placeholder="cItem.placeholder"
  175. style="width: 100%"
  176. ></dr-computed-input>
  177. <dict-tag
  178. v-else-if="cItem.inputType === 'Select'"
  179. :size="size"
  180. :value="scope.row[cItem.key]"
  181. :options="dict.type[cItem.referName]"
  182. />
  183. <span v-else>{{ scope.row[cItem.key] }}</span>
  184. </template>
  185. </el-table-column>
  186. </el-table>
  187. </div>
  188. </el-drawer>
  189. </template>
  190. <style scoped></style>