1 changed files with 141 additions and 0 deletions
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog class="bindingDialog" :title="bindingTitle" :visible.sync="bindingVisible" :close-on-click-modal="false" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="binding-wrap"> |
||||
|
<div v-if="isBinding" class="rebinding"> |
||||
|
<span>TID</span> |
||||
|
<el-input v-model="tidCode" placeholder="请输入内容" /> |
||||
|
</div> |
||||
|
<div v-else class="binding-flow"> |
||||
|
<div class="step-item"> |
||||
|
<!-- step-active 完成 step-loading 进行种 --> |
||||
|
<span class="step-left-num step-active">1</span> |
||||
|
<div class="step-right-cont"> |
||||
|
<p class="step-title">第一步<span>连接读写器</span></p> |
||||
|
<p class="step-tip tip-active">连接成功</p> |
||||
|
<!-- err: 连接失败，请检查网络 --> |
||||
|
<!-- err: 当前电脑未绑定读写器，请到档案设备里进行绑定 --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="step-item"> |
||||
|
<span class="step-left-num step-active step-loading">2</span> |
||||
|
<div class="pulse1" /> |
||||
|
<div class="pulse2" /> |
||||
|
<div class="pulse3" /> |
||||
|
<div class="step-right-cont"> |
||||
|
<p class="step-title">第二步<span>放入标签</span></p> |
||||
|
<p class="step-tip tip-error">请放入标签</p> |
||||
|
<!-- tip: 已放入标签 --> |
||||
|
<!-- err: 未读取到标签，请重新放入 --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="step-item"> |
||||
|
<span class="step-left-num">3</span> |
||||
|
<div class="step-right-cont"> |
||||
|
<p class="step-title">第三步<span>读取标签</span></p> |
||||
|
<p class="step-tip">放入标签后开始读取标签</p> |
||||
|
<!-- tip: 读取成功 --> |
||||
|
<!-- err: 当前标签存在多个，请取出多余的标签只保留一张！ --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="step-item"> |
||||
|
<span class="step-left-num">4</span> |
||||
|
<div class="step-right-cont"> |
||||
|
<p class="step-title">第四步<span>开始绑定</span></p> |
||||
|
<p class="step-tip">标签读取成功后，开始绑定档案</p> |
||||
|
<!-- tip: 绑定中 --> |
||||
|
<!-- err: 当前标签已被绑定，是否覆盖？ --> |
||||
|
<!-- 3s后 弹出覆盖绑定dialog --> |
||||
|
<!-- tip: 已覆盖 --> |
||||
|
<!-- err: 绑定失败，请拿走当前标签 --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="step-item"> |
||||
|
<span class="step-left-num">5</span> |
||||
|
<div class="step-right-cont"> |
||||
|
<p class="step-title">第五步<span>绑定成功</span></p> |
||||
|
<p class="step-tip">当前标签与档案绑定成功</p> |
||||
|
<!-- tip: 绑定成功 --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="isBinding" slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="isBinding=false">下一步</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 是否覆盖 --> |
||||
|
<el-dialog title="覆盖绑定" :append-to-body="true" :visible.sync="coverBindingVisible" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="dialog-delt"> |
||||
|
<p><span>当前标签已被绑定，是否覆盖？</span></p> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary">确定覆盖</el-button> |
||||
|
<el-button type="text" @click="coverBindingVisible=false">取消</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'BindingTagDlg', |
||||
|
components: {}, |
||||
|
mixins: [], |
||||
|
props: { |
||||
|
isBinding: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
bindingId: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
bindingType: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
bindingVisible: false, // 绑定标签 |
||||
|
bindingTitle: '绑定标签', |
||||
|
tidCode: null, |
||||
|
coverBindingVisible: false |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// test |
||||
|
// setTimeout(() => { |
||||
|
// this.coverBindingVisible = true |
||||
|
// }, 4000) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 右边初始化数据是空 |
||||
|
// [CRUD.HOOK.beforeRefresh]() { |
||||
|
// if (this.$refs.dictDetail) { |
||||
|
// this.$refs.dictDetail.query.id = '' |
||||
|
// } |
||||
|
// return true |
||||
|
// }, |
||||
|
// 关闭 |
||||
|
handleClose(done) { |
||||
|
this.coverBindingVisible = false |
||||
|
done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue