173 lines
4.0 KiB
Vue
173 lines
4.0 KiB
Vue
<template>
|
|
<div class="borrow-apply">
|
|
<van-form>
|
|
<van-field
|
|
class="background"
|
|
v-model="applyName"
|
|
required
|
|
label="申请人"
|
|
placeholder="请输入申请人"
|
|
:rules="[{ required: true, message: '申请人不能为空' }]"
|
|
/>
|
|
<van-field
|
|
class="background"
|
|
v-model="knwlName"
|
|
label="知识名称"
|
|
placeholder="请输入知识名称"
|
|
/>
|
|
<van-field
|
|
class="background"
|
|
v-model="knwlPath"
|
|
label="知识路径"
|
|
placeholder=""
|
|
/>
|
|
<van-field
|
|
class="background"
|
|
v-model="admin"
|
|
label="管理员"
|
|
placeholder=""
|
|
/>
|
|
<van-field-select
|
|
class="border"
|
|
label="借阅控制"
|
|
required
|
|
placeholder="请选择"
|
|
v-model="control"
|
|
:columns="controlOption"
|
|
/>
|
|
<van-field
|
|
v-show="showReadTimes"
|
|
class="border"
|
|
v-model="readTimes"
|
|
required
|
|
label="阅读次数"
|
|
placeholder=""
|
|
:rules="[{ required: true, message: '不能为空' }]"
|
|
/>
|
|
<div v-show="showDate">
|
|
<van-field-date
|
|
class="border"
|
|
v-model="startDate"
|
|
:minDate="minDate"
|
|
:maxDate="maxDate"
|
|
type="date"
|
|
required
|
|
label="开始日期"
|
|
placeholder="请选择日期"
|
|
/>
|
|
<van-field-date
|
|
class="border"
|
|
v-model="endDate"
|
|
required
|
|
label="结束日期"
|
|
type="date"
|
|
placeholder="请选择日期"
|
|
/>
|
|
</div>
|
|
<van-field
|
|
class="border"
|
|
v-model="remarks"
|
|
required
|
|
:autosize="{ maxHeight: 100, minHeight: 100 }"
|
|
type="textarea"
|
|
label="备注"
|
|
placeholder=""
|
|
/>
|
|
<div class="footer">
|
|
<!--<van-button round block type="info" native-type="submit">
|
|
提交
|
|
</van-button>-->
|
|
<van-button type="danger">作废</van-button>
|
|
<van-button plain type="info" @click="onSave">保存</van-button>
|
|
<van-button type="info" @click="onHandle">办理</van-button>
|
|
<van-button type="default">更多</van-button>
|
|
</div>
|
|
</van-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vanFieldSelect from '@/components/fieldSelect'
|
|
import vanFieldDate from '@/components/fieldDate'
|
|
export default {
|
|
name: 'borrow-approve',
|
|
components: {
|
|
vanFieldSelect,
|
|
vanFieldDate
|
|
},
|
|
data () {
|
|
return {
|
|
applyName: '司马懿',
|
|
knwlName: 'AWS访问连接池参数调整',
|
|
knwlPath: '知识目录 > 公司 > 重要文件',
|
|
admin: '张飞',
|
|
control: '阅读次数',
|
|
controlOption: ['阅读次数', '有效日期'],
|
|
showReadTimes: true,
|
|
readTimes: '3次',
|
|
showDate: false,
|
|
startDate: '',
|
|
endDate: '',
|
|
minDate: new Date(2020, 0, 1),
|
|
maxDate: new Date(2025, 10, 1),
|
|
remarks: '',
|
|
id: 1
|
|
}
|
|
},
|
|
methods: {
|
|
onSave (values) {
|
|
console.log('submit', values)
|
|
},
|
|
onHandle () {
|
|
this.$router.push({
|
|
name: 'borrow-approve',
|
|
params: {
|
|
id: this.id
|
|
}
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
control: function () {
|
|
if (this.control === '阅读次数') {
|
|
this.showReadTimes = true
|
|
this.showDate = false
|
|
} else {
|
|
this.showReadTimes = false
|
|
this.showDate = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.borrow-apply {
|
|
height: 100%;
|
|
}
|
|
|
|
.footer {
|
|
padding: 12px;
|
|
position: fixed;
|
|
border-top: 0.33px solid #e9e9e9;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
z-index: 1;
|
|
}
|
|
|
|
.footer .van-button {
|
|
height: 38px;
|
|
line-height: 38px;
|
|
width: calc(100% / 4 - 12px);
|
|
margin-right: 12px;
|
|
border-radius: 2px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.footer .van-button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
</style>
|