You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

159 lines
3.6 KiB

<template>
<div>
<el-drawer
:title="$route.meta.title"
direction="rtl"
size="68%"
:visible.sync="visible"
append-to-body
@close="$emit('update:isShow', false)"
>
<section class="drawer-container">
<el-descriptions
class="drawer-container__desc"
size="small"
border
ref="elDesc"
:column="2"
direction="vertical"
:labelStyle="{ 'font-weight': '500', 'font-size': '15px' }"
>
<el-descriptions-item label="名称">
{{ form["name"] }}
</el-descriptions-item>
<el-descriptions-item label="区域分组">
{{
form['"group']
}}
</el-descriptions-item>
<el-descriptions-item label="年份">
{{ form["year"] }}
</el-descriptions-item>
<el-descriptions-item label="标题">
{{ form["title"] }}
</el-descriptions-item>
<el-descriptions-item label="备注" span="2">
<div v-html="form['remark']"></div>
</el-descriptions-item>
<el-descriptions-item label="提示" span="2">
<div v-html="form['tip']"></div>
</el-descriptions-item>
<el-form-item label="填报图" prop="image_id">
<el-upload
:file-list="form['image_id']"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
>
</el-upload>
</el-form-item>
<el-descriptions-item label="是否需要签名">
{{
[
{ value: 1, label: "是" },
{ value: 0, label: "否" },
].find((i) => i["value"] === form["need_sign"])
? [
{ value: 1, label: "是" },
{ value: 0, label: "否" },
].find((i) => i["value"] === form["need_sign"])["label"]
: ""
}}
</el-descriptions-item>
</el-descriptions>
</section>
</el-drawer>
</div>
</template>
<script>
import { show } from "@/api/aspiration/aspiration";
export default {
name: "AspirationShow",
props: {
isShow: {
type: Boolean,
default: false,
required: true,
},
area: {
type: [Array, Object],
default: () => [],
},
},
data() {
return {
loading: false,
visible: false,
form: {
name: "",
area_id: "",
year: "",
title: "",
remark: "",
tip: "",
image_id: [],
need_sign: "",
},
};
},
watch: {
isShow(newVal) {
this.visible = newVal;
},
visible(newVal) {
this.$emit("update:isShow", newVal);
},
},
methods: {
async getDetail(id) {
try {
const detail = await show({
id,
});
for (let key in this.form) {
if (detail.hasOwnProperty(key)) {
this.form[key] = detail[key];
}
}
} catch (err) {
console.error(err);
}
},
},
};
</script>
<style scoped lang="scss">
.span2 {
grid-column: span 2;
}
::v-deep .el-form-item > * {
max-width: 100%;
}
.drawer-container {
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
& > * {
flex: 1;
}
}
</style>