BudgetCostModal.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. <template>
  2. <a-modal
  3. :title="title"
  4. :width="1200"
  5. :visible="visible"
  6. :maskClosable="false"
  7. :confirmLoading="confirmLoading"
  8. @ok="handleOk"
  9. @cancel="handleCancel">
  10. <a-spin :spinning="confirmLoading">
  11. <!-- 主表单区域 -->
  12. <a-form :form="form">
  13. <a-row>
  14. <a-col :span="8">
  15. <a-form-item label="登记人" :labelCol="labelCol" :wrapperCol="wrapperCol">
  16. <j-popup
  17. v-decorator="['registerPerson', validatorRules.registerPerson]"
  18. :trigger-change="true"
  19. org-fields="realname,depart_name"
  20. dest-fields="registerPerson,registerDept"
  21. code="user_dept"
  22. @callback="popupCallback"/>
  23. </a-form-item>
  24. </a-col>
  25. <a-col :span="8">
  26. <a-form-item label="登记部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
  27. <a-input :disabled="true" v-decorator="[ 'registerDept', validatorRules.registerDept]" placeholder="请输入登记部门"></a-input>
  28. </a-form-item>
  29. </a-col>
  30. <a-col :span="8">
  31. <a-form-item label="登记日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  32. <j-date placeholder="请选择登记日期" v-decorator="[ 'registerDate', validatorRules.registerDate]" :trigger-change="true" style="width: 100%"/>
  33. </a-form-item>
  34. </a-col>
  35. <a-col :span="8">
  36. <a-form-item label="预算年度" :labelCol="labelCol" :wrapperCol="wrapperCol">
  37. <a-date-picker
  38. mode="year"
  39. v-decorator="['budgetYear', validatorRules.budgetYear]"
  40. placeholder="请输入年份"
  41. format="YYYY"
  42. style="width: 200px"
  43. :open="yearShowOne"
  44. @openChange="openChangeOne"
  45. @panelChange="panelChangeOne"/>
  46. </a-form-item>
  47. </a-col>
  48. <a-col :span="24">
  49. <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
  50. <a-textarea v-decorator="['remark', validatorRules.remark]" rows="4" placeholder="请输入备注"/>
  51. </a-form-item>
  52. </a-col>
  53. </a-row>
  54. </a-form>
  55. <!-- 子表单区域 -->
  56. <a-tabs v-model="activeKey" @change="handleChangeTabs">
  57. <a-tab-pane tab="预算费用管理子表" :key="refKeys[0]" :forceRender="true">
  58. <j-editable-table
  59. :ref="refKeys[0]"
  60. :loading="budgetCostDetailTable.loading"
  61. :columns="budgetCostDetailTable.columns"
  62. :dataSource="budgetCostDetailTable.dataSource"
  63. :maxHeight="300"
  64. :rowNumber="true"
  65. :rowSelection="true"
  66. :actionButton="true">
  67. <template v-slot:department="props">
  68. <j-select-depart @change="departChange(props)" v-model="props.text" :trigger-change="true"></j-select-depart>
  69. </template>
  70. </j-editable-table>
  71. </a-tab-pane>
  72. </a-tabs>
  73. </a-spin>
  74. </a-modal>
  75. </template>
  76. <script>
  77. import moment from 'moment'
  78. import pick from 'lodash.pick'
  79. import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  80. import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  81. import { validateDuplicateValue } from '@/utils/util'
  82. import JDate from '@/components/jeecg/JDate'
  83. import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  84. export default {
  85. name: 'BudgetCostModal',
  86. mixins: [JEditableTableMixin],
  87. components: {
  88. JDate,
  89. JSelectDepart
  90. },
  91. data() {
  92. return {
  93. labelCol: {
  94. span: 6
  95. },
  96. wrapperCol: {
  97. span: 16
  98. },
  99. labelCol2: {
  100. span: 2
  101. },
  102. wrapperCol2: {
  103. span: 20
  104. },
  105. // 新增时子表默认添加几行空数据
  106. addDefaultRowNum: 1,
  107. validatorRules: {
  108. registerPerson: {rules: [
  109. {required: true, message: '请输入登记人!'},
  110. ]},
  111. registerDept: {rules: [
  112. ]},
  113. registerDate: {rules: [
  114. {required: true, message: '请输入登记日期!'},
  115. ]},
  116. budgetYear: {rules: [
  117. {required: true, message: '请输入预算年度!'},
  118. ]},
  119. remark: {rules: [
  120. ]},
  121. },
  122. yearShowOne: false,
  123. refKeys: ['budgetCostDetail', ],
  124. tableKeys:['budgetCostDetail', ],
  125. activeKey: 'budgetCostDetail',
  126. // 预算费用管理子表
  127. budgetCostDetailTable: {
  128. loading: false,
  129. dataSource: [],
  130. columns: [
  131. {
  132. title: '部门',
  133. key: 'department',
  134. type: FormTypes.slot,
  135. width:"200px",
  136. placeholder: '请输入${title}',
  137. defaultValue: '',
  138. slotName: 'department',
  139. },
  140. {
  141. title: '费用资金类别',
  142. key: 'costFundType',
  143. type: FormTypes.select,
  144. width:"200px",
  145. placeholder: '请输入${title}',
  146. defaultValue: '',
  147. options:[{
  148. value: "1",
  149. text: "1"
  150. },{
  151. value: "2",
  152. text: "2"
  153. },
  154. {
  155. value: "3",
  156. text: "3"
  157. }]
  158. },
  159. {
  160. title: '预算资金名称',
  161. key: 'budgetFundName',
  162. type: FormTypes.select,
  163. width:"200px",
  164. placeholder: '请输入${title}',
  165. defaultValue: '',
  166. options:[{
  167. value: "差旅费",
  168. text: "差旅费"
  169. },{
  170. value: "招待费",
  171. text: "招待费"
  172. },
  173. {
  174. value: "车辆使用费",
  175. text: "车辆使用费"
  176. },
  177. {
  178. value: "会务费",
  179. text: "会务费"
  180. },
  181. {
  182. value: "办公费",
  183. text: "办公费"
  184. }]
  185. },
  186. {
  187. title: '预算资金构成',
  188. key: 'budgetFundPose',
  189. type: FormTypes.input,
  190. width:"200px",
  191. placeholder: '请输入${title}',
  192. defaultValue: '',
  193. },
  194. {
  195. title: '预算金额',
  196. key: 'budgetMoney',
  197. type: FormTypes.input,
  198. width:"200px",
  199. placeholder: '请输入${title}',
  200. defaultValue: '',
  201. validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
  202. },
  203. {
  204. title: '合同金额',
  205. key: 'contractMoney',
  206. type: FormTypes.input,
  207. width:"200px",
  208. placeholder: '请输入${title}',
  209. defaultValue: '',
  210. validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
  211. },
  212. {
  213. title: '已支付金额',
  214. key: 'paidMoney',
  215. type: FormTypes.input,
  216. width:"200px",
  217. placeholder: '请输入${title}',
  218. defaultValue: '',
  219. validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
  220. },
  221. {
  222. title: '待支付金额',
  223. key: 'toBePaidMoney',
  224. type: FormTypes.input,
  225. width:"200px",
  226. placeholder: '请输入${title}',
  227. defaultValue: '',
  228. validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
  229. },
  230. {
  231. title: '附件上传',
  232. key: 'file',
  233. type: FormTypes.file,
  234. token:true,
  235. responseName:"message",
  236. width:"200px",
  237. placeholder: '请选择文件',
  238. defaultValue: '',
  239. },
  240. {
  241. title: '备注',
  242. key: 'detailRemark',
  243. type: FormTypes.input,
  244. width:"200px",
  245. placeholder: '请输入${title}',
  246. defaultValue: '',
  247. },
  248. ]
  249. },
  250. url: {
  251. add: "/oa/budgetCost/add",
  252. edit: "/oa/budgetCost/edit",
  253. budgetCostDetail: {
  254. list: '/oa/budgetCost/queryBudgetCostDetailByMainId'
  255. },
  256. }
  257. }
  258. },
  259. methods: {
  260. getAllTable() {
  261. let values = this.tableKeys.map(key => getRefPromise(this, key))
  262. return Promise.all(values)
  263. },
  264. /** 调用完edit()方法之后会自动调用此方法 */
  265. editAfter() {
  266. if(this.model.budgetYear){
  267. this.model.budgetYear = moment(this.model.budgetYear);
  268. }
  269. let fieldval = pick(this.model,'registerPerson','registerDept','registerDate','budgetYear','remark')
  270. this.$nextTick(() => {
  271. this.form.setFieldsValue(fieldval)
  272. })
  273. // 加载子表数据
  274. if (this.model.id) {
  275. let params = { id: this.model.id }
  276. this.requestSubTableData(this.url.budgetCostDetail.list, params, this.budgetCostDetailTable)
  277. console.log("ssss6666",this.budgetCostDetailTable)
  278. // console.log("this.budgetCostDetailTable.dataSource[i].budgetMoney",this.budgetCostDetailTable.dataSource[0].budgetMoney)
  279. // let budgetMoney;
  280. // for(var i = 0;i<this.budgetCostDetailTable.dataSource.length;i++){
  281. // budgetMoney+= this.budgetCostDetailTable.dataSource[i].budgetMoney;
  282. // }
  283. // console.log("sssss888",budgetMoney)
  284. // this.budgetCostDetailTable.dataSource.push({
  285. // department: '合计',
  286. // budgetMoney: budgetMoney,
  287. // })
  288. // console.log("ssss777",this.budgetCostDetailTable.dataSource)
  289. }
  290. },
  291. /** 整理成formData */
  292. classifyIntoFormData(allValues) {
  293. let main = Object.assign(this.model, allValues.formValue)
  294. return {
  295. ...main, // 展开
  296. budgetCostDetailList: allValues.tablesValue[0].values,
  297. }
  298. },
  299. validateError(msg){
  300. this.$message.error(msg)
  301. },
  302. popupCallback(row){
  303. this.form.setFieldsValue(pick(row,'registerPerson','registerDept','registerDate','budgetYear','remark'))
  304. },
  305. // 弹出日历和关闭日历的回调
  306. openChangeOne(status) {
  307. if (status) {
  308. this.yearShowOne = true;
  309. }
  310. },
  311. // 得到年份选择器的值
  312. panelChangeOne(value) {
  313. this.yearShowOne = false;
  314. this.$nextTick(() => {
  315. this.form.setFieldsValue({
  316. budgetYear: value,
  317. });
  318. });
  319. },
  320. //部门插槽更改数据
  321. departChange(props) {
  322. let values = [
  323. {
  324. rowKey: props.rowId,
  325. values: {
  326. 'department': props.text,
  327. },
  328. },
  329. ]
  330. this.$refs.budgetCostDetail.setValues(values)
  331. }
  332. }
  333. }
  334. </script>
  335. <style scoped>
  336. </style>