123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 |
- <template>
- <a-modal
- :title="title"
- :width="1200"
- :visible="visible"
- :maskClosable="false"
- :confirmLoading="confirmLoading"
- @ok="handleOk"
- @cancel="handleCancel">
- <a-spin :spinning="confirmLoading">
- <!-- 主表单区域 -->
- <a-form :form="form">
- <a-row>
- <a-col :span="8">
- <a-form-item label="登记人" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <j-popup
- v-decorator="['registerPerson', validatorRules.registerPerson]"
- :trigger-change="true"
- org-fields="realname,depart_name"
- dest-fields="registerPerson,registerDept"
- code="user_dept"
- @callback="popupCallback"/>
- </a-form-item>
- </a-col>
- <a-col :span="8">
- <a-form-item label="登记部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-input :disabled="true" v-decorator="[ 'registerDept', validatorRules.registerDept]" placeholder="请输入登记部门"></a-input>
- </a-form-item>
- </a-col>
- <a-col :span="8">
- <a-form-item label="登记日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <j-date placeholder="请选择登记日期" v-decorator="[ 'registerDate', validatorRules.registerDate]" :trigger-change="true" style="width: 100%"/>
- </a-form-item>
- </a-col>
- <a-col :span="8">
- <a-form-item label="预算年度" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-date-picker
- mode="year"
- v-decorator="['budgetYear', validatorRules.budgetYear]"
- placeholder="请输入年份"
- format="YYYY"
- style="width: 200px"
- :open="yearShowOne"
- @openChange="openChangeOne"
- @panelChange="panelChangeOne"/>
- </a-form-item>
- </a-col>
- <a-col :span="24">
- <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
- <a-textarea v-decorator="['remark', validatorRules.remark]" rows="4" placeholder="请输入备注"/>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- <!-- 子表单区域 -->
- <a-tabs v-model="activeKey" @change="handleChangeTabs">
- <a-tab-pane tab="预算费用管理子表" :key="refKeys[0]" :forceRender="true">
- <j-editable-table
- :ref="refKeys[0]"
- :loading="budgetCostDetailTable.loading"
- :columns="budgetCostDetailTable.columns"
- :dataSource="budgetCostDetailTable.dataSource"
- :maxHeight="300"
- :rowNumber="true"
- :rowSelection="true"
- :actionButton="true">
- <template v-slot:department="props">
- <j-select-depart @change="departChange(props)" v-model="props.text" :trigger-change="true"></j-select-depart>
- </template>
- </j-editable-table>
- </a-tab-pane>
- </a-tabs>
- </a-spin>
- </a-modal>
- </template>
- <script>
- import moment from 'moment'
- import pick from 'lodash.pick'
- import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
- import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
- import { validateDuplicateValue } from '@/utils/util'
- import JDate from '@/components/jeecg/JDate'
- import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
- export default {
- name: 'BudgetCostModal',
- mixins: [JEditableTableMixin],
- components: {
- JDate,
- JSelectDepart
- },
- data() {
- return {
- labelCol: {
- span: 6
- },
- wrapperCol: {
- span: 16
- },
- labelCol2: {
- span: 2
- },
- wrapperCol2: {
- span: 20
- },
- // 新增时子表默认添加几行空数据
- addDefaultRowNum: 1,
- validatorRules: {
- registerPerson: {rules: [
- {required: true, message: '请输入登记人!'},
- ]},
- registerDept: {rules: [
- ]},
- registerDate: {rules: [
- {required: true, message: '请输入登记日期!'},
- ]},
- budgetYear: {rules: [
- {required: true, message: '请输入预算年度!'},
- ]},
- remark: {rules: [
- ]},
- },
- yearShowOne: false,
- refKeys: ['budgetCostDetail', ],
- tableKeys:['budgetCostDetail', ],
- activeKey: 'budgetCostDetail',
- // 预算费用管理子表
- budgetCostDetailTable: {
- loading: false,
- dataSource: [],
- columns: [
- {
- title: '部门',
- key: 'department',
- type: FormTypes.slot,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- slotName: 'department',
- },
- {
- title: '费用资金类别',
- key: 'costFundType',
- type: FormTypes.select,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- options:[{
- value: "1",
- text: "1"
- },{
- value: "2",
- text: "2"
- },
- {
- value: "3",
- text: "3"
- }]
- },
- {
- title: '预算资金名称',
- key: 'budgetFundName',
- type: FormTypes.select,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- options:[{
- value: "差旅费",
- text: "差旅费"
- },{
- value: "招待费",
- text: "招待费"
- },
- {
- value: "车辆使用费",
- text: "车辆使用费"
- },
- {
- value: "会务费",
- text: "会务费"
- },
- {
- value: "办公费",
- text: "办公费"
- }]
- },
- {
- title: '预算资金构成',
- key: 'budgetFundPose',
- type: FormTypes.input,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- },
- {
- title: '预算金额',
- key: 'budgetMoney',
- type: FormTypes.input,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
- },
- {
- title: '合同金额',
- key: 'contractMoney',
- type: FormTypes.input,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
- },
- {
- title: '已支付金额',
- key: 'paidMoney',
- type: FormTypes.input,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
- },
- {
- title: '待支付金额',
- key: 'toBePaidMoney',
- type: FormTypes.input,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- validateRules: [{ pattern: "money", message: "${title}格式不正确" }],
- },
- {
- title: '附件上传',
- key: 'file',
- type: FormTypes.file,
- token:true,
- responseName:"message",
- width:"200px",
- placeholder: '请选择文件',
- defaultValue: '',
- },
- {
- title: '备注',
- key: 'detailRemark',
- type: FormTypes.input,
- width:"200px",
- placeholder: '请输入${title}',
- defaultValue: '',
- },
- ]
- },
- url: {
- add: "/oa/budgetCost/add",
- edit: "/oa/budgetCost/edit",
- budgetCostDetail: {
- list: '/oa/budgetCost/queryBudgetCostDetailByMainId'
- },
- }
- }
- },
- methods: {
- getAllTable() {
- let values = this.tableKeys.map(key => getRefPromise(this, key))
- return Promise.all(values)
- },
- /** 调用完edit()方法之后会自动调用此方法 */
- editAfter() {
- if(this.model.budgetYear){
- this.model.budgetYear = moment(this.model.budgetYear);
- }
- let fieldval = pick(this.model,'registerPerson','registerDept','registerDate','budgetYear','remark')
- this.$nextTick(() => {
- this.form.setFieldsValue(fieldval)
- })
- // 加载子表数据
- if (this.model.id) {
- let params = { id: this.model.id }
- this.requestSubTableData(this.url.budgetCostDetail.list, params, this.budgetCostDetailTable)
- console.log("ssss6666",this.budgetCostDetailTable)
- // console.log("this.budgetCostDetailTable.dataSource[i].budgetMoney",this.budgetCostDetailTable.dataSource[0].budgetMoney)
- // let budgetMoney;
- // for(var i = 0;i<this.budgetCostDetailTable.dataSource.length;i++){
- // budgetMoney+= this.budgetCostDetailTable.dataSource[i].budgetMoney;
- // }
- // console.log("sssss888",budgetMoney)
- // this.budgetCostDetailTable.dataSource.push({
- // department: '合计',
- // budgetMoney: budgetMoney,
- // })
- // console.log("ssss777",this.budgetCostDetailTable.dataSource)
- }
- },
- /** 整理成formData */
- classifyIntoFormData(allValues) {
- let main = Object.assign(this.model, allValues.formValue)
- return {
- ...main, // 展开
- budgetCostDetailList: allValues.tablesValue[0].values,
- }
- },
- validateError(msg){
- this.$message.error(msg)
- },
- popupCallback(row){
- this.form.setFieldsValue(pick(row,'registerPerson','registerDept','registerDate','budgetYear','remark'))
- },
- // 弹出日历和关闭日历的回调
- openChangeOne(status) {
- if (status) {
- this.yearShowOne = true;
- }
- },
- // 得到年份选择器的值
- panelChangeOne(value) {
- this.yearShowOne = false;
- this.$nextTick(() => {
- this.form.setFieldsValue({
- budgetYear: value,
- });
- });
- },
- //部门插槽更改数据
- departChange(props) {
- let values = [
- {
- rowKey: props.rowId,
- values: {
- 'department': props.text,
- },
- },
- ]
- this.$refs.budgetCostDetail.setValues(values)
- }
- }
- }
- </script>
- <style scoped>
- </style>
|