<template>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
v-if="dialogVisible"
|
v-dialogDrag
|
top="5vh"
|
:title="title"
|
:width="width"
|
append-to-body
|
@opened="openDialog"
|
>
|
<FormTemplate
|
v-bind="$attrs"
|
:type="type"
|
:rowOid="rowOid"
|
:templateOid="templateOid"
|
v-if="dialogVisible"
|
ref="FormTemplate"
|
@getFormData="getFormData"
|
></FormTemplate>
|
<div
|
class="tab_box"
|
v-if="
|
type !== 'detail' &&
|
dialogVisible &&
|
(showCodeApply || showResembleQuery) &&
|
type !== 'preview'
|
"
|
>
|
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
<el-tab-pane label="码值申请" name="codeApply" v-if="showCodeApply">
|
<FormTemplate
|
v-bind="$attrs"
|
:type="type"
|
:selfColumnType="selfColumnType"
|
:selfColumnConfig="selfColumnConfig"
|
ref="CodeApply"
|
@getFormData="getCodeApplyFormData"
|
@referConfigDataUpdate="referConfigDataUpdate"
|
></FormTemplate>
|
</el-tab-pane>
|
<el-tab-pane
|
label="相似项查询"
|
name="resembleQuery"
|
v-if="showResembleQuery"
|
>
|
<ResembleQuery
|
v-bind="$attrs"
|
ref="resembleQueryRef"
|
:hasResemble="this.hasResemble"
|
:column="this.resembleTableColumn"
|
:codeClassifyOid="codeClassifyOid"
|
:form="this.form"
|
:templateOid="templateOid"
|
></ResembleQuery>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<template #footer>
|
<div class="" v-if="type !== 'detail'">
|
<el-button @click="close()" size="small">取 消</el-button>
|
<el-button
|
@click="submit()"
|
type="primary"
|
:loading="submitBtnLoading"
|
size="small"
|
>{{ submitText }}</el-button
|
>
|
<el-button
|
@click="resembleQuerySubmit"
|
type="primary"
|
size="small"
|
v-if="showResembleQuery"
|
>相似像查询</el-button
|
>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { getCodeRule, getFormTemplate } from "@/api/formTemplate.js";
|
import FormTemplate from "./FormTemplate";
|
import ResembleQuery from "./ResembleQuery";
|
export default {
|
name: "FormTemplateDialog",
|
components: { ResembleQuery, FormTemplate },
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: "add",
|
},
|
title: {
|
type: String,
|
default: "编码申请",
|
},
|
width: {
|
type: String,
|
default: "80%",
|
},
|
rowOid: "",
|
codeClassifyOid: {
|
type: String,
|
default: "",
|
},
|
templateOid: {
|
type: String,
|
default: "",
|
},
|
submitText: {
|
type: String,
|
default: "确 定",
|
},
|
setForm: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
submitBtnLoading: false,
|
hasResemble: false,
|
resembleTableColumn: [],
|
secVOList: [],
|
form: {},
|
codeApplyForm: {},
|
activeName: "codeApply",
|
showCodeApply: false,
|
showResembleQuery: false,
|
selfColumnType: {
|
codefixedsec: "combox",
|
codeclassifysec: "refer",
|
codevariablesec: "text",
|
coderefersec: "refer",
|
},
|
selfColumnConfig: {
|
function: {
|
required: this.isRequired,
|
dicData: this.getOptionList,
|
type: this.getType,
|
referConfig: this.getReferConfig,
|
readOnly: this.getDisabled,
|
},
|
exchange: {
|
text: "name",
|
field: "oid",
|
prop: "oid",
|
showField: "name",
|
parentClassifySecOid: "parentClassifySecOid",
|
label: "name",
|
maxlength: "codeSecLength",
|
data: "fixedValueVOList",
|
},
|
directVoluation: {
|
search: true,
|
props: {
|
label: "id",
|
value: "id",
|
},
|
},
|
},
|
defaultKeys: [
|
"oid",
|
"id",
|
"name",
|
"description",
|
"revisionoid",
|
"nameoid",
|
"btmname",
|
"lastr",
|
"firstr",
|
"lastv",
|
"firstv",
|
"creator",
|
"createtime",
|
"lastModifier",
|
"lastmodifytime",
|
"revisionrule",
|
"revisionseq",
|
"revisionvalue",
|
"versionrule",
|
"versionseq",
|
"versionvalue",
|
"lcstatus",
|
"ts",
|
"owner",
|
"checkinby",
|
"checkintime",
|
"checkoutby",
|
"checkouttime",
|
"copyfromversion",
|
"secretgrade",
|
],
|
codeRuleOid: ''
|
};
|
},
|
created() {},
|
computed: {
|
dialogVisible: {
|
get() {
|
return this.visible;
|
},
|
set(val) {
|
this.$emit("update:visible", val);
|
},
|
},
|
},
|
methods: {
|
openDialog() {
|
this.getFormTemplate();
|
if (this.type === "add") {
|
this.getCodeRule();
|
}
|
},
|
close() {
|
this.dialogVisible = false;
|
},
|
// 接口获取表单数据
|
getFormTemplate() {
|
getFormTemplate({
|
templateOid: this.templateOid,
|
codeClassifyOid: this.codeClassifyOid,
|
})
|
.then((res) => {
|
if (res.status === 200) {
|
this.hasResemble =
|
res.data.resembleTableVO &&
|
res.data.resembleTableVO.cols &&
|
res.data.resembleTableVO.cols.length > 0;
|
this.resembleTableColumn = res.data.resembleTableVO.cols || [];
|
if (this.hasResemble) {
|
this.activeName = "resembleQuery";
|
this.showResembleQuery = true;
|
}
|
this.$nextTick(() => {
|
this.$refs.FormTemplate.templateRender(
|
res.data.formDefineVO.items
|
);
|
if (Object.keys(this.setForm).length > 0) {
|
this.$refs.FormTemplate.form = this.setForm;
|
}
|
});
|
}
|
})
|
.catch(() => {
|
this.loading = false;
|
});
|
},
|
// 获取码值申请数据
|
getCodeRule() {
|
getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => {
|
if (res.data && res.data.code === 200) {
|
this.codeRuleOid = res.data.data.oid
|
const typeList = [
|
"codefixedsec",
|
"codeclassifysec",
|
"codevariablesec",
|
"coderefersec",
|
];
|
this.secVOList = (res.data.data.secVOList || []).filter((item) =>
|
typeList.includes(item.secType)
|
);
|
if (this.secVOList.length > 0 && this.type === "add") {
|
this.showCodeApply = true;
|
this.activeName = "codeApply";
|
this.$nextTick(() => {
|
this.$refs.CodeApply.templateRender(this.secVOList);
|
});
|
} else {
|
this.showCodeApply = false;
|
}
|
}
|
});
|
},
|
getFormData(form) {
|
this.form = form;
|
},
|
getCodeApplyFormData(codeApplyForm) {
|
this.codeApplyForm = codeApplyForm;
|
},
|
// 参照组件数据变更
|
referConfigDataUpdate(data) {
|
const { field } = data;
|
this.secVOList = this.secVOList.map((item) => {
|
if (item.parentClassifySecOid === field) {
|
this.$refs.CodeApply.form[item.oid] = undefined;
|
this.$refs.CodeApply.form[item.name] = undefined;
|
}
|
return item;
|
});
|
this.$refs.CodeApply.templateRender(this.secVOList);
|
},
|
resembleQuerySubmit() {
|
this.activeName = "resembleQuery";
|
this.$refs.resembleQueryRef.resembleQuery(this.form);
|
},
|
handleClick() {
|
if (this.activeName === "resembleQuery") {
|
this.resembleQuerySubmit();
|
}
|
},
|
async submit() {
|
// 进行表单校验
|
const formValidate = await this.$refs.FormTemplate.validate();
|
if (!formValidate) return;
|
let codeValidate = true;
|
// 进行码值申请校验
|
if (this.showCodeApply) {
|
codeValidate = await this.$refs.CodeApply.validate();
|
if (!codeValidate) {
|
this.activeName = "codeApply";
|
return false;
|
}
|
}
|
// 进行相似项查询
|
const resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
|
this.form
|
);
|
if (resembleQueryList.length === 0) {
|
let resForm = {};
|
const { defaultValue, formValue } = this.getDefaultValueAndFormValues(
|
this.form
|
);
|
resForm.data = formValue;
|
resForm = Object.assign({}, resForm, defaultValue);
|
resForm.secDTOList = [];
|
for (const key in this.codeApplyForm) {
|
if (Object.hasOwnProperty.call(this.codeApplyForm, key)) {
|
const value = this.codeApplyForm[key];
|
if (value) {
|
resForm.secDTOList.push({ secOid: key, secValue: value });
|
}
|
}
|
}
|
resForm.codeClassifyOid = this.codeClassifyOid;
|
resForm.codeRuleOid = this.codeRuleOid;
|
resForm.templateOid = this.templateOid;
|
this.$emit("submit", resForm);
|
} else {
|
this.$confirm(
|
`该物料已有${resembleQueryList.length}条相似数据，是否继续保存？`,
|
"需要您确认",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
let resForm = {};
|
const { defaultValue, formValue } =
|
this.getDefaultValueAndFormValues(this.form);
|
resForm.data = formValue;
|
resForm = Object.assign({}, resForm, defaultValue);
|
resForm.secDTOList = this.secVOList.map(item => {
|
return {
|
secOid: item.oid,
|
secValue: this.codeApplyForm[item.oid],
|
}
|
});
|
resForm.codeClassifyOid = this.codeClassifyOid;
|
resForm.codeRuleOid = this.codeRuleOid;
|
resForm.templateOid = this.templateOid;
|
this.$emit("submit", resForm);
|
})
|
.catch(() => {});
|
}
|
},
|
getDefaultValueAndFormValues(form) {
|
let defaultValue = {};
|
let formValue = {};
|
for (const key in form) {
|
if (Object.hasOwnProperty.call(form, key)) {
|
const element = form[key];
|
if (this.defaultKeys.includes(key)) {
|
defaultValue[key] = element;
|
} else {
|
formValue[key] = element;
|
}
|
}
|
}
|
return {
|
defaultValue,
|
formValue,
|
};
|
},
|
getType(item) {
|
return this.selfColumnType[item.secType];
|
},
|
getReferConfig(item) {
|
let params = {};
|
if (item.secType == "codeclassifysec") {
|
params = {
|
isMuti: false,
|
type: "grid",
|
tableConfig: {
|
limit: -1,
|
cols: [
|
{
|
field: "id",
|
title: "英文名称",
|
sort: true,
|
width: 150,
|
},
|
{
|
field: "name",
|
title: "中文名称",
|
sort: true,
|
width: 150,
|
},
|
{
|
field: "description",
|
title: "描述",
|
width: 250,
|
},
|
],
|
queryColumns: [
|
{
|
field: "id",
|
title: "英文名称",
|
},
|
{
|
field: "name",
|
title: "中文名称",
|
},
|
],
|
},
|
url: "api/ubcs-code/ubcs-code/mdmEngineController/listCodeClassifyValueBySecOid",
|
extraParams: {
|
classifySecOid: item.oid,
|
parentClassifyValueOid: item.parentClassifySecOid
|
? this.codeApplyForm[item.parentClassifySecOid]
|
: "",
|
},
|
};
|
} else if (item.secType == "coderefersec") {
|
params = JSON.parse(item.referValueInfo);
|
}
|
return params;
|
},
|
getDisabled(item) {
|
if (item.secType === "codeclassifysec") {
|
if (item.parentClassifySecOid) {
|
if (!this.codeApplyForm[item.parentClassifySecOid]) {
|
return true;
|
} else {
|
return false;
|
}
|
}
|
}
|
},
|
isRequired(item) {
|
return item.nullableFlag != "true";
|
},
|
getOptionList(item) {
|
if (
|
Array.isArray(item.fixedValueVOList) &&
|
item.fixedValueVOList.length > 0
|
) {
|
const configAttr = {
|
key: "id",
|
value: "id",
|
};
|
const optionList = item.fixedValueVOList.map((item) => {
|
for (const key in configAttr) {
|
if (Object.hasOwnProperty.call(configAttr, key)) {
|
const element = configAttr[key];
|
item[key] = item[element];
|
}
|
}
|
return item;
|
});
|
return optionList;
|
} else {
|
return [];
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.key_attr_icon {
|
font-size: 24px;
|
position: relative;
|
top: 2px;
|
color: red;
|
}
|
// 解决swich组件不垂直居中的问题
|
/deep/ .el-switch {
|
vertical-align: baseline;
|
}
|
</style>
|
