parent
c30916262a
commit
ec2b609859
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-page-header
|
||||
:content="
|
||||
$route.meta.title +
|
||||
(detail.dikuaimingcheng ? ' - ' + detail.dikuaimingcheng : '')
|
||||
"
|
||||
style="
|
||||
padding: 1em;
|
||||
font-size: 1em;
|
||||
background: #fff;
|
||||
margin: 1.67em 0;
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
border-radius: 5px;
|
||||
"
|
||||
@back="$router.back()"
|
||||
>
|
||||
</el-page-header>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<el-descriptions
|
||||
title="基本信息"
|
||||
:column="2"
|
||||
:label-style="{ 'font-weight': '600' }"
|
||||
>
|
||||
<el-descriptions-item
|
||||
v-for="item in fields"
|
||||
:label="item.name"
|
||||
v-if="!['file', 'picture'].find((j) => j === item.field)"
|
||||
>{{ contentFormat(item)
|
||||
}}{{ units.get(item.field) }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<Modal
|
||||
:width="76"
|
||||
transfer
|
||||
:z-index="6000"
|
||||
v-model="showModal"
|
||||
:footer-hide="true"
|
||||
title="预览"
|
||||
>
|
||||
<template>
|
||||
<iframe
|
||||
style="width: 100%; height: 57vh"
|
||||
:src="codeUri"
|
||||
border="0"
|
||||
></iframe>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { show, index } from "@/api/system/baseForm";
|
||||
import { show as formShow } from "@/api/system/customForm";
|
||||
import { getparameter } from "@/api/system/dictionary";
|
||||
import { listdept } from "@/api/system/department";
|
||||
import { download } from "@/utils/downloadRequest";
|
||||
export default {
|
||||
name: "detail",
|
||||
data() {
|
||||
return {
|
||||
showModal:false,
|
||||
codeUri: "",
|
||||
|
||||
detail: {},
|
||||
fields: [],
|
||||
relation: [],
|
||||
customForm: {
|
||||
customFormId: "",
|
||||
tableName: "",
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open(url) {
|
||||
this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
|
||||
new Buffer(url).toString("base64")
|
||||
)}`;
|
||||
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
down(e) {
|
||||
download(e.url, "get", {}, e.original_name);
|
||||
},
|
||||
|
||||
async getFields() {
|
||||
if (this.$route.meta.params?.custom_form) {
|
||||
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
|
||||
try {
|
||||
let custom_form = JSON.parse(decode);
|
||||
this.customForm.customFormId = custom_form.custom_form_id;
|
||||
this.customForm.tableName = custom_form.table_name;
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
}
|
||||
|
||||
const res = await formShow({ id: this.customForm.customFormId }, false);
|
||||
this.fields = res.fields.sort((a, b) => a.sort - b.sort);
|
||||
this.relation = res.relation;
|
||||
|
||||
//字段处理
|
||||
//初始表白名单
|
||||
let baseTable = new Map([
|
||||
[
|
||||
"departments",
|
||||
async () => {
|
||||
const res = await listdept();
|
||||
return res;
|
||||
},
|
||||
],
|
||||
["admins", []],
|
||||
]);
|
||||
let { fields, relation } = this;
|
||||
if (
|
||||
!fields ||
|
||||
!relation ||
|
||||
!fields instanceof Array ||
|
||||
!relation instanceof Array
|
||||
) {
|
||||
throw new Error("fields或relation格式错误");
|
||||
}
|
||||
fields
|
||||
.sort((a, b) => a.sort - b.sort)
|
||||
.forEach((i) => {
|
||||
i._relations = relation.find(
|
||||
(j) => j.link_table_name.split("_")[1] === i.field
|
||||
);
|
||||
if (i.select_item && typeof i.select_item === "object") {
|
||||
let keys = Object.keys(i.select_item);
|
||||
i._params = keys.map((key) => {
|
||||
return {
|
||||
key,
|
||||
value: /^\d*$/.test(i.select_item[key])
|
||||
? Number(i.select_item[key])
|
||||
: i.select_item[key],
|
||||
};
|
||||
});
|
||||
}
|
||||
if (i.edit_input === "file" || i.edit_input === "files") {
|
||||
return;
|
||||
}
|
||||
if (i._relations) {
|
||||
if (baseTable.get(i._relations.link_table_name)) {
|
||||
baseTable
|
||||
.get(i._relations.link_table_name)()
|
||||
.then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
} else {
|
||||
i._params = i._relations.parameter_id
|
||||
? getparameter({ id: i._relations.parameter_id }, false).then(
|
||||
(res) => {
|
||||
i._params = res.detail;
|
||||
}
|
||||
)
|
||||
: this.index({
|
||||
table_name: i._relations.link_table_name,
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
}).then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const detail = await show({
|
||||
id: this.$route.query.id,
|
||||
table_name: this.customForm.tableName,
|
||||
});
|
||||
this.detail = detail;
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
contentFormat() {
|
||||
return function (i) {
|
||||
let { _relations } = i;
|
||||
if (_relations && _relations.link_table_name) {
|
||||
if (
|
||||
_relations.link_relation === "hasOne" ||
|
||||
_relations.link_relation === "newHasOne"
|
||||
) {
|
||||
return (
|
||||
this.detail[_relations.link_with_name]?.name ||
|
||||
this.detail[_relations.link_with_name]?.no ||
|
||||
this.detail[_relations.link_with_name]?.value
|
||||
);
|
||||
}
|
||||
if (
|
||||
_relations.link_relation === "hasMany" ||
|
||||
_relations.link_relation === "newHasMany"
|
||||
) {
|
||||
return this.detail[_relations.link_with_name]
|
||||
?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
|
||||
?.toString();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
if (i._params && i._params.length > 0) {
|
||||
return i._params.find((j) => j.value == this.detail[i.field])?.key;
|
||||
}
|
||||
|
||||
return this.detail[i.field];
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getFields();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
::v-deep .el-empty__image {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue