448 lines
12 KiB
Vue
448 lines
12 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="form"
|
|
:rules="rules"
|
|
:disabled="mode == 'show'"
|
|
label-width="100px"
|
|
style="margin: 40px 40px 40px 40px"
|
|
>
|
|
<el-row>
|
|
<el-col :md="8" :sm="12" :xs="24">
|
|
<el-form-item label="来访概述">
|
|
<el-input v-model="form.name" type="text" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :md="8" :sm="12" :xs="24">
|
|
<el-form-item label="来访时间">
|
|
<el-date-picker
|
|
v-model="form.visit_time"
|
|
type="datetime"
|
|
placeholder="选择来访时间"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :md="8" :sm="12" :xs="24">
|
|
<el-form-item label="离开时间">
|
|
<el-date-picker
|
|
v-model="form.leave_time"
|
|
type="datetime"
|
|
placeholder="选择离开时间"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :md="8" :sm="12" :xs="24">
|
|
<el-form-item label="来访单位">
|
|
<el-input v-model="form.company" type="text" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="8" :sm="24" :xs="24">
|
|
<el-form-item label="来访级别">
|
|
<el-radio-group v-model="form.level">
|
|
<el-radio-button label="10">一般</el-radio-button>
|
|
<el-radio-button label="20">重要</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="8" :sm="12" :xs="24">
|
|
<el-form-item label="来访人数">
|
|
<el-input-number
|
|
v-model="form.count_people"
|
|
:min="0"
|
|
:max="32767"
|
|
controls-position="right"
|
|
></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="8" :sm="12" :xs="24">
|
|
<el-form-item label="来访事由">
|
|
<el-select v-model="form.purpose" placeholder="选择来访事由">
|
|
<el-option
|
|
v-for="item in purposeoptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="16" :sm="12" :xs="24">
|
|
<el-form-item label="来访详述">
|
|
<el-input
|
|
v-model="form.description"
|
|
type="text"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="8" :sm="24" :xs="24">
|
|
<el-form-item label="接待人">
|
|
<el-select
|
|
v-model="form.receptionist"
|
|
disabled
|
|
placeholder="选择接待人"
|
|
>
|
|
<el-option
|
|
v-for="item in receptionistoptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
<select-user
|
|
ref="form.receptionist"
|
|
:user="form.receptionist"
|
|
:closable="true"
|
|
:multiple="false"
|
|
@submit="refresh"
|
|
>
|
|
</select-user>
|
|
</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: 12px" @click="handleNextStep"
|
|
>下一步</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-main>
|
|
|
|
<!--选择人员!-->
|
|
<el-main class="nopadding" v-show="active === 1">
|
|
<div class="left-panel">
|
|
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
|
</div>
|
|
<scTable
|
|
ref="table"
|
|
:data="peoplelist"
|
|
row-key="id"
|
|
height='auto'
|
|
stripe
|
|
hideDo
|
|
hidePagination
|
|
|
|
>
|
|
<el-table-column
|
|
label="#"
|
|
fixed="left"
|
|
type="index"
|
|
width="50"
|
|
></el-table-column>
|
|
|
|
<el-table-column
|
|
label="访客姓名"
|
|
prop="visitor_.name"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="访客手机号"
|
|
prop="visitor_.phone"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="访客身份证号"
|
|
prop="visitor_.id_number"
|
|
></el-table-column>
|
|
<el-table-column label="是否重要访客" prop="is_main">
|
|
<template #default="scope"
|
|
><el-space v-if="scope.row.is_main == true">是</el-space>
|
|
<el-space v-else>否</el-space>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" prop="create_time"></el-table-column>
|
|
<el-table-column label="操作" fixed="right" align="left" width="170">
|
|
<template #default="scope">
|
|
<el-button-group>
|
|
<el-button
|
|
text
|
|
type="primary"
|
|
size="small"
|
|
@click="table_del(scope.row)"
|
|
>删除</el-button
|
|
>
|
|
</el-button-group>
|
|
</template>
|
|
</el-table-column>
|
|
</scTable>
|
|
<sc-dialog v-model="dialogpeople" draggable title="创建来访人员">
|
|
<el-form
|
|
ref="dialofrom"
|
|
:model="formpeople"
|
|
:rules="rules"
|
|
:disabled="mode === 'show'"
|
|
label-width="120px"
|
|
>
|
|
<el-row>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="访客姓名" prop="visitor">
|
|
<el-select
|
|
v-model="formpeople.visitor"
|
|
placeholder="选择接待人"
|
|
>
|
|
<el-option
|
|
v-for="item in visitoroptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="是否主访客" prop="is_main">
|
|
<el-radio-group v-model="formpeople.is_main">
|
|
<el-radio-button label="true">是</el-radio-button>
|
|
<el-radio-button label="false">否</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogpeople = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitpeople">确 定</el-button>
|
|
</template>
|
|
</sc-dialog>
|
|
|
|
<span> <el-button style="margin-top: 20px" @click="handleLastStep"
|
|
>上一步</el-button
|
|
> </span>
|
|
<span v-for=" item in initform.transitions" :key="item.id">
|
|
<el-button style="margin-top: 20px" @click="submitticket(item.id)"
|
|
>{{item.name}}</el-button
|
|
>
|
|
|
|
</span>
|
|
<span>
|
|
<el-button style="margin-top: 20px" @click="submitOut">退出</el-button> </span>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
<style scoped>
|
|
.left-panel{
|
|
margin:10px
|
|
}
|
|
.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";
|
|
import selectUser from "@/layout/components/userselect";
|
|
|
|
const defaultformworker = {
|
|
duty: "",
|
|
rcertificates: [],
|
|
rpj: "",
|
|
};
|
|
export default {
|
|
name: "vistoradd",
|
|
components: { selectUser },
|
|
data() {
|
|
return {
|
|
active: 0,
|
|
stepSuc: [0],
|
|
form: [],
|
|
stepTitle: ["基本信息", "选择访客"],
|
|
receptionistoptions: [],
|
|
purposeoptions: [
|
|
{ id: 10, name: "参观" },
|
|
{ id: 20, name: "拜访" },
|
|
{ id: 30, name: "面试" },
|
|
{ id: 40, name: "开会" },
|
|
],
|
|
search: {
|
|
keyword: null,
|
|
},
|
|
dialog: {
|
|
save: false,
|
|
permission: false,
|
|
},
|
|
apiObj: this.$API.vm.visit.list,
|
|
query: {},
|
|
selection: [],
|
|
dialogpeople: false,
|
|
formpeople: {
|
|
id: "",
|
|
visit: "",
|
|
},
|
|
visitoroptions: [],
|
|
peoplelist: [],
|
|
initform:[],
|
|
ticket:{},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.visitid = this.$route.query.visitid; //作业ID
|
|
this.getRpj();
|
|
this.getUser();
|
|
this.getpeoplelistlist();
|
|
this.getvisitorlist();
|
|
},
|
|
methods: {
|
|
//访问项目基本信息
|
|
getRpj() {
|
|
this.$API.vm.visit.read.req(this.visitid).then((res) => {
|
|
this.form = res;
|
|
});
|
|
},
|
|
//接待人
|
|
getUser() {
|
|
this.$API.system.user.list.req({ page: 0 }).then((res) => {
|
|
this.receptionistoptions = res;
|
|
});
|
|
},
|
|
//渲染工单提交按钮
|
|
getInit(){
|
|
this.$API.wf.workflow.initkey.req('visit').then((res) => {
|
|
this.initform = 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.$API.vm.visit.update
|
|
.req(this.form.id, this.form)
|
|
.then((res) => {
|
|
this.$message.success("基本信息更新成功！");
|
|
|
|
return res;
|
|
})
|
|
.catch((err) => {
|
|
return err;
|
|
});
|
|
this.getInit();
|
|
this.active = 1;
|
|
} else {
|
|
this.active = 1;
|
|
}
|
|
// this.stepSuc.push(++this.active)
|
|
},
|
|
//退出界面
|
|
submitOut() {
|
|
this.$router.push({
|
|
name: "visit",
|
|
query: {},
|
|
});
|
|
},
|
|
//添加
|
|
add() {
|
|
this.dialogpeople = true;
|
|
},
|
|
|
|
//项目访客人员
|
|
getpeoplelistlist() {
|
|
this.$API.vm.people.list
|
|
.req({ visit: this.visitid, page: 0 })
|
|
.then((res) => {
|
|
this.peoplelist = res;
|
|
});
|
|
},
|
|
|
|
//访客接待人
|
|
getvisitorlist() {
|
|
this.$API.vm.visitor.list.req({ page: 0 }).then((res) => {
|
|
this.visitoroptions = res;
|
|
|
|
});
|
|
},
|
|
//表单提交方法
|
|
submitpeople() {
|
|
this.formpeople.visit = this.visitid;
|
|
this.$refs.dialofrom.validate((valid) => {
|
|
this.$API.vm.people.create
|
|
.req(this.formpeople)
|
|
.then((res) => {
|
|
this.$message.success("创建成功");
|
|
this.dialogpeople = false;
|
|
return res;
|
|
})
|
|
.catch((err) => {
|
|
return err;
|
|
});
|
|
});
|
|
},
|
|
//删除访客信息
|
|
table_del(row) {
|
|
this.$API.vm.people.delete
|
|
.req(row.id)
|
|
.then((res) => {
|
|
this.$message.success("访客删除成功");
|
|
|
|
return res;
|
|
})
|
|
.catch((err) => {
|
|
return err;
|
|
});
|
|
},
|
|
//提交工单
|
|
submitticket(id){
|
|
this.ticket={};
|
|
this.ticket.workflow=this.initform.workflow;
|
|
this.ticket.ticket_data={visit:this.visitid};
|
|
this.ticket.transition=id;
|
|
this.$API.wf.ticket.create.req(this.ticket).then((res) => {
|
|
this.$message.success("提交成功");
|
|
this.$router.push({
|
|
name: "visit",
|
|
query: {},
|
|
});
|
|
});
|
|
|
|
}
|
|
},
|
|
};
|
|
</script> |