index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <template>
  2. <div class="good-share" v-loading="loading">
  3. <div class="left">
  4. <div class="title">项目信息</div>
  5. <ul class="clear" v-show="sitem">
  6. <li>总预算:</li>
  7. <li>{{ sitem.budget_total }}元</li>
  8. <li>要求到货日期:</li>
  9. <li>{{ sitem.arrtime }}</li>
  10. <li>业务员:</li>
  11. <li>{{ sitem.creater }}</li>
  12. <li>购买方:</li>
  13. <li>
  14. {{ sitem.company }}
  15. </li>
  16. <li>项目编号:</li>
  17. <li>{{ sitem.projectNo }}</li>
  18. <li>项目名称:</li>
  19. <li>{{ sitem.project_name }}</li>
  20. <li>项目用途:</li>
  21. <li>
  22. {{ sitem.use_desc }}
  23. </li>
  24. </ul>
  25. </div>
  26. <div class="right">
  27. <back-good-show
  28. v-if="newTime !== ''"
  29. :newTime="newTime"
  30. :sitem="sitem"
  31. @tableChange="tableChange"
  32. />
  33. </div>
  34. <div class="bottom">
  35. <div class="table-main clear">
  36. <div class="table-main-index" style="padding-top: 40px">
  37. 已选中的商品
  38. </div>
  39. <div class="table-main-last">
  40. <el-table
  41. :data="tableData"
  42. border
  43. max-height="170px"
  44. :size="'mini'"
  45. style="width: 100%"
  46. >
  47. <el-table-column label="商品要求" type="index" width="80">
  48. </el-table-column>
  49. <el-table-column property="date" label="商品名称" width="145" />
  50. <el-table-column property="name" label="图片" width="120">
  51. </el-table-column>
  52. <el-table-column
  53. prope="address"
  54. label="分类"
  55. show-overflow-tooltip
  56. />
  57. <el-table-column
  58. prope="address"
  59. label="购买数量"
  60. show-overflow-tooltip
  61. />
  62. <el-table-column
  63. prope="address"
  64. label="预算单价"
  65. show-overflow-tooltip
  66. />
  67. <el-table-column
  68. prope="address"
  69. label="预算单价"
  70. show-overflow-tooltip
  71. />
  72. </el-table>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script>
  79. import asyncRequest from "@/apis/service/good-share";
  80. import resToken from "@/mixins/resToken";
  81. import backGoodShow from "./components/backGoodShow";
  82. export default {
  83. name: "goodShare",
  84. mixins: [resToken],
  85. components: {
  86. backGoodShow,
  87. },
  88. data() {
  89. return {
  90. currentRow: null,
  91. loading: true,
  92. status: "",
  93. radio: "",
  94. sitem: {},
  95. queryId: "PROa8gi220310202256",
  96. multipleSelection: [],
  97. tableData: [],
  98. newTime: "",
  99. };
  100. },
  101. mounted() {
  102. this.initData();
  103. },
  104. methods: {
  105. async initData() {
  106. this.loading = true;
  107. const { code, message, data } = await asyncRequest.detail({
  108. projectNo: this.queryId,
  109. });
  110. this.loading = false;
  111. if (code === 0) {
  112. this.sitem = JSON.parse(JSON.stringify(data));
  113. const { status } = this.sitem;
  114. this.status = status;
  115. this.getNewTime();
  116. } else if (code >= 100 && code <= 104) {
  117. await this.logout();
  118. } else {
  119. this.$message.warning(message);
  120. }
  121. },
  122. getNewTime() {
  123. this.newTime = new Date().valueOf();
  124. },
  125. tableChange(e) {
  126. console.log(e);
  127. const { list } = e;
  128. this.tableData = JSON.parse(JSON.stringify(list));
  129. },
  130. async submitForm() {
  131. this.loading = true;
  132. let list = JSON.parse(JSON.stringify(this.tableData));
  133. let model = {
  134. feedid: [],
  135. };
  136. list.forEach((a) => {
  137. model.feedid.push(a.id);
  138. });
  139. let { code, data, message } = await asyncRequest.back_good_submit(model);
  140. console.log(res);
  141. this.loading = false;
  142. if (code === 0) {
  143. this.$notify.success({
  144. title: "提交成功!",
  145. message: "",
  146. });
  147. this.showModelThis = false;
  148. // 刷新
  149. this.$emit("refresh");
  150. } else if (code >= 100 && code <= 104) {
  151. await this.logout();
  152. } else {
  153. this.$message.warning(message);
  154. }
  155. },
  156. },
  157. };
  158. </script>
  159. <style lang="scss" scoped>
  160. .good-share {
  161. position: relative;
  162. width: 100%;
  163. height: 100%;
  164. min-width: 1200px;
  165. min-height: 100%;
  166. background: #f2f2f2;
  167. box-sizing: border-box;
  168. padding: 16px;
  169. .left {
  170. position: absolute;
  171. top: 16px;
  172. left: 16px;
  173. z-index: 1;
  174. width: 240px;
  175. min-height: calc(100% - 32px);
  176. height: calc(100% - 32px);
  177. background: #fff;
  178. .title {
  179. height: 50px;
  180. line-height: 50px;
  181. font-size: 18px;
  182. font-weight: bold;
  183. box-sizing: border-box;
  184. color: #565656;
  185. padding: 0 16px;
  186. border-bottom: 1px solid #f2f2f2;
  187. }
  188. ul {
  189. padding: 16px;
  190. box-sizing: border-box;
  191. li {
  192. line-height: 32px;
  193. font-size: 14px;
  194. &:nth-child(2n + 1) {
  195. text-align: left;
  196. float: left;
  197. }
  198. &:nth-child(2n + 2) {
  199. width: 100%;
  200. text-align: right;
  201. }
  202. }
  203. }
  204. }
  205. .right {
  206. position: absolute;
  207. top: 16px;
  208. right: 16px;
  209. z-index: 1;
  210. background: #fff;
  211. width: calc(100% - 288px);
  212. min-height: calc(100% - 288px);
  213. height: calc(100% - 248px);
  214. box-sizing: border-box;
  215. // padding: 16px;
  216. .title {
  217. height: 50px;
  218. line-height: 50px;
  219. font-size: 18px;
  220. font-weight: bold;
  221. box-sizing: border-box;
  222. color: #565656;
  223. padding: 0 16px;
  224. border-bottom: 1px solid #f2f2f2;
  225. }
  226. .table-main {
  227. // padding: 16px;
  228. width: 100%;
  229. box-sizing: border-box;
  230. .table-main-index {
  231. float: left;
  232. width: 45px;
  233. padding: 16px;
  234. text-align: center;
  235. }
  236. .table-main-last {
  237. float: left;
  238. width: calc(100% - 45px);
  239. padding: 16px;
  240. border-left: 1px solid #f2f2f2;
  241. }
  242. &:last-child {
  243. border-bottom: 1px solid #f2f2f2;
  244. // .table-main-index {
  245. // }
  246. // .table-main-last {
  247. // border-bottom: 1px solid #f2f2f2;
  248. // }
  249. }
  250. }
  251. }
  252. .bottom {
  253. position: absolute;
  254. bottom: 16px;
  255. right: 16px;
  256. z-index: 1;
  257. background: #fff;
  258. width: calc(100% - 288px);
  259. min-height: calc(200px);
  260. height: calc(200px);
  261. box-sizing: border-box;
  262. // padding: 16px;
  263. .table-main {
  264. // padding: 16px;
  265. width: 100%;
  266. box-sizing: border-box;
  267. .table-main-index {
  268. float: left;
  269. width: 45px;
  270. padding: 16px;
  271. text-align: center;
  272. }
  273. .table-main-last {
  274. float: left;
  275. width: calc(100% - 45px);
  276. padding: 16px;
  277. border-left: 1px solid #f2f2f2;
  278. }
  279. // &:last-child {
  280. // border-bottom: 1px solid #f2f2f2;
  281. // .table-main-index {
  282. // }
  283. // .table-main-last {
  284. // border-bottom: 1px solid #f2f2f2;
  285. // }
  286. // }
  287. }
  288. }
  289. }
  290. </style>