4 changed files with 228 additions and 115 deletions
-
5src/views/archivesManage/archivesCheck/module/checkDetail.vue
-
120src/views/archivesManage/lendManage/toLend/index.vue
-
152src/views/archivesManage/lendManage/toLend/module/lendRecord.vue
-
66src/views/components/InputSelect.vue
@ -0,0 +1,152 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="recordFormVisible" title="借阅登记"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<el-form |
|||
ref="recordFormDom" |
|||
:model="recordForm" |
|||
:rules="rules" |
|||
size="small" |
|||
label-width="80px" |
|||
style="margin-left:85px" |
|||
> |
|||
<el-form-item label="借阅人" prop="borrowerName"> |
|||
<!-- <el-input v-model="recordForm.borrowerName" style="width: 320px" /> --> |
|||
<input-select :options="options" @selectValue="handleSelectValue" /> |
|||
</el-form-item> |
|||
<el-form-item label="电话号码" prop="tel"> |
|||
<el-input v-model="recordForm.tel" /> |
|||
</el-form-item> |
|||
<el-form-item label="所属部门" prop="department" class="down-select"> |
|||
<el-select |
|||
v-model="recordForm.departmentDatas" |
|||
multiple |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in recordForm.departmentDatas" |
|||
:key="item.name" |
|||
:disabled="level !== 1 && item.level <= level" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="证件类型" prop="idType" class="down-select"> |
|||
<el-select |
|||
v-model="recordForm.idType" |
|||
multiple |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in recordForm.idType" |
|||
:key="item.name" |
|||
:disabled="level !== 1 && item.level <= level" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="证件号码" prop="idNumber"> |
|||
<el-input v-model="recordForm.idNumber" /> |
|||
</el-form-item> |
|||
<el-form-item label="借阅时间" prop="lendDate"> |
|||
<date-range-picker v-model="lendDates" /> |
|||
<!-- <el-date-picker v-model="lendDates" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" style="width: 420px;" /> --> |
|||
</el-form-item> |
|||
<el-form-item label="借阅目的" prop="borrowGoal" class="down-select"> |
|||
<el-select |
|||
v-model="recordForm.borrowGoal" |
|||
multiple |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in recordForm.borrowGoal" |
|||
:key="item.name" |
|||
:disabled="level !== 1 && item.level <= level" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="handleRecordConfirm">确认</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
import InputSelect from '@/views/components/InputSelect.vue' |
|||
|
|||
export default { |
|||
components: { DateRangePicker, InputSelect }, |
|||
data() { |
|||
return { |
|||
lendDates: '', |
|||
recordFormVisible: false, |
|||
recordForm: { |
|||
borrowerName: '', |
|||
tel: '', |
|||
departmentDatas: [], |
|||
idType: [], |
|||
idNumber: '', |
|||
lendDate: '', |
|||
borrowGoal: [] |
|||
}, |
|||
rules: { |
|||
borrowerName: [ |
|||
{ required: true, message: '请输入姓名', trigger: 'blur' } |
|||
], |
|||
tel: [{ required: true, message: '请输入电话号码', trigger: 'blur' }] |
|||
}, |
|||
options: [ |
|||
{ |
|||
value: '小红-000000000000', |
|||
label: '小红-000000000000' |
|||
}, { |
|||
value: '小明-111111111111', |
|||
label: '小明-111111111111' |
|||
}, |
|||
{ |
|||
value: '小黑-222222222222', |
|||
label: '小黑-222222222222' |
|||
} |
|||
|
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleRecordConfirm() { |
|||
// console.log(this.lendDates) |
|||
this.$refs.recordFormDom.validate((valid) => { |
|||
if (valid) { |
|||
this.$message({ |
|||
message: '登记成功！', |
|||
type: 'success' |
|||
}) |
|||
this.recordFormVisible = false |
|||
} else { |
|||
this.$message.error('登记失败！') |
|||
return false |
|||
} |
|||
}) |
|||
}, |
|||
handleSelectValue(val) { |
|||
console.log(val, '-------------') |
|||
this.recordForm.tel = val.split('-')[1] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-input__inner{ |
|||
width: 320px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<div> |
|||
<el-select |
|||
v-model="value" |
|||
placeholder="请选择" |
|||
clearable |
|||
filterable |
|||
@clear="selectClear" |
|||
@change="selectChange" |
|||
> |
|||
<el-option |
|||
v-for="(item,index) in options" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
options: { |
|||
type: Array, |
|||
required: true, |
|||
default() { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
value: '', |
|||
selectValue: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
selectValue(val) { |
|||
this.$emit('selectValue', val) |
|||
} |
|||
}, |
|||
methods: { |
|||
// selectBlur(e) { |
|||
// if (e.target.value !== '') { |
|||
// console.log(e) |
|||
// this.$forceUpdate() // 强制更新 |
|||
// } |
|||
// }, |
|||
selectClear() { |
|||
this.value = '' |
|||
this.$forceUpdate() |
|||
}, |
|||
selectChange(val) { |
|||
this.selectValue = val |
|||
this.value = this.selectValue.split('-')[0] |
|||
this.$forceUpdate() |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue