225 lines
5.5 KiB
Vue
225 lines
5.5 KiB
Vue
<template>
|
||
<el-drawer
|
||
:title="titleMap[mode]"
|
||
v-model="visible"
|
||
:size="1000"
|
||
destroy-on-close
|
||
@closed="$emit('closed')"
|
||
>
|
||
<el-container v-loading="loading">
|
||
<el-main style="padding: 0 20px 20px 20px">
|
||
<el-form
|
||
ref="dialogForm"
|
||
:model="form"
|
||
:rules="rules"
|
||
:disabled="mode == 'show'"
|
||
label-width="80px"
|
||
>
|
||
<el-row>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="名称" required>
|
||
<el-input
|
||
v-model="form.name"
|
||
type="text"
|
||
clearable
|
||
:disabled="mode != 'add'"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="项目类型" required>
|
||
<el-select v-model="form.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="合同编号">
|
||
<el-input
|
||
v-model="form.contract_number"
|
||
type="text"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="进厂时间" required>
|
||
<el-date-picker
|
||
v-model="form.come_time"
|
||
type="datetime"
|
||
placeholder="选择进厂时间"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="离厂时间" required>
|
||
<el-date-picker
|
||
v-model="form.leave_time"
|
||
type="datetime"
|
||
placeholder="选择离厂时间"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="所属部门">
|
||
|
||
<el-cascader
|
||
v-model="form.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="相关方" required>
|
||
<el-select v-model="form.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-form>
|
||
</el-main>
|
||
<el-footer>
|
||
<el-button type="primary" :loading="isSaveing" @click="submit"
|
||
>保存
|
||
</el-button
|
||
>
|
||
<el-button @click="visible = false">取消</el-button>
|
||
</el-footer>
|
||
</el-container>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
import {genTree} from "@/utils/verificate";
|
||
|
||
export default {
|
||
emits: ["success", "closed"],
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
mode: "add",
|
||
titleMap: {
|
||
add: "新增",
|
||
edit: "编辑",
|
||
show: "查看",
|
||
},
|
||
form: {},
|
||
rules: {},
|
||
visible: false,
|
||
isSaveing: false,
|
||
selectionFilters: [],
|
||
setFiltersVisible: false,
|
||
rpartyOptions: [],
|
||
deptoptions: [],
|
||
typeOptions: [
|
||
{id: 10, name: "建筑施工"},
|
||
{id: 20, name: "设备设施检维修"},
|
||
{id: 30, name: "保安保洁服务"},
|
||
{id: 40, name: "其他"},
|
||
],
|
||
rparty_show: false
|
||
};
|
||
},
|
||
mounted() {
|
||
this.rpartyShow()
|
||
this.getDept();
|
||
},
|
||
methods: {
|
||
rpartyShow(){
|
||
var userInfo = this.$TOOL.data.get("USER_INFO");
|
||
if(userInfo.type=='employee'){
|
||
this.rparty_show = true
|
||
this.getRpartyOptions();
|
||
}
|
||
|
||
},
|
||
//显示
|
||
open(mode = "add") {
|
||
this.mode = mode;
|
||
this.visible = true;
|
||
return this;
|
||
},
|
||
//所属部门
|
||
getDept() {
|
||
this.$API.system.dept.list.req({page: 0, type__in: 'dept'}).then((res) => {
|
||
this.deptoptions = genTree(res);
|
||
});
|
||
},
|
||
|
||
//相关方
|
||
getRpartyOptions() {
|
||
this.$API.rpm.rparty.list.req({page: 0}).then((res) => {
|
||
this.rpartyOptions = res;
|
||
});
|
||
},
|
||
//表单提交方法
|
||
submit() {
|
||
this.$refs.dialogForm.validate(async (valid) => {
|
||
if (valid) {
|
||
this.isSaveing = true;
|
||
try {
|
||
var res;
|
||
if (this.mode == "add") {
|
||
res = await this.$API.rpm.rpj.create.req(this.form);
|
||
} else if (this.mode == "edit") {
|
||
res = await this.$API.rpm.rpj.update.req(this.form.id, this.form);
|
||
}
|
||
this.isSaveing = false;
|
||
this.$emit("success", this.form, this.mode);
|
||
this.visible = false;
|
||
this.$message.success("操作成功");
|
||
return res;
|
||
} catch (err) {
|
||
//可以处理校验错误
|
||
this.isSaveing = false;
|
||
return err;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//表单注入数据
|
||
setData(data) {
|
||
// this.loading = true
|
||
// const params = {
|
||
// id: data.id
|
||
// }
|
||
// setTimeout(async ()=>{
|
||
// var res = await this.$API.system.table.info.get(params)
|
||
// this.loading = false
|
||
// this.form = res.data
|
||
// },400)
|
||
Object.assign(this.form, data);
|
||
},
|
||
//设置过滤项
|
||
setFilters(filters) {
|
||
this.selectionFilters = filters;
|
||
this.setFiltersVisible = true;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|