finance/Fiance-UI/src/views/system/mybusiness/index.vue

186 lines
7.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<!-- <div v-if="crud.props.searchToggle">-->
<!-- &lt;!&ndash; 搜索 &ndash;&gt;-->
<!-- <label class="el-form-item-label">申请类型</label>-->
<!-- <el-input v-model="query.purchaseType" clearable placeholder="申请类型" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
<!-- <rrOperation :crud="crud" />-->
<!-- </div>-->
<!--如果想在工具栏加入更多按钮,可以使用插槽方式, slot = 'left' or 'right'-->
<crudOperation :permission="permission" />
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="150px">
<el-form-item v-show="false" label="申请人" prop="user.id" hidden="hidden">
<el-input v-model="form.user.id" />
</el-form-item>
<el-form-item label="申请人" prop="user.nickName">
<el-input v-model="form.user.nickName" disabled />
</el-form-item>
<el-form-item label="手机" prop="user.phone">
<el-input v-model="form.user.phone" disabled />
</el-form-item>
<el-form-item label="部门" prop="user.dept.name">
<el-input v-model="form.user.dept.name" disabled />
</el-form-item>
<el-form-item label="申请金额">
<el-input v-model="form.fee" style="" />
</el-form-item>
<el-form-item label="申请事由">
<el-input v-model="form.reason" />
</el-form-item>
<el-form-item label="货物/服务名称">
<el-input v-model="form.productName" style="" />
</el-form-item>
<el-form-item label="申请类型">
<el-select v-model="form.purchaseType" filterable placeholder="请选择" style="width:185px">
<el-option
v-for="item in dict.purchase_type"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="品牌/规格/参数/型号">
<el-input v-model="form.productInfo" style="" />
</el-form-item>
<el-form-item label="数量">
<el-input v-model="form.productCount" style="" />
</el-form-item>
<el-form-item label="预算单价">
<el-input v-model="form.productPrice" style="" />
</el-form-item>
<el-form-item label="预算总价">
<el-input v-model="form.totalFee" style="" />
</el-form-item>
<el-form-item label="资金来源">
<el-select v-model="form.feeSource" filterable placeholder="请选择" style="width:185px">
<el-option
v-for="item in dict.fee_source"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="项目名称">
<el-input v-model="form.projectName" style="" />
</el-form-item>
<el-form-item label="项目编号">
<el-input v-model="form.projectNo" style="" />
</el-form-item>
<el-form-item label="预计采购时间">
<el-date-picker v-model="form.purchaseTime" type="datetime" style="width:185px" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" style="width: 535px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column prop="user.nickName" label="申请人" />
<el-table-column prop="reason" label="申请事由" />
<el-table-column prop="fee" label="申请金额" />
<el-table-column prop="productName" label="货物/服务名称" />
<el-table-column prop="purchaseType" label="申请类型">
<template slot-scope="scope">
{{ dict.label.purchase_type[scope.row.purchaseType] }}
</template>
</el-table-column>
<!-- <el-table-column prop="productInfo" label="品牌/规格/参数" />-->
<el-table-column prop="productCount" label="数量" />
<el-table-column prop="productPrice" label="预算单价" />
<el-table-column prop="totalFee" label="预算总价" />
<el-table-column prop="feeSource" label="资金来源">
<template slot-scope="scope">
{{ dict.label.fee_source[scope.row.feeSource] }}
</template>
</el-table-column>
<!-- <el-table-column prop="projectName" label="项目名称" />-->
<!-- <el-table-column prop="projectNo" label="项目编号" />-->
<el-table-column prop="purchaseTime" label="预计采购时间" />
<el-table-column prop="applyTime" label="申请时间" />
<el-table-column prop="remark" label="备注" />
<!-- 表格的操作部分 添加和删除 -->
<el-table-column v-if="checkPer(['admin','purchase:edit','purchase:del'])" label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</div>
</template>
<script>
import crudPurchase from '@/api/system/purchase'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import user from '@/views/system/user/index.vue'
import { mapGetters } from 'vuex'
import store from '@/store'
const defaultForm = { user: { dept: {}}, purchaseId: null, userId: null, reason: null, fee: null, productName: null, purchaseType: null, productInfo: null, productCount: null, productPrice: null, totalFee: null, feeSource: null, projectName: null, projectNo: null, purchaseTime: null, applyTime: null, remark: null, createBy: null, updateBy: null, createTime: null, updateTime: null }
export default {
name: 'MyBusiness',
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(), header(), form(defaultForm), crud()],
dicts: ['purchase_type', 'fee_source'],
// 创建一个增加读取更新删除对象
cruds() {
return CRUD({ title: '经费支出申请', url: 'api/purchase', idField: 'purchaseId', sort: 'purchaseId,desc', crudMethod: { ...crudPurchase }})
},
data() {
return {
permission: {
add: ['admin', 'purchase:add'],
edit: ['admin', 'purchase:edit'],
del: ['admin', 'purchase:del']
},
rules: {
},
queryTypeOptions: [
{ key: 'purchaseType', display_name: '申请类型' }
]
}
},
computed: {
...mapGetters([
'user'
])
},
methods: {
// 钩子在获取表格数据之前执行false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
},
[CRUD.HOOK.beforeToAdd]() {
this.form.user = this.user
}
}
}
</script>
<style scoped>
</style>