187 lines
3.9 KiB
Vue
187 lines
3.9 KiB
Vue
<template>
|
||
<div class="interviewDetail">
|
||
<template v-if="isEdit">
|
||
<u-form ref="interviewForm" label-position="top" :model="form">
|
||
<u-form-item label="记录事项" prop="title" required>
|
||
<u-input v-model="form.title" placeholder="请输入，最多30字" maxlength="30"/>
|
||
</u-form-item>
|
||
<u-form-item label="记录内容" prop="content">
|
||
<AiTextarea v-model="form.content" placeholder="请输入，最多500字" :maxlength="500"/>
|
||
</u-form-item>
|
||
<u-form-item label="图片（最多9张）">
|
||
<AiUploader multiple :limit="9" :def.sync="form.fileList" action="/admin/file/add2"/>
|
||
</u-form-item>
|
||
</u-form>
|
||
<div bottom>
|
||
<u-button type="primary" @tap="submitForm">保存</u-button>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="headerPane">
|
||
<b>{{ form.title }}</b>
|
||
<div>记录时间：{{ form.createTime }}</div>
|
||
</div>
|
||
<div class="contentPane">
|
||
<div v-html="form.content"/>
|
||
<div flex class="wrap">
|
||
<AiImage v-for="(op,i) in form.fileList" :src="op.accessUrl" preview :key="i"/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: 'interviewDetail',
|
||
inject: {root: {}},
|
||
computed: {
|
||
isEdit() {
|
||
return this.$route.query?.detail != 1
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
fileList: []
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
},
|
||
created() {
|
||
this.searchDetail();
|
||
},
|
||
onLoad () {
|
||
document.title = this.$route.query.id ? '记录详情' : '新增记录'
|
||
},
|
||
methods: {
|
||
submitForm() {
|
||
if (!this.form.title) {
|
||
return this.$u.toast("请输入记录事项")
|
||
}
|
||
|
||
this.$loading()
|
||
this.$refs.interviewForm?.validate(v => {
|
||
if (v) {
|
||
this.$http.post(`/app/appinterview/add-xcx`, {
|
||
...this.form
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res?.code == 0) {
|
||
this.$u.toast("提交成功！")
|
||
setTimeout(() => {
|
||
uni.navigateBack({})
|
||
}, 1000)
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
searchDetail() {
|
||
let {id} = this.$route.query
|
||
id && this.$http.post(`/app/appinterview/queryDetailById`, null, {
|
||
params: {id}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.form = {...res.data};
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.interviewDetail {
|
||
background: #F3F6F9;
|
||
height: 100vh;
|
||
|
||
.u-form {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
background-color: #f3f6f9;
|
||
position: relative;
|
||
padding: 0 0 188px;
|
||
box-sizing: border-box;
|
||
font-size: 30px;
|
||
|
||
::v-deep textarea {
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep .u-form-item {
|
||
margin-bottom: 16px;
|
||
|
||
.u-form-item--left__content__label {
|
||
font-weight: 400;
|
||
}
|
||
|
||
div[flex] {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
div[bottom] {
|
||
z-index: 99;
|
||
padding: 0;
|
||
height: 112px;
|
||
|
||
.u-btn {
|
||
height: 100%;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
::v-deep .headerPane {
|
||
width: 100%;
|
||
background: #3975C6;
|
||
color: #fff;
|
||
padding: 24px 32px 32px;
|
||
box-sizing: border-box;
|
||
font-size: 28px;
|
||
|
||
b {
|
||
display: block;
|
||
font-size: 40px;
|
||
line-height: 64px;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
|
||
::v-deep .contentPane {
|
||
padding: 32px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
font-size: 32px;
|
||
font-weight: 400;
|
||
color: #666;
|
||
line-height: 56px;
|
||
background: #F3F6F9;
|
||
|
||
.wrap {
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.AiImage {
|
||
width: 31%;
|
||
margin-bottom: 16px;
|
||
margin-right: 16px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 218px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|