|
@@ -0,0 +1,297 @@
|
|
|
+<template>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules">
|
|
|
+ <el-row>
|
|
|
+ <el-col style="padding-bottom: 10px">
|
|
|
+ <span class="card_title">基本信息</span>
|
|
|
+ <el-card shadow="always" style="padding: 15px 5px 5px 15px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3" class="col-txt"><span style="color: red">*</span><span>银行名称</span></el-col>
|
|
|
+ <el-col :span="20" class="col-input">
|
|
|
+ <el-form-item prop="bankName">
|
|
|
+ <el-input v-model="form.bankName" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3" class="col-txt"><span style="color: red">*</span><span>支行名称</span></el-col>
|
|
|
+ <el-col :span="20" class="col-input">
|
|
|
+ <el-form-item prop="bankBranchName">
|
|
|
+ <el-input v-model="form.bankBranchName" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3" class="col-txt"><span style="color: red">*</span><span>账号</span></el-col>
|
|
|
+ <el-col :span="20" class="col-input">
|
|
|
+ <el-form-item prop="bankNumber">
|
|
|
+ <el-input v-model="form.bankNumber" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3" class="col-txt"><span style="color: red">*</span><span>适用楼盘</span></el-col>
|
|
|
+ <el-col :span="20" class="col-input">
|
|
|
+ <el-form-item prop="suitFloor">
|
|
|
+ <el-tree
|
|
|
+ ref="tree"
|
|
|
+ :data="treeData"
|
|
|
+ show-checkbox
|
|
|
+ default-expand-all
|
|
|
+ node-key="id"
|
|
|
+ :default-checked-keys="checkedKeys"
|
|
|
+ @check="treeChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3" class="col-txt"><span style="color: red">*</span><span>适用费用类型</span></el-col>
|
|
|
+ <el-col :span="20" class="col-input">
|
|
|
+ <!-- <el-form-item prop="suitCostType">-->
|
|
|
+ <!-- <el-checkbox-group v-model="checkList" @change="checkBoxChange">-->
|
|
|
+ <!-- <el-checkbox label="租赁费(保证金)" />-->
|
|
|
+ <!-- <el-checkbox label="物业费" />-->
|
|
|
+ <!-- <el-checkbox label="水费" />-->
|
|
|
+ <!-- <el-checkbox label="电费" />-->
|
|
|
+ <!-- <el-checkbox label="停车费" />-->
|
|
|
+ <!-- <el-checkbox label="场地费" />-->
|
|
|
+ <!-- <el-checkbox label="其他" />-->
|
|
|
+ <!-- </el-checkbox-group>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ v-loading="itemLoading"
|
|
|
+ :data="itemData"
|
|
|
+ stripe
|
|
|
+ row-class-name="g_table_row"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" label="选择" width="60" />
|
|
|
+ <el-table-column label="费用类型" prop="suitCostType" width="80" />
|
|
|
+ <el-table-column label="税率">
|
|
|
+ <template scope="scope">
|
|
|
+ <el-select v-model="scope.row.taxRate" :disabled="!scope.row.isSelected" size="mini" placeholder="请选择">
|
|
|
+ <el-option v-for="item in dc_data.invoice_tax" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" style="text-align: right">
|
|
|
+ <el-button @click="handleClose">关 闭</el-button>
|
|
|
+ <el-button type="primary" @click="confirmSubmit()">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Base from '@/views/base/base.vue'
|
|
|
+import BaseData from '@/views/base/baseData.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'InvoiceBankEdit',
|
|
|
+ mixins: [Base, BaseData],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dc_key: ['invoice_tax'],
|
|
|
+ loading: false,
|
|
|
+ id: '',
|
|
|
+ isDetail: false,
|
|
|
+ form: this.initForm(),
|
|
|
+ treeData: [],
|
|
|
+ checkedKeys: [],
|
|
|
+ checkList: [],
|
|
|
+ rules: {
|
|
|
+ bankName: [{ required: true, message: '请输入银行名称', trigger: 'blur' }],
|
|
|
+ bankBranchName: [{ required: true, message: '请输入支行名称', trigger: 'blur' }],
|
|
|
+ bankNumber: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
|
|
+ suitFloor: [{ required: true, message: '请选择适用楼盘', trigger: 'change' }],
|
|
|
+ suitCostType: [{ required: true, message: '请选择适用费用类型', trigger: 'change' }]
|
|
|
+ },
|
|
|
+ itemData: [],
|
|
|
+ itemLoading: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData(id, isDetail) {
|
|
|
+ this.initDict(this.dc_key)
|
|
|
+ this.id = id
|
|
|
+ this.isDetail = isDetail
|
|
|
+ if (id) {
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ this.getTreeData()
|
|
|
+ this.getBillType()
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.$emit('editClose')
|
|
|
+ },
|
|
|
+ initForm() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ bankName: '',
|
|
|
+ bankBranchName: '',
|
|
|
+ bankNumber: '',
|
|
|
+ suitFloor: '',
|
|
|
+ suitCostType: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.baseRequest('getById', { id: this.id }).then((res) => {
|
|
|
+ if (res.data) {
|
|
|
+ this.form = Object.assign({}, this.form, res.data)
|
|
|
+ if (this.form.suitFloor) {
|
|
|
+ this.checkedKeys = this.form.suitFloor.split(',')
|
|
|
+ }
|
|
|
+ if (this.form.suitCostType) {
|
|
|
+ this.checkList = this.form.suitCostType.split(',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTreeData() {
|
|
|
+ this.baseRequest('getTreeData', {}).then((res) => {
|
|
|
+ this.treeData = res.data || []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ treeChange(val) {
|
|
|
+ const data = this.$refs.tree.getCheckedKeys(true)
|
|
|
+ if (data.length) {
|
|
|
+ this.form.suitFloor = data.join(',')
|
|
|
+ } else {
|
|
|
+ this.form.suitFloor = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkBoxChange(val) {
|
|
|
+ if (val && val.length) {
|
|
|
+ this.form.suitCostType = val.join(',')
|
|
|
+ } else {
|
|
|
+ this.form.suitCostType = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmSubmit() {
|
|
|
+ const _this = this
|
|
|
+ let flag = false
|
|
|
+ _this.multipleSelection.forEach(item => {
|
|
|
+ if (!item.taxRate) {
|
|
|
+ _this.$message.warning('请选择税率')
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (flag) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let soaUrl = 'edit'
|
|
|
+ if (!this.id) {
|
|
|
+ soaUrl = 'add'
|
|
|
+ }
|
|
|
+ const extraData = {
|
|
|
+ infos: JSON.stringify(_this.multipleSelection)
|
|
|
+ }
|
|
|
+ const postData = Object.assign({}, _this.form, extraData)
|
|
|
+ this.loading = true
|
|
|
+ this.baseRequest(soaUrl, postData).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ if (res.data.key === 200) {
|
|
|
+ this.$message.success('提交成功')
|
|
|
+ this.$emit('editClose', true)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getBillType() {
|
|
|
+ this.baseRequest('getBillType', { id: this.id }).then((res) => {
|
|
|
+ const _this = this
|
|
|
+ const checkedrow = []
|
|
|
+ if (res.data) {
|
|
|
+ res.data.forEach(function(item) {
|
|
|
+ if (item.id) {
|
|
|
+ item.isSelected = true
|
|
|
+ checkedrow.push(item)
|
|
|
+ } else {
|
|
|
+ item.isSelected = false
|
|
|
+ }
|
|
|
+ _this.itemData.push(item)
|
|
|
+ })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ console.log('checkedrow_:', checkedrow)
|
|
|
+ checkedrow.forEach(row => {
|
|
|
+ _this.$refs.multipleTable.toggleRowSelection(row, true) // 回显
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.itemLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ const _this = this
|
|
|
+ this.multipleSelection = val
|
|
|
+ this.itemData.forEach(function(item, index) {
|
|
|
+ if (_this.getRowSelect(item)) {
|
|
|
+ _this.itemData[index].isSelected = true
|
|
|
+ } else {
|
|
|
+ _this.itemData[index].isSelected = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRowSelect(item) {
|
|
|
+ let falg = false
|
|
|
+ this.multipleSelection.forEach(function(elm) {
|
|
|
+ if (item.billType == elm.billType) {
|
|
|
+ falg = true
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return falg
|
|
|
+ },
|
|
|
+ baseRequest(opUrl, postData) {
|
|
|
+ return this.$channel.globeRequest('InvoiceBankController', opUrl, postData, 'project')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .ch-input .el-input__inner {
|
|
|
+ border-color: #32323A;
|
|
|
+ }
|
|
|
+ .ch-input-size {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .ch-button {
|
|
|
+ border-color: #32323A;
|
|
|
+ background-color: #32323A;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .ch-button-warning {
|
|
|
+ margin-left: 10px;
|
|
|
+ border-color: #E6A23C;
|
|
|
+ background-color: #E6A23C;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .ch-button-export {
|
|
|
+ margin-left: 10px;
|
|
|
+ border-color: #98CC1F;
|
|
|
+ background-color: #98CC1F;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /deep/.el-dialog__header {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ /deep/.el-dialog__body {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+</style>
|