You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

509 lines
16 KiB

2 years ago
<template>
<div>
1 year ago
<!-- <el-steps :active="step" align-center>-->
<!-- <el-step title="选择预算计划"> </el-step>-->
<!-- <el-step title="新增出差事项"> </el-step>-->
<!-- <el-step title="新增成功"> </el-step>-->
<!-- </el-steps>-->
<div style="padding: 20px">
1 year ago
<!-- <div v-show="step === 1">-->
<!-- <div style="display: flex;justify-content: space-between;align-items: center;">-->
<!-- <DatePicker-->
<!-- :value="planSelect.year"-->
<!-- placeholder="选择所属年份"-->
<!-- placement="bottom-start"-->
<!-- style="width: 180px;margin-right: 10px;"-->
<!-- type="year"-->
<!-- @on-change="(e) => {-->
<!-- planSelect.year = e-->
<!-- getBudgets()-->
<!-- }"-->
<!-- ></DatePicker>-->
<!-- <el-select-->
<!-- placeholder="科室选择"-->
<!-- clearable-->
<!-- size="small"-->
<!-- v-model="planSelect.plan_department_id"-->
<!-- style="width: 180px;margin-right: 10px;"-->
<!-- @change="getBudgets"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in departments"-->
<!-- :label="item.name"-->
<!-- :value="item.id"-->
<!-- :key="item.id"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- <el-cascader-->
<!-- placeholder="资金类型选择"-->
<!-- :options="planTypes"-->
<!-- :props="{-->
<!-- checkStrictly: false,-->
<!-- label: 'name',-->
<!-- value: 'id',-->
<!-- }"-->
<!-- :value="planSelect.type"-->
<!-- clearable-->
<!-- size="small"-->
<!-- style="width: 220px;margin-right: 10px;"-->
<!-- @change="(e) => {-->
<!-- planSelect.type = e[e.length - 1] || '';-->
<!-- getBudgets();-->
<!-- }"-->
<!-- />-->
<!-- <Input-->
<!-- v-model="planSelect.name"-->
<!-- search-->
<!-- enter-button="搜 索"-->
<!-- clearable-->
<!-- placeholder="搜索预算计划.."-->
<!-- @on-search="getBudgets"-->
<!-- />-->
<!-- </div>-->
1 year ago
<!-- <xy-table-->
<!-- :list="plans"-->
<!-- :show-index="false"-->
<!-- :table-item="planTable"-->
<!-- :height="boxheight"-->
<!-- style="margin-top: 10px"-->
<!-- ref="editorPlanTable"-->
<!-- row-key="id"-->
<!-- border-->
<!-- default-expand-all-->
<!-- @select="planPick"-->
<!-- :tree-props="{ children: 'notChildren', hasChildren: 'hasChildren' }"-->
<!-- >-->
<!-- <template v-slot:btns>-->
<!-- <el-table-column-->
<!-- label="使用金额(元)"-->
<!-- header-align="center"-->
<!-- width="144"-->
<!-- >-->
<!-- <template slot-scope="scope" v-if="scope.row.pid === 0">-->
<!-- <InputNumber-->
<!-- style="width: 120px"-->
<!-- :min="0"-->
<!-- :precision="2"-->
<!-- :active-change="false"-->
<!-- v-model="scope.row._inputMoney"-->
<!-- :formatter="-->
<!-- (value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')-->
<!-- "-->
<!-- :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"-->
<!-- ></InputNumber>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </template>-->
<!-- </xy-table>-->
<!-- <div style="display: flex; justify-content: flex-end">-->
<!-- <Page-->
<!-- :total="planTotal"-->
<!-- show-elevator-->
<!-- @on-change="-->
<!-- (e) => {-->
<!-- planSelect.page = e;-->
<!-- getBudgets();-->
<!-- }-->
<!-- "-->
<!-- />-->
<!-- </div>-->
<!-- <div style="text-align: center">-->
<!-- <el-button type="primary" style="margin-top: 12px" @click="() => nextStep()"-->
<!-- >下一步</el-button-->
<!-- >-->
<!-- </div>-->
<!-- </div>-->
<el-card v-show="step === 2">
1 year ago
<!-- <el-popover placement="right-start" width="660" trigger="click">-->
<!-- <xy-table-->
<!-- :list="planSelections"-->
<!-- size="mini"-->
<!-- :table-item="[-->
<!-- ...planTable.slice(1),-->
<!-- {-->
<!-- width: 120,-->
<!-- align: 'right',-->
<!-- label: '使用金额(元)',-->
<!-- prop: '_inputMoney',-->
<!-- formatter: (v1, v2, value) =>-->
<!-- `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),-->
<!-- },-->
<!-- ]"-->
<!-- :height="400"-->
<!-- style="width: 100%"-->
<!-- row-key="id"-->
<!-- border-->
<!-- :tree-props="{-->
<!-- children: 'notChildren',-->
<!-- hasChildren: 'hasChildren',-->
<!-- }"-->
<!-- >-->
<!-- <template #btns></template>-->
<!-- </xy-table>-->
<!-- <el-button-->
<!-- icon="el-icon-s-order"-->
<!-- size="small"-->
<!-- type="primary"-->
<!-- slot="reference"-->
<!-- >查看已选预算计划{{ planSelections.length }}</el-button-->
<!-- >-->
<!-- </el-popover>-->
<el-form :model="form" :rules="rules" ref="form" label-width="120px" style="margin-top: 20px;">
<el-form-item label="出差事由" prop="title">
<el-input clearable placeholder="请输入标题" v-model="form.title" style="max-width: 300px;width: 100%;"></el-input>
</el-form-item>
<!-- <el-form-item label="是否用车" prop="use_car">-->
<!-- <el-radio-group v-model="form.use_car">-->
<!-- <el-radio :label="1"></el-radio>-->
<!-- <el-radio :label="0"></el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item label="开始时间" prop="start_date">
<el-date-picker value-format="yyyy-MM-dd" clearable placeholder="请选择开始时间" style="max-width: 300px;width: 100%;" v-model="form.start_date"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="end_date">
<el-date-picker value-format="yyyy-MM-dd"
clearable
placeholder="请选择结束时间"
style="max-width: 300px;width: 100%;"
v-model="form.end_date"></el-date-picker>
</el-form-item>
<!-- <el-form-item label="是否室内补助" prop="is_subsidize">-->
<!-- <el-radio-group v-model="form.is_subsidize">-->
<!-- <el-radio :label="1"></el-radio>-->
<!-- <el-radio :label="0"></el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<div style="display: flex;justify-content: center;">
1 year ago
<!-- <el-button type="primary" plain @click="forwardStep"></el-button>-->
<el-button type="warning" plain @click="reset"></el-button>
<el-button :loading="loading" type="primary" @click="submit"></el-button>
</div>
</el-form>
</el-card>
</div>
2 years ago
</div>
</template>
<script>
import { deepCopy } from "@/utils";
1 year ago
import { save, show, index } from "@/api/away"
import {getBudget} from "@/api/budget/budget";
import {listdeptNoAuth} from "@/api/system/department";
import {getparameterTree} from "@/api/system/dictionary";
2 years ago
export default {
data() {
return {
1 year ago
window: {
width: 0,
height: 0,
top: 0,
left: 0,
},
planTypes: [],
departments: [],
2 years ago
id: "",
1 year ago
step: 2,
2 years ago
loading: false,
plans: [],
boxheight: 300,
planSelect: {
name: "",
page_size: 20,
page: 1,
is_tree: 1,
year: new Date().getFullYear().toString(),
plan_department_id: "",
type: ""
},
planTable: [
{
sortable: false,
width: 44,
type: "selection",
reserveSelection: true,
fixed: "left",
selectable: (row, index) => {
return row.pid === 0;
},
},
{
label: "科室",
prop: "plan_department.name",
width: 120,
align: "center",
},
{
label: "年份",
prop: "year",
width: 80,
align: "center",
},
{
label: "分类",
prop: "type_detail.value",
width: 120,
},
{
label: "名称",
prop: "name",
minWidth: 180,
align: "left",
},
{
label: "内容",
prop: "content",
minWidth: 200,
align: "left",
},
{
label: "计划金额",
prop: "money",
align: "right",
width: 120,
formatter: (v1, v2, value) => {
return `${(value && parseFloat(value) !== 0) ? value : v1.update_money }`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
},
{
label: "实付金额",
prop: "use_money_total",
width: 120,
align: "right",
formatter: (v1, v2, value) =>
value ? `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "",
},
{
label: "已用金额",
prop: "has_money_total",
width: 120,
align: "right",
formatter: (v1, v2, value) =>
value ? `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "",
},
],
planTotal: 0,
2 years ago
form: {
title: '',
//use_car: 0,
2 years ago
start_date: '',
end_date: '',
//is_subsidize: 0,
// use_car_status: 1,
// subsidize_status: 1,
2 years ago
expense_status: 1,
away_status: 1,
away_plan_links: []
2 years ago
},
copyForm: {
},
rules: {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' },
],
start_date: [
{ required: true, message: '请选择开始时间', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (this.form.end_date && this.form.start_date) {
1 year ago
if (this.$moment(this.form.end_date).isAfter(this.form.start_date) || (this.form.end_date === this.form.start_date)) {
2 years ago
callback()
} else {
callback(new Error('结束时间不能小于开始时间'))
}
} else {
callback()
}
}
}
],
end_date: [
{ required: true, message: '请选择结束时间', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (this.form.end_date && this.form.start_date) {
1 year ago
if (this.$moment(this.form.end_date).isAfter(this.form.start_date) || (this.form.end_date === this.form.start_date)) {
2 years ago
callback()
} else {
callback(new Error('结束时间不能小于开始时间'))
}
} else {
callback()
}
}
}
],
}
}
},
methods: {
1 year ago
goAway (row) {
const baseInfo = {
"flow_title": row.title,
"chuchaikaishiriqi": row.start_date,
"chuchaijieshuriqi": row.end_date,
"chuchaishiyou": row.title,
};
let url = `${process.env.VUE_APP_OUT_OLD}/flow/create/58?auth_token=${this.$store.getters.oa_token}&out_away_id=${
row.id
}&default_json=${JSON.stringify(baseInfo)}`;
window.open(
url,
"buyProcess",
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
);
},
forwardStep () {
this.step = this.step > 1 ? this.step - 1 : this.step;
},
nextStep () {
if (this.step === 1) {
const selections = this.$refs["editorPlanTable"].getSelection();
if (selections?.length > 0) {
for (let i of selections) {
if (i._inputMoney <= 0) {
this.$message({
type: "warning",
message: `${i.year}${i.name} 使用金额需要大于0`,
});
return;
}
if (i._inputMoney > ((Number(i.money) || Number(i.update_money)) - Number(i.has_money_total))) {
this.$message({
type: "warning",
message: `${i.year}${i.name} 使用金额大于剩余预算!`,
});
return;
}
}
this.form.away_plan_links = selections.map((i) => ({
plan_id: i.id,
use_money: i._inputMoney,
new_money: i.money,
}));
this.step = 2;
} else {
this.$message({
type: "warning",
message: "请先选择预算计划!",
});
}
}
},
planPick (selection, row) {
if (row.year != new Date().getFullYear()) {
this.$confirm("您选择了非本年预算,是否继续?").catch(_ => {
this.$refs['editorPlanTable'].toggleRowSelection(row)
})
}
},
//获取预算计划
async getBudgets() {
let res = await getBudget(this.planSelect);
res.list.forEach((item) => (item._inputMoney = 0));
this.plans = res.list;
this.planTotal = res.list.total || 0;
},
getDepartment() {
listdeptNoAuth().then((res) => {
this.departments = res;
});
},
async getPlanTypes() {
const res = await getparameterTree({
id: 3
});
const dataHandler = (data) => {
data.forEach(i => {
if (i.hasOwnProperty('detail')) {
i.children = i.detail.map(j => {
j.name = j.value
return j;
})
} else {
dataHandler(i['children'])
}
})
return data;
}
this.planTypes = dataHandler(res?.children) || []
},
2 years ago
init () {
this.copyForm = deepCopy(this.form)
this.getBudgets()
this.getDepartment()
this.getPlanTypes()
this.boxheight = document.documentElement.clientHeight - 400;
2 years ago
},
reset () {
this.$set(this, "form", this.copyForm)
//this.form = deepCopy(this.copyForm)
this.$refs["editorPlanTable"].clearSelection()
2 years ago
this.$nextTick(() => this.$refs.form.clearValidate())
},
submit () {
this.loading = true
this.$refs.form.validate((valid) => {
if (valid) {
// this.form.use_car_status = this.form.use_car ? 1 : "";
// this.form.subsidize_status = this.form.is_subsidize ? 1 : "";
1 year ago
save(this.form,true).then(async(res) => {
2 years ago
this.loading = false
this.$message({
message: '提交成功',
type:'success'
})
1 year ago
const list = await index({
page: 1,
page_size: 1,
sort_name: 'created_at'
})
this.goAway(list.data[0])
2 years ago
setTimeout(() => {
this.$router.push("/contract/away")
},500)
}).catch(err => {
this.loading = false
})
} else {
return false
}
})
}
},
computed: {
planSelections() {
let temp = this.form.away_plan_links;
return this.$refs["editorPlanTable"]?.getSelection() || [];
},
},
2 years ago
created() {
1 year ago
this.window.width = screen.availWidth * 0.95;
this.window.height = screen.availHeight * 0.95;
this.window.top = (window.screen.height - 30 - this.window.height) / 2;
this.window.left = (window.screen.width - 10 - this.window.width) / 2;
2 years ago
this.init();
}
}
</script>
<style scoped lang="scss">
</style>