653 lines
19 KiB
Vue
653 lines
19 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-header>
|
||
<el-steps
|
||
:active="active"
|
||
style="width: 100%"
|
||
:align-center="true"
|
||
finish-status="success"
|
||
>
|
||
<el-step
|
||
v-for="(item, index) of stepTitle"
|
||
:key="index"
|
||
:title="item"
|
||
style="50%"
|
||
@click="handleStep(index)"
|
||
>
|
||
</el-step>
|
||
</el-steps>
|
||
</el-header>
|
||
<!--基本信息!-->
|
||
<el-main class="nopadding" v-show="active === 0">
|
||
<el-form
|
||
ref="dialogForm"
|
||
:model="rpjform"
|
||
:rules="rules"
|
||
label-width="110px"
|
||
style="margin: 40px 40px 40px 40px"
|
||
>
|
||
<el-row>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="rpjform.name" type="text" clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="项目类型" prop="type">
|
||
<el-select v-model="rpjform.type" style="width: 100%">
|
||
<el-option
|
||
v-for="item in typeOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="合同编号" prop="contract_number">
|
||
<el-input
|
||
v-model="rpjform.contract_number"
|
||
type="text"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="进厂时间" prop="come_time">
|
||
<el-date-picker
|
||
v-model="rpjform.come_time"
|
||
type="datetime"
|
||
placeholder="选择结束时间"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="离厂时间" prop="leave_time">
|
||
<el-date-picker
|
||
v-model="rpjform.leave_time"
|
||
type="datetime"
|
||
placeholder="选择结束时间"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="所属部门" prop="belong_dept">
|
||
<el-cascader
|
||
v-model="rpjform.belong_dept"
|
||
:options="deptoptions"
|
||
:props="{
|
||
expandTrigger: 'hover', // 次级菜单的展开方式
|
||
label: 'label', //
|
||
value: 'value', //
|
||
emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
|
||
checkStrictly: true,
|
||
}"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
</el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :md="24" :sm="12" :xs="24" v-if="rparty_show">
|
||
<el-form-item label="相关方" prop="rparty">
|
||
<el-select v-model="rpjform.rparty" style="width: 100%">
|
||
<el-option
|
||
v-for="item in rpartyOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item>
|
||
<el-button
|
||
style="margin-top: 20px"
|
||
type="primary"
|
||
@click="handleNextStep"
|
||
>下一步
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-main>
|
||
|
||
<!--安全审核项目!-->
|
||
<el-main class="nopadding" v-show="active === 1">
|
||
<scTable
|
||
ref="fileTable"
|
||
:data="rpjfileList"
|
||
row-key="id"
|
||
hidePagination
|
||
hideDo
|
||
stripe
|
||
style="height: 300px"
|
||
>
|
||
<el-table-column
|
||
label="#"
|
||
fixed="left"
|
||
type="index"
|
||
width="50"
|
||
></el-table-column>
|
||
<el-table-column label="资质内容" prop="name">
|
||
<template #default="scope">
|
||
{{ scope.row.file_cate_.name }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="文件资料" prop="name">
|
||
<template #default="scope">
|
||
<div v-for="item in scope.row.files_" :key="item.id">
|
||
<el-link
|
||
style="font-size: 12px"
|
||
type="primary"
|
||
:href="item.path"
|
||
target="_blank"
|
||
>{{ item.name }}</el-link
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" fixed="right" align="center" width="200">
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
type="primary"
|
||
size="small"
|
||
@click="upload(scope.row, scope.$index)"
|
||
><span v-if="scope.row.files.length >= 1" style="color: red"
|
||
>重传</span
|
||
>
|
||
<span v-else>上传</span>
|
||
</el-button>
|
||
<!-- <el-popconfirm
|
||
title="确定删除吗？"
|
||
@confirm="del_rpjfile(scope.row)"
|
||
>
|
||
<template #reference>
|
||
<el-button link type="danger" size="small">删除</el-button>
|
||
</template>
|
||
</el-popconfirm> -->
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
<div style="margin-top: 20px; text-align: center">
|
||
<el-button style="margin-right: 4px" @click="handleLastStep"
|
||
>上一步
|
||
</el-button>
|
||
<el-button type="primary" @click="handleNextStep">下一步 </el-button>
|
||
</div>
|
||
<el-dialog v-model="dialogupload" draggable title="上传文件">
|
||
<el-form ref="dialogfileForm" :model="fileform" label-width="120px">
|
||
<el-row>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="上传文件">
|
||
<sc-upload-file
|
||
v-model="fileform.files"
|
||
:on-success="success"
|
||
:multiple="true"
|
||
:limit="10"
|
||
tip="最多上传10个文件,单个文件不要超过10M"
|
||
>
|
||
<el-button type="primary" icon="el-icon-upload"> </el-button>
|
||
</sc-upload-file>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="dialogupload = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitFile">确 定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</el-main>
|
||
<!--选择人员!-->
|
||
<el-main class="nopadding" v-show="active === 2">
|
||
<div class="left-panel" style="margin: 10px">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
@click="addworker"
|
||
></el-button>
|
||
</div>
|
||
<scTable
|
||
ref="workerTable"
|
||
:data="apiworkerObj"
|
||
row-key="id"
|
||
hidePagination
|
||
hideDo
|
||
stripe
|
||
style="height: 300px"
|
||
>
|
||
<el-table-column
|
||
label="#"
|
||
fixed="left"
|
||
type="index"
|
||
width="50"
|
||
></el-table-column>
|
||
<el-table-column label="姓名" prop="name" width="150">
|
||
<template #default="scope">
|
||
{{ scope.row.remployee_.name }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="工作职责" prop="duty" width="150">
|
||
</el-table-column>
|
||
<el-table-column label="证书" prop="rcertificates" width="150">
|
||
<template #default="scope">
|
||
<el-tag
|
||
v-for="item in scope.row.rcertificates_"
|
||
:key="item.number"
|
||
:label="item.name"
|
||
:value="item.number"
|
||
>{{ item.name }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否项目负责人" prop="is_manager" width="150">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.is_manager">是</span>
|
||
<span v-else>否</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="创建时间"
|
||
prop="create_time"
|
||
width="150"
|
||
></el-table-column>
|
||
<el-table-column label="操作" fixed="right" align="center" width="200">
|
||
<template #default="scope">
|
||
<el-popconfirm
|
||
title="确定删除该人员吗？"
|
||
@confirm="delWorker(scope.row)"
|
||
>
|
||
<template #reference>
|
||
<el-button text type="danger" size="small">删除</el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
<el-dialog v-model="workerdialog" draggable title="选择项目人员">
|
||
<el-form ref="workerForm" :model="formworker" label-width="120px">
|
||
<el-row>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="项目人员">
|
||
<el-select
|
||
v-model="formworker.remployee"
|
||
@change="selectWorker"
|
||
filterable
|
||
placeholder="选择项目人员"
|
||
>
|
||
<el-option
|
||
v-for="item in remployeeoptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="是否项目负责人">
|
||
<el-radio-group v-model="formworker.is_manager">
|
||
<el-radio :label="true">是</el-radio>
|
||
<el-radio :label="false">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="工作职责">
|
||
<el-input
|
||
v-model="formworker.duty"
|
||
type="text"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="证书">
|
||
<el-select
|
||
v-model="formworker.rcertificates"
|
||
multiple
|
||
placeholder="选择证书"
|
||
>
|
||
<el-option
|
||
v-for="item in certificatesOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="workerdialog = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitWorker">确 定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<div style="margin-top: 20px; text-align: center">
|
||
<el-button @click="handleLastStep" style="margin-right: 4px"
|
||
>上一步</el-button
|
||
>
|
||
<el-button
|
||
v-for="item in initForm.transitions"
|
||
:key="item.id"
|
||
type="primary"
|
||
@click="submitTicketCreate(item.id)"
|
||
style="margin-right: 4px"
|
||
>{{ item.name }}</el-button
|
||
>
|
||
<el-button @click="submitOut" type="warning">退出</el-button>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<style scoped>
|
||
.clearfix {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.box-card p {
|
||
line-height: 20px;
|
||
}
|
||
|
||
.content {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.stepSuc:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.stepErr:hover {
|
||
cursor: not-allowed;
|
||
}
|
||
</style>
|
||
<script>
|
||
import { genTree } from "@/utils/verificate";
|
||
|
||
const defaultformworker = {
|
||
duty: "",
|
||
rcertificates: [],
|
||
rpj: "",
|
||
};
|
||
export default {
|
||
name: "rpjadd",
|
||
components: {},
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
stepSuc: [0],
|
||
stepTitle: ["基本信息", "安全审核项目", "选择人员"],
|
||
query: {},
|
||
selection: [],
|
||
issave: false, //控制基本信息提交
|
||
search: {
|
||
keyword: null,
|
||
},
|
||
rpjId: "",
|
||
rpjform: {},
|
||
rpartyOptions: [],
|
||
deptoptions: [],
|
||
typeOptions: [
|
||
{ id: 10, name: "建筑施工" },
|
||
{ id: 20, name: "设备设施检维修" },
|
||
{ id: 30, name: "保安保洁服务" },
|
||
{ id: 40, name: "其他" },
|
||
],
|
||
rpjfileList: [],
|
||
dialogupload: false,
|
||
fileform: {
|
||
id: "",
|
||
files: [],
|
||
},
|
||
filelist: [],
|
||
remployeeoptions: [],
|
||
certificatesOptions: [],
|
||
formworker: defaultformworker,
|
||
apiworkerObj: [],
|
||
workerdialog: false,
|
||
initForm: {},
|
||
rparty_show: false,
|
||
rules: {
|
||
name: [{ required: true, message: "请输入" }],
|
||
type: [{ required: true, message: " 请选择" }],
|
||
contract_number: [{ required: true, message: "请输入" }],
|
||
come_time: [{ required: true, message: "请选择" }],
|
||
leave_time: [{ required: true, message: "请选择" }],
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.rpjId = this.$route.query.rpjid; //作业ID
|
||
this.rpartyShow();
|
||
if (this.rpjId) {
|
||
this.getRpj();
|
||
}
|
||
this.getDept();
|
||
this.getInit();
|
||
},
|
||
methods: {
|
||
rpartyShow() {
|
||
var userInfo = this.$TOOL.data.get("USER_INFO");
|
||
if (userInfo.type == "employee") {
|
||
this.rparty_show = true;
|
||
this.getRpartyOptions();
|
||
}
|
||
},
|
||
//入厂项目基本信息
|
||
getRpj() {
|
||
console.log(this.$route.query.rpjid);
|
||
this.$API.rpm.rpj.read.req(this.rpjId).then((res) => {
|
||
this.rpjform = res;
|
||
});
|
||
},
|
||
//所属部门
|
||
getDept() {
|
||
this.$API.system.dept.list
|
||
.req({ page: 0, type__in: "dept" })
|
||
.then((res) => {
|
||
this.deptoptions = genTree(res);
|
||
});
|
||
},
|
||
//文件列表加载
|
||
getRpjfileList() {
|
||
this.$API.rpm.rpjfile.list
|
||
.req({ page: 0, rpj: this.rpjId })
|
||
.then((res) => {
|
||
this.rpjfileList = res;
|
||
});
|
||
},
|
||
//相关方
|
||
getRpartyOptions() {
|
||
this.$API.rpm.rparty.list.req({ page: 0 }).then((res) => {
|
||
this.rpartyOptions = res;
|
||
});
|
||
},
|
||
handleStep(val) {
|
||
//点击步骤条
|
||
if (this.stepSuc.includes(val) === true) {
|
||
this.active = val;
|
||
}
|
||
},
|
||
//组件点击上一步
|
||
handleLastStep() {
|
||
if (--this.active === 0) {
|
||
this.active = 0;
|
||
}
|
||
},
|
||
//组件点击下一步
|
||
handleNextStep() {
|
||
if (this.active == 0) {
|
||
this.$refs.dialogForm.validate(async (valid) => {
|
||
if (valid) {
|
||
if (this.rpjId) {
|
||
this.$API.rpm.rpj.update
|
||
.req(this.rpjId, this.rpjform)
|
||
.then((res) => {
|
||
this.$message.success("基本信息更新成功！");
|
||
this.getRpjfileList();
|
||
this.getmemberList();
|
||
this.getremployee();
|
||
this.active = 1;
|
||
});
|
||
} else {
|
||
this.$API.rpm.rpj.create.req(this.rpjform).then((res) => {
|
||
this.$message.success("项目创建成功！");
|
||
this.rpjId = res.id;
|
||
this.rpjform.rparty = res.rparty;
|
||
this.getRpjfileList();
|
||
this.getmemberList();
|
||
this.getremployee();
|
||
this.active = 1;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
} else if (this.active == 1) {
|
||
this.active = 2;
|
||
} else {
|
||
this.active = 2;
|
||
}
|
||
// this.stepSuc.push(++this.active)
|
||
},
|
||
//退出界面
|
||
submitOut() {
|
||
this.$router.push("rpj");
|
||
},
|
||
//删除文件项
|
||
del_rpjfile(row) {
|
||
this.$API.rpm.rpjfile.delete
|
||
.req(row.id)
|
||
.then((res) => {
|
||
this.$message.success("删除成功!");
|
||
|
||
return res;
|
||
})
|
||
.catch((err) => {
|
||
return err;
|
||
});
|
||
},
|
||
//上传文件
|
||
upload(row) {
|
||
this.dialogupload = true;
|
||
this.fileform.id = row.id;
|
||
},
|
||
|
||
success(res) {
|
||
this.filelist.push(res.id);
|
||
},
|
||
|
||
//提交上传
|
||
submitFile() {
|
||
this.fileform.files = this.filelist;
|
||
this.$API.rpm.rpjfile.update
|
||
.req(this.fileform.id, this.fileform)
|
||
.then((res) => {
|
||
this.$message.success("提交成功!");
|
||
this.dialogupload = false;
|
||
this.rpjfileList = [];
|
||
this.getRpjfileList();
|
||
return res;
|
||
})
|
||
.catch((err) => {
|
||
return err;
|
||
});
|
||
},
|
||
//调出项目人员列表
|
||
getremployee() {
|
||
this.$API.rpm.remployee.list.req({ page: 0, rparty: this.rpjform.rparty }).then((res) => {
|
||
this.remployeeoptions = res;
|
||
});
|
||
},
|
||
|
||
//选择人员后，调出该人员的所有证书
|
||
selectWorker() {
|
||
this.$API.rpm.rcertificate.list
|
||
.req({ remployee: this.formworker.remployee, page: 0 })
|
||
.then((res) => {
|
||
this.certificatesOptions = res;
|
||
});
|
||
},
|
||
//作业人员列表
|
||
|
||
getmemberList() {
|
||
this.$API.rpm.member.list
|
||
.req({ rpj: this.rpjId, page: 0 })
|
||
.then((res) => {
|
||
this.apiworkerObj = res;
|
||
console.log(res);
|
||
});
|
||
},
|
||
//创建作业人员，显示Form
|
||
addworker() {
|
||
this.workerdialog = true;
|
||
|
||
this.formworker = Object.assign({}, defaultformworker);
|
||
},
|
||
|
||
//删除作业人员
|
||
delWorker(row) {
|
||
this.$API.rpm.member.delete
|
||
.req(row.id)
|
||
.then((res) => {
|
||
this.$message.success("作业人员删除成功");
|
||
this.getmemberList();
|
||
return res;
|
||
})
|
||
.catch((err) => {
|
||
return err;
|
||
});
|
||
},
|
||
//提交作业人员信息
|
||
submitWorker() {
|
||
this.formworker.rpj = this.rpjId;
|
||
this.$refs.workerForm.validate(async (valid) => {
|
||
this.$API.rpm.member.create
|
||
.req(this.formworker)
|
||
.then((res) => {
|
||
this.$message.success("创建项目人员成功");
|
||
this.workerdialog = false;
|
||
this.getmemberList();
|
||
})
|
||
.catch((err) => {
|
||
return err;
|
||
});
|
||
});
|
||
},
|
||
|
||
//渲染工单提交按钮
|
||
getInit() {
|
||
this.$API.wf.workflow.initkey.req("rpj").then((res) => {
|
||
this.initForm = res;
|
||
});
|
||
},
|
||
|
||
//提交,创建工单
|
||
submitTicketCreate(id) {
|
||
let ticket = {};
|
||
ticket.workflow = this.initForm.workflow;
|
||
ticket.ticket_data = { rpj: this.rpjId };
|
||
ticket.transition = id;
|
||
this.$API.wf.ticket.create.req(ticket).then((res) => {
|
||
this.$message.success("提交成功");
|
||
this.$router.push({
|
||
name: "rpj",
|
||
query: {},
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|