<basic-container>
<div @click="printAudi" class="link">
<div class="box">
<div>
<img src="@/assets/index/4.png" alt />
</div>
<p>用印申请</p>
</div>
</div>
</basic-container>
<!-- 用印申请 -->
<FileAudi :dialogAudiVisible.sync="dialogAudiVisible" v-if="dialogAudiVisible" @close="closePrintAudiDialog()"></FileAudi>
printAudi() {
this.dialogAudiVisible = true;
},
closePrintAudiDialog() {
this.dialogAudiVisible = false;
},
---------------------------------------------------------------------------------------------------------------------------------------------------------------fileAudi.vue
<template>
<el-dialog
title="用印申请"
:visible.sync="dialogAudiVisible"
@close="dialogClose"
:modal="false"
width="800px"
center
append-to-body
>
<el-form ref="form" :model="form" label-width="200px">
<el-form-item label="项目文件" required>
<el-switch v-model="isProject" active-text="是" inactive-text="否" @change="printTypeChange"></el-switch>
</el-form-item>
<el-form-item label="选择项目" required v-show="isProject">
<el-select style=" 450px" v-model="form.projectUid" @change="projectChange">
<el-option
style=" 400px"
v-for="item in projectList"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="项目文件夹" required v-show="isProject">
<el-tree :default-expand-all="defaultExpandAll" :data="documentTree" @node-click="nodeClick"></el-tree>
</el-form-item>
<el-form-item>
<el-checkbox v-model="signature">使用电子签章</el-checkbox>
</el-form-item>
<el-form-item label="上传文件" required>
<span v-show="isProject" style="color:red">请先选择项目和文件夹目录，否则无法上传</span>
<el-upload
:file-list="form.fileList"
:action="upFileUrl"
:headers="uploadHeaders"
:data="uploadParams"
:on-remove="uploadRemove"
:on-success="uploadSucc"
:on-error="uploadError"
:disabled="isProject && !form.fileCatalogue"
>
<el-button type="success">上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="盖章份数" required>
<el-input-number v-model="form.num" :min="2" label="份数"></el-input-number>
</el-form-item>
<el-form-item label="流程" required>
<el-select style=" 60%" v-model="form.flowConfigId" placeholder="请选择流程" @change="flowChange">
<el-option
v-for="item in applyRecordOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="审批人" required>
<SelectEmployee v-model="form.auditUserList" :roleType="1"></SelectEmployee>
</el-form-item>
<el-form-item label="抄送人">
<SelectEmployee v-model="form.forUsersList" :roleType="1"></SelectEmployee>
</el-form-item>
<el-form-item label="备注">
<el-input
type="textarea"
v-model="form.remark"
style=" 60%"
:autosize="{ minRows: 4, maxRows: 4 }"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogClose" size="small">取 消</el-button>
<el-button
type="primary"
style=" @click="submitAudit"
size="small"
>提 交</el-button>
</span>
</el-dialog>
</template>
<script>
import * as Api from "@/api/Project/project-management";
import { getTreeLawFirm, queryPathFile } from "@/api/document/index";
import { getProjectLsit } from "@/api/home";
import { flowConfigAsync, initiateProcess } from "@/api/Project/process";
import { getToken } from "@/util/auth";
import SelectEmployee from "@/components/SelectEmployee";
import { fileUrl } from "@/config/env";
const projectUploadUrl = `${fileUrl}/api/UpProject`;
const freeUploadUrl = `${fileUrl}/api/Up`;
const defaultForm = {
projectUid: undefined,
fileCatalogue: undefined,
flowConfigId: undefined,
fileList: [],
num: 1,
auditUserList: undefined,
forUsersList: undefined,
remark: undefined
};
export default {
props: {
dialogAudiVisible: Boolean
},
components: {
SelectEmployee
},
data() {
return {
uploadHeaders: {
Authorization: "Bearer " + getToken()
},
upFileUrl: freeUploadUrl,
projectList: [],
applyRecordOptions: [],
documentTree: [],
defaultExpandAll:true,
uploadParams: {},
isProject: false,
defaultFlowConfigId: undefined,
form: {
...defaultForm
},
signature: false
};
},
methods: {
nodeClick(data) {
if (
data.children &&
Array.isArray(data.children) &&
data.children.length === 0
) {
this.form.fileCatalogue = data;
this.uploadParams = { ...this.uploadParams, sort: data.id };
} else {
this.form.fileCatalogue = undefined;
this.uploadParams.sort = "";
}
},
dialogClose() {
this.form = { ...defaultForm, flowConfigId: this.defaultFlowConfigId };
this.$emit("close");
},
// 获取所有项目
getAllSelproject() {
getProjectLsit().then(r => {
const { data } = r;
if (data.Code === 200) {
const list = data.Data;
list.forEach(item => {
item.label = item.ProjectName;
item.value = item.Uid;
});
this.projectList = list;
} else {
this.$message.error("获取项目列表失败");
}
});
},
getFlowTypeList() {
const params = {
FlowTypeCode: "Chapter"
};
flowConfigAsync(params).then(({ data }) => {
const res = data.Data.Items || [];
this.applyRecordOptions = res.map(val => {
return {
value: val.Uid,
label: val.FlowName,
FlowJson: val.FlowJson,
};
});
if (res.length !== 0) {
this.defaultFlowConfigId = res[0].Uid;
this.form.flowConfigId = res[0].Uid;
this.flowChange(this.defaultFlowConfigId)
}
});
},
setTreeProject(params) {
Api.getTreeProject(params).then(
r => {
if (r.data && r.data.Code === 200 && r.data.Data) {
this.documentTree = [r.data.Data];
} else {
this.documentTree = [];
this.$message.error("获取项目文件树失败！");
}
},
e => {
this.documentTree = [];
this.$message.error("获取项目文件树失败！");
}
);
},
// 文件上传成功后
uploadSucc(res, file) {
if (res && res.Data && res.Data.uid) {
this.form.fileList = [res.Data];
this.$message.success("上传成功");
} else {
this.$message.error("上传失败,接口异常");
}
},
// 上传失败
uploadError(res, file) {
this.$message.error("上传文件失败!");
},
// 删除上传文件
uploadRemove(file, fileList) {
let { uid } = file;
this.form.fileList = this.form.fileList.filter(v => v.uid !== uid);
},
// 选择项目
projectChange(val) {
this.setTreeProject({ pro: val });
this.uploadParams = { ...this.uploadParams, pro: val };
this.form = Object.assign({},this.form,{
projectUid: val,
fileCatalogue: undefined,
flowConfigId: this.defaultFlowConfigId,
fileList: [],
num: 1,
// auditUserList: undefined,
// forUsersList: undefined,
// remark: undefined
});
},
printTypeChange(val) {
val
? (this.upFileUrl = projectUploadUrl)
: (this.upFileUrl = freeUploadUrl);
this.documentTree = [];
this.form = Object.assign({},this.form,{
projectUid: undefined,
fileCatalogue: undefined,
flowConfigId: this.defaultFlowConfigId,
fileList: [],
num: 1,
// auditUserList: undefined,
// forUsersList: undefined,
// remark: undefined
});
},
submitAudit() {
let {
projectUid,
fileCatalogue,
flowConfigId,
fileList = [],
num,
auditUserList = [],
forUsersList = [],
remark
} = this.form;
if (!fileList || fileList.length === 0) {
this.$message.error("请上传文件");
return;
}
if (!flowConfigId) {
this.$message.error("请选择流程！");
return;
}
if (!num || num < 1) {
this.$message.error("请输入份数！");
return;
}
const fileListId = fileList.map(item => {
return item.value;
});
const formViewJson = {
fileld: fileListId.join(),
copies: num,
numner: null,
detail: JSON.stringify(fileList),
type: null,
isProject: this.isProject,
...this.form
};
const auditUsersId = auditUserList.map(item => {
return item.value;
});
const auditUsersName = auditUserList.map(item => {
return item.label;
});
const forUsersId = forUsersList.map(item => {
return item.value;
});
const forUsersName = forUsersList.map(item => {
return item.label;
});
const params = {
flowName: "用印申请",
flowConfigId,
auditUsersId: auditUsersId.join(),
auditUsersName: auditUsersName.join(),
forUsersId: forUsersId.join(),
forUsersName: forUsersName.join(),
remark,
type: "Chapter",
formViewJson: JSON.stringify(formViewJson)
};
initiateProcess(params).then(
res => {
if (res.data.Code === 200) {
this.$message.success("提交成功！");
this.$emit("close");
} else {
this.$message.error("提交失败！");
}
},
e => {
this.$message.error("提交失败,接口异常！");
}
);
},
flowChange(val){
this.applyRecordOptions.filter(item=>{
if(val == item.value){ //当前选中的流程id匹配
let FlowJson;
try{
FlowJson = eval(item.FlowJson)
}catch{
FlowJson = []
}
if(FlowJson.length){
let currentUser = FlowJson.find(m=>m.FlowNodeId === 1)
if(currentUser && currentUser.FlowUserName.length && currentUser.FlowUserID.length){
let newArr = currentUser.FlowUserID.map((j,k)=>{
return {
value: j,
label: currentUser.FlowUserName[k]
}
})
// this.approveForm.splice(0, this.approveForm.length, ...newArr)
// this.form.auditUserList.splice(0,0,newArr)
this.form.auditUserList = newArr
}else{
this.form.auditUserList = []
}
}
}
})
},
},
created() {
this.getAllSelproject();
this.getFlowTypeList();
}
};
</script>
<style scoped lang="scss">
</style>