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