<template>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
v-dialogDrag
|
top="0vh"
|
:title="title"
|
class="avue-dialog avue-dialog--top"
|
:width="width"
|
append-to-body
|
@opened="openDialog"
|
>
|
<FormTempalte
|
v-bind="$attrs"
|
:visible="visible"
|
:type="type"
|
:rowOid="rowOid"
|
ref="FormTempalte"
|
@getFormData="getFormData"
|
></FormTempalte>
|
|
<div
|
class="tab_box"
|
v-if="
|
type !== 'detail' &&
|
dialogVisible &&
|
(showCodeApply || showResembleQuery)
|
"
|
>
|
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
<el-tab-pane label="码值申请" name="codeApply" v-if="showCodeApply">
|
<FormTempalte
|
v-bind="$attrs"
|
:type="type"
|
:selfColumnType="selfColumnType"
|
:selfColumnConfig="selfColumnConfig"
|
ref="CodeApply"
|
@getFormData="getFormData"
|
></FormTempalte>
|
</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>
|
<div class="avue-dialog__footer" v-if="type !== 'detail'">
|
<el-button @click="close()">取 消</el-button>
|
<el-button @click="submit()" type="primary" :loading="submitBtnLoading"
|
>确 定</el-button
|
>
|
<el-button
|
@click="resembleQuerySubmit"
|
type="primary"
|
v-if="showResembleQuery"
|
>相似像查询</el-button
|
>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { getCodeRule, getFormTemplate } from "@/api/formTemplate.js";
|
import FormTempalte from "./FormTempalte";
|
import ResembleQuery from "./ResembleQuery";
|
export default {
|
name: "FormTemplateDialog",
|
components: { ResembleQuery, FormTempalte },
|
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: "",
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
submitBtnLoading: false,
|
hasResemble: false,
|
resembleTableColumn: [],
|
secVOList: [],
|
form: {},
|
activeName: "codeApply",
|
showCodeApply: true,
|
showResembleQuery: true,
|
selfColumnType: {
|
codefixedsec: "combox",
|
codeclassifysec: "refer",
|
codevariablesec: "text",
|
coderefersec: "refer",
|
},
|
selfColumnConfig: {
|
function: {
|
required: this.isRequired,
|
dicData: this.getOptionList,
|
type: this.getType,
|
},
|
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",
|
},
|
},
|
},
|
};
|
},
|
created() {},
|
computed: {
|
dialogVisible: {
|
get() {
|
return this.visible;
|
},
|
set(val) {
|
this.$emit("update:visible", val);
|
},
|
},
|
},
|
methods: {
|
openDialog() {
|
this.getFormTemplate();
|
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.$refs.FormTempalte.templateRender(res.data.formDefineVO.items);
|
}
|
})
|
.catch((err) => {
|
this.loading = false;
|
console.log(err);
|
});
|
},
|
// 获取码值申请数据
|
getCodeRule() {
|
getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => {
|
if (res.data && res.data.code === 200) {
|
const typeList = [
|
"codefixedsec",
|
"codeclassifysec",
|
"codevariablesec",
|
"coderefersec",
|
];
|
this.secVOList = (res.data.data.secVOList || []).filter((item) =>
|
typeList.includes(item)
|
);
|
this.$nextTick(() => {
|
if (this.secVOList.length > 0 && this.type === 'add') {
|
this.showCodeApply = true
|
this.activeName = 'codeApply'
|
this.$refs.CodeApply.templateRender(this.secVOList);
|
} else {
|
this.showCodeApply = false
|
}
|
});
|
}
|
});
|
},
|
getFormData(form) {
|
this.form = form;
|
},
|
resembleQuerySubmit() {
|
this.activeName = "resembleQuery";
|
this.$refs.resembleQueryRef.resembleQuery(this.form);
|
},
|
handleClick() {
|
if (this.activeName === "resembleQuery") {
|
this.resembleQuerySubmit();
|
}
|
},
|
async submit() {
|
// 进行表单校验
|
const formValidate = await this.$refs.FormTempalte.validate();
|
if (!formValidate) return;
|
let codeValidate = true;
|
// 进行码值申请校验
|
if (this.showCodeApply) {
|
codeValidate = await this.$refs.codeApply.validate();
|
if (!codeValidate) return;
|
}
|
// 进行相似项查询
|
const resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
|
this.form
|
);
|
if (resembleQueryList.length === 0) {
|
this.$emit("submit", this.form);
|
} else {
|
this.$confirm(
|
`该物料已有${resembleQueryList.length}条相似数据，是否继续保存？`,
|
"需要您确认",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
this.$emit("submit", this.form);
|
})
|
.catch(() => {});
|
}
|
},
|
getType(item) {
|
return this.selfColumnType[item.sectype];
|
},
|
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>
|
