cnas/client/src/views/ability/abilityform.vue

270 lines
7.9 KiB
Python

<template>
<div>
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-form-item label="认证领域" prop="cert_field">
<treeselect
v-model="formData.cert_field"
:multiple="false"
:normalizer="normalizer"
:options="cert_fieldOptions"
:disable-branch-nodes="true"
placeholder="请选择认证领域"
:style="{width: '100%'}"
@select="typeChange"
clearable
/>
</el-form-item>
<el-form-item label="能力来源" prop="afrom">
<el-select
v-model="formData.afrom"
placeholder="请选择能力来源"
clearable
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in afromOptions"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="专业(CCC)" prop="major_rule" v-if="cert_field_code=='CCC'">
<el-select
v-model="formData.major_rule"
placeholder="请选择专业(CCC)"
clearable
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in major_ruleOptions"
:key="index"
:label="item.code + '/' + item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="专业(PV)" prop="major" v-else-if="cert_field_code=='PV'">
<treeselect
v-model="formData.major"
:normalizer="normalizer"
:multiple="false"
:options="majorOptions2"
:disable-branch-nodes="true"
placeholder="请选择专业"
:style="{width: '100%'}"
clearable
/>
</el-form-item>
<el-form-item label="专业(其它)" prop="major" v-else>
<treeselect
v-model="formData.major"
:normalizer="normalizer"
:multiple="false"
:options="majorOptions1"
:disable-branch-nodes="true"
placeholder="请选择专业"
:style="{width: '100%'}"
clearable
/>
</el-form-item>
<el-form-item label="能力项" prop="auditor_abilitys">
<el-select
v-model="formData.auditor_abilitys"
placeholder="请选择能力项"
multiple
clearable
:style="{width: '100%'}"
>
<el-option
v-for="(item, index) in auditor_abilitysOptions"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="评定日期" prop="access_date">
<el-date-picker
v-model="formData.access_date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{width: '100%'}"
placeholder="请选择评定日期"
clearable
></el-date-picker>
</el-form-item>
<el-form-item label="是否暂停" prop="is_paused" required>
<el-switch v-model="formData.is_paused"></el-switch>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入备注"
:autosize="{minRows: 4, maxRows: 4}"
:style="{width: '100%'}"
></el-input>
</el-form-item>
</el-form>
</el-row>
<div slot="footer" align="right">
<el-button type="danger" @click="close(false)">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</div>
</template>
<script>
import { createAbility, updateAbility } from "@/api/ability";
import { getImplementRuleList } from "@/api/implementrule"
import { getDictList } from "@/api/dict";
import { genTree } from "@/utils";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Abilityform",
inheritAttrs: false,
components: { Treeselect },
props: ["formData", "action", "cert_fieldOptions"],
data() {
return {
rules: {
cert_field: [
{
required: true,
message: "请选择认证领域",
trigger: "blur"
}
],
afrom: [
{
required: true,
message: "请选择能力来源",
trigger: "blur"
}
],
major: [],
major_rule: [],
auditor_abilitys: [
{
required: true,
type: "array",
message: "请至少选择一个能力项",
trigger: "blur"
}
],
access_date: [
{
required: true,
message: "请选择评定日期",
trigger: "blur"
}
],
remark: []
},
cert_field_code: null,
afromOptions: [],
majorOptions: [],
major_ruleOptions: [],
auditor_abilitysOptions: [],
majorOptions1: [],
majorOptions2: []
};
},
computed: {},
watch: {
formData:'cert_change'
},
created() {
if(this.formData.cert_field_){
// this.cert_field_code = this.formData.cert_field_.code
this.typeChange(this.formData.cert_field_)
}
this.getafromOptions();
this.getauditor_abilitysOptions();
this.getmajorOptions1();
this.getmajorOptions2();
this.getmajor_ruleOptions()
},
mounted() {},
methods: {
close(val) {
// this.$refs['elForm'].resetFields()
this.$emit("close", val);
},
typeChange(node, id) {
this.cert_field_code = node.code;
console.log(this.cert_field_code);
},
cert_change(){
if(this.formData.cert_field_){
this.cert_field_code = this.formData.cert_field_.code
}
},
getafromOptions() {
getDictList({ type__code: "ability_from" }).then(res => {
this.afromOptions = genTree(res.data);
});
},
//getauditor_abilitysOptions() {
// getDictList({ type__code: "auditor_ability" }).then(res => {
// this.auditor_abilitysOptions = genTree(res.data);
// });
//},
getmajorOptions1() {
getDictList({ type__code: "cnas_scope" }).then(res => {
this.majorOptions1 = genTree(res.data);
});
},
getmajorOptions2() {
getDictList({ type__code: "pv_scope" }).then(res => {
this.majorOptions2 = genTree(res.data);
});
},
getauditor_abilitysOptions() {
getDictList({ type__code: "auditor_ability" }).then(res => {
this.auditor_abilitysOptions = genTree(res.data);
});
},
getmajor_ruleOptions() {
getImplementRuleList({cert_field__code:'CCC'}).then(res=>{
this.major_ruleOptions = res.data.results
})
},
handelConfirm() {
this.$refs["elForm"].validate(valid => {
if (!valid) return;
if (this.action == "create") {
createAbility(this.formData).then(res => {
this.$message.success("成功");
this.close(true);
});
} else {
updateAbility(this.formData.id, this.formData).then(res => {
this.$message.success("成功");
this.close(true);
});
}
});
},
normalizer(node) {
//去掉children=[]的children属性
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.name,
children: node.children
};
}
}
};
</script>