cnas/client/src/views/certapp/cccform.vue

473 lines
14 KiB
Python

<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-row>
<el-col :xs="24" :md="8">
<el-form-item label="业务级别" prop="level">
<el-select
v-model="formData.level"
placeholder="请选择业务级别"
filterable
allow-create
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in levelOptions"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="受理日期" prop="apply_date" >
<el-date-picker
v-model="formData.apply_date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{width: '100%'}"
placeholder="受理日期"
clearable
></el-date-picker>
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="接收日期" prop="accept_date" >
<el-date-picker
v-model="formData.accept_date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{width: '100%'}"
placeholder="材料接收日期"
clearable
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<!-- <el-divider content-position="left" style="margin-top:2px">申请方</el-divider> -->
<el-row>
<el-col :xs="24" :md="12">
<el-form-item label="申请方" prop="applicant">
<el-input placeholder="请选择申请方" readonly clearable v-model="formData.applicant_v.name">
<el-button slot="append" icon="el-icon-search" @click="choose(0)"></el-button>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="12">
<el-form-item label="地址" prop="applicant_v.address">
<el-select
v-model="formData.applicant_v.address"
placeholder="请选择地址"
filterable
allow-create
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in addressOptions0"
:key="index"
:label="item.address"
:value="item.address"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :md="4">
<el-form-item label="联系人">
<el-input v-model="formData.applicant_v.linkman_name"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="6">
<el-form-item label="手机">
<el-input v-model="formData.applicant_v.linkman_mobile"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="4">
<el-form-item label="职务">
<el-input v-model="formData.applicant_v.linkman_duty"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <el-divider content-position="left">制造商</el-divider> -->
<el-row>
<el-col :xs="24" :md="12">
<el-form-item label="制造商" prop="manufacture">
<el-input placeholder="请选择制造商" readonly clearable v-model="formData.manufacture_v.name">
<el-button slot="append" icon="el-icon-search" @click="choose(1)"></el-button>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="12">
<el-form-item label="地址" prop="manufacture_v.address">
<el-select
v-model="formData.manufacture_v.address"
placeholder="请选择地址"
filterable
allow-create
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in addressOptions1"
:key="index"
:label="item.address"
:value="item.address"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :md="4">
<el-form-item label="联系人">
<el-input v-model="formData.manufacture_v.linkman_name"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="6">
<el-form-item label="手机">
<el-input v-model="formData.manufacture_v.linkman_mobile"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="4">
<el-form-item label="职务">
<el-input v-model="formData.manufacture_v.linkman_duty"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :md="12">
<el-form-item label="生产厂" prop="factory">
<el-input placeholder="请选择生产厂" readonly clearable v-model="formData.factory_v.name">
<el-button slot="append" icon="el-icon-search" @click="choose(2)"></el-button>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="12">
<el-form-item label="地址" prop="factory_v.address">
<el-select
v-model="formData.factory_v.address"
placeholder="请选择地址"
filterable
allow-create
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in addressOptions2"
:key="index"
:label="item.address"
:value="item.address"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :md="4">
<el-form-item label="联系人">
<el-input v-model="formData.factory_v.linkman_name"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="6">
<el-form-item label="手机">
<el-input v-model="formData.factory_v.linkman_mobile"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="4">
<el-form-item label="职务">
<el-input v-model="formData.factory_v.linkman_duty"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :md="4">
<el-form-item label="工厂人数">
<el-input-number v-model="formData.factory_v.person_count"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :md="8">
<el-form-item label="产品分类" prop="cccpv_class">
<treeselect
v-model="formData.cccpv_class"
:multiple="false"
:options="cccOptions"
:disable-branch-nodes="true"
placeholder="请选择产品分类"
:style="{width: '100%'}"
clearable
/>
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="申请模式" prop="pattern">
<el-select
v-model="formData.pattern"
placeholder="请选择模式"
filterable
allow-create
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in patternOptions"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :md="4">
<el-form-item label="是否认可" prop="is_approve">
<el-switch v-model="formData.is_approve"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- <el-col :xs="24" :md="12">
<el-form-item label="认证范围" >
<el-input readonly placeholder="填写产品单元后自动生成"></el-input>
</el-form-item>
</el-col> -->
<el-col :xs="24" :md="12">
<el-form-item label="备注" >
<el-input v-model="formData.remark" type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" align="center">
<el-button @click="cancel()">返回列表</el-button>
<el-button type="primary" @click="handelConfirm">保存</el-button>
</div>
<el-dialog
title="选择企业"
:visible.sync="dgVisiable"
:close-on-click-modal="false"
width="80%"
:append-to-body="true"
>
<Enterprisechose ref="Enterprisechose" @handleChose="chooseComplete"></Enterprisechose>
</el-dialog>
</div>
</template>
<script>
import { createCertapp, updateCertapp } from "@/api/certapp";
import Enterprisechose from "@/views/enterprise/enterprisechoose";
import { getAddressList } from "@/api/enterprise";
import { genTree } from "../../utils";
import { getDictList } from "../../api/dict";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "CCCform",
inheritAttrs: false,
components: { Enterprisechose, Treeselect },
props: ["certapp"],
data() {
return {
formData: {
field_code: 'CCC',
applicant: null,
applicant_v: {},
manufacture_v: {},
manufacture: null,
factory: null,
factory_v: {},
cccpv_class: null,
pattern: "正常",
is_approve:true,
level:null
},
rules: {
apply_date: [
{
required: true,
message: "请选择日期",
trigger: "change",
},
],
accept_date: [
{
required: true,
message: "请选择日期",
trigger: "change",
},
],
applicant: [
{
required: true,
message: "请选择申请方",
trigger: "change",
},
],
manufacture: [
{
required: true,
message: "请选择制造商",
trigger: "change",
},
],
factory: [
{
required: true,
message: "请选择生产厂",
trigger: "change",
},
],
cccpv_class: [
{
required: true,
message: "请选择产品分类",
trigger: "change",
},
],
pattern: [
{
required: true,
message: "请选择申请模式",
trigger: "change",
},
],
level: [
{
required: true,
message: "请选择级别",
trigger: "change",
},
],
},
addressOptions0: [],
addressOptions1: [],
addressOptions2: [],
dgVisiable: false,
dgType: 1,
cccOptions: [],
levelOptions:[],
patternOptions: [
{
label: "正常",
value: "正常",
},
{
label: "ODM",
value: "ODM",
},
{
label: "OEM",
value: "OEM",
},
],
};
},
computed: {},
watch: {
},
created() {
if(this.certapp!=null){
this.formData = this.certapp
}
this.getCCCOptions();
this.getlevelOptions();
},
mounted() {},
methods: {
cancel(val) {
// this.$refs['elForm'].resetFields()
this.$router.go(-1)
},
handelConfirm() {
this.$refs["elForm"].validate((valid) => {
if (!valid) return;
if(this.formData.id){
updateCertapp(this.formData.id, this.formData).then((res) => {
this.$message.success('成功')
this.$emit("handleCommit", res.data);
});
}else{
createCertapp(this.formData).then((res) => {
this.$message.success('成功')
this.$router.replace({name:"Certappupdate", params:{id:res.data.id}})
});
}
});
},
choose(val) {
this.dgType = val;
this.dgVisiable = true;
},
chooseComplete(val) {
this.dgVisiable = false;
console.log(val)
if (val) {
if (this.dgType == 0) {
this.formData.applicant = val.id;
this.formData.applicant_v = {
name: val.name,
linkman_name: val.linkman1_name,
linkman_mobile: val.linkman1_mobile,
linkman_duty: val.linkman1_duty,
person_count: val.person_count,
};
}else if(this.dgType==1){
this.formData.manufacture = val.id;
this.formData.manufacture_v = {
name: val.name,
linkman_name: val.linkman1_name,
linkman_mobile: val.linkman1_mobile,
linkman_duty: val.linkman1_duty,
person_count: val.person_count,
};
}else{
this.formData.factory = val.id;
this.formData.factory_v = {
name: val.name,
linkman_name: val.linkman1_name,
linkman_mobile: val.linkman1_mobile,
linkman_duty: val.linkman1_duty,
person_count: val.person_count,
};
}
}
this.getAddressList_(val.id);
},
getAddressList_(id) {
getAddressList({ enterprise: id }).then((res) => {
let data = genTree(res.data);
if(this.dgType==0){
this.addressOptions0 = data;
}else if(this.dgType==1){
this.addressOptions1 = data;
}else{
this.addressOptions2 = data;
}
});
},
getCCCOptions() {
getDictList({ type__code: "ccc_list" }).then((res) => {
this.cccOptions = genTree(res.data);
});
},
getlevelOptions(){
getDictList({ type__code: "certapp_level" }).then((res) => {
this.levelOptions = genTree(res.data);
});
}
},
};
</script>
<style>
</style>