移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

290 regels
9.3 KiB

  1. <template>
  2. <div class="home_wrapper">
  3. <div class="header_main">
  4. 新增结款计划
  5. <div class="return_btn" @click="onClickLeft"></div>
  6. </div>
  7. <van-form @submit="onSubmit">
  8. <div class="list_main">
  9. <div class="titBox">
  10. <img src="../../assets/images/sunVillage_info/add_icon_2.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
  11. <p class="tit">结款计划</p>
  12. </div>
  13. <!-- <van-field required v-model="form.biddingWay" label="招标方式" placeholder="招标方式" input-align="right" :border="false" />-->
  14. <van-field v-model="form.code" label="合同编码" placeholder="合同编码" input-align="right" disabled />
  15. <van-field v-model="form.name" label="合同名称" placeholder="合同名称" input-align="right" :border="false" disabled />
  16. <van-field v-model="form.secondParty" label="乙方" placeholder="乙方" input-align="right" :border="false" disabled />
  17. <van-field v-model="collectionPay" @click="showCollectionPay = false" label="收付款" placeholder="收付款" input-align="right" :border="false" disabled/>
  18. <van-popup v-model="showCollectionPay" position="bottom">
  19. <van-picker
  20. show-toolbar
  21. :columns="collectionPayOptions"
  22. @confirm="onConfirmCollectionPay"
  23. @cancel="showCollectionPay = false"/>
  24. </van-popup>
  25. <van-field v-model="form.orderNum" label="结款序号" placeholder="填写序号" required input-align="right" type="digit" :error-message="errorMessages.orderNum" :border="false" />
  26. <van-field v-model="form.settlementDate" clickable label="结款日期" placeholder="请选择" :error-message="errorMessages.settlementDate" @click="showSettlementDate = true" input-align="right" right-icon="arrow-down" label-width="auto" required :border="false"/>
  27. <van-popup v-model="showSettlementDate" position="bottom">
  28. <van-datetime-picker v-model="settlementDate" type="date" title="选择年月日" @confirm="onConfirmSettlementDate" @cancel="showSettlementDate = false"/>
  29. </van-popup>
  30. <van-field v-model="form.settlementAmount" label="结款金额" type="number" required placeholder="填写金额" input-align="right" :error-message="errorMessages.settlementAmount" :border="false" />
  31. <van-field v-model="planStatus" @click="showPlanStatus = false" label="结款状态" input-align="right" :border="false" disabled />
  32. <van-popup v-model="showPlanStatus" position="bottom">
  33. <van-picker
  34. show-toolbar
  35. :columns="planStatusOptions"
  36. @confirm="onConfirmPlanStatus"
  37. @cancel="showPlanStatus = false"
  38. disabled/>
  39. </van-popup>
  40. <van-field v-model="form.remark" label="备注" placeholder="填写备注" input-align="right" :border="false" />
  41. </div>
  42. <div style="margin: 16px auto;width: 50%;">
  43. <van-button round block type="primary" native-type="submit">
  44. 保存
  45. </van-button>
  46. </div>
  47. </van-form>
  48. </div>
  49. </template>
  50. <script>
  51. import {addPlan, getInfo} from "@/api/sunVillage_info/fixedAssets";
  52. export default {
  53. name: "informationFunPlanAdd",
  54. data() {
  55. return {
  56. assetStatusOptions:[],
  57. auditStatus:[],
  58. loading: false,
  59. finished: false,
  60. listLength:'0',
  61. searchInput:'',
  62. contractionId:'',
  63. form:{
  64. contractionId:'',
  65. code:'',
  66. name:'',
  67. secondParty:'',
  68. collectionPay:'',
  69. planStatus:'1',
  70. orderNum:'',
  71. settlementDate:'',
  72. settlementAmount:'',
  73. remark:'',
  74. },
  75. errorMessages: {
  76. orderNum: '',
  77. settlementDate: '',
  78. settlementAmount: '',
  79. },
  80. queryParams:{
  81. /* pageNum:1,
  82. pageSize:10,
  83. orderByColumn:'createTime',
  84. isAsc:'desc',
  85. name:'',*/
  86. contractionId:'',
  87. },
  88. //收款日期
  89. settlementDate:new Date(),
  90. showSettlementDate:false,
  91. //结款状态
  92. planStatus:'待付款',
  93. showPlanStatus:false,
  94. planStatusOptions:[],
  95. //收付款
  96. collectionPay:'收款',
  97. showCollectionPay:false,
  98. collectionPayOptions:[],
  99. // rules: {
  100. // settlementAmount: [
  101. // { required: true, message: '请输入结款金额' },
  102. // ]
  103. // },
  104. };
  105. },
  106. created() {
  107. this.houseGetDicts("plan_status").then((response) => {
  108. for(var i = 0 ; i < response.data.length ; i++){
  109. this.planStatusOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
  110. }
  111. });
  112. this.houseGetDicts("collection_pay").then((response) => {
  113. for(var i = 0 ; i < response.data.length ; i++){
  114. this.collectionPayOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
  115. }
  116. });
  117. /* this.houseGetDicts("plan_status").then((response) => {
  118. this.planStatusOptions = response.data;
  119. });
  120. this.houseGetDicts("collection_pay").then((response) => {
  121. this.collectionPayOptions = response.data;
  122. });*/
  123. this.getDetail(this.$route.query.contractionId)
  124. this.contractionId = this.$route.query.contractionId;
  125. },
  126. methods: {
  127. getDetail(id){
  128. getInfo(id).then(response => {
  129. this.form.contractionId = response.data.id;
  130. this.form.code = response.data.code;
  131. this.form.name = response.data.name;
  132. this.form.secondParty = response.data.secondParty;
  133. this.form.planStatus = '1';
  134. this.form.collectionPay = response.data.collectionPay;
  135. });
  136. },
  137. onConfirmPlanStatus(data){
  138. this.planStatus = data.text;
  139. this.form.planStatus = data.value;
  140. this.showPlanStatus = false;
  141. },
  142. onConfirmCollectionPay(data){
  143. this.collectionPay = data.text;
  144. this.form.collectionPay = data.value;
  145. this.showCollectionPay = false;
  146. },
  147. onConfirmSettlementDate(data){
  148. this.form.settlementDate = this.format(data,'yyyy-MM-dd');
  149. this.settlementDate = data;
  150. this.showSettlementDate = false;
  151. },
  152. onSubmit(){
  153. event.preventDefault(); // 阻止表单默认提交行为
  154. // 清除之前的错误消息
  155. this.errorMessages.orderNum = '';
  156. this.errorMessages.settlementDate = '';
  157. this.errorMessages.settlementAmount = '';
  158. let isValid = true;
  159. // 验证结款序号
  160. if (!this.form.orderNum) {
  161. this.errorMessages.orderNum = '结款序号不能为空';
  162. isValid = false;
  163. }
  164. // 验证结款日期
  165. if (!this.form.settlementDate) {
  166. this.errorMessages.settlementDate = '结款日期不能为空';
  167. isValid = false;
  168. }
  169. // 验证结款金额
  170. if (!this.form.settlementAmount) {
  171. this.errorMessages.settlementAmount = '结款金额不能为空';
  172. isValid = false;
  173. }
  174. // 如果验证通过,进行提交处理
  175. if (isValid) {
  176. this.form.contractionId = this.contractionId;
  177. addPlan(this.form).then((response) => {
  178. if (response.code == 200) {
  179. this.$notify({type: 'success', message: '新增成功'});
  180. setTimeout(function () {
  181. history.back(-1);
  182. }, 2000)
  183. }
  184. });
  185. }
  186. }
  187. },
  188. }
  189. </script>
  190. <style scoped lang="scss">
  191. /deep/ .van-button--primary{
  192. background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
  193. background-size: 100% 100%;
  194. border: none;
  195. }
  196. .home_wrapper{
  197. background: #e9e9e9;
  198. min-height: 100vh;
  199. width: 100vw;
  200. .header_main {
  201. height: 116px;
  202. background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
  203. background-size: 100% 100%;
  204. position: fixed;
  205. top: 0;
  206. left: 0;
  207. width: 100%;
  208. font-size: 36px;
  209. line-height: 116px;
  210. text-align: center;
  211. color: #fff;
  212. position: relative;
  213. .return_btn {
  214. width: 24px;
  215. height: 43.2px;
  216. background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
  217. background-size: 20px 36px;
  218. position: absolute;
  219. left: 38px;
  220. top: 36px;
  221. }
  222. .add_btn {
  223. width: 56.4px;
  224. height: 40.8px;
  225. background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
  226. background-size: 47px 34px;
  227. position: absolute;
  228. right: 38px;
  229. top: 36px;
  230. }
  231. }
  232. .list_main{
  233. padding:25px;
  234. background: #ffffff;
  235. width: 94%;
  236. margin: 25px auto 0;
  237. border-radius: 15PX;
  238. box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
  239. }
  240. .titBox{
  241. display: flex;
  242. align-items: center;
  243. }
  244. .tit{
  245. font-size: 36px;
  246. font-weight: bold;
  247. }
  248. /deep/ .van-cell{
  249. padding-left: 0!important;
  250. padding-right: 0!important;
  251. padding-bottom: 0!important;
  252. }
  253. /deep/ .van-field__label{
  254. padding-left: 10PX;
  255. width: 8.2em;
  256. }
  257. /deep/ .van-cell--required::before{
  258. left: 0;
  259. }
  260. /deep/ .van-field--disabled .van-field__label {
  261. color: #646566;
  262. }
  263. }
  264. </style>