Skip to content

GitLab

Commit 6e137f66 authored by 柳 佳乐's avatar 柳 佳乐
Browse files

first

parents
Pipeline #20 failed with stages
in 0 seconds
Hide whitespace changes
Inline Side-by-side
src/views/reimbursement/reimbursementAdd.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<div class="box">
<el-form
ref="form"
:model="from"
:inline="true"
label-width="150px"
:rules="rules"
>
<el-form-item label="实际报销人" prop="userName">
<el-input v-model="from.userName" disabled></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="userPhone">
<el-input v-model="from.userPhone" disabled></el-input>
</el-form-item>
<el-form-item label="项目名称" prop="projectId">
<el-select v-model="from.projectId" placeholder="请选择">
<el-option
v-for="item in projectList"
:key="item.projectId"
:label="item.projectName"
:value="item.projectId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="报销类别" prop="typeId">
<el-select v-model="from.typeId" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发票号码" prop="fromList">
<el-select
v-model="from.fromList"
multiple
filterable
allow-create
default-first-option
placeholder="请选择"
>
<el-option
v-for="item in getinvoivelist"
:key="item.invoiceId"
:label="item.number"
:value="item.invoiceId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="摘要" prop="summary">
<el-input v-model="from.summary"></el-input>
</el-form-item>
<el-form-item label="报销总金额-大写" prop="applyTotalAmountLarge">
<el-input v-model="from.applyTotalAmountLarge"></el-input>
</el-form-item>
<el-form-item label="报销总金额-小写" prop="applyTotalAmountSmall">
<el-input v-model="from.applyTotalAmountSmall"></el-input>
</el-form-item>
<el-form-item label="支付方式" prop="paymentMethod">
<el-input v-model="from.paymentMethod"></el-input>
</el-form-item>
<br />
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="submitForm()"
>提交</el-button
>
<el-button
type="info"
icon="el-icon-refresh-left"
@click="resetForm()"
>重置信息</el-button
>
<el-button type="primary" @click="drawerAdd()">申请报销单</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-drawer
title="发票单列表"
:visible.sync="drawer"
size="100%"
>
<!-- 表格区域 -->
<div class="drawer" v-show="isgetid == 0" style="margin-left: 5%">
<el-button
type="primary"
@click="Reimbursement()"
style="margin: 20px 0px"
>添加报销单</el-button
>
<el-table :data="invoicegetList.list" border style="width: 90%">
<el-table-column
prop="invoiceId"
label="序号"
width="80"
></el-table-column>
<el-table-column
prop="number"
label="发票号码"
width="width"
></el-table-column>
<el-table-column prop="code" label="发票代码"></el-table-column>
<el-table-column prop="time" label="发票时间"></el-table-column>
<el-table-column prop="category" label="发票类型">
<template slot-scope="scope">
<el-tag
:type="scope.row.category == '0' ? 'info' : 'primary'"
>{{ scope.row.category == "0" ? "普票" : "专票" }}</el-tag
>
</template>
</el-table-column>
<el-table-column prop="type" label="发票类别">
<template slot-scope="scope">
<el-tag
:type="
scope.row.type == '0'
? 'success'
: scope.row.type == '1'
? 'danger'
: 'warning'
"
>{{
scope.row.type == "0"
? "收入"
: scope.row.type == "1"
? "支出"
: "报销"
}}</el-tag
>
</template>
</el-table-column>
<el-table-column prop="mone" label="发票金额"></el-table-column>
<el-table-column prop="status" label="发票状态">
<template slot-scope="scope">
<el-tag :type="scope.row.status == '0' ? 'info' : 'warning'">{{
scope.row.status == 0 ? "未报销" : "已报销"
}}</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<!-- total:总的条目数 -->
<el-pagination
style="margin: 0px auto"
@current-change="getincomeSelectlist"
layout="total, prev, pager, next"
:total="invoicegetList.total"
></el-pagination>
</div>
<!-- 添加区域 -->
<div class="getadd" v-show="isgetid == 1" style="margin-left: 5%">
<el-row>
<el-col :xl="8" :lg="10" :md="8" :sm="12" :xs="24">
<el-form
style="width: 100%; margin: 30px 0px"
:model="addTO"
:rules="rules"
ref="addTO"
label-width="80px"
class="demo-ruleForm"
>
<el-form-item label="发票号码" prop="number">
<el-input
v-model="addTO.number"
oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
></el-input>
</el-form-item>
<el-form-item label="发票代码" prop="code">
<el-input v-model="addTO.code"></el-input>
</el-form-item>
<el-form-item label="发票时间" required>
<el-date-picker
v-model="addTO.time"
type="datetime"
placeholder="选择日期时间"
@change="timestampToTime1()"
></el-date-picker>
</el-form-item>
<el-form-item label="发票类型" prop="category">
<el-select v-model="addTO.category" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.category"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="发票金额" prop="mone">
<el-input v-model="addTO.mone"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="success"
icon="el-icon-folder-checked"
@click="getlistForm()"
>立即创建</el-button
>
<el-button
type="info"
icon="el-icon-refresh"
@click="delectdd"
>重置信息</el-button
>
<el-button
type="primary"
icon="el-icon-refresh-left"
@click="cancel()"
>取消</el-button
>
</el-form-item>
</el-form>
</el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="10" :xl="11">
<el-upload
class="upload-demo"
ref="upload"
:file-list="fileList"
action="http://192.168.10.109:7080/file/uploadFile"
:auto-upload="false"
:data="proutlist"
style="margin-left: 90px"
>
<el-button
slot="trigger"
size="small"
type="primary"
style="margin-left: 20px; margin-top: 40px"
>选取文件</el-button
>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
</el-col>
</el-row>
</div>
</el-drawer>
</div>
<div class="spend">
<el-form
:model="reimbursementItemData"
:inline="true"
label-width="150px"
ref="details"
>
<el-row
v-for="(item, index) in reimbursementItemData.list"
:key="index"
>
<el-col>
<el-form-item
:label="item.itemNamwe"
:prop="'list.' + index + '.money'"
:rules="{ validator: moneyrow, trigger: 'blur' }"
>
<el-input v-model="item.money"></el-input>
</el-form-item>
<el-form-item label="说明">
<el-input v-model="item.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
import { selectById } from "@/api/company";
import { selectAllCompanyId } from "@/api/reimbursementItem";
import { money } from "@/utils/myValidate";
import { selectAll as projectSelectAll } from "@/api/project";
import { selectAll as typeSelectAll } from "@/api/type";
import { insert } from "@/api/reimbursement";
import { Details } from "@/api/reimbursement";
import {
insertList,
queryBypageIncomeAdd,
selectAllBystatus,
} from "@/api/project";
import { updatesubmit } from "@/api/project";
export default {
data() {
return {
company: {},
timeNow: null,
projectList: [],
typeList: [], //类型列表
invoiceList: [], //发票号码
from: {
companyId: null, //公司id
userName: null, //申报人
userPhone: null, //联系电话
userId: null, //申报人Id
summary: null, //摘要
enclosureNumber: 0, //附件数量
fillingTime: null, //填报日期
applyTotalAmountLarge: null, //申请报销总金额（大写）
applyTotalAmountSmall: null, //申请报销总金额（小写）
paymentMethod: null, //支付方式
reimbursementState: 0, //状态
projectId: null, //项目id
typeId: null, //报销类别id
invoiceId: null, //发票的id
fromList: [],//发票号码
},
reimbursementItemData: {
list: [],
},
reimbursementItemList: [],
//报销单区域
options: [
{
value: 0,
category: "普票",
},
{
value: 1,
category: "专票",
},
],
addTO: {
category: null,
code: null,
companyId: null,
mone: null,
number: null,
status: 0,
time: null,
type: 2,
},
isgetid: 0,
//表单验证内容
rules: {
typeId: [
{ required: true, message: "请选择报销类别", trigger: "change" },
],
invoiceId:[
{ required: true, message: "请选择发票号码", trigger: "change" },
],
projectId: [
{ required: true, message: "请选择项目", trigger: "change" },
],
applyTotalAmountLarge: [
{
required: true,
message: "请输入申请报销总金额（大写）",
trigger: "blur",
},
],
applyTotalAmountSmall: [
{ required: true, validator: money, trigger: "blur" },
],
number: [
{ required: true, message: "请输入发票号码", trigger: "change" },
],
code: [
{ required: true, message: "请输入发票代码", trigger: "change" },
],
category: [
{
required: true,
message: "请至少选择一个发票类型",
trigger: "change",
},
],
type: [
{
required: true,
message: "请至少选择一个发票类别",
trigger: "change",
},
],
mone: [
{ required: true, message: "请输入发票金额", trigger: "change" },
],
},
//查询发票数据
invoiceList: {
category: null,
code: null,
companyId: null,
invoiceId: null,
mone: null,
number: null,
orders: [
{
asc: null,
column: null,
},
],
pageNum: 1,
pageSize: 10,
searchCount: null,
status: null,
time: null,
type: null,
},
drawer: false, //抽屉的显示与隐藏
//发票状态
status: 0,
//发票的数组
invoicegetList: [],
//发票编号数组
getinvoivelist: [],
//收集发票编号
invoiceListAdd: {},
//查询发票编号的数组
getinvoiveId: {
companyId: null,
type: 1,
},
pageNum: 10,
total: 1,
//收集数据
newList: [],
//保存图片
proutlist: {
Id: 1,
status: 1,
},
fileList: [],
};
},
created() {
this.from.userId = this.$store.getters.info.userId;
this.from.userName = this.$store.getters.info.userName;
this.from.userPhone = this.$store.getters.info.userPhone;
//获取公司id
this.invoiceList.companyId = this.$store.getters.companyId;
this.from.companyId = this.$store.getters.companyId;
this.addTO.companyId = this.$store.getters.companyId;
this.time();
this.getTypeList();
this.getReimbursement();
this.getProject();
this.Selectinsertlsit(); //获取发票号码
},
methods: {
//解决输入框无法输入
change() {
this.$forceUpdate();
},
//获取公司报销类别
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
//typeCategory: 2,
};
typeSelectAll(param)
.then((res) => {
if (res.success) {
this.typeList = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取类型失败");
this.back();
});
},
//获取个人的项目
getProject() {
projectSelectAll({ userId: this.from.userId })
.then((res) => {
if (res.success) {
this.projectList = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取个人项目失败，无法申请报销");
});
},
//获取报销项
getReimbursement() {
let param = {
companyId: this.$store.getters.companyId,
};
selectAllCompanyId(param)
.then((res) => {
if (res.success) {
//获取数据
this.reimbursementItemList = res.data;
//处理数据
this.reimbursementItemList.forEach((e) => {
//设置参数
let pram = {
itemNamwe: e.name,
itemId: e.id,
money: 0,
reimbursementId: null,
remarks: null,
};
this.reimbursementItemData.list.push(pram);
});
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取报销项失败");
});
},
//获取公司名称
getCompany() {
selectById({ companyId: this.$store.getters.companyId })
.then((res) => {
if (res.status == "success") {
this.company = res.data;
} else {
this.$message.error(res.data);
}
})
.catch((error) => {
this.$message.error("获取公司名称失败");
});
},
//提交
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
//如果左侧校验成功，则开始校验右侧
this.$refs.details.validate((valid2) => {
if (valid2) {
insert(this.from)
.then((res) => {
if (res.success) {
this.reimbursementItemData.list.forEach((item) => {
item.reimbursementId = res.data;
});
let list = [];
this.from.fromList.forEach((item) => {
list.push({
invoiceId: item,
reimbursementId: res.data,
status: 1,
});
});
updatesubmit(list)
.then((item) => {
if (item.success) {
Details(this.reimbursementItemData.list).then(
(res) => {
if (res.success) {
this.$message.success("申请成功，等待审批");
this.back();
}
}
);
}
})
.catch((error) => {
console.log("报销失败");
});
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("申请失败");
});
} else {
this.$message.error("请选择报销项");
}
});
}
});
},
//获取现在时间
time() {
let date = new Date();
var Y = date.getFullYear();
var M =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var m =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.from.fillingTime =
Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
this.timeNow = Y + "年" + M + "月" + D + "日";
},
//新增消费
consumption() {
this.spend.push({});
},
//返回
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({ path: "/reimbursementList" });
},
//重置信息
resetForm() {
this.$refs.form.resetFields();
this.time();
this.from.userId = this.$store.getters.info.userId;
this.from.userName = this.$store.getters.info.userName;
this.from.userPhone = this.$store.getters.info.userPhone;
this.from.companyId = this.$store.getters.companyId;
},
//定义金额校验
moneyrow(rule, value, callback) {
let RegExp =
/(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
// /^(([1-9][0-9]{0,14})|([0]{1})|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$/;
if (RegExp.test(value)) {
callback();
} else {
callback(new Error("金额格式错误"));
}
},
//发票单区域
timestampToTime1() {
var date = this.addTO.time;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.addTO.time = Y + M + D + h + m + s;
},
//发票页面的按钮事件
drawerAdd() {
this.drawer = true;
this.getincomeSelectlist();
},
//发票的分页查询
getincomeSelectlist(pager = 1) {
this.invoiceList.pageNum = pager;
queryBypageIncomeAdd(this.invoiceList)
.then((res) => {
// console.log(res)
if (res.success) {
this.invoicegetList = res.data;
this.total = res.data.total;
} else {
this.$message.errror(res.msg);
}
})
.catch((error) => {
this.$message.error("查询发票数据失败");
});
},
//分页
handleSizeChange(val) {
this.invoicegetList.pageSize = pageSize;
},
handleCurrentChange(currentPage) {
this.invoicegetList.pageNum = currentPage;
},
//取消隐藏tatle
cancel() {
// console.log(this.isgetid);
this.isgetid = 0;
this.getincomeSelectlist();
},
//显示报销单添加页面
Reimbursement() {
this.isgetid = 1;
},
//发票提交页面的提交
getlistForm() {
this.$refs.addTO.validate((valid) => {
if (valid) {
insertList(this.addTO)
.then((res) => {
if (res.success) {
this.proutlist.Id = res.data;
//提交图片
this.$refs.upload.submit();
this.$message.success(res.msg);
this.isgetid = 0;
this.addTO.time = "";
this.$refs.addTO.resetFields();
this.getincomeSelectlist();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("新建失败");
});
}
});
},
//数据清除
delectdd() {
this.$refs.addTO.resetFields();
},
//查询发票编号
Selectinsertlsit() {
let param = {
companyId: this.$store.getters.companyId,
status: 0,
type: 2,
};
selectAllBystatus(param)
.then((res) => {
// console.log(res)
if (res.success) {
this.getinvoivelist = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票编号失败");
this.back();
});
},
},
};
</script>
<style scoped>
.container {
padding: 20px;
}
</style>
<style scoped>
.box {
width: 800px;
float: left;
margin: 60px 0px;
padding: 20px 10px;
border-radius: 30px;
}
.spend {
width: 800px;
float: left;
margin: 60px 0px;
padding: 20px 10px;
}
</style>
\ No newline at end of file
src/views/reimbursement/reimbursementList.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<div>
<el-form :inline="true" :model="reimbursementQurey">
<el-form-item>
<el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addreimbursement()"
>申请报销</el-button
>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="reimbursementList"
style="width: 100%; text-align: center"
border
>
<el-table-column type="expand">
<template slot-scope="props">
<div style="padding: 10px">
<el-descriptions title="报销详情" :column="5" border>
<el-descriptions-item label="支付方式" :span="5">{{
props.row.paymentMethod
}}</el-descriptions-item>
<el-descriptions-item label="组长审批状态" :span="2">
<el-tag
:type="
props.row.reimbursementState == 0
? 'info'
: props.row.reimbursementState == 2
? 'danger'
: 'success'
"
>
{{
props.row.reimbursementState == 0
? "待审批"
: props.row.reimbursementState == 2
? "驳回"
: "通过"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="组长审批时间" :span="3">{{
props.row.headmanTime
}}</el-descriptions-item>
<el-descriptions-item label="组长驳回缘由" :span="5">{{
props.row.headmanRefute || "无"
}}</el-descriptions-item>
<el-descriptions-item label="财务审批状态" :span="2">
<el-tag
:type="
props.row.reimbursementState == 4
? 'danger'
: props.row.reimbursementState == 3
? 'success'
: 'info'
"
>
{{
props.row.reimbursementState == 4
? "驳回"
: props.row.reimbursementState == 3
? "通过"
: "待审批"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="财务审批时间" :span="3">{{
props.row.financeTime
}}</el-descriptions-item>
<el-descriptions-item label="财务驳回缘由" :span="5">{{
props.row.finaceRefute || "无"
}}</el-descriptions-item>
<el-descriptions-item label="查看详情" :span="5">
<el-button
@click="getdetails(props.row)"
type="primary"
style="margin: 5px"
size="mini"
>查看详情</el-button
>
</el-descriptions-item>
</el-descriptions>
</div>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(reimbursementQurey.pageNum - 1) * reimbursementQurey.pageSize +
scope.$index +
1
}}
</template>
</el-table-column>
<el-table-column prop="projectName" label="项目" />
<el-table-column prop="typeName" label="报销类别">
<template slot-scope="scope">
<el-tag>{{ scope.row.typeName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="applyTotalAmountSmall" label="申报总金额" />
<el-table-column label="核报总金额">
<template slot-scope="props">
{{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
</template>
</el-table-column>
<el-table-column label="组长审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column label="财务审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column
prop="fillingTime"
label="报销日期"
:formatter="timestampToTime"
></el-table-column>
<el-table-column prop="prop" label="发票图片">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="ReviseImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column prop="reimbursementState" label="状态">
<template slot-scope="props">
<el-tag
:type="
props.row.reimbursementState == 0
? 'info'
: props.row.reimbursementState == 1 ||
props.row.reimbursementState == 3
? 'success'
: 'danger'
"
>
{{
props.row.reimbursementState == 0
? "待小组长通过"
: props.row.reimbursementState == 1
? "待财务长通过"
: props.row.reimbursementState == 2
? "小组长驳回"
: props.row.reimbursementState == 3
? "财务长通过"
: "财务长驳回"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<el-button
style="margin: 5px"
size="mini"
icon="el-icon-edit"
type="info"
@click="updataReimbursement(scope.row)"
v-if="
scope.row.reimbursementState != 3 &&
scope.row.reimbursementState != 1
"
>修改信息</el-button
>
<el-button
style="margin: 5px"
size="mini"
type="danger"
@click="Resubmit(scope.row)"
v-if="
scope.row.reimbursementState == 2 ||
scope.row.reimbursementState == 4
"
>重新提交</el-button
>
<el-button
style="margin: 5px"
size="mini"
type="info"
@click="withdraw(scope.row)"
v-if="scope.row.reimbursementState == 0"
>
撤回</el-button
>
<el-link
type="success"
style="margin: 5px"
size="mini"
v-if="scope.row.reimbursementState == 3"
>已通过</el-link
>
<el-link
type="info"
style="margin: 5px"
size="mini"
v-if="scope.row.reimbursementState == 1"
>待审批</el-link
>
</template>
</el-table-column>
</el-table>
<el-drawer title="查看详情" :visible.sync="drawer" :direction="direction">
<el-form :inline="true" label-width="80px">
<el-row>
<el-col
v-for="(item, index) in reimbursementDetails.list"
:key="index"
>
<el-form-item :label="item.name">
<el-input v-model="item.money" disabled="disabled"></el-input>
</el-form-item>
<el-form-item label="说明">
<el-input v-model="item.remarks" disabled="disabled"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-drawer>
<el-drawer
title="发票详情"
:visible.sync="invoiceShow"
:direction="direction"
size="40%"
>
<!-- filePath-->
<el-table
:data="getinvoivelist"
style="width: 100%; text-align: center"
border
>
<el-table-column
type="index"
label="序号"
width="40"
></el-table-column>
<el-table-column prop="prop" label="发票详情">
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.filePath"
:preview-src-list="[scope.row.filePath]"
></el-image>
</template>
</el-table-column>
</el-table>
</el-drawer>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="reimbursementQurey.pageNum"
:page-size="reimbursementQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import { queryBypage, resubmit, reimbursementId } from "@/api/reimbursement";
import { selectByReimbursementId } from "@/api/reimbursementDetails";
import { selectAllById } from "@/api/project";
export default {
data() {
return {
reimbursementQurey: {
userId: null,
pageNum: 1,
pageSize: 10,
},
total: 0,
reimbursementList: [],
//抽屉
drawer: false,
invoiceShow: false,
direction: "rtl",
reimbursementDetails: {
list: [],
},
getinvoivelist: [],
//查询图片给的值
getinvoiveId: {
companyId: null,
reimbursementId: 0,
},
};
},
created() {
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.reimbursementQurey.userId = this.$store.getters.urId;
this.getReimbursement();
},
methods: {
//查看详情
getdetails(data) {
this.drawer = true;
let param = {
reimbursementId: data.reimbursementId,
};
selectByReimbursementId(param)
.then((res) => {
if (res.success) {
//获取数据
console.log(res);
this.reimbursementDetails.list = res.data;
this.$message.success(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
//申请报销
addreimbursement() {
this.$router.push({ path: "/reimbursementAdd" });
},
//获取申请报销列表
getReimbursement() {
// console.log(this.reimbursementQurey);
queryBypage(this.reimbursementQurey)
.then((res) => {
// console.log(res)
if (res.success) {
this.reimbursementList = res.data.list;
// console.log(this.reimbursementList);
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("回去数据失败");
});
},
//修改信息
updataReimbursement(data) {
//data是列表中所有的数据
console.log(data);
this.$router.push({
path: "/reimbursementUpdata",
//query 找到我们需要的字段
query: {
reimbursementId: data.reimbursementId, //传那一行数据的id
projectId: data.projectId, //项目id 下拉框根据项目id选择
typeId: data.typeId, //报销类别id
applyTotalAmountLarge: data.applyTotalAmountLarge, //大写金额
applyTotalAmountSmall: data.applyTotalAmountSmall, //小写金额
summary: data.summary, //摘要
paymentMethod: data.paymentMethod, //支付方式
},
});
},
//换页
handleCurrentChange(val) {
this.reimbursementQurey.pageNum = val;
this.getReimbursement();
},
//时间处理
timestampToTime(row, column, cellValue) {
return cellValue.split(" ")[0];
},
//重新提交
Resubmit(data) {
//重新提交就要让之前的数据回复。
//两个审批人的id、状态、审批时间、驳回缘由、核实金额
//删除记录在重新填，或者删除字段记录
data.reimbursementState = 0; //状态
data.verifyTotalAmountLarge = null; //核实金额
data.verifyTotalAmountSmall = null; //核实金额
data.headmanRefute = null; //驳回缘由
data.finaceRefute = null; //驳回缘由
data.financeTime = null; //审批时间
data.headmanTime = null; //审批时间
data.financeId = null; //审批人的id
data.headmanId = null; //审批人的id
resubmit(data)
.then((res) => {
if (res.success) {
this.$message.success("重新提交成功，等待审批");
this.getReimbursement();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("重新提交失败");
});
},
//撤回
withdraw(data) {
reimbursementId(data.reimbursementId).then((res) => {
if (res.success) {
this.getReimbursement();
}
});
},
//查看图片的方法
ReviseImage(row) {
this.invoiceShow = true;
this.getinvoiveId.reimbursementId = row.reimbursementId;
//console.log(process.env.VUE_APP_BASE_API);
this.Selectinsertlsit();
},
//查询发票图片
Selectinsertlsit() {
selectAllById(this.getinvoiveId)
.then((res) => {
if (res.success) {
this.getinvoivelist = res.data;
this.getinvoivelist.forEach((e) => {
e.filePath = process.env.VUE_APP_BASE_API + e.filePath;
});
console.log(this.getinvoivelist);
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票图片失败");
this.back();
});
},
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
src/views/reimbursement/reimbursementUpdata.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<div class="box">
<el-form
ref="form"
:model="from"
:inline="true"
label-width="150px"
:rules="rules"
>
<el-form-item label="实际报销人" prop="userName">
<el-input v-model="from.userName" disabled></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="userPhone">
<el-input v-model="from.userPhone" disabled></el-input>
</el-form-item>
<el-form-item label="项目名称" prop="projectId">
<el-select v-model="from.projectId" placeholder="请选择">
<el-option
v-for="item in projectList"
:key="item.projectId"
:label="item.projectName"
:value="item.projectId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="报销类别" prop="typeId">
<el-select v-model="from.typeId" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="摘要" prop="summary">
<el-input v-model="from.summary"></el-input>
</el-form-item>
<el-form-item label="报销总金额-大写" prop="applyTotalAmountLarge">
<el-input v-model="from.applyTotalAmountLarge" ></el-input>
</el-form-item>
<el-form-item label="报销总金额-小写" prop="applyTotalAmountSmall">
<el-input v-model="from.applyTotalAmountSmall" ></el-input>
</el-form-item>
<el-form-item label="支付方式" prop="paymentMethod">
<el-input v-model="from.paymentMethod" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="updateForm()">修改</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="resetForm()">重置信息</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
<div class="spend"><el-form
:model="reimbursementItemData"
:inline="true"
ref="details"
label-width="150px">
<el-row :gutter="20">
<el-col :xl="12" :lg="12" :md="24" :sm="24" style="margin: 10px 0px"
v-for="(item, index) in reimbursementItemData.list"
:key="index">
<el-form-item :label="item.name"
:prop="'list.' + index + '.money'"
:rules="{ validator: moneyrow, trigger: 'blur' }"
>
<el-input v-model="item.money"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form></div>
</div>
</template>
<script>
import { selectById } from "@/api/company";
import {selectById as reimbursementSelectById,update} from "@/api/reimbursement"
import {money} from "@/utils/myValidate"
import {selectAll as typeSelectAll} from "@/api/type";
import { selectAll as projectSelectAll } from "@/api/project";
import { selectByReimbursementId } from "@/api/reimbursementDetails";
import { update as detailsUpdate } from "@/api/reimbursementDetails";
import {
insertList,
queryBypageIncomeAdd,
selectAllBystatus,
} from "@/api/project";
export default {
data() {
return {
reimbursementItemData: {
list: [],
},
reimbursementItemList:[],
company:{},
timeNow:null,
projectList:[],
typeList:[],
from:{
userName:null,//申报人
userPhone:null,//联系电话
userId:null,//申报人Id
officeExpenses:0,//办公费
printingFee:0,//版面复印打印费
consultingFee:0,//咨询费
serviceCharge:0,//手续费
postage:0,//邮电费
trafficExpense:0,//交通费
maintenanceCost:0,//维修（护）费
rentalFee:0,//租赁费
conferenceExpenses:0,//会议费
trainingFee:0,//培训费
entertainmentExpenses:0,//招待费
specialMaterialCost:0,//专用材料费
serviceFee:0,//劳务费
travelExpenses:0,//差旅费
other:0,//其他
entrustedBusinessFee:0,//委托业务费
summary:null,//摘要
enclosureNumber:0,//附件数量
fillingTime:null,//填报日期
applyTotalAmountLarge:null,//申请报销总金额（大写）
applyTotalAmountSmall:null,//申请报销总金额（小写）
paymentMethod:null,//支付方式
reimbursementState:0,//状态
projectId:null,//项目id
typeId:null,//报销类别id
invoiceId:null
},
//发票编号数组
getinvoivelist: [],
rules:{
typeId:[
{ required: true, message: '请选择报销类别', trigger: 'change'}
],
projectId:[
{ required: true, message: '请选择项目', trigger: 'change' }
],
applyTotalAmountLarge:[
{ required: true, message: "请输入申请报销总金额（大写）", trigger: "blur" },
],
applyTotalAmountSmall:[
{ required: true, message: "请输入申请报销总金额（小写）", trigger: "blur" },
],
entrustedBusinessFee:[
{ validator:money, trigger: "blur" },
],
other:[
{ validator:money, trigger: "blur" },
],
travelExpenses:[
{ validator:money, trigger: "blur" },
],
serviceFee:[
{ validator:money, trigger: "blur" },
],
specialMaterialCost:[
{ validator:money, trigger: "blur" },
],
entertainmentExpenses:[
{ validator:money, trigger: "blur" },
],
trainingFee:[
{ validator:money, trigger: "blur" },
],
conferenceExpenses:[
{ validator:money, trigger: "blur" },
],
rentalFee:[
{ validator:money, trigger: "blur" },
],
maintenanceCost:[
{ validator:money, trigger: "blur" },
],
trafficExpense:[
{ validator:money, trigger: "blur" },
],
postage:[
{ validator:money, trigger: "blur" },
],
serviceCharge:[
{ validator:money, trigger: "blur" },
],
consultingFee:[
{ validator:money, trigger: "blur" },
],
printingFee:[
{ validator:money, trigger: "blur" },
],
officeExpenses:[
{ validator:money, trigger: "blur" },
],
}
};
},
created() {
this.from.userId = this.$store.getters.info.userId;
this.from.userName = this.$store.getters.info.userName;
this.from.userPhone = this.$store.getters.info.userPhone;
this.getFrom()
this.getTypeList()
this.getReimbursement()
this.getProject()
this.Selectinsertlsit()
},
computed: {
reimbursementId() {
return this.$route.query.id;
},
},
methods: {
//
//获取报销类型显示(相当于详情)
getReimbursement() {
selectByReimbursementId({reimbursementId:this.$route.query.reimbursementId})
.then((res) => {
if (res.success) {
//获取数据(把data里的数据放在数组里面)
this.reimbursementItemData.list=res.data
//[{name:'办公费用'，money:18},{name:'办公费用'，money:18}]
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取报销项失败");
});
},
//获取公司报销类别
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
// typeCategory: 2,
};
typeSelectAll(param)
.then((res) => {
if (res.success) {
this.typeList = res.data;
} else {
this.$message.error(res.msg);
this.back()
}
})
.catch((error) => {
this.$message.error("获取类型失败");
this.back()
});
},
//获取报销信息
getFrom(){
//接收query传给我们的值
this.from.reimbursementId=this.$route.query.reimbursementId,
this.from.projectId=this.$route.query.projectId,
this.from.typeId=this.$route.query.typeId,
this.from.applyTotalAmountLarge=this.$route.query.applyTotalAmountLarge,
this.from.applyTotalAmountSmall=this.$route.query.applyTotalAmountSmall,
this.from.summary=this.$route.query.summary,
this.from.paymentMethod=this.$route.query.paymentMethod
this.getReimbursement()
// reimbursementSelectById({reimbursementId:this.reimbursementId}).then((res)=>{
// if(res.success){
// this.from = res.data
// this.from.userPhone = this.$store.getters.info.userPhone
// this.getProject()
// //处理时间
// this.time(this.from.fillingTime)
// }else{
// this.$message.error(res.msg)
// }
// }).catch((error)=>{
// this.$message.error("获取数据失败")
// })
},
//获取个人的项目
getProject(){
projectSelectAll({userId:this.from.userId}).then((res)=>{
if(res.success){
// console.log(res.data)
this.projectList = res.data
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("获取个人项目失败，无法申请报销")
})
},
//获取公司名称
getCompany() {
selectById({ companyId: this.$store.getters.companyId })
.then((res) => {
if (res.status == "success") {
// console.log(res.data)
this.company = res.data;
} else {
this.$message.error(res.data);
}
})
.catch((error) => {
this.$message.error("获取公司名称失败");
});
},
//打印
billPrintClick() {
const style = "@page {margin:0 10mm};";
printJS({
printable: "printBill",
type: "html",
headerStyle: "font-size:22px;text-align: center;",
header: this.company.companyName + "日常报销单",
ignoreElements:['caption','button'],
targetStyles: ["*"],
style,
});
},
//修改
updateForm(){
//金额的校验
this.$refs.form.validate((valid)=>{
if(valid){//第一次校验左边
this.$refs.details.validate(valid2=>{
if(valid2){
update(this.from).then((res)=>{
if(res.success){
detailsUpdate(this.reimbursementItemData.list).then(res=>{
if(res.success){//如果第一个方法成功了，就执行第二个方法(第一个方法修改报销信息，第二个方法修改报销详情信息)
this.$message.success("修改成功，等待审批")
this.back()
}
})
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("申请失败")
})
}
else{
this.$message.error("金额错误");
}
})
}
})
},
//获取现在时间
time(data){
let date = new Date(data);
var Y = date.getFullYear()
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1)
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate())
var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours())
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())
var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds())
this.timeNow = Y+ '年'+M+ '月'+D +'日'
},
//返回
back(){
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push({path: '/reimbursementList'})
},
//重置信息
resetForm(){
this.getFrom()
},
//定义金额校验
moneyrow(rule, value, callback) {
let RegExp =
/(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
// /^(([1-9][0-9]{0,14})|([0]{1})|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$/;
if (RegExp.test(value)) {
callback();
} else {
callback(new Error("金额格式错误"));
}
},
//查询发票编号
Selectinsertlsit() {
let param = {
companyId: this.$store.getters.companyId,
status: 0,
type: 2,
};
selectAllBystatus(param)
.then((res) => {
// console.log(res)
if (res.success) {
this.getinvoivelist = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票编号失败");
this.back();
});
},
},
};
</script>
<style scoped>
.container {
padding: 20px;
}
</style>
<style scoped>
.clearfloat:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.no-border {
border: none;
}
.show-border {
border: 1px solid black;
}
.printTable {
float: left;
width: 794px;
height: 1123px;
padding: 20px 80px;
box-sizing: border-box;
font-size: 14px;
}
.table {
margin-bottom: 20px;
}
.table td {
height: 33px;
padding: 4px;
}
.table_title {
font-size: 22px;
font-weight: 900;
margin-bottom: 10px;
}
.table-header {
text-align: left;
}
.table-header > th {
height: 50px;
padding: 10px;
}
.herder-title {
width: 100%;
}
.herder-title .title {
float: left;
text-align: left;
}
.sign {
width: 100%;
margin-bottom: 15px;
padding-left: 10px;
}
.sign > div {
width: 33%;
float: left;
font-size: 14px;
font-weight: 900;
}
.data {
width: 38%;
float: right;
font-size: 14px;
font-weight: 900;
}
.items {
text-align: center;
}
.td-input{
display: inline-block;
width: 100%;
height: 100%;
outline: none;
border: none;
}
.input{
outline: none;
border: none;
}
.box{
width: 800px;
float: left;
margin: 60px 0px;
padding: 20px 10px;
/* box-sizing: border-box;
border:1px #000 solid; */
border-radius: 30px;
}
.spend {
width: 800px;
float: left;
margin: 60px 0px;
padding: 20px 10px;
}
</style>
\ No newline at end of file
src/views/reimebursementItem/reimebursementItemAdd.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<div class="container_top">
<!-- :model 收集表单上的数据 -->
<el-form
:inline="true"
ref="form"
:model="reimebursementItemform"
class="demo-form-inline"
>
<el-row
v-for="(item, index) in reimebursementItemform.reimebursementItemlist"
:key="item.index"
>
<el-col :xl="6" :lg="8" :md="8" :sm="10" :xs="24">
<el-form-item
:label="'报销项名称' + (index + 1)"
:prop="'reimebursementItemlist.' + index + '.name'"
:rules="{
required: true,
message: '名称不能为空',
trigger: 'blur',
}"
>
<el-input
v-model.trim="item.name"
placeholder="请输入新建项名称"
></el-input>
</el-form-item>
</el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<el-form-item
:label="'报销项说明' + (index + 1)"
:prop="'reimebursementItemlist.' + index + '.explain'"
:rules="{
required: true,
message: '内容不能为空',
trigger: 'blur',
}"
>
<div>
<el-row :gutter="10">
<el-col :span="18">
<el-input
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model.trim="item.explain"
>
</el-input>
</el-col>
<el-col :span="4">
<el-button @click.prevent="removeDomain(item)"
>删除</el-button
>
</el-col>
</el-row>
</div>
</el-form-item>
</el-col>
</el-row>
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="addDomain">新增类型</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button @click="back()">返回</el-button>
</el-form>
</div>
</div>
</template>
<script>
import { insert } from "@/api/reimburtypeList";
export default {
data() {
return {
reimebursementItemform: {
reimebursementItemlist: [
{
name: "",
explain: "",
companyId: this.$store.getters.companyId,
},
],
},
};
},
created() {
},
methods: {
//添加
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
insert(this.reimebursementItemform.reimebursementItemlist)
.then((res) => {
if (res.success) {
this.$message.success("添加成功！");
this.back()
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("添加失败");
});
} else {
console.log("error submit!!");
return false;
}
});
},
// 添加新建项
addDomain() {
this.reimebursementItemform.reimebursementItemlist.push({
name: "",
explain: "",
companyId: this.$store.getters.companyId,
});
},
removeDomain(item){
var index = this.reimebursementItemform.reimebursementItemlist.indexOf(item)
if (index !== -1) {
this.reimebursementItemform.reimebursementItemlist.splice(index, 1)
}
},
// 返回上一级
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push("reimburtypeList");
},
// 重置
resetForm() {
this.$refs.form.resetFields();
},
},
};
</script>
<style>
.container_top {
margin: 15px 20px;
}
</style>
\ No newline at end of file
src/views/reimebursementItem/reimebursementItemList.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="total_container">
<!-- 头部表单区域 -->
<div class="total_top">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="报销项名称">
<el-input placeholder="请输入报销项名称" v-model="reimebursementItemQurey.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="queryType">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-refresh-right"
@click="reset()"
>重置</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="success"
icon="el-icon-circle-plus"
@click="addItem()"
>添加</el-button
>
</el-form-item>
</el-form>
</div>
<div class="total_content">
<!-- 表格内容区域 -->
<el-table
:data="reimebursementItemList"
style="width: 100%"
border
>
<el-table-column type="index" label="编号" width="60" align="center">
<template slot-scope="scope">
{{
(reimebursementItemQurey.pageNum - 1) * reimebursementItemQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column label="报销项" >
<template slot-scope="scope">
<p style="font-weight:900">
{{scope.row.name}}
</p>
</template>
</el-table-column>
<el-table-column prop="explain" label="报销说明">
</el-table-column>
<el-table-column prop="address" label="操作" width="160" align="center">
<template slot-scope="scope">
<el-button
type="info"
icon="el-icon-edit"
@click="Update(scope.row)"
>编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="reimebursementItemQurey.pageNum"
:page-size="reimebursementItemQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { queryBypage } from "@/api/reimburtypeList";
import Personal from "../personal/personal.vue";
export default {
data() {
return {
reimebursementItemQurey: {
pageNum: 1,
pageSize: 10,
companyId: null,
name: ""
},
total: 0,
reimebursementItemList: [],
};
},
created() {
this.reimebursementItemQurey.companyId = this.$store.getters.companyId;
this.getpagelist();
},
methods: {
//添加报销项
addItem() {
this.$router.push("/reimburtypeAdd");
},
// 查询
getpagelist() {
queryBypage(this.reimebursementItemQurey)
.then((res) => {
if (res.success) {
console.log(res);
this.reimebursementItemList = res.data.list;
this.total = res.data.total;
}
else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 修改
Update(data) {
this.$router.push({
path: "/reimburtypeUpdate",
query: {
id: data.id
},
});
},
// 搜索
queryType() {
this.reimebursementItemQurey.pageNum = 1;
this.getpagelist();
},
//分页
handleCurrentChange(val) {
this.reimebursementItemQurey.pageNum = val;
this.getpagelist();
},
//重置
reset() {
this.reimebursementItemQurey = {
pageNum: 1,
pageSize: 10,
companyId: null,
name: ""
};
this.reimebursementItemQurey.companyId = this.$store.getters.companyId;
this.getpagelist();
},
},
components: { Personal }
};
</script>
<style>
.total_top {
margin: 15px 20px 0px 20px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
src/views/reimebursementItem/reimebursementItemUpdate.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<el-row>
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
<el-form
:model="reimebursementItemdata"
:rules="rules"
ref="form"
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="类型名称" prop="name">
<el-input v-model="reimebursementItemdata.name"></el-input>
</el-form-item>
<el-form-item label="内容说明" prop="explain">
<el-input v-model="reimebursementItemdata.explain"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="success"
icon="el-icon-upload2"
@click="updateType()"
>提交</el-button
>
<el-button type="info" icon="el-icon-refresh-left" @click="cancel()"
>取消</el-button
>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import { update,seleTypeid } from "@/api/reimburtypeList.js";
export default {
created(){
this.reimebursementItemdata.companyId = this.$store.getters.companyId;
this.getTypeData()
},
data() {
return {
reimebursementItemdata: {
companyId: 0,
explain: "",
id: 0,
name: "",
},
rules: {
name: [
{ required: true, message: "类型名称不能为空", trigger: "blur" },
],
explain: [
{ required: true, message: "说明内容不能为空", trigger: "blur" },
],
},
};
},
computed: {
id() {
return this.$route.query.id;
},
},
methods: {
//获取数据
getTypeData(){
seleTypeid({id:this.id}).then((res)=>{
if(res.success){
this.reimebursementItemdata = res.data
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("查询数据失败")
})
},
// 提交数据
updateType(){
update(this.reimebursementItemdata).then((res)=>{
if(res.success){
this.$message.success("修改成功")
}else{
this.$message.error(res.msg('名称重复'))
}
}).catch((error)=>{
this.$message.error("修改失败")
})
},
// 取消按钮
cancel(){
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push('/reimburtypeList')
}
},
};
</script>
<style>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
src/views/staff/addStaff.vue 0 → 100644
View file @ 6e137f66
<template>
<!-- 添加员工 -->
<div class="container">
<el-row>
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
<el-form
:model="staffData"
:rules="rules"
ref="form"
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="员工姓名" prop="userName">
<el-input v-model="staffData.userName"></el-input>
</el-form-item>
<el-form-item label="员工性别" prop="userSex">
<el-select v-model="staffData.userSex" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="员工账号" prop="userAdmin">
<el-input v-model="staffData.userAdmin"></el-input>
</el-form-item>
<el-form-item label="员工密码" prop="userPassword">
<el-input v-model="staffData.userPassword"></el-input>
</el-form-item>
<el-form-item label="员工手机号" prop="userPhone">
<el-input v-model="staffData.userPhone"></el-input>
</el-form-item>
<el-form-item label="员工身份证" prop="userIdentification">
<el-input v-model="staffData.userIdentification"></el-input>
</el-form-item>
<el-form-item label="员工银行卡号" prop="userBankNumber">
<el-input v-model="staffData.userBankNumber"></el-input>
</el-form-item>
<el-form-item label="员工开户银行" prop="userBankAddress">
<el-input v-model="staffData.userBankAddress"></el-input>
</el-form-item>
<el-form-item label="员工权限" prop="roles">
<el-checkbox-group v-model="staffData.roles">
<el-checkbox v-for="item in rolesList" :key="item.rlId" :label="item.rlId" name="type">{{item.rlName}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="update()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="reset">重置信息</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {chinaIdentityValid,bankAccountValid,checkPhone} from '@/utils/myValidate'
import { selectAllByCompanyId} from '@/api/role'
import {insertStaff} from '@/api/user'
export default {
data() {
return {
staffData: {
companyId:null,
userName:null,
userSex:null,
userAdmin:null,
userPassword:null,
userPhone:null,
userIdentification:null,
userBankNumber:null,
userBankAddress:null,
roles:[],
},
rolesList:[],
options: [
{
value: 1,
label: "男",
},
{
value: 0,
label: "女",
},
],
rules: {
userName: [
{ required: true, message: "请输入员工姓名", trigger: "blur" },
],
userSex: [{ required: true, message: "请选择员工性别", trigger: "change" }],
userAdmin: [{ required: true, message: "请输入员工账号", trigger: "blur" }],
userPassword: [
{ required: true, message: "请输入员工密码", trigger: "blur" },
],
userPhone: [
{required:true, validator:checkPhone, trigger: ['blur', 'change']},
],
userIdentification: [
{required:true, validator:chinaIdentityValid, trigger:'blur'},
],
userBankNumber: [
{required:true, validator:bankAccountValid, trigger:'blur'},
],
userBankAddress: [
{ required: true, message: "请输入员工开户行", trigger: "blur" },
],
roles:[
{ type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }
]
},
}
},
created(){
this.staffData.companyId=this.$store.getters.companyId;
//获取权限
this.getRoles();
},
methods:{
getRoles() {
selectAllByCompanyId({companyId:this.$store.getters.companyId}).then((res)=>{
if(res.status == "success"){
this.rolesList = res.data
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("查询角色失败")
})
},
//重置数据
reset(){
this.$refs.form.resetFields()
},
//提交数据
update(){
//先校验
this.$refs.form.validate((valida)=>{
if(valida){
//提交
insertStaff(this.staffData).then((res)=>{
if(res.status == "success"){
this.$message.success("添加成功")
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/staffList")
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("添加失败")
})
}
})
},
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
src/views/staff/staffList.vue 0 → 100644
View file @ 6e137f66
<template>
<!-- 员工管理 -->
<div class="container">
<div class="header">
<el-form :inline="true" :model="staffQurey">
<el-form-item label="员工姓名">
<el-input
v-model="staffQurey.userName"
placeholder="员工姓名"
></el-input>
</el-form-item>
<el-form-item label="员工手机号">
<el-input
v-model="staffQurey.companyAddress"
placeholder="员工手机号"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()"
>查询</el-button
>
<el-button
type="primary"
icon="el-icon-refresh-right"
@click="reset()"
>重置</el-button
>
<el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addstaff()"
>添加员工</el-button
>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="staffList"
style="width: 100%; text-align: center"
border
>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(staffQurey.pageNum - 1) * staffQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="userName" label="姓名" />
<el-table-column prop="userSex" label="性别" >
<template slot-scope="scope">
{{scope.row.userSex == '0' ? '女' : '男'}}
</template>
</el-table-column>
<el-table-column prop="userPhone" label="手机号" />
<el-table-column prop="userIdentification" label="身份证" />
<el-table-column prop="userBankNumber" label="银行卡号" />
<el-table-column prop="userBankAddress" label="开户银行" />
<el-table-column label="员工角色" >
<template slot-scope="scope">
<el-tag v-for="item in scope.row.roleList" :key="item.rlId" style="margin-right:10px;">{{item.rlName}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button style="margin:5px" size="mini" icon="el-icon-edit" type="info" @click="updataStaff(scope.row)">修改信息</el-button>
<el-button style="margin:5px" size="mini" icon="el-icon-edit" type="info" @click="staffrole(scope.row)" :disabled="scope.row.roles.indexOf(2)>-1">修改员工角色</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="staffQurey.pageNum"
:page-size="staffQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
<el-dialog
:title="staffdata.userName"
:visible.sync="dialogVisible"
width="30%"
>
<p>角色</p>
<el-checkbox-group v-model="staffdata.roles">
<el-checkbox v-for="item in rolesList" :key="item.rlId" :label="item.rlId" name="type" >{{item.rlName}}</el-checkbox>
</el-checkbox-group>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updataStaffRole">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {selectAllByCompanyId} from '@/api/role'
import {secletStaff,updateRole} from '@/api/user'
export default {
data() {
return {
staffQurey: {
companyId: null,
pageNum: 1,
pageSize: 10,
userName: null,
userPhone: null,
},
total: 0,
staffList: [],
dialogVisible:false,
staffdata:{},
rolesList:[],
};
},
created() {
this.staffQurey.companyId = this.$store.getters.companyId
this.getSatff()
this.getRoles();
},
methods: {
//获取权限
getRoles() {
selectAllByCompanyId({companyId:this.$store.getters.companyId}).then((res)=>{
if(res.status == "success"){
this.rolesList = res.data
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("查询角色失败")
})
},
//获取员工
getSatff(){
secletStaff(this.staffQurey).then((res)=>{
if(res.status == 'success'){
// console.log(res.status)
this.staffList = res.data.list
this.total = res.data.total
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("获取员工失败")
})
},
//查询
qurey() {
this.staffQurey.pageNum = 1
this.getSatff()
},
//重置
reset() {
this.staffQurey = {
companyId: this.$store.getters.companyId,
pageNum: 1,
pageSize: 10,
userName: null,
userPhone: null,
}
this.getSatff()
},
//添加员工
addstaff() {
this.$router.push('/addStaff')
},
//换页
handleCurrentChange(val) {
this.staffQurey.pageNum = val
this.getSatff()
},
//修改员工信息
updataStaff(data){
this.$router.push({
path: '/updataStaff',
query:{
id:data.userId,
}
})
},
//修改员工角色
staffrole(data){
let roles = this.$store.getters.roles
console.log(data)
if(roles.indexOf(2) > -1){
this.staffdata = data
this.dialogVisible = true
}else{
this.$message.warning("只有管理员有权限修改员工角色")
}
},
//修改员工角色提交方法
updataStaffRole(){
// console.log(this.staffdata)
let param={
userId:this.staffdata.userId,
roles:this.staffdata.roles
}
console.log(param)
updateRole(param).then(res=>{
if(res.status == 'success'){
this.getSatff()
}else{
this.$message.error(res.data)
}
})
this.dialogVisible=false
}
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
src/views/staff/staffList2.vue 0 → 100644
View file @ 6e137f66
<template>
<!-- 员工管理 -->
<div class="container">
<div class="header">
<el-form :inline="true" :model="staffQurey">
<el-form-item label="员工姓名">
<el-input
v-model="staffQurey.userName"
placeholder="员工姓名"
></el-input>
</el-form-item>
<el-form-item label="员工手机号">
<el-input
v-model="staffQurey.companyAddress"
placeholder="员工手机号"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()"
>查询</el-button
>
<el-button
type="primary"
icon="el-icon-refresh-right"
@click="reset()"
>重置</el-button
>
<el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addstaff()"
>添加员工</el-button
>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="staffList"
style="width: 100%; text-align: center"
border
>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(staffQurey.pageNum - 1) * staffQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="userName" label="姓名" />
<el-table-column prop="userSex" label="性别" >
<template slot-scope="scope">
{{scope.row.userSex == '0' ? '女' : '男'}}
</template>
</el-table-column>
<el-table-column prop="userPhone" label="手机号" />
<el-table-column prop="userIdentification" label="身份证" />
<el-table-column prop="userBankNumber" label="银行卡号" />
<el-table-column prop="userBankAddress" label="开户银行" />
<el-table-column label="员工角色" >
<template slot-scope="scope">
<el-tag v-for="item in scope.row.roleList" :key="item.rlId" style="margin-right:10px;">{{item.rlName}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button style="margin:5px" size="mini" icon="el-icon-edit" type="info" @click="updataStaff(scope.row)">修改信息</el-button>
<el-button style="margin:5px" size="mini" icon="el-icon-edit" type="info" @click="staffrole(scope.row)" :disabled="scope.row.roles.indexOf(2)>-1">修改员工角色</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="staffQurey.pageNum"
:page-size="staffQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
<el-dialog
:title="staffdata.userName"
:visible.sync="dialogVisible"
width="30%"
>
<p>角色</p>
<el-checkbox-group v-model="staffdata.roles">
<el-checkbox v-for="item in rolesList" :key="item.rlId" :label="item.rlId" name="type" >{{item.rlName}}</el-checkbox>
</el-checkbox-group>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updataStaffRole">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {selectAllByCompanyId} from '@/api/role'
import {secletStaff,updateRole} from '@/api/user'
export default {
data() {
return {
staffQurey: {
companyId: null,
pageNum: 1,
pageSize: 10,
userName: null,
userPhone: null,
},
total: 0,
staffList: [],
dialogVisible:false,
staffdata:{},
rolesList:[],
};
},
created() {
this.staffQurey.companyId = this.$store.getters.companyId
this.getSatff()
this.getRoles();
},
methods: {
//获取权限
getRoles() {
selectAllByCompanyId({companyId:this.$store.getters.companyId}).then((res)=>{
if(res.status == "success"){
this.rolesList = res.data
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("查询角色失败")
})
},
//获取员工
getSatff(){
secletStaff(this.staffQurey).then((res)=>{
if(res.status == 'success'){
// console.log(res.status)
this.staffList = res.data.list
this.total = res.data.total
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("获取员工失败")
})
},
//查询
qurey() {
this.staffQurey.pageNum = 1
this.getSatff()
},
//重置
reset() {
this.staffQurey = {
companyId: this.$store.getters.companyId,
pageNum: 1,
pageSize: 10,
userName: null,
userPhone: null,
}
this.getSatff()
},
//添加员工
addstaff() {
this.$router.push('/addStaff')
},
//换页
handleCurrentChange(val) {
this.staffQurey.pageNum = val
this.getSatff()
},
//修改员工信息
updataStaff(data){
this.$router.push({
path: '/updataStaff',
query:{
id:data.userId,
}
})
},
//修改员工角色
staffrole(data){
let roles = this.$store.getters.roles
console.log(data)
if(roles.indexOf(2) > -1){
this.staffdata = data
this.dialogVisible = true
}else{
this.$message.warning("只有管理员有权限修改员工角色")
}
},
//修改员工角色提交方法
updataStaffRole(){
// console.log(this.staffdata)
let param={
userId:this.staffdata.userId,
roles:this.staffdata.roles
}
console.log(param)
updateRole(param).then(res=>{
if(res.status == 'success'){
this.getSatff()
}else{
this.$message.error(res.data)
}
})
this.dialogVisible=false
}
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
src/views/staff/updataStaff.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<el-row :gutter="40">
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
<el-form
:model="staffData"
:rules="rules"
ref="form"
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="员工姓名" prop="userName">
<el-input v-model="staffData.userName" disabled></el-input>
</el-form-item>
<el-form-item label="员工性别" prop="userSex">
<el-select v-model="staffData.userSex" placeholder="请选择" disabled>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="员工账号" prop="userAdmin">
<el-input v-model="staffData.userAdmin" disabled></el-input>
</el-form-item>
<el-form-item label="员工手机号" prop="userPhone">
<el-input v-model="staffData.userPhone" disabled></el-input>
</el-form-item>
<el-form-item label="员工身份证" prop="userIdentification">
<el-input v-model="staffData.userIdentification" disabled></el-input>
</el-form-item>
<el-form-item label="员工银行卡号" prop="userBankNumber">
<el-input v-model="staffData.userBankNumber"></el-input>
</el-form-item>
<el-form-item label="员工开户银行" prop="userBankAddress">
<el-input v-model="staffData.userBankAddress"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="update()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="cancel()">取消</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
<div class="password">
<p class="title">强制修改密码:</p>
<el-input v-model="password"></el-input>
<el-button style="margin-top:10px" type="primary" @click="updatePassword()">确认修改</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import {chinaIdentityValid,bankAccountValid,checkPhone} from '@/utils/myValidate'
import { getRoles} from '@/api/role'
import {getOneself,update,staffpassword} from '@/api/user'
export default {
data(){
return{
password:'',
staffData: {
companyId:null,
userName:null,
userSex:null,
userAdmin:null,
userPassword:null,
userPhone:null,
userIdentification:null,
userBankNumber:null,
userBankAddress:null,
roles:[],
},
rolesList:[],
options: [
{
value: 1,
label: "男",
},
{
value: 0,
label: "女",
},
],
rules: {
userBankNumber: [
{ required:true, validator:bankAccountValid, trigger:'blur'},
],
userBankAddress: [
{ required: true, message: "请输入员工开户行", trigger: "blur" },
],
roles:[
{ type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }
]
},
}
},
computed:{
userId(){
return this.$route.query.id
}
},
created(){
this.getStaff()
},
methods:{
getStaff(){
getOneself({userId:this.userId}).then((res)=>{
if(res.status == "success"){
this.staffData = res.data
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("查询员工信息失败")
})
},
cancel(){
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/staffList")
},
update(){
this.$refs.form.validate((valida)=>{
if(valida){
update(this.staffData).then((res)=>{
if(res.status == "success"){
this.$message.success("修改成功")
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/staffList")
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("修改失败")
})
}
})
},
updatePassword(){
this.$confirm('确认要修改此员工的密码吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let param = {
staffPassword:this.password,
userId:this.staffData.userId
}
staffpassword(param).then((res)=>{
if(res.status == "success"){
this.$message.success("修改成功")
this.password=''
}else{
this.$message.error(res.data)
}
}).catch(()=>{
this.$message.error("修改失败")
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消修改'
});
});
}
}
}
</script>
<style scoped>
.container{
padding: 10px;
}
.password{
border: 1px solid black;
padding: 20px;
border-radius: 10px;
}
.password>.title{
margin: 0px 0px 10px 0px;
font-weight: 600;
}
</style>
\ No newline at end of file
src/views/type/typeAdd.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<el-row>
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<el-form :model="typefrom" ref="from" label-width="60px" class="demo-dynamic" >
<el-row v-for="(item, index) in typefrom.typeList" :key="item.key">
<el-col :xl="6" :lg="8" :md="8" :sm="10" :xs="24">
<el-form-item
:label="'种类' + (index+1)"
:prop="'typeList.' + index + '.typeCategory'"
:rules="{
required: true, message: '种类不能为空', trigger: 'blur'
}"
>
<el-select v-model="item.typeCategory" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<el-form-item
:label="'名称' + (index+1)"
:prop="'typeList.' + index + '.typeName'"
:rules="{
required: true, message: '类名不能为空', trigger: 'blur'
}"
>
<div>
<el-row :gutter="10">
<el-col :span="18">
<el-input v-model="item.typeName"></el-input>
</el-col>
<el-col :span="4">
<el-button @click.prevent="removeDomain(item)">删除</el-button>
</el-col>
</el-row>
</div>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="addDomain">新增类型</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import { insert } from "@/api/type"
export default {
data() {
return {
typefrom: {
typeList:[
{
key:Date.now(),
typeCategory:'1',
typeName:'',
companyId:this.$store.getters.companyId,
}
]
},
options: [{
value: '0',
label: '收入类别'
}, {
value: '1',
label: '支出类别'
},{
value: "2",
label: "报销类别",
}]
};
},
methods: {
//提交
submitForm() {
this.$refs.from.validate((valid) => {
if (valid) {
console.log(this.typefrom)
insert(this.typefrom.typeList).then((res)=>{
if(res.success){
this.$message.success("添加成功")
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/typeList")
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
console.log(error)
this.$message.error("添加失败")
})
} else {
console.log('error submit!!');
return false;
}
});
},
//重置
resetForm() {
this.$refs.from.resetFields();
},
removeDomain(item) {
var index = this.typefrom.typeList.indexOf(item)
if (index !== -1) {
this.typefrom.typeList.splice(index, 1)
}
},
addDomain() {
this.typefrom.typeList.push(
{
key:Date.now(),
typeName:'',
typeCategory:'1',
companyId:this.$store.getters.companyId,
}
);
},
//返回
back(){
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/typeList")
}
}
}
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
src/views/type/typeList.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<div>
<el-form :inline="true" :model="typeQurey">
<el-form-item label="类别名称">
<el-input
v-model="typeQurey.typeName"
placeholder="类别名称"
></el-input>
</el-form-item>
<el-form-item label="列别">
<el-select v-model="typeQurey.typeCategory" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()"
>查询</el-button
>
<el-button
type="primary"
icon="el-icon-refresh-right"
@click="reset()"
>重置</el-button
>
<el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addtype()"
>添加类型</el-button
>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="typeList"
style="width: 100%; text-align: center"
border
>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(typeQurey.pageNum - 1) * typeQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="typeName" label="类别名称" />
<el-table-column label="类别种类" >
<template slot-scope="scope">
<el-tag
:type="scope.row.typeCategory == '0' ? 'success' : scope.row.typeCategory == '1' ? 'danger':'warning' "
>
{{scope.row.typeCategory == '0' ? '收入类别' : scope.row.typeCategory == '1' ? '支出类别':'报销类别'}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button style="margin:5px" size="mini" icon="el-icon-edit" type="info" @click="updataType(scope.row)">修改信息</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="typeQurey.pageNum"
:page-size="typeQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { select } from "@/api/type";
export default {
data() {
return {
typeQurey: {
typeName: null,
typeCategory: null,
companyId: null,
pageNum: 1,
pageSize: 10,
},
options: [
{
value: "0",
label: "收入类别",
},
{
value: "1",
label: "支出类别",
},
{
value: "2",
label: "报销类别",
}
],
total:0,
typeList:[]
};
},
created() {
this.typeQurey.companyId = this.$store.getters.companyId
this.getTypeList()
},
methods: {
//获取种类
getTypeList(){
select(this.typeQurey).then((res)=>{
if(res.success){
this.typeList = res.data.list
this.total = res.data.total
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("查询失败")
})
},
//重置
reset() {
this.typeQurey = {
typeName: null,
typeCategory: null,
companyId: null,
pageNum: 1,
pageSize: 10,
}
this.typeQurey.companyId = this.$store.getters.companyId
this.getTypeList()
},
//添加类型
addtype() {
this.$router.push('/typeAdd')
},
//修改类型
updataType(data){
this.$router.push({
path: '/typeUpdata',
query:{
id:data.typeId,
}
})
},
//搜索
qurey(){
this.typeQurey.pageNum = 1
this.getTypeList()
},
//换页
handleCurrentChange(val){
this.typeQurey.pageNum = val
this.getTypeList()
}
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
src/views/type/typeUpdata.vue 0 → 100644
View file @ 6e137f66
<template>
<div class="container">
<el-row >
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
<el-form
:model="typedata"
:rules="rules"
ref="form"
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="类型" prop="typeName">
<el-input v-model="typedata.typeName" ></el-input>
</el-form-item>
<el-form-item label="类别" prop="typeCategory">
<el-select v-model="typedata.typeCategory" disabled >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="updateType()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="cancel()">取消</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {selectById,updata} from "@/api/type"
export default {
data() {
return {
typedata:{
typeName:null,
typeCategory:null,
},
options: [
{
value: "0",
label: "收入类别",
},
{
value: "1",
label: "支出类别",
},
{
value: "2",
label: "报销类别",
}
],
rules: {
typeName: [
{ required: true, message: "类型不能为空", trigger: "blur" },
],
typeCategory: [
{ required: true, message: "类别不能为空", trigger: "blur" },
],
},
};
},
computed: {
typeId() {
return this.$route.query.id;
},
},
created(){
this.getTypeData()
},
methods:{
//获取数据
getTypeData(){
selectById({typeId:this.typeId}).then((res)=>{
if(res.success){
this.typedata = res.data
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("查询数据失败")
})
},
//提交
updateType(){
updata(this.typedata).then((res)=>{
if(res.success){
this.$message.success("修改成功")
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/typeList")
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("修改失败")
})
},
//返回
cancel(){
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/typeList")
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
View file @ 6e137f66
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'vue Element Admin' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following method:
// port = 9527 npm run dev OR npm run dev --port = 9527
const port = process.env.port || process.env.npm_config_port || 9527 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false, // process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api':{
target: 'http://localhost:7080/', // 后台api
ws:true,
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': 'http://localhost:7080/'//请求的api
}
}
}
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
// it can improve the speed of the first screen, it is recommended to turn on preload
// it can improve the speed of the first screen, it is recommended to turn on preload
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch')
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
)
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment