123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784 |
- <style scoped>
- ::v-deep .ant-steps-dot .ant-steps-item-content {
- width: auto;
- }
- ::v-deep .ant-steps-dot .ant-steps-item-active .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
- background: rgb(11, 190, 135);
- width: 15px;
- height: 15px;
- /* margin-top: 5px; */
- margin-left: 2px;
- }
- ::v-deep .endStatus .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
- background: #1890ff !important;
- width: 15px;
- height: 15px;
- /* margin-top: 5px; */
- /* margin-left: 2px; */
- }
- ::v-deep .ant-steps-dot .ant-steps-item-icon {
- width: 15px;
- height: 15px;
- margin-top: 5px;
- margin-left: -4px;
- }
- ::v-deep .ant-form-item {
- width: 100%;
- }
- ::v-deep .look-show .ant-form-item-label {
- font-size: 20px;
- }
- ::v-deep .look-show .ant-form-item-control-wrapper {
- font-size: 16px;
- }
- </style>
- <template>
- <div class="reimbursement">
- <div class="chartBox">
- <a-row :gutter="20">
- <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
- <a-card
- class="search-box step-jump"
- title="个人信息"
- v-if="!!$route.query.type && ($route.query.type == 'add' || $route.query.type == 'edit')"
- >
- <a-form
- ref="formRef"
- name="advanced_search"
- class="ant-advanced-search-form"
- :form="form"
- layout="inline"
- :label-col="labelCol"
- :wrapper-col="wrapperCol"
- >
- <a-row :gutter="24">
- <a-col :span="6">
- <a-form-item label="申请人">
- {{ userInfo().realname }}
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item label="申请日期">
- <a-month-picker
- v-decorator="[
- 'statDate',
- {
- rules: [{ required: true, message: '请选择申请日期' }],
- initialValue: moment().format('YYYY-MM'),
- },
- ]"
- format="YYYY-MM"
- />
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item label="部门">
- <j-tree-select
- v-decorator="[
- 'departId',
- {
- rules: [{ required: true, message: '请选择部门' }],
- },
- ]"
- placeholder="请选择部门"
- dict="sys_depart,depart_name,id"
- pidField="parent_id"
- style="width: 200px"
- >
- </j-tree-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :span="6">
- <a-form-item label="公司主体">
- <a-select
- v-decorator="[
- 'companyId',
- {
- rules: [{ required: true, message: '请选择公司' }],
- },
- ]"
- style="width: 200px"
- :filterOption="filterOption"
- showSearch
- allowClear
- labelInValue
- >
- <a-select-option
- v-for="(item, index) in dataDimensionList"
- :key="index + 1"
- :value="item.companyId"
- >
- {{ item.companyName }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item label="媒体">
- <a-select
- v-decorator="[
- 'media',
- {
- rules: [{ required: true, message: '请选择媒体' }],
- },
- ]"
- style="width: 200px"
- :filterOption="filterOption"
- showSearch
- allowClear
- placeholder="请选择媒体"
- >
- <a-select-option value="快手"> 快手 </a-select-option>
- <a-select-option value="聚星"> 聚星 </a-select-option>
- <a-select-option value="磁力金牛"> 磁力金牛 </a-select-option>
- <a-select-option value="头条"> 头条 </a-select-option>
- <a-select-option value="头条千川"> 头条千川 </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :span="6" v-if="expenseList.length > 0">
- <a-form-item v-bind="tailFormItemLayout">
- <a-button type="primary" @click="handleSubmit">提交</a-button>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump look-show" title="个人信息" v-else>
- <a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-row :gutter="24" v-if="lookData">
- <a-col :span="9">
- <a-form-item label="公司主体"> {{ lookData.companyName }}</a-form-item>
- </a-col>
- <a-col :span="9">
- <a-form-item label="媒体"> {{ lookData.media }}</a-form-item>
- </a-col>
- <a-col :span="9">
- <a-form-item label="申请时间"> {{ lookData.statDate }}</a-form-item>
- </a-col>
- <a-col :span="9">
- <a-form-item label="部门"> {{ lookData.departName }}</a-form-item>
- </a-col>
- <a-col :span="9">
- <a-form-item label="申请人"> {{ lookData.userName }}</a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- </a-col>
- <a-col :sm="24" style="margin-bottom: 20px">
- <a-card class="search-box step-jump" title="费用信息">
- <a-button type="primary" @click="policyOperationStatus = true" style="margin-bottom: 15px"
- >新增费用信息</a-button
- >
- <div v-if="lookData" style="display: flex">
- <h2 style="margin-right: 50px">报销金额:{{ lookData.amount }}</h2>
- <h2>发票总数: {{ lookData.invoices }}</h2>
- </div>
- <a-table
- :columns="expenseColumns"
- :data-source="expenseList"
- bordered
- tableLayout="auto"
- :pagination="false"
- :loading="expenseLoading"
- style="word-break: break-all"
- >
- <span slot="project" slot-scope="text, record">
- {{ projectName(text) }}
- </span>
- <span slot="fileUrls" slot-scope="text, record">
- <div v-if="!!text">
- <a @click="showFileOk(record)">查看</a>
- </div>
- <div v-else>-</div>
- </span>
- <span slot="auditDescription" slot-scope="text, record">
- <div v-if="!!text">
- <a @click="reasonReject(record)">查看</a>
- <!-- <div v-html="refuseReasonImage" style="width: 100%"></div> -->
- </div>
- <div v-else>-</div>
- </span>
- <div slot="action" slot-scope="text, record">
- <span v-if="!$route.query.person || $route.query.person == 1">
- <a
- @click="editProject(record)"
- :disabled="
- !!$route.query.type &&
- ($route.query.type == 'look' || $route.query.type == 'add')
- "
- >编辑</a
- >
- <a-divider type="vertical" />
- <a-popconfirm title="确定删除吗?" @confirm="() => deleteProject(record)">
- <a
- :disabled="
- !!$route.query.type &&
- ($route.query.type == 'look' || $route.query.type == 'add')
- "
- >删除</a
- >
- </a-popconfirm>
- </span>
- <span v-else>
- <a
- @click="editStatusOpen(record)"
- :disabled="
- !!$route.query.person &&
- ($route.query.person == '1' || $route.query.person == '3')
- "
- >驳回</a
- >
- </span>
- </div>
- </a-table>
- </a-card>
- </a-col>
- </a-row>
- <div
- style="width: 100%; display: flex; justify-content: flex-end"
- v-if="!!$route.query.person && $route.query.person != '1'"
- >
- <a-button type="primary" @click="bfOk" :disabled="!disabledJudge||$route.query.person == '3'">部分通过</a-button>
- <a-button type="primary" @click="refuse" style="margin: 0 15px" :disabled="$route.query.person == '3'">审核拒绝</a-button>
- <a-button type="primary" @click="allOk" :disabled="disabledJudge||$route.query.person == '3'">审核通过</a-button>
- </div>
- </div>
- <a-modal v-if="showFile" title="查看附件" :visible="showFile" :footer="null" @cancel="showFile = false">
- <div v-if="fileList">
- <img :src="item" v-for="(item, index) in JSON.parse(fileList)" alt="" style="width: 150px" />
- </div>
- </a-modal>
- <a-modal
- v-if="reasonRejectVisible"
- title="驳回原因"
- :visible="reasonRejectVisible"
- :footer="null"
- @cancel="reasonRejectVisible = false"
- >
- <div v-if="reasonRejectData">
- <div v-html="reasonRejectData" style="width: 100%"></div>
- </div>
- </a-modal>
- <!-- 新增、编辑政策 -->
- <a-modal
- v-if="policyOperationStatus"
- dialog-class="policy-operation-class"
- :title="addType === 'add' ? '新增费用' : '编辑费用'"
- :visible="policyOperationStatus"
- :confirmLoading="confirmLoading"
- @ok="handlePolicyOperationSure"
- @cancel="handlePolicyOperationCancel"
- >
- <div>
- <a-form-model
- class="policy-operation-form"
- ref="policyOperationForm"
- :model="policyOperationForm"
- :rules="policyOperationRules"
- :label-col="labelCol"
- :wrapper-col="wrapperCol"
- >
- <a-row class="policy-operation-form-left">
- <a-form-model-item label="报销项目" prop="project">
- <a-select v-model="policyOperationForm.project" placeholder="请选择报销项目" allow-clear>
- <a-select-option
- :value="item.dcode"
- v-for="(item, index) in projectList"
- :key="index"
- >{{ item.dname }}</a-select-option
- >
- </a-select>
- </a-form-model-item>
- <a-form-model-item
- label="费用"
- prop="amount"
- :rules="{
- required: true,
- message: '请输入报销费用',
- trigger: 'blur',
- }"
- >
- <a-input-number v-model="policyOperationForm.amount" :step="0.01" :precision="2" />
- </a-form-model-item>
- <a-form-model-item
- label="费用产生日期"
- prop="statDate"
- :rules="{
- required: true,
- message: '费用产生日期必填',
- trigger: 'change',
- }"
- >
- <a-month-picker v-model="policyOperationForm.statDate" format="YYYY-MM" />
- </a-form-model-item>
- <a-form-model-item label="附件">
- <uploadFile
- :value.sync="policyOperationForm.fileUrls"
- :multiple="true"
- @overUpload="overUpload"
- :fileCount="10"
- uploadType="image"
- />
- </a-form-model-item>
- </a-row>
- <a-row class="policy-operation-form-right">
- <a-form-model-item
- label="报销类别"
- prop="type"
- :rules="{
- required: true,
- message: '报销类别必选',
- trigger: 'change',
- }"
- >
- <a-select v-model="policyOperationForm.type" placeholder="请选择报销类别" allow-clear>
- <a-select-option value="报销">报销</a-select-option>
- </a-select>
- </a-form-model-item>
- <a-form-model-item
- label="发票张数"
- prop="invoices"
- :rules="{
- required: true,
- message: '发票张数必填',
- trigger: 'blur',
- }"
- >
- <a-input-number v-model="policyOperationForm.invoices" :step="1" :precision="0" />
- </a-form-model-item>
- <a-form-model-item label="备注" prop="remarks">
- <a-input v-model="policyOperationForm.remarks" placeholder="请输入备注" allow-clear />
- </a-form-model-item>
- </a-row>
- </a-form-model>
- </div>
- </a-modal>
- <!-- 驳回原因 -->
- <a-modal
- v-if="rejectVisible"
- title="驳回原因"
- :visible="rejectVisible"
- @cancel="rejectVisible = false"
- @ok="auditDescriptionOk"
- >
- <j-code-editor language="javascript" v-model="auditDescription" style="min-height: 100px" />
- </a-modal>
- </div>
- </template>
- <script>
- import moment from 'moment'
- import { getAction, postAction, downFile } from '@/api/manage'
- import { mapGetters } from 'vuex'
- import { urlAcount } from './policy-management-server.js'
- import pick from 'lodash.pick'
- import JTreeSelect from '@/components/jeecg/JTreeSelect'
- import uploadFile from '@/components/uploadFile.vue'
- import { defineComponent, ref } from 'vue'
- import JCodeEditor from '@/components/jeecg/JEditor'
- export default {
- name: 'policy-management-reimbursement-add',
- data() {
- return {
- form: this.$form.createForm(this),
- showFile: false,
- fileList: null,
- labelCol: {
- span: 8,
- },
- wrapperCol: {
- span: 16,
- },
- tailFormItemLayout: {
- wrapperCol: {
- sm: {
- span: 24,
- offset: 8,
- },
- },
- },
- dataDimensionList: [],
- expenseColumns: [
- {
- title: '报销项目',
- align: 'center',
- dataIndex: 'project',
- scopedSlots: { customRender: 'project' },
- },
- {
- title: '报销类别',
- align: 'center',
- dataIndex: 'type',
- },
- {
- title: '费用金额',
- align: 'center',
- dataIndex: 'amount',
- scopedSlots: { customRender: 'amount' },
- },
- {
- title: '产生日期',
- align: 'center',
- dataIndex: 'statDate',
- scopedSlots: { customRender: 'statDate' },
- },
- {
- title: '发票张数',
- align: 'center',
- dataIndex: 'invoices',
- scopedSlots: { customRender: 'invoices' },
- },
- {
- title: '备注',
- align: 'center',
- ellipsis: true,
- dataIndex: 'remarks',
- scopedSlots: { customRender: 'remarks' },
- width: 120,
- },
- {
- title: '附件',
- align: 'center',
- dataIndex: 'fileUrls',
- scopedSlots: { customRender: 'fileUrls' },
- },
- {
- title: '驳回原因',
- align: 'center',
- dataIndex: 'auditDescription',
- scopedSlots: { customRender: 'auditDescription' },
- },
- {
- title: '操作',
- align: 'center',
- dataIndex: 'action',
- scopedSlots: { customRender: 'action' },
- },
- ],
- expenseList: [],
- expenseLoading: false,
- addType: 'add',
- projectList: [],
- policyOperationStatus: false,
- confirmLoading: false,
- policyOperationRules: {
- project: [{ required: true, message: '请选择报销项目', trigger: 'change' }],
- },
- policyOperationForm: {},
- expenseIds: [],
- lookData: null,
- rejectVisible: false,
- auditDescription: null,
- rejectId: null,
- reasonRejectVisible: false,
- reasonRejectData: null,
- }
- },
- components: {
- JTreeSelect,
- uploadFile,
- JCodeEditor,
- },
- created() {
- this.getCompanyList()
- this.getProjectList()
- let editRecordId = this.$route.query.id
- let editRecordType = this.$route.query.type
- if (editRecordId) {
- this.getDetail(editRecordId)
- } else {
- }
- },
- computed: {
- disabledJudge() {
- var index = this.expenseList.findIndex((item) => {
- return item.status == '0'
- })
- return index > -1 ? true : false
- },
- },
- mounted() {},
- methods: {
- ...mapGetters(['userInfo']),
- moment,
- getDetail(id) {
- this.getAction('/reimburse/apply/queryById', { id: id }).then((res) => {
- if (res.success) {
- this.expenseIds = JSON.parse(res.result.ids)
- if (this.$route.query.type == 'look') {
- this.lookData = res.result
- } else {
- var data = res.result
- data.statDate = moment(data.statDate)
- data.companyId = { key: data.companyId, label: data.companyName }
- this.form.setFieldsValue(pick(res.result, 'departId', 'media', 'statDate', 'companyId'))
- }
- this.getExpenseList(this.expenseIds)
- }
- })
- },
- showFileOk(item) {
- this.showFile = true
- this.fileList = item.fileUrls
- },
- reasonReject(item) {
- this.reasonRejectVisible = true
- this.reasonRejectData = item.auditDescription
- },
- projectName(theme) {
- if (this.projectList.length > 0) {
- var data = this.projectList.find((item) => {
- return item.dcode == theme
- })
- return data.dname
- }
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- disabledDate(current) {
- return current > moment().subtract(1, 'day')
- },
- getFormData(form, className) {
- return this[form].getFieldValue(className)
- },
- //获取公司列表
- getCompanyList() {
- return new Promise((resolve, reject) => {
- this.getAction('/reimburse/apply/getCompanyList').then(
- (res) => {
- if (res.success) {
- this.dataDimensionList = res.result
- resolve(res.result)
- } else {
- reject(res.message)
- }
- }
- )
- })
- },
- //获取报销项目
- getProjectList() {
- return new Promise((resolve, reject) => {
- this.getAction('/reimburse/dict/list').then((res) => {
- if (res.success) {
- this.projectList = res.result
- resolve(res.result)
- } else {
- reject(res.message)
- }
- })
- })
- },
- //获取费用信息
- getExpenseList(ids) {
- return new Promise((resolve, reject) => {
- this.expenseLoading = true
- this.postDataAction('/reimburse/project/queryByIds', ids).then((res) => {
- if (res.success) {
- this.expenseLoading = false
- this.expenseList = res.result
- resolve(res.result)
- } else {
- this.expenseLoading = false
- reject(res.message)
- }
- })
- })
- },
- overUpload(urlAll) {
- console.log(urlAll)
- },
- editProject(item) {
- this.getAction('/reimburse/project/queryById', { id: item.id }).then((res) => {
- if (res.success) {
- this.addType = 'edit'
- this.policyOperationStatus = true
- var data = res.result
- this.policyOperationForm = {
- amount: +data.amount,
- fileUrls: JSON.parse(data.fileUrls),
- id: data.id,
- invoices: data.invoices,
- project: data.project,
- remarks: data.remarks,
- statDate: moment(data.statDate),
- type: data.type,
- }
- } else {
- this.$message.error(res.message)
- }
- })
- },
- deleteProject(item) {
- this.getAction('/reimburse/project/delete', { id: item.id }).then((res) => {
- if (res.success) {
- let index = this.expenseIds.indexOf(item.id)
- this.expenseIds.splice(index, 1)
- this.getExpenseList(this.expenseIds)
- } else {
- this.$message.error(res.message)
- }
- })
- },
- // 新增费用确定按钮
- handlePolicyOperationSure() {
- console.log(this.policyOperationForm)
- var paramsData = { ...this.policyOperationForm }
- paramsData.statDate = moment(paramsData.statDate).format('YYYY-MM')
- paramsData.fileUrls = JSON.stringify(paramsData.fileUrls)
- this.$refs.policyOperationForm.validate((valid) => {
- if (valid) {
- this.confirmLoading = true
- if (this.addType === 'add') {
- this.handleAddSureBtn(paramsData, '/reimburse/project/add')
- } else {
- this.handleAddSureBtn(paramsData, '/reimburse/project/edit')
- }
- } else {
- return false
- }
- })
- },
- handleAddSureBtn(data, url) {
- postAction(url, data)
- .then((result) => {
- if (result.code === 200) {
- this.$message.success(result.message)
- this.handlePolicyOperationCancel()
- this.expenseIds.push(result.result)
- this.getExpenseList(this.expenseIds)
- } else {
- this.$message.error(result.message)
- }
- })
- .catch((error) => {
- console.log(error, 'eeee')
- })
- .finally(() => {
- this.confirmLoading = false
- })
- },
- // 新增费用取消按钮
- handlePolicyOperationCancel() {
- this.policyOperationForm = {}
- this.policyOperationStatus = false
- },
- handleSubmit() {
- this.form.validateFields((err, values) => {
- if (!err) {
- console.log(values)
- let params = {}
- params.userId = this.userInfo().id
- params.departId = values.departId
- params.media = values.media
- params.statDate = moment(values.statDate).format('YYYY-MM')
- params.companyId = values.companyId.key
- params.companyName = values.companyId.label.replace(/[\r\n]/g, '').trim()
- params.ids = JSON.stringify(this.expenseIds)
- if (this.$route.query.type == 'edit') {
- params.loginId = this.userInfo().id
- params.id = this.$route.query.id
- this.postDataAction('/reimburse/apply/edit', params).then((res) => {
- if (res.success) {
- }
- })
- } else {
- this.postDataAction('/reimburse/apply/add', params).then((res) => {
- if (res.success) {
- }
- })
- }
- }
- })
- },
- editStatusOpen(item) {
- this.rejectVisible = true
- this.rejectId = item.id
- },
- auditDescriptionOk() {
- if (!!this.auditDescription) {
- var params = {}
- params.id = this.rejectId
- params.auditDescription = this.auditDescription
- params.status = 0
- this.postDataAction('/reimburse/project/edit', params).then((res) => {
- if (res.success) {
- this.getExpenseList(this.expenseIds)
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- this.$message.error('请填写驳回理由')
- }
- },
- refuse() {
- var params ={}
- params.loginId = this.userInfo().id
- params.userId = this.lookData.userId
- params.id = this.$route.query.id
- params.status = 3
- this.postDataAction('/reimburse/apply/edit', params).then((res) => {
- if (res.success) {
- this.$message.error(res.message)
- } else {
- this.$message.error(res.message)
- }
- })
- },
- bfOk() {
- var params ={}
- params.loginId = this.userInfo().id
- params.userId = this.lookData.userId
- params.id = this.$route.query.id
- params.status = 5
- this.postDataAction('/reimburse/apply/edit', params).then((res) => {
- if (res.success) {
- this.$message.error(res.message)
- } else {
- this.$message.error(res.message)
- }
- })
- },
- allOk() {
- var params ={}
- params.loginId = this.userInfo().id
- params.userId = this.lookData.userId
- params.id = this.$route.query.id
- params.status = 2
- this.postDataAction('/reimburse/apply/edit', params).then((res) => {
- if (res.success) {
- this.$message.error(res.message)
- } else {
- this.$message.error(res.message)
- }
- })
- },
- },
- }
- </script>
- <style lang="less" scoped>
- @import 'policy-management';
- </style>
|